Add sheet component

CHANGELOG.md

@@ -2,6 +2,7 @@
   - Hide spinner for step any inputs.
   - Fix empty date field height on safari IOS.
   - Move "Prevent page scroll when dialog is open" to reset.
+  - Add sheet component.
 
 ## [0.0.23] - 2024-07-20
   - Don't disable text area resize.

README.md

@@ -19,7 +19,7 @@ bin/rails generate css_zero:install
 Add only the components you need. (Optional)
 
 ```
-bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog input pagination progress prose switch table
+bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog input pagination progress prose sheet switch table
 ```
 
 ### Requirements

lib/generators/css_zero/add/USAGE

@@ -2,7 +2,7 @@ Description:
     This will add components into your project.
 
 Components:
-  accordion alert avatar badge breadcrumb button card carousel collapsible dialog input pagination progress prose switch table
+  accordion alert avatar badge breadcrumb button card carousel collapsible dialog input pagination progress prose sheet switch table
 
 Example:
     bin/rails generate css_zero:add [components...]

lib/generators/css_zero/add/resources.yml

@@ -40,5 +40,9 @@ prose:
   - app/assets/stylesheets/prose.css
 switch:
   - app/assets/stylesheets/switch.css
+sheet:
+  - app/assets/stylesheets/sheet.css
+  - app/javascript/controllers/dialog_controller.js
+  - app/assets/images/x.svg
 table:
   - app/assets/stylesheets/table.css

lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css

@@ -0,0 +1,61 @@
+.sheet {
+  background-color: var(--color-bg);
+  border-inline-start-width: var(--border);
+  box-shadow: var(--shadow-lg);
+  block-size: 100%;
+  color: var(--color-text);
+  inline-size: var(--size-3-4);
+  margin-inline-start: auto;
+  max-block-size: none;
+  max-inline-size: var(--width-sm);
+  padding: var(--size-6);
+
+  &::backdrop {
+    background-color: rgba(0, 0, 0, .8);
+  }
+
+  /* Setup animation */
+  transform: translateX(100%);
+  transition-behavior: allow-discrete;
+  transition-duration: var(--time-500);
+  transition-property: display, overlay, transform;
+
+  &::backdrop {
+    opacity: 0;
+    transition-behavior: allow-discrete;
+    transition-duration: var(--time-150);
+    transition-property: display, overlay, opacity;
+  }
+
+  /* In animation */
+  &[open] {
+    transform: translateX(0);
+  }
+
+  &[open]::backdrop {
+    opacity: 1;
+  }
+
+  /* Out animation */
+  @starting-style {
+    &[open] {
+      transform: translateX(100%);
+    }
+
+    &[open]::backdrop {
+      opacity: 0;
+    }
+  }
+
+  /* Small screens and below */
+  @media (width < 40rem) {
+    max-inline-size: none;
+    text-align: center;
+  }
+}
+
+.sheet__close {
+  inset-block-start: var(--size-4);
+  inset-inline-end: var(--size-4);
+  position: absolute;
+}