phlex_kit 0.11.0 → 0.13.0

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

@@ -10,6 +10,18 @@ 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) => ev.preventDefault();
+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 } };
@@ -22,6 +34,18 @@ export default class extends Controller {
     // The visible control is the caller's button/link inside the trigger
     // wrapper — that's what AT reads, so the popup wiring belongs on it.
     this.invoker = this.triggerTarget.querySelector("button, a, [tabindex]") || this.triggerTarget;
+    // A Turbo snapshot (or a detach/reattach that mimics one) serializes
+    // aria-expanded="true" on sub triggers even though no submenu can be
+    // open at connect time — sweep every stale marker back to false
+    // (menubar's pattern). Runs before the invoker's own reset below so
+    // both are covered by one mental model.
+    this.element.querySelectorAll("[aria-expanded='true']").forEach((el) => el.setAttribute("aria-expanded", "false"));
+    // Same shape for checkbox/radio rows: their `checked` DOM property
+    // survives a reconnect but a hand-edited/replayed aria-checked can drift
+    // from it — resync every row from its live input.
+    this.element.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach((i) => {
+      i.closest('[role^="menuitem"]')?.setAttribute("aria-checked", i.checked);
+    });
     this.invoker.setAttribute("aria-haspopup", "menu");
     this.invoker.setAttribute("aria-expanded", "false");
     // Associate trigger and menu for AT (the dialog controller wires its
@@ -57,16 +81,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();
   }
 
@@ -74,6 +105,18 @@ export default class extends Controller {
     this.contentTarget.matches(":popover-open") ? this.close() : this.#open();
   }
 
+  // Tabbing (or otherwise moving real focus) out of the menu closes it —
+  // menubar's onFocusout pattern (menubar_controller.js). relatedTarget is
+  // null when the window itself blurs — leave the menu alone then. The
+  // trigger + content are both DOM children of this.element even though the
+  // content is a top-layer popover, so one containment check covers both.
+  onFocusout(e) {
+    if (!this.contentTarget.matches(":popover-open")) return;
+    const to = e.relatedTarget;
+    if (!to || this.element.contains(to)) return;
+    this.close();
+  }
+
   #open() {
     this.openValue = true;
     this.#addEventListeners();
@@ -102,6 +145,16 @@ export default class extends Controller {
   }
 
   #handleKeydown(e) {
+    // This listener is document-level (see #addEventListeners) so it keeps
+    // receiving events even once real focus has left the menu (e.g. a click
+    // into an unrelated text field the onFocusout listener didn't catch) —
+    // scope the roving-nav keys to when focus is actually within the widget.
+    // this.element (not just contentTarget) so ArrowDown still works right
+    // after a mouse-driven open, when focus is still on the invoker button
+    // (#open() doesn't force focus into the first row). Escape stays global
+    // while the menu is open (APG).
+    if (e.key !== "Escape" && !this.element.contains(document.activeElement)) return;
+
     const items = this.#items();
     if (items.length === 0) return;
     const index = items.indexOf(document.activeElement);
