phlex_kit 0.8.0 → 0.8.1

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

@@ -4,14 +4,23 @@ import { Controller } from "@hotwired/stimulus";
 // @floating-ui/dom dependency: the panel is a native [popover=manual] in the
 // top layer, anchor-positioned with viewport-edge flipping by
 // dropdown_menu.css (manual so this controller keeps owning click-outside,
-// Escape, and arrow/enter keyboard nav — all unchanged from upstream).
+// Escape, and keyboard nav). Keyboard nav moves REAL focus over the rows
+// (upstream stamped aria-selected on menuitems, which AT ignores): :focus
+// styles the highlight and :focus-within opens/closes submenus, so hidden
+// 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).
 export default class extends Controller {
   static targets = ["trigger", "content", "menuItem"];
   static values = { open: { type: Boolean, default: false } };
 
   connect() {
     this.boundHandleKeydown = this.#handleKeydown.bind(this);
-    this.selectedIndex = -1;
+    // 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;
+    this.invoker.setAttribute("aria-haspopup", "menu");
+    this.invoker.setAttribute("aria-expanded", "false");
   }
 
   disconnect() {
@@ -34,65 +43,77 @@ export default class extends Controller {
 
   #open() {
     this.openValue = true;
-    this.#deselectAll();
     this.#addEventListeners();
     this.contentTarget.showPopover();
+    this.invoker.setAttribute("aria-expanded", "true");
   }
 
-  close() {
+  close(event) {
+    // Menu rows default to href="#"; without this an Enter/click on a
+    // non-link row scrolls to top and appends # to the URL.
+    if (event?.target?.closest?.('a[href="#"]')) event.preventDefault();
     this.openValue = false;
     this.#removeEventListeners();
     if (this.contentTarget.matches(":popover-open")) this.contentTarget.hidePopover();
+    this.invoker.setAttribute("aria-expanded", "false");
   }
 
-  #handleKeydown(e) {
-    if (this.menuItemTargets.length === 0) return;
-
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      this.#updateSelectedItem(1);
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      this.#updateSelectedItem(-1);
-    } else if (e.key === "Enter" && this.selectedIndex !== -1) {
-      e.preventDefault();
-      this.menuItemTargets[this.selectedIndex].click();
-    } else if (e.key === "Escape") {
-      this.close();
-    }
-  }
-
-  #updateSelectedItem(direction) {
-    this.menuItemTargets.forEach((item, index) => {
-      if (item.getAttribute("aria-selected") === "true") this.selectedIndex = index;
-    });
-
-    if (this.selectedIndex >= 0) {
-      this.#toggleAriaSelected(this.menuItemTargets[this.selectedIndex], false);
-    }
-
-    this.selectedIndex += direction;
-
-    if (this.selectedIndex < 0) {
-      this.selectedIndex = this.menuItemTargets.length - 1;
-    } else if (this.selectedIndex >= this.menuItemTargets.length) {
-      this.selectedIndex = 0;
-    }
-
-    this.#toggleAriaSelected(this.menuItemTargets[this.selectedIndex], true);
+  // Mirrors a checkbox/radio row's native input state onto the row's
+  // aria-checked (radios also reset their group's siblings).
+  syncChecked(event) {
+    const input = event.target;
+    const group = input.name
+      ? this.element.querySelectorAll(`input[name="${CSS.escape(input.name)}"]`)
+      : [input];
+    group.forEach((i) => i.closest('[role^="menuitem"]')?.setAttribute("aria-checked", i.checked));
   }
 
-  #toggleAriaSelected(element, isSelected) {
-    if (isSelected) {
-      element.setAttribute("aria-selected", "true");
-    } else {
-      element.removeAttribute("aria-selected");
+  #handleKeydown(e) {
+    const items = this.#items();
+    if (items.length === 0) return;
+    const index = items.indexOf(document.activeElement);
+
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        items[(index + 1) % items.length]?.focus();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        items[index < 0 ? items.length - 1 : (index - 1 + items.length) % items.length]?.focus();
+        break;
+      case "Home":
+        e.preventDefault();
+        items[0]?.focus();
+        break;
+      case "End":
+        e.preventDefault();
+        items[items.length - 1]?.focus();
+        break;
+      case "Enter":
+      case " ":
+        // Explicit click so label rows (checkbox/radio) activate too —
+        // labels have no native keyboard activation.
+        if (index >= 0) {
+          e.preventDefault();
+          items[index].click();
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        this.close();
+        this.invoker.focus();
+        break;
     }
   }
 
-  #deselectAll() {
-    this.menuItemTargets.forEach((item) => this.#toggleAriaSelected(item, false));
-    this.selectedIndex = -1;
+  // Rows inside a closed submenu are display:none (revealed by CSS on
+  // hover/focus-within) — focus() on them silently fails and the roving
+  // navigation would jam at the submenu boundary.
+  #items() {
+    return this.menuItemTargets.filter(
+      (el) => !el.closest("[data-disabled]") && el.getClientRects().length > 0,
+    );
   }
 
   #addEventListeners() {

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

@@ -13,9 +13,13 @@ module PhlexKit
     def view_template(&block)
       label(**mix({
         class: "pk-dropdown-menu-item pk-dropdown-menu-radio-item",
-        role: "menuitemradio"
+        role: "menuitemradio",
+        tabindex: "-1",
+        aria: { checked: @checked ? "true" : "false" },
+        data: { phlex_kit__dropdown_menu_target: "menuItem" }
       }, @attrs)) do
-        input(type: :radio, class: "pk-dropdown-menu-item-input", name: @name, value: @value, checked: @checked)
+        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
           # Deliberately NOT a PhlexKit::Icon: a filled selection dot is
           # geometry, not icon-library vocabulary — it stays identical across

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

@@ -7,8 +7,11 @@ module PhlexKit
       div(**mix({
         class: "pk-dropdown-menu-item pk-dropdown-menu-sub-trigger",
         role: "menuitem",
-        tabindex: "0",
-        aria: { haspopup: "menu" }
+        # -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",
+        aria: { haspopup: "menu" },
+        data: { phlex_kit__dropdown_menu_target: "menuItem" }
       }, @attrs)) do
         block&.call
         render Icon.new(:chevron_right, size: nil, class: "pk-dropdown-menu-sub-chevron")

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

@@ -23,6 +23,11 @@ export default class extends Controller {
   }
 
   onInvalid(error) {
+    // Only suppress the native validation bubble when we can show our own
+    // message — a FormField without a FormFieldError previously ate the
+    // bubble AND crashed on the missing target, so a required-but-empty
+    // form gave zero feedback and never submitted.
+    if (!this.hasErrorTarget) return;
     error.preventDefault();
 
     this.shouldValidateValue = true;
@@ -38,12 +43,20 @@ export default class extends Controller {
   }
 
   #setErrorMessage() {
-    if (!this.shouldValidateValue) return;
+    if (!this.shouldValidateValue || !this.hasErrorTarget) return;
 
+    // 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 (this.errorTarget.id) {
+      this.inputTarget.setAttribute("aria-describedby", this.errorTarget.id);
+    }
     if (this.inputTarget.validity.valid) {
+      this.inputTarget.removeAttribute("aria-invalid");
       this.errorTarget.textContent = "";
       this.errorTarget.classList.add("pk-hidden");
     } else {
+      this.inputTarget.setAttribute("aria-invalid", "true");
       this.errorTarget.textContent = this.#getValidationMessage();
       this.errorTarget.classList.remove("pk-hidden");
     }

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

@@ -10,8 +10,11 @@ module PhlexKit
     end
 
     def view_template(&block)
+      # role="alert": the controller swaps this text live on invalid/input —
+      # without a live region the announcement never reaches screen readers.
       p(**mix({
         class: "pk-form-field-error",
+        role: "alert",
         data: { phlex_kit__form_field_target: "error" }
       }, @attrs), &block)
     end

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

@@ -22,7 +22,27 @@ export default class extends Controller {
 
   onInput(e) {
     const slot = e.target
-    slot.value = slot.value.replace(/\s/g, "").slice(-1)
+    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 (text.length > 1) {
+      if (e.data && e.data.length === 1) {
+        // one keystroke into an already-filled slot: keep the newest char
+        slot.value = e.data
+        this.focusSlot(this.slotTargets.indexOf(slot) + 1)
+        this.syncValue()
+      } else {
+        // OTP autofill (autocomplete="one-time-code") delivers the whole
+        // code into the focused slot — distribute it like a paste instead
+        // of discarding all but one digit.
+        this.fillFrom(slot, text)
+      }
+      return
+    }
+
+    slot.value = text
     if (slot.value) this.focusSlot(this.slotTargets.indexOf(slot) + 1)
     this.syncValue()
   }
@@ -50,10 +70,16 @@ export default class extends Controller {
     // Numeric slots reject non-digits on typing; pasted text like
     // "code: 123456" should distribute only the digits.
     if (e.target.getAttribute("inputmode") === "numeric") text = text.replace(/\D/g, "")
+    if (!text.length) return
+    this.fillFrom(e.target, text)
+  }
+
+  // Distribute a multi-character string across the slots starting at `slot`
+  // (shared by paste and autofill), then park focus after the last filled one.
+  fillFrom(slot, text) {
     const chars = text.split("")
-    if (!chars.length) return
-    const start = this.slotTargets.indexOf(e.target)
-    this.slotTargets.slice(start).forEach((slot, i) => { if (chars[i] != null) slot.value = chars[i] })
+    const start = this.slotTargets.indexOf(slot)
+    this.slotTargets.slice(start).forEach((s, i) => { if (chars[i] != null) s.value = chars[i] })
     this.focusSlot(Math.min(start + chars.length, this.slotTargets.length - 1))
     this.syncValue()
   }

data/app/components/phlex_kit/masked_input/masked_input.rb

@@ -1,7 +1,7 @@
 module PhlexKit
   # Text input with an inline mask. Ported from ruby_ui's RubyUI::MaskedInput —
   # ruby_ui uses the `maska` JS lib; PhlexKit ships a small dependency-free mask
-  # controller (#=digit, A=letter, *=any) driven by a data-mask attribute. Swap in
+  # controller (#=digit, A=letter, *=any alphanumeric) driven by a data-mask attribute. Swap in
   # maska by replacing masked_input_controller.js if you need its full feature set.
   class MaskedInput < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)

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

@@ -1,18 +1,28 @@
 import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="phlex-kit--masked-input". Lightweight, dependency-
-// free mask driven by a data-mask pattern (# = digit, A = letter, * = any). Swap
-// in `maska` (ruby_ui's choice) here if you need a fuller mask engine.
+// free mask driven by a data-mask pattern (# = digit, A = letter, * = any
+// alphanumeric — formatting characters are stripped before matching, so *
+// cannot match punctuation; swap in `maska` (ruby_ui's choice) if you need a
+// fuller mask engine).
 export default class extends Controller {
   connect() {
     this.mask = this.element.getAttribute("data-mask") || ""
     if (!this.mask) return
-    this.onInput = () => this.apply()
+    // Skip IME composition updates — masking mid-composition mangles the text.
+    this.onInput = (e) => { if (!e.isComposing) this.apply() }
     this.element.addEventListener("input", this.onInput)
   }
   disconnect() { if (this.onInput) this.element.removeEventListener("input", this.onInput) }
   apply() {
-    const raw = this.element.value.replace(/[^0-9A-Za-z]/g, "")
+    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).
+    const caret = el.selectionStart ?? el.value.length
+    const rawBefore = el.value.slice(0, caret).replace(/[^0-9A-Za-z]/g, "").length
+
+    const raw = el.value.replace(/[^0-9A-Za-z]/g, "")
     let out = "", i = 0
     for (const t of this.mask) {
       if (i >= raw.length) break
@@ -21,6 +31,15 @@ export default class extends Controller {
       else if (t === "*") { out += raw[i++] }
       else { out += t; if (raw[i] === t) i++ }
     }
-    this.element.value = out
+    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)
+    }
   }
 }

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

