lostcoords-ui 0.4.1

data/app/javascript/lostcoords/ui/helpers/dismiss_stack.js

@@ -0,0 +1,155 @@
+const stack = []
+let nextOrder = 0
+let lockedScrollY = 0
+let scrollHolds = 0
+
+document.addEventListener("keydown", dismissOnEscape, true)
+
+export function registerDismissable(options) {
+  const entry = {
+    type: "panel",
+    isOpen: defaultIsOpen,
+    ...options,
+  }
+  entry.priority ??= priorityFor(entry.type)
+  entry.order = nextOrder++
+
+  stack.push(entry)
+  syncModalScrollLock()
+
+  if (entry.type === "modal" && entry.element instanceof HTMLDialogElement) {
+    entry.cancel = (event) => cancelDialog(event, entry)
+    entry.element.addEventListener("cancel", entry.cancel)
+  }
+
+  return () => unregisterDismissable(entry)
+}
+
+export function holdDocumentScroll() {
+  scrollHolds++
+  syncModalScrollLock()
+
+  let held = true
+  return () => {
+    if (!held) return
+    held = false
+    scrollHolds--
+    syncModalScrollLock()
+  }
+}
+
+export function closeTopDismissable(event) {
+  const entry = topDismissable()
+  if (!entry) return false
+
+  closeEntry(entry, event)
+  return true
+}
+
+function dismissOnEscape(event) {
+  if (event.key !== "Escape" && event.key !== "Esc") return
+  if (!closeTopDismissable(event)) return
+
+  event.preventDefault()
+  event.stopPropagation()
+  event.stopImmediatePropagation()
+}
+
+function cancelDialog(event, dialogEntry) {
+  const entry = topDismissable(dialogEntry.element)
+  if (!entry) return
+
+  event.preventDefault()
+  closeEntry(entry, event)
+}
+
+function closeEntry(entry, event) {
+  const closed = entry.close?.(event)
+  if (closed === false) return
+
+  entry.restoreFocus?.()
+}
+
+function topDismissable(scope = topModal()?.element) {
+  const entries = openEntries()
+  const scopedEntries = scope
+    ? entries.filter((entry) => entry.element === scope || scope.contains(entry.element))
+    : entries
+
+  return scopedEntries.sort((a, b) => a.priority - b.priority || a.order - b.order).at(-1)
+}
+
+function topModal() {
+  return openEntries()
+    .filter((entry) => entry.type === "modal")
+    .at(-1)
+}
+
+function openEntries() {
+  return stack.filter((entry) => entry.element?.isConnected && entry.isOpen.call(entry))
+}
+
+function unregisterDismissable(entry) {
+  const index = stack.indexOf(entry)
+  if (index >= 0) stack.splice(index, 1)
+
+  if (entry.cancel) {
+    entry.element.removeEventListener("cancel", entry.cancel)
+    entry.cancel = null
+  }
+
+  syncModalScrollLock()
+}
+
+function defaultIsOpen() {
+  if (this.element instanceof HTMLDialogElement) return this.element.open
+  if (this.element.hidden) return false
+  return true
+}
+
+function priorityFor(type) {
+  if (type === "popover") return 30
+  if (type === "panel") return 20
+  return 10
+}
+
+function syncModalScrollLock() {
+  if (
+    scrollHolds > 0 ||
+    openEntries().some((entry) => entry.type === "modal" && entry.lockScroll !== false)
+  ) {
+    lockDocumentScroll()
+    return
+  }
+
+  unlockDocumentScroll()
+}
+
+function lockDocumentScroll() {
+  const body = document.body
+  if (!body || body.dataset.modalScrollLock === "true") return
+
+  lockedScrollY = window.scrollY
+  body.dataset.modalScrollLock = "true"
+  body.style.position = "fixed"
+  body.style.inset = "0"
+  body.style.top = `-${lockedScrollY}px`
+  // Pinning the body drags the sticky nav off with the scrolled-away page;
+  // the nav offsets itself by this to stay where it was.
+  body.style.setProperty("--scroll-lock-y", `${lockedScrollY}px`)
+  body.style.inlineSize = "100%"
+}
+
+function unlockDocumentScroll() {
+  const body = document.body
+  if (body?.dataset.modalScrollLock !== "true") return
+
+  body.style.position = ""
+  body.style.inset = ""
+  body.style.top = ""
+  body.style.removeProperty("--scroll-lock-y")
+  body.style.inlineSize = ""
+  delete body.dataset.modalScrollLock
+  window.scrollTo({ top: lockedScrollY, behavior: "instant" })
+  lockedScrollY = 0
+}

