css-zero 4.2.2 → 4.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 14a22c54b379b8a90a4144a252413a0cc388b140781ffdbe98101f00aa9f4ff3
-  data.tar.gz: 04061c71ca6daef8635b92d8691508c5726e7b6e20f9aba4c8c9f9994d73c20a
+  metadata.gz: a53c87ec617153d3c974fb2efdbd0c957cc8cc16d96d3cab89de42bbc3a0b285
+  data.tar.gz: b4e6faacece7a73849e72afc821679bf13db9bd8fdf6765b20fd7454c9568441
 SHA512:
-  metadata.gz: 538545d4c41977daedaf54485fc5e796b42621484e8017c27cf768ca9ec58f1ab0e52fe2155e5cd24ace58fe957737c344b1d776f975a0ae3d22abb22e8e06f4
-  data.tar.gz: 209ec906573f718d1d621fed9d7099d7938e69079e0cd3ee6765018b0a06043b1e3b14d53cc9233aba62b9fc6f23e704a491809cd5e0bce9f2681627103a1e75
+  metadata.gz: ef07f360edf5fd8ea89cb3c576ab46bb181eae6b12bfda9b299a414e6676b47ac9f253f82000e1e029cea5b038fb7f6f2962157e601272a2b96edefe1faa728d
+  data.tar.gz: 1ba0cee5571959c133711ecf2988ddb502684c4b5bb98e7b296c5a23b2a0ca928b0f07ee2ad7285df90e2ef1df1b11645b683bdde9ee051782c5a3a147a587b5

data/CHANGELOG.md

@@ -1,3 +1,26 @@
+## 4.3.0 - 2026-09-20
+- Rename .overflow-x-auto and .overflow-y-auto to .overflow-i-auto and .overflow-b-auto
+- Remove scroll snap from overflow utilities
+- Use logical overflow properties in command and sidebar
+- Refactor command
+- Remove Safari exit animation guard from dialog, popover and sheet
+- Remove obsolete ::-webkit-details-marker rule from sidebar menu
+- Replace deprecated clip with clip-path in combobox and toggle
+- Remove redundant padding fallback from card
+- Remove redundant default declarations from avatar, group and switch
+- Update activestorage to 8.1.301
+- Update combobox-nav to 3.0.2
+- Update dropzone to 7.4.4
+- Update input-otp-zero to 0.0.4
+- Update lexxy to 0.9.32
+- Update maska to 3.2.1
+- Update tom-select to 2.6.2
+
+## 4.2.3 - 2026-09-07
+- Prevent month header from wrapping in datepicker
+- Refactor autosave
+- Rebuild menu on top of roving-ux
+
 ## 4.2.2 - 2026-08-29
 - Use position-try shorthand in popover
 - Adjust dialog transition durations

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

@@ -151,8 +151,8 @@
 .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; }
+.overflow-i-auto { overflow-inline: auto; }
+.overflow-b-auto { overflow-block: auto; }
 .overflow-hidden { overflow: hidden; }
 
 .object-contain { object-fit: contain; }

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "4.2.2"
+  VERSION = "4.3.0"
 end

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

