phlex_kit 0.10.0 → 0.12.0

data/app/components/phlex_kit/form_field/form_field_hint.rb

@@ -2,12 +2,16 @@ module PhlexKit
   # Muted helper text under a PhlexKit::FormField control. Hidden when empty.
   # See form_field.rb.
   class FormFieldHint < BaseComponent
-    def initialize(**attrs)
+    # A default id (like FormFieldError) so the controller can wire the hint
+    # into every control's aria-describedby — without it SR users never heard
+    # the hint text. id: is a named kwarg to avoid mix id-fusion.
+    def initialize(id: nil, **attrs)
+      @id = id || "pk-form-field-hint-#{SecureRandom.hex(4)}"
       @attrs = attrs
     end
 
     def view_template(&block)
-      p(**mix({ class: "pk-form-field-hint" }, @attrs), &block)
+      p(**mix({ id: @id, class: "pk-form-field-hint", data: { phlex_kit__form_field_target: "hint" } }, @attrs), &block)
     end
   end
 end

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

@@ -15,19 +15,27 @@
   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. */
 .pk-hover-card-content.left {
-  position-area: inline-start; margin: 0 .25rem 0 0;
+  position-area: inline-start; margin: 0; margin-inline-end: .25rem;
   position-try-fallbacks: flip-inline;
 }
 .pk-hover-card-content.right {
-  position-area: inline-end; margin: 0 0 0 .25rem;
+  position-area: inline-end; margin: 0; margin-inline-start: .25rem;
   position-try-fallbacks: flip-inline;
 }
 /* Hiding must survive author display values (a host class like

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

@@ -0,0 +1,9 @@
+/* Co-located with icon.rb — PhlexKit::Icon. The .pk-icon class was emitted
+   with no rule anywhere (audit round 6): the bare SVG inherited the UA's
+   inline/baseline layout (descender gap under icons) and could be squashed
+   inside height-constrained flex scroll panes. */
+.pk-icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex: none;
+}

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

@@ -20,7 +20,13 @@ module PhlexKit
 
     def view_template
       icon = Icons.fetch(@name, library: @library || PhlexKit.config.icon_library)
-      svg(**mix(base_attrs(icon), @attrs)) do |s|
+      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)
+      end
+      svg(**mix(base, @attrs)) do |s|
         icon[:elements].each { |tag, attrs| s.public_send(tag, **attrs) }
       end
     end

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_group/input_group.css

@@ -59,7 +59,6 @@
   justify-content: center;
   gap: .5rem;
   flex: none;
-  cursor: text;
   user-select: none;
   padding-block: .375rem;
   color: var(--pk-muted);

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

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

@@ -10,13 +10,20 @@ module PhlexKit
     # unknown values used to fall through silently to <div> — fail loud instead.
     AS_TAGS = %i[div button].freeze
 
-    def initialize(variant: :default, href: nil, as: :div, **attrs)
+    # type: is a named kwarg (not a mix default) because `mix` would *fuse* a
+    # caller type: "submit" with the generated "button" into an invalid
+    # two-token value the browser resolves back to submit.
+    def initialize(variant: :default, href: nil, as: :div, type: :button, **attrs)
       @variant = variant.to_sym
       @href = href
       @as = as.to_sym
       unless AS_TAGS.include?(@as)
         raise ArgumentError, "unknown Marker as: #{@as.inspect} (use one of #{AS_TAGS.join(", ")})"
       end
+      if @href && @as != :div
+        raise ArgumentError, "Marker href: renders an <a> — it can't combine with as: #{@as.inspect}"
+      end
+      @type = type
       @attrs = attrs
     end
 
@@ -25,7 +32,7 @@ module PhlexKit
       if @href
         a(**mix({ class: classes, href: @href }, @attrs), &)
       elsif @as == :button
-        button(**mix({ class: classes, type: "button" }, @attrs), &)
+        button(**mix({ class: classes, type: @type }, @attrs), &)
       else
         div(**mix({ class: classes }, @attrs), &)
       end

data/app/components/phlex_kit/masked_input/masked_input_controller.js

