css-zero 1.0.5 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5cc972b5a9fb8f011c037ff35875d7eb2b990a351b757229704d20e05fa77215
-  data.tar.gz: 6868e1b0ee437813c53af1a719971e731d67907defe77f00d9756c6f39295125
+  metadata.gz: 60c8675345856b7bdf9990dc3af070ac0794334cca1f4ec8f2e88528d5c46cc2
+  data.tar.gz: 279165e953e06ba066d9b01b3ec9675481146413a75fa2ca782cf2f450108ded
 SHA512:
-  metadata.gz: c69474069e8a32fe500bb74d7e2473a6eed504d418074180ffea75f7b3a45ca99066c7e7ee7caef7a7e68a6d72dc97c4685490b28353250aa3b9689fca940227
-  data.tar.gz: e9569c367b5b459ca2d6200af679b6d1c547aa0aa1afdef4e51a5140672c002a645649644cf4317574ec2aa11d63454591cf683043732dbd541954a98fa00d91
+  metadata.gz: 18ed5851b5bff226129e2144b5be40544bd88799bf254b018736ffc75d1f97cfdbed47cb3510683f7f7f738f65648dc6fa6b1f589f46653fb9260b29eee41ebb
+  data.tar.gz: 0a22627f081ab2a08a21afa0e78ad5c7652b8e5134b8a97fe6774d97dfe838ad1fb608f062fe6d58ae56f4320170a6ef77f1482e05b26f6ca8a776e62bf4f1b9

data/app/assets/stylesheets/css-zero/reset.css

@@ -356,11 +356,27 @@ input:where([type='button'], [type='reset'], [type='submit']),
 }
 
 /*
-  Correct the arrow style of datalist in Chrome.
+  Make elements with the HTML hidden attribute stay hidden by default.
 */
 