@@ -138,20 +191,27 @@ export default class extends Controller {
         this.invoker.focus();
         break;
       case "ArrowRight":
-        // On a sub trigger, enter the submenu (focus reveals it via
-        // :focus-within, making its rows visible to the roving nav).
-        // Same keyboard grammar as context_menu.
-        if (document.activeElement?.matches(".pk-dropdown-menu-sub-trigger")) {
-          e.preventDefault();
-          this.#enterSub(document.activeElement);
-        }
-        break;
       case "ArrowLeft": {
-        // Inside a submenu, step back to its trigger (closes it on focus-out).
-        const sub = document.activeElement?.closest(".pk-dropdown-menu-sub-content");
-        if (sub) {
-          e.preventDefault();
-          sub.closest(".pk-dropdown-menu-sub")?.querySelector(".pk-dropdown-menu-sub-trigger")?.focus();
+        // Submenus open inline-end — visually LEFT in RTL — so the enter key
+        // follows visual direction: ArrowLeft enters / ArrowRight exits in RTL
+        // (and the reverse in LTR). Same keyboard grammar as context_menu.
+        // Runtime dir check is reliable after a dynamic flip.
+        const rtl = getComputedStyle(this.element).direction === "rtl";
+        const enterKey = rtl ? "ArrowLeft" : "ArrowRight";
+        if (e.key === enterKey) {
+          // On a sub trigger, enter the submenu (focus reveals it via
+          // :focus-within, making its rows visible to the roving nav).
+          if (document.activeElement?.matches(".pk-dropdown-menu-sub-trigger")) {
+            e.preventDefault();
+            this.#enterSub(document.activeElement);
+          }
+        } else {
+          // Inside a submenu, step back to its trigger (closes it on focus-out).
+          const sub = document.activeElement?.closest(".pk-dropdown-menu-sub-content");
+          if (sub) {
+            e.preventDefault();
+            sub.closest(".pk-dropdown-menu-sub")?.querySelector(".pk-dropdown-menu-sub-trigger")?.focus();
+          }
         }
         break;
       }

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

@@ -59,42 +59,50 @@ export default class extends Controller {
     }
 
     this.shouldValidateValue = true;
-    this.#setErrorMessage(error);
+    this.#setErrorMessage();
   }
 
-  onInput(event) {
-    this.#setErrorMessage(event);
+  onInput(_event) {
+    this.#setErrorMessage();
   }
 
-  onChange(event) {
-    this.#setErrorMessage(event);
+  onChange(_event) {
+    this.#setErrorMessage();
   }
 
-  // The event's own control, when it's one of ours — radio/checkbox groups
-  // register several input targets and validity/aria-invalid must land on
-  // the control that fired, not always the first.
-  #inputFor(event) {
-    if (event && this.inputTargets.includes(event.target)) return event.target;
-    return this.inputTarget;
-  }
-
-  #setErrorMessage(event) {
+  // A FormField can carry several input targets (radio/checkbox groups, or
+  // independent controls like two required checkboxes sharing one error).
+  // Recompute across ALL of them on every validity event — deciding from the
+  // event's own target alone left a shared error stuck on/off based on
+  // whichever control happened to fire last, out of step with the others'
+  // own (correctly-updated) aria-invalid.
+  #setErrorMessage() {
     if (!this.shouldValidateValue || !this.hasErrorTarget) return;
 
-    const input = this.#inputFor(event);
     // aria-invalid drives the red ring for LIVE validation too (input.css
-    // only matched server-rendered attrs); aria-describedby ties the message
-    // to the control for AT.
-    if (input.validity.valid) {
-      input.removeAttribute("aria-invalid");
+    // only matched server-rendered attrs); each control reflects its own
+    // validity regardless of which one fired the event. Radio buttons
+    // sharing a `name` share native validity, so they naturally agree here.
+    let firstInvalid = null;
+    this.inputTargets.forEach((input) => {
+      if (input.validity.valid) {
+        input.removeAttribute("aria-invalid");
+      } else {
+        input.setAttribute("aria-invalid", "true");
+        firstInvalid ||= input;
+      }
+      // Clear the shared error's id everywhere first — it's re-added below,
+      // only on the one control whose message is currently shown.
       this.#describeBy(input, false);
+    });
+
+    if (firstInvalid) {
+      this.#describeBy(firstInvalid, true);
+      this.errorTarget.textContent = this.#getValidationMessage(firstInvalid);
+      this.errorTarget.classList.remove("pk-hidden");
+    } else {
       this.errorTarget.textContent = "";
       this.errorTarget.classList.add("pk-hidden");
-    } else {
-      input.setAttribute("aria-invalid", "true");
-      this.#describeBy(input, true);
-      this.errorTarget.textContent = this.#getValidationMessage(input);
-      this.errorTarget.classList.remove("pk-hidden");
     }
   }
 

data/app/components/phlex_kit/hover_card/hover_card.css

@@ -15,12 +15,18 @@
   position-area: block-end span-inline-end;
   margin: .25rem 0 0;
   position-try-fallbacks: flip-block;
+  flex-direction: column; gap: .125rem;
   width: 16rem;
   border: 1px solid color-mix(in oklab, var(--pk-text) 10%, transparent);
   border-radius: var(--pk-radius); background: var(--pk-surface);
   color: var(--pk-text); padding: .625rem; font-size: .875rem;
   box-shadow: 0 8px 24px color-mix(in srgb, var(--pk-shadow-color) 30%, transparent); outline: none;
 }
+/* display must be gated on :popover-open — an unconditional author
+   `display: flex` would beat the UA's [popover] { display: none } (bit the
+   Basic docs example's inline style, which relied on this instead of the
+   component doing it). */
+.pk-hover-card-content:popover-open { display: flex; }
 .pk-hover-card-content.top { position-area: block-start span-inline-end; margin: 0 0 .25rem; }
 /* Gap margins are logical to match the logical position-area (and tooltip's
    pattern) — physical margins landed on the wrong side in RTL. */

data/app/components/phlex_kit/hover_card/hover_card_controller.js

@@ -10,6 +10,29 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = ["trigger", "content"]
   static values = { openDelay: { type: Number, default: 200 }, closeDelay: { type: Number, default: 200 } }
+
+  connect() {
+    // Turbo snapshots BEFORE disconnect, so a stale data-state="open" would
+    // otherwise resurrect host CSS keyed on the state hook after a cache
+    // restore — close now (popover_controller.js's contentTargetConnected /
+    // context_menu_controller.js's turbo:before-cache pattern combined).
+    this.onBeforeCache = () => {
+      if (this.contentTarget.matches(":popover-open")) {
+        clearTimeout(this.t)
+        this.#close()
+      }
+    }
+    document.addEventListener("turbo:before-cache", this.onBeforeCache)
+  }
+
+  contentTargetConnected(el) {
+    // A reconnect (Turbo cache restore, or the detach/reattach it's tested
+    // with) can hand us markup whose data-state was serialized while open —
+    // :popover-open does not survive the restore, so resync before anything
+    // reads the hook.
+    el.dataset.state = el.matches(":popover-open") ? "open" : "closed"
+  }
+
   show() {
     clearTimeout(this.t)
     this.t = setTimeout(() => {
@@ -25,6 +48,7 @@ export default class extends Controller {
   disconnect() {
     clearTimeout(this.t)
     this.#unbindEscape()
+    document.removeEventListener("turbo:before-cache", this.onBeforeCache)
   }
 
   #close() {

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

@@ -24,7 +24,7 @@ module PhlexKit
       # `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)
+        base.delete(key) if attr_set?(key)
       end
       svg(**mix(base, @attrs)) do |s|
         icon[:elements].each { |tag, attrs| s.public_send(tag, **attrs) }

data/app/components/phlex_kit/input/input.css

@@ -38,7 +38,6 @@
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
 .pk-input:disabled {
-  pointer-events: none;
   cursor: not-allowed;
   opacity: .5;
   background: color-mix(in oklab, var(--pk-input) 80%, transparent);

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

@@ -15,15 +15,18 @@ module PhlexKit
     end
 
     def view_template(&block)
-      div(**mix({
+      base = {
         class: "pk-input-otp",
         role: "group",
-        aria: { label: @label },
         data: {
           controller: "phlex-kit--input-otp",
           phlex_kit__input_otp_length_value: @length
         }
-      }, @attrs)) do
+      }
+      # Default label only when the caller didn't supply their own — `mix`
+      # would fuse aria-label into a two-token value instead of overriding.
+      base[:aria] = { label: @label } unless aria_labelled?
+      div(**mix(base, @attrs)) do
         input(type: :hidden, name: @name, value: @value, data: { phlex_kit__input_otp_target: "value" }) if @name
         yield if block
       end

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

@@ -30,20 +30,32 @@ export default class extends Controller {
       const chars = this.valueTarget.value.split("")
       this.slotTargets.forEach((slot, i) => { if (chars[i] != null) slot.value = chars[i] })
     }
+    // Track each slot's last-known-good value so a rejected keystroke (see
+    // onInput) can restore it instead of leaving the slot blanked.
+    this.slotTargets.forEach((slot) => { slot.dataset.otpValue = slot.value })
     this.syncValue()
   }
 
   onInput(e) {
     const slot = e.target
+    const isNumeric = slot.getAttribute("inputmode") === "numeric"
+    const priorValue = slot.dataset.otpValue || ""
     let text = slot.value.replace(/\s/g, "")
     // Typing rejects the same characters paste strips — a letter keyed into
     // an inputmode=numeric slot must not land.
-    if (slot.getAttribute("inputmode") === "numeric") text = text.replace(/\D/g, "")
+    if (isNumeric) text = text.replace(/\D/g, "")
 
     if (text.length > 1) {
       if (e.data && e.data.length === 1) {
+        if (isNumeric && !/\d/.test(e.data)) {
+          // Rejected keystroke into an already-filled/selected slot: restore
+          // the prior digit rather than blanking it, and don't advance focus.
+          slot.value = priorValue
+          return
+        }
         // one keystroke into an already-filled slot: keep the newest char
         slot.value = e.data
+        slot.dataset.otpValue = e.data
         this.focusSlot(this.slotTargets.indexOf(slot) + 1)
         this.syncValue()
       } else {
@@ -55,7 +67,16 @@ export default class extends Controller {
       return
     }
 
+    if (!text && e.data) {
+      // A keystroke was fully rejected by numeric filtering (e.g. a letter
+      // typed into a filled/selected slot) — restore the slot's prior value
+      // instead of blanking it, and don't advance focus.
+      slot.value = priorValue
+      return
+    }
+
     slot.value = text
+    slot.dataset.otpValue = text
     if (slot.value) this.focusSlot(this.slotTargets.indexOf(slot) + 1)
     this.syncValue()
   }
@@ -66,6 +87,7 @@ export default class extends Controller {
       e.preventDefault()
       const prev = this.slotTargets[index - 1]
       prev.value = ""
+      prev.dataset.otpValue = ""
       prev.focus()
       this.syncValue()
     } else if (e.key === "ArrowLeft" && index > 0) {
@@ -92,7 +114,7 @@ export default class extends Controller {
   fillFrom(slot, text) {
     const chars = text.split("")
     const start = this.slotTargets.indexOf(slot)
-    this.slotTargets.slice(start).forEach((s, i) => { if (chars[i] != null) s.value = chars[i] })
+    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/item/item.css

@@ -34,7 +34,8 @@ a.pk-item:hover { background: var(--pk-surface-2); }
   transform: translateY(.125rem);
   align-self: flex-start;
 }
-.pk-item-media.icon svg:not([class*="size-"]) { width: 1rem; height: 1rem; }
+/* Glyphs default to size-4; explicit width attrs (Icon size:) win. */
+.pk-item-media.icon svg:not([width]) { width: 1rem; height: 1rem; }
 .pk-item-media.image {
   width: 2.5rem;
   height: 2.5rem;

data/app/components/phlex_kit/kbd/kbd.css

@@ -15,7 +15,8 @@
   font-weight: 500;
 }
 .pk-kbd-group { display: inline-flex; align-items: center; gap: .25rem; font-family: inherit; }
-.pk-kbd svg:not([class*="size-"]) { width: .75rem; height: .75rem; }
+/* Glyphs default to size-3; explicit width attrs (Icon size:) win. */
+.pk-kbd svg:not([width]) { width: .75rem; height: .75rem; }
 /* Inside an (inverted) tooltip the chip tints from the page background. */
 .pk-tooltip-content .pk-kbd {
   background: color-mix(in oklab, var(--pk-bg) 10%, transparent);

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

@@ -9,4 +9,4 @@
   line-height: 1;
   user-select: none;
 }
-.pk-label:has(+ :disabled), .pk-label:has(:disabled) { cursor: not-allowed; opacity: .5; }
+.pk-label:has(+ :disabled), .pk-label:has(:disabled), :disabled + .pk-label { cursor: not-allowed; opacity: .5; }

data/app/components/phlex_kit/link/link.rb

@@ -20,6 +20,7 @@ module PhlexKit
     }.freeze
 
     SIZES = {
+      xs: "xs",
       sm: "sm",
       md: nil,
       lg: "lg",
@@ -35,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/marker/marker.css

@@ -25,7 +25,8 @@ a.pk-marker, button.pk-marker {
   font-size: .875rem;
 }
 a.pk-marker:hover, button.pk-marker:hover { color: var(--pk-text); }
-.pk-marker svg:not([class*="size-"]) { width: 1rem; height: 1rem; }
+/* Glyphs default to size-4; explicit width attrs (Icon size:) win. */
+.pk-marker svg:not([width]) { width: 1rem; height: 1rem; }
 .pk-marker-icon { display: inline-flex; flex: none; width: 1rem; height: 1rem; }
 .pk-marker-content { min-width: 0; overflow-wrap: break-word; }
 .pk-marker-content a { text-decoration: underline; text-underline-offset: 3px; color: inherit; }

data/app/components/phlex_kit/menubar/menubar.css

@@ -129,6 +129,9 @@
    the viewport right edge. */
 .pk-menubar-sub { anchor-name: --pk-menubar-sub; anchor-scope: --pk-menubar-sub; }
 .pk-menubar-sub-chevron { margin-inline-start: auto; width: 1rem; height: 1rem; }
+/* Mirror the chevron in RTL (submenu opens visually LEFT). Ancestor
+   [dir="rtl"] (not :dir()) so Chrome re-styles it on a dynamic dir flip too. */
+[dir="rtl"] .pk-menubar-sub-chevron { transform: scaleX(-1); }
 .pk-menubar-sub-content {
   position: fixed;
   position-anchor: --pk-menubar-sub;

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

@@ -18,7 +18,9 @@ module PhlexKit
           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), &)
     end

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

@@ -13,6 +13,17 @@ 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) => ev.preventDefault()
+function armSwallowClick() {
+  window.addEventListener("click", swallowClick, { once: true, capture: true })
+}
+
 export default class extends Controller {
   static targets = ["menu"]
 
@@ -48,6 +59,12 @@ export default class extends Controller {
     // (only on elements that already carry it: plain nav links must not
     // grow an aria-expanded). Covers the trigger and CSS-revealed subs.
     menu.querySelectorAll("[aria-expanded='true']").forEach((el) => el.setAttribute("aria-expanded", "false"))
+    // Same shape for checkbox/radio rows: their `checked` DOM property
+    // survives a reconnect but a hand-edited/replayed aria-checked can drift
+    // from it — resync every row from its live input.
+    menu.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach((i) => {
+      i.closest('[role^="menuitem"]')?.setAttribute("aria-checked", i.checked)
+    })
     if (this.roving) this.applyRoving()
   }
 
@@ -107,8 +124,15 @@ export default class extends Controller {
     if (focus) (this.items(menu)[0] ?? this.trigger(menu))?.focus()
   }
 
+  // Also wired directly as the click handler on plain nav links (see
+  // navigation_menu_link.rb) — `opts` is then the click Event rather than an
+  // options hash. Guard the default href="#" (dropdown_menu_controller.js's
+  // close() does the same) so a link without a real destination doesn't
+  // scroll-to-top/append a hash; a link WITH a real href is left to navigate
+  // normally, closing whatever panel is open on the way out.
   close(opts = {}) {
     clearTimeout(this.graceTimer)
+    if (opts?.target?.closest?.('a[href="#"]')) opts.preventDefault?.()
     const menu = this.openMenu
     if (!menu) return
     const panel = this.panel(menu)
@@ -118,6 +142,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()
@@ -147,10 +186,14 @@ export default class extends Controller {
         e.preventDefault()
         this.show(menu, true)
       } else if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
-        // Closed bar: left/right move focus between the triggers (APG).
+        // Closed bar: left/right move focus between the triggers (APG). In RTL
+        // the bar mirrors, so the physical LEFT arrow moves to the next
+        // trigger. Runtime dir check is reliable after a dynamic flip.
         e.preventDefault()
+        const rtl = getComputedStyle(this.element).direction === "rtl"
+        const step = (e.key === "ArrowRight" ? 1 : -1) * (rtl ? -1 : 1)
         const menus = this.menuTargets
-        const next = menus[(menus.indexOf(menu) + (e.key === "ArrowRight" ? 1 : -1) + menus.length) % menus.length]
+        const next = menus[(menus.indexOf(menu) + step + menus.length) % menus.length]
         const target = next ? this.trigger(next) : null
         target?.focus()
         if (this.roving && target) this.applyRoving(target)
@@ -190,23 +233,30 @@ export default class extends Controller {
         }
         break
       case "ArrowRight":
-        e.preventDefault()
-        // On a sub trigger, enter the submenu (focus reveals it via
-        // :focus-within) instead of jumping to the next top-level menu.
-        if (document.activeElement?.matches(".pk-menubar-sub-trigger")) {
-          this.enterSub(document.activeElement)
-        } else {
-          this.shift(1)
-        }
-        break
       case "ArrowLeft": {
         e.preventDefault()
-        // Inside a submenu, step back to its trigger instead of switching menus.
-        const sub = document.activeElement?.closest(".pk-menubar-sub-content")
-        if (sub) {
-          sub.closest(".pk-menubar-sub")?.querySelector(".pk-menubar-sub-trigger")?.focus()
+        // Both the submenu (opens inline-end = visually LEFT in RTL) and the
+        // top-level menu traversal follow visual direction: the "enter/next"
+        // key is ArrowLeft in RTL, ArrowRight in LTR. Runtime dir check is
+        // reliable after a dynamic flip.
+        const rtl = getComputedStyle(this.element).direction === "rtl"
+        const enterKey = rtl ? "ArrowLeft" : "ArrowRight"
+        if (e.key === enterKey) {
+          // On a sub trigger, enter the submenu (focus reveals it via
+          // :focus-within) instead of jumping to the next top-level menu.
+          if (document.activeElement?.matches(".pk-menubar-sub-trigger")) {
+            this.enterSub(document.activeElement)
+          } else {
+            this.shift(1)
+          }
         } else {
-          this.shift(-1)
+          // Inside a submenu, step back to its trigger instead of switching menus.
+          const sub = document.activeElement?.closest(".pk-menubar-sub-content")
+          if (sub) {
+            sub.closest(".pk-menubar-sub")?.querySelector(".pk-menubar-sub-trigger")?.focus()
+          } else {
+            this.shift(-1)
+          }
         }
         break
       }

data/app/components/phlex_kit/native_select/native_select.css

@@ -33,6 +33,20 @@
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
 .pk-native-select-field:disabled { cursor: not-allowed; opacity: .5; }
+/* [size] (a multi-row list box, NativeSelect.new(size: N)) or [multiple]
+   renders as a scrollable option list, not a single-line control — the fixed
+   2rem row height squashes it and there's no single line for the absolute
+   chevron to sit in, so auto-height the field and hide the chevron.
+   Note: [size="1"] is a single-line dropdown, not a list box — exclude it. */
+.pk-native-select-field[size]:not([size="1"]),
+.pk-native-select-field[multiple] {
+  height: auto;
+  padding-inline-end: .625rem;
+}
+.pk-native-select:has(.pk-native-select-field[size]:not([size="1"])) .pk-native-select-icon,
+.pk-native-select:has(.pk-native-select-field[multiple]) .pk-native-select-icon {
+  display: none;
+}
 .pk-native-select-field.sm {
   height: 1.75rem;
   padding-top: .125rem;

data/app/components/phlex_kit/navigation_menu/navigation_menu_link.rb

@@ -11,7 +11,14 @@ module PhlexKit
     end
 
     def view_template(&)
-      a(**mix({ class: "pk-navigation-menu-link", href: @href, data: { action: "mouseenter->phlex-kit--menubar#switch" } }, @attrs), &)
+      a(**mix({
+        class: "pk-navigation-menu-link",
+        href: @href,
+        # click: closes the open panel on real activation (and swallows the
+        # default href="#" the way dropdown_menu_controller.js's close() does
+        # — see menubar_controller.js#close).
+        data: { action: "mouseenter->phlex-kit--menubar#switch click->phlex-kit--menubar#close" }
+      }, @attrs), &)
     end
   end
 end