phlex_kit 0.13.0 → 0.14.0

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|
+      %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);

data/app/components/phlex_kit/input_otp/input_otp_controller.js

@@ -90,12 +90,15 @@ export default class extends Controller {
       prev.dataset.otpValue = ""
       prev.focus()
       this.syncValue()
-    } else if (e.key === "ArrowLeft" && index > 0) {
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      // The slot row mirrors in RTL (all logical CSS), so the physical
+      // arrows flip: ArrowLeft moves toward the NEXT slot there. Runtime
+      // dir check — reliable after a dynamic flip, unlike :dir().
+      const rtl = getComputedStyle(this.element).direction === "rtl"
+      const delta = (e.key === "ArrowLeft") !== rtl ? -1 : 1
+      if (delta === -1 && index === 0) return
       e.preventDefault()
-      this.focusSlot(index - 1)
-    } else if (e.key === "ArrowRight") {
-      e.preventDefault()
-      this.focusSlot(index + 1)
+      this.focusSlot(index + delta)
     }
   }
 
@@ -113,7 +116,12 @@ export default class extends Controller {
   // (shared by paste and autofill), then park focus after the last filled one.
   fillFrom(slot, text) {
     const chars = text.split("")
-    const start = this.slotTargets.indexOf(slot)
+    // A full-length (or longer) code is distributed from the FIRST slot no
+    // matter which one is focused — pasting a complete code into a middle
+    // slot otherwise silently truncated it (only the slots from focus onward
+    // got filled) and merged the run with whatever digits sat before it.
+    // A shorter (partial) paste still fills from the focused slot.
+    const start = chars.length >= this.slotTargets.length ? 0 : this.slotTargets.indexOf(slot)
     this.slotTargets.slice(start).forEach((s, i) => { if (chars[i] != null) { s.value = chars[i]; s.dataset.otpValue = chars[i] } })
     this.focusSlot(Math.min(start + chars.length, this.slotTargets.length - 1))
     this.syncValue()

data/app/components/phlex_kit/input_otp/input_otp_slot.rb

@@ -6,12 +6,13 @@ module PhlexKit
     end
 
     def view_template
-      input(**mix({
-        type: :text,
-        inputmode: "numeric",
-        autocomplete: "one-time-code",
-        maxlength: "1",
-        class: "pk-input-otp-slot",
+      base = { type: :text, class: "pk-input-otp-slot" }
+      # Defaults only when the caller didn't supply their own — `mix` fuses
+      # (e.g. inputmode: "text" for alphanumeric codes).
+      base[:inputmode] = "numeric" unless attr_set?(:inputmode)
+      base[:autocomplete] = "one-time-code" unless attr_set?(:autocomplete)
+      base[:maxlength] = "1" unless attr_set?(:maxlength)
+      input(**mix(base, {
         data: {
           phlex_kit__input_otp_target: "slot",
           action: [

data/app/components/phlex_kit/item/item.css

@@ -16,6 +16,11 @@
   text-decoration: none;
 }
 a.pk-item:hover { background: var(--pk-surface-2); }
+a.pk-item:focus-visible {
+  outline: none;
+  border-color: var(--pk-ring);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
 .pk-item.outline { border-color: var(--pk-border); }
 .pk-item.muted { background: color-mix(in oklab, var(--pk-surface-2) 50%, transparent); }
 .pk-item.xs { gap: .5rem; padding: .5rem .625rem; }
@@ -62,8 +67,11 @@ a.pk-item:hover { background: var(--pk-surface-2); }
   font-size: .875rem;
   line-height: 1.5;
   text-align: start;
+  /* shadcn's ItemDescription line-clamps to 2 lines (line-clamp-2). */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
   overflow: hidden;
-  text-overflow: ellipsis;
 }
 .pk-item.xs .pk-item-description { font-size: .75rem; }
 .pk-item-actions { display: flex; align-items: center; gap: .5rem; flex: none; }

data/app/components/phlex_kit/item/item_separator.rb

@@ -6,7 +6,7 @@ module PhlexKit
     def view_template
       # Purely decorative — aria-hidden only (role="separator" would
       # contradict aria-hidden and confuse AT).
-      div(**mix({ class: "pk-item-separator", aria: { hidden: true } }, @attrs))
+      div(**mix({ class: "pk-item-separator", aria: { hidden: "true" } }, @attrs))
     end
   end
 end

data/app/components/phlex_kit/label/label.css

@@ -9,4 +9,9 @@
   line-height: 1;
   user-select: none;
 }
-.pk-label:has(+ :disabled), .pk-label:has(:disabled), :disabled + .pk-label { cursor: not-allowed; opacity: .5; }
+/* The wrapper arms cover controls whose root is a <label> around a nested
+   input (e.g. Switch's <label class="pk-switch">) — scoped to label so an
+   unrelated container with a disabled control somewhere inside can't dim a
+   neighboring Label. */
+.pk-label:has(+ :disabled), .pk-label:has(:disabled), :disabled + .pk-label,
+.pk-label:has(+ label:has(:disabled)), label:has(:disabled) + .pk-label { cursor: not-allowed; opacity: .5; }

data/app/components/phlex_kit/menubar/menubar.rb

@@ -11,9 +11,8 @@ module PhlexKit
     end
 
     def view_template(&)
-      div(**mix({
+      base = {
         class: "pk-menubar",
-        role: "menubar",
         data: {
           controller: "phlex-kit--menubar",
           # focusout: tabbing out of the bar closes the open [popover=manual]
@@ -22,7 +21,10 @@ module PhlexKit
           # NOT bound by navigation_menu.rb — nav menus are non-modal).
           action: "mousedown@window->phlex-kit--menubar#onMousedownOutside click@window->phlex-kit--menubar#onClickOutside keydown->phlex-kit--menubar#onKeydown focusout->phlex-kit--menubar#onFocusout"
         }
-      }, @attrs), &)
+      }
+      # Default only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "menubar" unless attr_set?(:role)
+      div(**mix(base, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/menubar/menubar_checkbox_item.rb

@@ -11,12 +11,12 @@ module PhlexKit
     end
 
     def view_template(&block)
-      label(**mix({
-        class: "pk-menubar-item pk-menubar-checkbox-item",
-        role: "menuitemcheckbox",
-        tabindex: "-1",
-        aria: { checked: @checked ? "true" : "false" }
-      }, @attrs)) do
+      base = { class: "pk-menubar-item pk-menubar-checkbox-item" }
+      # 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-menubar-item-input", name: @name, value: @value, checked: @checked,
               tabindex: "-1", data: { action: "change->phlex-kit--menubar#syncChecked" })
         span(class: "pk-menubar-item-indicator", aria: { hidden: "true" }) do

data/app/components/phlex_kit/menubar/menubar_content.rb

@@ -9,7 +9,11 @@ module PhlexKit
     end
 
     def view_template(&)
-      div(**mix({ id: @id, class: "pk-menubar-content", popover: "manual", role: "menu" }, @attrs), &)
+      base = { id: @id, class: "pk-menubar-content" }
+      # 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)
+      div(**mix(base, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/menubar/menubar_controller.js

@@ -19,7 +19,17 @@ let uid = 0
 // 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. Only menubar arms this; navigation_menu (non-modal)
+  // never does, so nav-menu outside clicks still pass through.
+  ev.preventDefault()
+  ev.stopPropagation()
+}
 function armSwallowClick() {
   window.addEventListener("click", swallowClick, { once: true, capture: true })
 }

data/app/components/phlex_kit/menubar/menubar_group.rb

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

@@ -18,12 +18,13 @@ module PhlexKit
 
     def view_template(&block)
       base = {
-        role: "menuitem",
-        tabindex: "-1",
         class: [ "pk-menubar-item", fetch_option(VARIANTS, @variant, :variant), ("inset" if @inset) ].compact.join(" "),
         data: @disabled ? { disabled: "true" } : { action: "click->phlex-kit--menubar#close" }
       }
-      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)
       # No default href: "#" would make Enter/click navigate (hash change +
       # scroll-to-top). tabindex="-1" keeps the row programmatically focusable.
       base[:href] = @href unless @href.nil? || @as == :div || @disabled

data/app/components/phlex_kit/menubar/menubar_menu.rb

@@ -3,10 +3,13 @@ module PhlexKit
   class MenubarMenu < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
+      base = { class: "pk-menubar-menu", data: { phlex_kit__menubar_target: "menu" } }
       # role="none": role="menubar" only allows menuitem children in the
       # accessibility tree — this layout wrapper must be presentational so
       # the tree flattens to menubar > menuitem (axe: required-children).
-      div(**mix({ class: "pk-menubar-menu", role: "none", data: { phlex_kit__menubar_target: "menu" } }, @attrs), &)
+      # Default only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "none" unless attr_set?(:role)
+      div(**mix(base, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/menubar/menubar_radio_group.rb

@@ -6,7 +6,10 @@ module PhlexKit
   class MenubarRadioGroup < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      div(**mix({ class: "pk-menubar-group", role: "group" }, @attrs), &)
+      base = { class: "pk-menubar-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/menubar/menubar_radio_item.rb

@@ -11,12 +11,12 @@ module PhlexKit
     end
 
     def view_template(&block)
-      label(**mix({
-        class: "pk-menubar-item pk-menubar-radio-item",
-        role: "menuitemradio",
-        tabindex: "-1",
-        aria: { checked: @checked ? "true" : "false" }
-      }, @attrs)) do
+      base = { class: "pk-menubar-item pk-menubar-radio-item" }
+      # 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-menubar-item-input", name: @name, value: @value, checked: @checked,
               tabindex: "-1", data: { action: "change->phlex-kit--menubar#syncChecked" })
         span(class: "pk-menubar-item-indicator", aria: { hidden: "true" }) do

data/app/components/phlex_kit/menubar/menubar_separator.rb

@@ -2,6 +2,11 @@ module PhlexKit
   # See menubar.rb.
   class MenubarSeparator < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
-    def view_template = div(**mix({ class: "pk-menubar-separator", role: "separator" }, @attrs))
+    def view_template
+      base = { class: "pk-menubar-separator" }
+      # Default only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "separator" unless attr_set?(:role)
+      div(**mix(base, @attrs))
+    end
   end
 end

data/app/components/phlex_kit/menubar/menubar_sub_content.rb

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

data/app/components/phlex_kit/menubar/menubar_sub_trigger.rb

@@ -3,17 +3,18 @@ module PhlexKit
   class MenubarSubTrigger < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&block)
-      div(**mix({
-        class: "pk-menubar-item pk-menubar-sub-trigger",
-        role: "menuitem",
-        # -1: the roving focus reaches it via arrows (focus-within opens the
-        # sub); tabindex 0 made it a stray tab stop inside the open panel.
-        tabindex: "-1",
-        # expanded starts false; the sub is revealed by CSS (:hover /
-        # :focus-within), so MenubarSub's syncSub actions mirror that state
-        # onto this attribute.
-        aria: { haspopup: "menu", expanded: "false" }
-      }, @attrs)) do
+      base = { class: "pk-menubar-item pk-menubar-sub-trigger" }
+      # Defaults only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "menuitem" unless attr_set?(:role)
+      # -1: the roving focus reaches it via arrows (focus-within opens the
+      # sub); tabindex 0 made it a stray tab stop inside the open panel.
+      base[:tabindex] = "-1" unless attr_set?(:tabindex)
+      base[:"aria-haspopup"] = "menu" unless aria_key_set?(:haspopup)
+      # expanded starts false; the sub is revealed by CSS (:hover /
+      # :focus-within), so MenubarSub's syncSub actions mirror that state
+      # onto this attribute.
+      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-menubar-sub-chevron")
       end

data/app/components/phlex_kit/menubar/menubar_trigger.rb

@@ -3,13 +3,16 @@ module PhlexKit
   class MenubarTrigger < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      button(**mix({
+      base = {
         type: :button,
         class: "pk-menubar-trigger",
-        role: "menuitem",
-        aria: { haspopup: "menu", expanded: "false" },
         data: { action: "click->phlex-kit--menubar#toggle mouseenter->phlex-kit--menubar#switch" }
-      }, @attrs), &)
+      }
+      # Defaults only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "menuitem" unless attr_set?(:role)
+      base[:"aria-haspopup"] = "menu" unless aria_key_set?(:haspopup)
+      base[:"aria-expanded"] = "false" unless aria_key_set?(:expanded)
+      button(**mix(base, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/message_scroller/message_scroller_controller.js

@@ -30,6 +30,11 @@ export default class extends Controller {
   };
 
   connect() {
+    // connect() re-derives reflected state: a Turbo snapshot serializes a
+    // mid-flight data-autoscrolling marker; no programmatic scroll is in
+    // flight on a fresh connect.
+    this.element.removeAttribute("data-autoscrolling");
+    if (this.hasViewportTarget) this.viewportTarget.removeAttribute("data-autoscrolling");
     // Reader is considered "following" the live edge until they move away.
     this.following = true;
     // True only while a programmatic scroll is in flight, so reader-intent

data/app/components/phlex_kit/pagination/pagination.css

@@ -10,3 +10,7 @@
 .pk-button.pk-pagination-next { padding-inline-end: .375rem; }
 .pk-pagination-label { display: none; }
 @media (min-width: 640px) { .pk-pagination-label { display: block; } }
+
+/* RTL: Previous/Next chevrons follow the reading direction. */
+[dir="rtl"] .pk-pagination-previous svg,
+[dir="rtl"] .pk-pagination-next svg { transform: scaleX(-1); }

data/app/components/phlex_kit/radio_button/radio_button.rb

@@ -7,7 +7,7 @@ module PhlexKit
 
     def view_template
       input(**mix({
-        type: "radio",
+        type: :radio,
         class: "pk-radio",
         data: {
           phlex_kit__form_field_target: "input",