data/app/javascript/lostcoords/ui/helpers/floating_panel.js

@@ -0,0 +1,108 @@
+import { Controller } from "@hotwired/stimulus"
+import { registerDismissable } from "helpers/dismiss_stack"
+import { liftToTopLayer } from "helpers/top_layer"
+
+const BEFORE_OPEN = "overlay:before-open"
+const PAGE_LEAVES = ["turbo:before-cache", "turbo:before-visit", "turbo:before-render"]
+
+export class FloatingPanel extends Controller {
+  static targets = ["trigger", "popover"]
+  static values = { lift: { type: Boolean, default: true } }
+
+  static togglesHidden = false
+  static closesOnOutsideClick = true
+
+  initialize() {
+    this.closeForOther = (event) => {
+      if (event.detail?.source !== this) this.close()
+    }
+    this.closeOnOutsideClick = (event) => {
+      if (!this.element.contains(event.target)) this.close()
+    }
+    this.closeForPageLeave = () => this.closeNow({ immediate: true })
+  }
+
+  connect() {
+    document.addEventListener(BEFORE_OPEN, this.closeForOther)
+    for (const type of PAGE_LEAVES) document.addEventListener(type, this.closeForPageLeave)
+    window.addEventListener("pagehide", this.closeForPageLeave)
+  }
+
+  disconnect() {
+    document.removeEventListener(BEFORE_OPEN, this.closeForOther)
+    for (const type of PAGE_LEAVES) document.removeEventListener(type, this.closeForPageLeave)
+    window.removeEventListener("pagehide", this.closeForPageLeave)
+    this.release({ immediate: true })
+  }
+
+  toggle(event) {
+    event?.preventDefault()
+    event?.stopPropagation()
+    this.isOpen ? this.close() : this.open()
+  }
+
+  open(opener) {
+    if (this.isOpen) return
+    this.opener = opener instanceof Element ? opener : this.triggerTarget
+
+    document.dispatchEvent(new CustomEvent(BEFORE_OPEN, { detail: { source: this } }))
+    this.show()
+    if (this.lifts) this.releaseLift = liftToTopLayer(this.popoverTarget, this.opener)
+    this.triggerTarget.setAttribute("aria-expanded", "true")
+
+    if (this.constructor.closesOnOutsideClick)
+      document.addEventListener("click", this.closeOnOutsideClick)
+    this.unregisterDismissable = registerDismissable({
+      element: this.element,
+      type: "popover",
+      close: () => this.close(),
+      restoreFocus: () => this.focusOnClose?.focus({ preventScroll: true }),
+      isOpen: () => this.isOpen,
+    })
+  }
+
+  close() {
+    this.closeNow()
+  }
+
+  closeNow({ immediate = false } = {}) {
+    if (!this.isOpen) return
+
+    this.hide()
+    this.release({ immediate })
+    this.triggerTarget.setAttribute("aria-expanded", "false")
+    this.afterClose()
+  }
+
+  afterClose() {}
+
+  release({ immediate = false } = {}) {
+    this.releaseLift?.({ immediate })
+    this.releaseLift = null
+    document.removeEventListener("click", this.closeOnOutsideClick)
+    this.unregisterDismissable?.()
+    this.unregisterDismissable = null
+  }
+
+  show() {
+    if (this.constructor.togglesHidden) this.popoverTarget.hidden = false
+    this.popoverTarget.toggleAttribute("data-open", true)
+  }
+
+  hide() {
+    this.popoverTarget.toggleAttribute("data-open", false)
+    if (this.constructor.togglesHidden) this.popoverTarget.hidden = true
+  }
+
+  get isOpen() {
+    return this.popoverTarget.hasAttribute("data-open")
+  }
+
+  get lifts() {
+    return this.liftValue
+  }
+
+  get focusOnClose() {
+    return this.opener
+  }
+}

