phlex_kit 0.12.0 → 0.14.0

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_controller.js

@@ -66,7 +66,13 @@ export default class extends Controller {
     }
 
     if (this.hasSelectionSummaryTarget) {
-      this.selectionSummaryTarget.textContent = `${selected} of ${total} row(s) selected.`;
+      // The component stamps its (possibly localized) %{selected}/%{total}
+      // template as data-format; live updates interpolate the same string
+      // the server rendered.
+      const format = this.selectionSummaryTarget.dataset.format || "%{selected} of %{total} row(s) selected.";
+      this.selectionSummaryTarget.textContent = format
+        .replace("%{selected}", String(selected))
+        .replace("%{total}", String(total));
     }
 
     if (this.hasBulkActionsTarget) {

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/data_table/data_table_selection_summary.rb

@@ -1,9 +1,15 @@
 module PhlexKit
   # "N of M row(s) selected." line, kept current by the controller.
+  # `format:` localizes it — a template with %{selected} and %{total}
+  # placeholders, used for the server render AND stamped on the element so
+  # the controller's live updates interpolate the same string.
   # See data_table.rb.
   class DataTableSelectionSummary < BaseComponent
-    def initialize(total_on_page: 0, **attrs)
+    DEFAULT_FORMAT = "%{selected} of %{total} row(s) selected."
+
+    def initialize(total_on_page: 0, format: DEFAULT_FORMAT, **attrs)
       @total_on_page = total_on_page
+      @format = format
       @attrs = attrs
     end
 
@@ -11,9 +17,12 @@ module PhlexKit
       div(**mix({
         class: "pk-data-table-selection-summary",
         role: "status", # live region — selection changes are announced to AT
-        data: { phlex_kit__data_table_target: "selectionSummary" }
+        data: {
+          phlex_kit__data_table_target: "selectionSummary",
+          format: @format
+        }
       }, @attrs)) do
-        plain "0 of #{@total_on_page} row(s) selected."
+        plain Kernel.format(@format, selected: 0, total: @total_on_page)
       end
     end
   end

data/app/components/phlex_kit/date_picker/date_picker_controller.js

@@ -13,11 +13,9 @@ export default class extends Controller {
   onCalendarChange(e) {
     const { mode, rangeEnd } = e.detail
     if (mode === "multiple") return
-    // calendar_controller.js clears rangeEnd via `this.rangeEndValue = null`,
-    // which goes through Element#setAttribute — the DOM stringifies a null
-    // argument to the literal "null", so a genuinely-unset rangeEnd reads
-    // back as that string, not JS null/undefined/"".
-    if (mode === "range" && (!rangeEnd || rangeEnd === "null")) return
+    // calendar_controller.js clears rangeEnd by assigning undefined (Stimulus
+    // removes the attribute), so an unset rangeEnd reads back as null here.
+    if (mode === "range" && !rangeEnd) return
     this.popoverController()?.close()
   }
 

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/drawer/drawer_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
             div(class: "pk-drawer-handle", aria: { hidden: "true" })
             yield if block

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

@@ -20,7 +20,9 @@ module PhlexKit
           phlex_kit__dropdown_menu_open_value: @open,
           # focusout: tabbing (or otherwise moving real focus) out of the
           # menu closes the open [popover=manual] panel (menubar's pattern).
-          action: "click@window->phlex-kit--dropdown-menu#onClickOutside focusout->phlex-kit--dropdown-menu#onFocusout"
+          # mousedown@window arms the modal-menu click swallow before the
+          # gesture's focusout closes the panel (see the controller).
+          action: "mousedown@window->phlex-kit--dropdown-menu#onMousedownOutside click@window->phlex-kit--dropdown-menu#onClickOutside focusout->phlex-kit--dropdown-menu#onFocusout"
         }
       }, @attrs), &block)
     end

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

@@ -10,6 +10,27 @@ import { Controller } from "@hotwired/stimulus";
 // sub-rows are skipped via a visibility filter. Escape returns focus to the
 // trigger; Enter/Space activate the focused row (links, checkbox/radio
 // labels, and sub triggers alike).
