css-zero 3.1.0 → 4.0.0

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

@@ -31,11 +31,11 @@ chart:
   - app/javascript/controllers/chart_controller.js
 check_all:
   - app/javascript/controllers/check_all_controller.js
+collapsible:
+  - app/javascript/controllers/collapsible_controller.js
 color_scheme:
   - app/assets/stylesheets/color_scheme.css
   - app/javascript/controllers/color_scheme_controller.js
-collapsible:
-  - app/javascript/controllers/collapsible_controller.js
 combobox:
   - app/assets/stylesheets/combobox.css
   - app/javascript/controllers/combobox_controller.js
@@ -45,7 +45,6 @@ command:
   - app/javascript/controllers/command_controller.js
 context_menu:
   - app/assets/stylesheets/popover.css
-  - app/javascript/controllers/popover_controller.js
   - app/assets/stylesheets/menu.css
   - app/javascript/controllers/context_menu_controller.js
 datepicker:
@@ -56,7 +55,6 @@ dialog:
   - app/javascript/controllers/dialog_controller.js
 dropdown:
   - app/assets/stylesheets/popover.css
-  - app/javascript/controllers/popover_controller.js
   - app/assets/stylesheets/menu.css
   - app/javascript/controllers/menu_controller.js
 dropzone:
@@ -83,11 +81,8 @@ icons:
   - app/assets/images/chevron-right.svg
   - app/assets/images/ellipsis.svg
   - app/assets/images/chevrons-up-down.svg
-  - app/assets/images/menu.svg
   - app/assets/images/x.svg
   - app/assets/images/search.svg
-  - app/assets/images/eye.svg
-  - app/assets/images/eye-off.svg
   - app/assets/images/copy.svg
   - app/assets/images/download.svg
   - app/assets/images/share.svg
@@ -97,6 +92,7 @@ icons:
   - app/assets/images/moon.svg
   - app/assets/images/circle-alert.svg
   - app/assets/images/circle-check.svg
+  - app/assets/images/panel-left.svg
 input:
   - app/assets/stylesheets/input.css
   - app/assets/images/chevron-down-zinc-500.svg
@@ -112,13 +108,20 @@ input_otp:
 input_revealable:
   - app/javascript/controllers/input_revealable_controller.js
   - app/assets/stylesheets/input_revealable.css
+  - app/assets/images/eye.svg
+  - app/assets/images/eye-off.svg
 inputmask:
   - app/javascript/controllers/inputmask_controller.js
+keyboard:
+  - app/assets/stylesheets/keyboard.css
 layouts:
   - app/assets/stylesheets/layouts.css
   - app/assets/stylesheets/sidebar_menu.css
   - app/javascript/controllers/toggle_class_controller.js
   - app/assets/images/panel-left.svg
+  - app/assets/images/chevron-right.svg
+lexxy:
+  - app/assets/stylesheets/lexxy.css
 lightbox:
   - app/assets/stylesheets/lightbox.css
   - app/javascript/controllers/lightbox_controller.js
@@ -127,16 +130,16 @@ list:
   - app/assets/stylesheets/list.css
 local_time:
   - app/javascript/controllers/local_time_controller.js
+pagination:
+  - app/assets/stylesheets/pagination.css
 popover:
   - app/assets/stylesheets/popover.css
-  - app/javascript/controllers/popover_controller.js
+  - app/javascript/controllers/interest_controller.js
 progress:
   - app/assets/stylesheets/progress.css
-prose:
-  - app/assets/stylesheets/prose.css
 resizable:
   - app/assets/stylesheets/resizable.css
-  - app/assets/stylesheets/resizable_controller.js
+  - app/javascript/controllers/resizable_controller.js
   - app/assets/images/grip-horizontal-zink-500.svg
   - app/assets/images/grip-vertical-zink-500.svg
 separator:
@@ -148,6 +151,8 @@ skeleton:
   - app/assets/stylesheets/skeleton.css
 sortable:
   - app/javascript/controllers/sortable_controller.js
+sound:
+  - app/javascript/controllers/sound_controller.js
 switch:
   - app/assets/stylesheets/switch.css
 table:
