css-zero 4.2.2 → 4.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 14a22c54b379b8a90a4144a252413a0cc388b140781ffdbe98101f00aa9f4ff3
-  data.tar.gz: 04061c71ca6daef8635b92d8691508c5726e7b6e20f9aba4c8c9f9994d73c20a
+  metadata.gz: 4f9bdbed4f12a30f34164d4ce75833c380b42a75e70a5f999206fbfb0068d7a3
+  data.tar.gz: 2488b61d43b1c9595d5adcd2bb531715b16a2fa2a56c43ab9f3736b400a6e85c
 SHA512:
-  metadata.gz: 538545d4c41977daedaf54485fc5e796b42621484e8017c27cf768ca9ec58f1ab0e52fe2155e5cd24ace58fe957737c344b1d776f975a0ae3d22abb22e8e06f4
-  data.tar.gz: 209ec906573f718d1d621fed9d7099d7938e69079e0cd3ee6765018b0a06043b1e3b14d53cc9233aba62b9fc6f23e704a491809cd5e0bce9f2681627103a1e75
+  metadata.gz: 5d7371f499c12dda9f40d8c58bfbc30a91f60ed4463d938589134954c167d833505fcdafafa20fab300cc963f312c9419f0c5f60b47ad68a59a0fac151dc59f9
+  data.tar.gz: 56a0fa99d397354945887680cd2de0aa18c9d84122af17f47c694c25828d47ed7d026853119165d93c1e4b6e5b1ac69a3214a0823335701930f0de6fac09cc19

data/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 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/lib/css_zero/version.rb

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

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/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/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.2.3
 platform: ruby
 authors:
 - Lázaro Nixon