@@ -22,7 +22,6 @@
   }
 
   img {
-    aspect-ratio: var(--aspect-square);
     block-size: var(--size-full);
     border-radius: var(--avatar-radius);
     inline-size: var(--size-full);

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

@@ -4,7 +4,7 @@
   border-radius: var(--rounded-xl);
   border-width: var(--border);
   box-shadow: var(--shadow-sm);
-  padding: var(--card-padding, var(--size-4));
+  padding: var(--card-padding);
 }
 
 .card__footer {

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

@@ -1,4 +1,4 @@
-@import url("https://esm.sh/tom-select@2.6.1/dist/css/tom-select.min.css");
+@import url("https://esm.sh/tom-select@2.6.2/dist/css/tom-select.min.css");
 
 .ts-control {
   align-items: center;
@@ -135,5 +135,5 @@
 }
 
 [data-controller~="combobox"] {
-  clip: rect(0 0 0 0); position: absolute;
+  clip-path: inset(50%); position: absolute;
 }

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

@@ -16,7 +16,7 @@
 
 .command__list {
   max-block-size: 300px;
-  overflow-y: auto;
+  overflow-block: auto;
 
   &:not(:has(.command__item:not([hidden]))) {
     display: none;

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

@@ -40,6 +40,11 @@
       color: var(--color-text);
     }
 
+    .flatpickr-current-month {
+      inline-size: 85%;
+      padding-block-start: 6.48px;
+    }
+
     span.cur-month {
       font-size: var(--text-sm);
       font-weight: var(--font-medium);

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

@@ -38,10 +38,6 @@
     &[open]::backdrop { opacity: 0; }
   }
 
-  @supports (-webkit-hyphens: none) {
-    transition-behavior: normal;
-  }
-
   @media (width >= 40rem) {
     max-inline-size: var(--dialog-size, var(--max-i-sm));
   }

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

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

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

@@ -1,5 +1,4 @@
 .group {
-  align-items: stretch;
   display: flex;
   flex-direction: row;
   inline-size: fit-content;
@@ -22,7 +21,6 @@
 }
 
 .group-vertical {
-  align-items: stretch;
   display: flex;
   flex-direction: column;
   inline-size: fit-content;

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

@@ -1,4 +1,4 @@
-@import url("https://esm.sh/input-otp-zero@0.0.3/dist/input-otp-zero.css");
+@import url("https://esm.sh/input-otp-zero@0.0.4/dist/input-otp-zero.css");
 
 input-otp {
   --input-otp-gap: var(--size-2);

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

@@ -57,7 +57,7 @@
   display: flex;
   flex-direction: column;
   grid-area: sidebar;
-  overflow-x: hidden;
+  overflow-inline: hidden;
   padding: var(--sidebar-padding, 0);
   row-gap: var(--size-2);
   view-transition-name: sidebar;

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

@@ -1,4 +1,4 @@
-@import url("https://esm.sh/@37signals/lexxy@0.9.24/dist/stylesheets/lexxy.css");
+@import url("https://esm.sh/@37signals/lexxy@0.9.32/dist/stylesheets/lexxy.css");
 
 :root {
   --lexxy-color-ink: var(--color-text);

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

@@ -31,10 +31,6 @@
       opacity: 0; transform: var(--scale-95);
     }
   }
-
-  @supports (-webkit-hyphens: none) {
-    transition-behavior: normal;
-  }
 }
 
 .popover--unanchored {

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

@@ -39,10 +39,6 @@
     &[open]::backdrop { opacity: 0; }
   }
 
-  @supports (-webkit-hyphens: none) {
-    transition-behavior: normal;
-  }
-
   @media (width >= 40rem) {
     max-inline-size: var(--sheet-size, var(--max-i-sm));
   }

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

@@ -41,10 +41,6 @@
     details[open] > &::after {
       transform: var(--rotate-90);
     }
-
-    &::-webkit-details-marker {
-      display: none;
-    }
   }
 }
 

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

@@ -30,7 +30,6 @@
     block-size: var(--switch-size);
     border-radius: var(--rounded-full);
     content: "";
-    display: block;
     transition-duration: var(--time-150);
     transition-property: translate;
     transition-timing-function: var(--ease-out-3);

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

@@ -3,7 +3,7 @@
 }
 
 .btn--toggle [type="checkbox"] {
-  position: absolute; clip: rect(0, 0, 0, 0);
+  position: absolute; clip-path: inset(50%);
 }
 
 .btn--toggle:has(:checked) {

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

@@ -16,15 +16,9 @@ export default class extends Controller {
     !this.#dirty && this.#scheduleSave()
   }
 
-  async #save() {
+  #save() {
     this.#resetTimer()
-    this.#toggleSaving(true)
-    await this.#submitForm(this.element)
-    this.#toggleSaving(false)
-  }
-
-  async #submitForm(form) {
-    return await new FetchRequest(form.method, form.action, { body: new FormData(form) }).perform()
+    this.#submit()
   }
 
   #scheduleSave() {
@@ -36,11 +30,33 @@ export default class extends Controller {
     this.#timer = null
   }
 
+  async #submit() {
+    this.#toggleSaving(true)
+    await this.#performRequest()
+    this.#toggleSaving(false)
+  }
+
   #toggleSaving(saving) {
     this.element.ariaBusy = saving
     this.submitTarget.disabled = saving
   }
 