+
+// One-shot capture listener swallowing the click an outside mousedown is
+// about to produce (see onMousedownOutside; same helper in menubar/context
+// menu — duplicated per controller by design). {once} self-removes; the DOM
+// 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) => {
+  // 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 });
+}
+
 export default class extends Controller {
   static targets = ["trigger", "content", "menuItem"];
   static values = { open: { type: Boolean, default: false } };
@@ -69,16 +90,23 @@ export default class extends Controller {
     this.subFrames.add(id);
   }
 
+  // Deliberate (matches Radix's modal dismiss): the dismissing outside
+  // click ONLY dismisses the menu — swallowed rather than also acting on
+  // whatever was under the pointer (e.g. navigating a link). Armed at
+  // MOUSEDOWN: for a focusable click target the same gesture's focusout
+  // closes the panel before the click fires, so a click-time swallow
+  // silently skipped those targets (audit round 8).
+  onMousedownOutside(event) {
+    if (!this.contentTarget.matches(":popover-open")) return;
+    if (this.element.contains(event.target)) return;
+    armSwallowClick();
+  }
+
   onClickOutside(event) {
     // Gate on the live :popover-open state, not the stored flag — a stale
     // flag is how a close on an already-closed panel becomes an open.
     if (!this.contentTarget.matches(":popover-open")) return;
     if (this.element.contains(event.target)) return;
-
-    // Deliberate (matches Radix's modal dismiss): the outside click ONLY
-    // dismisses the menu — it is swallowed rather than also acting on
-    // whatever was under the pointer (e.g. navigating a link).
-    event.preventDefault();
     this.close();
   }
 

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

@@ -5,7 +5,10 @@ module PhlexKit
   class DropdownMenuGroup < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      div(**mix({ class: "pk-dropdown-menu-group", role: "group" }, @attrs), &)
+      base = { class: "pk-dropdown-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/dropdown_menu/dropdown_menu_item.rb

@@ -13,11 +13,12 @@ module PhlexKit
 
     def view_template(&block)
       base = {
-        role: "menuitem",
-        tabindex: "-1",
         class: [ "pk-dropdown-menu-item", fetch_option(VARIANTS, @variant, :variant) ].compact.join(" "),
         data: { phlex_kit__dropdown_menu_target: "menuItem", action: "click->phlex-kit--dropdown-menu#close" }
       }
+      # 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[:href] = @href unless @as == :div
       send(@as, **mix(base, @attrs), &block)
     end

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

@@ -4,7 +4,10 @@ module PhlexKit
   class DropdownMenuRadioGroup < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      div(**mix({ class: "pk-dropdown-menu-group", role: "radiogroup" }, @attrs), &)
+      base = { class: "pk-dropdown-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/dropdown_menu/dropdown_menu_radio_item.rb

@@ -11,13 +11,15 @@ module PhlexKit
     end
 
     def view_template(&block)
-      label(**mix({
+      base = {
         class: "pk-dropdown-menu-item pk-dropdown-menu-radio-item",
-        role: "menuitemradio",
-        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] = "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-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" }) do

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

@@ -6,7 +6,12 @@ module PhlexKit
     end
 
     def view_template
-      div(**mix({ role: "separator", "aria-orientation": "horizontal", class: "pk-dropdown-menu-separator" }, @attrs))
+      base = { class: "pk-dropdown-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/dropdown_menu/dropdown_menu_sub_content.rb

@@ -4,7 +4,10 @@ module PhlexKit
   class DropdownMenuSubContent < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      div(**mix({ class: "pk-dropdown-menu-sub-content", role: "menu" }, @attrs)) do
+      base = { class: "pk-dropdown-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-dropdown-menu-viewport", &)
       end
     end

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

@@ -4,17 +4,20 @@ module PhlexKit
   class DropdownMenuSubTrigger < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&block)
-      div(**mix({
+      base = {
         class: "pk-dropdown-menu-item pk-dropdown-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__dropdown_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-dropdown-menu-sub-chevron")
       end

data/app/components/phlex_kit/empty/empty.rb

@@ -1,4 +1,5 @@
 module PhlexKit
+  # Empty-state container, ported from shadcn/ui's Empty.
   class Empty < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&) = div(**mix({ class: "pk-empty" }, @attrs), &)

data/app/components/phlex_kit/field/field.rb

@@ -29,7 +29,10 @@ module PhlexKit
       data = { slot: "field", orientation: fetch_option(ORIENTATIONS, @orientation, :orientation) }
       data[:invalid] = "true" if @invalid
       data[:disabled] = "true" if @disabled
-      div(**mix({ class: "pk-field", role: "group", data: data }, @attrs), &)
+      base = { class: "pk-field", data: data }
+      # 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/field/field_error.rb

@@ -13,7 +13,10 @@ module PhlexKit
     def view_template(&block)
       return if @errors.empty? && !block
 
-      div(**mix({ class: "pk-field-error", role: "alert", data: { slot: "field-error" } }, @attrs)) do
+      base = { class: "pk-field-error", data: { slot: "field-error" } }
+      # Default only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "alert" unless attr_set?(:role)
+      div(**mix(base, @attrs)) do
         if @errors.length == 1
           plain @errors.first
         elsif @errors.length > 1

data/app/components/phlex_kit/form_field/form_field_controller.js

@@ -49,11 +49,28 @@ export default class extends Controller {
     error.preventDefault();
 
     // preventDefault also cancels the browser's focus-first-invalid — restore
-    // it for the first invalid control of the submit pass (all invalid events
-    // fire in the same task, so the microtask reset scopes "first" correctly).
-    if (!this._focusedInvalid) {
-      this._focusedInvalid = true;
-      queueMicrotask(() => { this._focusedInvalid = false; });
+    // it for the FIRST invalid control of the submit pass. Coordinate across
+    // sibling FormField controllers via a flag on the shared form: invalid
+    // events fire in document order, so the first control to claim wins. A
+    // per-controller flag alone let each FormField focus its own control, so
+    // the LAST invalid field ended up focused, inverting native behavior. No
+    // shared JS util (kit rule) — the form element itself is the coordination
+    // point. The reset runs on a macrotask, NOT queueMicrotask: a microtask
+    // checkpoint can drain between two invalid events (the JS stack empties
+    // after each listener), clearing the flag mid-pass so the next field
+    // re-claims. setTimeout survives the whole synchronous validation pass and
+    // resets before the next submit. A control with no form (rare) falls back
+    // to the per-controller flag.
+    const form = error.target.form;
+    const alreadyClaimed = form ? form.dataset.pkInvalidFocused : this._focusedInvalid;
+    if (!alreadyClaimed) {
+      if (form) {
+        form.dataset.pkInvalidFocused = "1";
+        setTimeout(() => { delete form.dataset.pkInvalidFocused; }, 0);
+      } else {
+        this._focusedInvalid = true;
+        setTimeout(() => { this._focusedInvalid = false; }, 0);
+      }
       error.target.focus({ preventScroll: true });
       error.target.scrollIntoView({ block: "nearest" });
     }

data/app/components/phlex_kit/icon/icon.rb

@@ -23,9 +23,13 @@ module PhlexKit
       base = base_attrs(icon)
       # `mix` merges duplicate string attrs ("16 24") — drop a generated attr
       # whenever the caller supplies their own copy, so theirs wins.
-      %i[width height viewbox aria-hidden].each do |key|
-        base.delete(key) if @attrs.key?(key) || @attrs.key?(key.to_s)
+      %i[width height viewbox].each do |key|
+        base.delete(key) if attr_set?(key)
       end
+      # aria-hidden needs the aria-aware guard: the aria: hash and underscore
+      # spellings must also suppress the default (a caller-supplied
+      # accessible name must not be hidden from AT by our default).
+      base.delete(:"aria-hidden") if aria_key_set?(:hidden) || aria_labelled?
       svg(**mix(base, @attrs)) do |s|
         icon[:elements].each { |tag, attrs| s.public_send(tag, **attrs) }
       end

data/app/components/phlex_kit/input_group/input_group.css

@@ -34,7 +34,10 @@
   border-color: color-mix(in oklab, var(--pk-red) 50%, transparent);
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 40%, transparent);
 }
-.pk-input-group:has(:disabled) {
+/* Group-disabled presentation follows the CONTROL only (the direct-child
+   input/textarea/select) — a disabled addon button must not dim a group whose
+   input is still editable. */
+.pk-input-group:has(> input:disabled, > textarea:disabled, > select:disabled) {
   opacity: .5;
   background: color-mix(in oklab, var(--pk-input) 80%, transparent);
 }
@@ -97,14 +100,14 @@
 .pk-input-group-text svg { pointer-events: none; }
 
 :root[data-theme="light"] .pk-input-group { background: transparent; }
-:root[data-theme="light"] .pk-input-group:has(:disabled) { background: color-mix(in oklab, var(--pk-input) 50%, transparent); }
+:root[data-theme="light"] .pk-input-group:has(> input:disabled, > textarea:disabled, > select:disabled) { background: color-mix(in oklab, var(--pk-input) 50%, transparent); }
 :root[data-theme="light"] .pk-input-group:has([aria-invalid="true"]) {
   border-color: var(--pk-red);
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 20%, transparent);
 }
 @media (prefers-color-scheme: light) {
   :root[data-theme="system"] .pk-input-group { background: transparent; }
-  :root[data-theme="system"] .pk-input-group:has(:disabled) { background: color-mix(in oklab, var(--pk-input) 50%, transparent); }
+  :root[data-theme="system"] .pk-input-group:has(> input:disabled, > textarea:disabled, > select:disabled) { background: color-mix(in oklab, var(--pk-input) 50%, transparent); }
   :root[data-theme="system"] .pk-input-group:has([aria-invalid="true"]) {
     border-color: var(--pk-red);
     box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 20%, transparent);