lostcoords-ui 0.4.1 → 0.6.0

data/app/javascript/lostcoords/ui/controllers/lc_code_block_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["toggle"]
+
+  toggle() {
+    this.setExpanded(!this.element.hasAttribute("data-expanded"))
+  }
+
+  copyFailed() {
+    this.setExpanded(true)
+  }
+
+  setExpanded(expanded) {
+    this.element.toggleAttribute("data-expanded", expanded)
+    if (!this.hasToggleTarget) return
+
+    this.toggleTarget.setAttribute("aria-expanded", String(expanded))
+    this.toggleTarget.textContent = expanded
+      ? this.toggleTarget.dataset.collapseLabel
+      : this.toggleTarget.dataset.expandLabel
+  }
+}

data/app/javascript/lostcoords/ui/controllers/{disclosure_controller.js → lc_collapsible_controller.js}

@@ -1,9 +1,9 @@
 import { Controller } from "@hotwired/stimulus"
-import { prefersReducedMotion } from "helpers/viewport"
+import { prefersReducedMotion } from "lostcoords/ui/helpers/viewport"
 
 // Animates a <details> both ways and keeps what it reveals on screen. Only
 // user toggles go through here: programmatic opens (validation) already scroll
-// to the field they care about. Durations live in ui/disclosure.css.
+// to the field they care about. Durations live in ui/collapsible.css.
 export default class extends Controller {
   // Where the panel's height can't ease to `auto` in CSS (Safari), ease the
   // <details> itself between measured heights.
@@ -40,7 +40,7 @@ export default class extends Controller {
       from,
       this.element.offsetHeight,
       duration,
-      "--ease-out-expo",
+      "--lc-ease-out-expo",
     )
     animation.finished.then(
       () => animation.cancel(),
@@ -55,7 +55,7 @@ export default class extends Controller {
     this.element.toggleAttribute("data-closing", true)
     const duration = Math.max(...this.transitionDurations())
     if (!this.constructor.easesHeightInCss) {
-      this.animateHeight(this.element.offsetHeight, this.closedHeight(), duration, "--ease-out")
+      this.animateHeight(this.element.offsetHeight, this.closedHeight(), duration, "--lc-ease-out")
     }
     this.closeTimeout = setTimeout(() => {
       this.element.open = false

data/app/javascript/lostcoords/ui/controllers/{confirm_dialog_controller.js → lc_confirm_dialog_controller.js}

@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
-import { showContextDialog } from "helpers/context_dialog"
-import { registerDialog } from "helpers/dialog"
+import { showContextDialog } from "lostcoords/ui/helpers/context_dialog"
+import { registerDialog } from "lostcoords/ui/helpers/dialog"
 
 export default class extends Controller {
   static targets = ["dialog"]
@@ -16,8 +16,8 @@ export default class extends Controller {
     if (!dialog || dialog.open) return
 
     this.activeDialog = dialog
-    if (dialog.matches(".context-dialog")) {
-      showContextDialog(dialog, this.element.querySelector("[data-row-menu-target='popover']"))
+    if (dialog.matches(".lc-dialog-context")) {
+      showContextDialog(dialog, this.element.querySelector("[data-lc-menu-target='popover']"))
     } else {
       dialog.showModal()
     }

data/app/javascript/lostcoords/ui/controllers/{modal_controller.js → lc_dialog_controller.js}

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { registerDialog } from "helpers/dialog"
+import { registerDialog } from "lostcoords/ui/helpers/dialog"
 
 // Opens a dialog whose body is a Turbo frame fetched on open. It reloads on every
 // open, so what it shows is never staler than the page that opened it.

data/app/javascript/lostcoords/ui/controllers/{emoji_picker_controller.js → lc_emoji_picker_controller.js}

@@ -1,8 +1,11 @@
-import { CatalogPicker } from "helpers/catalog_picker"
-import { prefersReducedMotion } from "helpers/viewport"
+import { CatalogPicker } from "lostcoords/ui/helpers/catalog_picker"
+import { registerDismissable } from "lostcoords/ui/helpers/dismiss_stack"
+import { menuItems, navigateMenu } from "lostcoords/ui/helpers/menu_keys"
+import { navigate } from "lostcoords/ui/helpers/roving_focus"
+import { prefersReducedMotion } from "lostcoords/ui/helpers/viewport"
 
 const TONE_MODIFIERS = ["", "\u{1F3FB}", "\u{1F3FC}", "\u{1F3FD}", "\u{1F3FE}", "\u{1F3FF}"]
-const TONE_STORAGE_KEY = "lostcoords_ui:emoji-picker:tone"
+const TONE_STORAGE_KEY = "lostcoords_ui:lc-emoji-picker:tone"
 
 function markCurrent(element, current) {
   element.setAttribute("aria-current", String(current))
@@ -25,7 +28,7 @@ export default class extends CatalogPicker {
   }
 
   static optionKey = "emoji"
-  static catalogClass = "emoji-picker__catalog"
+  static catalogClass = "lc-emoji-picker__catalog"
   static previewTargets = ["previewEmoji", "previewName"]
 
   connect() {
@@ -36,6 +39,7 @@ export default class extends CatalogPicker {
   }
 
   disconnect() {
+    this.unregisterTones?.()
     this.clearPopover()
     super.disconnect()
   }
@@ -151,13 +155,33 @@ export default class extends CatalogPicker {
     })
   }
 
+  navigateTabs(event) {
+    navigate(event, this.tabTargets, { orientation: "horizontal", wrap: true })
+  }
+
+  // Escape closes the tone menu before the picker around it.
   toggleTones(event) {
     event.preventDefault()
     event.stopPropagation()
-    const open = this.toneMenuTarget.hidden
-    this.toneMenuTarget.hidden = !open
-    this.toneToggleTarget.setAttribute("aria-expanded", String(open))
-    if (open) this.syncTones()
+    if (!this.toneMenuTarget.hidden) return this.closeTones()
+
+    this.toneMenuTarget.hidden = false
+    this.toneToggleTarget.setAttribute("aria-expanded", "true")
+    this.syncTones()
+    this.unregisterTones = registerDismissable({
+      element: this.toneMenuTarget,
+      type: "popover",
+      close: () => this.closeTones(),
+      restoreFocus: () => this.toneToggleTarget.focus({ preventScroll: true }),
+    })
+    if (event.detail === 0) {
+      const items = menuItems(this.toneMenuTarget)
+      ;(items.find((item) => item.getAttribute("aria-current") === "true") || items[0])?.focus()
+    }
+  }
+
+  navigateTones(event) {
+    navigateMenu(event, this.toneMenuTarget, { orientation: "both" })
   }
 
   selectTone(event) {
@@ -174,7 +198,11 @@ export default class extends CatalogPicker {
 
   closeTones() {
     if (!this.hasToneMenuTarget) return
+    this.unregisterTones?.()
+    this.unregisterTones = null
+    const hadFocus = this.toneMenuTarget.contains(document.activeElement)
     this.toneMenuTarget.hidden = true
+    if (hadFocus) this.toneToggleTarget.focus({ preventScroll: true })
     this.toneToggleTarget.setAttribute("aria-expanded", "false")
   }
 
@@ -255,7 +283,7 @@ export default class extends CatalogPicker {
   renderRecent(emojis) {
     if (!this.hasRecentTarget) return
 
-    const grid = this.recentTarget.querySelector(".emoji-picker__grid")
+    const grid = this.recentTarget.querySelector(".lc-emoji-picker__grid")
     const count = this.recentTarget.querySelector(".count")
     if (!grid) return
 
@@ -322,7 +350,7 @@ export default class extends CatalogPicker {
     return {
       duration,
       settle: duration && 280,
-      transition: "transform 260ms var(--ease-out-expo, ease-out)",
+      transition: "transform 260ms var(--lc-ease-out-expo, ease-out)",
       offscreen: "translateY(100%)",
     }
   }

data/app/javascript/lostcoords/ui/controllers/lc_kbd_controller.js

@@ -0,0 +1,12 @@
+import { Controller } from "@hotwired/stimulus"
+import { formatShortcut } from "lostcoords/ui/helpers/shortcuts"
+
+// Shows a key hint in the platform's own notation: "mod+k" reads ⌘ K on
+// Apple platforms. The server renders the Ctrl form, which stays without JS.
+export default class extends Controller {
+  static values = { keys: String }
+
+  keysValueChanged() {
+    if (this.keysValue) this.element.textContent = formatShortcut(this.keysValue)
+  }
+}

data/app/javascript/lostcoords/ui/controllers/{row_menu_controller.js → lc_menu_controller.js}

@@ -1,5 +1,9 @@
-import { FloatingPanel } from "helpers/floating_panel"
-import { focusFirstMenuItem, navigateMenu } from "helpers/menu_keys"
+import { FloatingPanel } from "lostcoords/ui/helpers/floating_panel"
+import {
+  focusFirstMenuItem,
+  focusLastMenuItem,
+  navigateMenu,
+} from "lostcoords/ui/helpers/menu_keys"
 
 // The phone dock's action stack lays itself out over the fixed nav, so it
 // passes lift: false and stays in place instead of lifting into the top layer.
@@ -9,15 +13,33 @@ export default class extends FloatingPanel {
     this.focusOutHandler = this.handleFocusOut.bind(this)
     this.pointerDownHandler = this.handlePointerDown.bind(this)
     this.keydownHandler = (event) => navigateMenu(event, this.popoverTarget)
+    this.triggerKeydownHandler = this.handleTriggerKeydown.bind(this)
     this.focusOutSuppressed = false
     this.focusOutSuppressionTimer = null
   }
 
+  connect() {
+    super.connect()
+    this.triggerTarget.addEventListener("keydown", this.triggerKeydownHandler)
+  }
+
   disconnect() {
+    this.triggerTarget.removeEventListener("keydown", this.triggerKeydownHandler)
     this.clearFocusOutSuppression()
     super.disconnect()
   }
 
+  // Arrow Down opens the menu on its first item, Arrow Up on its last.
+  handleTriggerKeydown(event) {
+    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return
+    if (event.altKey || event.ctrlKey || event.metaKey) return
+
+    event.preventDefault()
+    this.open()
+    if (event.key === "ArrowDown") focusFirstMenuItem(this.popoverTarget)
+    else focusLastMenuItem(this.popoverTarget)
+  }
+
   toggle(event) {
     event.preventDefault()
     event.stopPropagation()
@@ -29,7 +51,7 @@ export default class extends FloatingPanel {
 
   toggleFromRow(event) {
     if (this.popoverTarget.contains(event.target)) return
-    if (event.target.closest("a, button, input, select, textarea, [data-row-menu-ignore]")) return
+    if (event.target.closest("a, button, input, select, textarea, [data-lc-menu-ignore]")) return
 
     event.preventDefault()
     this.isOpen ? this.close() : this.open()

data/app/javascript/lostcoords/ui/controllers/{ui_popover_controller.js → lc_popover_controller.js}

@@ -1,4 +1,4 @@
-import { FloatingPanel } from "helpers/floating_panel"
+import { FloatingPanel } from "lostcoords/ui/helpers/floating_panel"
 
 export default class extends FloatingPanel {
   toggle(event) {

data/app/javascript/lostcoords/ui/controllers/{ui_selection_controller.js → lc_selection_controller.js}

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { navigate } from "lostcoords/ui/helpers/roving_focus"
 
 export default class extends Controller {
   static targets = ["option", "input"]
@@ -22,27 +23,18 @@ export default class extends Controller {
   }
 
   select(event) {
-    const option = event.target.closest('[data-ui-selection-target~="option"]')
+    const option = event.target.closest('[data-lc-selection-target~="option"]')
     if (!this.options.includes(option)) return
     this.apply(option)
     this.changed(option)
   }
 
+  // All four arrows move and select, wrapping at the ends; Left and Right
+  // follow the text direction.
   navigate(event) {
-    const current = this.options.indexOf(event.target)
-    if (current < 0) return
-    const next = {
-      ArrowRight: (current + 1) % this.options.length,
-      ArrowDown: (current + 1) % this.options.length,
-      ArrowLeft: (current - 1 + this.options.length) % this.options.length,
-      ArrowUp: (current - 1 + this.options.length) % this.options.length,
-      Home: 0,
-      End: this.options.length - 1,
-    }[event.key]
-    if (next === undefined) return
-    event.preventDefault()
-    const option = this.options[next]
-    option.focus()
+    const option = navigate(event, this.optionTargets, { orientation: "both", wrap: true })
+    if (!option) return
+
     this.apply(option)
     this.changed(option)
   }

data/app/javascript/lostcoords/ui/controllers/{sheet_controller.js → lc_sheet_controller.js}

@@ -1,13 +1,13 @@
 import { Controller } from "@hotwired/stimulus"
-import { holdDocumentScroll } from "helpers/dismiss_stack"
-import { SHEET_TIMING, sheetDuration } from "helpers/sheet_motion"
-import { isSheetViewport, prefersReducedMotion, TEXT_ENTRY } from "helpers/viewport"
+import { holdDocumentScroll } from "lostcoords/ui/helpers/dismiss_stack"
+import { SHEET_TIMING, sheetDuration } from "lostcoords/ui/helpers/sheet_motion"
+import { isSheetViewport, prefersReducedMotion, TEXT_ENTRY } from "lostcoords/ui/helpers/viewport"
 
 const PROJECTION_MS = 180
 const MEDIUM_FRACTION = 0.5
 const PAGE_SCALE_LOSS = 0.06
-const NO_DRAG = "input[type=range], [data-sheet-no-drag]"
-const HANDLE = "[data-sheet-target~='handle']"
+const NO_DRAG = "input[type=range], [data-lc-sheet-no-drag]"
+const HANDLE = "[data-lc-sheet-target~='handle']"
 const GRABBER_ZONE = 28
 const KEYBOARD_FREE = 0.5
 
@@ -71,9 +71,9 @@ export default class extends Controller {
   // The keyboard rises over the sheet. Safari and in-app browsers shrink the
   // page under it, which would drag a bottom-pinned sheet up and squash it, so
   // the sheet is placed from the top at the height the screen had when it
-  // opened (see --sheet-floor in the CSS).
+  // opened (see --lc-sheet-floor in the CSS).
   pinFloor() {
-    if (this.isSheet) this.element.style.setProperty("--sheet-floor", `${window.innerHeight}px`)
+    if (this.isSheet) this.element.style.setProperty("--lc-sheet-floor", `${window.innerHeight}px`)
   }
 
   closed() {
@@ -330,7 +330,7 @@ export default class extends Controller {
   }
 
   setLargeness(p) {
-    this.element.style.setProperty("--sheet-p", p.toFixed(3))
+    this.element.style.setProperty("--lc-sheet-p", p.toFixed(3))
   }
 
   setPage(p) {
@@ -339,12 +339,12 @@ export default class extends Controller {
       if (p <= 0) return
       this.releaseScroll = holdDocumentScroll()
       const lockedTop = -parseFloat(document.body.style.top || "0")
-      root.style.setProperty("--sheet-page-origin", `${window.scrollY + lockedTop}px`)
-      root.dataset.sheetPage = ""
+      root.style.setProperty("--lc-sheet-page-origin", `${window.scrollY + lockedTop}px`)
+      root.dataset.lcSheetPage = ""
       this.ownsPage = true
     }
-    root.style.setProperty("--sheet-page-p", p.toFixed(3))
-    root.style.setProperty("--sheet-page-scale", (1 - PAGE_SCALE_LOSS * p).toFixed(4))
+    root.style.setProperty("--lc-sheet-page-p", p.toFixed(3))
+    root.style.setProperty("--lc-sheet-page-scale", (1 - PAGE_SCALE_LOSS * p).toFixed(4))
   }
 
   animatePage(p) {
@@ -361,15 +361,15 @@ export default class extends Controller {
     if (!this.ownsPage) return
     this.ownsPage = false
     const root = document.documentElement
-    delete root.dataset.sheetPage
+    delete root.dataset.lcSheetPage
     for (const name of ["p", "scale", "origin", "transition"])
-      root.style.removeProperty(`--sheet-page-${name}`)
+      root.style.removeProperty(`--lc-sheet-page-${name}`)
     this.releaseScroll()
   }
 
   pageTransition(value = prefersReducedMotion() ? "0s" : SHEET_TIMING) {
     if (this.ownsPage || value !== "0s")
-      document.documentElement.style.setProperty("--sheet-page-transition", value)
+      document.documentElement.style.setProperty("--lc-sheet-page-transition", value)
   }
 
   transition() {
@@ -396,8 +396,8 @@ export default class extends Controller {
     style.transform = ""
     style.willChange = ""
     style.blockSize = ""
-    style.removeProperty("--sheet-p")
-    style.removeProperty("--sheet-floor")
+    style.removeProperty("--lc-sheet-p")
+    style.removeProperty("--lc-sheet-floor")
   }
 
   scrollerFor(target) {

data/app/javascript/lostcoords/ui/controllers/lc_shortcut_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from "@hotwired/stimulus"
+import { isEditable } from "lostcoords/ui/helpers/roving_focus"
+import { ariaKeyShortcuts, registerShortcut } from "lostcoords/ui/helpers/shortcuts"
+
+// Binds page-wide keys to the element: a field takes focus and selects its
+// text, anything else is clicked. The element announces its keys through
+// aria-keyshortcuts. See helpers/shortcuts.js for the key syntax.
+export default class extends Controller {
+  static values = { keys: String }
+
+  // Stimulus keeps values across a reconnect (a moved or permanent element)
+  // without calling keysValueChanged again, so connect registers too.
+  connect() {
+    this.register()
+  }
+
+  keysValueChanged() {
+    if (this.connected) this.register()
+  }
+
+  register() {
+    this.connected = true
+    this.unregister?.()
+    this.unregister = null
+    if (!this.keysValue) return
+
+    this.element.setAttribute("aria-keyshortcuts", ariaKeyShortcuts(this.keysValue))
+    this.unregister = registerShortcut(this.element, this.keysValue, () => this.run())
+  }
+
+  disconnect() {
+    this.connected = false
+    this.unregister?.()
+    this.unregister = null
+  }
+
+  run() {
+    if (isEditable(this.element)) {
+      this.element.focus()
+      this.element.select?.()
+    } else {
+      this.element.click()
+    }
+  }
+}

data/app/javascript/lostcoords/ui/controllers/lc_tabs_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus"
+import { navigate } from "lostcoords/ui/helpers/roving_focus"
+
+// The ARIA tabs pattern. Arrow keys follow the tab list's aria-orientation, and
+// Home and End jump to the ends. With automatic activation, moving focus selects
+// the tab; with manual activation, Enter or Space does.
+export default class extends Controller {
+  static targets = ["tab", "panel"]
+  static values = { activation: { type: String, default: "automatic" } }
+
+  select(event) {
+    this.show(event.currentTarget)
+  }
+
+  navigate(event) {
+    const list = event.currentTarget.closest('[role="tablist"]')
+    const tab = navigate(event, this.tabTargets, {
+      orientation:
+        list?.getAttribute("aria-orientation") === "vertical" ? "vertical" : "horizontal",
+      wrap: true,
+    })
+    if (!tab) return
+
+    if (this.activationValue === "manual") this.focusOnly(tab)
+    else this.show(tab)
+  }
+
+  focusOnly(tab) {
+    for (const candidate of this.tabTargets) candidate.tabIndex = candidate === tab ? 0 : -1
+  }
+
+  show(tab) {
+    for (const candidate of this.tabTargets) {
+      const selected = candidate === tab
+      candidate.setAttribute("aria-selected", String(selected))
+      candidate.tabIndex = selected ? 0 : -1
+    }
+    const panelId = tab.getAttribute("aria-controls")
+    for (const panel of this.panelTargets) panel.hidden = panel.id !== panelId
+    this.dispatch("change", { detail: { value: tab.dataset.value } })
+  }
+}

data/app/javascript/lostcoords/ui/controllers/{toast_controller.js → lc_toast_controller.js}

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { prefersReducedMotion } from "helpers/viewport"
+import { prefersReducedMotion } from "lostcoords/ui/helpers/viewport"
 
 export default class extends Controller {
   static values = { timeout: { type: Number, default: 4000 } }
@@ -7,7 +7,7 @@ export default class extends Controller {
   connect() {
     for (const sibling of this.element.parentElement?.children || []) {
       if (sibling === this.element) continue
-      this.application.getControllerForElementAndIdentifier(sibling, "toast")?.dismiss()
+      this.application.getControllerForElementAndIdentifier(sibling, "lc-toast")?.dismiss()
     }
 
     this.startedAt = performance.now()

data/app/javascript/lostcoords/ui/controllers/lc_toast_region_controller.js

@@ -0,0 +1,62 @@
+import { Controller } from "@hotwired/stimulus"
+import { topModalElement } from "lostcoords/ui/helpers/dismiss_stack"
+import { hideTopLayer, showTopLayer, supportsTopLayer } from "lostcoords/ui/helpers/top_layer"
+
+// Shows the region in the top layer while it holds toasts, so no sticky header,
+// sheet or dialog paints over them. Each new toast re-opens the region, which
+// moves it above anything opened since. A modal dialog makes the rest of the
+// page inert, so while one is open the region moves inside it, keeping toasts
+// clickable and announced, and moves back when it closes. Without the Popover
+// API the region stays fixed at --lc-z-toast.
+const homes = new WeakMap()
+
+export default class extends Controller {
+  connect() {
+    if (!supportsTopLayer()) return
+
+    this.observer = new MutationObserver((records) => {
+      if (records.some((record) => record.addedNodes.length > 0)) this.raise()
+      else if (this.element.childElementCount === 0) this.lower()
+    })
+    this.observer.observe(this.element, { childList: true })
+    if (this.element.childElementCount > 0) this.raise()
+  }
+
+  // A modal removed right after closing (before its close event) takes the
+  // region with it; put the region back in the page.
+  disconnect() {
+    this.observer?.disconnect()
+    hideTopLayer(this.element)
+    if (!this.element.isConnected) this.goHome()
+  }
+
+  raise() {
+    const modal = topModalElement()
+    if (modal && !modal.contains(this.element)) return this.moveInto(modal)
+
+    hideTopLayer(this.element)
+    showTopLayer(this.element)
+  }
+
+  lower() {
+    hideTopLayer(this.element)
+    this.goHome()
+  }
+
+  // Moving the region reconnects this controller, which raises it again.
+  moveInto(modal) {
+    if (!homes.has(this.element))
+      homes.set(this.element, { parent: this.element.parentNode, next: this.element.nextSibling })
+    const region = this.element
+    modal.addEventListener("close", () => this.goHome(region), { once: true })
+    modal.append(region)
+  }
+
+  goHome(region = this.element) {
+    const home = homes.get(region)
+    if (!home?.parent.isConnected) return
+
+    homes.delete(region)
+    home.parent.insertBefore(region, home.next?.parentNode === home.parent ? home.next : null)
+  }
+}

data/app/javascript/lostcoords/ui/controllers/lc_tooltip_controller.js

@@ -0,0 +1,54 @@
+import { Controller } from "@hotwired/stimulus"
+import { registerDismissable } from "lostcoords/ui/helpers/dismiss_stack"
+import { liftToTopLayer, onPageLeave } from "lostcoords/ui/helpers/top_layer"
+
+// Opens the tooltip in the top layer, so no stacking context or overflow clip
+// covers it. Without the Popover API it stays in place. Escape closes it before
+// any menu or dialog around it, and it stays hidden until the pointer leaves
+// and focus moves away.
+export default class extends Controller {
+  static targets = ["content"]
+
+  connect() {
+    this.stopPageLeave = onPageLeave(() => this.close({ immediate: true }))
+  }
+
+  disconnect() {
+    this.stopPageLeave?.()
+    this.close({ immediate: true })
+  }
+
+  show(event) {
+    if (event.type === "focusin" && !event.target.matches(":focus-visible")) return
+    if (this.release || this.element.hasAttribute("data-dismissed")) return
+
+    this.element.toggleAttribute("data-open", true)
+    this.release = liftToTopLayer(this.contentTarget, this.element)
+    this.unregister = registerDismissable({
+      type: "tooltip",
+      element: this.element,
+      isOpen: () => this.element.hasAttribute("data-open"),
+      close: () => this.dismiss(),
+    })
+  }
+
+  hide() {
+    if (this.element.matches(":hover") || this.element.querySelector(":focus-visible")) return
+
+    delete this.element.dataset.dismissed
+    this.close()
+  }
+
+  dismiss() {
+    this.element.dataset.dismissed = ""
+    this.close({ immediate: true })
+  }
+
+  close({ immediate = false } = {}) {
+    this.element.toggleAttribute("data-open", false)
+    this.release?.({ immediate })
+    this.release = null
+    this.unregister?.()
+    this.unregister = null
+  }
+}