phlex_kit 0.13.0 → 0.14.0

data/app/components/phlex_kit/resizable/resizable_controller.js

@@ -57,6 +57,9 @@ export default class extends Controller {
     try { handle.setPointerCapture(e.pointerId) } catch {}
 
     const onMove = (ev) => {
+      // Only the initiating pointer drives the drag — a second touch point
+      // over the handle must not hijack it.
+      if (ev.pointerId !== e.pointerId) return
       // LTR assumption: clientX grows toward the trailing panel; RTL drag
       // inversion is a documented limitation.
       const delta = (horizontal ? ev.clientX : ev.clientY) - drag.startPos
@@ -65,9 +68,12 @@ export default class extends Controller {
       const prevGrow = this.clampPrevGrow(prev, next, (prevSize / total) * drag.pairGrow, drag.pairGrow, drag.groupGrow)
       prev.style.flexGrow = prevGrow
       next.style.flexGrow = drag.pairGrow - prevGrow
-      this.syncValuenow(handle)
+      // Resizing this pair moves every share: 3+ panel groups have sibling
+      // handles whose aria-valuenow would otherwise go stale.
+      this.handleTargets.forEach((h) => this.syncValuenow(h))
     }
-    const onUp = () => {
+    const onUp = (ev) => {
+      if (ev.pointerId !== e.pointerId) return
       handle.removeEventListener("pointermove", onMove)
       handle.removeEventListener("pointerup", onUp)
       handle.removeEventListener("pointercancel", onUp)
@@ -89,8 +95,14 @@ export default class extends Controller {
     if (!prev || !next) return
 
     const horizontal = this.directionValue === "horizontal"
+    // Horizontal arrows follow visual direction (round-7 kit convention, same
+    // as tabs/toggle_group): in RTL the DOM-first panel is on the RIGHT, so
+    // ArrowLeft must GROW it (move the divider visually left). Only the
+    // pointer-drag clientX math keeps its documented LTR exemption; Up/Down
+    // never flip. Runtime dir check — reliable after a dynamic flip.
+    const rtl = horizontal && getComputedStyle(this.element).direction === "rtl"
     const steps = horizontal
-      ? { ArrowLeft: -0.05, ArrowRight: 0.05 }
+      ? (rtl ? { ArrowLeft: 0.05, ArrowRight: -0.05 } : { ArrowLeft: -0.05, ArrowRight: 0.05 })
       : { ArrowUp: -0.05, ArrowDown: 0.05 }
 
     const pairGrow = this.growOf(prev) + this.growOf(next) || 2
@@ -109,7 +121,8 @@ export default class extends Controller {
     const prevGrow = this.clampPrevGrow(prev, next, share * pairGrow, pairGrow, this.groupGrow())
     prev.style.flexGrow = prevGrow
     next.style.flexGrow = pairGrow - prevGrow
-    this.syncValuenow(handle)
+    // All handles: sibling dividers share panels in 3+ panel groups.
+    this.handleTargets.forEach((h) => this.syncValuenow(h))
   }
 
   growOf(el) {

data/app/components/phlex_kit/resizable/resizable_handle.rb

@@ -8,18 +8,20 @@ module PhlexKit
     end
 
     def view_template
-      div(**mix({
+      base = {
         class: "pk-resizable-handle",
-        role: "separator",
-        tabindex: "0",
-        # Correct for the default horizontal group; the controller re-stamps
-        # orientation (and aria-valuenow/min/max) per group direction on connect.
-        aria: { orientation: "vertical" },
         data: {
           phlex_kit__resizable_target: "handle",
           action: "pointerdown->phlex-kit--resizable#start keydown->phlex-kit--resizable#keydown"
         }
-      }, @attrs)) do
+      }
+      # Defaults only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "separator" unless attr_set?(:role)
+      base[:tabindex] = "0" unless attr_set?(:tabindex)
+      # Correct for the default horizontal group; the controller re-stamps
+      # orientation (and aria-valuenow/min/max) per group direction on connect.
+      base[:aria] = { orientation: "vertical" } unless aria_key_set?(:orientation)
+      div(**mix(base, @attrs)) do
         span(class: "pk-resizable-handle-grip", aria: { hidden: "true" }) if @with_handle
       end
     end

data/app/components/phlex_kit/select/select.rb

@@ -39,7 +39,7 @@ module PhlexKit
           # keydown.esc rides on the root (not only the items) so Escape closes
           # the [popover=manual] panel with focus on the trigger too; handleEsc
           # no-ops while closed.
-          action: "click@window->phlex-kit--select#clickOutside keydown.esc->phlex-kit--select#handleEsc"
+          action: "click@window->phlex-kit--select#clickOutside keydown.esc->phlex-kit--select#handleEsc focusout->phlex-kit--select#onFocusout"
         }
       }, @attrs), &block)
     end

data/app/components/phlex_kit/select/select_content.rb

@@ -14,17 +14,19 @@ module PhlexKit
     end
 
     def view_template(&block)
-      div(**mix({
+      base = {
         id: @id,
-        role: "listbox",
-        tabindex: "-1",
         class: "pk-select-content",
-        popover: "manual",
         data: {
           phlex_kit__select_target: "content",
           action: "keydown->phlex-kit--select#typeahead"
         }
-      }, @attrs)) do
+      }
+      # Defaults only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "listbox" unless attr_set?(:role)
+      base[:tabindex] = "-1" unless attr_set?(:tabindex)
+      base[:popover] = "manual" unless attr_set?(:popover)
+      div(**mix(base, @attrs)) do
         div(class: "pk-select-viewport", &block)
       end
     end

data/app/components/phlex_kit/select/select_controller.js

@@ -170,6 +170,16 @@ export default class extends Controller {
     this.#hide();
   }
 
+  // APG (select-only combobox): Tab out of an open listbox closes it —
+  // dropdown_menu's onFocusout pattern. relatedTarget is null when the
+  // window itself blurs; leave the panel alone then.
+  onFocusout(event) {
+    if (!this.contentTarget.matches(":popover-open")) return;
+    const to = event.relatedTarget;
+    if (!to || this.element.contains(to)) return;
+    this.#hide();
+  }
+
   // Open/close derive from the live :popover-open state, never a stored
   // flag — a stale flag is how a close on an already-closed panel becomes
   // an open (bit the popover's keyboard toggle).

data/app/components/phlex_kit/select/select_separator.rb

@@ -4,7 +4,7 @@ module PhlexKit
   class SelectSeparator < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template
-      div(**mix({ class: "pk-select-separator", role: "separator", aria: { hidden: true } }, @attrs))
+      div(**mix({ class: "pk-select-separator", role: "separator", aria: { hidden: "true" } }, @attrs))
     end
   end
 end

data/app/components/phlex_kit/sheet/sheet_content_controller.js

@@ -63,12 +63,19 @@ export default class extends Controller {
   }
 
   keydown(event) {
-    // A native <dialog> nested inside this panel (e.g. a Dialog opened from
-    // within SheetContent) owns its own Escape handling; the keydown still
-    // bubbles through this element-scoped listener since dialog is a DOM
-    // descendant — ignore it so one Escape doesn't also close the sheet
-    // underneath.
+    // Yield to any inner overlay that owns this Escape so one keypress doesn't
+    // also close the sheet/drawer underneath: a native <dialog> (its own
+    // Escape handling), or an open [popover] menu — Select / DropdownMenu /
+    // Combobox, all popover=manual — rendered inside the panel. Two signals
+    // make the outcome independent of ordering: event.defaultPrevented catches
+    // an inner handler that already consumed the key (Select's Escape is
+    // element-scoped and fires deeper in the bubble, so it runs first); the
+    // live :popover-open check catches a menu whose Escape handler is
+    // document-level (DropdownMenu) and thus still open when this
+    // element-scoped listener runs.
+    if (event.key === "Escape" && event.defaultPrevented) return
     if (event.key === "Escape" && event.target.closest("dialog[open]")) return
+    if (event.key === "Escape" && this.panel.querySelector("[popover]:popover-open")) return
     if (event.key === "Escape") {
       event.preventDefault()
       // Stop the keydown from reaching a lower/outer overlay's own

data/app/components/phlex_kit/sidebar/sidebar_group_action.rb

@@ -8,7 +8,7 @@ module PhlexKit
     end
 
     def view_template(&block)
-      button(**mix({ class: "pk-sidebar-group-action", type: "button" }, @attrs), &block)
+      button(**mix({ class: "pk-sidebar-group-action", type: :button }, @attrs), &block)
     end
   end
 end

data/app/components/phlex_kit/sidebar/sidebar_menu_action.rb

@@ -7,7 +7,7 @@ module PhlexKit
     end
 
     def view_template(&block)
-      button(**mix({ class: "pk-sidebar-menu-action", type: "button" }, @attrs), &block)
+      button(**mix({ class: "pk-sidebar-menu-action", type: :button }, @attrs), &block)
     end
   end
 end

data/app/components/phlex_kit/sidebar/sidebar_rail.rb

@@ -17,12 +17,13 @@ module PhlexKit
       base = {
         type: :button,
         class: "pk-sidebar-rail",
-        aria_label: "Toggle sidebar",
         "aria-expanded": @expanded ? "true" : "false",
         tabindex: "-1",
-        title: "Toggle sidebar",
         data: { action: "click->phlex-kit--sidebar#toggle" }
       }
+      # Defaults only when the caller didn't supply their own — `mix` fuses.
+      base[:aria_label] = "Toggle sidebar" unless aria_labelled?
+      base[:title] = "Toggle sidebar" unless attr_set?(:title)
       base["aria-controls"] = @controls if @controls
       button(**mix(base, @attrs))
     end

data/app/components/phlex_kit/sidebar/sidebar_trigger.rb

@@ -20,10 +20,11 @@ module PhlexKit
       base = {
         type: :button,
         class: "pk-sidebar-trigger",
-        aria_label: "Toggle sidebar",
         "aria-expanded": @expanded ? "true" : "false",
         data: { action: "click->phlex-kit--sidebar#toggle" }
       }
+      # Default only when the caller didn't supply their own — `mix` fuses.
+      base[:aria_label] = "Toggle sidebar" unless aria_labelled?
       base["aria-controls"] = @controls if @controls
       button(**mix(base, @attrs)) do
         block ? yield : render(Icon.new(:menu, size: nil))

data/app/components/phlex_kit/switch/switch.rb

@@ -30,7 +30,10 @@ module PhlexKit
         end
         # role="switch" belongs on the focusable control: native checkedness then
         # maps to aria-checked for AT, and the label stays a plain label.
-        input(**mix({ class: "pk-switch-input", role: "switch" }, @attrs).merge(type: "checkbox", value: @checked_value))
+        # Default role only when the caller didn't supply their own — `mix` fuses.
+        input_base = { class: "pk-switch-input" }
+        input_base[:role] = "switch" unless attr_set?(:role)
+        input(**mix(input_base, @attrs).merge(type: "checkbox", value: @checked_value))
         span(class: "pk-switch-thumb")
       end
     end

data/app/components/phlex_kit/tabs/tabs_content.rb

@@ -13,7 +13,12 @@ module PhlexKit
       # focusable, per the APG tabs pattern. `active:` (mirroring TabsTrigger's)
       # renders the panel visible pre-JS/no-JS; the controller's sync()
       # reconciles visibility from the active value after connect.
-      div(**mix({ class: @active ? "pk-tabs-content" : "pk-tabs-content pk-hidden", role: "tabpanel", id: @id, aria_labelledby: "pk-tabs-trigger-#{@value}", tabindex: "0", data: { phlex_kit__tabs_target: "content", value: @value } }, @attrs), &)
+      base = { class: @active ? "pk-tabs-content" : "pk-tabs-content pk-hidden", role: "tabpanel", id: @id, data: { phlex_kit__tabs_target: "content", value: @value } }
+      # Generated defaults only when the caller didn't supply their own —
+      # `mix` fuses (custom-id trigger pairing / a non-focusable panel).
+      base[:aria_labelledby] = "pk-tabs-trigger-#{@value}" unless aria_key_set?(:labelledby)
+      base[:tabindex] = "0" unless attr_set?(:tabindex)
+      div(**mix(base, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/tabs/tabs_trigger.rb

@@ -24,13 +24,15 @@ module PhlexKit
       base = {
         class: "pk-tabs-trigger", role: "tab", id: @id,
         aria_selected: @active ? "true" : "false",
-        aria_controls: "pk-tabs-panel-#{@value}",
         tabindex: @active ? "0" : "-1",
         # data-state is the only hook tabs.css styles the active trigger by —
         # it must be server-rendered or the active tab looks inactive pre-JS.
         data: { phlex_kit__tabs_target: "trigger", action: "click->phlex-kit--tabs#show", value: @value,
                 state: @active ? "active" : "inactive" }
       }
+      # Generated idref default only when the caller didn't supply their own
+      # (pairing with a custom-id TabsContent) — `mix` fuses.
+      base[:aria_controls] = "pk-tabs-panel-#{@value}" unless aria_key_set?(:controls)
       if @as == :a
         a(**mix(base, @attrs), &)
       else

data/app/components/phlex_kit/theme_toggle/theme_toggle_controller.js

@@ -25,12 +25,23 @@ export default class extends Controller {
     // echo guard in apply().
     this._rootObserver = new MutationObserver(() => this.syncPressed())
     this._rootObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] })
+    // Cross-tab sync: `storage` fires only in OTHER tabs when localStorage.theme
+    // changes, so another tab's toggle re-applies here. Without this, this tab's
+    // DOM went stale while storedTheme() (read fresh from localStorage) already
+    // returned the new value — the echo guard in apply() then swallowed a
+    // genuine click because resolvedTheme() already matched.
+    this._onStorage = (e) => {
+      if (e.key !== "theme") return
+      this.applyTheme(this.storedTheme() || "system")
+    }
+    window.addEventListener("storage", this._onStorage)
     this.applyTheme(this.storedTheme() || "system")
   }
 
   disconnect() {
     this._media?.removeEventListener("change", this._onMediaChange)
     this._rootObserver?.disconnect()
+    window.removeEventListener("storage", this._onStorage)
   }
 
   syncPressed() {
@@ -41,12 +52,19 @@ export default class extends Controller {
 
   apply(e) {
     const theme = e.detail?.pressed ? "dark" : "light"
-    // connect()'s own pressed-state sync re-enters here via the toggle's
-    // change event (Stimulus value observation is async, so a flag can't
-    // gate it). If the incoming theme already matches the resolved one this
-    // is that echo, not a user toggle — persisting it would silently pin
-    // the visitor's OS preference in localStorage on first visit.
-    if (theme === this.resolvedTheme()) return
+    // Skip when this isn't a genuine user toggle — two echo shapes:
+    // - the incoming theme already matches the RESOLVED one: connect()'s own
+    //   pressed-state sync re-enters here via the toggle's change event
+    //   (Stimulus value observation is async, so a flag can't gate it), and a
+    //   "system" resolution lands here too — persisting either would silently
+    //   pin the visitor's OS preference in localStorage on first visit.
+    // - the root's data-theme ALREADY equals it: host code (or a cross-tab
+    //   storage sync) wrote the theme directly. The contract is that only a
+    //   user toggle persists, and a real user toggle reaches here BEFORE
+    //   applyTheme updates the root, so the root still holds the OLD value —
+    //   a match therefore means "not a user action, don't persist".
+    const rootTheme = document.documentElement.getAttribute("data-theme")
+    if (theme === this.resolvedTheme() || theme === rootTheme) return
     this.storeTheme(theme)
     this.applyTheme(theme)
   }

data/app/components/phlex_kit/toast/toast_controller.js

@@ -16,6 +16,11 @@ export default class extends Controller {
   }
 
   connect() {
+    // Inherit the region's duration when this item didn't set its own: a
+    // block-rendered ToastItem carries no duration-value, so without this the
+    // Stimulus 4000ms default would win and ToastRegion(duration:) would be
+    // dead config for block items (skeleton/flash items already stamp it).
+    this._inheritRegionDuration()
     this._timer = null
     this._unmountTimer = null
     this._startedAt = 0
@@ -35,7 +40,16 @@ export default class extends Controller {
     this._onPointerLeave = () => { if (!this._swipe.active) this._resume("hover") }
     // Keyboard parity with hover: tabbing into the toast (e.g. to reach its
     // action button) must pause auto-dismiss just like pointerenter does.
-    this._onFocusIn = () => this._pause("focus")
+    this._onFocusIn = (e) => {
+      this._pause("focus")
+      // Remember where focus came from the FIRST time it enters from outside
+      // the toaster, so dismissing the last focused toast can hand focus back
+      // instead of dropping it on <body>.
+      const list = this.element.closest(".pk-toast-list") || this.element
+      if (this._focusReturn == null && e.relatedTarget && !list.contains(e.relatedTarget)) {
+        this._focusReturn = e.relatedTarget
+      }
+    }
     this._onFocusOut = (e) => { if (!this.element.contains(e.relatedTarget)) this._resume("focus") }
     this._onKeyDown = this._onKeyDown.bind(this)
     this._onForceDismiss = (e) => { e.stopPropagation(); this._close() }
@@ -103,11 +117,42 @@ export default class extends Controller {
   _close(reason) {
     if (this.element.dataset.state === "closing") return
     this.element.dataset.state = "closing"
+    // If focus is inside this toast, move it BEFORE removal so it doesn't drop
+    // to <body> when the element is gone (Escape, close button, or action).
+    const hadFocus = this.element.contains(document.activeElement)
     this.element.dispatchEvent(new CustomEvent(reason === "auto" ? "phlex-kit:toast:auto-close" : "phlex-kit:toast:dismiss", { bubbles: true, detail: { id: this.element.id } }))
     this._invokeCallback(reason === "auto" ? this.onAutoCloseValue : this.onDismissValue)
+    if (hadFocus) this._restoreFocusOnClose()
     this._unmountTimer = setTimeout(() => this.element.remove(), TIME_BEFORE_UNMOUNT)
   }
 
+  // Keep keyboard focus inside the toaster when a focused toast is dismissed:
+  // hand it to an adjacent remaining toast, else back to wherever focus came
+  // from before it entered the toaster (tracked on first focusin).
+  _restoreFocusOnClose() {
+    const list = this.element.closest(".pk-toast-list")
+    const others = list
+      ? [...list.querySelectorAll("[data-controller~='phlex-kit--toast']")]
+          .filter((t) => t !== this.element && t.dataset.state !== "closing")
+      : []
+    if (others.length) {
+      const children = [...list.children]
+      const myIdx = children.indexOf(this.element)
+      const next = others.find((t) => children.indexOf(t) > myIdx) || others[others.length - 1]
+      next.focus()
+      return
+    }
+    if (this._focusReturn?.isConnected) this._focusReturn.focus()
+  }
+
+  _inheritRegionDuration() {
+    if (this.element.hasAttribute("data-phlex-kit--toast-duration-value")) return
+    const region = this.element.closest("[data-phlex-kit--toaster-duration-value]")
+    if (!region) return
+    const inherited = Number(region.getAttribute("data-phlex-kit--toaster-duration-value"))
+    if (Number.isFinite(inherited)) this.durationValue = inherited
+  }
+
   // on_dismiss:/on_auto_close: name a global function (Sonner-style callback
   // for server-rendered toasts).
   _invokeCallback(name) {

data/app/components/phlex_kit/toast/toaster_controller.js

@@ -80,9 +80,17 @@ export default class extends Controller {
     this._onWindowDismissId = (e) => this._dismissById(e.detail?.id)
     this._onKey = this._onKey.bind(this)
 
+    // The region is data-turbo-permanent (in-flight toasts survive a Turbo
+    // Drive visit), but that means Turbo KEEPS this old region and DISCARDS
+    // the incoming page's — throwing away any server-rendered flash toasts it
+    // holds. Adopt them into this permanent list before the transplant so
+    // flash: works on Turbo Drive visits, not only full page loads.
+    this._onBeforeRender = (e) => this._adoptIncomingToasts(e)
+
     window.addEventListener("phlex-kit:toast", this._onWindowToast)
     window.addEventListener("phlex-kit:toast:dismiss-all", this._onWindowDismissAll)
     window.addEventListener("phlex-kit:toast:dismiss", this._onWindowDismissId)
+    document.addEventListener("turbo:before-render", this._onBeforeRender)
     this._listEl.addEventListener("pointerenter", this._onPointerEnter)
     this._listEl.addEventListener("pointerleave", this._onPointerLeave)
     document.addEventListener("keydown", this._onKey)
@@ -96,6 +104,7 @@ export default class extends Controller {
     window.removeEventListener("phlex-kit:toast", this._onWindowToast)
     window.removeEventListener("phlex-kit:toast:dismiss-all", this._onWindowDismissAll)
     window.removeEventListener("phlex-kit:toast:dismiss", this._onWindowDismissId)
+    document.removeEventListener("turbo:before-render", this._onBeforeRender)
     this._listEl?.removeEventListener("pointerenter", this._onPointerEnter)
     this._listEl?.removeEventListener("pointerleave", this._onPointerLeave)
     document.removeEventListener("keydown", this._onKey)
@@ -170,7 +179,10 @@ export default class extends Controller {
       node.appendChild(btn)
     }
 
-    if (detail.closeButton && this.hasCloseTplTarget) {
+    // Don't append a second close button when the skeleton already baked one
+    // in (region rendered with close_button: true) — spawning with
+    // closeButton: true would otherwise stack two ×'s.
+    if (detail.closeButton && this.hasCloseTplTarget && !node.querySelector('[data-slot="close"]')) {
       const x = this._cloneSlot(this.closeTplTarget)
       node.classList.add("pk-toast-with-close")
       node.appendChild(x)
@@ -180,6 +192,22 @@ export default class extends Controller {
     return node.id
   }
 
+  // Move server-rendered flash toasts from the incoming (about-to-be-discarded)
+  // page's matching region into this permanent list, so a Turbo Drive visit
+  // doesn't silently drop them. Runs on turbo:before-render, before Turbo
+  // transplants this permanent element into the new body (children ride along).
+  _adoptIncomingToasts(e) {
+    const newBody = e.detail?.newBody
+    if (!newBody || !this._listEl?.id) return
+    const incomingList = newBody.querySelector(`#${CSS.escape(this._listEl.id)}`)
+    if (!incomingList) return
+    incomingList.querySelectorAll(":scope > [data-phlex-kit--toaster-target='toast']").forEach((el) => {
+      // Skip a flash id already showing here, so a re-render doesn't dupe it.
+      if (el.id && this._listEl.querySelector(`#${CSS.escape(el.id)}`)) return
+      this._listEl.appendChild(el.cloneNode(true))
+    })
+  }
+
   // True when this region should act on a toast event carrying `region`
   // (the list's base id or the wrapper's "<id>-region" both match). Without
   // an explicit region, only the page's first region in DOM order handles

data/app/components/phlex_kit/toggle/toggle.rb

@@ -39,7 +39,7 @@ module PhlexKit
     end
 
     def button_default_attrs
-      a = { type: "button", class: classes, aria: { pressed: @pressed.to_s },
+      a = { type: :button, class: classes, aria: { pressed: @pressed.to_s },
             data: { state: @pressed ? "on" : "off", phlex_kit__toggle_target: "button" } }
       a[:disabled] = true if @disabled
       a

data/app/components/phlex_kit/toggle_group/toggle_group.rb

@@ -42,9 +42,16 @@ module PhlexKit
     # (`pressed || enabledItems()[0]`). Items call this once each, in render
     # order, as they're constructed — a single-threaded sequential claim, not
     # a lookahead over siblings not yet rendered.
-    def claim_tab_stop(item_disabled)
-      return false unless selected_values.empty?
+    def claim_tab_stop(item_disabled, pressed: false)
+      # A pressed-but-disabled item can't take focus (reconcile() mirrors
+      # this with `pressed && !el.disabled`): unlock the fallback claim so a
+      # LATER enabled item takes the stop instead of the whole group
+      # rendering Tab-unreachable. (If every enabled item precedes the
+      # pressed-disabled one, the pre-JS render still has no stop — the
+      # sequential claim can't look ahead; reconcile() fixes it at connect.)
+      @selection_unfocusable = true if pressed && item_disabled
       return false if item_disabled
+      return false unless selected_values.empty? || @selection_unfocusable
       return false if @tab_stop_claimed
       @tab_stop_claimed = true
       true
@@ -61,10 +68,17 @@ module PhlexKit
 
     def render_hidden_inputs
       return unless @name
+      # Disabled in lockstep with the group — a disabled toggle group must
+      # not submit its value (matches toggle.rb and native form semantics).
+      disabled = @disabled ? true : nil
       if @type == :single
-        input(type: "hidden", name: @name, value: selected_values.first.to_s, data: { phlex_kit__toggle_group_target: "input" })
+        input(type: "hidden", name: @name, value: selected_values.first.to_s, disabled: disabled,
+          data: { phlex_kit__toggle_group_target: "input" })
       else
-        selected_values.each { |v| input(type: "hidden", name: "#{@name}[]", value: v, data: { phlex_kit__toggle_group_target: "input" }) }
+        selected_values.each do |v|
+          input(type: "hidden", name: "#{@name}[]", value: v, disabled: disabled,
+            data: { phlex_kit__toggle_group_target: "input" })
+        end
       end
     end
 

data/app/components/phlex_kit/toggle_group/toggle_group_item.rb

@@ -17,7 +17,7 @@ module PhlexKit
       # group_context[:group] is nil for a hand-built context (bypassing
       # ToggleGroup#item_context) — treat that as "no tab-stop claim" rather
       # than raising, since standalone tests construct contexts by hand.
-      @is_first_tab_stop = group_context[:group]&.claim_tab_stop(item_disabled) || false
+      @is_first_tab_stop = group_context[:group]&.claim_tab_stop(item_disabled, pressed: pressed) || false
       super(pressed: pressed, name: nil, value: @item_value,
             variant: variant || group_context[:variant],
             size: size || group_context[:size],
@@ -31,7 +31,7 @@ module PhlexKit
     private
 
     def item_default_attrs
-      a = { type: "button",
+      a = { type: :button,
             class: ([ "pk-toggle" ] + self.class.modifier_classes(variant: @variant, size: @size) + [ "pk-toggle-group-item" ]).join(" "),
             data: { state: @pressed ? "on" : "off", value: @item_value,
               phlex_kit__toggle_group_target: "item",

data/app/components/phlex_kit/tooltip/tooltip_controller.js

@@ -20,6 +20,11 @@ export default class extends Controller {
       })
     }
 
+    // connect() re-derives reflected state from live truth: a Turbo snapshot
+    // serializes an Escape-dismissed suppression, and a cache restore must
+    // not resurrect it (the pointer/focus that justified it is gone).
+    delete this.element.dataset.pkDismissed
+
     this._onKeydown = (e) => {
       if (e.key !== "Escape") return
       if (this.element.matches(":hover, :focus-within")) this.element.dataset.pkDismissed = ""

data/app/components/phlex_kit/typography/typography.css

@@ -50,6 +50,9 @@
 /* Blockquote */
 .pk-blockquote { margin: 1.5rem 0; border-inline-start: 2px solid var(--pk-border); padding-inline-start: 1.5rem; font-style: italic; }
 
-/* Prose list (shadcn typography's list style). */
-.pk-list { margin: 1.5rem 0; padding-inline-start: 1.5rem; list-style: disc; }
+/* Prose list (shadcn typography's list style). Ordered variant (as: :ol)
+   keeps its numbers — the disc is scoped to unordered lists. */
+.pk-list { margin: 1.5rem 0; padding-inline-start: 1.5rem; }
+ul.pk-list { list-style: disc; }
+ol.pk-list { list-style: decimal; }
 .pk-list > li { margin-top: .5rem; }

data/lib/phlex_kit/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PhlexKit
-  VERSION = "0.13.0"
+  VERSION = "0.14.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex_kit
 version: !ruby/object:Gem::Version
-  version: 0.13.0
+  version: 0.14.0
 platform: ruby
 authors:
 - Matt Kennedy