phlex_kit 0.12.0 → 0.14.0

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/link/link.rb

@@ -36,11 +36,20 @@ module PhlexKit
     end
 
     def view_template(&block)
-      a(**mix({ href: @href, class: classes }, @attrs), &block)
+      base = { href: @href, class: classes }
+      # target="_blank" hands the new page a window.opener reference in older
+      # browsers (modern ones imply noopener) — default the safe rel unless
+      # the caller supplied their own (`mix` would fuse "noopener external").
+      base[:rel] = "noopener" if blank_target? && !attr_set?(:rel)
+      a(**mix(base, @attrs), &block)
     end
 
     private
 
+    def blank_target?
+      (@attrs[:target] || @attrs["target"]).to_s == "_blank"
+    end
+
     def classes
       [ "pk-button", fetch_option(VARIANTS, @variant, :variant), fetch_option(SIZES, @size, :size), ("icon" if @icon) ].compact.join(" ")
     end

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

@@ -11,16 +11,20 @@ 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]
           # panel (which no focus trap holds open).
-          action: "click@window->phlex-kit--menubar#onClickOutside keydown->phlex-kit--menubar#onKeydown focusout->phlex-kit--menubar#onFocusout"
+          # mousedown@window arms the modal-menu click swallow (deliberately
+          # 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

@@ -13,6 +13,27 @@ import { Controller } from "@hotwired/stimulus"
 // Connects to data-controller="phlex-kit--menubar"
 let uid = 0
 