data/app/javascript/lostcoords/ui/helpers/menu_keys.js

@@ -0,0 +1,27 @@
+const ITEMS = '[role^="menuitem"]:not([disabled]):not([aria-disabled="true"])'
+
+function items(menu) {
+  return [...menu.querySelectorAll(ITEMS)].filter((item) => item.getClientRects().length > 0)
+}
+
+export function focusFirstMenuItem(menu) {
+  items(menu)[0]?.focus()
+}
+
+// The ARIA menu pattern: arrows move between items and wrap, Home/End jump.
+export function navigateMenu(event, menu) {
+  const list = items(menu)
+  if (list.length === 0) return
+
+  const index = list.indexOf(document.activeElement)
+  const next = {
+    ArrowDown: (index + 1) % list.length,
+    ArrowUp: (index - 1 + list.length) % list.length,
+    Home: 0,
+    End: list.length - 1,
+  }[event.key]
+  if (next === undefined) return
+
+  event.preventDefault()
+  list[next].focus()
+}

data/app/javascript/lostcoords/ui/helpers/sheet_motion.js

@@ -0,0 +1,13 @@
+import { prefersReducedMotion } from "helpers/viewport"
+// The sheet beat lives in CSS (--sheet-duration, --ease-sheet) so CSS- and
+// JS-driven slides can't drift apart. Inline transitions use the variables
+// directly; timers need the duration in milliseconds.
+export const SHEET_TIMING = "var(--sheet-duration) var(--ease-sheet)"
+
+export function sheetDuration() {
+  if (prefersReducedMotion()) return 0
+  const value = getComputedStyle(document.documentElement)
+    .getPropertyValue("--sheet-duration")
+    .trim()
+  return value.endsWith("ms") ? parseFloat(value) : parseFloat(value) * 1000
+}

data/app/javascript/lostcoords/ui/helpers/top_layer.js