-::-webkit-calendar-picker-indicator {
-  line-height: 1em;
+[hidden]:where(:not([hidden='until-found'])) {
+  display: none !important;
+}
+
+/*
+  Make elements with the HTML contents attribute become pseudo-box by default.
+*/
+
+[contents] {
+  display: contents !important;
+}
+
+/*
+  Make turbo frame become pseudo-box by default.
+*/
+
+turbo-frame {
+  display: contents;
 }
 
 /*
@@ -375,16 +391,16 @@ input:where([type='button'], [type='reset'], [type='submit']),
   Set color scheme to light and dark.
 */
 
-html {
+:root {
   color-scheme: light dark;
 }
 
 /*
-  Prevent page scroll when modal dialog is open.
+  Correct the arrow style of datalist in Chrome.
 */
 
-html:has(dialog:modal[open]) {
-  overflow: hidden;
+::-webkit-calendar-picker-indicator {
+  line-height: 1em;
 }
 
 /*
@@ -392,29 +408,25 @@ html:has(dialog:modal[open]) {
 */
 
 option {
-  padding-block: 3px;
+  padding: 2px 4px;
 }
 
 /*
-  Make turbo frame become pseudo-box by default.
-*/
-
-turbo-frame {
-  display: contents;
-}
-
-/*
-  Make elements with the HTML hidden attribute stay hidden by default.
+  Prevent page scroll when modal dialog is open.
 */
 
-[hidden]:where(:not([hidden='until-found'])) {
-  display: none !important;
+html:has(dialog:modal[open]) {
+  overflow: hidden;
 }
 
 /*
-  Make elements with the HTML contents attribute become pseudo-box by default.
+  Remove all animations and transitions for people that prefer not to see them
 */
 
-[contents] {
-  display: contents !important;
+@media (prefers-reduced-motion: reduce) {
+  *, ::before, ::after, ::backdrop {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }

data/app/assets/stylesheets/css-zero/sizes.css

@@ -93,9 +93,8 @@
   /****************************************************************
   * Breakpoints
   *****************************************************************/
-  --breakpoint-sm:  40rem; /* 640px */
-  --breakpoint-md:  48rem; /* 768px */
-  --breakpoint-lg:  64rem; /* 1024px */
-  --breakpoint-xl:  80rem; /* 1280px */
-  --breakpoint-2xl: 96rem; /* 1536px */
+  --breakpoint-sm: 40rem; /* Mobile 640px */
+  --breakpoint-md: 48rem; /* Tablet 768px */
+  --breakpoint-lg: 64rem; /* Laptop 1024px */
+  --breakpoint-xl: 80rem; /* Desktop 1280px */
 }

data/app/assets/stylesheets/css-zero/{transition.css → transitions.css}

@@ -6,6 +6,7 @@
   *****************************************************************/
   --transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
   --transition-colors: color, background-color, border-color, text-decoration-color, fill, stroke;
+  --transition-transform: transform, translate, scale, rotate;
 
   /****************************************************************
   * Transition Timing
@@ -20,13 +21,4 @@
   --time-500:  500ms;
   --time-700:  700ms;
   --time-1000: 1000ms;
-
-  /****************************************************************
-  * Transition Timing Function
-  * Variables for controlling the easing of CSS transitions.
-  * transition-timing-function: var(--ease-in);
-  *****************************************************************/
-  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
-  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 }

data/app/assets/stylesheets/css-zero/utilities.css

@@ -26,7 +26,7 @@
 .self-center { align-self: center; }
 
 .gap { column-gap: var(--column-gap, 0.5rem); row-gap: var(--row-gap, 1rem); }
-.gap-half { column-gap: 0.5rem; row-gap: 0.5rem; }
+.gap-half { column-gap: 0.25rem; row-gap: 0.5rem; }
 
 /****************************************************************
 * Text
@@ -56,7 +56,6 @@
 
 .leading-none { line-height: var(--leading-none); }
 .leading-tight { line-height: var(--leading-tight); }
-.leading-normal { line-height: var(--leading-normal); }
 
 .text-start { text-align: start; }
 .text-end { text-align: end; }
@@ -147,10 +146,12 @@
 .sticky	{ position: sticky; }
 
 .min-i-0 { min-inline-size: 0; }
+.max-i-none { max-inline-size: none; }
 .max-i-full { max-inline-size: 100%; }
 
 .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; }
@@ -319,15 +320,17 @@
 /****************************************************************
 * Hiding/Showing
 *****************************************************************/
-.show\@sm, .show\@md, .show\@lg { display: none; }
+.show\@sm, .show\@md, .show\@lg, .show\@xl { display: none; }
 
 .show\@sm { @media (width >= 40rem) { display: flex; } }
 .show\@md { @media (width >= 48rem) { display: flex; } }
 .show\@lg { @media (width >= 64rem) { display: flex; } }
+.show\@xl { @media (width >= 80rem) { display: flex; } }
 
 .hide\@sm { @media (width >= 40rem) { display: none; } }
 .hide\@md { @media (width >= 48rem) { display: none; } }
 .hide\@lg { @media (width >= 64rem) { display: none; } }
+.hide\@xl { @media (width >= 80rem) { display: none; } }
 
 .hide\@pwa { @media (display-mode: standalone) { display: none; } }
 .hide\@browser { @media (display-mode: browser) { display: none; } }
@@ -337,11 +340,4 @@
 /****************************************************************
 * Accessibility
 *****************************************************************/
-.sr-only {
-  block-size: 1px;
-  clip-path: inset(50%);
-  inline-size: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-}
+.sr-only { block-size: 1px; clip-path: inset(50%); inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; }

data/app/assets/stylesheets/css-zero/variables.css

@@ -4,6 +4,6 @@
 @import url("effects.css");
 @import url("filters.css");
 @import url("sizes.css");
-@import url("transform.css");
-@import url("transition.css");
+@import url("transforms.css");
+@import url("transitions.css");
 @import url("typography.css");

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "1.0.5"
+  VERSION = "1.1.0"
 end

data/lib/generators/css_zero/add/USAGE

@@ -2,7 +2,7 @@ Description:
   This will add components into your project.
 
 Components:
-  accordion alert autoanimate autosave avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker dialog dropdown flash form fullscreen group hotkey input input_concerns inputmask layouts lightbox local_time navigation pagination popover progress prose sheet skeleton sortable switch table tabs trix upload_preview toggle web_share
+  accordion alert autoanimate autosave avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker dialog dropdown flash form fullscreen group hotkey input input_concerns inputmask layouts lightbox local_time navigation pagination popover progress prose sheet skeleton sortable switch table tabs trix turbo_confirm upload_preview toggle web_share
 
 Example:
   bin/rails generate css_zero:add [components...]

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

@@ -28,6 +28,8 @@ chart:
   - app/javascript/controllers/chart_controller.js
 check_all:
   - app/javascript/controllers/check_all_controller.js
+collapsible:
+  - app/javascript/controllers/collapsible_controller.js
 combobox:
   - app/assets/stylesheets/combobox.css
   - app/javascript/controllers/combobox_controller.js
@@ -36,8 +38,6 @@ command:
   - app/assets/stylesheets/command.css
   - app/javascript/controllers/command_controller.js
   - app/assets/images/search.svg
-collapsible:
-  - app/javascript/controllers/collapsible_controller.js
 datepicker:
   - app/assets/stylesheets/datepicker.css
   - app/javascript/controllers/datepicker_controller.js
@@ -80,7 +80,9 @@ inputmask:
   - app/javascript/controllers/inputmask_controller.js
 layouts:
   - app/assets/stylesheets/layouts.css
+  - app/assets/stylesheets/sidebar_menu.css
   - app/assets/images/menu.svg
+  - app/assets/images/chevron-right.svg
 lightbox:
   - app/assets/stylesheets/lightbox.css
   - app/javascript/controllers/lightbox_controller.js
@@ -118,14 +120,17 @@ table:
 tabs:
   - app/assets/stylesheets/tabs.css
   - app/javascript/controllers/tabs_controller.js
+toggle:
+  - app/assets/stylesheets/toggle.css
 trix:
   - app/assets/stylesheets/trix.css
+turbo_confirm:
+  - app/assets/stylesheets/dialog.css
+  - app/javascript/controllers/turbo_confirm_controller.js
 upload_preview:
   - app/javascript/controllers/upload_preview_controller.js
   - app/assets/images/default-picture.webp
   - app/assets/images/camera.svg
   - app/assets/images/minus.svg
-toggle:
-  - app/assets/stylesheets/toggle.css
 web_share:
   - app/javascript/controllers/web_share_controller.js

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

@@ -14,18 +14,13 @@
     &[open]::details-content {
       block-size: auto;
     }
-
-    &[open] summary::after {
-      transform: var(--rotate-180);
-    }
   }
 
   summary {
     align-items: center;
-    cursor: pointer;
+    cursor: default;
     display: flex;
     font-weight: var(--font-medium);
-    justify-content: space-between;
     padding-block: var(--size-4);
 
     &:hover {
@@ -47,8 +42,12 @@
       content: "";
       filter: var(--color-filter-text);
       inline-size: var(--size-4);
-      transition-duration: var(--time-200);
-      transition-property: transform;
+      margin-inline-start: auto;
+      transition: transform var(--time-200);
+    }
+
+    details[open] > &::after {
+      transform: var(--rotate-180);
     }
   }
 }

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

@@ -1,7 +1,6 @@
 .alert {
-  border-color: var(--alert-border-color, var(--color-border));
+  border: 1px solid var(--alert-border-color, var(--color-border));
   border-radius: var(--rounded-lg);
-  border-width: var(--border);
   color: var(--alert-color, var(--color-text));
   font-size: var(--text-sm);
   inline-size: var(--size-full);

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

@@ -10,8 +10,8 @@
   overflow: hidden;
 
   &:is(.btn) {
-    --btn-block-size: auto;
     --btn-icon-color: none;
+    --btn-inline-size: var(--size);
     --btn-padding: 0;
     --btn-radius: var(--radius);
   }
@@ -40,3 +40,12 @@
     user-select: none;
   }
 }
+
+.avatar-group {
+  align-items: center;
+  display: flex;
+
+  > :not(:last-child) {
+    margin-inline-end: calc(var(--size-2) * -1);
+  }
+}

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

@@ -7,6 +7,7 @@
   display: inline-flex;
   font-size: var(--text-xs);
   font-weight: var(--font-semibold);
+  line-height: var(--leading-4);
   padding: var(--size-0_5) var(--size-2_5);
 }
 

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