@@ -84,11 +84,18 @@ export default class extends Controller {
   // cleanup): roving focus while a menu is open, ArrowDown-opens while closed.
   onKeydown(e) {
     if (!this.openMenu) {
-      if (e.key !== "ArrowDown") return
       const menu = e.target.closest("[data-phlex-kit--menubar-target=\"menu\"]")
       if (!menu) return
-      e.preventDefault()
-      this.show(menu, true)
+      if (e.key === "ArrowDown") {
+        e.preventDefault()
+        this.show(menu, true)
+      } else if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+        // Closed bar: left/right move focus between the triggers (APG).
+        e.preventDefault()
+        const menus = this.menuTargets
+        const next = menus[(menus.indexOf(menu) + (e.key === "ArrowRight" ? 1 : -1) + menus.length) % menus.length]
+        next?.querySelector("[aria-expanded], a, button, [tabindex]")?.focus()
+      }
       return
     }
     const items = this.items(this.openMenu)
@@ -114,17 +121,51 @@ export default class extends Controller {
         e.preventDefault()
         items[items.length - 1]?.focus()
         break
+      case "Enter":
+      case " ":
+        // Explicit click so label rows (checkbox/radio) activate — labels
+        // have no native keyboard activation (and this gives links Space).
+        if (index >= 0) {
+          e.preventDefault()
+          items[index].click()
+        }
+        break
       case "ArrowRight":
         e.preventDefault()
-        this.shift(1)
+        // 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":
+      case "ArrowLeft": {
         e.preventDefault()
-        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
+      }
     }
   }
 
