css-zero 2.1.0 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ba076b01778c263d9cf62556c9f7494f53243b746f5e738c29b1c20785182b15
-  data.tar.gz: 184b90dbddd76008ccddc39cfa0a7e41a284b754eb1cd49504e299778c5aa7ab
+  metadata.gz: e08482091de7f5e6d07b6be39b26d0d4c90dfa38b5d0d2c4841690ac583c485c
+  data.tar.gz: 8cf44b3e21996398c4b49f2996b5c722b24389668c58f0f24d6adefca8b0dded
 SHA512:
-  metadata.gz: 5913f936fc9ecf8ec9573208cedffbd4f4a8226c9e2cfb3b28d6e61de907543c7ebb33c50c5f74555e8ba7dbfdd027e761b442814cd6f392e967f4bfe7bb8bf6
-  data.tar.gz: f98fe8b6e467db9410abf616563962cb728c48f3362568a37120c4ee5664511e8e30265be840e91885c593bfb633da16b070e9e546c5eaa6160b1336e1c72367
+  metadata.gz: c7a2cc91ac8f3e9b826f6d565981bf5d258ca40c02ac76b25eb9be69e86d6c3df2a68f95b15978a85a158b84786ef23d9a680b7b766add0d3d3a7d2537bb4168
+  data.tar.gz: eefa20599577dcf8b66b6830f3fe785d3d2279aa40af8af8c34f079b9bf4abce3ce1704967fad42f49c6f9a12fd079fe7a9038a2a6689c9fa5bed488dd9f3753

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

@@ -372,35 +372,35 @@ input:where([type='button'], [type='reset'], [type='submit']),
 }
 
 /*
-  Make elements with the HTML contents attribute become pseudo-box by default.
+  Make elements with the HTML contents attribute stay pseudo-box by default.
 */
 
 [contents] {
-  display: contents !important;
+  display: contents;
 }
 
 /*
-  Make turbo frame become pseudo-box by default.
+  Make elements with the HTML feedback attribute stay hidden by default.
 */
 