@@ -159,8 +164,6 @@ timezone_cookie:
   - app/javascript/controllers/timezone_cookie_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

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

@@ -5,41 +5,51 @@
 
     &::details-content {
       block-size: 0;
+      opacity: 0;
       overflow: hidden;
       transition-behavior: allow-discrete;
       transition-duration: var(--time-200);
-      transition-property: content-visibility block-size;
+      transition-property: content-visibility, block-size, opacity;
+      transition-timing-function: var(--ease-out-3);
     }
 
     &[open]::details-content {
-      block-size: auto;
+      block-size: auto; opacity: 1;
     }
   }
 
   summary {
-    align-items: center;
+    align-items: flex-start;
     cursor: default;
     display: flex;
     font-weight: var(--font-medium);
-    padding-block: var(--size-4);
+    padding-block: var(--size-2_5);
 
     &:hover {
       text-decoration: underline;
     }
 
     &:focus-visible {
-      outline: var(--border-2) auto var(--color-selected-dark);
+      outline: var(--border-2) solid var(--color-selected-dark);
+    }
+
+    &[aria-disabled="true"] {
+      opacity: var(--opacity-50);
+      pointer-events: none;
     }
 
     &::after {
       background-color: currentColor;
       block-size: var(--size-4);
+      color: var(--color-text-subtle);
       content: "";
       inline-size: var(--size-4);
       margin-inline-start: auto;
       mask-image: url("chevron-down.svg");
       mask-size: cover;
-      transition: transform var(--time-200);
+      transition-duration: var(--time-300);
+      transition-property: transform;
+      transition-timing-function: var(--ease-spring-2);
     }
 
     details[open] > &::after {

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

@@ -5,7 +5,7 @@
   color: var(--alert-color, var(--color-text));
   font-size: var(--text-sm);
   inline-size: var(--size-full);
-  padding: var(--size-4);
+  padding: var(--size-2) var(--size-2_5);
 }
 
 .alert--positive {

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

@@ -1,4 +1,5 @@
 .auto-animate > * {
+  view-transition-name: match-element;
   view-transition-class: auto-animation;
 }
 
@@ -7,7 +8,7 @@
 }
 
 ::view-transition-old(.auto-animation):only-child {
-  animation: remove-animation 250ms ease-out;
+  animation: remove-animation 250ms ease-out forwards;
 }
 
 @keyframes add-animation {

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

@@ -1,21 +1,21 @@
 .avatar {
-  --radius: var(--rounded-full);
-  --size: var(--avatar-size, var(--size-10));
+  --avatar-radius: var(--rounded-full);
+  --avatar-size: var(--size-8);
 
-  block-size: var(--size);
-  border-radius: var(--radius);
+  block-size: var(--avatar-size);
+  border-radius: var(--avatar-radius);
   display: flex;
   flex-shrink: 0;
-  inline-size: var(--size);
+  inline-size: var(--avatar-size);
   overflow: hidden;
 
-  &:is(.btn) {
-    --btn-inline-size: var(--size);
+  &.btn {
+    --btn-inline-size: var(--avatar-size);
     --btn-padding: 0;
-    --btn-radius: var(--radius);
+    --btn-radius: var(--avatar-radius);
   }
 
-  &:is(.btn):hover {
+  &.btn:hover {
     filter: var(--brightness-90);
   }
 
@@ -30,9 +30,9 @@
     align-items: center;
     background-color: var(--color-border-light);
     block-size: var(--size-full);
-    border-radius: var(--radius);
+    border-radius: var(--avatar-radius);
     display: flex;
-    font-size: calc(var(--size) * .4);
+    font-size: calc(var(--avatar-size) * .4);
     inline-size: var(--size-full);
     justify-content: center;
     user-select: none;

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

@@ -2,15 +2,14 @@
   align-items: center;
   background-color: var(--badge-background, var(--color-bg));
   border: 1px solid var(--badge-border-color, var(--color-border));
-  border-radius: var(--badge-radius, var(--rounded-md));
+  border-radius: var(--badge-radius, var(--rounded-3xl));
   box-shadow: var(--badge-box-shadow, none);
   color: var(--badge-color, var(--color-text));
   column-gap: var(--size-1);
   display: inline-flex;
   font-size: var(--text-xs);
-  font-weight: var(--font-semibold);
+  font-weight: var(--font-medium);
   justify-content: center;
-  line-height: var(--leading-4);
   min-inline-size: var(--badge-min-inline-size, 0);
   padding: var(--badge-padding, .125rem .5rem);
 }

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

@@ -3,17 +3,17 @@
   background-color: var(--btn-background, var(--color-surface));
   block-size: var(--btn-block-size, auto);
   border: 1px solid var(--btn-border-color, var(--color-border));
-  border-radius: var(--btn-radius, var(--rounded-md));
+  border-radius: var(--btn-radius, var(--rounded-lg));
   box-shadow: var(--btn-box-shadow, var(--shadow-xs));
   color: var(--btn-color, var(--color-text));
-  column-gap: var(--size-2);
-  cursor: default;
+  column-gap: var(--size-1_5);
+  cursor: var(--btn-cursor, default);
   display: inline-flex;
   font-size: var(--btn-font-size, var(--text-sm));
   font-weight: var(--btn-font-weight, var(--font-medium));
   inline-size: var(--btn-inline-size, auto);
   justify-content: var(--btn-justify-content, center);
-  padding: var(--btn-padding, .375rem 1rem);
+  padding: var(--btn-padding, .25rem .625rem);
   position: relative;
   white-space: nowrap;
 
@@ -73,20 +73,30 @@
 }
 
 .btn--icon {
-  --btn-padding: var(--size-2);
+  --btn-padding: var(--size-1_5);
 }
 
-[aria-busy="true"] .btn--busy:disabled {
+.btn--feedback {
+  transition-duration: var(--time-150);
+  transition-property: transform;
+  transition-timing-function: var(--ease-spring-2);
+
+  &:active {
+    transform: scale(0.97);
+  }
+}
+
+[aria-busy] .btn--busy:disabled {
   > * {
     visibility: hidden;
   }
 
   &::after {
-    animation: spin 1s linear infinite;
+    animation: x-spin 1s linear infinite;
     background-color: currentColor;
-    block-size: var(--size-5);
+    block-size: var(--size-4);
     content: "";
-    inline-size: var(--size-5);
+    inline-size: var(--size-4);
     mask-image: url("loading.svg");
     mask-size: cover;
     position: absolute;

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

@@ -3,5 +3,5 @@
   border-radius: var(--rounded-xl);
   border-width: var(--border);
   box-shadow: var(--shadow-sm);
-  padding: var(--size-6);
+  padding: var(--size-4);
 }

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(--carousel-items-gap, 1rem);
   display: flex;
-  gap: var(--carousel-items-gap, 1rem);
   inline-size: var(--size-full);
   overflow: hidden;
   scroll-behavior: smooth;

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

@@ -1,16 +1,15 @@
-@import url("https://esm.sh/tom-select@2.4.3/dist/css/tom-select.min.css");
+@import url("https://esm.sh/tom-select@2.6.1/dist/css/tom-select.min.css");
 
 .ts-control {
   align-items: center;
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
-  border-radius: var(--rounded-md);
+  border-radius: var(--rounded-lg);
   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);
+  min-block-size: var(--size-8);
+  padding: var(--size-1) var(--size-2_5);
 
   > input {
     color: inherit; font-size: inherit;
@@ -20,16 +19,16 @@
 .ts-dropdown {
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
-  border-radius: var(--rounded-md);
+  border-radius: var(--rounded-lg);
   box-shadow: var(--shadow-md);
   color: var(--color-text);
   font-size: var(--text-sm);
-  line-height: inherit;
 
   /* Setup transition */
   transition-behavior: allow-discrete;
-  transition-duration: var(--time-150);
+  transition-duration: var(--time-300);
   transition-property: display, opacity, transform;
+  transition-timing-function: var(--ease-spring-2);
 
   /* Exit stage to */
   opacity: 0;
@@ -66,14 +65,14 @@
     padding: var(--size-1_5) var(--size-2);
   }
 
-  .create {
-    padding: var(--size-1_5) var(--size-2);
+  :is(.option, .create) {
+    border: 1px solid transparent;
+    border-radius: var(--rounded-lg);
+    padding: var(--size-1) var(--size-1_5);
   }
 
-  .option {
-    border: 1px solid transparent;
-    border-radius: var(--rounded-md);
-    padding: var(--size-1_5) var(--size-2);
+  [data-selectable].option {
+    cursor: default;
   }
 
   .active {
@@ -86,7 +85,7 @@
   }
 
   .spinner {
-    margin: var(--size-1_5) 0 0;
+    margin: var(--size-1) 0 0;
   }
 
   .spinner::after {
@@ -100,13 +99,18 @@
   background-position: center right var(--size-2) !important;
   background-repeat: no-repeat !important;
   background-size: var(--size-4) auto !important;
+  cursor: text;
+
+  input {
+    cursor: inherit;
+  }
 }
 
 .ts-wrapper.multi .ts-control > .item {
   background: var(--color-border-light);
-  border-radius: var(--rounded-md);
+  border-radius: var(--rounded-lg);
   color: inherit;
-  line-height: var(--leading-tight);
+  line-height: var(--leading-none);
 }
 
 .disabled .ts-control {

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

@@ -1,22 +1,20 @@
 .command {
   background-color: var(--color-surface);
-  border-radius: var(--rounded-lg);
+  border-radius: var(--rounded-xl);
   border-width: var(--border);
   box-shadow: var(--shadow-xs);
   display: flex;
+  padding: var(--size-2);
   flex-direction: column;
 }
 
 .command__input {
-  --input-background: transparent;
-  --input-border-color: transparent;
+  --input-background: var(--color-border-light);
   --input-box-shadow: none;
   --input-outline-size: 0;
-  --input-padding: var(--size-2_5);
 }
 
 .command__list {
-  border-block-start-width: var(--border);
   max-block-size: 300px;
   overflow-y: auto;
 
@@ -32,7 +30,7 @@
 .command__group {
   display: flex;
   flex-direction: column;
-  padding: var(--size-1);
+  padding-block: var(--size-1);
   row-gap: 1px;
 
   &:not(:has(.command__item:not([hidden]))) {
@@ -43,14 +41,8 @@
 .command__group-header {
   color: var(--color-text-subtle);
   font-size: var(--text-xs);
-  padding: var(--size-1_5) var(--size-2);
-}
-
-.command__empty {
-  display: none;
-  font-size: var(--text-sm);
-  justify-content: center;
-  padding-block: var(--size-6);
+  font-weight: var(--font-medium);
+  padding: var(--size-1) var(--size-1_5);
 }
 
 .command__item {
@@ -59,7 +51,8 @@
   --btn-font-weight: var(--font-normal);
   --btn-justify-content: start;
   --btn-outline-size: 0;
-  --btn-padding: var(--size-1_5) var(--size-2);
+  --btn-padding: var(--size-1) var(--size-1_5);
+  --btn-radius: var(--rounded-sm);
 
   &[aria-selected="true"] {
     --btn-background: var(--color-border-light);

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

@@ -1,30 +1,34 @@
 @import url("https://esm.sh/flatpickr@4.6.13/dist/flatpickr.min.css");
 
 .flatpickr-calendar {
-  --calendar-size: 250px;
-  --container-size: 220px;
-  --day-size: var(--size-8);
+  --datepicker-size: 220px;
+  --datepicker-day-size: var(--size-7);
+  --datepicker-days-size: calc(var(--datepicker-day-size) * 7);
 
   background: var(--color-surface);
   border: 1px solid var(--color-border);
-  border-radius: var(--rounded-md);
+  border-radius: var(--rounded-lg);
   box-shadow: var(--shadow-md);
   font-size: var(--text-sm);
-  inline-size: var(--calendar-size);
+  inline-size: var(--datepicker-size);
+
+  &.animate.open {
+    animation: datepicker-in var(--time-300) var(--ease-spring-2);
+  }
 
   .flatpickr-innerContainer {
     justify-content: center;
-    padding-block-end: var(--size-3);
+    padding-block-end: var(--size-2);
   }
 
   .flatpickr-days {
-    inline-size: var(--container-size);
+    inline-size: var(--datepicker-days-size);
   }
 
   .dayContainer {
-    inline-size: var(--container-size);
-    max-inline-size: var(--container-size);
-    min-inline-size: var(--container-size);
+    inline-size: var(--datepicker-days-size);
+    max-inline-size: var(--datepicker-days-size);
+    min-inline-size: var(--datepicker-days-size);
   }
 
   .dayContainer + .dayContainer {
@@ -56,10 +60,9 @@
 
   .flatpickr-monthDropdown-months {
     appearance: none;
-    border-radius: var(--rounded-md);
+    border-radius: var(--rounded-lg);
     font-size: var(--text-sm);
     font-weight: var(--font-medium);
-    line-height: var(--leading-normal);
     padding: 0;
     text-align: center;
 
@@ -70,12 +73,9 @@
 
   .numInputWrapper {
     input {
-      border-radius: var(--rounded-md);
       color: var(--color-text);
       font-size: var(--text-sm);
       font-weight: var(--font-medium);
-      line-height: var(--leading-normal);
-      padding: 0;
       text-align: center;
     }
 
@@ -131,13 +131,17 @@
 
   .flatpickr-day {
     border-color: transparent !important;
-    border-radius: var(--rounded-md);
+    border-radius: var(--rounded-lg);
     box-shadow: none !important;
     color: var(--color-text);
-    height: var(--day-size);
-    line-height: var(--day-size);
+    height: var(--datepicker-day-size);
+    line-height: var(--datepicker-day-size);
     margin-block-start: var(--size-2);
-    max-width: var(--day-size);
+    max-width: var(--datepicker-day-size);
+
+    &:is(.hidden) {
+      visibility: visible;
+    }
 
     &:is(.inRange) {
       border-radius: 0;
@@ -189,3 +193,7 @@
     display: none;
   }
 }
+
+@keyframes datepicker-in {
+  from { opacity: 0; transform: var(--scale-95); }
+}

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

@@ -1,26 +1,27 @@
 .dialog {
   background-color: var(--color-bg);
-  border-radius: var(--rounded-lg);
+  border-radius: var(--rounded-xl);
   border-width: var(--border);
-  box-shadow: var(--shadow-lg);
   color: var(--color-text);
   inline-size: var(--size-full);
   margin: auto;
-  max-inline-size: var(--dialog-size, var(--max-i-lg));
+  max-inline-size: calc(100% - 2rem);
 
   &::backdrop {
-    background-color: rgba(0, 0, 0, .5);
+    backdrop-filter: var(--blur-xs);
   }
 
   /* Setup transition */
   transition-behavior: allow-discrete;
-  transition-duration: var(--time-200);
+  transition-duration: var(--time-300);
   transition-property: display, overlay, opacity, transform;
+  transition-timing-function: var(--ease-spring-2);
 
   &::backdrop {
     transition-behavior: allow-discrete;
-    transition-duration: var(--time-150);
+    transition-duration: var(--time-100);
     transition-property: display, overlay, opacity;
+    transition-timing-function: var(--ease-out-3);
   }
 
   /* Exit stage to */
@@ -37,13 +38,17 @@
     &[open]::backdrop { opacity: 0; }
   }
 
-  @media (width < 40rem) {
-    border-radius: 0;
+  @supports (-webkit-hyphens: none) {
+    transition-behavior: normal;
+  }
+
+  @media (width >= 40rem) {
+    max-inline-size: var(--dialog-size, var(--max-i-sm));
   }
 }
 
 .dialog__content {
-  padding: var(--size-6);
+  padding: var(--size-4);
 }
 
 .dialog__close {

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

@@ -1,4 +1,4 @@
-@import url("https://esm.sh/dropzone@6.0.0-beta.2/dist/dropzone.css");
+@import url("https://esm.sh/@deltablot/dropzone@7.4.3/dist/dropzone.css");
 
 .dropzone {
   border: 2px dashed var(--color-border);