phlex_kit 0.5.1 → 0.6.1

data/app/components/phlex_kit/popover/popover_trigger.rb

@@ -2,7 +2,7 @@ module PhlexKit
   class PopoverTrigger < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      div(**mix({ class: "pk-popover-trigger", data: { phlex_kit__popover_target: "trigger", action: "click->phlex-kit--popover#toggle" } }, @attrs), &)
+      div(**mix({ class: "pk-popover-trigger", data: { phlex_kit__popover_target: "trigger", action: "pointerdown->phlex-kit--popover#armToggle click->phlex-kit--popover#toggle" } }, @attrs), &)
     end
   end
 end

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

@@ -3,12 +3,14 @@ module PhlexKit
   # See resizable_panel_group.rb.
   class ResizablePanel < BaseComponent
     def initialize(default_size: nil, **attrs)
-      @default_size = default_size
+      # Numeric coercion: the value is interpolated into a style attribute, and
+      # hosts plausibly round-trip saved panel sizes from client state.
+      @default_size = default_size.nil? ? nil : Float(default_size)
       @attrs = attrs
     end
 
     def view_template(&)
-      style = @default_size ? "flex-grow: #{@default_size}" : nil
+      style = @default_size ? "flex-grow: #{Kernel.format("%g", @default_size)}" : nil
       div(**mix({
         class: "pk-resizable-panel",
         style: style,

data/app/components/phlex_kit/select/select.css

@@ -2,15 +2,18 @@
    is the native one). ruby_ui's structure + Stimulus kept; Tailwind replaced with
    our vanilla CSS on the palette tokens. Geometry from ruby_ui (h-9 trigger,
    rounded-md, p-1 viewport, px-2 py-1.5 items, accent on hover/selected). The
-   panel is positioned with plain CSS (top:100%) since we dropped @floating-ui.
-   Theme tokens come from the global stylesheet. */
-.pk-select { position: relative; width: 100%; }
+   panel is a native [popover=manual] in the top layer, anchor-positioned to
+   the trigger (Baseline 2026, no @floating-ui); position-try-fallbacks flips
+   it above at the viewport bottom. Theme tokens come from the global
+   stylesheet. */
+.pk-select { width: 100%; anchor-scope: --pk-select; }
 
 /* Hidden input that carries the form value. */
 .pk-select-input { display: none; }
 
 /* Closed-state trigger button (mirrors .pk-input geometry). */
 .pk-select-trigger {
+  anchor-name: --pk-select;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -44,20 +47,26 @@
 .pk-select-trigger-icon { flex: none; width: 1rem; height: 1rem; margin-left: .5rem; opacity: .5; }
 .pk-select-value { overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
 
-/* Dropdown panel — opens directly below the trigger (no floating-ui). */
+/* Dropdown panel — anchored directly below the trigger, flips above at the
+   viewport bottom. */
 .pk-select-content {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 50;
+  position: fixed;
+  position-anchor: --pk-select;
+  inset: auto;
+  /* the bordered box is the inner viewport — strip the [popover] UA chrome
+     (border: solid, padding, Canvas background) from this wrapper */
+  border: 0; padding: 0; background: transparent; color: inherit; overflow: visible;
+  position-area: block-end span-inline-end;
+  margin: .25rem 0 0;
+  position-try-fallbacks: flip-block;
   /* Content-hugging with the trigger width as the floor — items never wrap,
      so a narrow trigger (e.g. the currency select in a button group) still
-     gets a readable panel; for form selects min-width keeps panel = trigger. */
+     gets a readable panel; for form selects the anchor-size floor keeps
+     panel = trigger (percentages resolve against the position-area cell,
+     not the trigger, once anchored). */
   width: max-content;
-  min-width: 100%;
-  margin-top: .25rem;
+  min-width: anchor-size(width);
 }
-.pk-select-content.hidden { display: none; }
 .pk-select-viewport {
   max-height: 24rem;
   overflow: auto;
@@ -118,3 +127,6 @@
     box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 20%, transparent);
   }
 }
+/* Hiding must survive author display values (a host class like
+   display:grid would beat the UA [popover] { display: none }). */
+.pk-select-content:not(:popover-open) { display: none; }

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

@@ -1,7 +1,8 @@
 module PhlexKit
-  # The dropdown panel for PhlexKit::Select — hidden until the trigger opens it (the
-  # controller toggles the `hidden` class). Outer div is the positioned/targeted
-  # layer; the inner `.pk-select-viewport` is the bordered, scrollable box.
+  # The dropdown panel for PhlexKit::Select — a native [popover=manual] the
+  # controller toggles, anchor-positioned to the trigger with viewport-edge
+  # flipping (select.css). Outer div is the positioned/targeted layer; the
+  # inner `.pk-select-viewport` is the bordered, scrollable box.
   # Holds SelectGroup / SelectLabel / SelectItem children. See select.rb.
   class SelectContent < BaseComponent
     def initialize(**attrs)
@@ -14,7 +15,8 @@ module PhlexKit
         id: @id,
         role: "listbox",
         tabindex: "-1",
-        class: "pk-select-content hidden",
+        class: "pk-select-content",
+        popover: "manual",
         data: { phlex_kit__select_target: "content" }
       }, @attrs)) do
         div(class: "pk-select-viewport", &block)

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

