css-zero 4.0.0 → 4.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 04cec12c858b6be6c57e4e48f6a583a72642980a4fd43c2b818d9222511d040f
-  data.tar.gz: 96f41f6ab36dc4d3eda5ca6e9c733157277ff73cfef80ceb574f79731ca29f74
+  metadata.gz: 69a344da6cc617d2132cb91f0ba9912e68194ad31b5d751657c3bb69cd56ffe3
+  data.tar.gz: 822f6f73459d60c11e97cb87174419ea533e9d48de2c686b1c9b35b6f58494ea
 SHA512:
-  metadata.gz: 9c112fdc7c2b6b92481b1ed64eb893fa49467d9c4fbe793aa8ddfc872a2c175192ffecdfc98af12380e79df78bfcaaa567be8133d0ceb8b673f794520a835ac7
-  data.tar.gz: 5ef514bc01e61e09a752bd3f0ba31af8ff4c6b041a08bf9126bd8e33e0dce9af395b14883a7f4d39efb1d425c51da7a7cfec64e93e5f58360f0b67b974f75300
+  metadata.gz: cd7f4fb30f2d00e6c505736ef0e3434da566997fc451d6d3748b8b5a63c800721eecd747ca4c7688c5ccdd6a355ad9ab4b7182dcc8aefb8a42aabf6c60b6ef76
+  data.tar.gz: 0ac061455ac6952b5f7dcbe9fdf6714d4ced0245c75558c56816b5d998c282f09249512551384dbc49a7ebdaef8085596038110071ce7d6e6433498e69d479a8

data/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 4.0.2 - 2026-08-09
+- Introduce --btn-column-gap
+- Add avatar badge
+- Improve badge
+- Introduce --card-padding
+- Remove command group separator
+- Improve list
+- Improve separator
+- Update cuelume to 0.2.2
+
+## 4.0.1 - 2026-08-02
+- Revert spring animations
+- Add .dialog__footer subcomponent
+- Add .card__footer subcomponent
+
 ## 4.0.0 - 2026-07-27
 - Use CSS variable for OTP input font family
 - Use CSS only popover (Anchor positioning)

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "4.0.0"
+  VERSION = "4.0.2"
 end

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

