css-zero 4.2.1 → 4.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6298296dea48b78868ba56852488b697703c2a1be68a10768aaab252a1321eda
-  data.tar.gz: 1cda78c2d7cd8504679718605a0a9ccfffb6105b3daf1aa03b07b9cc6bc592a1
+  metadata.gz: 4f9bdbed4f12a30f34164d4ce75833c380b42a75e70a5f999206fbfb0068d7a3
+  data.tar.gz: 2488b61d43b1c9595d5adcd2bb531715b16a2fa2a56c43ab9f3736b400a6e85c
 SHA512:
-  metadata.gz: 075e587d07089304437824bd1da927abfde3c5c554c18e780169792e21c15c16812753bfe095b873b52c254e332d8e5278716b792661799d83ef63deaedf4e6b
-  data.tar.gz: 409910412a03924964d6605187e9f8c4cf7c975c04b7b1cc94da30586744e45698747751cb0d053000a21052d7eefbe105c00c0527834316461cc51977b48b75
+  metadata.gz: 5d7371f499c12dda9f40d8c58bfbc30a91f60ed4463d938589134954c167d833505fcdafafa20fab300cc963f312c9419f0c5f60b47ad68a59a0fac151dc59f9
+  data.tar.gz: 56a0fa99d397354945887680cd2de0aa18c9d84122af17f47c694c25828d47ed7d026853119165d93c1e4b6e5b1ac69a3214a0823335701930f0de6fac09cc19

data/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 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
+- Adjust flash animation easing
+- Adjust tabs indicator easing
+- Adjust combobox transition duration
+- Adjust datepicker animation duration
+- Adjust popover transition duration
+- Adjust sheet transition and slide distance
+- Simplify autosave
+
 ## 4.2.1 - 2026-08-26
 - Hide sidebar content when closed
 - Adjust sidebar menu current and focus styles

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "4.2.1"
+  VERSION = "4.2.3"
 end

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

@@ -30,7 +30,7 @@
 
   /* Setup transition */
   transition-behavior: allow-discrete;
