lostcoords-ui 0.4.1 → 0.5.0

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

@@ -1,8 +1,8 @@
-import { CatalogPicker } from "helpers/catalog_picker"
-import { prefersReducedMotion } from "helpers/viewport"
+import { CatalogPicker } from "lostcoords/ui/helpers/catalog_picker"
+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))
@@ -322,7 +322,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/{row_menu_controller.js → lc_menu_controller.js}

@@ -1,5 +1,5 @@
-import { FloatingPanel } from "helpers/floating_panel"
-import { focusFirstMenuItem, navigateMenu } from "helpers/menu_keys"
+import { FloatingPanel } from "lostcoords/ui/helpers/floating_panel"
+import { focusFirstMenuItem, 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.
@@ -29,7 +29,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}

@@ -22,7 +22,7 @@ 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)

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.style.setProperty("--lc-sheet-page-origin", `${window.scrollY + lockedTop}px`)
       root.dataset.sheetPage = ""
       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) {
@@ -363,13 +363,13 @@ export default class extends Controller {
     const root = document.documentElement
     delete root.dataset.sheetPage
     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_tabs_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Tabs with automatic activation: arrow keys, Home and End move focus and select.
+export default class extends Controller {
+  static targets = ["tab", "panel"]
+
+  select(event) {
+    this.show(event.currentTarget)
+  }
+
+  navigate(event) {
+    const tabs = this.tabTargets.filter((tab) => !tab.disabled)
+    const index = tabs.indexOf(event.currentTarget)
+    const step = getComputedStyle(this.element).direction === "rtl" ? -1 : 1
+    const next = {
+      ArrowRight: index + step,
+      ArrowLeft: index - step,
+      Home: 0,
+      End: tabs.length - 1,
+    }[event.key]
+    if (next === undefined) return
+
+    event.preventDefault()
+    const tab = tabs[(next + tabs.length) % tabs.length]
+    tab.focus()
+    this.show(tab)
+  }
+
+  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_tooltip_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Escape hides a visible tooltip without moving the pointer or focus. It shows
+// again after the pointer leaves or focus moves away.
+export default class extends Controller {
+  dismiss(event) {
+    if (event.key !== "Escape" || !this.element.matches(":hover, :focus-within")) return
+    this.element.dataset.dismissed = ""
+  }
+
+  reset() {
+    delete this.element.dataset.dismissed
+  }
+}

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

@@ -1,7 +1,7 @@
-import { holdDocumentScroll } from "helpers/dismiss_stack"
-import { FloatingPanel } from "helpers/floating_panel"
-import { SHEET_TIMING, sheetDuration } from "helpers/sheet_motion"
-import { isSheetViewport } from "helpers/viewport"
+import { holdDocumentScroll } from "lostcoords/ui/helpers/dismiss_stack"
+import { FloatingPanel } from "lostcoords/ui/helpers/floating_panel"
+import { SHEET_TIMING, sheetDuration } from "lostcoords/ui/helpers/sheet_motion"
+import { isSheetViewport } from "lostcoords/ui/helpers/viewport"
 
 const catalogs = new Map()
 const MAX_RESULTS = 250
@@ -433,7 +433,7 @@ export class CatalogPicker extends FloatingPanel {
       duration,
       settle: duration,
       transition: `transform ${SHEET_TIMING}`,
-      offscreen: "translateY(var(--sheet-offscreen))",
+      offscreen: "translateY(var(--lc-sheet-offscreen))",
     }
   }
 

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

@@ -1,4 +1,4 @@
-import { isSheetViewport } from "helpers/viewport"
+import { isSheetViewport } from "lostcoords/ui/helpers/viewport"
 
 const EDGE = 16
 
@@ -10,19 +10,19 @@ export function showContextDialog(dialog, menu) {
   const corner = rect?.height
     ? { top: Math.max(EDGE, rect.bottom - dialog.offsetHeight), right: rect.right }
     : null
-  if (anchorDialog(dialog, corner)) dialog.style.setProperty("--dialog-origin", "bottom right")
+  if (anchorDialog(dialog, corner)) dialog.style.setProperty("--lc-dialog-origin", "bottom right")
 }
 
 export function anchorDialog(dialog, corner) {
   delete dialog.dataset.anchored
-  dialog.style.removeProperty("--dialog-top")
-  dialog.style.removeProperty("--dialog-right")
+  dialog.style.removeProperty("--lc-dialog-top")
+  dialog.style.removeProperty("--lc-dialog-right")
   if (!corner || isSheetViewport()) return false
 
   dialog.dataset.anchored = ""
-  dialog.style.setProperty("--dialog-top", `${corner.top}px`)
+  dialog.style.setProperty("--lc-dialog-top", `${corner.top}px`)
   dialog.style.setProperty(
-    "--dialog-right",
+    "--lc-dialog-right",
     `${Math.max(EDGE, window.innerWidth - corner.right)}px`,
   )
   return true

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

@@ -1,4 +1,4 @@
-import { registerDismissable } from "helpers/dismiss_stack"
+import { registerDismissable } from "lostcoords/ui/helpers/dismiss_stack"
 
 const registrations = new WeakMap()
 
@@ -8,7 +8,7 @@ export function registerDialog(dialog, { close = () => dialog.close(), lockScrol
 
   const unregisterDismissable = registerDismissable({
     element: dialog,
-    type: "modal",
+    type: "lc-dialog",
     lockScroll,
     close,
     isOpen: () => dialog.open,

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

@@ -3,9 +3,8 @@ let nextOrder = 0
 let lockedScrollY = 0
 let scrollHolds = 0
 
-document.addEventListener("keydown", dismissOnEscape, true)
-
 export function registerDismissable(options) {
+  if (stack.length === 0) document.addEventListener("keydown", dismissOnEscape, true)
   const entry = {
     type: "panel",
     isOpen: defaultIsOpen,
@@ -17,7 +16,7 @@ export function registerDismissable(options) {
   stack.push(entry)
   syncModalScrollLock()
 
-  if (entry.type === "modal" && entry.element instanceof HTMLDialogElement) {
+  if (entry.type === "lc-dialog" && entry.element instanceof HTMLDialogElement) {
     entry.cancel = (event) => cancelDialog(event, entry)
     entry.element.addEventListener("cancel", entry.cancel)
   }
@@ -81,7 +80,7 @@ function topDismissable(scope = topModal()?.element) {
 
 function topModal() {
   return openEntries()
-    .filter((entry) => entry.type === "modal")
+    .filter((entry) => entry.type === "lc-dialog")
     .at(-1)
 }
 
@@ -92,6 +91,7 @@ function openEntries() {
 function unregisterDismissable(entry) {
   const index = stack.indexOf(entry)
   if (index >= 0) stack.splice(index, 1)
+  if (stack.length === 0) document.removeEventListener("keydown", dismissOnEscape, true)
 
   if (entry.cancel) {
     entry.element.removeEventListener("cancel", entry.cancel)
@@ -116,7 +116,7 @@ function priorityFor(type) {
 function syncModalScrollLock() {
   if (
     scrollHolds > 0 ||
-    openEntries().some((entry) => entry.type === "modal" && entry.lockScroll !== false)
+    openEntries().some((entry) => entry.type === "lc-dialog" && entry.lockScroll !== false)
   ) {
     lockDocumentScroll()
     return
@@ -136,7 +136,7 @@ function lockDocumentScroll() {
   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.setProperty("--lc-scroll-lock-y", `${lockedScrollY}px`)
   body.style.inlineSize = "100%"
 }
 
@@ -147,7 +147,7 @@ function unlockDocumentScroll() {
   body.style.position = ""
   body.style.inset = ""
   body.style.top = ""
-  body.style.removeProperty("--scroll-lock-y")
+  body.style.removeProperty("--lc-scroll-lock-y")
   body.style.inlineSize = ""
   delete body.dataset.modalScrollLock
   window.scrollTo({ top: lockedScrollY, behavior: "instant" })

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

@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
-import { registerDismissable } from "helpers/dismiss_stack"
-import { liftToTopLayer } from "helpers/top_layer"
+import { registerDismissable } from "lostcoords/ui/helpers/dismiss_stack"
+import { liftToTopLayer } from "lostcoords/ui/helpers/top_layer"
 
 const BEFORE_OPEN = "overlay:before-open"
 const PAGE_LEAVES = ["turbo:before-cache", "turbo:before-visit", "turbo:before-render"]

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

@@ -1,13 +1,13 @@
-import { prefersReducedMotion } from "helpers/viewport"
-// The sheet beat lives in CSS (--sheet-duration, --ease-sheet) so CSS- and
+import { prefersReducedMotion } from "lostcoords/ui/helpers/viewport"
+// The sheet beat lives in CSS (--lc-sheet-duration, --lc-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 const SHEET_TIMING = "var(--lc-sheet-duration) var(--lc-ease-sheet)"
 
 export function sheetDuration() {
   if (prefersReducedMotion()) return 0
   const value = getComputedStyle(document.documentElement)
-    .getPropertyValue("--sheet-duration")
+    .getPropertyValue("--lc-sheet-duration")
     .trim()
   return value.endsWith("ms") ? parseFloat(value) : parseFloat(value) * 1000
 }

data/app/javascript/lostcoords/ui/index.js

@@ -0,0 +1,51 @@
+import CodeBlock from "lostcoords/ui/controllers/lc_code_block_controller"
+import Collapsible from "lostcoords/ui/controllers/lc_collapsible_controller"
+import ConfirmDialog from "lostcoords/ui/controllers/lc_confirm_dialog_controller"
+import Copy from "lostcoords/ui/controllers/lc_copy_controller"
+import Dialog from "lostcoords/ui/controllers/lc_dialog_controller"
+import EmojiPicker from "lostcoords/ui/controllers/lc_emoji_picker_controller"
+import Menu from "lostcoords/ui/controllers/lc_menu_controller"
+import Popover from "lostcoords/ui/controllers/lc_popover_controller"
+import Selection from "lostcoords/ui/controllers/lc_selection_controller"
+import Sheet from "lostcoords/ui/controllers/lc_sheet_controller"
+import Tabs from "lostcoords/ui/controllers/lc_tabs_controller"
+import Toast from "lostcoords/ui/controllers/lc_toast_controller"
+import Toggle from "lostcoords/ui/controllers/lc_toggle_controller"
+import Tooltip from "lostcoords/ui/controllers/lc_tooltip_controller"
+
+const controllers = {
+  "lc-confirm-dialog": ConfirmDialog,
+  "lc-collapsible": Collapsible,
+  "lc-code-block": CodeBlock,
+  "lc-copy": Copy,
+  "lc-dialog": Dialog,
+  "lc-emoji-picker": EmojiPicker,
+  "lc-menu": Menu,
+  "lc-popover": Popover,
+  "lc-selection": Selection,
+  "lc-sheet": Sheet,
+  "lc-tabs": Tabs,
+  "lc-toast": Toast,
+  "lc-toggle": Toggle,
+  "lc-tooltip": Tooltip,
+}
+const registrations = new WeakMap()
+
+export function registerControllers(application, { only = Object.keys(controllers) } = {}) {
+  if (!Array.isArray(only)) throw new TypeError("only must be an array of controller identifiers")
+  for (const identifier of only) {
+    if (!Object.hasOwn(controllers, identifier)) {
+      throw new Error(`Unknown lostcoords-ui controller: ${identifier}`)
+    }
+  }
+  let registered = registrations.get(application)
+  if (!registered) {
+    registered = new Set()
+    registrations.set(application, registered)
+  }
+  for (const identifier of only) {
+    if (registered.has(identifier)) continue
+    application.register(identifier, controllers[identifier])
+    registered.add(identifier)
+  }
+}

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

@@ -7,10 +7,10 @@
   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 %>
+<%= tag.div(**lc_attributes({ class: lc_tw("lc-emoji-picker", picker_class), data: { controller: "lc-emoji-picker", lc_emoji_picker_auto_submit_value: auto_submit, lc_emoji_picker_catalog_url_value: catalog_url, lc_emoji_picker_recent_scope_value: recent_scope } }, attributes)) do %>
   <%= form.hidden_field field,
       value: selected,
-      data: { emoji_picker_target: "input" } %>
+      data: { lc_emoji_picker_target: "input" } %>
 
   <% quick.each do |emoji| %>
     <button
@@ -18,7 +18,7 @@
       class="emoji-picker__choice"
       aria-current="<%= emoji == selected %>"
       data-emoji="<%= emoji %>"
-      data-action="click->emoji-picker#select"
+      data-action="click->lc-emoji-picker#select"
     >
       <%= emoji %>
     </button>
@@ -29,8 +29,8 @@
       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-lc-emoji-picker-target="trigger"
+      data-action="click->lc-emoji-picker#toggle"
       data-default-label="＋"
       data-value="<%= selected %>"
       aria-label="<%= label %>"
@@ -41,14 +41,14 @@
 
     <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"
+      data-lc-emoji-picker-target="popover"
+      data-controller="lc-sheet"
+      data-action="click->lc-emoji-picker#select pointerover->lc-emoji-picker#preview focusin->lc-emoji-picker#preview lc-sheet:dismiss->lc-emoji-picker#close"
       role="dialog"
       aria-label="<%= label %>"
       hidden
     >
-      <span class="emoji-picker__handle" data-sheet-target="handle" aria-hidden="true"></span>
+      <span class="emoji-picker__handle" data-lc-sheet-target="handle" aria-hidden="true"></span>
 
       <div class="emoji-picker__search">
         <div class="emoji-picker__search-field">
@@ -67,30 +67,30 @@
             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"
+            data-lc-emoji-picker-target="searchInput"
+            data-action="input->lc-emoji-picker#filter keydown->lc-emoji-picker#onSearchKeydown"
           >
         </div>
 
-        <div class="emoji-picker__tones" data-emoji-picker-target="tones">
+        <div class="emoji-picker__tones" data-lc-emoji-picker-target="tones">
           <button
             type="button"
             class="emoji-picker__tone-toggle"
-            data-emoji-picker-target="toneToggle"
-            data-action="click->emoji-picker#toggleTones"
+            data-lc-emoji-picker-target="toneToggle"
+            data-action="click->lc-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>
+          <div class="emoji-picker__tone-menu <%= popover_class %>" data-lc-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"
+                data-action="click->lc-emoji-picker#selectTone"
                 aria-label="<%= lc_t("lostcoords.ui.emoji_picker.skin_tones.#{tone_names[index]}") %>"
               >✋<%= modifier %></button>
             <% end %>
@@ -98,14 +98,14 @@
         </div>
       </div>
 
-      <nav class="emoji-picker__tabs" data-emoji-picker-target="tabs" aria-label="<%= lc_t("lostcoords.ui.emoji_picker.categories_nav") %>">
+      <nav class="emoji-picker__tabs" data-lc-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-lc-emoji-picker-target="tab"
             data-target-section="recent"
-            data-action="click->emoji-picker#jumpTo"
+            data-action="click->lc-emoji-picker#jumpTo"
             aria-label="<%= lc_t("lostcoords.ui.emoji_picker.recently_used") %>"
           >🕘</button>
         <% end %>
@@ -114,21 +114,21 @@
           <button
             type="button"
             class="emoji-picker__tab"
-            data-emoji-picker-target="tab"
+            data-lc-emoji-picker-target="tab"
             data-target-section="<%= group[:key] %>"
-            data-action="click->emoji-picker#jumpTo"
+            data-action="click->lc-emoji-picker#jumpTo"
             aria-label="<%= group[:name] %>"
           ><%= group[:icon] %></button>
         <% end %>
       </nav>
 
-      <div class="emoji-picker__body" data-emoji-picker-target="body">
+      <div class="emoji-picker__body" data-lc-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"
+            data-lc-emoji-picker-target="recent"
           >
             <header class="emoji-picker__category-head">
               <h3><%= lc_t("lostcoords.ui.emoji_picker.recently_used") %></h3>
@@ -153,23 +153,23 @@
           </section>
         <% end %>
 
-        <section class="emoji-picker__results" data-emoji-picker-target="results" aria-label="<%= lc_t('lostcoords.ui.emoji_picker.search_results') %>" hidden>
+        <section class="emoji-picker__results" data-lc-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>
+            <span class="count" data-lc-emoji-picker-target="resultsCount">0</span>
           </header>
 
-          <div class="emoji-picker__grid" data-emoji-picker-target="resultsGrid"></div>
+          <div class="emoji-picker__grid" data-lc-emoji-picker-target="resultsGrid"></div>
         </section>
 
-        <p class="emoji-picker__empty" data-emoji-picker-target="empty" hidden>
+        <p class="emoji-picker__empty" data-lc-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 class="emoji-picker__preview" data-lc-emoji-picker-target="preview">
+        <span class="emoji-picker__preview-emoji" data-lc-emoji-picker-target="previewEmoji"><%= selected %></span>
+        <span class="emoji-picker__preview-name" data-lc-emoji-picker-target="previewName"><%= lc_emoji_picker_search_name(selected) %></span>
       </footer>
     </div>
   </div>

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

@@ -0,0 +1,18 @@
+<%# locals: (id:, language:, title:, label:, content:, truncated:, max_lines:, attributes:) %>
+<%= tag.div(**attributes) do %>
+  <% if title %>
+    <div class="flex h-10 items-center ps-inset pe-16 pt-inset">
+      <span class="truncate font-mono text-xs text-muted-foreground"><%= title %></span>
+    </div>
+  <% end %>
+  <div class="lc-code-block-copy absolute end-2 top-2 z-10 rounded-full bg-muted">
+    <%= lc_copy_button source: "#{id}-content", icon_only: true, variant: :ghost, size: :sm, aria: { label: lc_t("lostcoords.ui.code_block.copy", label: label) } %>
+  </div>
+  <div class="relative">
+    <pre id="<%= id %>-content" class="m-0 overflow-x-auto ps-inset pe-16 pb-inset font-mono text-[0.8125rem] text-muted-foreground [tab-size:2] <%= title ? 'pt-2 [--lc-code-block-padding:--spacing(7)]' : 'pt-inset [--lc-code-block-padding:--spacing(10)]' %> <%= 'max-h-[calc(var(--lc-code-block-lines)*1lh+var(--lc-code-block-padding))] overflow-y-hidden group-data-expanded/code-block:max-h-none' if truncated %>" style="<%= "--lc-code-block-lines: #{max_lines}" if truncated %>" tabindex="0" role="region" aria-label="<%= label %>"><%= tag.code(content, data: { language: language }) %></pre>
+    <% if truncated %><div class="pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-linear-to-t from-muted to-transparent group-data-expanded/code-block:hidden" aria-hidden="true"></div><% end %>
+  </div>
+  <% if truncated %>
+    <%= lc_button lc_t("lostcoords.ui.code_block.expand"), variant: :ghost, size: :sm, class: "w-full rounded-none", aria: { expanded: false, controls: "#{id}-content" }, data: { action: "lc-code-block#toggle", lc_code_block_target: "toggle", expand_label: lc_t("lostcoords.ui.code_block.expand"), collapse_label: lc_t("lostcoords.ui.code_block.collapse") } %>
+  <% end %>
+<% end %>

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

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

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

@@ -1,12 +1,15 @@
-<%# 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>
+<%# locals: (id:, title:, description:, trigger:, attributes:, content:) %>
+<div data-controller="lc-dialog">
+  <button type="button" class="<%= lc_button_class(variant: :secondary) %>" aria-haspopup="dialog" aria-controls="<%= id %>" data-action="lc-dialog#open" data-slot="dialog-trigger"><%= 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>
+    <div class="flex flex-col gap-inset p-inset" data-slot="dialog-content">
+      <header class="flex items-start justify-between gap-content" data-slot="dialog-header">
+        <div class="flex min-w-0 flex-col gap-tight">
+          <h2 id="<%= id %>-title" class="<%= lc_heading_class(size: :subheading) %>" data-slot="dialog-title"><%= title %></h2>
+          <% if description.present? %><p id="<%= id %>-description" class="<%= lc_text_class(size: :small, tone: :muted) %>" data-slot="dialog-description"><%= description %></p><% end %>
+        </div>
+        <button type="button" class="<%= lc_icon_button_class(size: :sm, shape: :circle, extra: "-me-related -mt-tight") %>" aria-label="<%= lc_t("lostcoords.ui.dialog.close", title: title) %>" data-action="lc-dialog#close"><%= lc_icon "x-mark", options: { "aria-hidden": true } %></button>
+      </header>
       <%= content %>
     </div>
   <% end %>