phlex_kit 0.12.0 → 0.14.0

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.rb

@@ -18,9 +18,9 @@ module PhlexKit
           # 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[:role] = "dialog" unless attr_set?(:role)
           panel_attrs[:aria] = { modal: "true" } unless aria_key_set?(:modal)
-          panel_attrs[:tabindex] = "-1" unless @attrs.key?(:tabindex) || @attrs.key?("tabindex")
+          panel_attrs[:tabindex] = "-1" unless attr_set?(:tabindex)
           div(**mix(panel_attrs, @attrs)) do
             block&.call
             if @show_close_button

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

@@ -9,7 +9,7 @@ module PhlexKit
       # value: is silently clobbered below (the checkbox's real value comes
       # from checked_value:) — fail loud rather than let a caller's value:
       # vanish (mirrors ToggleGroupItem's unsupported-kwargs guard).
-      if attrs.key?(:value)
+      if attrs.key?(:value) || attrs.key?("value")
         raise ArgumentError, "Switch does not support value: — the checkbox's value comes from checked_value:, pass that instead"
       end
       @include_hidden = include_hidden
@@ -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) {
@@ -208,7 +253,12 @@ export default class extends Controller {
       this.element.dataset.swipe = "cancel"
       this.element.style.removeProperty("--pk-toast-swipe-x")
       this.element.style.removeProperty("--pk-toast-swipe-y")
-      this._resume("hover")
+      // pointerleave is suppressed while a swipe is active, so release the
+      // hover hold here — but only if the pointer actually left the toast; a
+      // cancelled swipe ending under the cursor must stay hover-paused (the
+      // eventual pointerleave resumes it, including the touch case where
+      // pointerleave fires right after pointerup).
+      if (!this.element.matches(":hover")) this._resume("hover")
     }
   }
 }

data/app/components/phlex_kit/toast/toast_item.rb

@@ -60,10 +60,10 @@ module PhlexKit
       # Defaults only when the caller didn't supply their own — `mix` would
       # fuse role="status log" / tabindex="0 -1" / aria-atomic="true false"
       # instead of overriding.
-      unless @attrs.key?(:role) || @attrs.key?("role")
+      unless attr_set?(:role)
         attrs[:role] = ALERT_VARIANTS.include?(@variant) ? "alert" : "status"
       end
-      attrs[:tabindex] = "0" unless @attrs.key?(:tabindex) || @attrs.key?("tabindex")
+      attrs[:tabindex] = "0" unless attr_set?(:tabindex)
       unless aria_key_set?(:atomic)
         attrs[:aria] = { atomic: "true" }
       end

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

@@ -63,12 +63,34 @@ export default class extends Controller {
     // _setExpanded's state change left auto-dismiss running under the cursor.
     this._onPointerEnter = () => { this._setPaused(true); this._setExpanded(true) }
     this._onPointerLeave = () => { this._setPaused(false); if (!this.expandValue) this._setExpanded(false) }
-    this._onWindowToast = (e) => this._spawn(e.detail || {})
+    this._onWindowToast = (e) => {
+      const detail = e.detail || {}
+      // Routing: toast(msg, { region: "<id>" }) targets the region whose
+      // wrapper or list carries that id. Without region only the page's
+      // FIRST region spawns — the event is a window broadcast, so every
+      // region hears it and an unguarded spawn would duplicate the toast
+      // once per region.
+      if (!this._handlesRegion(detail.region)) return
+      this._spawn(detail)
+    }
     this._onWindowDismissAll = () => this._dismissById(null)
+    // Dismiss-by-id is a broadcast too: _dismissById only acts on a toast in
+    // its OWN list, so whichever region owns the id handles it — the api
+    // registration (last region wins) no longer has to be the owner.
+    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)
@@ -81,6 +103,8 @@ export default class extends Controller {
   disconnect() {
     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)
@@ -155,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)
@@ -165,6 +192,31 @@ 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
+  // the broadcast — single-region pages are unaffected.
+  _handlesRegion(region) {
+    if (region) return region === this.element.id || region === this._listEl?.id
+    return this.element === document.querySelector("[data-controller~='phlex-kit--toaster']")
+  }
+
   _dismissById(id) {
     if (!id) {
       this.toastTargets.forEach((el) =>
@@ -311,12 +363,14 @@ export default class extends Controller {
     api.info = (m, o) => fire("info", m, o)
     api.loading = (m, o = {}) => fire("loading", m, { ...o, duration: o.duration ?? 0 })
     api.dismiss = (id) => {
-      if (id) this._dismissById(id)
+      // Both broadcasts: whichever region owns the id dismisses it — the
+      // api may be registered by a different region than the owner.
+      if (id) window.dispatchEvent(new CustomEvent("phlex-kit:toast:dismiss", { detail: { id } }))
       else window.dispatchEvent(new CustomEvent("phlex-kit:toast:dismiss-all"))
     }
     api.promise = (p, msgs = {}) => {
       const id = `toast-${this._uuid()}`
-      fire("loading", typeof msgs.loading === "function" ? msgs.loading() : (msgs.loading || "Loading..."), { id, duration: 0 })
+      fire("loading", typeof msgs.loading === "function" ? msgs.loading() : (msgs.loading || "Loading..."), { id, duration: 0, region: msgs.region })
       Promise.resolve(p).then(
         (val) => this._mutate(id, "success", typeof msgs.success === "function" ? msgs.success(val) : msgs.success),
         (err) => this._mutate(id, "error", typeof msgs.error === "function" ? msgs.error(err) : msgs.error)
@@ -330,9 +384,11 @@ export default class extends Controller {
   }
 
   _mutate(id, variant, text) {
-    if (!this._listEl) return
-    const el = this._listEl.querySelector(`#${CSS.escape(id)}`)
-    if (!el) return
+    // Document-scoped: promise()'s loading toast spawns in whichever region
+    // the broadcast routed it to, which need not be the region that
+    // registered the api this closure belongs to.
+    const el = document.getElementById(id)
+    if (!el || !el.closest(".pk-toast-list")) return
     el.dataset.variant = variant
     el.setAttribute("role", variant === "error" ? "alert" : "status")
     this._swapIcon(el, variant)

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/base_component.rb

@@ -31,6 +31,15 @@ module PhlexKit
       end
     end
 
+    # True when the caller supplied their own value for a plain attribute in
+    # @attrs — symbol or string spelling. A component with a generated default
+    # for that attribute must skip it then: `mix` merges duplicate attrs
+    # (role="dialog region") instead of overriding. Aria attributes have their
+    # own check (aria_key_set?) covering the aria: hash spelling too.
+    def attr_set?(key)
+      @attrs.key?(key) || @attrs.key?(key.to_s)
+    end
+
     # True when the caller supplied an accessible name in @attrs — via the
     # aria: hash or flat aria_label/aria-label(ledby) keys. Components with a
     # generated default label must skip it then: `mix` merges duplicate string

data/lib/phlex_kit/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PhlexKit
-  VERSION = "0.12.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.12.0
+  version: 0.14.0
 platform: ruby
 authors:
 - Matt Kennedy