css-zero 0.0.13 → 0.0.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9fa9b5a675b170c1792a89b840dea6339ee14768644531ec3a1d2b465068e4f5
-  data.tar.gz: 165ee0886c7f61ffe76c06545b367c6b1c5a3cb883a49345433dd6965b748e6b
+  metadata.gz: 534451ca0aee9a1bf1b81e3831c6716e7ac071dbf0ec5f0c2e4805ef86cf9638
+  data.tar.gz: a9a70ae47d1253368e596483adab0134242292465b8b2e4dc20df18b246c7852
 SHA512:
-  metadata.gz: f6c36eb3cc7eb625ee8ed8255bac1aaa409e30ae6202a3e1e6683df5f3be36c74f052d011ba49ed7fda0a1d91dc5fea3ef24aa15392e9ccf0b7c3b1431280dcb
-  data.tar.gz: 52f6d8133c48e4b9e6fd0e6c57f844a7121a516d6cbef6fefac54a0db69759cf42224d9963431eabb05158d802b6a4f1271d869abf056988d034b9bced5d2120
+  metadata.gz: ffd516034332e7b6092dfa659536321295a5047d7e4ab745725c6ea3e9b03611caf8913a89417f680bf0a660c924eaf93264b29d0b4e57681556b3b87568e380
+  data.tar.gz: 8104a1a8a350126a5d5dbe74276ffaafd76aa4f85d8156e45aaf4630edf7fc9c0add9972e21c68392deb88666697117d52a01b02f077129910e729578b65b483

data/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 alert_dialog badge button card dialog input progress switch table
+bin/rails generate css_zero:add accordion alert badge button card dialog input progress switch table
 ```
 
 ### Requirements
@@ -96,7 +96,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <details>
 <summary>Show me the code</summary>
 
-```html
+```html+erb
 <div class="accordion">
   <details name="my_accordion">
     <summary>Is it accessible?</summary>
@@ -132,32 +132,6 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 ```
 </details>
 
-### Alert Dialog
-
-<img width="500" alt="alert_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/483b00fc-0330-45b3-82c5-dc4118987564">
-
-<details>
-<summary>Show me the code</summary>
-
-```html
-<div>
-  <dialog id="my_alert_dialog" class="alert-dialog">
-    <h1 class="text-lg font-semibold">Are you absolutely sure?</h1>
-    <p class="text-sm text-subtle mbs-2">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
-
-    <div class="flex justify-end gap-sm mbs-4">
-      <form method="dialog"><button class="btn btn--outline">Cancel</button></form>
-      <button class="btn btn--primary">Continue</button>
-    </div>
-  </dialog>
-
-  <button class="btn" data-controller="dialog-control" data-dialog-control-target-value="my_alert_dialog" data-action="dialog-control#showModal">
-    Show alert dialog
-  </button>
-</div>
-```
-</details>
-
 ### Badge
 
 <img width="400" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/6a700dc4-0fd5-46f6-9902-a9bde5f7febb">
@@ -165,7 +139,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <details>
 <summary>Show me the code</summary>
 
-```html
+```html+erb
 <div class="flex justify-start gap">
   <div class="badge">Badge</div>
   <div class="badge badge--secondary">Secondary</div>
@@ -183,7 +157,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <details>
 <summary>Show me the code</summary>
 
-```html
+```html+erb
 <div class="flex flex-wrap items-center gap" aria-busy>
   <button class="btn">Primary</button>
   <button class="btn btn--secondary">Secondary</button>
@@ -211,7 +185,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <details>
 <summary>Show me the code</summary>
 
-```html
+```html+erb
 <div class="card flex flex-col gap" style="width: 350px; gap: 1.5rem;">
   <div class="flex flex-col gap-sm">
     <h1 class="text-2xl font-semibold leading-none">Create project</h1>
@@ -245,16 +219,43 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 
 ### Dialog
 
-<img width="400" alt="dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/50c8af20-46bb-4bf9-a233-78877f49e086">
+#### Alert Dialog
+
+<img width="500" alt="alert_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/483b00fc-0330-45b3-82c5-dc4118987564">
 
 <details>
 <summary>Show me the code</summary>
 
-```html
-<artice class="flex flex-col pb-10 pi-2 mi-auto w-full" style="gap: 4rem; max-width: 32rem">
+```html+erb
 <div>
