phlex_kit 0.7.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() {
@@ -19,7 +28,9 @@ export default class extends Controller {
   }
 
   onClickOutside(event) {
-    if (!this.openValue) return;
+    // 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;
 
     event.preventDefault();
@@ -32,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

@@ -14,8 +14,11 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = ["menu"]
 
-  initialize() {
-    this.openMenu = null
+  // Which menu is open derives from the live :popover-open state, never a
+  // stored field — a stale field would make toggle() call showPopover() on
+  // an already-open panel (InvalidStateError) or strand an open one.
+  get openMenu() {
+    return this.menuTargets.find((menu) => this.panel(menu)?.matches(":popover-open")) ?? null
   }
 
   disconnect() {
@@ -57,7 +60,6 @@ export default class extends Controller {
       this.close()
       this.panel(menu)?.showPopover()
       menu.querySelector("[aria-expanded]")?.setAttribute("aria-expanded", "true")
-      this.openMenu = menu
     }
     if (focus) this.items(menu)[0]?.focus()
   }
@@ -70,7 +72,6 @@ export default class extends Controller {
     if (panel?.matches(":popover-open")) panel.hidePopover()
     const trigger = menu.querySelector("[aria-expanded]")
     trigger?.setAttribute("aria-expanded", "false")
-    this.openMenu = null
     if (opts.refocus === true) trigger?.focus()
   }
 
@@ -83,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)
@@ -113,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) {
@@ -147,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/popover/popover.css

@@ -3,8 +3,8 @@
    (title + muted description) stacks at gap-0.5. `align: :end` flips the
    panel to the trigger's end edge. Tokens global.
    The panel is a native [popover] in the top layer, anchor-positioned to
-   the trigger (Baseline 2026); position-try-fallbacks flips it above the
-   trigger when it would overflow the viewport bottom. anchor-scope keeps
+   the trigger (Baseline 2026); position-try-fallbacks flips it on either
+   axis (or both) when it would overflow a viewport edge. anchor-scope keeps
    sibling popovers from resolving to each other's anchors. */
 .pk-popover { display: inline-block; anchor-scope: --pk-popover; }
 .pk-popover-trigger { display: inline-block; anchor-name: --pk-popover; }
@@ -14,7 +14,7 @@
   inset: auto;
   position-area: block-end span-inline-end;
   margin: .25rem 0 0;
-  position-try-fallbacks: flip-block;
+  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
   flex-direction: column; gap: .625rem;
   width: 18rem;
   border: 1px solid color-mix(in oklab, var(--pk-text) 10%, transparent);

data/app/components/phlex_kit/popover/popover_controller.js

@@ -2,14 +2,37 @@ import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="phlex-kit--popover". The panel is a native
 // [popover=auto] — the browser owns light dismiss + Escape; CSS anchor
-// positioning places it (popover.css). Light dismiss fires on pointerdown
-// outside the panel, so a click on the trigger would close-then-reopen:
-// armToggle records the open state at pointerdown and toggle skips the
-// reopen.
+// positioning places it (popover.css). Toggling is native too: connect()
+// points the trigger's button at the panel via popoverTargetElement, so the
+// browser handles mouse + keyboard activation and exposes the expanded
+// state to assistive tech — no imperative toggle, no invoker/light-dismiss
+// race. Button-less triggers (the date picker's input) fall back to a
+// click toggle; wasOpen records the open state at pointerdown because
+// light dismiss fires first and the click would otherwise reopen.
 export default class extends Controller {
   static targets = ["trigger", "content"]
-  armToggle() { this.wasOpen = this.contentTarget.matches(":popover-open") }
-  toggle(e) { e?.preventDefault(); if (this.wasOpen) return; this.contentTarget.showPopover() }
+
+  connect() {
+    const invoker = this.triggerTarget.querySelector("button")
+    if (invoker) {
+      invoker.popoverTargetElement = this.contentTarget
+    } else {
+      this.triggerTarget.addEventListener("pointerdown", this.armToggle)
+      this.triggerTarget.addEventListener("click", this.toggle)
+    }
+  }
+
+  disconnect() {
+    this.triggerTarget.removeEventListener("pointerdown", this.armToggle)
+    this.triggerTarget.removeEventListener("click", this.toggle)
+  }
+
+  armToggle = () => { this.wasOpen = this.contentTarget.matches(":popover-open") }
+  toggle = () => {
+    if (this.wasOpen) { this.wasOpen = false; return }
+    this.contentTarget.togglePopover()
+  }
+
   contentTargetConnected(el) {
     el.addEventListener("toggle", (e) => { el.dataset.state = e.newState === "open" ? "open" : "closed" })
   }

data/app/components/phlex_kit/popover/popover_trigger.rb

@@ -1,8 +1,11 @@
 module PhlexKit
+  # Wrapper the panel anchors to. Carries no actions: the controller wires
+  # the button inside it to the panel via popoverTargetElement, so the
+  # browser owns toggling (mouse + keyboard). See popover.rb.
   class PopoverTrigger < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      div(**mix({ class: "pk-popover-trigger", data: { phlex_kit__popover_target: "trigger", action: "pointerdown->phlex-kit--popover#armToggle click->phlex-kit--popover#toggle" } }, @attrs), &)
+      div(**mix({ class: "pk-popover-trigger", data: { phlex_kit__popover_target: "trigger" } }, @attrs), &)
     end
   end
 end