-turbo-frame {
-  display: contents;
+[feedback] {
+  display: none;
 }
 
 /*
-  Make field with errors become pseudo-box by default.
+  Make elements with turbo frames stay pseudo-box by default.
 */
 
-.field_with_errors {
+turbo-frame {
   display: contents;
 }
 
 /*
-  Make invalid-feedback become hidden by default.
+  Make Rails field_with_errors stay pseudo-box by default.
 */
 
-.invalid-feedback {
-  display: none;
+.field_with_errors {
+  display: contents;
 }
 
 /*

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

@@ -16,11 +16,9 @@
 .items-center { align-items: center; }
 .items-baseline { align-items: baseline; }
 
-.grow { flex-grow: 1; }
-.grow-0	{ flex-grow: 0; }
-
-.shrink { flex-shrink: 1; }
-.shrink-0 { flex-shrink: 0; }
+.flex-1 { flex: 1; }
+.flex-item-grow { flex-grow: 1; }
+.flex-item-no-shrink { flex-shrink: 0; }
 
 .self-start { align-self: start; }
 .self-end { align-self: end; }
@@ -28,6 +26,7 @@
 
 .gap { column-gap: var(--column-gap, 0.5rem); row-gap: var(--row-gap, 1rem); }
 .gap-half { column-gap: var(--column-gap, 0.25rem); row-gap: var(--row-gap, 0.5rem); }
+.gap-none { --column-gap: 0; --row-gap: 0; gap: 0; }
 
 /****************************************************************
 * Text
@@ -39,7 +38,6 @@
 
 .uppercase { text-transform: uppercase; }
 .capitalize { text-transform: capitalize; }
-.normal-case { text-transform: none; }
 
 .whitespace-nowrap { white-space: nowrap; }
 .whitespace-normal { white-space: normal; }
@@ -138,7 +136,7 @@
 .inline-block { display: inline-block; }
 
 .relative { position: relative; }
-.sticky	{ position: sticky; }
+.sticky	{ position: sticky; inset-block-start: 0; z-index: 1; }
 
 .min-i-0 { min-inline-size: 0; }
 .max-i-none { max-inline-size: none; }
@@ -148,6 +146,7 @@
 .i-full { inline-size: 100%; }
 
 .i-min { inline-size: min-content; }
+.i-fit { inline-size: fit-content; }
 
 .overflow-x-auto { overflow-x: auto; scroll-snap-type: x mandatory; }
 .overflow-y-auto { overflow-y: auto; scroll-snap-type: y mandatory; }
@@ -316,7 +315,6 @@
 * Hiding/Showing
 *****************************************************************/
 .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; } }
@@ -329,8 +327,8 @@
 
 .hide\@pwa { @media (display-mode: standalone) { display: none; } }
 .hide\@browser { @media (display-mode: browser) { display: none; } }
-
 .hide\@print { @media print { display: none; } }
+.hide\@touch { @media (any-hover: none) { display: none; } }
 
 /****************************************************************
 * Accessibility

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "2.1.0"
+  VERSION = "3.0.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 autoselect avatar back_navigation badge breadcrumb button card carousel chart check_all collapsible color_scheme combobox command context_menu datepicker dialog dropdown dropzone dual_range flash form fullscreen group hotkey icons input input_clearable input_copyable input_revealable inputmask layouts lightbox local_time popover progress prose resizable sheet skeleton sortable switch table tabs timezone_cookie trix turbo_confirm upload_preview toggle web_otp web_share
+  accordion alert autoanimate autosave autoselect avatar back_navigation badge breadcrumb button card carousel chart check_all collapsible color_scheme combobox command context_menu datepicker dialog dropdown dropzone dual_range flash form fullscreen group hotkey icons input input_clearable input_copyable input_otp input_revealable inputmask layouts lightbox list local_time popover progress prose resizable separator sheet skeleton sortable switch table tabs timezone_cookie trix turbo_confirm upload_preview toggle web_share
 
 Example:
   bin/rails generate css_zero:add [components...]

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

@@ -106,6 +106,9 @@ input_clearable:
 input_copyable:
   - app/javascript/controllers/input_copyable_controller.js
   - app/assets/stylesheets/input_copyable.css
+input_otp:
+  - app/javascript/controllers/form_controller.js
+  - app/assets/stylesheets/input_otp.css
 input_revealable:
   - app/javascript/controllers/input_revealable_controller.js
   - app/assets/stylesheets/input_revealable.css
@@ -119,6 +122,8 @@ lightbox:
   - app/assets/stylesheets/lightbox.css
   - app/javascript/controllers/lightbox_controller.js
   - app/javascript/controllers/web_share_controller.js
+list:
+  - app/assets/stylesheets/list.css
 local_time:
   - app/javascript/controllers/local_time_controller.js
 popover:
@@ -133,6 +138,8 @@ resizable:
   - app/assets/stylesheets/resizable_controller.js
   - app/assets/images/grip-horizontal-zink-500.svg
   - app/assets/images/grip-vertical-zink-500.svg
+separator:
+  - app/assets/stylesheets/separator.css
 sheet:
   - app/assets/stylesheets/sheet.css
   - app/javascript/controllers/dialog_controller.js
@@ -159,7 +166,5 @@ turbo_confirm:
 upload_preview:
   - app/javascript/controllers/upload_preview_controller.js
   - app/assets/images/avatar.svg
-web_otp:
-  - app/javascript/controllers/web_otp_controller.js
 web_share:
   - app/javascript/controllers/web_share_controller.js

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

@@ -1,7 +1,7 @@
 .alert {
   background-color: var(--alert-background, var(--color-surface));
-  border-radius: var(--rounded-lg);
   border: 1px solid var(--alert-border-color, var(--color-border));
+  border-radius: var(--rounded-lg);
   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/badge.css

@@ -1,8 +1,8 @@
 .badge {
   align-items: center;
   background-color: var(--badge-background, var(--color-bg));
-  border-radius: var(--badge-radius, var(--rounded-md));
   border: 1px solid var(--badge-border-color, var(--color-border));
+  border-radius: var(--badge-radius, var(--rounded-md));
   box-shadow: var(--badge-box-shadow, none);
   color: var(--badge-color, var(--color-text));
   column-gap: var(--size-1);

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

@@ -1,7 +1,7 @@
 :where(.breadcrumb) {
   align-items: center;
-  color: var(--color-text-subtle);
   column-gap: var(--size-1);
+  color: var(--color-text-subtle);
   display: flex;
   flex-wrap: wrap;
   font-size: var(--text-sm);

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

@@ -2,8 +2,8 @@
   align-items: center;
   background-color: var(--btn-background, var(--color-surface));
   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));
+  border-radius: var(--btn-radius, var(--rounded-md));
   box-shadow: var(--btn-box-shadow, var(--shadow-xs));
   color: var(--btn-color, var(--color-text));
   column-gap: var(--size-2);
@@ -76,7 +76,7 @@
   --btn-padding: var(--size-2);
 }
 
-[aria-busy="true"] .btn--loading:disabled {
+[aria-busy="true"] .btn--busy:disabled {
   > * {
     visibility: hidden;
   }

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

@@ -4,29 +4,4 @@
   border-width: var(--border);
   box-shadow: var(--shadow-sm);
   padding: var(--size-6);
-  position: relative;
-
-  &[aria-disabled="true"] {
-    pointer-events: none;
-  }
-
-  &[aria-disabled="true"]::after {
-    background-color: rgba(0, 0, 0, .3);
-    border-radius: inherit;
-    content: "";
-    inset: 0;
-    position: absolute;
-  }
-}
-
-.card-check {
-  background-color: var(--color-surface);
-  border-radius: var(--rounded-xl);
-  border-width: var(--border);
-  padding: var(--size-3);
-
-  &:has(:checked) {
-    background-color: rgb(from var(--color-border-light) r g b / .5);
-    border-color: var(--color-border-dark);
-  }
 }

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

@@ -5,11 +5,11 @@
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--rounded-md);
-  min-block-size: var(--size-9);
   color: var(--color-text);
   display: inline-flex;
   font-size: var(--text-sm);
   line-height: inherit;
+  min-block-size: var(--size-9);
   padding: var(--size-1_5) var(--size-3);
 
   > input {

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

@@ -1,7 +1,7 @@
 .command {
   background-color: var(--color-surface);
-  border-width: var(--border);
   border-radius: var(--rounded-lg);
+  border-width: var(--border);
   box-shadow: var(--shadow-xs);
   display: flex;
   flex-direction: column;
@@ -10,6 +10,7 @@
 .command__input {
   --input-background: transparent;
   --input-border-color: transparent;
+  --input-box-shadow: none;
   --input-outline-size: 0;
   --input-padding: var(--size-2_5);
 }
@@ -18,6 +19,10 @@
   border-block-start-width: var(--border);
   max-block-size: 300px;
   overflow-y: auto;
+
+  &:not(:has(.command__item:not([hidden]))) {
+    display: none;
+  }
 }
 
 .command__group:not(:first-child) {
@@ -29,6 +34,10 @@
   flex-direction: column;
   padding: var(--size-1);
   row-gap: 1px;
+
+  &:not(:has(.command__item:not([hidden]))) {
+    display: none;
+  }
 }
 
 .command__group-header {
@@ -62,14 +71,3 @@
   font-size: var(--text-xs);
   margin-inline-start: auto;
 }
-
-.command__list--filtering:not(:has(.selected)) {
-  .command__empty { display: flex; }
-}
-
-.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/datepicker.css

@@ -23,8 +23,8 @@
 
   .dayContainer {
     inline-size: var(--container-size);
-    min-inline-size: var(--container-size);
     max-inline-size: var(--container-size);
+    min-inline-size: var(--container-size);
   }
 
   .dayContainer + .dayContainer {
@@ -130,8 +130,8 @@
   }
 
   .flatpickr-day {
-    border-radius: var(--rounded-md);
     border-color: transparent !important;
+    border-radius: var(--rounded-md);
     box-shadow: none !important;
     color: var(--color-text);
     height: var(--day-size);

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

@@ -1,8 +1,8 @@
 @import url("https://esm.sh/dropzone@6.0.0-beta.2/dist/dropzone.css");
 
 .dropzone {
-  border-radius: var(--rounded-xl);
   border: 2px dashed var(--color-border);
+  border-radius: var(--rounded-xl);
   padding: var(--size-2);
 }
 

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

@@ -36,8 +36,8 @@
 }
 
 .flash--extended {
-  animation-name: appear-then-fade-extended;
   animation-duration: 12s;
+  animation-name: appear-then-fade-extended;
 }
 
 @keyframes appear-then-fade {

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

@@ -1,23 +1,17 @@
-.group-inline {
+.group {
+  align-items: stretch;
   display: flex;
   flex-direction: row;
 
-  > :first-child {
-    border-end-end-radius: 0;
-    border-start-end-radius: 0;
-  }
-
-  > :last-child {
-    border-end-start-radius: 0;
-    border-start-start-radius: 0;
-  }
-
   > :not(:first-child) {
+    border-end-start-radius: 0;
     border-inline-start: 0;
+    border-start-start-radius: 0;
   }
 
-  > :not(:first-child, :last-child) {
-    border-radius: 0;
+  > :not(:last-child) {
+    border-end-end-radius: 0;
+    border-start-end-radius: 0;
   }
 
   > :focus-visible {
@@ -25,26 +19,20 @@
   }
 }
 
-.group-block {
+.group-vertical {
+  align-items: stretch;
   display: flex;
   flex-direction: column;
 
-  > :first-child {
-    border-end-end-radius: 0;
-    border-end-start-radius: 0;
-  }
-
-  > :last-child {
-    border-start-end-radius: 0;
-    border-start-start-radius: 0;
-  }
-
   > :not(:first-child) {
     border-block-start: 0;
+    border-start-end-radius: 0;
+    border-start-start-radius: 0;
   }
 
-  > :not(:first-child, :last-child) {
-    border-radius: 0;
+  > :not(:last-child) {
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
   }
 
   > :focus-visible {

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

@@ -5,8 +5,9 @@
   flex-shrink: 0;
   inline-size: var(--icon-size, 1rem);
   mask-image: var(--svg);
+  mask-position: center;
   mask-repeat: no-repeat;
-  mask-size: cover;
+  mask-size: var(--icon-size, 1em);
   pointer-events: none;
   user-select: none;
 }
@@ -25,19 +26,19 @@ img.icon {
 * Lucide (https://lucide.dev)
 * Open-source icon library with a consistent style
 *****************************************************************/
+.icon--camera { --svg: url("camera.svg"); }
 .icon--chevron-left { --svg: url("chevron-left.svg"); }
 .icon--chevron-right { --svg: url("chevron-right.svg"); }
-.icon--ellipsis { --svg: url("ellipsis.svg"); }
 .icon--chevrons-up-down { --svg: url("chevrons-up-down.svg"); }
-.icon--menu { --svg: url("menu.svg"); }
-.icon--x { --svg: url("x.svg"); }
-.icon--search { --svg: url("search.svg"); }
+.icon--circle-alert { --svg: url("circle-alert.svg"); }
+.icon--circle-check { --svg: url("circle-check.svg"); }
 .icon--copy { --svg: url("copy.svg"); }
 .icon--download { --svg: url("download.svg"); }
-.icon--share { --svg: url("share.svg"); }
-.icon--camera { --svg: url("camera.svg"); }
+.icon--ellipsis { --svg: url("ellipsis.svg"); }
+.icon--menu { --svg: url("menu.svg"); }
 .icon--minus { --svg: url("minus.svg"); }
-.icon--sun { --svg: url("sun.svg"); }
 .icon--moon { --svg: url("moon.svg"); }
-.icon--circle-alert { --svg: url("circle-alert.svg"); }
-.icon--circle-check { --svg: url("circle-check.svg"); }
+.icon--search { --svg: url("search.svg"); }
+.icon--share { --svg: url("share.svg"); }
+.icon--sun { --svg: url("sun.svg"); }
+.icon--x { --svg: url("x.svg"); }

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

@@ -46,8 +46,8 @@
     border-color: var(--color-negative);
   }
 