@@ -0,0 +1,102 @@
+// Floating panels (menus, pickers) open in the browser's top layer so no
+// stacking context or overflow clip can paint over them: every <section> is
+// its own stacking context, so a z-index alone can never lift a menu above the
+// next section, and a menu opened inside a <dialog> must clear the dialog too.
+//
+// The panel's stylesheet still decides where it sits. The caller makes the
+// panel visible in place, liftToTopLayer measures that designed spot relative
+// to its trigger, then re-pins it there as a fixed top-layer popover, follows
+// the trigger on scroll and resize, and flips above when it would leave the
+// viewport. Browsers without the Popover API keep the in-place panel.
+
+const MARGIN = 8
+const PLACEMENT = ["position", "inset", "top", "left", "margin", "translate", "inlineSize"]
+
+const lifts = new WeakMap()
+const pinned = new WeakSet()
+
+export function liftToTopLayer(panel, trigger) {
+  if (typeof panel.showPopover !== "function") return () => {}
+
+  lifts.get(panel)?.()
+  if (pinned.has(panel)) reset(panel)
+
+  const anchor = trigger.getBoundingClientRect()
+  const placed = panel.getBoundingClientRect()
+  const offsetX = placed.left - anchor.left
+  const offsetY = placed.top - anchor.top
+  const gap = placed.top - anchor.bottom
+
+  panel.setAttribute("popover", "manual")
+  panel.showPopover()
+  Object.assign(panel.style, {
+    position: "fixed",
+    inset: "auto",
+    margin: "0",
+    translate: "none",
+    inlineSize: `${placed.width}px`,
+  })
+  pinned.add(panel)
+
+  let frame = null
+  const place = () => {
+    frame = null
+    const a = trigger.getBoundingClientRect()
+    const width = panel.offsetWidth
+    const height = panel.offsetHeight
+    const { top: minTop, bottom: maxBottom } = visibleBounds(trigger)
+    const right = document.documentElement.clientWidth - MARGIN
+
+    let top = a.top + offsetY
+    const flipped = a.top - gap - height
+    if (top + height > maxBottom - MARGIN && flipped >= minTop + MARGIN) top = flipped
+    top = Math.max(minTop + MARGIN, Math.min(top, maxBottom - MARGIN - height))
+
+    panel.style.left = `${Math.max(MARGIN, Math.min(a.left + offsetX, right - width))}px`
+    panel.style.top = `${top}px`
+  }
+  const schedule = () => (frame ??= requestAnimationFrame(place))
+
+  place()
+  const resizes = new ResizeObserver(schedule)
+  resizes.observe(panel)
+  window.addEventListener("scroll", schedule, { capture: true, passive: true })
+  window.addEventListener("resize", schedule, { passive: true })
+
+  const release = ({ immediate = false } = {}) => {
+    if (lifts.get(panel) !== release) return
+    lifts.delete(panel)
+    if (frame) cancelAnimationFrame(frame)
+    resizes.disconnect()
+    window.removeEventListener("scroll", schedule, { capture: true })
+    window.removeEventListener("resize", schedule)
+    if (immediate) return reset(panel)
+
+    // Keep the pinned spot while the closing transition plays out, then hand
+    // the panel back to its stylesheet unless it has been lifted again.
+    Promise.allSettled(panel.getAnimations().map((animation) => animation.finished)).then(() => {
+      if (!lifts.has(panel)) reset(panel)
+    })
+    if (panel.matches(":popover-open")) panel.hidePopover()
+  }
+  lifts.set(panel, release)
+  return release
+}
+
+function reset(panel) {
+  pinned.delete(panel)
+  if (panel.matches(":popover-open")) panel.hidePopover()
+  panel.removeAttribute("popover")
+  for (const property of PLACEMENT) panel.style[property] = ""
+}
+
+// Chrome floating over the bottom of the page ([data-top-layer-floor], a phone
+// nav) acts as the floor: a panel that would open under it flips or tucks above.
+function visibleBounds(trigger) {
+  let bottom = window.innerHeight
+  const floor = document.querySelector("body > [data-top-layer-floor]")
+  if (floor?.offsetParent && !floor.contains(trigger))
+    bottom = Math.min(bottom, floor.getBoundingClientRect().top)
+
+  return { top: 0, bottom }
+}

data/app/javascript/lostcoords/ui/helpers/viewport.js

@@ -0,0 +1,13 @@
+const SHEET_QUERY = "(width < 40rem)"
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)"
+
+export const TEXT_ENTRY =
+  "textarea, [contenteditable]:not([contenteditable=false]), input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=image], [type=hidden])"
+
+export function isSheetViewport() {
+  return window.matchMedia(SHEET_QUERY).matches
+}
+
+export function prefersReducedMotion() {
+  return window.matchMedia(REDUCED_MOTION_QUERY).matches
+}

data/app/views/lostcoords/ui/components/_emoji_picker.html.erb