-  <dialog id="my_dialog" class="dialog" style="max-inline-size: 430px;" popover>
-    <button class="btn btn--plain p-0 dialog__close" popovertarget="my_dialog" popovertargetaction="hide">
+  <dialog id="alert_dialog" class="dialog">
+    <h1 class="text-lg font-semibold">Are you absolutely sure?</h1>
+    <p class="text-sm text-subtle mbs-2">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
+
+    <div class="flex justify-end gap-sm mbs-4">
+      <form method="dialog"><button class="btn btn--outline">Cancel</button></form>
+      <button class="btn btn--primary">Continue</button>
+    </div>
+  </dialog>
+
+  <button class="btn" data-controller="dialog-control" data-dialog-control-target-value="alert_dialog" data-action="dialog-control#showModal">
+    Show alert dialog
+  </button>
+</div>
+```
+</details>
+
+#### Dismissible Dialog
+
+<img width="400" alt="dismissible dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/50c8af20-46bb-4bf9-a233-78877f49e086">
+
+<details>
+<summary>Show me the code</summary>
+
+```html+erb
+<div>
+  <dialog id="dismissible_dialog" class="dialog" style="max-inline-size: 430px;" popover>
+    <button class="btn btn--plain p-0 dialog__close" popovertarget="dismissible_dialog" popovertargetaction="hide">
       <%= image_tag "x.svg", aria: { hidden: "true" }, size: 16 %>
       <span class="sr-only">Close</span>
     </button>
@@ -283,8 +284,8 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
     </div>
   </dialog>
 
-  <button class="btn" popovertarget="my_dialog">
-    Show dialog
+  <button class="btn" popovertarget="dismissible_dialog">
+    Show dismissible dialog
   </button>
 </div>
 ```
@@ -364,7 +365,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <details>
 <summary>Show me the code</summary>
 
-```html
+```html+erb
 <table class="table">
   <thead>
     <tr>

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.13"
+  VERSION = "0.0.14"
 end

data/lib/generators/css_zero/add/USAGE

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

data/lib/generators/css_zero/add/resources.yml

@@ -3,9 +3,6 @@ accordion:
   - app/assets/images/chevron-down.svg
 alert:
   - app/assets/stylesheets/alert.css
-alert_dialog:
-  - app/assets/stylesheets/alert_dialog.css
-  - app/javascript/controllers/dialog_control_controller.js
 badge:
   - app/assets/stylesheets/badge.css
 button:
@@ -16,6 +13,7 @@ card:
 dialog:
   - app/assets/stylesheets/dialog.css
   - app/assets/images/x.svg
+  - app/javascript/controllers/dialog_control_controller.js
 input:
   - app/assets/stylesheets/input.css
   - app/assets/images/select-arrow.svg

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css

@@ -28,21 +28,21 @@
   }
 
   /* In animation */
-  &:popover-open {
+  &:is([open], :popover-open) {
     opacity: 1; transform: var(--scale-100);
   }
 
-  &:popover-open::backdrop {
+  &:is([open], :popover-open)::backdrop {
     opacity: 1;
   }
 
   /* Out animation */
   @starting-style {
-    &:popover-open {
+    &:is([open], :popover-open) {
       opacity: 0; transform: var(--scale-95);
     }
 
-    &:popover-open::backdrop {
+    &:is([open], :popover-open)::backdrop {
       opacity: 0;
     }
   }
@@ -59,6 +59,6 @@
 }
 
 /* Prevent page scroll when dialog is open */
-html:has(.dialog:popover-open) {
+html:has(.dialog:is([open], :popover-open)) {
   overflow: hidden;
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.13
+  version: 0.0.14
 platform: ruby
 authors:
 - Lázaro Nixon
@@ -43,7 +43,6 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/images/x.svg
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css
-- lib/generators/css_zero/add/templates/app/assets/stylesheets/alert_dialog.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/alert_dialog.css

@@ -1,59 +0,0 @@
-.alert-dialog {
-  background-color: var(--color-bg);
-  border-width: var(--border);
-  border-radius: var(--rounded-lg);
-  box-shadow: var(--shadow-lg);
-  color: var(--color-text);
-  inline-size: var(--size-full);
-  margin: auto;
-  max-inline-size: var(--width-lg);
-  padding: var(--size-6);
-
-  &::backdrop {
-    background-color: rgba(0, 0, 0, .8);
-  }
-
-  /* Setup animation */
-  opacity: 0;
-  transform: var(--scale-95);
-  transition-behavior: allow-discrete;
-  transition-duration: var(--time-150);
-  transition-property: display overlay opacity transform;
-
-  &::backdrop {
-    opacity: 0;
-    transition-behavior: allow-discrete;
-    transition-duration: var(--time-150);
-    transition-property: display overlay opacity;
-  }
-
-  /* In animation */
-  &[open] {
-    opacity: 1; transform: var(--scale-100);
-  }
-
-  &[open]::backdrop {
-    opacity: 1;
-  }
-
-  /* Out animation */
-  @starting-style {
-    &[open] {
-      opacity: 0; transform: var(--scale-95);
-    }
-
-    &[open]::backdrop {
-      opacity: 0;
-    }
-  }
-
-  /* Small screens */
-  @media (width < 40rem) {
-    border-radius: 0;
-  }
-}
-
-/* Prevent page scroll when alert dialog is open */
-html:has(.alert-dialog[open]) {
-  overflow: hidden;
-}