+  // Focus the first row of a sub trigger's panel. The panel opens on
+  // :focus-within, so focus the trigger first, then hop into the revealed
+  // panel's first visible item.
+  enterSub(trigger) {
+    trigger.focus()
+    const panel = trigger.closest(".pk-menubar-sub")?.querySelector(".pk-menubar-sub-content")
+    if (!panel) return
+    const first = [...panel.querySelectorAll("[role^=\"menuitem\"]")]
+      .find((el) => !el.closest("[data-disabled]") && el.getClientRects().length > 0)
+    first?.focus()
+  }
+
   // Mirrors a checkbox/radio item's native input state onto the item's
   // aria-checked (radios also reset their group's siblings).
   syncChecked(e) {
@@ -148,7 +189,10 @@ export default class extends Controller {
   items(menu) {
     const panel = this.panel(menu)
     if (!panel) return []
+    // getClientRects also skips rows inside a CLOSED sub panel (its
+    // display:none comes from the hover/focus-within CSS, not .pk-hidden) —
+    // focus() on those silently fails and the roving nav jams there.
     return [...panel.querySelectorAll("[role^=\"menuitem\"]")]
-      .filter((el) => !el.closest("[data-disabled]") && !el.closest(".pk-hidden"))
+      .filter((el) => !el.closest("[data-disabled]") && el.getClientRects().length > 0)
   }
 }

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

@@ -6,7 +6,9 @@ module PhlexKit
       div(**mix({
         class: "pk-menubar-item pk-menubar-sub-trigger",
         role: "menuitem",
-        tabindex: "0",
+        # -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",
         aria: { haspopup: "menu" }
       }, @attrs)) do
         block&.call

data/app/components/phlex_kit/navigation_menu/navigation_menu.css

@@ -39,7 +39,10 @@
   position-anchor: --pk-nav-item;
   inset: auto;
   position-area: block-end span-inline-end;
-  position-try-fallbacks: flip-block;
+  /* flip-inline too: a 16rem panel on an item near the right viewport edge
+     otherwise clips (same bug class popover fixed in #38). The hover
+     bridges span the block-axis gap, which flip-inline doesn't change. */
+  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
   /* the [popover] UA style sets overflow:auto, which would clip the
      negative-offset ::before bridge below */
   overflow: visible;

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

@@ -6,7 +6,7 @@ module PhlexKit
       button(**mix({
         type: :button,
         class: "pk-navigation-menu-trigger",
-        aria: { haspopup: "menu", expanded: "false" },
+        aria: { expanded: "false" }, # no haspopup="menu": the panel deliberately has no menu role (matching Radix/shadcn)
         data: { action: "click->phlex-kit--menubar#toggle mouseenter->phlex-kit--menubar#switch" }
       }, @attrs)) do
         block&.call

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

@@ -1,13 +1,25 @@
 import { Controller } from "@hotwired/stimulus"
 
 // PhlexKit's stand-in for react-resizable-panels behind shadcn's Resizable:
-// dragging a handle rebalances the flex-grow of the two panels around it.
+// dragging (or arrow-keying) a handle rebalances the flex-grow of the two
+// panels around it. The handle is a focusable role="separator", so it also
+// carries the ARIA value contract: aria-valuenow tracks the leading panel's
+// share of the pair, and aria-orientation follows the group direction (a
+// handle in a horizontal group is a vertical separator).
 // Connects to data-controller="phlex-kit--resizable"
 export default class extends Controller {
   static targets = ["panel", "handle"]
   static values = { direction: { type: String, default: "horizontal" } }
 
+  handleTargetConnected(handle) {
+    handle.setAttribute("aria-orientation", this.directionValue === "horizontal" ? "vertical" : "horizontal")
+    handle.setAttribute("aria-valuemin", "0")
+    handle.setAttribute("aria-valuemax", "100")
+    this.syncValuenow(handle)
+  }
+
   start(e) {
+    if (e.button !== 0 || !e.isPrimary) return
     const handle = e.currentTarget
     const prev = handle.previousElementSibling
     const next = handle.nextElementSibling
@@ -20,6 +32,10 @@ export default class extends Controller {
       startPos: horizontal ? e.clientX : e.clientY,
       prevSize: sizeOf(prev),
       nextSize: sizeOf(next),
+      // The drag redistributes the PAIR's combined flex-grow, not a fixed
+      // constant: normalizing to 2 rescaled the pair against untouched
+      // siblings, so in a 25/25/50 group the 50 panel ballooned on first drag.
+      pairGrow: this.growOf(prev) + this.growOf(next) || 2,
     }
     try { handle.setPointerCapture(e.pointerId) } catch {}
 
@@ -27,8 +43,9 @@ export default class extends Controller {
       const delta = (horizontal ? ev.clientX : ev.clientY) - drag.startPos
       const total = drag.prevSize + drag.nextSize
       const prevSize = Math.min(Math.max(drag.prevSize + delta, 0), total)
-      prev.style.flexGrow = (prevSize / total) * 2
-      next.style.flexGrow = ((total - prevSize) / total) * 2
+      prev.style.flexGrow = (prevSize / total) * drag.pairGrow
+      next.style.flexGrow = ((total - prevSize) / total) * drag.pairGrow
+      this.syncValuenow(handle)
     }
     const onUp = () => {
       handle.removeEventListener("pointermove", onMove)
@@ -39,4 +56,49 @@ export default class extends Controller {
     handle.addEventListener("pointerup", onUp)
     handle.addEventListener("pointercancel", onUp)
   }
+
+  // Arrow keys resize by 5% of the pair per press (matching the drag axis);
+  // Home/End collapse the leading panel to its min/max.
+  keydown(e) {
+    const handle = e.currentTarget
+    const prev = handle.previousElementSibling
+    const next = handle.nextElementSibling
+    if (!prev || !next) return
+
+    const horizontal = this.directionValue === "horizontal"
+    const steps = horizontal
+      ? { ArrowLeft: -0.05, ArrowRight: 0.05 }
+      : { ArrowUp: -0.05, ArrowDown: 0.05 }
+
+    const pairGrow = this.growOf(prev) + this.growOf(next) || 2
+    let share = this.growOf(prev) / (pairGrow || 1)
+    if (e.key in steps) {
+      share = Math.min(1, Math.max(0, share + steps[e.key]))
+    } else if (e.key === "Home") {
+      share = 0
+    } else if (e.key === "End") {
+      share = 1
+    } else {
+      return
+    }
+    e.preventDefault()
+
+    prev.style.flexGrow = share * pairGrow
+    next.style.flexGrow = (1 - share) * pairGrow
+    this.syncValuenow(handle)
+  }
+
+  growOf(el) {
+    const g = parseFloat(getComputedStyle(el).flexGrow)
+    return Number.isFinite(g) ? g : 1
+  }
+
+  syncValuenow(handle) {
+    const prev = handle.previousElementSibling
+    const next = handle.nextElementSibling
+    if (!prev || !next) return
+    const pair = this.growOf(prev) + this.growOf(next)
+    const share = pair > 0 ? this.growOf(prev) / pair : 0.5
+    handle.setAttribute("aria-valuenow", String(Math.round(share * 100)))
+  }
 }

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

@@ -12,10 +12,12 @@ module PhlexKit
         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"
+          action: "pointerdown->phlex-kit--resizable#start keydown->phlex-kit--resizable#keydown"
         }
       }, @attrs)) do
         span(class: "pk-resizable-handle-grip", aria: { hidden: "true" }) if @with_handle

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