@@ -0,0 +1,176 @@
+<%# locals: (form:, field:, value: nil, quick: [], recent: [], recent_scope: nil, label:, catalog_url:, picker_class: nil, trigger_class: nil, popover_class: nil, auto_submit: false, attributes: {}) %>
+<% quick = Array(quick).uniq
+  recent = Array(recent).uniq
+  selected = value.presence || form.object&.public_send(field).presence || quick.first || lc_emoji_picker_groups.first[:emojis].first
+  selected_is_quick = quick.include?(selected)
+  trigger_label = selected_is_quick ? "＋" : selected
+  tone_modifiers = [ "", "🏻", "🏼", "🏽", "🏾", "🏿" ]
+  tone_names = %w[default light medium_light medium medium_dark dark] %>
+
+<%= tag.div(**lc_attributes({ class: lc_tw("emoji-picker", picker_class), data: { controller: "emoji-picker", emoji_picker_auto_submit_value: auto_submit, emoji_picker_catalog_url_value: catalog_url, emoji_picker_recent_scope_value: recent_scope } }, attributes)) do %>
+  <%= form.hidden_field field,
+      value: selected,
+      data: { emoji_picker_target: "input" } %>
+
+  <% quick.each do |emoji| %>
+    <button
+      type="button"
+      class="emoji-picker__choice"
+      aria-current="<%= emoji == selected %>"
+      data-emoji="<%= emoji %>"
+      data-action="click->emoji-picker#select"
+    >
+      <%= emoji %>
+    </button>
+  <% end %>
+
+  <div class="emoji-picker__more">
+    <button
+      type="button"
+      class="emoji-picker__trigger <%= trigger_class %>"
+      aria-current="<%= !selected_is_quick %>"
+      data-emoji-picker-target="trigger"
+      data-action="click->emoji-picker#toggle"
+      data-default-label="＋"
+      data-value="<%= selected %>"
+      aria-label="<%= label %>"
+      aria-expanded="false"
+    >
+      <%= trigger_label %>
+    </button>
+
+    <div
+      class="emoji-picker__popover <%= popover_class %>"
+      data-emoji-picker-target="popover"
+      data-controller="sheet"
+      data-action="click->emoji-picker#select pointerover->emoji-picker#preview focusin->emoji-picker#preview sheet:dismiss->emoji-picker#close"
+      role="dialog"
+      aria-label="<%= label %>"
+      hidden
+    >
+      <span class="emoji-picker__handle" data-sheet-target="handle" aria-hidden="true"></span>
+
+      <div class="emoji-picker__search">
+        <div class="emoji-picker__search-field">
+          <svg class="emoji-picker__search-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+            <circle cx="9" cy="9" r="6" stroke="currentColor" stroke-width="1.6" />
+            <path d="m14 14 3.5 3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
+          </svg>
+
+          <input
+            class="emoji-picker__search-input"
+            type="search"
+            inputmode="search"
+            autocomplete="off"
+            autocapitalize="off"
+            spellcheck="false"
+            enterkeyhint="search"
+            aria-label="<%= lc_t("lostcoords.ui.emoji_picker.search_label") %>"
+            placeholder="<%= lc_t("lostcoords.ui.emoji_picker.search_placeholder") %>"
+            data-emoji-picker-target="searchInput"
+            data-action="input->emoji-picker#filter keydown->emoji-picker#onSearchKeydown"
+          >
+        </div>
+
+        <div class="emoji-picker__tones" data-emoji-picker-target="tones">
+          <button
+            type="button"
+            class="emoji-picker__tone-toggle"
+            data-emoji-picker-target="toneToggle"
+            data-action="click->emoji-picker#toggleTones"
+            aria-haspopup="true"
+            aria-expanded="false"
+            aria-label="<%= lc_t("lostcoords.ui.emoji_picker.skin_tone") %>"
+          >✋</button>
+
+          <div class="emoji-picker__tone-menu <%= popover_class %>" data-emoji-picker-target="toneMenu" role="menu" hidden>
+            <% tone_modifiers.each_with_index do |modifier, index| %>
+              <button
+                type="button"
+                class="emoji-picker__tone"
+                role="menuitemradio"
+                data-tone-index="<%= index %>"
+                data-action="click->emoji-picker#selectTone"
+                aria-label="<%= lc_t("lostcoords.ui.emoji_picker.skin_tones.#{tone_names[index]}") %>"
+              >✋<%= modifier %></button>
+            <% end %>
+          </div>
+        </div>
+      </div>
+
+      <nav class="emoji-picker__tabs" data-emoji-picker-target="tabs" aria-label="<%= lc_t("lostcoords.ui.emoji_picker.categories_nav") %>">
+        <% if recent.any? %>
+          <button
+            type="button"
+            class="emoji-picker__tab"
+            data-emoji-picker-target="tab"
+            data-target-section="recent"
+            data-action="click->emoji-picker#jumpTo"
+            aria-label="<%= lc_t("lostcoords.ui.emoji_picker.recently_used") %>"
+          >🕘</button>
+        <% end %>
+
+        <% lc_emoji_picker_groups.each do |group| %>
+          <button
+            type="button"
+            class="emoji-picker__tab"
+            data-emoji-picker-target="tab"
+            data-target-section="<%= group[:key] %>"
+            data-action="click->emoji-picker#jumpTo"
+            aria-label="<%= group[:name] %>"
+          ><%= group[:icon] %></button>
+        <% end %>
+      </nav>
+
+      <div class="emoji-picker__body" data-emoji-picker-target="body">
+        <% if recent.any? %>
+          <section
+            class="emoji-picker__recent"
+            data-section="recent"
+            aria-label="<%= lc_t('lostcoords.ui.emoji_picker.recently_used') %>"
+            data-emoji-picker-target="recent"
+          >
+            <header class="emoji-picker__category-head">
+              <h3><%= lc_t("lostcoords.ui.emoji_picker.recently_used") %></h3>
+              <span class="count"><%= recent.size %></span>
+            </header>
+
+            <div class="emoji-picker__grid">
+              <% recent.each do |emoji| %>
+                <button
+                  type="button"
+                  aria-current="<%= emoji == selected %>"
+                  data-emoji="<%= emoji %>"
+                  data-search="<%= emoji %>"
+                  data-search-name="<%= lc_emoji_picker_search_name(emoji) %>"
+                  title="<%= lc_emoji_picker_search_name(emoji) %>"
+                  aria-label="<%= lc_emoji_picker_search_name(emoji) %>"
+                >
+                  <%= emoji %>
+                </button>
+              <% end %>
+            </div>
+          </section>
+        <% end %>
+
+        <section class="emoji-picker__results" data-emoji-picker-target="results" aria-label="<%= lc_t('lostcoords.ui.emoji_picker.search_results') %>" hidden>
+          <header class="emoji-picker__category-head">
+            <h3><%= lc_t("lostcoords.ui.emoji_picker.search_results") %></h3>
+            <span class="count" data-emoji-picker-target="resultsCount">0</span>
+          </header>
+
+          <div class="emoji-picker__grid" data-emoji-picker-target="resultsGrid"></div>
+        </section>
+
+        <p class="emoji-picker__empty" data-emoji-picker-target="empty" hidden>
+          <%= lc_t("lostcoords.ui.emoji_picker.no_results") %>
+        </p>
+      </div>
+
+      <footer class="emoji-picker__preview" data-emoji-picker-target="preview">
+        <span class="emoji-picker__preview-emoji" data-emoji-picker-target="previewEmoji"><%= selected %></span>
+        <span class="emoji-picker__preview-name" data-emoji-picker-target="previewName"><%= lc_emoji_picker_search_name(selected) %></span>
+      </footer>
+    </div>
+  </div>
+<% end %>