@@ -1,8 +1,11 @@
 :where(.accordion) {
   details {
-    border-block-end-width: var(--border);
     font-size: var(--text-sm);
 
+    &:not(:last-child) {
+      border-block-end-width: var(--border);
+    }
+
     &::details-content {
       block-size: 0;
       opacity: 0;
@@ -47,9 +50,9 @@
       margin-inline-start: auto;
       mask-image: url("chevron-down.svg");
       mask-size: cover;
-      transition-duration: var(--time-300);
+      transition-duration: var(--time-200);
       transition-property: transform;
-      transition-timing-function: var(--ease-spring-2);
+      transition-timing-function: var(--ease-out-3);
     }
 
     details[open] > &::after {

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

@@ -1,4 +1,6 @@
 .avatar {
+  --avatar-badge-size: calc(var(--avatar-size) * .3125);
+  --avatar-box-shadow: 0 0 0 2px var(--color-bg);
   --avatar-radius: var(--rounded-full);
   --avatar-size: var(--size-8);
 
@@ -7,7 +9,7 @@
   display: flex;
   flex-shrink: 0;
   inline-size: var(--avatar-size);
-  overflow: hidden;
+  position: relative;
 
   &.btn {
     --btn-inline-size: var(--avatar-size);
@@ -22,6 +24,7 @@
   img {
     aspect-ratio: var(--aspect-square);
     block-size: var(--size-full);
+    border-radius: var(--avatar-radius);
     inline-size: var(--size-full);
     object-fit: cover;
   }
@@ -31,11 +34,37 @@
     background-color: var(--color-border-light);
     block-size: var(--size-full);
     border-radius: var(--avatar-radius);
+    color: var(--color-text-subtle);
     display: flex;
-    font-size: calc(var(--avatar-size) * .4);
+    font-size: calc(var(--avatar-size) * .5);
     inline-size: var(--size-full);
     justify-content: center;
     user-select: none;
+
+    .icon {
+      --icon-size: 1em;
+    }
+  }
+}
+
+.avatar__badge {
+  background-color: var(--avatar-badge-color, var(--color-primary));
+  block-size: var(--avatar-badge-size);
+  border-radius: var(--rounded-full);
+  box-shadow: var(--avatar-box-shadow);
+  inline-size: var(--avatar-badge-size);
+  inset: auto 0 0 auto;
+  position: absolute;
+
+  &:has(.icon) {
+    align-items: center;
+    color: var(--color-text-reversed);
+    display: flex;
+    justify-content: center;
+  }
+
+  .icon {
+    --icon-size: calc(var(--avatar-badge-size) * .75);
   }
 }
 
@@ -43,6 +72,10 @@
   align-items: center;
   display: flex;
 
+  > .avatar {
+    box-shadow: var(--avatar-box-shadow);
+  }
+
   > :not(:last-child) {
     margin-inline-end: calc(var(--size-2) * -1);
   }

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

@@ -3,46 +3,43 @@
   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-3xl));
-  box-shadow: var(--badge-box-shadow, none);
   color: var(--badge-color, var(--color-text));
   column-gap: var(--size-1);
   display: inline-flex;
+  flex-shrink: 0;
   font-size: var(--text-xs);
   font-weight: var(--font-medium);
   justify-content: center;
+  line-height: var(--leading-tight);
   min-inline-size: var(--badge-min-inline-size, 0);
   padding: var(--badge-padding, .125rem .5rem);
+  white-space: nowrap;
+
+  .icon {
+    --icon-size: 1em;
+  }
 }
 
 .badge--primary {
   --badge-background: var(--color-primary);
   --badge-border-color: transparent;
-  --badge-box-shadow: var(--shadow-sm);
   --badge-color: var(--color-text-reversed);
 }
 
 .badge--secondary {
   --badge-background: var(--color-secondary);
   --badge-border-color: transparent;
-  --badge-box-shadow: none;
   --badge-color: var(--color-text);
 }
 
 .badge--positive {
   --badge-background: var(--color-positive);
   --badge-border-color: transparent;
-  --badge-box-shadow: var(--shadow-sm);
   --badge-color: white;
 }
 
 .badge--negative {
   --badge-background: var(--color-negative);
   --badge-border-color: transparent;
-  --badge-box-shadow: var(--shadow-sm);
   --badge-color: white;
 }
-
-.badge--number {
-  --badge-min-inline-size: var(--size-5);
-  --badge-radius: var(--rounded-full);
-}

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

@@ -6,7 +6,7 @@
   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-1_5);
+  column-gap: var(--btn-column-gap, var(--size-1_5));
   cursor: var(--btn-cursor, default);
   display: inline-flex;
   font-size: var(--btn-font-size, var(--text-sm));
@@ -79,7 +79,7 @@
 .btn--feedback {
   transition-duration: var(--time-150);
   transition-property: transform;
-  transition-timing-function: var(--ease-spring-2);
+  transition-timing-function: var(--ease-out-3);
 
   &:active {
     transform: scale(0.97);

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

@@ -1,7 +1,16 @@
 .card {
+  --card-padding: var(--size-4);
   background-color: var(--color-surface);
   border-radius: var(--rounded-xl);
   border-width: var(--border);
   box-shadow: var(--shadow-sm);
-  padding: var(--size-4);
+  padding: var(--card-padding, var(--size-4));
+}
+
+.card__footer {
+  background-color: rgb(from var(--color-border-light) r g b / .5);
+  border-block-start-width: var(--border);
+  margin-block-end: calc(var(--card-padding) * -1);
+  margin-inline: calc(var(--card-padding) * -1);
+  padding: var(--card-padding);
 }

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

@@ -14,6 +14,10 @@
   > input {
     color: inherit; font-size: inherit;
   }
+
+  &:focus-within {
+    outline: 2px solid var(--color-selected-dark);
+  }
 }
 
 .ts-dropdown {
@@ -26,9 +30,9 @@
 
   /* Setup transition */
   transition-behavior: allow-discrete;
-  transition-duration: var(--time-300);
+  transition-duration: var(--time-100);
   transition-property: display, opacity, transform;
-  transition-timing-function: var(--ease-spring-2);
+  transition-timing-function: var(--ease-out-3);
 
   /* Exit stage to */
   opacity: 0;
@@ -84,6 +88,11 @@
     background-color: transparent !important;
   }
 
+  .no-results {
+    color: var(--color-text-subtle);
+    text-align: center;
+  }
+
   .spinner {
     margin: var(--size-1) 0 0;
   }

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

@@ -23,10 +23,6 @@
   }
 }
 
