phlex_kit 0.11.0 → 0.12.0

data/app/components/phlex_kit/context_menu/context_menu.rb

@@ -5,7 +5,15 @@ module PhlexKit
   class ContextMenu < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      div(**mix({ class: "pk-context-menu", data: { controller: "phlex-kit--context-menu" } }, @attrs), &)
+      div(**mix({
+        class: "pk-context-menu",
+        data: {
+          controller: "phlex-kit--context-menu",
+          # focusout: tabbing (or otherwise moving real focus) out of the
+          # menu closes the open [popover=manual] panel (menubar's pattern).
+          action: "focusout->phlex-kit--context-menu#onFocusout"
+        }
+      }, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/context_menu/context_menu_controller.js

@@ -33,6 +33,17 @@ export default class extends Controller {
     // Outstanding syncSub rAF handles — cancelled on disconnect (menubar's
     // pattern).
     this.subFrames = new Set()
+    // A Turbo snapshot (or a detach/reattach that mimics one) serializes
+    // aria-expanded="true" on sub triggers even though no submenu can be
+    // open at connect time — sweep every stale marker back to false
+    // (menubar's pattern).
+    this.element.querySelectorAll("[aria-expanded='true']").forEach((el) => el.setAttribute("aria-expanded", "false"))
+    // Same shape for checkbox/radio rows: their `checked` DOM property
+    // survives a reconnect but a hand-edited/replayed aria-checked can drift
+    // from it — resync every row from its live input.
+    this.element.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach((i) => {
+      i.closest('[role^="menuitem"]')?.setAttribute("aria-checked", i.checked)
+    })
   }
 
   disconnect() {
@@ -56,6 +67,18 @@ export default class extends Controller {
     this.subFrames.add(id)
   }
 
+  // Tabbing (or otherwise moving real focus) out of the menu closes it —
+  // menubar's onFocusout pattern (menubar_controller.js). relatedTarget is
+  // null when the window itself blurs — leave the menu alone then. The
+  // trigger + content are both DOM children of this.element even though the
+  // content is a top-layer popover, so one containment check covers both.
+  onFocusout(e) {
+    if (!this.contentTarget.matches(":popover-open")) return
+    const to = e.relatedTarget
+    if (!to || this.element.contains(to)) return
+    this.close()
+  }
+
   open(e) {
     e.preventDefault()
     let x = e.clientX
@@ -93,6 +116,13 @@ export default class extends Controller {
   }
 
   keydown(e) {
+    // This listener stays attached document-wide while the menu is open (see
+    // open()/close()) so it keeps receiving events even once real focus has
+    // left the menu — scope the roving-nav keys to when focus is actually
+    // within the widget (this.element, not just contentTarget, so a focused
+    // trigger still counts). Escape stays global while the menu is open (APG).
+    if (e.key !== "Escape" && !this.element.contains(document.activeElement)) return
+
     const items = this.items()
     const index = items.indexOf(document.activeElement)
     switch (e.key) {
@@ -126,19 +156,26 @@ export default class extends Controller {
         }
         break
       case "ArrowRight":
-        // On a sub trigger, enter the submenu (focus reveals it via
-        // :focus-within, making its rows visible to the roving nav).
-        if (document.activeElement?.matches(".pk-context-menu-sub-trigger")) {
-          e.preventDefault()
-          this.enterSub(document.activeElement)
-        }
-        break
       case "ArrowLeft": {
-        // Inside a submenu, step back to its trigger (closes it on focus-out).
-        const sub = document.activeElement?.closest(".pk-context-menu-sub-content")
-        if (sub) {
-          e.preventDefault()
-          sub.closest(".pk-context-menu-sub")?.querySelector(".pk-context-menu-sub-trigger")?.focus()
+        // Submenus open inline-end — visually LEFT in RTL — so the enter key
+        // follows visual direction: ArrowLeft enters / ArrowRight exits in RTL
+        // (and the reverse in LTR). Runtime dir check is reliable after a flip.
+        const rtl = getComputedStyle(this.element).direction === "rtl"
+        const enterKey = rtl ? "ArrowLeft" : "ArrowRight"
+        if (e.key === enterKey) {
+          // On a sub trigger, enter the submenu (focus reveals it via
+          // :focus-within, making its rows visible to the roving nav).
+          if (document.activeElement?.matches(".pk-context-menu-sub-trigger")) {
+            e.preventDefault()
+            this.enterSub(document.activeElement)
+          }
+        } else {
+          // Inside a submenu, step back to its trigger (closes it on focus-out).
+          const sub = document.activeElement?.closest(".pk-context-menu-sub-content")
+          if (sub) {
+            e.preventDefault()
+            sub.closest(".pk-context-menu-sub")?.querySelector(".pk-context-menu-sub-trigger")?.focus()
+          }
         }
         break
       }

data/app/components/phlex_kit/data_table/data_table.css

@@ -92,7 +92,7 @@
 .pk-data-table-page-disabled {
   display: inline-flex;
   align-items: center;
-  height: 2.25rem;
+  height: 2rem;
   padding: 0 .75rem;
   font-size: .875rem;
   opacity: .5;

data/app/components/phlex_kit/data_table/data_table_pagination.rb

@@ -70,7 +70,10 @@ module PhlexKit
     def edge_item(disabled:, href:, label:, name:)
       if disabled
         li do
-          span(class: "pk-data-table-page-disabled", aria: { disabled: "true", label: name }) { label }
+          # role-less span + aria-label is invalid ARIA (aria-label on a
+          # role-less element is not perceivable) — role + aria-disabled
+          # mirrors BreadcrumbPage's disabled-control pattern.
+          span(class: "pk-data-table-page-disabled", role: "link", aria: { disabled: "true", label: name }) { label }
         end
       else
         render PaginationItem.new(href: href, aria: { label: name }) { label }

data/app/components/phlex_kit/data_table/data_table_per_page_select.rb

@@ -4,21 +4,26 @@ module PhlexKit
   # (search/sort/direction/...) survive via `preserved_params:` hidden inputs,
   # mirroring DataTableSearch. See data_table.rb.
   class DataTablePerPageSelect < BaseComponent
-    def initialize(path:, name: "per_page", value: nil, frame_id: nil, options: [ 5, 10, 25, 50 ], preserved_params: {}, **attrs)
+    # method:/action: are kit-owned (a GET form targeting `path:`) — named
+    # kwargs so a caller override lands in @method/@action directly instead
+    # of fusing with the generated defaults via `mix` ("get post").
+    def initialize(path:, name: "per_page", value: nil, frame_id: nil, options: [ 5, 10, 25, 50 ], preserved_params: {}, method: "get", action: nil, **attrs)
       @path = path
       @name = name
       @value = value
       @frame_id = frame_id
       @options = options
       @preserved_params = preserved_params
+      @method = method
+      @action = action || @path
       @attrs = attrs
     end
 
     def view_template
       form_attrs = {
         class: "pk-data-table-per-page",
-        action: @path,
-        method: "get",
+        action: @action,
+        method: @method,
         # Reuse the search controller for its CSP-safe #submitNow action.
         data: { controller: "phlex-kit--data-table-search" }
       }

data/app/components/phlex_kit/data_table/data_table_search.rb

@@ -3,7 +3,10 @@ module PhlexKit
   # params survive via `preserved_params:` hidden inputs; focus/caret survive the
   # frame swap (see the search controller). See data_table.rb.
   class DataTableSearch < BaseComponent
-    def initialize(path:, name: "search", value: nil, frame_id: nil, placeholder: "Search...", debounce: 300, preserved_params: {}, **attrs)
+    # method:/action: are kit-owned (a GET form targeting `path:`) — named
+    # kwargs so a caller override lands in @method/@action directly instead
+    # of fusing with the generated defaults via `mix` ("get post").
+    def initialize(path:, name: "search", value: nil, frame_id: nil, placeholder: "Search...", debounce: 300, preserved_params: {}, method: "get", action: nil, **attrs)
       @path = path
       @name = name
       @value = value
@@ -11,11 +14,13 @@ module PhlexKit
       @placeholder = placeholder
       @debounce = debounce
       @preserved_params = preserved_params
+      @method = method
+      @action = action || @path
       @attrs = attrs
     end
 
     def view_template
-      form(**mix({ class: "pk-data-table-search", method: "get", action: @path, data: form_data }, @attrs)) do
+      form(**mix({ class: "pk-data-table-search", method: @method, action: @action, data: form_data }, @attrs)) do
         render Input.new(
           type: :search,
           name: @name,

data/app/components/phlex_kit/date_picker/date_picker.rb

@@ -5,7 +5,12 @@ module PhlexKit
   # controller and the calendar's outlet points at its id, so picking a day
   # writes the formatted date into the field. Upstream's popover_options
   # (hover trigger via @floating-ui) are gone — the kit popover is click-only,
-  # CSS-positioned. Tailwind → vanilla `.pk-date-picker*` (date_picker.css).
+  # CSS-positioned. The phlex-kit--date-picker controller on the root div
+  # listens for the calendar's change event and closes the popover once a
+  # selection is COMPLETE (single: any pick; range: the second end only;
+  # multiple: never), returning focus to the input — see
+  # date_picker_controller.js and popover_controller.js#close.
+  # Tailwind → vanilla `.pk-date-picker*` (date_picker.css).
   class DatePicker < BaseComponent
     def initialize(
       id: nil,
@@ -45,7 +50,13 @@ module PhlexKit
     end
 
     def view_template
-      div(**mix({ class: "pk-date-picker" }, @attrs)) do
+      div(**mix({
+        class: "pk-date-picker",
+        data: {
+          controller: "phlex-kit--date-picker",
+          action: "phlex-kit--calendar:change->phlex-kit--date-picker#onCalendarChange"
+        }
+      }, @attrs)) do
         render Popover.new do
           render PopoverTrigger.new(**trigger_attrs) do
             div(class: "pk-date-picker-field") do

data/app/components/phlex_kit/date_picker/date_picker_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Bridges the nested Calendar's change event to the wrapping Popover's
+// close(), so picking a date collapses the panel instead of leaving the
+// user to click outside/Escape after every pick (shadcn's DatePicker
+// behavior). Only closes on a COMPLETE selection: single mode closes on
+// any pick, range mode only once the second end (rangeEnd) is set — closing
+// on the first end would strand the user before they can pick the second —
+// and multiple mode never auto-closes since picking more than one date is
+// the entire point. See date_picker.rb for the data-action wiring and
+// popover_controller.js for close()/focusTrigger().
+export default class extends Controller {
+  onCalendarChange(e) {
+    const { mode, rangeEnd } = e.detail
+    if (mode === "multiple") return
+    // calendar_controller.js clears rangeEnd via `this.rangeEndValue = null`,
+    // which goes through Element#setAttribute — the DOM stringifies a null
+    // argument to the literal "null", so a genuinely-unset rangeEnd reads
+    // back as that string, not JS null/undefined/"".
+    if (mode === "range" && (!rangeEnd || rangeEnd === "null")) return
+    this.popoverController()?.close()
+  }
+
+  popoverController() {
+    const popoverEl = this.element.querySelector(".pk-popover")
+    return popoverEl && this.application.getControllerForElementAndIdentifier(popoverEl, "phlex-kit--popover")
+  }
+}

data/app/components/phlex_kit/dialog/dialog_controller.js

@@ -37,6 +37,9 @@ export default class extends Controller {
   }
   open(e) {
     e?.preventDefault()
+    // open: is one-shot — the reflected value sits in the Turbo snapshot, so
+    // a cache-restored reconnect would re-open a dismissed dialog.
+    this.openValue = false
     this.dialogTarget.showModal()
     // Save/restore rather than removeProperty: a host page (or another
     // component) may have set body overflow itself.

data/app/components/phlex_kit/drawer/drawer.rb

@@ -12,7 +12,7 @@ module PhlexKit
     end
 
     def view_template(&)
-      div(**mix({ data: { controller: "phlex-kit--sheet", phlex_kit__sheet_open_value: @open } }, @attrs), &)
+      div(**mix({ data: { controller: "phlex-kit--sheet", phlex_kit__sheet_open_value: @open.to_s } }, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/drawer/drawer_content.rb

@@ -12,9 +12,16 @@ module PhlexKit
 
     def view_template(&block)
       template(data: { phlex_kit__sheet_target: "content" }) do
-        div(data: { controller: "phlex-kit--sheet-content", action: "keydown->phlex-kit--sheet-content#keydown" }) do
-          div(class: "pk-drawer-overlay", data: { action: "click->phlex-kit--sheet-content#close" })
-          div(**mix({ class: "pk-drawer #{fetch_option(SIDES, @side, :side)}", role: "dialog", aria: { modal: "true" }, tabindex: "-1", data: { phlex_kit__sheet_content_target: "panel" } }, @attrs)) do
+        div(data: { controller: "phlex-kit--sheet-content", action: "keydown->phlex-kit--sheet-content#keydown", pk_overlay_clone: "" }) do
+          div(class: "pk-drawer-overlay", data: { action: "click->phlex-kit--sheet-content#close mousedown->phlex-kit--sheet-content#overlayMousedown" })
+          panel_attrs = { class: "pk-drawer #{fetch_option(SIDES, @side, :side)}", data: { phlex_kit__sheet_content_target: "panel" } }
+          # Defaults only when the caller didn't supply their own — `mix`
+          # would fuse role="dialog region" / aria-modal="true false" /
+          # tabindex="-1 0" instead of overriding.
+          panel_attrs[:role] = "dialog" unless @attrs.key?(:role) || @attrs.key?("role")
+          panel_attrs[:aria] = { modal: "true" } unless aria_key_set?(:modal)
+          panel_attrs[:tabindex] = "-1" unless @attrs.key?(:tabindex) || @attrs.key?("tabindex")
+          div(**mix(panel_attrs, @attrs)) do
             div(class: "pk-drawer-handle", aria: { hidden: "true" })
             yield if block
           end

data/app/components/phlex_kit/dropdown_menu/dropdown_menu.css

@@ -116,6 +116,10 @@
    the viewport right edge. */
 .pk-dropdown-menu-sub { anchor-name: --pk-dropdown-menu-sub; anchor-scope: --pk-dropdown-menu-sub; }
 .pk-dropdown-menu-sub-chevron { margin-inline-start: auto; width: 1rem; height: 1rem; }
+/* The chevron points toward where the submenu opens (inline-end). In RTL that
+   is visually LEFT — mirror it. Ancestor [dir="rtl"] (not :dir()) so Chrome
+   re-styles it on a dynamic dir flip too. */
+[dir="rtl"] .pk-dropdown-menu-sub-chevron { transform: scaleX(-1); }
 .pk-dropdown-menu-sub-content {
   position: fixed;
   position-anchor: --pk-dropdown-menu-sub;

data/app/components/phlex_kit/dropdown_menu/dropdown_menu.rb

@@ -18,7 +18,9 @@ module PhlexKit
         data: {
           controller: "phlex-kit--dropdown-menu",
           phlex_kit__dropdown_menu_open_value: @open,
-          action: "click@window->phlex-kit--dropdown-menu#onClickOutside"
+          # focusout: tabbing (or otherwise moving real focus) out of the
+          # menu closes the open [popover=manual] panel (menubar's pattern).
+          action: "click@window->phlex-kit--dropdown-menu#onClickOutside focusout->phlex-kit--dropdown-menu#onFocusout"
         }
       }, @attrs), &block)
     end

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_controller.js

@@ -22,6 +22,18 @@ export default class extends Controller {
     // The visible control is the caller's button/link inside the trigger
     // wrapper — that's what AT reads, so the popup wiring belongs on it.
     this.invoker = this.triggerTarget.querySelector("button, a, [tabindex]") || this.triggerTarget;
+    // A Turbo snapshot (or a detach/reattach that mimics one) serializes
+    // aria-expanded="true" on sub triggers even though no submenu can be
+    // open at connect time — sweep every stale marker back to false
+    // (menubar's pattern). Runs before the invoker's own reset below so
+    // both are covered by one mental model.
+    this.element.querySelectorAll("[aria-expanded='true']").forEach((el) => el.setAttribute("aria-expanded", "false"));
+    // Same shape for checkbox/radio rows: their `checked` DOM property
+    // survives a reconnect but a hand-edited/replayed aria-checked can drift
+    // from it — resync every row from its live input.
+    this.element.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach((i) => {
+      i.closest('[role^="menuitem"]')?.setAttribute("aria-checked", i.checked);
+    });
     this.invoker.setAttribute("aria-haspopup", "menu");
     this.invoker.setAttribute("aria-expanded", "false");
     // Associate trigger and menu for AT (the dialog controller wires its
@@ -74,6 +86,18 @@ export default class extends Controller {
     this.contentTarget.matches(":popover-open") ? this.close() : this.#open();
   }
 
+  // Tabbing (or otherwise moving real focus) out of the menu closes it —
+  // menubar's onFocusout pattern (menubar_controller.js). relatedTarget is
+  // null when the window itself blurs — leave the menu alone then. The
+  // trigger + content are both DOM children of this.element even though the
+  // content is a top-layer popover, so one containment check covers both.
+  onFocusout(e) {
+    if (!this.contentTarget.matches(":popover-open")) return;
+    const to = e.relatedTarget;
+    if (!to || this.element.contains(to)) return;
+    this.close();
+  }
+
   #open() {
     this.openValue = true;
     this.#addEventListeners();
@@ -102,6 +126,16 @@ export default class extends Controller {
   }
 
   #handleKeydown(e) {
+    // This listener is document-level (see #addEventListeners) so it keeps
+    // receiving events even once real focus has left the menu (e.g. a click
+    // into an unrelated text field the onFocusout listener didn't catch) —
+    // scope the roving-nav keys to when focus is actually within the widget.
+    // this.element (not just contentTarget) so ArrowDown still works right
+    // after a mouse-driven open, when focus is still on the invoker button
+    // (#open() doesn't force focus into the first row). Escape stays global
+    // while the menu is open (APG).
+    if (e.key !== "Escape" && !this.element.contains(document.activeElement)) return;
+
     const items = this.#items();
     if (items.length === 0) return;
     const index = items.indexOf(document.activeElement);
@@ -138,20 +172,27 @@ export default class extends Controller {
         this.invoker.focus();
         break;
       case "ArrowRight":
-        // On a sub trigger, enter the submenu (focus reveals it via
-        // :focus-within, making its rows visible to the roving nav).
-        // Same keyboard grammar as context_menu.
-        if (document.activeElement?.matches(".pk-dropdown-menu-sub-trigger")) {
-          e.preventDefault();
-          this.#enterSub(document.activeElement);
-        }
-        break;
       case "ArrowLeft": {
-        // Inside a submenu, step back to its trigger (closes it on focus-out).
-        const sub = document.activeElement?.closest(".pk-dropdown-menu-sub-content");
-        if (sub) {
-          e.preventDefault();
-          sub.closest(".pk-dropdown-menu-sub")?.querySelector(".pk-dropdown-menu-sub-trigger")?.focus();
+        // Submenus open inline-end — visually LEFT in RTL — so the enter key
+        // follows visual direction: ArrowLeft enters / ArrowRight exits in RTL
+        // (and the reverse in LTR). Same keyboard grammar as context_menu.
+        // Runtime dir check is reliable after a dynamic flip.
+        const rtl = getComputedStyle(this.element).direction === "rtl";
+        const enterKey = rtl ? "ArrowLeft" : "ArrowRight";
+        if (e.key === enterKey) {
+          // On a sub trigger, enter the submenu (focus reveals it via
+          // :focus-within, making its rows visible to the roving nav).
+          if (document.activeElement?.matches(".pk-dropdown-menu-sub-trigger")) {
+            e.preventDefault();
+            this.#enterSub(document.activeElement);
+          }
+        } else {
+          // Inside a submenu, step back to its trigger (closes it on focus-out).
+          const sub = document.activeElement?.closest(".pk-dropdown-menu-sub-content");
+          if (sub) {
+            e.preventDefault();
+            sub.closest(".pk-dropdown-menu-sub")?.querySelector(".pk-dropdown-menu-sub-trigger")?.focus();
+          }
         }
         break;
       }

data/app/components/phlex_kit/form_field/form_field_controller.js

@@ -59,42 +59,50 @@ export default class extends Controller {
     }
 
     this.shouldValidateValue = true;
-    this.#setErrorMessage(error);
+    this.#setErrorMessage();
   }
 
-  onInput(event) {
-    this.#setErrorMessage(event);
+  onInput(_event) {
+    this.#setErrorMessage();
   }
 
-  onChange(event) {
-    this.#setErrorMessage(event);
+  onChange(_event) {
+    this.#setErrorMessage();
   }
 
-  // The event's own control, when it's one of ours — radio/checkbox groups
-  // register several input targets and validity/aria-invalid must land on
-  // the control that fired, not always the first.
-  #inputFor(event) {
-    if (event && this.inputTargets.includes(event.target)) return event.target;
-    return this.inputTarget;
-  }
-
-  #setErrorMessage(event) {
+  // A FormField can carry several input targets (radio/checkbox groups, or
+  // independent controls like two required checkboxes sharing one error).
+  // Recompute across ALL of them on every validity event — deciding from the
+  // event's own target alone left a shared error stuck on/off based on
+  // whichever control happened to fire last, out of step with the others'
+  // own (correctly-updated) aria-invalid.
+  #setErrorMessage() {
     if (!this.shouldValidateValue || !this.hasErrorTarget) return;
 
-    const input = this.#inputFor(event);
     // aria-invalid drives the red ring for LIVE validation too (input.css
-    // only matched server-rendered attrs); aria-describedby ties the message
-    // to the control for AT.
-    if (input.validity.valid) {
-      input.removeAttribute("aria-invalid");
+    // only matched server-rendered attrs); each control reflects its own
+    // validity regardless of which one fired the event. Radio buttons
+    // sharing a `name` share native validity, so they naturally agree here.
+    let firstInvalid = null;
+    this.inputTargets.forEach((input) => {
+      if (input.validity.valid) {
+        input.removeAttribute("aria-invalid");
+      } else {
+        input.setAttribute("aria-invalid", "true");
+        firstInvalid ||= input;
+      }
+      // Clear the shared error's id everywhere first — it's re-added below,
+      // only on the one control whose message is currently shown.
       this.#describeBy(input, false);
+    });
+
+    if (firstInvalid) {
+      this.#describeBy(firstInvalid, true);
+      this.errorTarget.textContent = this.#getValidationMessage(firstInvalid);
+      this.errorTarget.classList.remove("pk-hidden");
+    } else {
       this.errorTarget.textContent = "";
       this.errorTarget.classList.add("pk-hidden");
-    } else {
-      input.setAttribute("aria-invalid", "true");
-      this.#describeBy(input, true);
-      this.errorTarget.textContent = this.#getValidationMessage(input);
-      this.errorTarget.classList.remove("pk-hidden");
     }
   }
 

data/app/components/phlex_kit/hover_card/hover_card.css

@@ -15,12 +15,18 @@
   position-area: block-end span-inline-end;
   margin: .25rem 0 0;
   position-try-fallbacks: flip-block;
+  flex-direction: column; gap: .125rem;
   width: 16rem;
   border: 1px solid color-mix(in oklab, var(--pk-text) 10%, transparent);
   border-radius: var(--pk-radius); background: var(--pk-surface);
   color: var(--pk-text); padding: .625rem; font-size: .875rem;
   box-shadow: 0 8px 24px color-mix(in srgb, var(--pk-shadow-color) 30%, transparent); outline: none;
 }
+/* display must be gated on :popover-open — an unconditional author
+   `display: flex` would beat the UA's [popover] { display: none } (bit the
+   Basic docs example's inline style, which relied on this instead of the
+   component doing it). */
+.pk-hover-card-content:popover-open { display: flex; }
 .pk-hover-card-content.top { position-area: block-start span-inline-end; margin: 0 0 .25rem; }
 /* Gap margins are logical to match the logical position-area (and tooltip's
    pattern) — physical margins landed on the wrong side in RTL. */

data/app/components/phlex_kit/hover_card/hover_card_controller.js

@@ -10,6 +10,29 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = ["trigger", "content"]
   static values = { openDelay: { type: Number, default: 200 }, closeDelay: { type: Number, default: 200 } }
+
+  connect() {
+    // Turbo snapshots BEFORE disconnect, so a stale data-state="open" would
+    // otherwise resurrect host CSS keyed on the state hook after a cache
+    // restore — close now (popover_controller.js's contentTargetConnected /
+    // context_menu_controller.js's turbo:before-cache pattern combined).
+    this.onBeforeCache = () => {
+      if (this.contentTarget.matches(":popover-open")) {
+        clearTimeout(this.t)
+        this.#close()
+      }
+    }
+    document.addEventListener("turbo:before-cache", this.onBeforeCache)
+  }
+
+  contentTargetConnected(el) {
+    // A reconnect (Turbo cache restore, or the detach/reattach it's tested
+    // with) can hand us markup whose data-state was serialized while open —
+    // :popover-open does not survive the restore, so resync before anything
+    // reads the hook.
+    el.dataset.state = el.matches(":popover-open") ? "open" : "closed"
+  }
+
   show() {
     clearTimeout(this.t)
     this.t = setTimeout(() => {
@@ -25,6 +48,7 @@ export default class extends Controller {
   disconnect() {
     clearTimeout(this.t)
     this.#unbindEscape()
+    document.removeEventListener("turbo:before-cache", this.onBeforeCache)
   }
 
   #close() {

data/app/components/phlex_kit/input/input.css

@@ -38,7 +38,6 @@
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
 .pk-input:disabled {
-  pointer-events: none;
   cursor: not-allowed;
   opacity: .5;
   background: color-mix(in oklab, var(--pk-input) 80%, transparent);

data/app/components/phlex_kit/input_otp/input_otp.rb

@@ -15,15 +15,18 @@ module PhlexKit
     end
 
     def view_template(&block)
-      div(**mix({
+      base = {
         class: "pk-input-otp",
         role: "group",
-        aria: { label: @label },
         data: {
           controller: "phlex-kit--input-otp",
           phlex_kit__input_otp_length_value: @length
         }
-      }, @attrs)) do
+      }
+      # Default label only when the caller didn't supply their own — `mix`
+      # would fuse aria-label into a two-token value instead of overriding.
+      base[:aria] = { label: @label } unless aria_labelled?
+      div(**mix(base, @attrs)) do
         input(type: :hidden, name: @name, value: @value, data: { phlex_kit__input_otp_target: "value" }) if @name
         yield if block
       end

data/app/components/phlex_kit/input_otp/input_otp_controller.js

@@ -30,20 +30,32 @@ export default class extends Controller {
       const chars = this.valueTarget.value.split("")
       this.slotTargets.forEach((slot, i) => { if (chars[i] != null) slot.value = chars[i] })
     }
+    // Track each slot's last-known-good value so a rejected keystroke (see
+    // onInput) can restore it instead of leaving the slot blanked.
+    this.slotTargets.forEach((slot) => { slot.dataset.otpValue = slot.value })
     this.syncValue()
   }
 
   onInput(e) {
     const slot = e.target
+    const isNumeric = slot.getAttribute("inputmode") === "numeric"
+    const priorValue = slot.dataset.otpValue || ""
     let text = slot.value.replace(/\s/g, "")
     // Typing rejects the same characters paste strips — a letter keyed into
     // an inputmode=numeric slot must not land.
-    if (slot.getAttribute("inputmode") === "numeric") text = text.replace(/\D/g, "")
+    if (isNumeric) text = text.replace(/\D/g, "")
 
     if (text.length > 1) {
       if (e.data && e.data.length === 1) {
+        if (isNumeric && !/\d/.test(e.data)) {
+          // Rejected keystroke into an already-filled/selected slot: restore
+          // the prior digit rather than blanking it, and don't advance focus.
+          slot.value = priorValue
+          return
+        }
         // one keystroke into an already-filled slot: keep the newest char
         slot.value = e.data
+        slot.dataset.otpValue = e.data
         this.focusSlot(this.slotTargets.indexOf(slot) + 1)
         this.syncValue()
       } else {
@@ -55,7 +67,16 @@ export default class extends Controller {
       return
     }
 
+    if (!text && e.data) {
+      // A keystroke was fully rejected by numeric filtering (e.g. a letter
+      // typed into a filled/selected slot) — restore the slot's prior value
+      // instead of blanking it, and don't advance focus.
+      slot.value = priorValue
+      return
+    }
+
     slot.value = text
+    slot.dataset.otpValue = text
     if (slot.value) this.focusSlot(this.slotTargets.indexOf(slot) + 1)
     this.syncValue()
   }
@@ -66,6 +87,7 @@ export default class extends Controller {
       e.preventDefault()
       const prev = this.slotTargets[index - 1]
       prev.value = ""
+      prev.dataset.otpValue = ""
       prev.focus()
       this.syncValue()
     } else if (e.key === "ArrowLeft" && index > 0) {
@@ -92,7 +114,7 @@ export default class extends Controller {
   fillFrom(slot, text) {
     const chars = text.split("")
     const start = this.slotTargets.indexOf(slot)
-    this.slotTargets.slice(start).forEach((s, i) => { if (chars[i] != null) s.value = chars[i] })
+    this.slotTargets.slice(start).forEach((s, i) => { if (chars[i] != null) { s.value = chars[i]; s.dataset.otpValue = chars[i] } })
     this.focusSlot(Math.min(start + chars.length, this.slotTargets.length - 1))
     this.syncValue()
   }