data/app/views/lostcoords/ui/components/_emoji_picker_grid.html.erb

@@ -0,0 +1,29 @@
+<% lc_emoji_picker_groups.each do |group| %>
+  <section
+    class="emoji-picker__category"
+    data-section="<%= group[:key] %>"
+    aria-label="<%= group[:name] %>"
+  >
+    <header class="emoji-picker__category-head">
+      <h3><%= group[:name] %></h3>
+      <span class="count"><%= group[:emojis].size %></span>
+    </header>
+
+    <div class="emoji-picker__grid">
+      <% group[:emojis].each do |emoji| %>
+        <button
+          type="button"
+          data-emoji="<%= emoji %>"
+          data-tone="<%= "true" if lc_emoji_picker_toneable?(emoji) %>"
+          data-search="<%= lc_emoji_picker_search_text(emoji) %>"
+          data-search-name="<%= lc_emoji_picker_search_name(emoji) %>"
+          data-search-labels="<%= lc_emoji_picker_search_labels(emoji) %>"
+          title="<%= lc_emoji_picker_search_name(emoji) %>"
+          aria-label="<%= lc_emoji_picker_search_name(emoji) %>"
+        >
+          <%= emoji %>
+        </button>
+      <% end %>
+    </div>
+  </section>
+<% end %>