@@ -2,11 +2,13 @@ module PhlexKit
   # Custom dropdown select, ported from ruby_ui's RubyUI::Select — the styled
   # popover (Image #2), NOT the native <select> (that's PhlexKit::NativeSelect). Unlike
   # the rest of the kit this component IS JS-driven: it keeps ruby_ui's Stimulus
-  # wiring (`phlex-kit--select` / `phlex-kit--select-item`, in
-  # app/javascript/controllers/ruby_ui/), since the open/close, selection, and
-  # keyboard nav are the point. The one change from upstream: the controller drops
-  # the `@floating-ui/dom` dependency and positions the panel with plain CSS
-  # (opens directly below the trigger). Tailwind → vanilla `.pk-select-*` (select.css).
+  # wiring (`phlex-kit--select`), since the open/close, selection, and keyboard
+  # nav are the point. Two changes from upstream: the controller drops the
+  # `@floating-ui/dom` dependency and positions the panel with plain CSS (opens
+  # directly below the trigger), and selection flips aria-selected via the
+  # instance-scoped itemTargets rather than upstream's document-scoped
+  # `.pk-select-item` outlet (which clobbered every other Select on the page).
+  # Tailwind → vanilla `.pk-select-*` (select.css).
   #
   # Multi-part. The hidden SelectInput carries the form value/name; SelectTrigger +
   # SelectValue are the closed-state button; SelectContent > SelectGroup >