-.command__group:not(:first-child) {
-  border-block-start-width: var(--border);
-}
-
 .command__group {
   display: flex;
   flex-direction: column;
@@ -62,5 +58,6 @@
 .command__item-key {
   color: var(--color-text-subtle);
   font-size: var(--text-xs);
+  letter-spacing: var(--tracking-widest);
   margin-inline-start: auto;
 }

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

@@ -13,7 +13,7 @@
   inline-size: var(--datepicker-size);
 
   &.animate.open {
-    animation: datepicker-in var(--time-300) var(--ease-spring-2);
+    animation: datepicker-in var(--time-100) var(--ease-out-3);
   }
 
   .flatpickr-innerContainer {

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

@@ -1,5 +1,5 @@
 .dialog {
-  background-color: var(--color-bg);
+  background-color: var(--color-surface);
   border-radius: var(--rounded-xl);
   border-width: var(--border);
   color: var(--color-text);
@@ -13,9 +13,9 @@
 
   /* Setup transition */
   transition-behavior: allow-discrete;
-  transition-duration: var(--time-300);
+  transition-duration: var(--time-100);
   transition-property: display, overlay, opacity, transform;
-  transition-timing-function: var(--ease-spring-2);
+  transition-timing-function: var(--ease-out-3);
 
   &::backdrop {
     transition-behavior: allow-discrete;
@@ -51,6 +51,14 @@
   padding: var(--size-4);
 }
 
+.dialog__footer {
+  background-color: rgb(from var(--color-border-light) r g b / .5);
+  border-block-start-width: var(--border);
+  margin-block-end: calc(var(--size-4) * -1);
+  margin-inline: calc(var(--size-4) * -1);
+  padding: var(--size-4);
+}
+
 .dialog__close {
   inset-block-start: var(--size-3);
   inset-inline-end:  var(--size-3);

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

@@ -1,27 +1,36 @@
 .list {
   display: flex;
   flex-direction: column;
-  row-gap: var(--size-4);
+  row-gap: var(--list-gap, var(--size-4));
 }
 
 .list-row {
-  background-color: var(--item-background, transparent);
-  border: 1px solid var(--item-border-color, var(--color-border));
+  background-color: var(--list-background, transparent);
+  border: 1px solid var(--list-border-color, var(--color-border));
   border-radius: var(--rounded-xl);
   font-size: var(--text-sm);
-  padding: var(--size-4);
+  padding: var(--list-padding, .625rem .75rem);
+}
+
+.list-row__media {
+  align-self: start;
+  block-size: var(--list-row-media-size, 2.5rem);
+  border-radius: var(--rounded-md);
+  flex-shrink: 0;
+  inline-size: var(--list-row-media-size, 2.5rem);
+  object-fit: cover;
 }
 
 .list-row--muted {
-  --item-background: rgb(from var(--color-border-light) r g b / .5);
+  --list-background: rgb(from var(--color-border-light) r g b / .5);
 }
 
 .list-row--borderless {
-  --item-border-color: transparent;
+  --list-border-color: transparent;
 }
 
 .list-row--link:hover {
-  --item-background: rgb(from var(--color-border-light) r g b / .5);
+  --list-background: rgb(from var(--color-border-light) r g b / .5);
 }
 
 .list-row--link:focus-visible {
@@ -29,6 +38,6 @@
 }
 
 .list-row--check:has(:checked) {
-  --item-background: rgb(from var(--color-border-light) r g b / .5);
-  --item-border-color: var(--color-primary);
+  --list-background: rgb(from var(--color-border-light) r g b / .5);
+  --list-border-color: var(--color-primary);
 }

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

@@ -11,7 +11,8 @@
   --btn-cursor: pointer;
 
   &[aria-current="page"] {
+    --btn-background: var(--color-surface);
     --btn-border-color: var(--color-border);
+    --btn-box-shadow: var(--shadow-xs);
   }
 }
-

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

@@ -13,9 +13,9 @@
 
   /* Setup transition */
   transition-behavior: allow-discrete;
-  transition-duration: var(--time-300);
+  transition-duration: var(--time-100);
   transition-property: display, opacity, overlay, transform;
-  transition-timing-function: var(--ease-spring-2);
+  transition-timing-function: var(--ease-out-3);
 
   /* Exit stage to */
   opacity: 0; transform: var(--scale-95);

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

@@ -1,9 +1,9 @@
 .progress {
-  --progress-bar-color: rgb(from var(--color-primary) r g b / .2);
+  --progress-bar-color: var(--color-border-light);
   --progress-value-color: var(--color-primary);
 
   background-color: var(--progress-bar-color);
-  block-size: var(--size-2);
+  block-size: var(--size-1);
   border-radius: var(--rounded-full);
   inline-size: var(--size-full);
   overflow: hidden;

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

@@ -2,12 +2,12 @@
   background-color: var(--sep-color, var(--color-border));
   block-size: 1px;
   flex-shrink: 0;
-  inline-size: var(--sep-size, var(--size-full));
+  inline-size: var(--size-full);
 }
 
 .separator-vertical {
+  align-self: stretch;
   background-color: var(--sep-color, var(--color-border));
-  block-size: var(--sep-size, var(--size-full));
   flex-shrink: 0;
   inline-size: 1px;
 }

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

@@ -1,5 +1,5 @@
 .sheet {
-  background-color: var(--color-bg);
+  background-color: var(--color-surface);
   block-size: var(--size-full);
   border-inline-width: var(--sheet-border);
   box-shadow: var(--shadow-lg);
@@ -14,9 +14,9 @@
 
   /* Setup transition */
   transition-behavior: allow-discrete;
-  transition-duration: var(--time-300);
+  transition-duration: var(--time-200);
   transition-property: display, overlay, opacity, transform;
-  transition-timing-function: var(--ease-spring-2);
+  transition-timing-function: var(--ease-out-3);
 
   &::backdrop {
     transition-behavior: allow-discrete;
@@ -61,8 +61,7 @@
 }
 
 .sheet__content {
-  block-size: var(--size-full);
-  padding: var(--size-6);
+  block-size: inherit; padding: var(--size-4);
 }
 
 .sheet__close {

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

@@ -33,9 +33,9 @@
       mask-image: url("chevron-right.svg");
       mask-size: cover;
       min-inline-size: var(--size-4);
-      transition-duration: var(--time-300);
+      transition-duration: var(--time-200);
       transition-property: transform;
-      transition-timing-function: var(--ease-spring-2);
+      transition-timing-function: var(--ease-out-3);
     }
 
     details[open] > &::after {

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

@@ -31,9 +31,9 @@
     border-radius: var(--rounded-full);
     content: "";
     display: block;
-    transition-duration: var(--time-300);
+    transition-duration: var(--time-150);
     transition-property: translate;
-    transition-timing-function: var(--ease-spring-2);
+    transition-timing-function: var(--ease-out-3);
   }
 
   &:focus-visible {

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

@@ -23,9 +23,9 @@
     inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
     position: absolute;
     position-anchor: --tabs-selected;
-    transition-duration: var(--time-300);
+    transition-duration: var(--time-150);
     transition-property: inset;
-    transition-timing-function: var(--ease-spring-2);
+    transition-timing-function: var(--ease-in-out-3);
   }
 }
 

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { play } from "https://esm.sh/cuelume@0.1.2?standalone"
+import { play } from "https://esm.sh/cuelume@0.2.2?standalone"
 
 export default class extends Controller {
   static values = { connect: String, disconnect: String }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 4.0.0
+  version: 4.0.2
 platform: ruby
 authors:
 - Lázaro Nixon