@@ -1,10 +1,10 @@
 import { Controller } from "@hotwired/stimulus";
 
-// Ported from ruby_ui's phlex-kit--select controller. The ONE change from upstream:
-// the @floating-ui/dom dependency is removed — the panel is positioned with plain
-// CSS (.ui-select-content { position:absolute; top:100% }) instead of
-// computePosition/autoUpdate, so this app needs no npm/build step. Everything else
-// (open/close, item selection, keyboard nav, click-outside) is unchanged.
+// Ported from ruby_ui's phlex-kit--select controller, minus the
+// @floating-ui/dom dependency: the panel is a native [popover=manual] in the
+// top layer, anchor-positioned with viewport-edge flipping by select.css
+// (manual so this controller keeps owning open/close, item selection,
+// keyboard nav, and click-outside — all unchanged from upstream).
 export default class extends Controller {
   static targets = ["trigger", "content", "input", "value", "item"];
   static values = { open: Boolean };
@@ -47,7 +47,8 @@ export default class extends Controller {
     );
 
     if (currentIndex + 1 < this.itemTargets.length) {
-      this.itemTargets[currentIndex].removeAttribute("aria-current");
+      // No aria-current yet (fresh open via keyboard) → start at the first item.
+      if (currentIndex >= 0) this.itemTargets[currentIndex].removeAttribute("aria-current");
       this.setAriaCurrentAndActiveDescendant(currentIndex + 1);
     }
   }
@@ -75,15 +76,12 @@ export default class extends Controller {
       (item) => item.getAttribute("aria-selected") === "true",
     );
 