+  #performRequest() {
+    return new FetchRequest(this.#method, this.#action, { body: this.#body }).perform()
+  }
+
+  get #method() {
+    return this.element.method
+  }
+
+  get #action() {
+    return this.element.action
+  }
+
+  get #body() {
+    return new FormData(this.element)
+  }
+
   get #dirty() {
     return !!this.#timer
   }

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.13?standalone"
-import TomSelect from "https://esm.sh/tom-select@2.6.1/base?standalone"
+import TomSelect from "https://esm.sh/tom-select@2.6.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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import Combobox from "https://esm.sh/@github/combobox-nav@3.0.1?standalone"
+import Combobox from "https://esm.sh/@github/combobox-nav@3.0.2?standalone"
 import debounce from "https://esm.sh/just-debounce-it@3.2.0?standalone"
 
 export default class extends Controller {
@@ -19,7 +19,7 @@ export default class extends Controller {
   }
 
   filter({ target }) {
-    this.itemTargets.forEach(it => this.#matches(it.dataset.value, target.value) ? it.removeAttribute("hidden") : it.toggleAttribute("hidden", true))
+    this.itemTargets.forEach(it => this.#matches(it.dataset.value, target.value) ? this.#show(it) : this.#hide(it))
   }
 
   commit({ target }) {
@@ -29,4 +29,12 @@ export default class extends Controller {
   #matches(text, potentialMatch) {
     return text.toLowerCase().includes(potentialMatch.toLowerCase())
   }
+
+  #show(element) {
+    element.toggleAttribute("hidden", false)
+  }
+
+  #hide(element) {
+    element.toggleAttribute("hidden", true)
+  }
 }

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

@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
-import { DirectUpload } from "https://esm.sh/@rails/activestorage@8.1.300?standalone"
-import Dropzone from "https://esm.sh/@deltablot/dropzone@7.4.3?standalone"
+import { DirectUpload } from "https://esm.sh/@rails/activestorage@8.1.301?standalone"
+import Dropzone from "https://esm.sh/@deltablot/dropzone@7.4.4?standalone"
 
 export default class extends Controller {
   static values = {

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.2.0?standalone"
+import { MaskInput } from "https://esm.sh/maska@3.2.1?standalone"
 
 export default class extends Controller {
   connect() {

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

@@ -1,8 +1,8 @@
 import { Controller } from "@hotwired/stimulus"
+import { rovingIndex } from "https://esm.sh/roving-ux@1.0.5?standalone"
 
 export default class extends Controller {
   static targets = [ "item" ]
-  static values  = { index: Number }
 
   #observer
 
@@ -18,85 +18,20 @@ export default class extends Controller {
     this.#observer.disconnect()
   }
 
-  navigate(event) {
-    switch (event.key) {
-      case " ":
-      case "Enter":
-        this.#cancel(event)
-        this.#activate(event.target)
-        break
-      case "ArrowUp":
-        this.#cancel(event)
-        this.#prev()
-        break
-      case "ArrowDown":
-        this.#cancel(event)
-        this.#next()
-        break
-      case "Home":
-        this.#cancel(event)
-        this.#first()
-        break
-      case "End":
-        this.#cancel(event)
-        this.#last()
-        break
-    }
-  }
-
-  #cancel(event) {
-    event.stopPropagation()
-    event.preventDefault()
-  }
-
-  #activate(menuItem) {
-    menuItem.click()
-  }
-
   #reset([ entry ]) {
-    entry.isIntersecting && this.#first()
-  }
-
-  #prev() {
-    if (this.indexValue > 0) {
-      this.indexValue--
-      this.#update()
-    }
-  }
-
-  #next() {
-    if (this.indexValue < this.#lastIndex) {
-      this.indexValue++
-      this.#update()
-    }
-  }
-
-  #first() {
-    this.indexValue = 0
-    this.#update()
-  }
-
-  #last() {
-    this.indexValue = this.#lastIndex
-    this.#update()
-  }
-
-  #update() {
-    this.#updateTabstops()
-    this.#focusItemAtIndex()
+    entry.isIntersecting && this.#start()
   }
 
-  #updateTabstops() {
-    this.itemTargets.forEach((it, index) => {
-      it.tabIndex = index === this.indexValue ? 0 : -1
-    })
+  #start() {
+    this.#rovingIndex()
+    this.#focus()
   }
 
-  #focusItemAtIndex() {
-    this.itemTargets[this.indexValue].focus()
+  #rovingIndex() {
+    rovingIndex({ element: this.element, target: "[data-menu-target='item']" })
   }
 
-  get #lastIndex() {
-    return this.itemTargets.length -1
+  #focus() {
+    this.itemTargets[0].focus()
   }
 }

metadata

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