css-zero 0.0.38 → 0.0.40

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 609a6d11cfe6b31670eda63d7104d2d76069f0fe352bc4b6f7b0d00e5e7c2ea1
-  data.tar.gz: b118ad5a3842de5ab4df410b5516e62d52b9e241d559ec88f9146cdcc729b68a
+  metadata.gz: 4b3d3e06335e4a698ebc061696a679ed778bb627ec9d7d7ecf860aab7e802212
+  data.tar.gz: f78370339a7f2608e198498814810f3601b5ee77556fc548edf6461a611a7e4d
 SHA512:
-  metadata.gz: 4dafa265f72d212202676d56ae7e3b5d20ee92516829c802a78794c43d3786aa68a7ed274361a2e3077df2e893cd75d298610f3a420e83de2703c0498419771f
-  data.tar.gz: fd08c640bdc6b4409b046e86a8e817dd916fef129c28cc8cb8f0a04c77080bb27c4f372fec509897d17706473e7ef334c081fce1d0e7157717189e7c864a5f95
+  metadata.gz: 25d4acd29c0c630f307c20e49d1650b4f54df0f5afe49cfd20016c293edbdc54e296b631fa3e66cad4b5f90adec0fd3383f9252107716bc90c9fd353cad7c736
+  data.tar.gz: d4b932c7b8114c315634fe90f52f30f6570faa360c6ef9bdeaabf2fe1432b1ea791cff439b8d97a0b2aa1ed78da940c1eb0633d698c3dfdbb3de8eea9ea88693

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 local_time 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,93 @@
 * 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
+*****************************************************************/
+.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; } }
+
+.hide\@pwa { @media (display-mode: standalone) { display: none; } }
+.hide\@browser { @media (display-mode: browser) { display: none; } }
+
+.hide\@print { @media print { display: none; } }
+
 /****************************************************************
 * Accessibility
 *****************************************************************/

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.38"
+  VERSION = "0.0.40"
 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 local_time 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:
@@ -37,17 +41,16 @@ hotkey:
 input:
   - app/assets/stylesheets/input.css
   - 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/javascript/controllers/clearable_input_controller.js
-  - app/javascript/controllers/revealable_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/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

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,46 +1,40 @@
 .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);
   overflow: hidden;
 
+  &:is(.btn) {
+    --btn-padding: 0;
+    --btn-icon-color: none;
+    --btn-radius: var(--radius);
+  }
+
+  &:is(.btn):hover {
+    filter: var(--brightness-90);
+  }
+
   img {
     aspect-ratio: var(--aspect-square);
     block-size: var(--size-full);
     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;
-}

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,11 +68,12 @@
 .btn--plain {
   --btn-background: transparent;
   --btn-border-color: transparent;
-  --btn-filter-hover: none;
+  --btn-hover-lightness: 100%;
   --btn-padding: 0;
 }
 
-.btn--rounded {
+.btn--icon {
+  --btn-padding: var(--size-2);
   --btn-radius: var(--rounded-full);
 }
 

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

@@ -4,48 +4,76 @@
   grid-template-columns: var(--sidebar-width, 0) 1fr;
   grid-template-rows: auto 1fr;
   min-block-size: 100dvh;
+  max-block-size: 100dvh;
 
   @media (width >= 48rem) {
+    --sidebar-border-width: var(--border);
+    --sidebar-padding: var(--size-2);
     --sidebar-width: 220px;
   }
 
   @media (width >= 64rem) {
+    --sidebar-border-width: var(--border);
+    --sidebar-padding: var(--size-4);
     --sidebar-width: 280px;
   }
 }
 
-.sidebar__toggle {
-  @media (width >= 48rem) { display: none; }
-}
-
-.pancake-stack {
+.header-layout {
   display: grid;
-  grid-template-rows: auto 1fr auto;
+  grid-template-areas: "header" "main";
+  grid-template-rows: auto 1fr;
   min-block-size: 100dvh;
 }
 
-.super-centered {
+.centered-layout {
   display: grid;
   place-items: center;
   min-block-size: 100dvh;
 }
 
 .container {
+  inline-size: 100%;
   margin-inline: auto;
   max-inline-size: var(--container-width, 64rem);
-  min-block-size: 100dvh;
 }
 
-/* Grid areas definition */
-
 #header {
+  align-items: center;
+  background-color: var(--color-bg);
+  border-block-end-width: var(--border);
+  block-size: var(--size-16);
+  display: flex;
+  gap: var(--size-4);
   grid-area: header;
+  inset-block-start: 0;
+  padding-inline: var(--size-4);
+  position: sticky;
+
+  @media (width >= 64rem) {
+    padding-inline: var(--size-6);
+  }
 }
 
 #sidebar {
+  border-inline-end-width: var(--sidebar-border-width, 0);
+  display: flex;
+  flex-direction: column;
   grid-area: sidebar;
+  gap: var(--size-2);
+  overflow-x: hidden;
+  padding: var(--sidebar-padding, 0);
 }
 
 #main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-4);
   grid-area: main;
+  overflow-y: auto;
+  padding: var(--size-4);
+
+  @media (width >= 64rem) {
+    gap: var(--size-6); padding: var(--size-6);
+  }
 }

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/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,10 +1,13 @@
 import { Controller } from "@hotwired/stimulus"
+import { debounce } from "helpers/timing_helpers"
 
 export default class extends Controller {
   static targets = [ "input", "copyIcon", "successIcon" ]
   static values  = { copied: Boolean }
 
-  #copiedTimeout = null
+  initialize() {
+    this.reset = debounce(this.reset.bind(this), 2500)
+  }
 
   copiedValueChanged() {
     this.#update()
@@ -12,23 +15,22 @@ export default class extends Controller {
 
   copy() {
     this.#copyToClipboard()
-    this.#reset()
+    this.reset()
+  }
+
+  reset() {
+    this.copiedValue = false
   }
 
   #copyToClipboard() {
     try {
       navigator.clipboard.writeText(this.inputTarget.value)
       this.copiedValue = true
-    } catch (error) {
-      console.warn(error.message);
+    } catch {
+      this.copiedValue = false
     }
   }
 
-  #reset() {
-    clearTimeout(this.#copiedTimeout)
-    this.#copiedTimeout = setTimeout(() => { this.copiedValue = false }, 3000)
-  }
-
   #update() {
     this.copyIconTarget.hidden    = this.copiedValue
     this.successIconTarget.hidden = !this.copiedValue

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.38
+  version: 0.0.40
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-09-24 00:00:00.000000000 Z
+date: 2024-10-01 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -53,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
@@ -64,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
@@ -79,9 +81,9 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/toggle.css
 - lib/generators/css_zero/add/templates/app/javascript/controllers/autoselect_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
-- 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
@@ -97,6 +99,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

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

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