phlex_kit 0.13.0 → 0.14.0

data/app/components/phlex_kit/checkbox/checkbox.rb

@@ -24,8 +24,12 @@ module PhlexKit
       if @include_hidden && @attrs[:name] && !@attrs[:name].to_s.end_with?("[]")
         # Disabled in lockstep with the checkbox (Rails' check_box idiom) —
         # a disabled checkbox must not still post its unchecked value.
+        # form: rides along too (Rails' check_box slices name/disabled/form
+        # onto the hidden field) — a form-attributed checkbox outside its
+        # <form> must post the unchecked value to the same form.
         input(type: "hidden", name: @attrs[:name], value: @unchecked_value,
-          disabled: @attrs[:disabled] ? true : nil)
+          disabled: @attrs[:disabled] ? true : nil,
+          form: @attrs[:form] || @attrs["form"])
       end
       input(**mix({
         type: :checkbox,

data/app/components/phlex_kit/clipboard/clipboard.rb

@@ -13,6 +13,13 @@ module PhlexKit
         div(&block)
         render PhlexKit::ClipboardPopover.new(type: :success) { @success }
         render PhlexKit::ClipboardPopover.new(type: :error) { @error }
+        # A persistent (never display:none) sr-only live region: the visual
+        # popovers are shown by removing display:none, which re-inserts them
+        # into the a11y tree with pre-existing content — a change AT does not
+        # announce. This region stays in the tree; the controller writes the
+        # confirmation text into it on copy, and THAT mutation announces.
+        div(class: "pk-sr-only", role: "status", aria: { live: "polite" },
+            data: { phlex_kit__clipboard_target: "liveRegion" })
       end
     end
   end

data/app/components/phlex_kit/clipboard/clipboard_controller.js

@@ -4,7 +4,7 @@ import { Controller } from "@hotwired/stimulus"
 // flashes a success/error popover (CSS-positioned, no @floating-ui). Ported from ruby_ui.
 export default class extends Controller {
   // No "trigger" target: the click->#copy action alone wires the trigger.
-  static targets = ["source", "successPopover", "errorPopover"]
+  static targets = ["source", "successPopover", "errorPopover", "liveRegion"]
 
   connect() {
     // Turbo snapshots at turbo:before-cache, BEFORE disconnect — hide the
@@ -49,6 +49,17 @@ export default class extends Controller {
   show(target) {
     this.hideAll()
     target.classList.remove("pk-hidden")
+    // Announce via the persistent live region (not the visual popover, which
+    // display:none keeps out of the a11y tree). Clear then re-assert on the
+    // next frame so an identical consecutive message still reads as a content
+    // change — aria-live announces changes, not the current state.
+    if (this.hasLiveRegionTarget) {
+      const message = target.textContent.trim()
+      this.liveRegionTarget.textContent = ""
+      requestAnimationFrame(() => {
+        if (this.hasLiveRegionTarget) this.liveRegionTarget.textContent = message
+      })
+    }
     clearTimeout(this.timer)
     this.timer = setTimeout(() => target.classList.add("pk-hidden"), 1500)
   }

data/app/components/phlex_kit/clipboard/clipboard_popover.rb

@@ -6,9 +6,11 @@ module PhlexKit
       @attrs = attrs
     end
     def view_template(&block)
-      # role="status": the shown/hidden confirmation is a live region, so
-      # screen readers announce "Copied!" instead of a silent visual flash.
-      div(class: "pk-clipboard-popover pk-hidden", role: "status", data: { phlex_kit__clipboard_target: fetch_option(TARGETS, @type, :target) }) do
+      # Visual-only now (aria-hidden): the announcement rides Clipboard's
+      # persistent sr-only role="status" live region — toggling display:none
+      # on this element never announced, since AT ignores content that was
+      # already present when a region re-enters the tree.
+      div(class: "pk-clipboard-popover pk-hidden", aria: { hidden: "true" }, data: { phlex_kit__clipboard_target: fetch_option(TARGETS, @type, :target) }) do
         div(**mix({ class: "pk-clipboard-popover-inner" }, @attrs), &block)
       end
     end

data/app/components/phlex_kit/combobox/combobox.rb

@@ -28,7 +28,7 @@ module PhlexKit
           controller: "phlex-kit--combobox",
           phlex_kit__combobox_term_value: @term,
           phlex_kit__combobox_auto_highlight_value: (@auto_highlight ? "true" : nil),
-          action: "turbo:morph@window->phlex-kit--combobox#updateTriggerContent click@window->phlex-kit--combobox#onClickOutside"
+          action: "turbo:morph@window->phlex-kit--combobox#updateTriggerContent click@window->phlex-kit--combobox#onClickOutside focusout->phlex-kit--combobox#onFocusout"
         }
       }, @attrs)) do
         live_region

data/app/components/phlex_kit/combobox/combobox_clear_button.rb

@@ -9,15 +9,17 @@ module PhlexKit
     end
 
     def view_template
-      button(**mix({
+      base = {
         type: :button,
         class: "pk-combobox-clear-button pk-hidden",
-        aria: { label: "Clear selection" },
         data: {
           phlex_kit__combobox_target: "clearButton",
           action: "phlex-kit--combobox#clearAll"
         }
-      }, @attrs)) do
+      }
+      # Default only when the caller didn't supply their own — `mix` fuses.
+      base[:aria] = { label: "Clear selection" } unless aria_labelled?
+      button(**mix(base, @attrs)) do
         render Icon.new(:x, size: 24)
       end
     end

data/app/components/phlex_kit/combobox/combobox_controller.js

@@ -42,6 +42,10 @@ export default class extends Controller {
     // itemTargetConnected uses must be initialized here.
     this.itemIdCounter = 0
     this.refocusing = false
+    // The query the list is currently filtered by. Initialized to "" so a
+    // caret/modifier keyup on an empty, unfiltered field reads as unchanged
+    // and filterItems skips re-running (which would wipe the highlight).
+    this._lastFilter = ""
   }
 
   connect() {
@@ -109,16 +113,20 @@ export default class extends Controller {
   }
 
   inputChanged(e) {
+    // Uncheck "select all" BEFORE updateTriggerContent: syncAriaSelected reads
+    // the toggle-all checkbox to set its row's aria-selected, so syncing first
+    // left the row marked aria-selected="true" while its checkbox showed
+    // unchecked.
+    if (this.hasToggleAllTarget && !e.target.checked) {
+      this.toggleAllTarget.checked = false
+    }
+
     this.updateTriggerContent()
 
     if (e.target.type == "radio") {
       this.closePopover()
     }
 
-    if (this.hasToggleAllTarget && !e.target.checked) {
-      this.toggleAllTarget.checked = false
-    }
-
     // Selecting from a chip trigger consumes the query: clear it and reshow
     // the full list for the next pick.
     if (this.hasBadgeInputTarget && this.badgeInputTarget.value !== "") {
@@ -336,6 +344,15 @@ export default class extends Controller {
     if (this.hasPopoverTarget && this.popoverTarget.matches(":popover-open")) this.popoverTarget.hidePopover()
     this.updateTriggerContent() // reflect the selection into an input trigger
 
+    // Reset the filter so a REOPEN shows the full list, not the last query's
+    // leftover pk-hidden classes. The input trigger keeps showing the
+    // selection label (updateTriggerContent, above) but that's display-only —
+    // the active query is empty until the user types again; an in-popover or
+    // badge search field is cleared to match.
+    if (this.hasSearchInputTarget) this.searchInputTarget.value = ""
+    if (this.hasBadgeInputTarget) this.badgeInputTarget.value = ""
+    this.applyFilter("")
+
     if (focusWasInside) {
       const field = this.filterField()
       // Input/badge layouts: back to the filter field (it lives outside the
@@ -350,6 +367,18 @@ export default class extends Controller {
     }
   }
 
+  // APG (combobox): Tab out of an open combobox closes the popup —
+  // dropdown_menu's onFocusout pattern. relatedTarget is null when the
+  // window itself blurs; leave the popup alone then. closePopover's
+  // focus-restore is a no-op here (focus has already left the popover, so
+  // focusWasInside is false — the user's Tab target keeps focus).
+  onFocusout(event) {
+    if (!this.isOpen()) return
+    const to = event.relatedTarget
+    if (!to || this.element.contains(to)) return
+    this.closePopover()
+  }
+
   onClickOutside(event) {
     if (!this.isOpen()) return
     if (this.element.contains(event.target)) return
@@ -380,7 +409,25 @@ export default class extends Controller {
     const field = (e.target instanceof HTMLInputElement) ? e.target : this.filterField()
     if (!field) return
 
-    this.applyFilter(field.value.toLowerCase())
+    const term = field.value.toLowerCase()
+    // Only re-filter when the query text actually changed. filterItems runs on
+    // every keyup, so caret/modifier keys the exclusion list above misses
+    // (ArrowLeft/Right/Home/End, releasing Shift) would otherwise re-run
+    // applyFilter on the unchanged query and wipe the keyboard highlight
+    // (selectedItemIndex, aria-current, aria-activedescendant).
+    if (term === this._lastFilter) return
+
+    // Typing into a CLOSED input/badge trigger must reveal the results — the
+    // filtering is otherwise invisible (only click/focusin/Arrow keys opened
+    // it). Open without openPopover()'s field.select(), which would select the
+    // just-typed text so the next keystroke replaced it. The button layout's
+    // search field lives inside the popover, so it can't be typed while closed.
+    if (!this.isOpen() && term && (this.hasInputTriggerTarget || this.hasBadgeInputTarget)) {
+      this.setExpanded(true)
+      this.popoverTarget.showPopover()
+    }
+
+    this.applyFilter(term)
   }
 
   // Strips combining diacritical marks after an NFD decomposition, so "é"
@@ -390,6 +437,10 @@ export default class extends Controller {
   }
 
   applyFilter(filterTerm) {
+    // The query the list is currently filtered by — filterItems reads this to
+    // skip re-filtering (and re-wiping the highlight) on caret/modifier keys.
+    this._lastFilter = filterTerm
+
     if (this.hasToggleAllTarget) {
       if (filterTerm) this.toggleAllTarget.parentElement.classList.add("pk-hidden")
       else this.toggleAllTarget.parentElement.classList.remove("pk-hidden")

data/app/components/phlex_kit/combobox/combobox_item.rb

@@ -11,12 +11,15 @@ module PhlexKit
     end
 
     def view_template(&)
-      label(**mix({
+      base = {
         class: "pk-combobox-item",
-        role: "option",
-        aria: { selected: "false" },
         data: { phlex_kit__combobox_target: "item" }
-      }, @attrs), &)
+      }
+      # Defaults only when the caller didn't supply their own — `mix` fuses
+      # (a server-rendered initially-selected option sets its own selected).
+      base[:role] = "option" unless attr_set?(:role)
+      base[:aria] = { selected: "false" } unless aria_key_set?(:selected)
+      label(**mix(base, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/command/command_controller.js

@@ -75,7 +75,15 @@ export default class extends Controller {
     // Only the cloned dialog overlay grabs focus on connect — an inline
     // palette connecting at page load must not steal it.
     if (this.isDialogClone()) this.inputTarget.focus();
-    this.toggleVisibility(this.emptyTargets, false);
+    // Re-derive item + empty-state visibility from the LIVE input value, not an
+    // unconditional hide: a Turbo cache restore of an inline palette can
+    // reconnect with an active no-match query still in the input — hiding the
+    // empty row then showed the query with neither items NOR a "No results".
+    if (this.inputTarget.value) {
+      this.filter({ target: this.inputTarget });
+    } else {
+      this.toggleVisibility(this.emptyTargets, false);
+    }
   }
 
   // The command-dialog controller clones its <template> content into <body>;

data/app/components/phlex_kit/command/command_dialog_content.rb

@@ -28,12 +28,16 @@ module PhlexKit
           action: "keydown->phlex-kit--command#trapFocus"
         }) do
           backdrop
-          div(**mix({
-            class: panel_classes,
-            role: "dialog",
-            aria: { modal: "true", label: @aria_label },
-            data: { state: "open" }
-          }, @attrs), &block)
+          panel_attrs = { class: panel_classes, data: { state: "open" } }
+          # Defaults only when the caller didn't supply their own — `mix`
+          # would fuse role="dialog x" / aria-modal="true false" (same guard
+          # as AlertDialogContent/SheetContent/DrawerContent, round 7).
+          panel_attrs[:role] = "dialog" unless attr_set?(:role)
+          aria = {}
+          aria[:modal] = "true" unless aria_key_set?(:modal)
+          aria[:label] = @aria_label unless aria_labelled?
+          panel_attrs[:aria] = aria unless aria.empty?
+          div(**mix(panel_attrs, @attrs), &block)
         end
       end
     end

data/app/components/phlex_kit/command/command_empty.rb

@@ -1,6 +1,8 @@
 module PhlexKit
-  # "No results" row — hidden by the controller until a filter matches nothing.
-  # See command.rb.
+  # "No results" row — revealed by the controller only when a filter matches
+  # nothing. Server-rendered with pk-hidden so an inline palette doesn't flash
+  # "No results" under its items before Stimulus connects, and doesn't show it
+  # permanently with JS disabled. See command.rb.
   class CommandEmpty < BaseComponent
     def initialize(**attrs)
       @attrs = attrs
@@ -8,7 +10,7 @@ module PhlexKit
 
     def view_template(&)
       div(**mix({
-        class: "pk-command-empty",
+        class: "pk-command-empty pk-hidden",
         role: "presentation",
         data: { phlex_kit__command_target: "empty" }
       }, @attrs), &)

data/app/components/phlex_kit/command/command_separator.rb

@@ -10,7 +10,7 @@ module PhlexKit
       div(**mix({
         class: "pk-command-separator",
         role: "separator",
-        aria: { hidden: true },
+        aria: { hidden: "true" },
         data: { phlex_kit__command_target: "separator" }
       }, @attrs))
     end

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

@@ -12,13 +12,15 @@ module PhlexKit
     end
 
     def view_template(&block)
-      label(**mix({
+      base = {
         class: "pk-context-menu-item pk-context-menu-checkbox-item",
-        role: "menuitemcheckbox",
-        tabindex: "-1",
-        aria: { checked: @checked ? "true" : "false" },
         data: { phlex_kit__context_menu_target: "menuItem" }
-      }, @attrs)) do
+      }
+      # Defaults only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "menuitemcheckbox" unless attr_set?(:role)
+      base[:tabindex] = "-1" unless attr_set?(:tabindex)
+      base[:"aria-checked"] = (@checked ? "true" : "false") unless aria_key_set?(:checked)
+      label(**mix(base, @attrs)) do
         input(type: :checkbox, class: "pk-context-menu-item-input", name: @name, value: @value, checked: @checked,
               tabindex: "-1", data: { action: "change->phlex-kit--context-menu#syncChecked" })
         span(class: "pk-context-menu-item-indicator", aria: { hidden: "true" }) do

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

@@ -2,7 +2,13 @@ module PhlexKit
   class ContextMenuContent < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      div(**mix({ class: "pk-context-menu-content", popover: "manual", role: "menu", tabindex: "-1", aria: { orientation: "vertical" }, data: { phlex_kit__context_menu_target: "content", state: "closed" } }, @attrs), &)
+      base = { class: "pk-context-menu-content", data: { phlex_kit__context_menu_target: "content", state: "closed" } }
+      # Defaults only when the caller didn't supply their own — `mix` fuses.
+      base[:popover] = "manual" unless attr_set?(:popover)
+      base[:role] = "menu" unless attr_set?(:role)
+      base[:tabindex] = "-1" unless attr_set?(:tabindex)
+      base[:aria] = { orientation: "vertical" } unless aria_key_set?(:orientation)
+      div(**mix(base, @attrs), &)
     end
   end
 end

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

@@ -15,7 +15,16 @@ import { Controller } from "@hotwired/stimulus"
 // dedupes re-arming with the same fn. If the gesture's click never fires
 // (e.g. suppressed after a selection drag) the armed swallow eats the next
 // one — rare enough to accept.
-const swallowClick = (ev) => ev.preventDefault()
+const swallowClick = (ev) => {
+  // preventDefault alone suppresses only native default actions; the
+  // dismissing outside click would still fire addEventListener handlers on
+  // whatever sits under the pointer. stopPropagation (this listener is
+  // capture-phase on window, the outermost node, so it runs before any deeper
+  // handler) starves those too — the modal-menu contract is that an outside
+  // click ONLY dismisses.
+  ev.preventDefault()
+  ev.stopPropagation()
+}
 function armSwallowClick() {
   window.addEventListener("click", swallowClick, { once: true, capture: true })
 }
@@ -25,7 +34,13 @@ export default class extends Controller {
 
   connect() {
     this.onDoc = (e) => {
-      if (this.contentTarget.contains(e.target)) return
+      if (this.contentTarget.contains(e.target)) {
+        // A right-click ON the open menu must not pop the NATIVE context menu
+        // on top of it — native menus swallow their own contextmenu. Suppress
+        // it and leave the kit menu open (no reposition for an inside click).
+        if (e.type === "contextmenu") e.preventDefault()
+        return
+      }
       // The opening right-click bubbles to document AFTER open() adds this
       // listener — a contextmenu inside our own element must not close what
       // it just opened (it repositions instead). A contextmenu anywhere

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

@@ -4,7 +4,10 @@ module PhlexKit
   class ContextMenuGroup < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      div(**mix({ class: "pk-context-menu-group", role: "group" }, @attrs), &)
+      base = { class: "pk-context-menu-group" }
+      # Default only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "group" unless attr_set?(:role)
+      div(**mix(base, @attrs), &)
     end
   end
 end

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

@@ -18,11 +18,14 @@ module PhlexKit
 
     def view_template(&block)
       classes = [ "pk-context-menu-item", fetch_option(VARIANTS, @variant, :variant) ].compact.join(" ")
-      base = { href: @href, role: "menuitem", tabindex: "-1", class: classes,
+      base = { href: @href, class: classes,
                data: { action: ("click->phlex-kit--context-menu#close" unless @disabled),
                        phlex_kit__context_menu_target: "menuItem",
                        disabled: (@disabled ? "true" : nil) }.compact }
-      base[:aria] = { disabled: "true" } if @disabled
+      # Defaults only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "menuitem" unless attr_set?(:role)
+      base[:tabindex] = "-1" unless attr_set?(:tabindex)
+      base[:"aria-disabled"] = "true" if @disabled && !aria_key_set?(:disabled)
       a(**mix(base, @attrs)) do
         if @checked
           span(class: "pk-context-menu-check") do

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

@@ -4,7 +4,10 @@ module PhlexKit
   class ContextMenuRadioGroup < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      div(**mix({ class: "pk-context-menu-group", role: "radiogroup" }, @attrs), &)
+      base = { class: "pk-context-menu-group" }
+      # Default only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "radiogroup" unless attr_set?(:role)
+      div(**mix(base, @attrs), &)
     end
   end
 end

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

@@ -11,13 +11,15 @@ module PhlexKit
     end
 
     def view_template(&block)
-      label(**mix({
+      base = {
         class: "pk-context-menu-item pk-context-menu-radio-item",
-        role: "menuitemradio",
-        tabindex: "-1",
-        aria: { checked: @checked ? "true" : "false" },
         data: { phlex_kit__context_menu_target: "menuItem" }
-      }, @attrs)) do
+      }
+      # Defaults only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "menuitemradio" unless attr_set?(:role)
+      base[:tabindex] = "-1" unless attr_set?(:tabindex)
+      base[:"aria-checked"] = (@checked ? "true" : "false") unless aria_key_set?(:checked)
+      label(**mix(base, @attrs)) do
         input(type: :radio, class: "pk-context-menu-item-input", name: @name, value: @value, checked: @checked,
               tabindex: "-1", data: { action: "change->phlex-kit--context-menu#syncChecked" })
         span(class: "pk-context-menu-item-indicator", aria: { hidden: "true" }) do

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

@@ -2,7 +2,12 @@ module PhlexKit
   class ContextMenuSeparator < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template
-      div(**mix({ role: "separator", class: "pk-context-menu-separator", aria: { orientation: "horizontal" } }, @attrs))
+      base = { class: "pk-context-menu-separator" }
+      # Defaults only when the caller didn't supply their own — `mix` fuses,
+      # and aria_key_set? covers the aria: hash spelling the flat key missed.
+      base[:role] = "separator" unless attr_set?(:role)
+      base[:"aria-orientation"] = "horizontal" unless aria_key_set?(:orientation)
+      div(**mix(base, @attrs))
     end
   end
 end

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

@@ -4,7 +4,10 @@ module PhlexKit
   class ContextMenuSubContent < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      div(**mix({ class: "pk-context-menu-sub-content", role: "menu" }, @attrs)) do
+      base = { class: "pk-context-menu-sub-content" }
+      # Default only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "menu" unless attr_set?(:role)
+      div(**mix(base, @attrs)) do
         div(class: "pk-context-menu-sub-viewport", &)
       end
     end

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

@@ -3,17 +3,20 @@ module PhlexKit
   class ContextMenuSubTrigger < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&block)
-      div(**mix({
+      base = {
         class: "pk-context-menu-item pk-context-menu-sub-trigger",
-        role: "menuitem",
-        # -1: roving focus reaches it via arrows (focus-within opens the sub);
-        # tabindex 0 made it a stray tab stop inside the menu.
-        tabindex: "-1",
-        # expanded starts false and is mirrored live by the controller's
-        # syncSub (the reveal itself is pure CSS :hover/:focus-within).
-        aria: { haspopup: "menu", expanded: "false" },
         data: { phlex_kit__context_menu_target: "menuItem" }
-      }, @attrs)) do
+      }
+      # Defaults only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "menuitem" unless attr_set?(:role)
+      # -1: roving focus reaches it via arrows (focus-within opens the sub);
+      # tabindex 0 made it a stray tab stop inside the menu.
+      base[:tabindex] = "-1" unless attr_set?(:tabindex)
+      base[:"aria-haspopup"] = "menu" unless aria_key_set?(:haspopup)
+      # expanded starts false and is mirrored live by the controller's
+      # syncSub (the reveal itself is pure CSS :hover/:focus-within).
+      base[:"aria-expanded"] = "false" unless aria_key_set?(:expanded)
+      div(**mix(base, @attrs)) do
         block&.call
         render Icon.new(:chevron_right, size: nil, class: "pk-context-menu-sub-chevron")
       end

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

@@ -98,3 +98,7 @@
   opacity: .5;
   pointer-events: none;
 }
+
+/* RTL: the collapsed expand-toggle chevron points along the reading
+   direction; the expanded state's rotate(90deg) points down either way. */
+[dir="rtl"] .pk-data-table-expand-toggle:not([aria-expanded="true"]) svg { transform: scaleX(-1); }

data/app/components/phlex_kit/data_table/data_table_search_controller.js

@@ -39,7 +39,13 @@ export default class extends Controller {
     this.element.requestSubmit();
   }
 
-  captureBeforeRender() {
+  captureBeforeRender(event) {
+    // Only capture for a render of the frame THIS form drives — the listener
+    // is document-wide, so an unrelated frame rendering elsewhere while the
+    // search input is focused would otherwise write a PENDING_FOCUS entry no
+    // matching swap ever consumes, stealing focus on a later restore.
+    const frame = event?.target;
+    if (!frame || !this.rendersInto(frame)) return;
     const input = this.input();
     if (!input || document.activeElement !== input) return;
     PENDING_FOCUS.set(this.key(), {
@@ -48,6 +54,14 @@ export default class extends Controller {
     });
   }
 
+  // True when `frame` is the <turbo-frame> this form's submission renders: the
+  // frame named by the form's data-turbo-frame, else the frame the form lives
+  // inside (Turbo's default target).
+  rendersInto(frame) {
+    const targeted = this.element.dataset.turboFrame;
+    return targeted ? frame.id === targeted : frame.contains(this.element);
+  }
+
   restoreIfPending() {
     const state = PENDING_FOCUS.get(this.key());
     if (!state) return;

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

@@ -2,18 +2,22 @@ module PhlexKit
   # Header checkbox selecting every DataTableRowCheckbox on the page (the
   # controller sets indeterminate for partial selections). See data_table.rb.
   class DataTableSelectAllCheckbox < BaseComponent
-    def initialize(**attrs)
+    def initialize(label: "Select all", **attrs)
+      @label = label
       @attrs = attrs
     end
 
     def view_template
-      render Checkbox.new(**mix({
-        aria: { label: "Select all" },
+      base = {
         data: {
           phlex_kit__data_table_target: "selectAll",
           action: "change->phlex-kit--data-table#toggleAll"
         }
-      }, @attrs))
+      }
+      # label: kwarg (mirrors DataTableRowCheckbox); default only when the
+      # caller didn't supply their own accessible name — `mix` fuses.
+      base[:aria] = { label: @label } unless aria_labelled?
+      render Checkbox.new(**mix(base, @attrs))
     end
   end
 end

data/app/components/phlex_kit/drawer/drawer.css

@@ -20,6 +20,10 @@
   background: var(--pk-surface);
   color: var(--pk-text);
   font-size: .875rem;
+  /* Content taller than the panel's max-height must scroll, not squash/spill
+     (sheet.css does the same on .pk-sheet-content); overflow also keeps the
+     rounded corners clipping. */
+  overflow: auto;
 }
 /* bottom (default) */
 .pk-drawer.bottom {

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

@@ -12,13 +12,15 @@ module PhlexKit
     end
 
     def view_template(&block)
-      label(**mix({
+      base = {
         class: "pk-dropdown-menu-item pk-dropdown-menu-checkbox-item",
-        role: "menuitemcheckbox",
-        tabindex: "-1",
-        aria: { checked: @checked ? "true" : "false" },
         data: { phlex_kit__dropdown_menu_target: "menuItem" }
-      }, @attrs)) do
+      }
+      # Defaults only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "menuitemcheckbox" unless attr_set?(:role)
+      base[:tabindex] = "-1" unless attr_set?(:tabindex)
+      base[:"aria-checked"] = (@checked ? "true" : "false") unless aria_key_set?(:checked)
+      label(**mix(base, @attrs)) do
         input(type: :checkbox, class: "pk-dropdown-menu-item-input", name: @name, value: @value, checked: @checked,
               tabindex: "-1", data: { action: "change->phlex-kit--dropdown-menu#syncChecked" })
         span(class: "pk-dropdown-menu-item-indicator", aria: { hidden: "true" }) { check_icon }

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

@@ -14,9 +14,12 @@ module PhlexKit
 
     def view_template(&block)
       div(class: wrapper_classes, popover: "manual", data: { phlex_kit__dropdown_menu_target: "content" }) do
+        base = { class: "pk-dropdown-menu-viewport" }
         # role="menu" on the items' direct parent — the rows render
         # role="menuitem", which is invalid ARIA without a menu ancestor.
-        div(**mix({ class: "pk-dropdown-menu-viewport", role: "menu" }, @attrs), &block)
+        # Default only when the caller didn't supply their own — `mix` fuses.
+        base[:role] = "menu" unless attr_set?(:role)
+        div(**mix(base, @attrs), &block)
       end
     end
 

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

@@ -17,7 +17,16 @@ import { Controller } from "@hotwired/stimulus";
 // dedupes re-arming with the same fn. If the gesture's click never fires
 // (e.g. suppressed after a selection drag) the armed swallow eats the next
 // one — rare enough to accept.
-const swallowClick = (ev) => ev.preventDefault();
+const swallowClick = (ev) => {
+  // preventDefault alone suppresses only native default actions; the
+  // dismissing outside click would still fire addEventListener handlers on
+  // whatever sits under the pointer. stopPropagation (this listener is
+  // capture-phase on window, the outermost node, so it runs before any deeper
+  // handler) starves those too — the modal-menu contract is that an outside
+  // click ONLY dismisses.
+  ev.preventDefault();
+  ev.stopPropagation();
+};
 function armSwallowClick() {
   window.addEventListener("click", swallowClick, { once: true, capture: true });
 }