@@ -26,13 +26,27 @@ export default class extends Controller {
   apply() {
     const el = this.element
     // The whole value is rewritten below, which throws the caret to the end —
-    // remember how many maskable chars sit before it and re-seat it after
-    // the same count in the masked output (mid-field edits keep their place).
+    // re-seat it after the same number of TOKEN-filled (user) characters.
+    // Counting is done in token space, not "any alphanumeric" space: mask
+    // literals can themselves be alphanumeric (the "1" in "+1 (###) ###-####"),
+    // and counting them as user input reordered every subsequent keystroke.
     const caret = el.selectionStart ?? el.value.length
-    const rawBefore = this.maskable(el.value.slice(0, caret)).length
+    const filledBefore = this.maskFill(this.maskable(el.value.slice(0, caret))).tokenPos.length
 
-    const raw = this.maskable(el.value)
+    const { out, tokenPos } = this.maskFill(this.maskable(el.value))
+    el.value = out
+
+    if (document.activeElement === el) {
+      const pos = filledBefore === 0 ? 0 : tokenPos[filledBefore - 1] + 1
+      el.setSelectionRange(pos, pos)
+    }
+  }
+
+  // Fill the mask from `raw`, returning the output and the output indices
+  // that were filled from user input (vs emitted as mask literals).
+  maskFill(raw) {
     let out = "", i = 0
+    const tokenPos = []
     for (const t of this.mask) {
       if (i >= raw.length) break
       if (t === "#" || t === "A" || t === "*") {
@@ -41,19 +55,11 @@ export default class extends Controller {
         const re = t === "#" ? /\d/ : t === "A" ? /[A-Za-z]/ : /[0-9A-Za-z]/
         while (i < raw.length && !re.test(raw[i])) i++
         if (i >= raw.length) break
+        tokenPos.push(out.length)
         out += raw[i++]
       } else { out += t; if (raw[i] === t) i++ }
     }
-    el.value = out
-
-    if (document.activeElement === el) {
-      let pos = 0, seen = 0
-      while (pos < out.length && seen < rawBefore) {
-        if (/[0-9A-Za-z]/.test(out[pos])) seen++
-        pos++
-      }
-      el.setSelectionRange(pos, pos)
-    }
+    return { out, tokenPos }
   }
   // Transliterate full-width digits (０-９, U+FF10–FF19 — common IME numeric
   // output) to ASCII before the charset filter would silently drop them.

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

@@ -42,6 +42,18 @@ export default class extends Controller {
       if (!panel.id) panel.id = `pk-menu-panel-${++uid}`
       trigger.setAttribute("aria-controls", panel.id)
     }
+    // A Turbo snapshot serializes aria-expanded="true" even though the
+    // panel's :popover-open does not survive the restore — no panel can be
+    // open at connect time, so stamp every expanded marker back to false
+    // (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()
   }
 
@@ -101,8 +113,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)
@@ -141,10 +160,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)
@@ -184,23 +207,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/message/message.rb

@@ -3,8 +3,13 @@ module PhlexKit
   # align: :end reverses the row. Compose Message > MessageContent (+ Avatar/
   # Header/Footer); group several in a MessageGroup.
   class Message < BaseComponent
+    ALIGNS = %i[start end].freeze
+
     def initialize(align: :start, **attrs)
       @align = align.to_sym
+      # Fail loud like sibling Bubble: message.css only styles data-align="end",
+      # so an unknown value silently rendered a start-aligned row.
+      raise KeyError, "unknown Message align #{@align}" unless ALIGNS.include?(@align)
       @attrs = attrs
     end
     def view_template(&)

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

@@ -378,6 +378,9 @@ export default class extends Controller {
       button.setAttribute("data-active", active ? "true" : "false");
       // Remove the inert button from the tab order so there are no ghost stops.
       button.setAttribute("tabindex", active ? "0" : "-1");
+      // opacity-only hiding leaves it in the accessibility tree — a SR
+      // virtual cursor would still find a phantom jump button.
+      button.setAttribute("aria-hidden", active ? "false" : "true");
     });
   }
 }

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

@@ -21,20 +21,29 @@ module PhlexKit
       sm: "sm"
     }.freeze
 
+    # An Integer size: is the NATIVE <select size> (multi-row list box) and
+    # passes straight through — the kit's visual sizes stay symbols.
     def initialize(size: :default, **attrs)