@@ -34,8 +36,7 @@ module PhlexKit
         data: {
           controller: "phlex-kit--select",
           phlex_kit__select_open_value: "false",
-          action: "click@window->phlex-kit--select#clickOutside",
-          phlex_kit__select_phlex_kit__select_item_outlet: ".pk-select-item"
+          action: "click@window->phlex-kit--select#clickOutside"
         }
       }, @attrs), &block)
     end

data/app/components/phlex_kit/select/select_controller.js

@@ -8,7 +8,6 @@ import { Controller } from "@hotwired/stimulus";
 export default class extends Controller {
   static targets = ["trigger", "content", "input", "value", "item"];
   static values = { open: Boolean };
-  static outlets = ["phlex-kit--select-item"];
 
   connect() {
     this.generateItemsIds();
@@ -17,13 +16,20 @@ export default class extends Controller {
   selectItem(event) {
     event.preventDefault();
 
-    this.phlexKitSelectItemOutlets.forEach((item) => item.handleSelectItem(event));
+    // currentTarget, not target: the click may land on a child of the item
+    // (target.dataset.value would be undefined). itemTargets, not a
+    // document-scoped outlet: outlets match `.pk-select-item` page-wide and
+    // clobbered every other Select's aria-selected.
+    const item = event.currentTarget;
+    this.itemTargets.forEach((el) => {
+      el.setAttribute("aria-selected", el === item ? "true" : "false");
+    });
 
     const oldValue = this.inputTarget.value;
-    const newValue = event.target.dataset.value;
+    const newValue = item.dataset.value;
 
     this.inputTarget.value = newValue;
-    this.valueTarget.innerText = event.target.innerText;
+    this.valueTarget.innerText = item.innerText;
 
     this.dispatchOnChange(oldValue, newValue);
     this.closeContent();

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

@@ -21,7 +21,6 @@ module PhlexKit
         "aria-selected": (@selected ? "true" : "false"),
         data: {
           value: @value,
-          controller: "phlex-kit--select-item",
           action: "click->phlex-kit--select#selectItem keydown.enter->phlex-kit--select#selectItem " \
                   "keydown.down->phlex-kit--select#handleKeyDown keydown.up->phlex-kit--select#handleKeyUp " \
                   "keydown.esc->phlex-kit--select#handleEsc",