@@ -1,10 +1,10 @@
 .breadcrumb {
   align-items: center;
   color: var(--color-text-subtle);
+  column-gap: var(--size-1);
   display: flex;
   flex-wrap: wrap;
   font-size: var(--text-sm);
-  gap: var(--size-1);
   overflow-wrap: break-word;
 
   a {
@@ -20,6 +20,6 @@
   }
 
   @media (width >= 40rem) {
-    gap: var(--size-2);
+    column-gap: var(--size-2);
   }
 }

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

@@ -4,18 +4,18 @@
 
   align-items: center;
   background-color: var(--btn-background);
+  block-size: var(--btn-block-size, auto);
   border-radius: var(--btn-radius, var(--rounded-md));
   border: 1px solid var(--btn-border-color, var(--color-border));
   box-shadow: var(--btn-box-shadow, var(--shadow-xs));
   color: var(--btn-color, var(--color-text));
-  cursor: pointer;
+  column-gap: var(--size-2);
+  cursor: default;
   display: inline-flex;
   font-size: var(--btn-font-size, var(--text-sm));
   font-weight: var(--btn-font-weight, var(--font-medium));
-  gap: var(--size-2);
   inline-size: var(--btn-inline-size, auto);
   justify-content: var(--btn-justify-content, center);
-  min-block-size: var(--btn-block-size, var(--size-9));
   padding: var(--btn-padding, .375rem 1rem);
   text-align: center;
   white-space: nowrap;