-    if (selectedItem) {
-      selectedItem.focus({ preventScroll: true });
-      selectedItem.setAttribute("aria-current", "true");
-      this.triggerTarget.setAttribute("aria-activedescendant", selectedItem.getAttribute("id"));
-    } else {
-      this.itemTarget.focus({ preventScroll: true });
-      this.itemTarget.setAttribute("aria-current", "true");
-      this.triggerTarget.setAttribute("aria-activedescendant", this.itemTarget.getAttribute("id"));
-    }
+    const focusItem = selectedItem || (this.hasItemTarget ? this.itemTarget : null);
+    if (!focusItem) return; // empty select — nothing to focus
+
+    focusItem.focus({ preventScroll: true });
+    focusItem.setAttribute("aria-current", "true");
+    this.triggerTarget.setAttribute("aria-activedescendant", focusItem.getAttribute("id"));
   }
 
   resetCurrent() {
@@ -100,7 +98,11 @@ export default class extends Controller {
 
   toogleContent() {
     this.openValue = !this.openValue;
-    this.contentTarget.classList.toggle("hidden");
+    if (this.openValue) {
+      this.contentTarget.showPopover();
+    } else if (this.contentTarget.matches(":popover-open")) {
+      this.contentTarget.hidePopover();
+    }
     this.triggerTarget.setAttribute("aria-expanded", this.openValue);
   }
 
@@ -124,7 +126,9 @@ export default class extends Controller {
     this.toogleContent();
     this.resetCurrent();
 
-    this.triggerTarget.setAttribute("aria-activedescendant", true);
+    // aria-activedescendant holds an element id; on close it must be removed,
+    // not set to the literal string "true".
+    this.triggerTarget.removeAttribute("aria-activedescendant");
     this.triggerTarget.focus({ preventScroll: true });
   }
 

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

@@ -14,7 +14,7 @@ module PhlexKit
       button(**mix({
         type: :button,
         role: "combobox",
-        class: [ "pk-select-trigger", SIZES.fetch(@size) ].compact.join(" "),
+        class: [ "pk-select-trigger", fetch_option(SIZES, @size, :size) ].compact.join(" "),
         aria: { expanded: "false", haspopup: "listbox", autocomplete: "none" },
         data: { action: "phlex-kit--select#onClick", phlex_kit__select_target: "trigger" }
       }, @attrs)) do

data/app/components/phlex_kit/sheet/sheet_content.rb

@@ -9,9 +9,9 @@ module PhlexKit
     end
     def view_template(&block)
       template(data: { phlex_kit__sheet_target: "content" }) do
-        div(data: { controller: "phlex-kit--sheet-content" }) do
+        div(data: { controller: "phlex-kit--sheet-content", action: "keydown->phlex-kit--sheet-content#keydown" }) do
           div(class: "pk-sheet-backdrop", data: { action: "click->phlex-kit--sheet-content#close" })
-          div(**mix({ class: ["pk-sheet-content", SIDES.fetch(@side)].join(" ") }, @attrs)) do
+          div(**mix({ class: [ "pk-sheet-content", fetch_option(SIDES, @side, :side) ].join(" "), role: "dialog", aria: { modal: "true" }, tabindex: "-1", data: { phlex_kit__sheet_content_target: "panel" } }, @attrs)) do
             block&.call
             if @show_close_button
               button(type: "button", class: "pk-overlay-close", data: { action: "click->phlex-kit--sheet-content#close" }) do

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

@@ -1,6 +1,72 @@
 import { Controller } from "@hotwired/stimulus"
 
-// Connects to data-controller="phlex-kit--sheet-content" (on the cloned node).
+// Connects to data-controller="phlex-kit--sheet-content" (on the cloned node —
+// drawers ride the same machinery). Owns the modal contract for the open panel:
+// scroll lock, initial focus, Tab focus trap, Escape-to-close, focus restore to
+// the opener, and aria-labelledby wiring to the SheetTitle/DrawerTitle. connect
+// and disconnect exactly bracket the clone's lifetime, so removal by any path
+// (close button, backdrop, Escape, turbo:before-cache) restores state.
+const FOCUSABLE =
+  'a[href], button:not([disabled]), input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])'
+
 export default class extends Controller {
-  close() { this.element.remove() }
+  static targets = ["panel"]
+
+  connect() {
+    this.opener = document.activeElement
+    this.previousOverflow = document.body.style.overflow
+    document.body.style.overflow = "hidden"
+    this.#wireAriaLabelledby()
+    const focusables = this.#focusables()
+    ;(focusables[0] || this.panel).focus()
+  }
+
+  disconnect() {
+    document.body.style.overflow = this.previousOverflow
+    if (this.opener?.isConnected) this.opener.focus()
+  }
+
+  close() {
+    this.element.remove()
+  }
+
+  keydown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault()
+      this.close()
+      return
+    }
+    if (event.key !== "Tab") return
+    const focusables = this.#focusables()
+    if (focusables.length === 0) {
+      event.preventDefault()
+      this.panel.focus()
+      return
+    }
+    const first = focusables[0]
+    const last = focusables[focusables.length - 1]
+    if (event.shiftKey && (document.activeElement === first || document.activeElement === this.panel)) {
+      event.preventDefault()
+      last.focus()
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault()
+      first.focus()
+    }
+  }
+
+  get panel() {
+    return this.hasPanelTarget ? this.panelTarget : this.element
+  }
+
+  #focusables() {
+    return [...this.panel.querySelectorAll(FOCUSABLE)].filter((el) => el.getClientRects().length > 0)
+  }
+
+  #wireAriaLabelledby() {
+    if (this.panel.getAttribute("aria-labelledby")) return
+    const title = this.element.querySelector(".pk-sheet-title, .pk-drawer-title")
+    if (!title) return
+    if (!title.id) title.id = `pk-modal-title-${Math.random().toString(36).slice(2, 10)}`
+    this.panel.setAttribute("aria-labelledby", title.id)
+  }
 }

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