-  transition-duration: var(--time-100);
+  transition-duration: var(--time-150);
   transition-property: display, opacity, transform;
   transition-timing-function: var(--ease-out-3);
 

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-100) var(--ease-out-3);
+    animation: datepicker-in var(--time-150) var(--ease-out-3);
   }
 
   .flatpickr-innerContainer {
@@ -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

@@ -13,13 +13,13 @@
 
   /* Setup transition */
   transition-behavior: allow-discrete;
-  transition-duration: var(--time-100);
+  transition-duration: var(--time-200);
   transition-property: display, overlay, opacity, transform;
   transition-timing-function: var(--ease-out-3);
 
   &::backdrop {
     transition-behavior: allow-discrete;
-    transition-duration: var(--time-100);
+    transition-duration: var(--time-150);
     transition-property: display, overlay, opacity;
     transition-timing-function: var(--ease-out-3);
   }
@@ -61,6 +61,6 @@
 
 .dialog__close {
   inset-block-start: var(--size-3);
-  inset-inline-end:  var(--size-3);
+  inset-inline-end: var(--size-3);
   position: absolute;
 }

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

@@ -1,6 +1,6 @@
 .flash {
   animation: flash-in-out 5s both;
-  animation-timing-function: var(--ease-bounce-2);
+  animation-timing-function: var(--ease-out-3);
   background-color: var(--color-surface);
   border-radius: var(--rounded-lg);
   border-width: var(--border);
@@ -31,36 +31,28 @@
 
 @keyframes flash-in-out {
   0% {
-    opacity: 0;
-    transform: translateY(-100%);
+    opacity: 0; transform: translateY(-100%);
   }
 
   8%, 92% {
-    opacity: 1;
-    transform: translateY(0);
-    animation-timing-function: ease-out;
+    opacity: 1; transform: translateY(0);
   }
 
-  100% { 
-    opacity: 0;
-    transform: translateY(-100%);
+  100% {
+    opacity: 0; transform: translateY(-100%);
   }
 }
 
 @keyframes flash-in-out-extended {
   0% {
-    opacity: 0;
-    transform: translateY(-100%);
+    opacity: 0; transform: translateY(-100%);
   }
 
   3.3%, 96.7% {
-    opacity: 1;
-    transform: translateY(0);
-    animation-timing-function: ease-out;
+    opacity: 1; transform: translateY(0);
   }
 
   100% {
-    opacity: 0;
-    transform: translateY(-100%);
+    opacity: 0; transform: translateY(-100%);
   }
 }

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

@@ -13,8 +13,8 @@
 
   &:is([type="checkbox"], [type="radio"]) {
     accent-color: var(--input-accent-color, var(--color-primary));
-    block-size:   var(--input-check-size, var(--size-4));
-    inline-size:  var(--input-check-size, var(--size-4));
+    block-size: var(--input-check-size, var(--size-4));
+    inline-size: var(--input-check-size, var(--size-4));
   }
 
   &:is([type="range"]) {

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

@@ -32,6 +32,6 @@
 
 .lightbox__image {
   grid-area: 1/1;
-  max-block-size:  calc(100dvh - (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/popover.css

@@ -8,12 +8,12 @@
 
   /* Anchor position */
   position-area: var(--popover-position, block-end);
-  position-try-fallbacks: var(--popover-position-try-fallbacks, flip-block);
+  position-try: var(--popover-position-try, flip-block);
   margin-block: var(--popover-margin-block, .25rem 0);
 
   /* Setup transition */
   transition-behavior: allow-discrete;
-  transition-duration: var(--time-100);
+  transition-duration: var(--time-150);
   transition-property: display, opacity, overlay, transform;
   transition-timing-function: var(--ease-out-3);
 
@@ -39,7 +39,7 @@
 
 .popover--unanchored {
   --popover-position: none;
-  --popover-position-try-fallbacks: none;
+  --popover-position-try: none;
   --popover-margin-block: 0;
 }
 
@@ -72,4 +72,3 @@
   --popover-position: block-start span-inline-start;
   --popover-margin-block: 0 .25rem;
 }
-

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

@@ -14,9 +14,9 @@
 
   /* 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-out-3);
+  transition-timing-function: var(--ease-out-4);
 
   &::backdrop {
     transition-behavior: allow-discrete;
@@ -51,13 +51,13 @@
 .sheet--left {
   --sheet-border: 0 1px;
   --sheet-margin-inline: 0 auto;
-  --sheet-transform: translateX(-2.5rem);
+  --sheet-transform: translateX(-100%);
 }
 
 .sheet--right {
   --sheet-border: 1px 0;
   --sheet-margin-inline: auto 0;
-  --sheet-transform: translateX(2.5rem);
+  --sheet-transform: translateX(100%);
 }
 
 .sheet__content {
@@ -66,6 +66,6 @@
 
 .sheet__close {
   inset-block-start: var(--size-3);
-  inset-inline-end:  var(--size-3);
+  inset-inline-end: var(--size-3);
   position: absolute;
 }

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

@@ -25,7 +25,7 @@
     position-anchor: --tabs-selected;
     transition-duration: var(--time-150);
     transition-property: inset;
-    transition-timing-function: var(--ease-in-out-3);
+    transition-timing-function: var(--ease-in-out-4);
   }
 }
 

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

@@ -9,45 +9,52 @@ export default class extends Controller {
   #timer
 
   disconnect() {
-    this.#submit()
+    this.#dirty && this.#save()
   }
 
   change() {
-    !this.#dirty && this.#scheduleSaveAndUpdateAppearance(false)
-  }
-
-  async #submit() {
-    this.#dirty && await this.#save()
+    !this.#dirty && this.#scheduleSave()
   }
 
-  async #save() {
-    this.#updateAppearance(true)
+  #save() {
     this.#resetTimer()
-    await this.#submitForm(this.element)
-    this.#updateAppearance(false)
+    this.#submit()
   }
 
-  async #submitForm(form) {
-    return await new FetchRequest(form.method, form.action, { body: new FormData(form) }).perform()
+  #scheduleSave() {
+    this.#timer = setTimeout(() => this.#save(), AUTOSAVE_INTERVAL)
   }
 
-  #scheduleSaveAndUpdateAppearance(saving) {
-    this.#scheduleSave()
-    this.#updateAppearance(false)
+  #resetTimer() {
+    clearTimeout(this.#timer)
+    this.#timer = null
   }
 
-  #scheduleSave() {
-    this.#timer = setTimeout(() => this.#save(), AUTOSAVE_INTERVAL)
+  async #submit() {
+    this.#toggleSaving(true)
+    await this.#performRequest()
+    this.#toggleSaving(false)
   }
 
-  #updateAppearance(saving) {
+  #toggleSaving(saving) {
     this.element.ariaBusy = saving
     this.submitTarget.disabled = saving
   }
 
-  #resetTimer() {
-    clearTimeout(this.#timer)
-    this.#timer = null
+  #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() {

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.1
+  version: 4.2.3
 platform: ruby
 authors:
 - Lázaro Nixon