css-zero 0.0.37 → 0.0.39

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d03cbc1032455ed1426a832bd3f71fcc6091275b6a6a75fa1d2111cf0105f24
-  data.tar.gz: e4aae85c8fdcea540a262ae0de03546c367afabb6a3bbb0e769eceff328e3a2b
+  metadata.gz: c1bd36382642c26e7ccfb6659948ab080b708909dd80e8168b3e7149dc2f27ab
+  data.tar.gz: cb7f89e2c79deb6b134accafbcc012928045d6f155a331cd7a11abdba45bc771
 SHA512:
-  metadata.gz: eae8de16d7008f3c47960c19a90840e236b9846505b3e988d20c10c41f21e5319200bb10b1fd0154d9dc61072bddb479efd8369597c9051bd1724ac32b64ecb0
-  data.tar.gz: 8fcecce58a61bfa94b08879bd9338357988cb217da22c3398f6832b2a2842fc2d0802c9403502b70f80531dc7100b6d8fd591d0dc10211c4ba2185f994494c6e
+  metadata.gz: c7b281b3c1fd86decc8cd6df0a14859c6ee2565625f933a14e0f18d9a733d8cb89a75303e7500450af83eda10f82ea9aa744c9d7284c252b3488412aabb92797
+  data.tar.gz: 73ce63baeb7fef096081772831efcdff2319262c5f59ab3bcf8ca04d8951811c8b1b8e5738f3c8e41f717186ed218cc52ab1491b231427a8a16ca58d42c1b0e0

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 avatar badge breadcrumb button card carousel collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
+bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel command collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
 ```
 
 ### Requirements

data/app/assets/stylesheets/sizes.css

@@ -68,21 +68,21 @@
   --size-full:  100%;
 
   /****************************************************************
-  * Widths
+  * Max Inline Sizes
   *****************************************************************/
-  --width-3xs:   16rem; /* 256px */
-  --width-2xs:   18rem; /* 288px */
-  --width-xs:    20rem; /* 320px */
-  --width-sm:    24rem; /* 384px */
-  --width-md:    28rem; /* 448px */
-  --width-lg:    32rem; /* 512px */
-  --width-xl:    36rem; /* 576px */
-  --width-2xl:   42rem; /* 672px */
-  --width-3xl:   48rem; /* 768px */
-  --width-4xl:   56rem; /* 896px */
-  --width-5xl:   64rem; /* 1024px */
-  --width-6xl:   72rem; /* 1152px */
-  --width-7xl:   80rem; /* 1280px */
+  --max-i-3xs: 16rem; /* 256px */
+  --max-i-2xs: 18rem; /* 288px */
+  --max-i-xs:  20rem; /* 320px */
+  --max-i-sm:  24rem; /* 384px */
+  --max-i-md:  28rem; /* 448px */
+  --max-i-lg:  32rem; /* 512px */
+  --max-i-xl:  36rem; /* 576px */
+  --max-i-2xl: 42rem; /* 672px */
+  --max-i-3xl: 48rem; /* 768px */
+  --max-i-4xl: 56rem; /* 896px */
+  --max-i-5xl: 64rem; /* 1024px */
+  --max-i-6xl: 72rem; /* 1152px */
+  --max-i-7xl: 80rem; /* 1280px */
 
   /****************************************************************
   * Aspect Ratio

data/app/assets/stylesheets/zutilities.css

@@ -148,12 +148,12 @@
 .relative { position: relative; }
 .sticky	{ position: sticky; }
 
-.min-w-0 { min-inline-size: 0; }
-.max-w-full { max-inline-size: 100%; }
+.min-i-0 { min-inline-size: 0; }
+.max-i-full { max-inline-size: 100%; }
 
-.h-full { block-size: 100%; }
-.w-full { inline-size: 100%; }
-.w-min { inline-size: min-content; }
+.b-full { block-size: 100%; }
+.i-full { inline-size: 100%; }
+.i-min { inline-size: min-content; }
 
 .overflow-x-auto { overflow-x: auto; scroll-snap-type: x mandatory; }
 .overflow-y-auto { overflow-y: auto; scroll-snap-type: y mandatory; }
@@ -169,70 +169,77 @@
 * Margin
 *****************************************************************/
 .m-0 { margin: 0; }
-.m-0\.5 { margin: var(--size-0_5); }
 .m-1 { margin: var(--size-1); }
 .m-2 { margin: var(--size-2); }
+.m-3 { margin: var(--size-3); }
 .m-4 { margin: var(--size-4); }
+.m-5 { margin: var(--size-5); }
 .m-6 { margin: var(--size-6); }
 .m-8 { margin: var(--size-8); }
 .m-10 { margin: var(--size-10); }
 .m-auto { margin: auto; }
 
 .mb-0 { margin-block: 0; }
-.mb-0\.5 { margin-block: var(--size-0_5); }
 .mb-1 { margin-block: var(--size-1); }
 .mb-2 { margin-block: var(--size-2); }
+.mb-3 { margin-block: var(--size-3); }
 .mb-4 { margin-block: var(--size-4); }
+.mb-5 { margin-block: var(--size-5); }
 .mb-6 { margin-block: var(--size-6); }
 .mb-8 { margin-block: var(--size-8); }
 .mb-10 { margin-block: var(--size-10); }
 .mb-auto { margin-block: auto; }
 
 .mbs-0 { margin-block-start: 0; }
-.mbs-0\.5 { margin-block-start: var(--size-0_5); }
 .mbs-1 { margin-block-start: var(--size-1); }
 .mbs-2 { margin-block-start: var(--size-2); }
+.mbs-3 { margin-block-start: var(--size-3); }
 .mbs-4 { margin-block-start: var(--size-4); }
+.mbs-5 { margin-block-start: var(--size-5); }
 .mbs-6 { margin-block-start: var(--size-6); }
 .mbs-8 { margin-block-start: var(--size-8); }
 .mbs-10 { margin-block-start: var(--size-10); }
 .mbs-auto { margin-block-start: auto; }
 
 .mbe-0 { margin-block-end: 0; }
-.mbe-0\.5 { margin-block-end: var(--size-0_5); }
 .mbe-1 { margin-block-end: var(--size-1); }
 .mbe-2 { margin-block-end: var(--size-2); }
+.mbe-3 { margin-block-end: var(--size-3); }
 .mbe-4 { margin-block-end: var(--size-4); }
+.mbe-5 { margin-block-end: var(--size-5); }
 .mbe-6 { margin-block-end: var(--size-6); }
 .mbe-8 { margin-block-end: var(--size-8); }
 .mbe-10 { margin-block-end: var(--size-10); }
 .mbe-auto { margin-block-end: auto; }
 
 .mi-0 { margin-inline: 0; }
-.mi-0\.5 { margin-inline: var(--size-0_5); }
 .mi-1 { margin-inline: var(--size-1); }
 .mi-2 { margin-inline: var(--size-2); }
+.mi-3 { margin-inline: var(--size-3); }
 .mi-4 { margin-inline: var(--size-4); }
+.mi-5 { margin-inline: var(--size-5); }
 .mi-6 { margin-inline: var(--size-6); }
 .mi-8 { margin-inline: var(--size-8); }
 .mi-10 { margin-inline: var(--size-10); }
 .mi-auto { margin-inline: auto; }
 
 .mis-0 { margin-inline-start: 0; }
-.mis-0\.5 { margin-inline-start: var(--size-0_5); }
 .mis-1 { margin-inline-start: var(--size-1); }
 .mis-2 { margin-inline-start: var(--size-2); }
+.mis-3 { margin-inline-start: var(--size-3); }
 .mis-4 { margin-inline-start: var(--size-4); }
+.mis-5 { margin-inline-start: var(--size-5); }
 .mis-6 { margin-inline-start: var(--size-6); }
 .mis-8 { margin-inline-start: var(--size-8); }
 .mis-10 { margin-inline-start: var(--size-10); }
 .mis-auto { margin-inline-start: auto; }
 
 .mie-0 { margin-inline-end: 0; }
-.mie-0\.5 { margin-inline-end: var(--size-0_5); }
 .mie-1 { margin-inline-end: var(--size-1); }
 .mie-2 { margin-inline-end: var(--size-2); }
+.mie-3 { margin-inline-end: var(--size-3); }
 .mie-4 { margin-inline-end: var(--size-4); }
+.mie-5 { margin-inline-end: var(--size-5); }
 .mie-6 { margin-inline-end: var(--size-6); }
 .mie-8 { margin-inline-end: var(--size-8); }
 .mie-10 { margin-inline-end: var(--size-10); }
@@ -242,68 +249,88 @@
 * Padding
 *****************************************************************/
 .p-0 { padding: 0; }
-.p-0\.5 { padding: var(--size-0_5); }
 .p-1 { padding: var(--size-1); }
 .p-2 { padding: var(--size-2); }
+.p-3 { padding: var(--size-3); }
 .p-4 { padding: var(--size-4); }
+.p-5 { padding: var(--size-5); }
 .p-6 { padding: var(--size-6); }
 .p-8 { padding: var(--size-8); }
 .p-10 { padding: var(--size-10); }
 
 .pb-0 { padding-block: 0; }
-.pb-0\.5 { padding-block: var(--size-0_5); }
 .pb-1 { padding-block: var(--size-1); }
 .pb-2 { padding-block: var(--size-2); }
+.pb-3 { padding-block: var(--size-3); }
 .pb-4 { padding-block: var(--size-4); }
+.pb-5 { padding-block: var(--size-5); }
 .pb-6 { padding-block: var(--size-6); }
 .pb-8 { padding-block: var(--size-8); }
 .pb-10 { padding-block: var(--size-10); }
 
 .pbs-0 { padding-block-start: 0; }
-.pbs-0\.5 { padding-block-start: var(--size-0_5); }
 .pbs-1 { padding-block-start: var(--size-1); }
 .pbs-2 { padding-block-start: var(--size-2); }
+.pbs-3 { padding-block-start: var(--size-3); }
 .pbs-4 { padding-block-start: var(--size-4); }
+.pbs-5 { padding-block-start: var(--size-5); }
 .pbs-6 { padding-block-start: var(--size-6); }
 .pbs-8 { padding-block-start: var(--size-8); }
 .pbs-10 { padding-block-start: var(--size-10); }
 
 .pbe-0 { padding-block-end: 0; }
-.pbe-0\.5 { padding-block-end: var(--size-0_5); }
 .pbe-1 { padding-block-end: var(--size-1); }
 .pbe-2 { padding-block-end: var(--size-2); }
+.pbe-3 { padding-block-end: var(--size-3); }
 .pbe-4 { padding-block-end: var(--size-4); }
+.pbe-5 { padding-block-end: var(--size-5); }
 .pbe-6 { padding-block-end: var(--size-6); }
 .pbe-8 { padding-block-end: var(--size-8); }
 .pbe-10 { padding-block-end: var(--size-10); }
 
 .pi-0 { padding-inline: 0; }
-.pi-0\.5 { padding-inline: var(--size-0_5); }
 .pi-1 { padding-inline: var(--size-1); }
 .pi-2 { padding-inline: var(--size-2); }
+.pi-3 { padding-inline: var(--size-3); }
 .pi-4 { padding-inline: var(--size-4); }
+.pi-5 { padding-inline: var(--size-5); }
 .pi-6 { padding-inline: var(--size-6); }
 .pi-8 { padding-inline: var(--size-8); }
 .pi-10 { padding-inline: var(--size-10); }
 
 .pis-0 { padding-inline-start: 0; }
-.pis-0\.5 { padding-inline-start: var(--size-0_5); }
 .pis-1 { padding-inline-start: var(--size-1); }
 .pis-2 { padding-inline-start: var(--size-2); }
+.pis-3 { padding-inline-start: var(--size-3); }
 .pis-4 { padding-inline-start: var(--size-4); }
+.pis-5 { padding-inline-start: var(--size-5); }
 .pis-6 { padding-inline-start: var(--size-6); }
 .pis-8 { padding-inline-start: var(--size-8); }
 .pis-10 { padding-inline-start: var(--size-10); }
 
 .pie-0 { padding-inline-end: 0; }
-.pie-0\.5 { padding-inline-end: var(--size-0_5); }
 .pie-1 { padding-inline-end: var(--size-1); }
 .pie-2 { padding-inline-end: var(--size-2); }
+.pie-3 { padding-inline-end: var(--size-3); }
 .pie-4 { padding-inline-end: var(--size-4); }
+.pie-5 { padding-inline-end: var(--size-5); }
 .pie-6 { padding-inline-end: var(--size-6); }
 .pie-8 { padding-inline-end: var(--size-8); }
 .pie-10 { padding-inline-end: var(--size-10); }
 
+/****************************************************************
+* Hiding/Showing based on media query size
+*****************************************************************/
+.show\@sm, .show\@md, .show\@lg { display: none; }
+
+.show\@sm { @media (width >= 40rem) { display: flex; } }
+.show\@md { @media (width >= 48rem) { display: flex; } }
+.show\@lg { @media (width >= 64rem) { display: flex; } }
+
+.hide\@sm { @media (width >= 40rem) { display: none; } }
+.hide\@md { @media (width >= 48rem) { display: none; } }
+.hide\@lg { @media (width >= 64rem) { display: none; } }
+
 /****************************************************************
 * Accessibility
 *****************************************************************/

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.37"
+  VERSION = "0.0.39"
 end

data/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 flash fullscreen hotkey input input_concerns layouts lightbox pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
+  accordion alert avatar badge breadcrumb button card carousel command collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
 
 Example:
     bin/rails generate css_zero:add [components...]

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

@@ -20,6 +20,10 @@ carousel:
   - app/javascript/controllers/carousel_controller.js
   - app/assets/images/arrow-left.svg
   - app/assets/images/arrow-right.svg
+command:
+  - app/assets/stylesheets/command.css
+  - app/javascript/controllers/command_controller.js
+  - app/assets/images/search.svg
 collapsible:
   - app/javascript/controllers/collapsible_controller.js
 dialog:
@@ -39,23 +43,27 @@ input:
   - app/assets/images/select-arrow.svg
   - app/javascript/controllers/check_all_controller.js
 input_concerns:
-  - app/javascript/controllers/autoselect_controller.js
   - app/javascript/controllers/copyable_input_controller.js
+  - app/assets/images/copy.svg
+  - app/assets/images/check.svg
   - app/javascript/controllers/clearable_input_controller.js
+  - app/assets/images/x.svg
   - app/javascript/controllers/revealable_input_controller.js
-  - app/assets/images/copy.svg
   - app/assets/images/eye.svg
   - app/assets/images/eye-off.svg
-  - app/assets/images/x.svg
+  - app/javascript/controllers/autoselect_controller.js
 layouts:
   - app/assets/stylesheets/layouts.css
   - app/assets/images/menu.svg
 lightbox:
   - app/assets/stylesheets/lightbox.css
   - app/javascript/controllers/lightbox_controller.js
+  - app/javascript/controllers/web_share_controller.js
   - app/assets/images/download.svg
   - app/assets/images/share.svg
   - app/assets/images/x.svg
+local_time:
+  - app/javascript/controllers/local_time_controller.js
 pagination:
   - app/assets/images/chevron-right.svg
   - app/assets/images/chevron-left.svg
@@ -70,9 +78,9 @@ sheet:
   - app/assets/images/x.svg
 skeleton:
   - app/assets/stylesheets/skeleton.css
-  - app/javascript/controllers/form_controller.js
 switch:
   - app/assets/stylesheets/switch.css
+  - app/javascript/controllers/form_controller.js
 table:
   - app/assets/stylesheets/table.css
 tabs:

data/lib/generators/css_zero/add/templates/app/assets/images/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check"><path d="M20 6 9 17l-5-5"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>

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

@@ -1,16 +1,18 @@
 :where(.accordion) {
   details {
     border-block-end-width: var(--border);
+    interpolate-size: allow-keywords;
 
     &::details-content {
-      block-size: 0; overflow: hidden;
+      block-size: 0;
+      overflow-y: clip;
       transition-behavior: allow-discrete;
       transition-duration: var(--time-150);
       transition-property: content-visibility height;
     }
 
     &[open]::details-content {
-      block-size: calc-size(auto);
+      block-size: auto;
     }
 
     &[open] summary::after {

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

@@ -1,8 +1,9 @@
 .avatar {
+  --radius: var(--rounded-full);
   --size: var(--avatar-size, var(--size-10));
 
   block-size: var(--size);
-  border-radius: var(--rounded-full);
+  border-radius: var(--radius);
   display: flex;
   flex-shrink: 0;
   inline-size: var(--size);
@@ -14,33 +15,22 @@
     inline-size: var(--size-full);
     object-fit: cover;
   }
-}
-
-.avatar--btn {
-  cursor: pointer;
 
-  &:hover {
-    filter: var(--brightness-75);
-  }
-
-  &:focus-visible {
-    outline: var(--border-2) solid var(--color-selected-dark);
-    outline-offset: var(--border-2);
-  }
-
-  &:disabled {
-    pointer-events: none;
+  span[role=img] {
+    align-items: center;
+    background-color: var(--color-border-light);
+    block-size: var(--size-full);
+    border-radius: var(--radius);
+    display: flex;
+    font-size: calc(var(--size) * .4);
+    inline-size: var(--size-full);
+    justify-content: center;
+    user-select: none;
   }
 }
 
-.avatar__fallback {
-  align-items: center;
-  background-color: var(--color-border-light);
-  block-size: var(--size-full);
-  border-radius: var(--rounded-full);
-  display: flex;
-  font-size: calc(var(--size) * .4);
-  inline-size: var(--size-full);
-  justify-content: center;
-  user-select: none;
+.btn--avatar {
+  --btn-padding: 0;
+  --btn-icon-color: none;
+  --btn-radius: var(--radius);
 }

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

@@ -6,10 +6,10 @@
   color: var(--btn-color, var(--color-text));
   cursor: pointer;
   display: inline-flex;
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
+  font-size: var(--btn-font-size, var(--text-sm));
+  font-weight: var(--btn-font-weight, var(--font-medium));
   gap: var(--size-2);
-  justify-content: center;
+  justify-content: var(--btn-justify-content, center);
   white-space: nowrap;
   padding: var(--btn-padding, 0.5rem 1rem);
   text-align: center;
@@ -19,15 +19,17 @@
   }
 
   &:hover {
-    filter: var(--btn-filter-hover, var(--brightness-95));
+    --hover-color: var(--btn-background, var(--color-bg));
+    --hover-color-l: var(--btn-hover-lightness, calc(l * .96));
+    background-color: oklch(from var(--hover-color) var(--hover-color-l) c h);
   }
 
   &:focus-visible {
-    outline: var(--border-2) solid var(--color-selected-dark);
+    outline: var(--btn-outline-size, 2px) solid var(--color-selected-dark);
     outline-offset: var(--border-2);
   }
 
-  &:disabled {
+  &:is(:disabled, [aria-disabled]) {
     opacity: var(--opacity-50);
     pointer-events: none;
   }
@@ -66,18 +68,15 @@
 .btn--plain {
   --btn-background: transparent;
   --btn-border-color: transparent;
+  --btn-hover-lightness: 100%;
   --btn-padding: 0;
 }
 
-.btn--rounded {
+.btn--icon {
   --btn-padding: var(--size-2);
   --btn-radius: var(--rounded-full);
 }
 
-.btn--pressed:active {
-  opacity: var(--opacity-50);
-}
-
 [aria-busy] .btn--loading:disabled {
   > * {
     visibility: hidden;

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

@@ -1,21 +1,10 @@
-.carousel {
-  align-items: center;
-  display: flex;
-  gap: var(--size-4);
-}
-
 .carousel__content {
   display: flex;
   gap: var(--size-6);
-  overflow-x: auto;
+  overflow: hidden;
   padding: var(--size-1);
-  scrollbar-width: none;
   scroll-snap-type: x mandatory;
 
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
   > * {
     flex: 0 0 100%;
     scroll-snap-stop: always;

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

@@ -0,0 +1,56 @@
+.command {
+  border-width: var(--border);
+  border-radius: var(--rounded-lg);
+  box-shadow: var(--shadow-sm);
+  display: flex;
+  flex-direction: column;
+}
+
+.command__input {
+  --input-background: transparent;
+  --input-border-color: transparent;
+  --input-outline-size: 0;
+}
+
+.command__list {
+  max-block-size: 300px;
+  overflow-y: auto;
+}
+
+.command__group {
+  border-block-start-width: var(--border);
+  display: flex;
+  flex-direction: column;
+  padding: var(--size-1);
+}
+
+.command__group-header {
+  color: var(--color-text-subtle);
+  font-size: var(--text-xs);
+  padding: var(--size-1_5) var(--size-2);
+}
+
+.command__item {
+  --btn-border-color: transparent;
+  --btn-font-weight: var(--font-normal);
+  --btn-justify-content: start;
+  --btn-outline-size: 0;
+  --btn-padding: var(--size-1_5) var(--size-2);
+
+  &:focus-visible {
+    --btn-background: var(--color-secondary);
+  }
+}
+
+.command__item-key {
+  color: var(--color-text-subtle);
+  font-size: var(--text-xs);
+  margin-inline-start: auto;
+}
+
+.command__list--filtering {
+  .command__group { display: none; }
+  .command__group:has(.selected) { display: flex; }
+  .command__item { display: none; }
+  .command__item:is(.selected) { display: flex; }
+}

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

@@ -6,7 +6,7 @@
   color: var(--color-text);
   inline-size: var(--size-full);
   margin: auto;
-  max-inline-size: var(--dialog-width, var(--width-lg));
+  max-inline-size: var(--dialog-width, var(--max-i-lg));
 
   &::backdrop {
     background-color: rgba(0, 0, 0, .8);

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

@@ -1,11 +1,11 @@
 .input {
   appearance: none;
-  background-color: var(--color-bg);
-  border: var(--border) solid var(--color-border);
-  border-radius: var(--rounded-md);
-  font-size: var(--text-sm);
+  background-color: var(--input-background, var(--color-bg));
+  border: 1px solid var(--input-border-color, var(--color-border));
+  border-radius: var(--input-radius, var(--rounded-md));
+  font-size: var(--input-font-size, var(--text-sm));
   inline-size: var(--size-full);
-  padding: var(--size-2) var(--size-3);
+  padding: var(--input-padding, 0.5rem 1rem);
 
   option {
     padding-block: revert;
@@ -34,7 +34,7 @@
   }
 
   &:user-invalid ~ .invalid-feedback {
-    display: block;
+    display: flex;
   }
 
   &:disabled {
@@ -50,13 +50,13 @@
 
 /* Containers that act like (and contain) inputs */
 .input--actor {
-  &:focus-within {
-    outline: var(--border-2) solid var(--color-selected-dark);
-    outline-offset: var(--border-2);
+  input {
+    border: 0; inline-size: 100%; outline: 0;
   }
 
-  .input__character {
-    border: 0; inline-size: 100%; outline: 0;
+  &:focus-within {
+    outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
+    outline-offset: var(--border-2);
   }
 }
 
@@ -73,7 +73,7 @@
 /* Styles that are shared between components */
 :is(.input, .checkbox, .radio, .range) {
   &:focus-visible {
-    outline: var(--border-2) solid var(--color-selected-dark);
+    outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
     outline-offset: var(--border-2);
   }
 

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

@@ -14,10 +14,6 @@
   }
 }
 
-.sidebar__toggle {
-  @media (width >= 48rem) { display: none; }
-}
-
 .pancake-stack {
   display: grid;
   grid-template-rows: auto 1fr auto;

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

@@ -1,14 +1,10 @@
-:root {
-  --lightbox-padding: var(--size-4);
-}
-
 .lightbox {
   background-color: rgba(0, 0, 0, .8);
   block-size: 100dvh;
   max-block-size: unset;
   inline-size: 100dvw;
   max-inline-size: unset;
-  padding: var(--lightbox-padding);
+  padding: var(--size-4);
 
   &[open] {
     display: grid;
@@ -36,6 +32,6 @@
 
 .lightbox__image {
   grid-area: 1/1;
-  max-inline-size: calc(100dvw - (var(--lightbox-padding) * 2));
-  max-block-size:  calc(100dvh - (var(--lightbox-padding) * 2));
+  max-inline-size: calc(100dvw - (var(--size-4) * 2));
+  max-block-size:  calc(100dvh - (var(--size-4) * 2));
 }

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

@@ -7,7 +7,7 @@
   inline-size: var(--size-3-4);
   margin-inline: var(--sheet-margin);
   max-block-size: unset;
-  max-inline-size: var(--width-sm);
+  max-inline-size: var(--max-i-sm);
 
   &::backdrop {
     background-color: rgba(0, 0, 0, .8);

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

@@ -1,9 +1,3 @@
-.tabs {
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-2);
-}
-
 .tabs__list {
   background-color: var(--color-border-light);
   block-size: var(--size-10);
@@ -12,18 +6,16 @@
   display: inline-flex;
   gap: var(--size-2);
   padding: var(--size-1);
+}
 
-  button {
-    inline-size: var(--size-full);
-  }
+.btn--tab {
+  --btn-background: transparent;
+  --btn-border-color: transparent;
+  --btn-hover-lightness: 100%;
 
-  button {
-    --btn-background: transparent;
-    --btn-border-color: transparent;
-    --btn-filter-hover: none;
-  }
+  inline-size: var(--size-full);
 
-  button[aria-selected=true] {
+  &[aria-selected=true] {
     --btn-background: var(--color-bg);
   }
 }

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

@@ -1,6 +1,4 @@
-.toggle {
-  display: inline-flex;
-
+.btn--toggle {
   [type="checkbox"] {
     position: absolute; clip: rect(0, 0, 0, 0);
   }

data/lib/generators/css_zero/add/templates/app/javascript/controllers/check_all_controller.js

@@ -3,7 +3,7 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = [ "dependent" ]
 
-  check({target}) {
+  check({ target }) {
     this.dependentTargets.forEach(element => element.checked = target.checked)
   }
 }

data/lib/generators/css_zero/add/templates/app/javascript/controllers/command_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus"
+import { debounce } from "helpers/timing_helpers"
+
+export default class extends Controller {
+  static targets = [ "list" ]
+  static classes = [ "active", "selected" ]
+
+  initialize() {
+    this.filter = debounce(this.filter.bind(this), 300)
+  }
+
+  filter(event) {
+    this.#reset()
+
+    if (event.target.value != "") {
+      this.#selectMatches(event.target.value)
+      this.#activate()
+    } else {
+      this.#deactivate()
+    }
+  }
+
+  #activate() {
+    this.listTarget.classList.add(this.activeClass)
+  }
+
+  #deactivate() {
+    this.listTarget.classList.remove(this.activeClass)
+  }
+
+  #selectMatches(value) {
+    this.listTarget.querySelectorAll(`[data-value*=${value.toLowerCase()}]`).forEach((element) => {
+      element.classList.add(this.selectedClass)
+    })
+  }
+
+  #reset() {
+    this.listTarget.querySelectorAll(`.${this.selectedClass}`).forEach((element) => {
+      element.classList.remove(this.selectedClass)
+    })
+  }
+}

data/lib/generators/css_zero/add/templates/app/javascript/controllers/copyable_input_controller.js

@@ -1,13 +1,38 @@
 import { Controller } from "@hotwired/stimulus"
+import { debounce } from "helpers/timing_helpers"
 
 export default class extends Controller {
-  static targets = [ "input" ]
+  static targets = [ "input", "copyIcon", "successIcon" ]
+  static values  = { copied: Boolean }
 
-  async copy() {
+  initialize() {
+    this.reset = debounce(this.reset.bind(this), 2500)
+  }
+
+  copiedValueChanged() {
+    this.#update()
+  }
+
+  copy() {
+    this.#copyToClipboard()
+    this.reset()
+  }
+
+  reset() {
+    this.copiedValue = false
+  }
+
+  #copyToClipboard() {
     try {
-      await navigator.clipboard.writeText(this.inputTarget.value)
-    } catch (error) {
-      console.warn(error.message);
+      navigator.clipboard.writeText(this.inputTarget.value)
+      this.copiedValue = true
+    } catch {
+      this.copiedValue = false
     }
   }
+
+  #update() {
+    this.copyIconTarget.hidden    = this.copiedValue
+    this.successIconTarget.hidden = !this.copiedValue
+  }
 }

data/lib/generators/css_zero/add/templates/app/javascript/controllers/hotkey_controller.js

@@ -2,9 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   click(event) {
-    if (this.#isClickable && !this.#shouldIgnore(event)) {
-      this.element.click()
-    }
+    if (this.#isClickable && !this.#shouldIgnore(event)) this.element.click()
   }
 
   #shouldIgnore(event) {

data/lib/generators/css_zero/add/templates/app/javascript/controllers/local_time_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "time", "date", "datetime" ]
+
+  initialize() {
+    this.timeFormatter = new Intl.DateTimeFormat(undefined, { timeStyle: "short" })
+    this.dateFormatter = new Intl.DateTimeFormat(undefined, { dateStyle: "long" })
+    this.dateTimeFormatter = new Intl.DateTimeFormat(undefined, { timeStyle: "short", dateStyle: "short" })
+  }
+
+  timeTargetConnected(target) {
+    this.#formatTime(this.timeFormatter, target)
+  }
+
+  dateTargetConnected(target) {
+    this.#formatTime(this.dateFormatter, target)
+  }
+
+  datetimeTargetConnected(target) {
+    this.#formatTime(this.dateTimeFormatter, target)
+  }
+
+  #formatTime(formatter, target) {
+    const dt = new Date(target.getAttribute("datetime"))
+    target.textContent = formatter.format(dt)
+    target.title = this.dateTimeFormatter.format(dt)
+  }
+}

data/lib/generators/css_zero/add/templates/app/javascript/controllers/revealable_input_controller.js

@@ -1,19 +1,24 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "input", "image" ]
-  static values  = { showImage: String, hideImage: String }
+  static targets = [ "input", "showIcon", "hideIcon" ]
+  static values  = { revealed: Boolean }
+
+  revealedValueChanged() {
+    this.#update()
+  }
 
   reveal() {
-    this.inputTarget.type = this.#inputType
-    this.imageTarget.src  = this.#imageSrc
+    this.revealedValue = !this.revealedValue
   }
 
-  get #inputType() {
-    return this.inputTarget.type === "text" ? "password" : "text"
+  #update() {
+    this.inputTarget.type      = this.#inputType
+    this.showIconTarget.hidden = this.revealedValue
+    this.hideIconTarget.hidden = !this.revealedValue
   }
 
-  get #imageSrc() {
-    return this.inputTarget.type === "text" ? this.hideImageValue : this.showImageValue
+  get #inputType() {
+    return this.revealedValue ? "text" : "password"
   }
 }

data/lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js

@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = [ "button", "tab" ]
-  static values  = { index: Number, default: 0 }
+  static values  = { index: Number }
 
   indexValueChanged() {
     this.#showSelectedTab()

data/lib/generators/css_zero/install/install_generator.rb

@@ -6,4 +6,18 @@ class CssZero::InstallGenerator < Rails::Generators::Base
   def copy_base_css
     copy_file "app/assets/stylesheets/base.css"
   end
+
+  def copy_javascript_helpers
+    directory "app/javascript/helpers"
+  end
+
+  def pin_javascript_helpers
+    return unless install_with_importmap?
+    append_to_file "config/importmap.rb", %(pin_all_from "app/javascript/helpers", under: "helpers"\n)
+  end
+
+  private
+    def install_with_importmap?
+      Rails.root.join("config/importmap.rb").exist?
+    end
 end

data/lib/generators/css_zero/install/templates/app/javascript/helpers/cookie_helpers.js

@@ -0,0 +1,18 @@
+export function getCookie(name) {
+  const cookies = document.cookie ? document.cookie.split("; ") : []
+  const prefix = `${encodeURIComponent(name)}=`
+  const cookie = cookies.find(cookie => cookie.startsWith(prefix))
+
+  if (cookie) {
+    const value = cookie.split("=").slice(1).join("=")
+    return value ? decodeURIComponent(value) : undefined
+  }
+}
+
+export function setCookie(name, value) {
+  const twentyYears = 20 * 365 * 24 * 60 * 60 * 1000
+  const body = [ name, value ].map(encodeURIComponent).join("=")
+  const expires = new Date(Date.now() + twentyYears).toUTCString()
+  const cookie = `${body}; path=/; expires=${expires}`
+  document.cookie = cookie
+}

data/lib/generators/css_zero/install/templates/app/javascript/helpers/timing_helpers.js

@@ -0,0 +1,39 @@
+export function throttle(fn, delay = 1000) {
+  let timeoutId = null
+
+  return (...args) => {
+    if (!timeoutId) {
+      fn(...args)
+      timeoutId = setTimeout(() => timeoutId = null, delay)
+    }
+  }
+}
+
+export function debounce(fn, delay = 1000) {
+  let timeoutId = null
+
+  return (...args) => {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => fn.apply(this, args), delay)
+  }
+}
+
+export function nextEventLoopTick() {
+  return delay(0)
+}
+
+export function onNextEventLoopTick(callback) {
+  setTimeout(callback, 0)
+}
+
+export function nextFrame() {
+  return new Promise(requestAnimationFrame)
+}
+
+export function nextEventNamed(eventName, element = window) {
+  return new Promise(resolve => element.addEventListener(eventName, resolve, { once: true }))
+}
+
+export function delay(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.37
+  version: 0.0.39
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-09-23 00:00:00.000000000 Z
+date: 2024-09-30 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -38,6 +38,7 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/images/arrow-left.svg
 - lib/generators/css_zero/add/templates/app/assets/images/arrow-right.svg
 - lib/generators/css_zero/add/templates/app/assets/images/camera.svg
+- lib/generators/css_zero/add/templates/app/assets/images/check.svg
 - lib/generators/css_zero/add/templates/app/assets/images/chevron-down.svg
 - lib/generators/css_zero/add/templates/app/assets/images/chevron-left.svg
 - lib/generators/css_zero/add/templates/app/assets/images/chevron-right.svg
@@ -52,6 +53,7 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/images/maximize.svg
 - lib/generators/css_zero/add/templates/app/assets/images/menu.svg
 - lib/generators/css_zero/add/templates/app/assets/images/minus.svg
+- lib/generators/css_zero/add/templates/app/assets/images/search.svg
 - lib/generators/css_zero/add/templates/app/assets/images/select-arrow.svg
 - lib/generators/css_zero/add/templates/app/assets/images/share.svg
 - lib/generators/css_zero/add/templates/app/assets/images/x.svg
@@ -63,6 +65,7 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/command.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
@@ -81,6 +84,7 @@ files:
 - lib/generators/css_zero/add/templates/app/javascript/controllers/check_all_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/clearable_input_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/command_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/copyable_input_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js
@@ -88,6 +92,7 @@ files:
 - lib/generators/css_zero/add/templates/app/javascript/controllers/fullscreen_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/hotkey_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/lightbox_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/local_time_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/revealable_input_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/upload_preview_controller.js
@@ -95,6 +100,8 @@ files:
 - lib/generators/css_zero/install/USAGE
 - lib/generators/css_zero/install/install_generator.rb
 - lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css
+- lib/generators/css_zero/install/templates/app/javascript/helpers/cookie_helpers.js
+- lib/generators/css_zero/install/templates/app/javascript/helpers/timing_helpers.js
 homepage: https://github.com/lazaronixon/css-zero
 licenses:
 - MIT