@@ -1,10 +1,35 @@
 import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="phlex-kit--sheet". Clones the content <template>
-// into <body> on open. Ported from ruby_ui.
+// into <body> on open. Ported from ruby_ui. Guards against double-opening (one
+// live clone at a time) and clears the clone on turbo:before-cache so a cached
+// page never restores a stale overlay. The clone's own phlex-kit--sheet-content
+// controller owns the modal behavior (focus trap, Escape, scroll lock).
 export default class extends Controller {
   static targets = ["content"]
   static values = { open: { type: Boolean, default: false } }
-  connect() { if (this.openValue) this.open() }
-  open() { document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML) }
+
+  initialize() {
+    this.overlay = null
+    this.clearOverlay = () => {
+      if (this.overlay?.isConnected) this.overlay.remove()
+      this.overlay = null
+    }
+  }
+
+  connect() {
+    document.addEventListener("turbo:before-cache", this.clearOverlay)
+    if (this.openValue) this.open()
+  }
+
+  disconnect() {
+    document.removeEventListener("turbo:before-cache", this.clearOverlay)
+    this.clearOverlay()
+  }
+
+  open() {
+    if (this.overlay?.isConnected) return
+    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML)
+    this.overlay = document.body.lastElementChild
+  }
 }

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

@@ -26,7 +26,7 @@ module PhlexKit
     private
 
     def classes
-      [ "pk-sidebar", MENUS.fetch(@menu) ].compact.join(" ")
+      [ "pk-sidebar", fetch_option(MENUS, @menu, :menu) ].compact.join(" ")
     end
   end
 end

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

@@ -59,7 +59,7 @@ module PhlexKit
     def collapsible? = @collapsible != :none
 
     def classes
-      [ "pk-sidebar-wrapper", COLLAPSIBLE.fetch(@collapsible) ].compact.join(" ")
+      [ "pk-sidebar-wrapper", fetch_option(COLLAPSIBLE, @collapsible, :collapsible) ].compact.join(" ")
     end
   end
 end

data/app/components/phlex_kit/spinner/spinner.rb