+// One-shot capture listener swallowing the click an outside mousedown is
+// about to produce (see onMousedownOutside; same helper in dropdown/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. 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 })
+}
+
 export default class extends Controller {
   static targets = ["menu"]
 
@@ -131,6 +152,21 @@ export default class extends Controller {
     if (opts.refocus === true) trigger?.focus()
   }
 
+  // Kit-wide dismiss contract (Radix parity): MENU overlays (dropdown,
+  // context, menubar, select) are modal — the dismissing outside click is
+  // swallowed rather than also acting on what was under the pointer. The
+  // decision happens at MOUSEDOWN: the same gesture's focusout closes the
+  // panel before the click event fires, so a click-time openMenu check
+  // would already be null (that race made the old swallow silently skip
+  // focusable click targets). Only menubar.rb binds this action — the
+  // navigation menu (hover-open mode) is non-modal like Radix's and its
+  // dismissing click clicks through.
+  onMousedownOutside(e) {
+    if (this.element.contains(e.target)) return
+    if (!this.openMenu) return
+    armSwallowClick()
+  }
+
   onClickOutside(e) {
     if (this.element.contains(e.target)) return
     this.close()

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/progress/progress.css

@@ -23,3 +23,22 @@
 .pk-progress:dir(rtl) .pk-progress-indicator {
   transform: translateX(calc((100 - var(--pk-progress-value, 0)) * 1%));
 }
+
+/* Indeterminate (value: nil): a 40%-wide segment sweeps the track.
+   translateX % is relative to the segment's own width: -100% parks it just
+   off the track's start edge, +250% (track = 250% of segment) just past the
+   end. Direction-agnostic — the sweep reads fine mirrored, no RTL arm. */
+.pk-progress.indeterminate .pk-progress-indicator {
+  width: 40%;
+  transition: none;
+  animation: pk-progress-indeterminate 1.5s ease-in-out infinite;
+}
+@keyframes pk-progress-indeterminate {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(250%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pk-progress.indeterminate .pk-progress-indicator {
+    animation-duration: 3s;
+  }
+}

data/app/components/phlex_kit/progress/progress.rb

@@ -6,29 +6,45 @@ module PhlexKit
   class Progress < BaseComponent
     # value_text: is a named kwarg (not read from **attrs) because `mix`
     # would *fuse* a caller "aria-valuetext" with the generated default.
+    # `value: nil` renders the INDETERMINATE state (Radix parity): a sliding
+    # animation, data-state="indeterminate", and no aria-valuenow — which is
+    # exactly how ARIA marks a progressbar of unknown value.
     def initialize(value: 0, value_text: nil, **attrs)
-      @value = value.to_f.clamp(0.0, 100.0)
+      @value = value.nil? ? nil : value.to_f.clamp(0.0, 100.0)
       @value_text = value_text
       @attrs = attrs
     end
 
     def view_template
-      # %g drops float artifacts ("40.0" would be announced as "forty point
-      # zero percent"). The value travels as a custom property so the fill
-      # transform lives in progress.css, where a :dir(rtl) arm can flip it —
-      # an inline translateX always filled from the physical left.
-      v = Kernel.format("%g", @value)
-      div(**mix({
+      div(**mix(root_attrs, @attrs)) do
+        div(class: "pk-progress-indicator")
+      end
+    end
+
+    private
+
+    def root_attrs
+      base = {
         role: "progressbar",
-        "aria-valuenow": v,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        "aria-valuetext": @value_text || "#{v}%",
-        class: "pk-progress",
-        style: "--pk-progress-value: #{v};"
-      }, @attrs)) do
-        div(class: "pk-progress-indicator")
+        class: "pk-progress"
+      }
+      if @value.nil?
+        base[:class] = "pk-progress indeterminate"
+        base[:data] = { state: "indeterminate" }
+        base[:"aria-valuetext"] = @value_text if @value_text
+      else
+        # %g drops float artifacts ("40.0" would be announced as "forty point
+        # zero percent"). The value travels as a custom property so the fill
+        # transform lives in progress.css, where a :dir(rtl) arm can flip it —
+        # an inline translateX always filled from the physical left.
+        v = Kernel.format("%g", @value)
+        base[:"aria-valuenow"] = v
+        base[:"aria-valuetext"] = @value_text || "#{v}%"
+        base[:style] = "--pk-progress-value: #{v};"
       end
+      base
     end
   end
 end

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",

data/app/components/phlex_kit/resizable/resizable_controller.js

@@ -57,6 +57,9 @@ export default class extends Controller {
     try { handle.setPointerCapture(e.pointerId) } catch {}
 
     const onMove = (ev) => {
+      // Only the initiating pointer drives the drag — a second touch point
+      // over the handle must not hijack it.
+      if (ev.pointerId !== e.pointerId) return
       // LTR assumption: clientX grows toward the trailing panel; RTL drag
       // inversion is a documented limitation.
       const delta = (horizontal ? ev.clientX : ev.clientY) - drag.startPos
@@ -65,9 +68,12 @@ export default class extends Controller {
       const prevGrow = this.clampPrevGrow(prev, next, (prevSize / total) * drag.pairGrow, drag.pairGrow, drag.groupGrow)
       prev.style.flexGrow = prevGrow
       next.style.flexGrow = drag.pairGrow - prevGrow
-      this.syncValuenow(handle)
+      // Resizing this pair moves every share: 3+ panel groups have sibling
+      // handles whose aria-valuenow would otherwise go stale.
+      this.handleTargets.forEach((h) => this.syncValuenow(h))
     }
-    const onUp = () => {
+    const onUp = (ev) => {
+      if (ev.pointerId !== e.pointerId) return
       handle.removeEventListener("pointermove", onMove)
       handle.removeEventListener("pointerup", onUp)
       handle.removeEventListener("pointercancel", onUp)
@@ -89,8 +95,14 @@ export default class extends Controller {
     if (!prev || !next) return
 
     const horizontal = this.directionValue === "horizontal"
+    // Horizontal arrows follow visual direction (round-7 kit convention, same
+    // as tabs/toggle_group): in RTL the DOM-first panel is on the RIGHT, so
+    // ArrowLeft must GROW it (move the divider visually left). Only the
+    // pointer-drag clientX math keeps its documented LTR exemption; Up/Down
+    // never flip. Runtime dir check — reliable after a dynamic flip.
+    const rtl = horizontal && getComputedStyle(this.element).direction === "rtl"
     const steps = horizontal
-      ? { ArrowLeft: -0.05, ArrowRight: 0.05 }
+      ? (rtl ? { ArrowLeft: 0.05, ArrowRight: -0.05 } : { ArrowLeft: -0.05, ArrowRight: 0.05 })
       : { ArrowUp: -0.05, ArrowDown: 0.05 }
 
     const pairGrow = this.growOf(prev) + this.growOf(next) || 2
@@ -109,7 +121,8 @@ export default class extends Controller {
     const prevGrow = this.clampPrevGrow(prev, next, share * pairGrow, pairGrow, this.groupGrow())
     prev.style.flexGrow = prevGrow
     next.style.flexGrow = pairGrow - prevGrow
-    this.syncValuenow(handle)
+    // All handles: sibling dividers share panels in 3+ panel groups.
+    this.handleTargets.forEach((h) => this.syncValuenow(h))
   }
 
   growOf(el) {

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

@@ -8,18 +8,20 @@ module PhlexKit
     end
 
     def view_template
-      div(**mix({
+      base = {
         class: "pk-resizable-handle",
-        role: "separator",
-        tabindex: "0",
-        # Correct for the default horizontal group; the controller re-stamps
-        # orientation (and aria-valuenow/min/max) per group direction on connect.
-        aria: { orientation: "vertical" },
         data: {
           phlex_kit__resizable_target: "handle",
           action: "pointerdown->phlex-kit--resizable#start keydown->phlex-kit--resizable#keydown"
         }
-      }, @attrs)) do
+      }
+      # Defaults only when the caller didn't supply their own — `mix` fuses.
+      base[:role] = "separator" unless attr_set?(:role)
+      base[:tabindex] = "0" unless attr_set?(:tabindex)
+      # Correct for the default horizontal group; the controller re-stamps
+      # orientation (and aria-valuenow/min/max) per group direction on connect.
+      base[:aria] = { orientation: "vertical" } unless aria_key_set?(:orientation)
+      div(**mix(base, @attrs)) do
         span(class: "pk-resizable-handle-grip", aria: { hidden: "true" }) if @with_handle
       end
     end

data/app/components/phlex_kit/scroll_area/scroll_area.rb

@@ -15,7 +15,7 @@ module PhlexKit
       # Defaults only when the caller didn't supply their own — `mix` would
       # fuse role="region log" / tabindex="0 -1" instead of overriding.
       base = { class: "pk-scroll-area" }
-      base[:tabindex] = "0" unless @attrs.key?(:tabindex) || @attrs.key?("tabindex")
+      base[:tabindex] = "0" unless attr_set?(:tabindex)
       base[:role] = "region" if aria_labelled? && !@attrs.key?(:role) && !@attrs.key?("role")
       div(**mix(base, @attrs), &)
     end

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

@@ -39,7 +39,7 @@ module PhlexKit
           # keydown.esc rides on the root (not only the items) so Escape closes
           # the [popover=manual] panel with focus on the trigger too; handleEsc
           # no-ops while closed.
-          action: "click@window->phlex-kit--select#clickOutside keydown.esc->phlex-kit--select#handleEsc"
+          action: "click@window->phlex-kit--select#clickOutside keydown.esc->phlex-kit--select#handleEsc focusout->phlex-kit--select#onFocusout"
         }
       }, @attrs), &block)
     end