-  &:user-invalid + .invalid-feedback {
-    display: block;
+  &:user-invalid + [feedback] {
+    display: unset;
   }
 
   &:focus-visible {

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

@@ -0,0 +1,8 @@
+.input--otp {
+  font-family: ui-monospace, monospace;
+  font-weight: var(--font-black);
+  inline-size: var(--input-otp-size, auto);
+  letter-spacing: 1ch;
+  min-inline-size: var(--input-otp-size, auto);
+  text-align: center;
+}

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

@@ -0,0 +1,34 @@
+.list {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--size-4);
+}
+
+.list-row {
+  background-color: var(--item-background, transparent);
+  border: 1px solid var(--item-border-color, var(--color-border));
+  border-radius: var(--rounded-lg);
+  font-size: var(--text-sm);
+  padding: var(--size-4);
+}
+
+.list-row--muted {
+  --item-background: rgb(from var(--color-border-light) r g b / .5);
+}
+
+.list-row--borderless {
+  --item-border-color: transparent;
+}
+
+.list-row--link:hover {
+  --item-background: rgb(from var(--color-border-light) r g b / .5);
+}
+
+.list-row--link:focus-visible {
+  outline: 2px solid var(--color-selected-dark);
+}
+
+.list-row--check:has(:checked) {
+  --item-background: rgb(from var(--color-border-light) r g b / .5);
+  --item-border-color: var(--color-primary);
+}

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

@@ -1,9 +1,9 @@
 .sidebar-layout {
+  block-size: 100dvh;
   display: grid;
   grid-template-areas: "header header" "sidebar main";
   grid-template-columns: var(--sidebar-width, 0) 1fr;
   grid-template-rows: auto 1fr;
-  block-size: 100dvh;
 
   @media (width >= 48rem) {
     --sidebar-border-width: var(--border);
@@ -13,16 +13,16 @@
 }
 
 .header-layout {
+  block-size: 100dvh;
   display: grid;
   grid-template-areas: "header" "main";
   grid-template-rows: auto 1fr;
-  block-size: 100dvh;
 }
 
 .centered-layout {
+  block-size: 100dvh;
   display: grid;
   place-items: center;
-  block-size: 100dvh;
 }
 
 .container {
@@ -34,8 +34,8 @@
 #header {
   align-items: center;
   background-color: rgb(from var(--color-border-light) r g b / .5);
-  border-block-end-width: var(--border);
   block-size: var(--size-16);
+  border-block-end-width: var(--border);
   column-gap: var(--size-4);
   display: flex;
   grid-area: header;

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

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

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

@@ -1,18 +1,18 @@
 .progress {
-  --track: rgb(from var(--color-primary) r g b / .2);
   --progress: var(--color-primary);
+  --track: rgb(from var(--color-primary) r g b / .2);
 
   background-color: var(--track);
-  border-radius: var(--rounded-full);
   block-size: var(--size-2);
+  border-radius: var(--rounded-full);
   inline-size: var(--size-full);
   overflow: hidden;
 
   &:indeterminate {
+    animation: progress-loading 2s infinite;
     background: linear-gradient(to right, var(--track) 45%, var(--progress) 0%, var(--progress) 55%, var(--track) 0%);
-    background-size: 225% 100%;
     background-position: right;
-    animation: progress-loading 2s infinite;
+    background-size: 225% 100%;
   }
 
   /*  Safari/Chromium  */

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

@@ -134,7 +134,7 @@
   }
 
   mark {
-    color: var(--color-text);
     background-color: var(--color-highlight);
+    color: var(--color-text);
   }
 }

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

@@ -0,0 +1,13 @@
+.separator {
+  background-color: var(--color-border-dark);
+  block-size: 1px;
+  flex-shrink: 0;
+  inline-size: var(--size-full);
+}
+
+.separator-vertical {
+  background-color: var(--color-border-dark);
+  block-size: var(--size-full);
+  flex-shrink: 0;
+  inline-size: 1px;
+}

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

@@ -1,8 +1,8 @@
 .sheet {
   background-color: var(--color-bg);
+  block-size: var(--size-full);
   border-inline-width: var(--sheet-border);
   box-shadow: var(--shadow-lg);
-  block-size: var(--size-full);
   color: var(--color-text);
   inline-size: var(--sheet-size, var(--size-3-4));
   margin-inline: var(--sheet-margin);

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

@@ -1,8 +1,8 @@
 .sidebar-menu {
+  block-size: var(--size-full);
   display: flex;
   flex-direction: column;
   row-gap: var(--size-4);
-  block-size: var(--size-full);
 }
 
 .sidebar-menu__button {
@@ -10,9 +10,9 @@
   --btn-border-color: transparent;
   --btn-box-shadow: none;
   --btn-font-weight: var(--font-normal);
+  --btn-inline-size: var(--size-full);
   --btn-justify-content: start;
   --btn-outline-size: 0;
-  --btn-inline-size: var(--size-full);
   --btn-padding: var(--size-1) var(--size-2);
 
   &[aria-current="page"] {
@@ -48,9 +48,11 @@
 
 .sidebar-menu__content {
   display: flex;
+  flex: 1;
   flex-direction: column;
+  min-block-size: 0;
+  overflow-y: auto;
   row-gap: var(--size-4);
-  overflow-y: scroll;
 }
 
 .sidebar-menu__group {

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

@@ -1,6 +1,6 @@
 .skeleton {
   animation: var(--animate-blink);
   animation-duration: 2s;
-  border-radius: var(--rounded-md);
   background-color: var(--color-border);
+  border-radius: var(--rounded-md);
 }

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

@@ -24,8 +24,8 @@
 /* CSS Zero */
 
 trix-toolbar {
-  inset-block-start: 0;
   inline-size: 100%;
+  inset-block-start: 0;
   position: sticky;
 
   .trix-button-row {
@@ -64,20 +64,20 @@ trix-toolbar {
     background-color: var(--color-bg);
     border: 1px solid var(--color-border);
     border-radius: var(--rounded-md);
-    margin: var(--size-1);
     box-shadow: var(--shadow-md);
+    margin: var(--size-1);
   }
 
   .trix-input--dialog {
-    border-color: var(--color-border);
     background-color: var(--color-surface);
+    border-color: var(--color-border);
     margin: 0;
   }
 
   .trix-button--dialog {
-    margin-inline-start: var(--size-1_5);
     background-color: var(--color-primary);
     color: var(--color-text-reversed);
+    margin-inline-start: var(--size-1_5);
   }
 
   [data-trix-dialog] [data-trix-validate]:invalid {
@@ -136,8 +136,8 @@ trix-editor {
     border-inline-start: 2px solid var(--color-border);
     font-style: italic;
     margin: 0;
-    padding-inline-start: var(--size-6);
     padding-inline-end: 0;
+    padding-inline-start: var(--size-6);
   }
 
   pre {
@@ -176,8 +176,8 @@ trix-editor {
   }
 
   .attachment--file {
-    color: var(--color--text);
     border: 1px solid var(--color-border);
+    color: var(--color--text);
   }
 
   .attachment__progress {

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

@@ -4,17 +4,16 @@ import { FetchRequest } from "https://esm.sh/@rails/request.js@0.0.12?standalone
 const AUTOSAVE_INTERVAL = 3000
 
 export default class extends Controller {
-  static targets = [ "submitter" ]
+  static targets = [ "submit" ]
 
-  #timer = null
+  #timer
 
   disconnect() {
     this.#submit()
   }
 
   change() {
-    !this.#dirty && this.#scheduleSave()
-    !this.#dirty && this.#updateAppearance(false)
+    !this.#dirty && this.#scheduleSaveAndUpdateAppearance(false)
   }
 
   async #submit() {
@@ -32,16 +31,20 @@ export default class extends Controller {
     return await new FetchRequest(form.method, form.action, { body: new FormData(form) }).perform()
   }
 
-  #updateAppearance(saving) {
-    this.element.ariaBusy = saving
-    this.submitterTarget.ariaDisabled = saving
-    this.submitterTarget.disabled = saving
+  #scheduleSaveAndUpdateAppearance(saving) {
+    this.#scheduleSave()
+    this.#updateAppearance(false)
   }
 
   #scheduleSave() {
     this.#timer = setTimeout(() => this.#save(), AUTOSAVE_INTERVAL)
   }
 
+  #updateAppearance(saving) {
+    this.element.ariaBusy = saving
+    this.submitTarget.disabled = saving
+  }
+
   #resetTimer() {
     clearTimeout(this.#timer)
     this.#timer = null

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

@@ -3,8 +3,7 @@ import debounce from "https://esm.sh/just-debounce-it@3.2.0?standalone"
 import Combobox from "https://esm.sh/@github/combobox-nav@3.0.1?standalone"
 
 export default class extends Controller {
-  static targets = [ "input", "list" ]
-  static classes = [ "active", "selected" ]
+  static targets = [ "input", "list", "item" ]
 
   initialize() {
     this.filter = debounce(this.filter.bind(this), 300)
@@ -20,39 +19,14 @@ export default class extends Controller {
   }
 
   filter({ target }) {
-    this.#reset()
-
-    if (target.value != "") {
-      this.#selectMatches(target.value)
-      this.#activate()
-    } else {
-      this.#deactivate()
-    }
+    this.itemTargets.forEach(it => { this.#matches(it.dataset.value, target.value) ? it.removeAttribute("hidden") : it.toggleAttribute("hidden", true) })
   }
 
   commit({ target }) {
     Turbo.visit(target.dataset.href, { action: "advance" })
   }
 
-  #reset() {
-    this.listTarget.querySelectorAll(`.${this.selectedClass}`).forEach(it => {
-      it.classList.remove(this.selectedClass)
-    })
-  }
-
-  #selectMatches(value) {
-    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()
+  #matches(text, potentialMatch) {
+    return text.toLowerCase().includes(potentialMatch.toLowerCase())
   }
 }

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

@@ -2,10 +2,10 @@ import { Controller } from "@hotwired/stimulus"
 import debounce from "https://esm.sh/just-debounce-it@3.2.0?standalone"
 
 export default class extends Controller {
-  static targets = [ "cancel" ]
+  static targets = [ "cancel", "submit" ]
 
   initialize() {
-    this.debouncedSubmit = debounce(this.submit.bind(this), 300)
+    this.debouncedSubmit = debounce(this.debouncedSubmit.bind(this), 300)
   }
 
   submit({ params: { submitter } }) {
@@ -16,6 +16,27 @@ export default class extends Controller {
     }
   }
 
+  debouncedSubmit(event) {
+    this.submit(event)
+  }
+
+  submitToTopTarget() {
+    this.element.setAttribute("data-turbo-frame", "_top")
+    this.submit()
+  }
+
+  disableSubmitWhenInvalid() {
+    if (this.element.checkValidity()) {
+      this.submitTarget.removeAttribute("disabled")
+    } else {
+      this.submitTarget.toggleAttribute("disabled", true)
+    }
+  }
+
+  reset() {
+    this.element.reset()
+  }
+
   cancel() {
     this.cancelTarget?.click()
   }

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

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

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

@@ -1,12 +1,24 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "time", "date", "datetime" ]
+  static targets = [ "time", "date", "shortdate", "datetime", "ago" ]
+
+  #timer
 
   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" })
+    this.shortdateFormatter = new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" })
+    this.datetimeFormatter = new Intl.DateTimeFormat(undefined, { timeStyle: "short", dateStyle: "short" })
+    this.agoFormatter = new TimeAgoFormat(undefined, { numeric: "always" })
+  }
+
+  connect() {
+    this.#timer = setInterval(() => this.#refreshRelativeTimes(), 30_000)
+  }
+
+  disconnect() {
+    clearInterval(this.#timer)
   }
 
   timeTargetConnected(target) {
@@ -18,12 +30,56 @@ export default class extends Controller {
   }
 
   datetimeTargetConnected(target) {
-    this.#formatTime(this.dateTimeFormatter, target)
+    this.#formatTime(this.datetimeFormatter, target)
+  }
+
+  shortdateTargetConnected(target) {
+    this.#formatTime(this.shortdateFormatter, target)
+  }
+
+  agoTargetConnected(target) {
+    this.#formatTime(this.agoFormatter, target)
+  }
+
+  #refreshRelativeTimes() {
+    this.agoTargets.forEach(it => this.#formatTime(this.agoFormatter, it))
   }
 
   #formatTime(formatter, target) {
-    const dt = new Date(target.getAttribute("datetime"))
-    target.textContent = formatter.format(dt)
-    target.title = this.dateTimeFormatter.format(dt)
+    const date = new Date(target.getAttribute("datetime"))
+    target.textContent = formatter.format(date)
+    target.title = this.datetimeFormatter.format(date)
+  }
+}
+
+class TimeAgoFormat extends Intl.RelativeTimeFormat {
+  format(date) {
+    const seconds = (Date.now() - date) / 1000
+    const minutes = seconds / 60
+    const hours   = minutes / 60
+    const days    = hours / 24
+    const weeks   = days / 7
+    const months  = days / 30.4
+    const years   = days / 365
+
+    if (years >= 1) {
+      return super.format(-Math.floor(years), "years")
+    } else if (months >= 1) {
+      return super.format(-Math.floor(months), "months")
+    } else if (weeks >= 1) {
+      return super.format(-Math.floor(weeks), "weeks")
+    } else if (days >= 1) {
+      return super.format(-Math.floor(days), "days")
+    } else if (hours >= 1) {
+      return super.format(-Math.floor(hours), "hours")
+    } else if (minutes >= 1) {
+      return super.format(-Math.floor(minutes), "minutes")
+    } else {
+     return this.#formatAsTime(date)
+    }
+  }
+
+  #formatAsTime(date) {
+    return new Intl.DateTimeFormat(undefined, { timeStyle: "short" }).format(date)
   }
 }

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

@@ -5,8 +5,8 @@ export default class extends Controller {
   static targets = [ "trigger", "content" ]
   static values  = { placement: { type: String, default: "bottom" } }
 
-  #showTimer = null
-  #hideTimer = null
+  #showTimer
+  #hideTimer
 
   initialize() {
     this.orient = this.orient.bind(this)

data/lib/generators/css_zero/authentication/templates/app/views/passwords/edit.html.erb.tt

@@ -1,5 +1,7 @@
 <%% if alert.present? %>
-  <div popover class="flash" style="--flash-position: 5rem;" data-controller="element-removal" data-action="animationend->element-removal#remove" role="alert"><%%= alert %></div>
+  <div popover="manual" class="flash" style="--flash-position: 5rem" data-controller="flash" data-action="animationend->flash#hide" role="alert">
+    <div class="flash__content"><%%= alert %></div>
+  </div>
 <%% end %>
 
 <h1 class="font-bold text-4xl mbe-4">Update your password</h1>
@@ -8,4 +10,4 @@
   <%%= form.password_field :password, required: true, autocomplete: "new-password", placeholder: "Enter new password", maxlength: 72, class: "input" %>
   <%%= form.password_field :password_confirmation, required: true, autocomplete: "new-password", placeholder: "Repeat new password", maxlength: 72, class: "input" %>
   <%%= form.submit "Save", class: "btn btn--primary i-min" %>
-<%% end %>
+<%% end %>

data/lib/generators/css_zero/authentication/templates/app/views/passwords/new.html.erb.tt

@@ -1,5 +1,7 @@
 <%% if alert.present? %>
-  <div popover class="flash" style="--flash-position: 5rem;" data-controller="element-removal" data-action="animationend->element-removal#remove" role="alert"><%%= alert %></div>
+  <div popover="manual" class="flash" style="--flash-position: 5rem" data-controller="flash" data-action="animationend->flash#hide" role="alert">
+    <div class="flash__content"><%%= alert %></div>
+  </div>
 <%% end %>
 
 <h1 class="font-bold text-4xl mbe-4">Forgot your password?</h1>

data/lib/generators/css_zero/authentication/templates/app/views/sessions/new.html.erb.tt

@@ -1,9 +1,13 @@
 <%% if alert.present? %>
-  <div popover class="flash" style="--flash-position: 5rem;" data-controller="element-removal" data-action="animationend->element-removal#remove" role="alert"><%%= alert %></div>
+  <div popover="manual" class="flash" style="--flash-position: 5rem" data-controller="flash" data-action="animationend->flash#hide" role="alert">
+    <div class="flash__content"><%%= alert %></div>
+  </div>
 <%% end %>
 
 <%% 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>
+  <div popover="manual" class="flash" style="--flash-position: 5rem" data-controller="flash" data-action="animationend->flash#hide" role="alert">
+    <div class="flash__content"><%%= notice %></div>
+  </div>
 <%% end %>
 
 <h1 class="font-bold text-4xl mbe-4">Sign in</h1>
@@ -16,4 +20,4 @@
     <%%= form.submit "Sign in", class: "btn btn--primary" %>
     <%%= link_to "Forgot password?", new_password_path, class: "text-sm font-medium underline" %>
   </div>
-<%% end %>
+<%% end %>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 2.1.0
+  version: 3.0.0
 platform: ruby
 authors:
 - Lázaro Nixon
@@ -80,7 +80,9 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/input_clearable.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/input_copyable.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/input_otp.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/input_revealable.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/item.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/layouts.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/lightbox.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/menu.css
@@ -88,6 +90,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/resizable.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/separator.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
@@ -129,7 +132,6 @@ files:
 - lib/generators/css_zero/add/templates/app/javascript/controllers/timezone_cookie_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_otp_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/web_share_controller.js
 - lib/generators/css_zero/authentication/authentication_generator.rb
 - lib/generators/css_zero/authentication/templates/app/views/passwords/edit.html.erb.tt

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

@@ -1,32 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = [ "input" ]
-
-  initialize() {
-    this.abortController = new AbortController()
-  }
-
-  disconnect() {
-    this.abortController.abort()
-  }
-
-  connect() {
-    this.#supportsOTP && this.#requestOTP()
-  }
-
-  #requestOTP() {
-    navigator.credentials.get(this.#options).then(credential => {
-      this.inputTarget.value = credential.code
-      this.element.requestSubmit()
-    }).catch(error => {})
-  }
-
-  get #options() {
-    return { otp: { transport: ["sms"] }, signal: this.abortController.signal }
-  }
-
-  get #supportsOTP() {
-    return "OTPCredential" in window
-  }
-}