data/app/views/lostcoords/ui/components/_form_alert.html.erb

@@ -0,0 +1,4 @@
+<%= tag.div class: lc_form_alert_class(extra: local_assigns[:class]), data: { tone: local_assigns.fetch(:tone, :error) }, **local_assigns.fetch(:attributes, {}) do %>
+  <%= lc_form_alert_icon(tone: local_assigns.fetch(:tone, :error)) %>
+  <p class="m-0 min-w-0 text-pretty [overflow-wrap:anywhere]"><%= local_assigns[:message] %></p>
+<% end %>

data/app/views/lostcoords/ui/components/_lc_dialog.html.erb

@@ -0,0 +1,13 @@
+<%# locals: (id:, title:, trigger:, attributes:, content:) %>
+<div data-controller="modal">
+  <button type="button" class="<%= lc_button_class(variant: :secondary) %>" aria-haspopup="dialog" aria-controls="<%= id %>" data-action="modal#open"><%= trigger %></button>
+  <%= tag.dialog(**attributes) do %>
+    <div class="flex flex-col gap-5 p-5">
+      <div class="flex items-center justify-between gap-4">
+        <h2 id="<%= id %>-title" class="text-xl font-semibold"><%= title %></h2>
+        <button type="button" class="<%= lc_icon_button_class(size: :sm) %>" aria-label="Close <%= title %>" data-action="modal#close"><%= lc_icon "x-mark", options: { "aria-hidden": true } %></button>
+      </div>
+      <%= content %>
+    </div>
+  <% end %>
+</div>

data/app/views/lostcoords/ui/components/_lc_disclosure.html.erb

@@ -0,0 +1,5 @@
+<%# locals: (title:, attributes:, content:) %>
+<%= tag.details(**attributes) do %>
+  <summary class="cursor-pointer font-semibold"><%= title %></summary>
+  <div class="pt-4"><%= content %></div>
+<% end %>

data/app/views/lostcoords/ui/components/_skeleton.html.erb

@@ -0,0 +1,4 @@
+<%# Decorative: the surrounding loading region conveys state. Pass sizing via :class. %>
+<%= tag.span class: lc_skeleton_class(extra: local_assigns.fetch(:class, "h-4 w-full")),
+      "aria-hidden": "true",
+      **local_assigns.fetch(:attributes, {}) %>

data/app/views/lostcoords/ui/components/_spinner.html.erb

@@ -0,0 +1,10 @@
+<%# Inherits currentColor. Pass label: nil inside an already-labelled loading region. %>
+<% label = local_assigns.fetch(:label, "Loading…") %>
+
+<%= tag.span class: lc_spinner_class(size: local_assigns.fetch(:size, :base), extra: local_assigns[:class]),
+      role: (label.present? ? "status" : nil),
+      **local_assigns.fetch(:attributes, {}) do %>
+  <% if label.present? %>
+    <span class="sr-only"><%= label %></span>
+  <% end %>
+<% end %>