shadcn_view_components 0.2.0

data/app/assets/javascripts/shadcn/controllers/input_otp_controller.js

@@ -0,0 +1,416 @@
+import { Controller } from "@hotwired/stimulus"
+
+import { ownedElements } from "@supermomonga/shadcn-view-components/aria_relationships"
+
+const IDENTIFIER = "shadcn--input-otp"
+const STYLE_ID = "input-otp-style"
+const AUTOFILL_STYLES = "background: transparent !important; color: transparent !important; " +
+  "border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; " +
+  "-webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;"
+const STYLE_RULES = [
+  "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }",
+  `[data-input-otp]:autofill { ${AUTOFILL_STYLES} }`,
+  `[data-input-otp]:-webkit-autofill { ${AUTOFILL_STYLES} }`,
+  "@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; " +
+    "font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; " +
+    "left: -1px !important; right: 1px !important; } }",
+  "[data-input-otp] + * { pointer-events: all !important; }",
+]
+
+function ensureRuntimeStyles() {
+  if (document.getElementById(STYLE_ID)) return
+
+  const style = document.createElement("style")
+  style.id = STYLE_ID
+  document.head.appendChild(style)
+  if (!style.sheet) return
+
+  for (const rule of STYLE_RULES) safeInsertRule(style.sheet, rule)
+}
+
+/** @param {CSSStyleSheet} sheet @param {string} rule */
+function safeInsertRule(sheet, rule) {
+  try {
+    sheet.insertRule(rule)
+  } catch {
+    globalThis.console.error("input-otp could not insert CSS rule:", rule)
+  }
+}
+
+/** @extends {Controller<HTMLElement>} */
+export default class InputOTPController extends Controller {
+  /** @type {HTMLInputElement | null} */
+  input = null
+
+  /** @type {HTMLElement | null} */
+  display = null
+
+  /** @type {HTMLFormElement | null} */
+  form = null
+
+  /** @type {HTMLElement[]} */
+  slots = []
+
+  /** @type {RegExp | null} */
+  pattern = null
+
+  /** @type {boolean} */
+  composing = false
+
+  /** @type {boolean} */
+  isIOS = false
+
+  /** @type {string} */
+  acceptedValue = ""
+
+  /** @type {number} */
+  acceptedSelectionStart = 0
+
+  /** @type {number} */
+  acceptedSelectionEnd = 0
+
+  /** @type {"forward" | "backward" | "none"} */
+  acceptedSelectionDirection = "none"
+
+  /** @type {number | null} */
+  previousSelectionStart = null
+
+  /** @type {number | null} */
+  previousSelectionEnd = null
+
+  /** @type {"forward" | "backward" | "none" | null} */
+  previousSelectionDirection = null
+
+  /** @type {() => void} */
+  onSelectionChange = () => {
+    if (this.composing) return
+    this.normalizeSelection()
+  }
+
+  /** @type {(event: ClipboardEvent) => void} */
+  onPaste = (event) => this.paste(event)
+
+  /** @type {() => void} */
+  onFormReset = () => {
+    const input = this.input
+    window.queueMicrotask(() => {
+      if (!input || this.input !== input || !this.element.isConnected) return
+
+      // reset後のdefaultValueは初期値と同じくpattern検証を経ないbaselineにする。
+      this.acceptBaseline()
+      this.syncPresentation()
+    })
+  }
+
+  connect() {
+    this.input = /** @type {HTMLInputElement | null} */ (
+      ownedElements(this.element, "input[data-slot='input-otp']", IDENTIFIER)[0] ?? null
+    )
+    this.display = ownedElements(this.element, "[data-input-otp-display]", IDENTIFIER)[0] ?? null
+    this.slots = ownedElements(
+      this.element,
+      "[data-slot='input-otp-slot'][data-index]",
+      IDENTIFIER,
+    )
+    this.form = this.input?.form ?? null
+    this.composing = false
+    this.isIOS = Boolean(window.CSS?.supports?.("-webkit-touch-callout", "none"))
+
+    if (!this.input) return
+
+    // input-otp 1.4.2と同じく、patternは利用者が完全一致を含めて指定する。
+    // 空patternは制限なしとして扱い、不正な正規表現は接続時にfail-fastする。
+    this.pattern = this.input.pattern ? new RegExp(this.input.pattern) : null
+    ensureRuntimeStyles()
+    this.acceptBaseline()
+    this.syncPresentation()
+
+    document.addEventListener("selectionchange", this.onSelectionChange, true)
+    this.form?.addEventListener("reset", this.onFormReset)
+    this.input.addEventListener("paste", this.onPaste)
+  }
+
+  disconnect() {
+    document.removeEventListener("selectionchange", this.onSelectionChange, true)
+    this.form?.removeEventListener("reset", this.onFormReset)
+    this.input?.removeEventListener("paste", this.onPaste)
+    this.clearActivePresentation()
+
+    this.input = null
+    this.display = null
+    this.form = null
+    this.slots = []
+    this.pattern = null
+    this.composing = false
+    this.isIOS = false
+    this.previousSelectionStart = null
+    this.previousSelectionEnd = null
+    this.previousSelectionDirection = null
+  }
+
+  /** @param {Event} [event] */
+  sync(event) {
+    const inputEvent = /** @type {InputEvent | undefined} */ (event)
+    if (!this.input || this.composing || inputEvent?.isComposing) return
+
+    if (event?.type === "focus") this.normalizeFocusSelection()
+    if (!event || event.type === "input" || event.type === "change") this.acceptOrRestoreValue()
+    this.syncPresentation()
+  }
+
+  compositionStart() {
+    this.composing = true
+  }
+
+  compositionEnd() {
+    if (!this.input) return
+
+    this.composing = false
+    this.acceptOrRestoreValue()
+    this.syncPresentation()
+  }
+
+  acceptBaseline() {
+    if (!this.input) return
+
+    const baseline = this.truncate(this.input.value)
+    const selection = this.selectionWithin(baseline.length)
+    if (baseline !== this.input.value) this.input.value = baseline
+    this.applySelection(selection)
+    this.acceptedValue = baseline
+    this.captureAcceptedSelection()
+    this.capturePreviousSelection()
+  }
+
+  acceptOrRestoreValue() {
+    const input = this.input
+    if (!input) return
+
+    const previousLength = this.acceptedValue.length
+    const rawValue = input.value
+    const candidate = this.truncate(rawValue)
+    const selection = this.selectionWithin(candidate.length)
+    const changed = candidate !== this.acceptedValue
+    const rejected = changed && candidate !== "" && this.pattern && !this.pattern.test(candidate)
+
+    if (rejected) {
+      this.restoreAcceptedValue()
+      return
+    }
+
+    if (candidate !== rawValue) input.value = candidate
+    this.applySelection(selection)
+    this.acceptedValue = candidate
+    this.captureAcceptedSelection()
+    if (candidate.length < previousLength) document.dispatchEvent(new window.Event("selectionchange"))
+  }
+
+  normalizeFocusSelection() {
+    const input = this.input
+    if (!input) return
+
+    const start = Math.min(input.value.length, Math.max(0, this.maximumLength - 1))
+    input.setSelectionRange(start, input.value.length)
+    this.capturePreviousSelection()
+  }
+
+  normalizeSelection() {
+    const input = this.input
+    if (!input) return
+    if (document.activeElement !== input) {
+      this.syncPresentation()
+      return
+    }
+
+    const selectionStart = input.selectionStart
+    const selectionEnd = input.selectionEnd
+    const maximum = this.maximumLength
+    const value = input.value
+    let normalizedStart = -1
+    let normalizedEnd = -1
+    /** @type {"forward" | "backward" | "none" | undefined} */
+    let normalizedDirection
+
+    if (value.length !== 0 && selectionStart !== null && selectionEnd !== null) {
+      const collapsed = selectionStart === selectionEnd
+      const inserting = selectionStart === value.length && value.length < maximum
+
+      if (collapsed && !inserting) {
+        const caret = selectionStart
+        if (caret === 0) {
+          normalizedStart = 0
+          normalizedEnd = 1
+          normalizedDirection = "forward"
+        } else if (caret === maximum) {
+          normalizedStart = caret - 1
+          normalizedEnd = caret
+          normalizedDirection = "backward"
+        } else if (maximum > 1 && value.length > 1) {
+          let offset = 0
+          if (this.previousSelectionStart !== null && this.previousSelectionEnd !== null) {
+            normalizedDirection = caret < this.previousSelectionEnd ? "backward" : "forward"
+            const wasInserting = this.previousSelectionStart === this.previousSelectionEnd &&
+              this.previousSelectionStart < maximum
+            if (normalizedDirection === "backward" && !wasInserting) offset = -1
+          }
+          normalizedStart = offset + caret
+          normalizedEnd = offset + caret + 1
+        }
+      }
+    }
+
+    if (normalizedStart !== -1 && normalizedEnd !== -1 && normalizedStart !== normalizedEnd) {
+      input.setSelectionRange(normalizedStart, normalizedEnd, normalizedDirection)
+    }
+    this.capturePreviousSelection()
+    this.syncPresentation()
+  }
+
+  /** @param {ClipboardEvent} event */
+  paste(event) {
+    const input = this.input
+    if (!this.isIOS || !input || !event.clipboardData) return
+
+    event.preventDefault()
+    const content = event.clipboardData.getData("text/plain")
+    const start = input.selectionStart ?? 0
+    const end = input.selectionEnd ?? start
+    const candidate = this.truncate(
+      start !== end
+        ? this.acceptedValue.slice(0, start) + content + this.acceptedValue.slice(end)
+        : this.acceptedValue.slice(0, start) + content + this.acceptedValue.slice(start),
+    )
+    if (candidate !== "" && this.pattern && !this.pattern.test(candidate)) return
+
+    input.value = candidate
+    this.acceptedValue = candidate
+    const selectionStart = Math.min(candidate.length, Math.max(0, this.maximumLength - 1))
+    input.setSelectionRange(selectionStart, candidate.length)
+    this.captureAcceptedSelection()
+    this.capturePreviousSelection()
+    this.syncPresentation()
+    input.dispatchEvent(new window.InputEvent("input", {
+      bubbles: true,
+      composed: true,
+      data: content,
+      inputType: "insertFromPaste",
+    }))
+  }
+
+  syncPresentation() {
+    const input = this.input
+    if (!input) return
+
+    const value = input.value
+    const focused = document.activeElement === input && !input.disabled
+    const selectionStart = input.selectionStart ?? value.length
+    const selectionEnd = input.selectionEnd ?? selectionStart
+    const start = Math.min(selectionStart, selectionEnd)
+    const end = Math.max(selectionStart, selectionEnd)
+    const collapsed = start === end
+    const length = this.maximumLength
+    const activeIndex = collapsed && length > 0 ? Math.min(start, length - 1) : -1
+    const invalid = input.getAttribute("aria-invalid") === "true"
+
+    this.display?.toggleAttribute("data-disabled", input.disabled)
+    this.display?.toggleAttribute("data-invalid", invalid)
+
+    for (const slot of this.slots) {
+      const index = Number(slot.dataset.index)
+      const active = focused && Number.isInteger(index) && (
+        collapsed ? index === activeIndex : index >= start && index < end
+      )
+      const caretVisible = active && collapsed && index === start && start < length && value[index] === undefined
+      const character = this.part(slot, "input-otp-character")
+      const caret = this.part(slot, "input-otp-caret")
+
+      if (character) character.textContent = value[index] ?? ""
+      if (caret) caret.hidden = !caretVisible
+      slot.dataset.active = String(active)
+      slot.toggleAttribute("data-disabled", input.disabled)
+      slot.setAttribute("aria-invalid", String(invalid))
+    }
+
+    if (input.value === this.acceptedValue) this.captureAcceptedSelection()
+  }
+
+  clearActivePresentation() {
+    for (const slot of this.slots) {
+      slot.dataset.active = "false"
+      const caret = this.part(slot, "input-otp-caret")
+      if (caret) caret.hidden = true
+    }
+  }
+
+  restoreAcceptedValue() {
+    const input = this.input
+    if (!input) return
+
+    input.value = this.acceptedValue
+    input.setSelectionRange(
+      Math.min(this.acceptedSelectionStart, input.value.length),
+      Math.min(this.acceptedSelectionEnd, input.value.length),
+      this.acceptedSelectionDirection,
+    )
+  }
+
+  captureAcceptedSelection() {
+    const input = this.input
+    if (!input) return
+
+    this.acceptedSelectionStart = input.selectionStart ?? input.value.length
+    this.acceptedSelectionEnd = input.selectionEnd ?? this.acceptedSelectionStart
+    this.acceptedSelectionDirection = input.selectionDirection ?? "none"
+  }
+
+  capturePreviousSelection() {
+    const input = this.input
+    if (!input) return
+
+    this.previousSelectionStart = input.selectionStart
+    this.previousSelectionEnd = input.selectionEnd
+    this.previousSelectionDirection = input.selectionDirection
+  }
+
+  /** @param {number} maximum @returns {{ start: number, end: number, direction: "forward" | "backward" | "none" }} */
+  selectionWithin(maximum) {
+    const input = this.input
+    if (!input) return { start: 0, end: 0, direction: "none" }
+
+    return {
+      start: Math.min(input.selectionStart ?? maximum, maximum),
+      end: Math.min(input.selectionEnd ?? maximum, maximum),
+      direction: input.selectionDirection ?? "none",
+    }
+  }
+
+  /** @param {{ start: number, end: number, direction: "forward" | "backward" | "none" }} selection */
+  applySelection(selection) {
+    this.input?.setSelectionRange(selection.start, selection.end, selection.direction)
+  }
+
+  /** @param {string} value @returns {string} */
+  truncate(value) {
+    const maximum = this.input?.maxLength ?? -1
+    return maximum >= 0 ? value.slice(0, maximum) : value
+  }
+
+  /** @param {HTMLElement} slot @param {string} name @returns {HTMLElement | null} */
+  part(slot, name) {
+    const element = /** @type {HTMLElement | null} */ (
+      slot.querySelector(`[data-slot='${name}']`)
+    )
+    return element?.closest(`[data-controller~='${IDENTIFIER}']`) === this.element ? element : null
+  }
+
+  /** @returns {number} */
+  get maximumLength() {
+    const maximum = this.input?.maxLength ?? -1
+    if (maximum >= 0) return maximum
+
+    return this.slots.reduce((length, slot) => {
+      const index = Number(slot.dataset.index)
+      return Number.isInteger(index) ? Math.max(length, index + 1) : length
+    }, 0)
+  }
+}