@@ -70,7 +70,6 @@
 
 .btn--plain {
   --btn-background: transparent;
-  --btn-block-size: auto;
   --btn-border-color: transparent;
   --btn-hover-color: transparent;
   --btn-padding: 0;
@@ -83,10 +82,10 @@
 }
 
 [aria-busy] .btn--loading:disabled {
-  > * { visibility: hidden; }
+  position: relative;
 
-  &::after {
-    filter: var(--btn-icon-color, var(--color-filter-text));
+  > * {
+    visibility: hidden;
   }
 
   &::after {
@@ -95,6 +94,7 @@
     background-size: cover;
     block-size: var(--size-5);
     content: "";
+    filter: var(--btn-icon-color, var(--color-filter-text));
     inline-size: var(--size-5);
     position: absolute;
   }

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

@@ -1,12 +1,12 @@
 .carousel {
   align-items: center;
+  column-gap: var(--size-4);
   display: flex;
-  gap: var(--size-4);
 }
 
 .carousel__content {
+  column-gap: var(--size-4);
   display: flex;
-  gap: var(--size-4);
   inline-size: var(--size-full);
   overflow-x: hidden;
   scroll-behavior: smooth;

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

@@ -1,4 +1,4 @@
-@import url("https://esm.sh/tom-select@2.4.1/dist/css/tom-select.min.css");
+@import url("https://esm.sh/tom-select@2.4.2/dist/css/tom-select.min.css");
 
 .ts-control {
   align-items: center;

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

@@ -27,6 +27,7 @@
   display: flex;
   flex-direction: column;
   padding: var(--size-1);
+  row-gap: 1px;
 }
 
 .command__group-header {

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

@@ -1,9 +1,5 @@
 @import url("https://esm.sh/flatpickr@4.6.13/dist/flatpickr.min.css");
 
-.input--datepicker {
-  cursor: pointer;
-}
-
 .flatpickr-calendar {
   background: var(--color-bg);
   border: 1px solid var(--color-border);

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

@@ -2,15 +2,15 @@
   align-items: center;
   animation: appear-then-fade 4s 300ms both;
   backdrop-filter: var(--blur-sm) var(--contrast-75);
-  background-color: rgb(from var(--color-text) r g b / .65);
+  background-color: var(--flash-background, rgb(from var(--color-text) r g b / .65));
   border-radius: var(--rounded-full);
-  color: var(--color-text-reversed);
+  color: var(--flash-color, var(--color-text-reversed));
+  column-gap: var(--size-2);
   display: flex;
   font-size: var(--text-fluid-base);
-  gap: var(--size-2);
   justify-content: center;
   line-height: var(--leading-none);
-  margin-block-start: var(--flash-position, 0);
+  margin-block-start: var(--flash-position, var(--size-4));
   margin-inline: auto;
   min-block-size: var(--size-11);
   padding: var(--size-1) var(--size-4);
@@ -21,6 +21,16 @@
   }
 }
 
+.flash--positive {
+  --flash-background: var(--color-positive);
+  --flash-color: white;
+}
+
+.flash--negative {
+  --flash-background: var(--color-negative);
+  --flash-color: white;
+}
+
 .flash--extended {
   animation-name: appear-then-fade-extended;
   animation-duration: 12s;

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

@@ -1,12 +1,12 @@
 .input {
   appearance: none;
   background-color: var(--input-background, var(--color-bg));
+  block-size: var(--input-block-size, auto);
   border: 1px solid var(--input-border-color, var(--color-border));
   border-radius: var(--input-radius, var(--rounded-md));
   box-shadow: var(--input-box-shadow, var(--shadow-xs));
   font-size: var(--input-font-size, var(--text-sm));
   inline-size: var(--input-inline-size, var(--size-full));
-  min-block-size: var(--input-block-size, var(--size-9));
   padding: var(--input-padding, .375rem .75rem);
 
   &:is(textarea[rows=auto]) {

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

@@ -8,13 +8,7 @@
   @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-2);
-    --sidebar-width: 280px;
+    --sidebar-width: var(--max-i-3xs);
   }
 }
 
@@ -42,8 +36,8 @@
   background-color: rgb(from var(--color-border-light) r g b / .5);
   border-block-end-width: var(--border);
   block-size: var(--size-16);
+  column-gap: var(--size-4);
   display: flex;
-  gap: var(--size-4);
   grid-area: header;
   padding-inline: var(--size-4);
 }
@@ -54,9 +48,9 @@
   display: flex;
   flex-direction: column;
   grid-area: sidebar;
-  gap: var(--size-2);
   overflow-x: hidden;
   padding: var(--sidebar-padding, 0);
+  row-gap: var(--size-2);
 }
 
 #main {

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

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   padding: var(--size-1);
-  gap: var(--size-1);
+  row-gap: var(--size-1);
 }
 
 .menu__header {
@@ -14,6 +14,7 @@
 .menu__group {
   display: flex;
   flex-direction: column;
+  row-gap: 1px;
 }
 
 .menu__separator {

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

@@ -4,7 +4,7 @@
   box-shadow: var(--shadow-lg);
   block-size: var(--size-full);
   color: var(--color-text);
-  inline-size: var(--size-3-4);
+  inline-size: var(--sheet-size, var(--size-3-4));
   margin-inline: var(--sheet-margin);
   max-block-size: unset;
 
@@ -36,7 +36,7 @@
   }
 
   @media (width >= 40rem) {
-    max-inline-size: var(--max-i-sm);
+    max-inline-size: var(--sheet-size, var(--max-i-sm));
   }
 }
 

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