-      @size = size.to_sym
+      if size.is_a?(Integer)
+        @native_size = size
+        @size = :default
+      else
+        @size = size.to_sym
+      end
       @attrs = attrs
     end
 
     def view_template(&block)
       div(class: "pk-native-select") do
-        select(**mix({
+        base = {
           class: classes,
           data: {
             phlex_kit__form_field_target: "input",
             action: "change->phlex-kit--form-field#onChange invalid->phlex-kit--form-field#onInvalid"
           }
-        }, @attrs), &block)
+        }
+        base[:size] = @native_size if @native_size
+        select(**mix(base, @attrs), &block)
         render PhlexKit::NativeSelectIcon.new
       end
     end

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

@@ -23,7 +23,10 @@ module PhlexKit
           # mouseenter->cancelClose: re-entering the nav over list padding /
           # whitespace must cancel the pending mouseleave grace-close (only
           # trigger/panel mouseenter did before).
-          action: "click@window->phlex-kit--menubar#onClickOutside keydown->phlex-kit--menubar#onKeydown mouseleave->phlex-kit--menubar#closeSoon mouseenter->phlex-kit--menubar#cancelClose"
+          # focusout->onFocusout: a keyboard user tabbing past the panel's
+          # last link must close it (menubar wires the same handler; closeSoon
+          # is pointer-only and never fires for this path).
+          action: "click@window->phlex-kit--menubar#onClickOutside keydown->phlex-kit--menubar#onKeydown focusout->phlex-kit--menubar#onFocusout mouseleave->phlex-kit--menubar#closeSoon mouseenter->phlex-kit--menubar#cancelClose"
         }
       }, @attrs), &)
     end

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

data/app/components/phlex_kit/pagination/pagination.rb

@@ -2,9 +2,17 @@ module PhlexKit
   # Page navigation. Ported from ruby_ui's RubyUI::Pagination. Compose Pagination >
   # PaginationContent > PaginationItem(href:, active:) / PaginationEllipsis.
   class Pagination < BaseComponent
-    def initialize(**attrs) = (@attrs = attrs)
+    # label: is a named kwarg (not a mix default) because `mix` would *fuse* a
+    # caller aria-label with the hardcoded "pagination" ("pagination Résultats").
+    def initialize(label: "pagination", **attrs)
+      @label = label
+      @attrs = attrs
+    end
+
     def view_template(&)
-      nav(**mix({ class: "pk-pagination", role: "navigation", aria: { label: "pagination" } }, @attrs), &)
+      base = { class: "pk-pagination", role: "navigation" }
+      base[:aria] = { label: @label } unless aria_labelled?
+      nav(**mix(base, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/pagination/pagination_next.rb

@@ -15,7 +15,9 @@ module PhlexKit
       # custom (possibly localized) label: speaks for itself — hardcoding
       # "Go to next page" over it would make AT announce the wrong language.
       base = { href: @href, class: "pk-button ghost pk-pagination-next" }
-      base[:aria] = { label: "Go to next page" } if @label == DEFAULT_LABEL
+      # ...and never over a caller-supplied aria label — `mix` would fuse
+      # the two strings instead of overriding.
+      base[:aria] = { label: "Go to next page" } if @label == DEFAULT_LABEL && !aria_labelled?
       li do
         a(**mix(base, @attrs)) do
           span(class: "pk-pagination-label") { @label }

data/app/components/phlex_kit/pagination/pagination_previous.rb

@@ -16,7 +16,9 @@ module PhlexKit
       # custom (possibly localized) label: speaks for itself — hardcoding
       # "Go to previous page" over it would make AT announce the wrong language.
       base = { href: @href, class: "pk-button ghost pk-pagination-previous" }
-      base[:aria] = { label: "Go to previous page" } if @label == DEFAULT_LABEL
+      # ...and never over a caller-supplied aria label — `mix` would fuse
+      # the two strings instead of overriding.
+      base[:aria] = { label: "Go to previous page" } if @label == DEFAULT_LABEL && !aria_labelled?
       li do
         a(**mix(base, @attrs)) do
           render Icon.new(:chevron_left, size: nil)