phlex_kit 0.9.1 → 0.11.0

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

@@ -9,7 +9,28 @@ export default class extends Controller {
   static targets = ["trigger", "content", "input", "value", "item"];
   static values = { open: Boolean };
 
+  initialize() {
+    // Stimulus fires [target]Connected before connect(): state used by
+    // itemTargetConnected must be initialized here.
+    this.itemIdCounter = 0;
+  }
+
+  // Per-item, not a connect()-time sweep: options injected later (Turbo
+  // stream/frame) must still get ids or aria-activedescendant would point
+  // at nothing — and a caller-provided id is left alone, not clobbered.
+  itemTargetConnected(item) {
+    if (!item.id) item.id = `${this.contentTarget.id}-${this.itemIdCounter++}`;
+  }
+
   connect() {
+    // A Turbo snapshot serializes aria-expanded / aria-activedescendant /
+    // aria-current even though :popover-open does not survive the restore —
+    // normalize here so a restored page doesn't announce an open listbox
+    // over a closed select (same mitigation as dropdown_menu's connect).
+    this.openValue = false;
+    this.triggerTarget.setAttribute("aria-expanded", "false");
+    this.triggerTarget.removeAttribute("aria-activedescendant");
+    this.itemTargets.forEach((item) => item.removeAttribute("aria-current"));
     this.generateItemsIds();
   }
 
@@ -21,6 +42,9 @@ export default class extends Controller {
     // document-scoped outlet: outlets match `.pk-select-item` page-wide and
     // clobbered every other Select's aria-selected.
     const item = event.currentTarget;
+    // A malformed (hand-written) item without data-value must never submit
+    // the literal string "undefined". SelectItem itself fails loud on nil.
+    if (item.dataset.value === undefined) return;
     this.itemTargets.forEach((el) => {
       el.setAttribute("aria-selected", el === item ? "true" : "false");
     });
@@ -36,7 +60,7 @@ export default class extends Controller {
   }
 
   onClick() {
-    this.toogleContent();
+    this.toggleContent();
 
     if (this.openValue) {
       this.setFocusAndCurrent();
@@ -127,10 +151,37 @@ export default class extends Controller {
   // 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).
-  toogleContent() {
+  toggleContent() {
     this.contentTarget.matches(":popover-open") ? this.#hide() : this.#show();
   }
 
+  // Listbox typeahead: printable keys accumulate into a short-lived buffer
+  // and move the highlight to the first option whose text starts with it.
+  typeahead(event) {
+    if (event.metaKey || event.ctrlKey || event.altKey) return;
+    if (event.key.length !== 1 || event.key === " ") return; // Space selects
+    clearTimeout(this.typeaheadTimer);
+    this.typeaheadBuffer = (this.typeaheadBuffer || "") + event.key.toLowerCase();
+    this.typeaheadTimer = setTimeout(() => { this.typeaheadBuffer = ""; }, 500);
+
+    let index = this.itemTargets.findIndex((item) =>
+      item.innerText.trim().toLowerCase().startsWith(this.typeaheadBuffer));
+    if (index < 0) {
+      // Buffer stopped matching — restart it from this keystroke (APG
+      // typeahead: a failed prefix shouldn't dead-end until the timer clears).
+      this.typeaheadBuffer = event.key.toLowerCase();
+      index = this.itemTargets.findIndex((item) =>
+        item.innerText.trim().toLowerCase().startsWith(this.typeaheadBuffer));
+    }
+    if (index < 0) return;
+    this.resetCurrent();
+    this.setAriaCurrentAndActiveDescendant(index);
+  }
+
+  disconnect() {
+    clearTimeout(this.typeaheadTimer);
+  }
+
   #show() {
     this.openValue = true;
     this.contentTarget.showPopover();
@@ -146,10 +197,12 @@ export default class extends Controller {
   generateItemsIds() {
     const contentId = this.contentTarget.getAttribute("id");
     this.triggerTarget.setAttribute("aria-controls", contentId);
-
-    this.itemTargets.forEach((item, index) => {
-      item.id = `${contentId}-${index}`;
-    });
+    // Name the listbox from the trigger (Radix wires it the same way) —
+    // an unnamed role=listbox is announced as an anonymous list.
+    if (!this.triggerTarget.id) this.triggerTarget.id = `${contentId}-trigger`;
+    if (!this.contentTarget.hasAttribute("aria-labelledby")) {
+      this.contentTarget.setAttribute("aria-labelledby", this.triggerTarget.id);
+    }
   }
 
   setAriaCurrentAndActiveDescendant(currentIndex) {

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

@@ -7,7 +7,10 @@ module PhlexKit
   # repeated attribute rather than override it.
   # See select.rb.
   class SelectItem < BaseComponent
-    def initialize(value: nil, selected: false, **attrs)
+    def initialize(value:, selected: false, **attrs)
+      # nil would render no data-value at all and the controller would submit
+      # the literal string "undefined" — fail loud instead.
+      raise ArgumentError, "SelectItem requires a value:" if value.nil?
       @value = value
       @selected = selected
       @attrs = attrs
@@ -25,6 +28,7 @@ module PhlexKit
         data: {
           value: @value,
           action: "click->phlex-kit--select#selectItem keydown.enter->phlex-kit--select#selectItem " \
+                  "keydown.space->phlex-kit--select#selectItem " \
                   "keydown.down->phlex-kit--select#handleKeyDown keydown.up->phlex-kit--select#handleKeyUp " \
                   "keydown.home->phlex-kit--select#handleHome keydown.end->phlex-kit--select#handleEnd " \
                   "keydown.esc->phlex-kit--select#handleEsc",

data/app/components/phlex_kit/separator/separator.rb

@@ -6,9 +6,15 @@ module PhlexKit
   # the kit's fail-loud selectors.
   class Separator < BaseComponent
     ORIENTATIONS = %i[horizontal vertical].freeze
+    # `as:` is dispatched dynamically (send) — whitelist the documented
+    # elements so it can't reach arbitrary (including private) methods.
+    AS_TAGS = %i[div hr].freeze
 
     def initialize(as: :div, orientation: :horizontal, decorative: true, **attrs)
-      @as = as
+      @as = as.to_sym
+      unless AS_TAGS.include?(@as)
+        raise ArgumentError, "unknown Separator as: #{@as.inspect} (use one of #{AS_TAGS.join(", ")})"
+      end
       @orientation = orientation.to_sym
       unless ORIENTATIONS.include?(@orientation)
         raise ArgumentError, "Invalid orientation: #{orientation.inspect}"
@@ -18,7 +24,11 @@ module PhlexKit
     end
 
     def view_template(&block)
-      send(@as, **mix({ role: (@decorative ? "none" : "separator"), class: classes }, @attrs), &block)
+      base = { role: (@decorative ? "none" : "separator"), class: classes }
+      # role="separator" is implicitly horizontal — a semantic vertical one
+      # must say so or AT announces the wrong axis.
+      base[:"aria-orientation"] = "vertical" if !@decorative && @orientation == :vertical
+      send(@as, **mix(base, @attrs), &block)
     end
 
     private

data/app/components/phlex_kit/sheet/sheet.css

@@ -16,8 +16,10 @@
 }
 .pk-sheet-content.right { inset-block: 0; right: 0; height: 100%; width: 75%; max-width: 24rem; border-left: 1px solid var(--pk-border); }
 .pk-sheet-content.left  { inset-block: 0; left: 0;  height: 100%; width: 75%; max-width: 24rem; border-right: 1px solid var(--pk-border); }
-.pk-sheet-content.top    { inset-inline: 0; top: 0;    border-bottom: 1px solid var(--pk-border); }
-.pk-sheet-content.bottom { inset-inline: 0; bottom: 0; border-top: 1px solid var(--pk-border); }
+/* max-height: without it a tall top/bottom panel grows past the viewport and
+   overflow:auto never engages (footer/close unreachable). */
+.pk-sheet-content.top    { inset-inline: 0; top: 0;    max-height: 100dvh; border-bottom: 1px solid var(--pk-border); }
+.pk-sheet-content.bottom { inset-inline: 0; bottom: 0; max-height: 100dvh; border-top: 1px solid var(--pk-border); }
 .pk-sheet-header { display: flex; flex-direction: column; gap: .125rem; padding: 1rem; }
 .pk-sheet-footer { display: flex; flex-direction: column-reverse; gap: .5rem; padding: 1rem; margin-top: auto; }
 .pk-sheet-title { font-size: 1rem; font-weight: 500; line-height: 1; color: var(--pk-text); }

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

@@ -4,7 +4,7 @@ module PhlexKit
   class SheetClose < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      span(**mix({ style: "display: contents", data: { action: "click->phlex-kit--sheet-content#close" } }, @attrs), &)
+      span(**mix({ style: "display: contents;", data: { action: "click->phlex-kit--sheet-content#close" } }, @attrs), &)
     end
   end
 end

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

@@ -29,6 +29,10 @@ export default class extends Controller {
     this.#restoreInert()
     document.body.style.overflow = this.previousOverflow
     if (this.opener?.isConnected) this.opener.focus()
+    // Tell the source phlex-kit--sheet controller the clone is gone so it
+    // can flip the trigger's aria-expanded back (removal happens by many
+    // paths: close button, Escape, backdrop, before-cache).
+    document.dispatchEvent(new CustomEvent("phlex-kit:sheet-content:closed"))
   }
 
   close() {

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

@@ -19,17 +19,32 @@ export default class extends Controller {
 
   connect() {
     document.addEventListener("turbo:before-cache", this.clearOverlay)
+    // Popup semantics for AT: the trigger's real control announces that it
+    // opens a dialog, and expanded state tracks the clone's lifetime (the
+    // content controller signals removal via phlex-kit:sheet-content:closed).
+    this.invoker = this.element.querySelector(".pk-sheet-trigger button, .pk-sheet-trigger a, .pk-sheet-trigger [tabindex]")
+    this.invoker?.setAttribute("aria-haspopup", "dialog")
+    this.invoker?.setAttribute("aria-expanded", "false")
+    this.onOverlayClosed = () => {
+      if (!this.overlay?.isConnected) this.invoker?.setAttribute("aria-expanded", "false")
+    }
+    document.addEventListener("phlex-kit:sheet-content:closed", this.onOverlayClosed)
     if (this.openValue) this.open()
   }
 
   disconnect() {
     document.removeEventListener("turbo:before-cache", this.clearOverlay)
+    document.removeEventListener("phlex-kit:sheet-content:closed", this.onOverlayClosed)
     this.clearOverlay()
   }
 
   open() {
     if (this.overlay?.isConnected) return
+    // open: is one-shot — the reflected value sits in the Turbo snapshot, so
+    // a cache-restored reconnect would re-open a dismissed sheet.
+    this.openValue = false
     document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML)
     this.overlay = document.body.lastElementChild
+    this.invoker?.setAttribute("aria-expanded", "true")
   }
 }

data/app/components/phlex_kit/sidebar/sidebar.css

@@ -66,7 +66,7 @@
   width: 100%;
   padding: .5rem .65rem;
   border: 0;
-  border-radius: 8px;
+  border-radius: calc(var(--pk-radius) - 2px);
   background: transparent;
   color: var(--pk-sidebar-text, var(--pk-text));
   font: inherit;

data/app/components/phlex_kit/sidebar/sidebar_controller.js

@@ -25,11 +25,21 @@ export default class extends Controller {
   static COOKIE = "pk_sidebar_state"
 
   connect() {
+    // Crossing to desktop while the mobile drawer is open would strand the
+    // page inert: the scrim/drawer CSS stops applying at >=768px but the
+    // inert marks (and data-open) would survive. Close on breakpoint change.
+    this.mql = window.matchMedia(this.constructor.MOBILE)
+    this.onBreakpoint = () => {
+      if (!this.mql.matches) this.closeMobile()
+      this.#syncExpanded()
+    }
+    this.mql.addEventListener("change", this.onBreakpoint)
     this.#wireAriaControls()
     this.#syncExpanded()
   }
 
   disconnect() {
+    this.mql.removeEventListener("change", this.onBreakpoint)
     this.#restoreInert()
   }
 

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

@@ -11,8 +11,16 @@ module PhlexKit
   # untouched — keep the label in a real element there. Attrs pass through via
   # mix. See sidebar.rb.
   class SidebarMenuButton < BaseComponent
+    # `as:` is dispatched dynamically (send) — whitelist so it can't reach
+    # arbitrary (including private) methods; to_sym so a String "a" still
+    # earns aria-current when active.
+    AS_TAGS = %i[button a].freeze
+
     def initialize(as: :button, active: false, tooltip: nil, **attrs)
-      @as = as
+      @as = as.to_sym
+      unless AS_TAGS.include?(@as)
+        raise ArgumentError, "unknown SidebarMenuButton as: #{@as.inspect} (use one of #{AS_TAGS.join(", ")})"
+      end
       @active = active
       @tooltip = tooltip
       @attrs = attrs

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

@@ -5,8 +5,15 @@ module PhlexKit
   # primary). Kwarg rather than attr for the same mix-merge reason as
   # SidebarMenuButton. See sidebar.rb.
   class SidebarMenuSubButton < BaseComponent
+    # `as:` is dispatched dynamically (send) — whitelist, matching
+    # SidebarMenuButton.
+    AS_TAGS = %i[a button].freeze
+
     def initialize(as: :a, active: false, **attrs)
-      @as = as
+      @as = as.to_sym
+      unless AS_TAGS.include?(@as)
+        raise ArgumentError, "unknown SidebarMenuSubButton as: #{@as.inspect} (use one of #{AS_TAGS.join(", ")})"
+      end
       @active = active
       @attrs = attrs
     end

data/app/components/phlex_kit/slider/slider.css

@@ -18,6 +18,15 @@
     var(--pk-brand) var(--pk-slider-progress, 50%),
     var(--pk-surface-2) var(--pk-slider-progress, 50%));
 }
+/* Chrome mirrors the native range input in RTL but the gradient stays
+   physical — repaint the fill from the right. (:dir() reads document
+   directionality, so .vertical's internal `direction: rtl` flip below
+   doesn't match; its own `to top` gradient also comes later and wins.) */
+.pk-slider:dir(rtl)::-webkit-slider-runnable-track {
+  background: linear-gradient(to left,
+    var(--pk-brand) var(--pk-slider-progress, 50%),
+    var(--pk-surface-2) var(--pk-slider-progress, 50%));
+}
 .pk-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: .75rem;
@@ -57,6 +66,12 @@
 .pk-slider:active::-moz-range-thumb {
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
+/* line 13 strips the native outline in every browser — without this arm the
+   replacement ring only existed on the -webkit thumb and Firefox keyboard
+   focus was invisible. */
+.pk-slider:focus-visible::-moz-range-thumb {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
 .pk-slider:disabled { opacity: .5; cursor: not-allowed; }
 /* Vertical: modern writing-mode flip (min-h-40 like theirs). */
 .pk-slider.vertical {

data/app/components/phlex_kit/switch/switch.css

@@ -49,6 +49,11 @@
   transform: translateX(calc(100% - 2px));
   background: var(--pk-brand-ink);
 }
+/* RTL: the resting thumb sits at the physical right — checked travel must
+   slide it left or it leaves the track. */
+.pk-switch:dir(rtl):has(.pk-switch-input:checked) .pk-switch-thumb {
+  transform: translateX(calc(-100% + 2px));
+}
 :root[data-theme="light"] .pk-switch { background: var(--pk-input); }
 :root[data-theme="light"] .pk-switch:has(.pk-switch-input:checked) { background: var(--pk-brand); }
 :root[data-theme="light"] .pk-switch-thumb { background: var(--pk-bg) !important; }

data/app/components/phlex_kit/table/table.css

@@ -5,9 +5,10 @@
 .pk-table-wrapper { position: relative; width: 100%; overflow: auto; }
 .pk-table { width: 100%; border-collapse: collapse; caption-side: bottom; font-size: .875rem; }
 
-.pk-table-header .pk-table-row { border-bottom: 1px solid var(--pk-border); }
 .pk-table-body .pk-table-row:last-child { border-bottom: 0; }
 .pk-table-footer { border-top: 1px solid var(--pk-border); font-weight: 500; background: color-mix(in oklab, var(--pk-surface-2) 50%, transparent); }
+/* shadcn parity: the totals row doesn't draw a stray line under the table. */
+.pk-table-footer .pk-table-row:last-child { border-bottom: 0; }
 
 .pk-table-row { border-bottom: 1px solid var(--pk-border); transition: background-color .12s ease; }
 .pk-table-row:hover { background: color-mix(in oklab, var(--pk-surface-2) 50%, transparent); }

data/app/components/phlex_kit/table/table.rb

@@ -22,12 +22,15 @@ module PhlexKit
   #
   # Tailwind → vanilla `.pk-table-*` (table.css), palette from the global tokens.
   class Table < BaseComponent
-    def initialize(**attrs)
+    def initialize(wrapper: {}, **attrs)
+      @wrapper = wrapper
       @attrs = attrs
     end
 
     def view_template(&block)
-      div(class: "pk-table-wrapper") do
+      # Caller attrs land on the <table>; wrapper: reaches the scroll
+      # container (e.g. to cap its height) — same escape hatch as Switch.
+      div(**mix({ class: "pk-table-wrapper" }, @wrapper)) do
         table(**mix({ class: "pk-table" }, @attrs), &block)
       end
     end

data/app/components/phlex_kit/tabs/tabs.css

@@ -44,7 +44,7 @@
   border-color: transparent;
   box-shadow: none;
 }
-.pk-tabs-trigger::after {
+.pk-tabs-list.line .pk-tabs-trigger::after {
   content: "";
   position: absolute;
   inset-inline: 0;
@@ -54,7 +54,7 @@
   opacity: 0;
   transition: opacity .15s ease;
 }
-.pk-tabs.vertical .pk-tabs-trigger::after {
+.pk-tabs.vertical .pk-tabs-list.line .pk-tabs-trigger::after {
   inset-inline: auto;
   inset-block: 0;
   inset-inline-end: -.25rem;

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

@@ -1,8 +1,10 @@
 module PhlexKit
   class TabsContent < BaseComponent
-    def initialize(value:, active: false, **attrs)
+    # id: is a named kwarg (not left in **attrs) — see TabsTrigger.
+    def initialize(value:, active: false, id: nil, **attrs)
       @value = value
       @active = active
+      @id = id || "pk-tabs-panel-#{value}"
       @attrs = attrs
     end
     def view_template(&)
@@ -11,7 +13,7 @@ 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: "pk-tabs-panel-#{@value}", aria_labelledby: "pk-tabs-trigger-#{@value}", tabindex: "0", data: { phlex_kit__tabs_target: "content", value: @value } }, @attrs), &)
+      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), &)
     end
   end
 end

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

@@ -13,7 +13,10 @@ export default class extends Controller {
       this.listTarget.setAttribute("aria-orientation", "vertical")
     }
     if (!this.hasActiveValue && this.triggerTargets.length > 0) {
-      this.activeValue = this.triggerTargets[0].dataset.value
+      // Honor a server-marked TabsTrigger(active: true) before falling back
+      // to the first trigger — hydration must not contradict the markup.
+      const marked = this.triggerTargets.find((el) => el.dataset.state === "active")
+      this.activeValue = (marked || this.triggerTargets[0]).dataset.value
     } else {
       this.sync()
     }

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

@@ -2,14 +2,19 @@ module PhlexKit
   class TabsList < BaseComponent
     VARIANTS = { default: nil, line: "line" }.freeze
 
-    def initialize(variant: :default, **attrs)
+    def initialize(variant: :default, orientation: :horizontal, **attrs)
       @variant = variant.to_sym
+      @orientation = orientation.to_sym
       @attrs = attrs
     end
 
     def view_template(&)
       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), &)
+      base = { class: classes, role: "tablist", data: { phlex_kit__tabs_target: "list", action: "keydown->phlex-kit--tabs#keydown" } }
+      # Server-rendered so AT hears the right axis pre-JS / with JS off; the
+      # controller re-stamps it on connect from the root's vertical class.
+      base[:aria] = { orientation: "vertical" } if @orientation == :vertical
+      div(**mix(base, @attrs), &)
     end
   end
 end

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

@@ -1,9 +1,18 @@
 module PhlexKit
   class TabsTrigger < BaseComponent
-    def initialize(value:, as: :button, active: false, **attrs)
+    # id: is a named kwarg (not left in **attrs) because `mix` would *merge* a
+    # caller id with the deterministic one into an invalid two-token id,
+    # breaking the aria pairing pre-JS (and scopeIds' caller-id detection).
+    AS_TAGS = %i[button a].freeze
+
+    def initialize(value:, as: :button, active: false, id: nil, **attrs)
       @value = value
       @as = as.to_sym
+      unless AS_TAGS.include?(@as)
+        raise ArgumentError, "unknown TabsTrigger as: #{@as.inspect} (use one of #{AS_TAGS.join(", ")})"
+      end
       @active = active
+      @id = id || "pk-tabs-trigger-#{value}"
       @attrs = attrs
     end
     def view_template(&)
@@ -13,11 +22,14 @@ module PhlexKit
       # 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}",
+        class: "pk-tabs-trigger", role: "tab", id: @id,
         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 }
+        # 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" }
       }
       if @as == :a
         a(**mix(base, @attrs), &)

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

@@ -18,11 +18,25 @@ export default class extends Controller {
       if (!this.storedTheme()) this.applyTheme("system")
     }
     this._media.addEventListener("change", this._onMediaChange)
+    // Multiple toggles on one page (header + mobile menu): each instance
+    // observes :root[data-theme] so a change applied by ANY of them (or by
+    // host code) re-syncs every toggle's pressed state — without this the
+    // stale one showed the wrong state and its first click was eaten by the
+    // echo guard in apply().
+    this._rootObserver = new MutationObserver(() => this.syncPressed())
+    this._rootObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] })
     this.applyTheme(this.storedTheme() || "system")
   }
 
   disconnect() {
     this._media?.removeEventListener("change", this._onMediaChange)
+    this._rootObserver?.disconnect()
+  }
+
+  syncPressed() {
+    const theme = document.documentElement.getAttribute("data-theme") || "system"
+    const dark = theme === "system" ? this._media.matches : theme === "dark"
+    this.element.setAttribute("data-phlex-kit--toggle-pressed-value", dark ? "true" : "false")
   }
 
   apply(e) {

data/app/components/phlex_kit/toast/toast.css

@@ -7,7 +7,8 @@
 .pk-toast-region {
   position: fixed;
   z-index: 100;
-  padding: 1.5rem;
+  /* --pk-toast-offset is stamped inline by ToastRegion(offset:). */
+  padding: var(--pk-toast-offset, 1.5rem);
   pointer-events: none;
 }
 .pk-toast-region[data-position="top-left"] { top: 0; left: 0; }
@@ -40,7 +41,7 @@
   width: 356px;
   max-width: 100%;
   border: 1px solid var(--pk-border);
-  border-radius: 1rem;
+  border-radius: calc(var(--pk-radius) + 6px); /* 1rem at the default 0.625rem token */
   background: var(--pk-surface);
   color: var(--pk-text);
   padding: 1rem;

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

@@ -12,7 +12,10 @@ module PhlexKit
 
     def view_template
       data = { slot: "action" }
-      data[:action] = @on if @on
+      # Caller action first, then dismiss — client-spawned actions dismiss
+      # their toast after onClick (Sonner parity), so server-rendered ones
+      # must too.
+      data[:action] = [ @on, "click->phlex-kit--toast#dismiss" ].compact.join(" ") if @on
       button(**mix({ type: :button, class: "pk-toast-action", data: data }, @attrs)) { @label }
     end
   end

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

@@ -17,6 +17,7 @@ export default class extends Controller {
 
   connect() {
     this._timer = null
+    this._unmountTimer = null
     this._startedAt = 0
     this._remaining = this.durationValue
     this._paused = false
@@ -45,8 +46,11 @@ export default class extends Controller {
     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)
-    document.addEventListener("phlex-kit:toast:pause", this._onRegionPause)
-    document.addEventListener("phlex-kit:toast:resume", this._onRegionResume)
+    // Region-scoped: the toaster dispatches pause/resume on its own list, so
+    // another region's hover can't freeze (or resume) this toast's timer.
+    this._regionList = this.element.closest(".pk-toast-list") || document
+    this._regionList.addEventListener("phlex-kit:toast:pause", this._onRegionPause)
+    this._regionList.addEventListener("phlex-kit:toast:resume", this._onRegionResume)
 
     requestAnimationFrame(() => {
       this.element.dataset.state = "open"
@@ -66,6 +70,10 @@ export default class extends Controller {
 
   disconnect() {
     this._clearTimer()
+    // Don't let a pending 200ms unmount fire after teardown (e.g. into a
+    // Turbo-cached copy of the page).
+    if (this._unmountTimer) clearTimeout(this._unmountTimer)
+    this._unmountTimer = null
     this.element.removeEventListener("pointerdown", this._onPointerDown)
     this.element.removeEventListener("pointerenter", this._onPointerEnter)
     this.element.removeEventListener("pointerleave", this._onPointerLeave)
@@ -74,8 +82,8 @@ export default class extends Controller {
     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)
-    document.removeEventListener("phlex-kit:toast:pause", this._onRegionPause)
-    document.removeEventListener("phlex-kit:toast:resume", this._onRegionResume)
+    this._regionList?.removeEventListener("phlex-kit:toast:pause", this._onRegionPause)
+    this._regionList?.removeEventListener("phlex-kit:toast:resume", this._onRegionResume)
   }
 
   dismiss(e) {
@@ -89,7 +97,7 @@ export default class extends Controller {
     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)
+    this._unmountTimer = setTimeout(() => this.element.remove(), TIME_BEFORE_UNMOUNT)
   }
 
   // on_dismiss:/on_auto_close: name a global function (Sonner-style callback