data/app/assets/javascripts/shadcn/controllers/menu_controller.js

@@ -0,0 +1,286 @@
+import { Controller } from "@hotwired/stimulus"
+
+import { pointAnchor } from "@supermomonga/shadcn-view-components/floating_position"
+import {
+  activateMenuItemFromKeyboard,
+  applyMenuTriggerState,
+  associateMenuElements,
+  directMenuItems,
+  isOwnedMenuElement,
+  MenuPopoverManager,
+  ownedMenuElements,
+  scopedMenuElement,
+} from "@supermomonga/shadcn-view-components/menu_popover"
+
+const SUB_SCOPE_SELECTOR = "[data-slot$='-sub']"
+const SUB_TRIGGER_SELECTOR = "[data-slot$='-sub-trigger']"
+
+// DropdownMenu / ContextMenu固有のARIA menu状態を管理する。
+// MenubarとNavigationMenuはDOM構造・操作モデルが異なるため専用controllerを使う。
+export default class MenuController extends Controller {
+  /** @type {HTMLElement | null} */
+  rootMenu = null
+
+  /** @type {HTMLElement | null} */
+  rootTrigger = null
+
+  /** @type {Map<HTMLElement, HTMLElement>} */
+  triggerToPopover = new Map()
+
+  /** @type {Map<HTMLElement, HTMLElement>} */
+  popoverToTrigger = new Map()
+
+  /** @type {MenuPopoverManager | null} */
+  popovers = null
+
+  /** @type {(event: MouseEvent) => void} */
+  onClick = (event) => {
+    if (!(event.target instanceof Element) || !isOwnedMenuElement(this.root, event.target)) return
+
+    const item = /** @type {HTMLElement | null} */ (event.target.closest("[role^='menuitem']"))
+    if (!item || this.triggerToPopover.has(item)) return
+    const menu = /** @type {HTMLElement | null} */ (item.closest("[role='menu']"))
+    if (menu && this.popovers?.isOpen(menu)) this.closeAll()
+  }
+
+  /** @type {(event: KeyboardEvent) => void} */
+  onKeydown = (event) => this.navigate(event)
+
+  /** @type {(event: FocusEvent) => void} */
+  onFocusOut = (event) => {
+    const next = event.relatedTarget
+    if (next instanceof Node && this.popovers?.containsOpenPopover(next)) return
+    this.closeAll()
+  }
+
+  /** @type {(event: PointerEvent) => void} */
+  onDocPointerDown = (event) => {
+    if (!this.popovers) return
+    this.popovers.beginPointerDown()
+    if (!(event.target instanceof Node)) return
+
+    for (const popover of this.popovers.openPopovers().reverse()) {
+      const trigger = this.popoverToTrigger.get(popover)
+      if (popover.contains(event.target)) continue
+      if (!trigger?.matches("[data-slot='context-menu-trigger']") && trigger?.contains(event.target)) {
+        this.popovers.recordOpenTriggerPointerDown(event, popover, trigger)
+        continue
+      }
+      this.popovers.hide(popover)
+    }
+  }
+
+  connect() {
+    this.configurePairs()
+    this.popovers = new MenuPopoverManager(this.root, (popover, state) => this.syncState(popover, state))
+    this.popovers.connect()
+    this.root.addEventListener("click", this.onClick, true)
+    this.root.addEventListener("keydown", this.onKeydown, true)
+    this.root.addEventListener("focusout", this.onFocusOut)
+    document.addEventListener("pointerdown", this.onDocPointerDown)
+  }
+
+  disconnect() {
+    this.root.removeEventListener("click", this.onClick, true)
+    this.root.removeEventListener("keydown", this.onKeydown, true)
+    this.root.removeEventListener("focusout", this.onFocusOut)
+    document.removeEventListener("pointerdown", this.onDocPointerDown)
+    this.popovers?.disconnect()
+    this.popovers = null
+    this.rootMenu = null
+    this.rootTrigger = null
+    this.triggerToPopover.clear()
+    this.popoverToTrigger.clear()
+  }
+
+  configurePairs() {
+    this.triggerToPopover.clear()
+    this.popoverToTrigger.clear()
+
+    for (const scope of ownedMenuElements(this.root, SUB_SCOPE_SELECTOR)) {
+      const trigger = scopedMenuElement(this.root, scope, SUB_SCOPE_SELECTOR, SUB_TRIGGER_SELECTOR)
+      const popover = scopedMenuElement(this.root, scope, SUB_SCOPE_SELECTOR, "[popover][role='menu']")
+      if (trigger && popover) this.addPair(trigger, popover, "shadcn-submenu")
+    }
+
+    this.rootMenu = ownedMenuElements(this.root, "[popover][role='menu']")
+      .find((popover) => !this.popoverToTrigger.has(popover)) ?? null
+    this.rootTrigger = ownedMenuElements(this.root, "[aria-haspopup='menu']")
+      .find((trigger) => !trigger.matches(SUB_TRIGGER_SELECTOR)) ?? null
+    if (this.rootTrigger && this.rootMenu) this.addPair(this.rootTrigger, this.rootMenu, "shadcn-menu")
+  }
+
+  /** @param {HTMLElement} trigger @param {HTMLElement} popover @param {string} prefix */
+  addPair(trigger, popover, prefix) {
+    associateMenuElements(trigger, popover, prefix)
+    this.triggerToPopover.set(trigger, popover)
+    this.popoverToTrigger.set(popover, trigger)
+  }
+
+  /** @param {Event} event */
+  toggle(event) {
+    if (!(event.currentTarget instanceof HTMLElement)) return
+
+    const popover = this.triggerToPopover.get(event.currentTarget)
+    if (!popover || !this.popovers) return
+    if (this.popovers.consumeOpenTriggerPointer(event, event.currentTarget)) {
+      this.closeMenu(popover)
+      return
+    }
+    if (this.popovers.isOpen(popover)) this.closeMenu(popover)
+    else this.showMenu(popover, event.currentTarget)
+  }
+
+  /** @param {MouseEvent} event */
+  showAt(event) {
+    if (!(event.currentTarget instanceof HTMLElement) || !this.rootMenu || !this.popovers) return
+
+    event.preventDefault()
+    this.popovers.hideAll([this.rootMenu])
+    this.popovers.show(
+      this.rootMenu,
+      pointAnchor(event.clientX, event.clientY, event.currentTarget),
+      { align: "start", alignOffset: 4, side: "right", sideOffset: 0 },
+    )
+    this.focusBoundaryItem(this.rootMenu, "first")
+  }
+
+  /** @param {Event} event */
+  toggleSub(event) {
+    if (!(event.currentTarget instanceof HTMLElement)) return
+
+    const popover = this.triggerToPopover.get(event.currentTarget)
+    if (!popover || !this.popovers) return
+    if (this.popovers.consumeOpenTriggerPointer(event, event.currentTarget)) {
+      this.closeMenu(popover)
+      return
+    }
+    if (this.popovers.isOpen(popover)) this.closeMenu(popover)
+    else this.showMenu(popover, event.currentTarget)
+  }
+
+  activate() {
+    this.closeAll()
+  }
+
+  /** @param {KeyboardEvent} event */
+  navigate(event) {
+    const target = event.target
+    if (!(target instanceof Element) || !isOwnedMenuElement(this.root, target)) return
+
+    if (event.key === "Tab" && (this.popovers?.openPopovers().length ?? 0) > 0) {
+      this.closeAll()
+      return
+    }
+
+    const menu = /** @type {HTMLElement | null} */ (target.closest("[role='menu']"))
+    if (!menu || !this.popovers?.isOpen(menu)) return
+
+    const items = directMenuItems(this.root, menu)
+    const active = menu.ownerDocument.activeElement
+    const current = items.findIndex((item) => (
+      item === target || item.contains(target) || item === active || (active instanceof Node && item.contains(active))
+    ))
+    if (activateMenuItemFromKeyboard(event, items[current])) return
+
+    const keys = ["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Home", "End", "Escape"]
+    if (!keys.includes(event.key)) return
+    event.preventDefault()
+    if (event.key === "Escape") {
+      this.escapeMenu(menu)
+      return
+    }
+    if (event.key === "ArrowRight" && current >= 0) {
+      const submenu = this.triggerToPopover.get(items[current])
+      if (submenu) this.showMenu(submenu, items[current])
+      return
+    }
+    if (event.key === "ArrowLeft") {
+      const parentTrigger = this.popoverToTrigger.get(menu)
+      if (menu !== this.rootMenu && parentTrigger) {
+        this.closeMenu(menu)
+        parentTrigger.focus()
+      }
+      return
+    }
+    if (items.length === 0) return
+
+    let next = current
+    if (event.key === "ArrowDown") next = (current + 1 + items.length) % items.length
+    if (event.key === "ArrowUp") next = (current - 1 + items.length) % items.length
+    if (event.key === "Home") next = 0
+    if (event.key === "End") next = items.length - 1
+    this.focusItem(menu, items[Math.max(0, next)])
+  }
+
+  /** @param {HTMLElement} menu */
+  escapeMenu(menu) {
+    const trigger = this.popoverToTrigger.get(menu)
+    if (menu === this.rootMenu) {
+      this.closeAll()
+      trigger?.focus()
+      return
+    }
+
+    this.closeMenu(menu)
+    trigger?.focus()
+  }
+
+  /** @param {HTMLElement} menu @param {HTMLElement} anchor */
+  showMenu(menu, anchor) {
+    if (!this.popovers) return
+
+    const isSubmenu = menu !== this.rootMenu
+    this.popovers.show(menu, anchor, isSubmenu
+      ? { align: "start", alignOffset: -3, side: "right", sideOffset: 0 }
+      : { align: "start", side: "bottom", sideOffset: 4 })
+    this.focusBoundaryItem(menu, "first")
+  }
+
+  /** @param {HTMLElement} menu */
+  closeMenu(menu) {
+    this.closeDescendants(menu)
+    this.popovers?.hide(menu)
+  }
+
+  closeAll() {
+    this.popovers?.hideAll()
+  }
+
+  /** @param {HTMLElement} parent */
+  closeDescendants(parent) {
+    for (const popover of this.popovers?.openPopovers() ?? []) {
+      if (popover !== parent && parent.contains(popover)) this.popovers?.hide(popover)
+    }
+  }
+
+  /** @param {HTMLElement} popover @param {"open" | "closed"} state */
+  syncState(popover, state) {
+    const trigger = this.popoverToTrigger.get(popover)
+    applyMenuTriggerState(trigger, state, { expanded: !trigger?.matches("[data-slot='context-menu-trigger']") })
+    if (state === "closed") this.closeDescendants(popover)
+  }
+
+  /** @param {HTMLElement} menu @param {"first" | "last"} boundary */
+  focusBoundaryItem(menu, boundary) {
+    const items = directMenuItems(this.root, menu)
+    this.focusItem(menu, boundary === "first" ? items[0] : items.at(-1))
+  }
+
+  /** @param {HTMLElement} menu @param {HTMLElement | undefined} item */
+  focusItem(menu, item) {
+    if (!item) return
+
+    for (const candidate of directMenuItems(this.root, menu)) {
+      const highlighted = candidate === item
+      candidate.dataset.highlighted = highlighted ? "true" : "false"
+      candidate.tabIndex = highlighted ? 0 : -1
+    }
+    item.focus()
+  }
+
+  /** @returns {HTMLElement} */
+  get root() {
+    return /** @type {HTMLElement} */ (this.element)
+  }
+}