@@ -0,0 +1,78 @@
+.sidebar-menu {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--size-4);
+  block-size: var(--size-full);
+}
+
+.sidebar-menu__button {
+  --btn-background: transparent;
+  --btn-border-color: transparent;
+  --btn-box-shadow: none;
+  --btn-font-weight: var(--font-normal);
+  --btn-hover-color: var(--color-secondary);
+  --btn-justify-content: start;
+  --btn-outline-size: 0;
+  --btn-inline-size: var(--size-full);
+  --btn-padding: var(--size-1) var(--size-2);
+
+  &:focus-visible {
+    --btn-background: var(--color-secondary);
+  }
+
+  &:is(summary) {
+    &::after {
+      background-image: url("chevron-right.svg");
+      background-size: cover;
+      block-size: var(--size-4);
+      content: "";
+      filter: var(--color-filter-text);
+      inline-size: var(--size-4);
+      margin-inline-start: auto;
+      min-inline-size: var(--size-4);
+      transition: transform var(--time-200);
+    }
+
+    details[open] > &::after {
+      transform: var(--rotate-90);
+    }
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+}
+
+.sidebar-menu__content {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--size-4);
+  overflow-y: scroll;
+}
+
+.sidebar-menu__group {
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-menu__group-label {
+  color: var(--color-text-subtle);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  padding: var(--size-1_5) var(--size-2);
+}
+
+.sidebar-menu__items {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--size-1);
+}
+
+.sidebar-menu__sub {
+  border-inline-start-width: var(--border);
+  display: flex;
+  flex-direction: column;
+  margin-inline-start: var(--size-4);
+  padding: var(--size-0_5) var(--size-2);
+  row-gap: var(--size-1);
+}

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