@@ -12,7 +12,7 @@ module PhlexKit
     def view_template
       # A visible loader, not decoration: role=status + label, aria-hidden off.
       render Icon.new(:loader, size: nil, **mix({
-        class: [ "pk-spinner", SIZES.fetch(@size) ].compact.join(" "),
+        class: [ "pk-spinner", fetch_option(SIZES, @size, :size) ].compact.join(" "),
         role: "status",
         aria: { label: "Loading" },
         "aria-hidden": false

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

@@ -5,18 +5,21 @@ module PhlexKit
   class Switch < BaseComponent
     SIZES = { md: nil, sm: "sm" }.freeze
 
-    def initialize(include_hidden: true, checked_value: "1", unchecked_value: "0", size: :md, **attrs)
+    def initialize(include_hidden: true, checked_value: "1", unchecked_value: "0", size: :md, wrapper: {}, **attrs)
       @include_hidden = include_hidden
       @checked_value = checked_value
       @unchecked_value = unchecked_value
       @size = size.to_sym
+      @wrapper = wrapper
       @attrs = attrs
     end
 
     def view_template
-      label(**mix({ role: "switch", class: [ "pk-switch", SIZES.fetch(@size) ].compact.join(" ") }, {})) do
-        input(type: "hidden", name: @attrs[:name], value: @unchecked_value) if @include_hidden
-        input(**mix({ class: "pk-switch-input" }, @attrs).merge(type: "checkbox", value: @checked_value))
+      label(**mix({ class: [ "pk-switch", fetch_option(SIZES, @size, :size) ].compact.join(" ") }, @wrapper)) do
+        input(type: "hidden", name: @attrs[:name], value: @unchecked_value) if @include_hidden && @attrs[:name]
+        # 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))
         span(class: "pk-switch-thumb")
       end
     end

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

@@ -11,7 +11,7 @@ module PhlexKit
     end
 
     def view_template(&)
-      classes = [ "pk-tabs", ORIENTATIONS.fetch(@orientation) ].compact.join(" ")
+      classes = [ "pk-tabs", fetch_option(ORIENTATIONS, @orientation, :orientation) ].compact.join(" ")
       div(**mix({ class: classes, data: { controller: "phlex-kit--tabs", phlex_kit__tabs_active_value: @default } }, @attrs), &)
     end
   end

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

@@ -5,7 +5,10 @@ module PhlexKit
       @attrs = attrs
     end
     def view_template(&)
-      div(**mix({ class: "pk-tabs-content pk-hidden", role: "tabpanel", data: { phlex_kit__tabs_target: "content", value: @value } }, @attrs), &)
+      # id / aria-labelledby mirror TabsTrigger's deterministic ids (re-scoped
+      # per instance by the controller); tabindex="0" makes the panel itself
+      # focusable, per the APG tabs pattern.
+      div(**mix({ class: "pk-tabs-content pk-hidden", role: "tabpanel", id: "pk-tabs-panel-#{@value}", aria_labelledby: "pk-tabs-trigger-#{@value}", tabindex: "0", data: { phlex_kit__tabs_target: "content", value: @value } }, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/tabs/tabs_controller.js

@@ -1,26 +1,79 @@
 import { Controller } from "@hotwired/stimulus"
 
+let uid = 0
+
 // Connects to data-controller="phlex-kit--tabs"
 export default class extends Controller {
-  static targets = ["trigger", "content"]
+  static targets = ["list", "trigger", "content"]
   static values = { active: String }
 
   connect() {
+    this.scopeIds()
+    if (this.hasListTarget && this.element.classList.contains("vertical")) {
+      this.listTarget.setAttribute("aria-orientation", "vertical")
+    }
     if (!this.hasActiveValue && this.triggerTargets.length > 0) {
       this.activeValue = this.triggerTargets[0].dataset.value
+    } else {
+      this.sync()
     }
   }
 
   show(e) { this.activeValue = e.currentTarget.dataset.value }
 
+  // APG tabs keyboard model on the tablist: arrows move focus AND activate
+  // (shadcn/Radix activation-on-focus), Home/End jump to the ends. Vertical
+  // tab sets also answer to ArrowUp/ArrowDown.
+  keydown(event) {
+    const vertical = this.element.classList.contains("vertical")
+    const nextKeys = vertical ? ["ArrowRight", "ArrowDown"] : ["ArrowRight"]
+    const prevKeys = vertical ? ["ArrowLeft", "ArrowUp"] : ["ArrowLeft"]
+    const triggers = this.triggerTargets.filter((el) => !el.disabled)
+    if (triggers.length === 0) return
+    const index = triggers.indexOf(document.activeElement)
+    let target
+    if (nextKeys.includes(event.key)) target = triggers[(index + 1) % triggers.length]
+    else if (prevKeys.includes(event.key)) target = triggers[(index - 1 + triggers.length) % triggers.length]
+    else if (event.key === "Home") target = triggers[0]
+    else if (event.key === "End") target = triggers[triggers.length - 1]
+    if (!target) return
+    event.preventDefault()
+    target.focus()
+    this.activeValue = target.dataset.value
+  }
+
   activeValueChanged(current, previous) {
     if (current === "" || current === previous) return
-    this.contentTargets.forEach((el) => el.classList.add("pk-hidden"))
-    this.triggerTargets.forEach((el) => { el.dataset.state = "inactive" })
-    const c = this.activeContentTarget()
-    if (c) c.classList.remove("pk-hidden")
-    const t = this.activeTriggerTarget()
-    if (t) t.dataset.state = "active"
+    this.sync()
+  }
+
+  // Reflect the active value onto every trigger/panel: visibility,
+  // data-state, aria-selected, and the roving tabindex.
+  sync() {
+    this.contentTargets.forEach((el) => el.classList.toggle("pk-hidden", el.dataset.value !== this.activeValue))
+    this.triggerTargets.forEach((el) => {
+      const active = el.dataset.value === this.activeValue
+      el.dataset.state = active ? "active" : "inactive"
+      el.setAttribute("aria-selected", active ? "true" : "false")
+      el.setAttribute("tabindex", active ? "0" : "-1")
+    })
+  }
+
+  // The parts render deterministic ids derived from their value, which would
+  // collide across multiple tab sets on one page — re-scope them with a
+  // per-instance prefix and rewire aria-controls/aria-labelledby. Caller-
+  // supplied (non pk-tabs-*) ids are left alone.
+  scopeIds() {
+    const prefix = `pk-tabs-${++uid}`
+    this.triggerTargets.forEach((trigger) => {
+      const value = trigger.dataset.value
+      const panel = this.contentTargets.find((el) => el.dataset.value === value)
+      if (!trigger.id || trigger.id.startsWith("pk-tabs-trigger-")) trigger.id = `${prefix}-trigger-${value}`
+      if (!panel) return
+      if (!panel.id || panel.id.startsWith("pk-tabs-panel-")) panel.id = `${prefix}-panel-${value}`
+      trigger.setAttribute("aria-controls", panel.id)
+      panel.setAttribute("aria-labelledby", trigger.id)
+    })
   }
 
   activeTriggerTarget() { return this.triggerTargets.find((el) => el.dataset.value === this.activeValue) }

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

@@ -8,8 +8,8 @@ module PhlexKit
     end
 
     def view_template(&)
-      classes = [ "pk-tabs-list", VARIANTS.fetch(@variant) ].compact.join(" ")
-      div(**mix({ class: classes, role: "tablist" }, @attrs), &)
+      classes = [ "pk-tabs-list", fetch_option(VARIANTS, @variant, :variant) ].compact.join(" ")
+      div(**mix({ class: classes, role: "tablist", data: { phlex_kit__tabs_target: "list", action: "keydown->phlex-kit--tabs#keydown" } }, @attrs), &)
     end
   end
 end

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

@@ -1,12 +1,24 @@
 module PhlexKit
   class TabsTrigger < BaseComponent
-    def initialize(value:, as: :button, **attrs)
+    def initialize(value:, as: :button, active: false, **attrs)
       @value = value
       @as = as.to_sym
+      @active = active
       @attrs = attrs
     end
     def view_template(&)
-      base = { class: "pk-tabs-trigger", role: "tab", data: { phlex_kit__tabs_target: "trigger", action: "click->phlex-kit--tabs#show", value: @value } }
+      # Deterministic ids pair each trigger with its panel (aria-controls /
+      # aria-labelledby); the controller re-scopes them per instance in
+      # connect() so multiple tab sets sharing a value can't collide.
+      # aria-selected and the roving tabindex are kept in sync by the
+      # controller's activeValueChanged.
+      base = {
+        class: "pk-tabs-trigger", role: "tab", id: "pk-tabs-trigger-#{@value}",
+        aria_selected: @active ? "true" : "false",
+        aria_controls: "pk-tabs-panel-#{@value}",
+        tabindex: @active ? "0" : "-1",
+        data: { phlex_kit__tabs_target: "trigger", action: "click->phlex-kit--tabs#show", value: @value }
+      }
       if @as == :a
         a(**mix(base, @attrs), &)
       else

data/app/components/phlex_kit/theme_toggle/theme_toggle.rb

@@ -3,11 +3,19 @@ module PhlexKit
   # ThemeToggle. The sibling phlex-kit--theme-toggle controller listens for the
   # toggle's change event and flips :root[data-theme] (matching the token system).
   class ThemeToggle < BaseComponent
-    def initialize(**attrs) = (@attrs = attrs)
+    def initialize(wrapper: {}, aria: {}, **attrs)
+      @wrapper = wrapper
+      @aria = aria
+      @attrs = attrs
+    end
+
     def view_template(&block)
+      # Merge caller wrapper/aria instead of splatting @attrs over the defaults —
+      # a caller `wrapper:` would otherwise replace the hash wholesale and
+      # silently delete the theme-toggle controller wiring.
       render PhlexKit::Toggle.new(
-        aria: { label: "Toggle theme" },
-        wrapper: { data: { controller: "phlex-kit--theme-toggle", action: "phlex-kit--toggle:change->phlex-kit--theme-toggle#apply" } },
+        aria: { label: "Toggle theme" }.merge(@aria),
+        wrapper: mix({ data: { controller: "phlex-kit--theme-toggle", action: "phlex-kit--toggle:change->phlex-kit--theme-toggle#apply" } }, @wrapper),
         **@attrs, &block
       )
     end

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

@@ -27,6 +27,10 @@ export default class extends Controller {
     this._onPointerUp = this._onPointerUp.bind(this)
     this._onPointerEnter = () => this._pause()
     this._onPointerLeave = () => { if (!this._swipe.active) this._resume() }
+    // 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()
+    this._onFocusOut = (e) => { if (!this.element.contains(e.relatedTarget)) this._resume() }
     this._onKeyDown = this._onKeyDown.bind(this)
     this._onForceDismiss = (e) => { e.stopPropagation(); this._close() }
     this._onRestart = () => this._restart()
@@ -36,6 +40,8 @@ export default class extends Controller {
     this.element.addEventListener("pointerdown", this._onPointerDown)
     this.element.addEventListener("pointerenter", this._onPointerEnter)
     this.element.addEventListener("pointerleave", this._onPointerLeave)
+    this.element.addEventListener("focusin", this._onFocusIn)
+    this.element.addEventListener("focusout", this._onFocusOut)
     this.element.addEventListener("keydown", this._onKeyDown)
     this.element.addEventListener("phlex-kit:toast:force-dismiss", this._onForceDismiss)
     this.element.addEventListener("phlex-kit:toast:restart", this._onRestart)
@@ -53,6 +59,8 @@ export default class extends Controller {
     this.element.removeEventListener("pointerdown", this._onPointerDown)
     this.element.removeEventListener("pointerenter", this._onPointerEnter)
     this.element.removeEventListener("pointerleave", this._onPointerLeave)
+    this.element.removeEventListener("focusin", this._onFocusIn)
+    this.element.removeEventListener("focusout", this._onFocusOut)
     this.element.removeEventListener("keydown", this._onKeyDown)
     this.element.removeEventListener("phlex-kit:toast:force-dismiss", this._onForceDismiss)
     this.element.removeEventListener("phlex-kit:toast:restart", this._onRestart)
@@ -70,9 +78,18 @@ export default class extends Controller {
     if (this.element.dataset.state === "closing") return
     this.element.dataset.state = "closing"
     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)
     setTimeout(() => this.element.remove(), TIME_BEFORE_UNMOUNT)
   }
 
+  // on_dismiss:/on_auto_close: name a global function (Sonner-style callback
+  // for server-rendered toasts).
+  _invokeCallback(name) {
+    if (!name) return
+    const fn = window[name]
+    if (typeof fn === "function") fn({ id: this.element.id })
+  }
+
   _start() {
     if (!Number.isFinite(this.durationValue) || this.durationValue <= 0) return
     this._startedAt = performance.now()

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

@@ -22,7 +22,7 @@ module PhlexKit
     def view_template
       return unless renderable?
       span(**mix({ class: "pk-toast-icon", data: { slot: "icon" } }, @attrs)) do
-        render Icon.new(GLYPHS.fetch(@variant), size: 16, class: svg_classes)
+        render Icon.new(fetch_option(GLYPHS, @variant, :glyph), size: 16, class: svg_classes)
       end
     end
 

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

@@ -44,7 +44,7 @@ module PhlexKit
 
     def item_attrs
       data = {
-        variant: VARIANTS.fetch(@variant),
+        variant: fetch_option(VARIANTS, @variant, :variant),
         state: "pending",
         swipe: "none",
         controller: "phlex-kit--toast",

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

@@ -7,7 +7,7 @@ module PhlexKit
     SIZES = { sm: "sm", default: nil, lg: "lg" }.freeze
 
     def self.modifier_classes(variant:, size:)
-      [VARIANTS.fetch(variant, nil), SIZES.fetch(size, nil)].compact
+      [ VARIANTS.fetch(variant, nil), SIZES.fetch(size, nil) ].compact
     end
 
     def initialize(pressed: false, name: nil, value: "1", unpressed_value: nil,
@@ -33,7 +33,7 @@ module PhlexKit
     private
 
     def classes
-      (["pk-toggle"] + self.class.modifier_classes(variant: @variant, size: @size)).join(" ")
+      ([ "pk-toggle" ] + self.class.modifier_classes(variant: @variant, size: @size)).join(" ")
     end
 
     def button_default_attrs