@@ -5,10 +5,8 @@
   border-radius: var(--rounded-full);
   border-width: var(--border-2);
   block-size: var(--size-5);
-  cursor: pointer;
   inline-size: var(--size-9);
-  transition-duration: var(--time-150);
-  transition-property: var(--transition-colors);
+  transition: background-color var(--time-150);
 
   &:checked {
     background-color: var(--color-primary);
@@ -25,8 +23,7 @@
     border-radius: var(--rounded-full);
     content: "";
     display: block;
-    transition-duration: var(--time-150);
-    transition-property: margin;
+    transition: margin var(--time-150);
   }
 
   &:focus-visible {

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

@@ -1,4 +1,4 @@
-.table {
+:where(.table) {
   caption-side: bottom;
   font-size: var(--text-sm);
   inline-size: var(--size-full);

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

@@ -1,7 +1,7 @@
 .tabs {
   display: flex;
   flex-direction: column;
-  gap: var(--size-2);
+  row-gap: var(--size-2);
 }
 
 .tabs__list {
@@ -9,14 +9,13 @@
   block-size: var(--size-9);
   border-radius: var(--rounded-md);
   color: var(--color-text-subtle);
+  column-gap: var(--size-2);
   display: inline-flex;
-  gap: var(--size-2);
   padding: var(--size-1);
 }
 
 .btn--tab {
   --btn-background: transparent;
-  --btn-block-size: auto;
   --btn-border-color: transparent;
   --btn-box-shadow: none;
   --btn-hover-color: transparent;

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

@@ -30,14 +30,14 @@ trix-toolbar {
   .trix-button-row {
     background-color: var(--color-bg);
     border-block-width: 1px;
+    column-gap: 1px;
     padding-block: var(--size-1_5);
-    gap: 1px;
   }
 
   .trix-button-group {
     border: 0 !important;
+    column-gap: 1px;
     margin: 0 !important;
-    gap: 1px;
   }
 
   .trix-button {

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

@@ -12,7 +12,7 @@ export default class extends Controller {
   }
 
   #checkDependants() {
-    this.dependantTargets.forEach(e => e.checked = this.dependeeTarget.checked)
+    this.dependantTargets.forEach(it => it.checked = this.dependeeTarget.checked)
   }
 
   #checkDependee() {
@@ -25,10 +25,10 @@ export default class extends Controller {
   }
 
   get #atLeastOneChecked() {
-    return this.dependantTargets.some(e => e.checked)
+    return this.hasDependantTarget && this.dependantTargets.some(it => it.checked)
   }
 
   get #allChecked() {
-    return this.dependantTargets.every(e => e.checked)
+    return this.hasDependantTarget && this.dependantTargets.every(it => it.checked)
   }
 }

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

@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 import { get } from "https://esm.sh/@rails/request.js@0.0.11?standalone"
-import TomSelect from "https://esm.sh/tom-select@2.4.1/base?standalone"
+import TomSelect from "https://esm.sh/tom-select@2.4.2/base?standalone"
 
 export default class extends Controller {
   static values = { url: String, optionCreate: { type: String, default: "Add" }, noResults: { type: String, default: "No results found" } }

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

@@ -11,7 +11,7 @@ export default class extends Controller {
   }
 
   connect() {
-    this.combobox = new Combobox(this.inputTarget, this.listTarget)
+    this.combobox = new Combobox(this.inputTarget, this.listTarget, { firstOptionSelectionMode: "selected" })
   }
 
   disconnect() {
@@ -38,22 +38,24 @@ export default class extends Controller {
   }
 
   #reset() {
-    this.listTarget.querySelectorAll(`.${this.selectedClass}`).forEach(element => {
-      element.classList.remove(this.selectedClass)
+    this.listTarget.querySelectorAll(`.${this.selectedClass}`).forEach(it => {
+      it.classList.remove(this.selectedClass)
     })
   }
 
   #selectMatches(value) {
-    this.listTarget.querySelectorAll(`[data-value*="${value.toLowerCase()}"]`).forEach(element => {
-      element.classList.add(this.selectedClass)
+    this.listTarget.querySelectorAll(`[data-value*="${value.toLowerCase()}"]`).forEach(it => {
+      it.classList.add(this.selectedClass)
     })
   }
 
   #activate() {
     this.listTarget.classList.add(this.activeClass)
+    this.combobox.resetSelection()
   }
 
   #deactivate() {
     this.listTarget.classList.remove(this.activeClass)
+    this.combobox.resetSelection()
   }
 }

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { MaskInput } from "https://esm.sh/maska@3.0.4?standalone"
+import { MaskInput } from "https://esm.sh/maska@3.1.0?standalone"
 
 export default class extends Controller {
   connect() {

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

@@ -45,8 +45,8 @@ export default class extends Controller {
   }
 
   #updateTabstops() {
-    this.itemTargets.forEach((element, index) => {
-      element.tabIndex = index === this.indexValue ? 0 : -1
+    this.itemTargets.forEach((it, index) => {
+      it.tabIndex = index === this.indexValue ? 0 : -1
     })
   }
 

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

@@ -14,8 +14,8 @@ export default class extends Controller {
   }
 
   #requestOTP() {
-    navigator.credentials.get(this.#options).then(otp => {
-      this.element.value = otp.code
+    navigator.credentials.get(this.#options).then(it => {
+      this.element.value = it.code
     }).catch(error => {})
   }
 

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

@@ -30,13 +30,13 @@ export default class extends Controller {
   }
 
   #showCurrentTab() {
-    this.buttonTargets.forEach((element, index) => {
-      element.ariaSelected = index === this.indexValue
-      element.tabIndex = index === this.indexValue ? 0 : -1
+    this.buttonTargets.forEach((it, index) => {
+      it.ariaSelected = index === this.indexValue
+      it.tabIndex = index === this.indexValue ? 0 : -1
     })
 
-    this.tabTargets.forEach((element, index) => {
-      element.hidden = index !== this.indexValue
+    this.tabTargets.forEach((it, index) => {
+      it.hidden = index !== this.indexValue
     })
   }
 

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

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "title", "text" ]
+  static values  = { defaultConfirmText: { type: String, default: "This action cannot be undone and may have permanent consequences." } }
+
+  #confirmCallback = null
+
+  connect() {
+    Turbo.config.forms.confirm = this.#confirm.bind(this)
+  }
+
+  disconnect() {
+    Turbo.config.forms.confirm = null
+  }
+
+  submit({ target }) {
+    this.#confirmCallback?.(target.returnValue === "confirm")
+  }
+
+  #confirm(message, target) {
+    this.titleTarget.textContent = message
+    this.textTarget.textContent  = target.dataset.turboConfirmText || this.defaultConfirmTextValue
+    this.element.showModal()
+    return new Promise(resolve => (this.#confirmCallback = resolve))
+  }
+}

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

@@ -9,10 +9,6 @@ class CssZero::InstallGenerator < Rails::Generators::Base
     copy_file "app/assets/stylesheets/base.css"
   end
 
-  def copy_application_css
-    copy_file "app/assets/stylesheets/application.css", force: true if sprockets?
-  end
-
   def copy_application_layout
     template "app/views/layouts/application.html.erb", force: true
   end
@@ -26,8 +22,4 @@ class CssZero::InstallGenerator < Rails::Generators::Base
   def importmaps?
     Rails.root.join("config/importmap.rb").exist?
   end
-
-  def sprockets?
-    Rails.root.join("app/assets/config/manifest.js").exist?
-  end
 end

data/lib/generators/css_zero/install/templates/app/views/layouts/application.html.erb

@@ -18,17 +18,10 @@
     <link rel="apple-touch-icon" href="/icon.png">
 
     <%- style_link_target = options[:skip_asset_pipeline] ? "\"application\"" : ":app" -%>
-    <%- if options[:skip_hotwire] || options[:skip_javascript] -%>
-    <%%= stylesheet_link_tag "css-zero/reset" %>
-    <%%= stylesheet_link_tag "css-zero/variables" %>
-    <%%= stylesheet_link_tag <%= style_link_target %> %>
-    <%%= stylesheet_link_tag "css-zero/utilities" %>
-    <%- else -%>
     <%%= stylesheet_link_tag "css-zero/reset", "data-turbo-track": "reload" %>
     <%%= stylesheet_link_tag "css-zero/variables", "data-turbo-track": "reload" %>
     <%%= stylesheet_link_tag <%= style_link_target %>, "data-turbo-track": "reload" %>
     <%%= stylesheet_link_tag "css-zero/utilities", "data-turbo-track": "reload" %>
-    <%- end -%>
     <%- if importmaps? -%>
     <%%= javascript_importmap_tags %>
     <%- else -%>
@@ -44,6 +37,9 @@
     </header>
 
     <main id="main">
+      <%% if notice.present? %>
+        <div popover class="flash" style="--flash-position: 5rem;" data-controller="element-removal" data-action="animationend->element-removal#remove" role="alert"><%%= notice %></div>
+      <%% end %>
       <div class="container">
         <%%= yield %>
       </div>

data/lib/generators/css_zero/scaffold/templates/index.html.erb.tt

@@ -1,7 +1,3 @@
-<%% if notice.present? %>
-  <div popover class="flash" style="--flash-position: 5rem;" data-controller="element-removal" data-action="animationend->element-removal#remove" role="alert"><%%= notice %></div>
-<%% end %>
-
 <%% content_for :title, "<%= human_name.pluralize %>" %>
 
 <div class="flex items-center justify-between mbe-4">

data/lib/generators/css_zero/scaffold/templates/show.html.erb.tt

@@ -1,7 +1,3 @@
-<%% if notice.present? %>
-  <div popover class="flash" style="--flash-position: 5rem;" data-controller="element-removal" data-action="animationend->element-removal#remove" role="alert"><%%= notice %></div>
-<%% end %>
-
 <%%= render @<%= singular_table_name %> %>
 
 <div class="flex flex-wrap items-center gap mbs-6" style="--row-gap: .5rem">

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 1.0.5
+  version: 1.1.0
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-02-01 00:00:00.000000000 Z
+date: 2025-02-15 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -25,8 +25,8 @@ files:
 - app/assets/stylesheets/css-zero/filters.css
 - app/assets/stylesheets/css-zero/reset.css
 - app/assets/stylesheets/css-zero/sizes.css
-- app/assets/stylesheets/css-zero/transform.css
-- app/assets/stylesheets/css-zero/transition.css
+- app/assets/stylesheets/css-zero/transforms.css
+- app/assets/stylesheets/css-zero/transitions.css
 - app/assets/stylesheets/css-zero/typography.css
 - app/assets/stylesheets/css-zero/utilities.css
 - app/assets/stylesheets/css-zero/variables.css
@@ -80,6 +80,7 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/sidebar_menu.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/skeleton.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
@@ -113,6 +114,7 @@ files:
 - lib/generators/css_zero/add/templates/app/javascript/controllers/revealable_input_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/sortable_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/turbo_confirm_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/upload_preview_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/web_share_controller.js
 - lib/generators/css_zero/authentication/authentication_generator.rb
@@ -123,7 +125,6 @@ files:
 - lib/generators/css_zero/controller/templates/view.html.erb.tt
 - lib/generators/css_zero/install/USAGE
 - lib/generators/css_zero/install/install_generator.rb
-- lib/generators/css_zero/install/templates/app/assets/stylesheets/application.css
 - lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css
 - lib/generators/css_zero/install/templates/app/views/layouts/application.html.erb
 - lib/generators/css_zero/mailer/mailer_generator.rb

data/lib/generators/css_zero/install/templates/app/assets/stylesheets/application.css

@@ -1,26 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
- * vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require css-zero/reset
- *= require css-zero/animations
- *= require css-zero/borders
- *= require css-zero/colors
- *= require css-zero/effects
- *= require css-zero/filters
- *= require css-zero/sizes
- *= require css-zero/transform
- *= require css-zero/transition
- *= require css-zero/typography
- *= require_tree .
- *= require_self
- *= require css-zero/utilities
- */