lostcoords-ui 0.5.0 → 0.6.0

data/app/assets/tailwind/lostcoords/ui/emoji-picker.css

@@ -1,18 +1,16 @@
 @layer components {
-  .emoji-picker {
+  .lc-emoji-picker {
     display: flex;
     gap: 6px;
     flex-wrap: wrap;
     align-items: center;
 
-    /* Sit above the mobile app nav (z-100 + 25) so the sheet covers it. */
-    --lc-emoji-sheet-z: calc(100 + 30);
     --lc-emoji-cell: 2.25rem;
   }
 
   /* ---- Trigger + quick choices -------------------------------------- */
-  .emoji-picker__choice,
-  .emoji-picker__trigger {
+  .lc-emoji-picker__choice,
+  .lc-emoji-picker__trigger {
     display: inline-grid;
     place-items: center;
     inline-size: 44px;
@@ -38,12 +36,12 @@
     }
   }
 
-  .emoji-picker__trigger {
+  .lc-emoji-picker__trigger {
     color: var(--muted-foreground);
     font-weight: var(--font-weight-normal, 400);
   }
 
-  .emoji-picker__more {
+  .lc-emoji-picker__more {
     position: relative;
     display: inline-flex;
   }
@@ -58,7 +56,7 @@
      dims everything beneath it — including the app nav. The allow-discrete
      transitions keep it in the top layer while it eases out, so it fades
      both ways instead of snapping away on close. */
-  .emoji-picker__popover::backdrop {
+  .lc-emoji-picker__popover::backdrop {
     background: var(--lc-scrim);
     opacity: 0;
     transition:
@@ -72,7 +70,7 @@
   /* Only the phone sheet dims the page; the desktop popover rides the top
      layer too (so nothing paints over it) but floats over an undimmed page. */
   @media (width < 40rem) {
-    .emoji-picker__popover:popover-open::backdrop {
+    .lc-emoji-picker__popover:popover-open::backdrop {
       opacity: 1;
 
       @starting-style { opacity: 0; }
@@ -82,7 +80,7 @@
   /* Phones get a solid sheet; on desktop the host paints the popover as a
      floating surface (glass in wariwari), so the gem leaves it unpainted. */
   @media (width < 40rem) {
-    .emoji-picker__popover {
+    .lc-emoji-picker__popover {
       border: 1px solid var(--lc-glass-edge, var(--border));
       border-block-end: 0;
       background: var(--background);
@@ -90,11 +88,11 @@
     }
   }
 
-  .emoji-picker__popover {
+  .lc-emoji-picker__popover {
     position: fixed;
     inset: auto 0 0;
     margin: 0;
-    z-index: var(--lc-emoji-sheet-z);
+    z-index: var(--lc-z-overlay);
     display: none;
     max-inline-size: none;
     color: var(--foreground);
@@ -125,7 +123,7 @@
 
   /* Fallback for browsers without the Popover API: class-driven display. */
   @supports not selector(:popover-open) {
-    .emoji-picker__popover[data-open] {
+    .lc-emoji-picker__popover[data-open] {
       display: flex;
       transform: translateY(0);
     }
@@ -135,7 +133,7 @@
      is large; the host's sheet draws the pill.
      touch-action: none lets a vertical drag pull the sheet down rather than
      scroll. Drag-to-dismiss is wired by the sheet controller. */
-  .emoji-picker__handle {
+  .lc-emoji-picker__handle {
     flex: 0 0 auto;
     display: grid;
     place-items: center;
@@ -145,10 +143,10 @@
     cursor: grab;
   }
 
-  .emoji-picker__handle:active { cursor: grabbing; }
+  .lc-emoji-picker__handle:active { cursor: grabbing; }
 
   /* ---- Search row --------------------------------------------------- */
-  .emoji-picker__search {
+  .lc-emoji-picker__search {
     flex: 0 0 auto;
     display: flex;
     gap: 0.5rem;
@@ -156,14 +154,14 @@
     padding: 0.75rem 0.75rem 0.5rem;
   }
 
-  .emoji-picker__search-field {
+  .lc-emoji-picker__search-field {
     position: relative;
     flex: 1 1 auto;
     display: flex;
     align-items: center;
   }
 
-  .emoji-picker__search-icon {
+  .lc-emoji-picker__search-icon {
     position: absolute;
     inset-inline-start: 14px;
     inline-size: 18px;
@@ -172,7 +170,7 @@
     pointer-events: none;
   }
 
-  .emoji-picker__search-input {
+  .lc-emoji-picker__search-input {
     inline-size: 100%;
     min-block-size: 44px;
     padding-inline: 40px 1rem;
@@ -198,12 +196,12 @@
   }
 
   /* ---- Skin-tone control ------------------------------------------- */
-  .emoji-picker__tones {
+  .lc-emoji-picker__tones {
     position: relative;
     flex: 0 0 auto;
   }
 
-  .emoji-picker__tone-toggle {
+  .lc-emoji-picker__tone-toggle {
     display: inline-grid;
     place-items: center;
     inline-size: 44px;
@@ -221,7 +219,7 @@
     &[aria-expanded="true"] { background: color-mix(in oklab, var(--primary) 12%, var(--background)); }
   }
 
-  .emoji-picker__tone-menu {
+  .lc-emoji-picker__tone-menu {
     position: absolute;
     inset-block-end: calc(100% + 6px);
     inset-inline-end: 0;
@@ -234,7 +232,7 @@
     &[hidden] { display: none; }
   }
 
-  .emoji-picker__tone {
+  .lc-emoji-picker__tone {
     display: inline-grid;
     place-items: center;
     inline-size: 36px;
@@ -255,7 +253,7 @@
 
   /* Category tabs: a segmented track, like the app's tab strips — a paper-2
      track with the active tab raised on a paper thumb. */
-  .emoji-picker__tabs {
+  .lc-emoji-picker__tabs {
     flex: 0 0 auto;
     display: flex;
     gap: 2px;
@@ -269,7 +267,7 @@
     &::-webkit-scrollbar { display: none; }
   }
 
-  .emoji-picker__tab {
+  .lc-emoji-picker__tab {
     flex: 0 0 auto;
     display: inline-grid;
     place-items: center;
@@ -294,7 +292,7 @@
   }
 
   /* ---- Scrollable body --------------------------------------------- */
-  .emoji-picker__body {
+  .lc-emoji-picker__body {
     position: relative;
     flex: 1 1 auto;
     overflow-y: auto;
@@ -309,15 +307,15 @@
     @media (prefers-reduced-motion: reduce) { scroll-behavior: auto; }
   }
 
-  .emoji-picker__category + .emoji-picker__category,
-  .emoji-picker__recent + .emoji-picker__catalog,
-  .emoji-picker__results + * {
+  .lc-emoji-picker__category + .lc-emoji-picker__category,
+  .lc-emoji-picker__recent + .lc-emoji-picker__catalog,
+  .lc-emoji-picker__results + * {
     margin-block-start: 0.5rem;
   }
 
   /* Heads scroll with their section: the tab track already marks the current
      category, and a sticky band would sit as a stripe across the panel. */
-  .emoji-picker__category-head {
+  .lc-emoji-picker__category-head {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
@@ -338,7 +336,7 @@
     }
   }
 
-  .emoji-picker__grid {
+  .lc-emoji-picker__grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(var(--lc-emoji-cell), 1fr));
     gap: 2px;
@@ -370,13 +368,13 @@
   }
 
   /* Section that owns the sticky header needs the scroll anchor, not the grid */
-  .emoji-picker__category,
-  .emoji-picker__recent,
-  .emoji-picker__results {
+  .lc-emoji-picker__category,
+  .lc-emoji-picker__recent,
+  .lc-emoji-picker__results {
     scroll-margin-block-start: 0;
   }
 
-  .emoji-picker__empty {
+  .lc-emoji-picker__empty {
     margin: 0;
     padding: 1rem 0.5rem;
     color: var(--muted-foreground);
@@ -385,16 +383,16 @@
   }
 
   /* ---- Search mode: swap catalog for a single ranked result list ---- */
-  .emoji-picker__popover:not([data-searching]) .emoji-picker__results { display: none; }
+  .lc-emoji-picker__popover:not([data-searching]) .lc-emoji-picker__results { display: none; }
 
-  .emoji-picker__popover[data-searching] {
-    .emoji-picker__tabs,
-    .emoji-picker__recent,
-    .emoji-picker__catalog { display: none; }
+  .lc-emoji-picker__popover[data-searching] {
+    .lc-emoji-picker__tabs,
+    .lc-emoji-picker__recent,
+    .lc-emoji-picker__catalog { display: none; }
   }
 
   /* ---- Preview footer ---------------------------------------------- */
-  .emoji-picker__preview {
+  .lc-emoji-picker__preview {
     flex: 0 0 auto;
     display: flex;
     gap: 0.5rem;
@@ -403,12 +401,12 @@
     padding: 0.25rem 1rem 0.75rem;
   }
 
-  .emoji-picker__preview-emoji {
+  .lc-emoji-picker__preview-emoji {
     font-size: 1.5rem;
     line-height: 1;
   }
 
-  .emoji-picker__preview-name {
+  .lc-emoji-picker__preview-name {
     overflow: hidden;
     font-size: 1rem;
     color: var(--muted-foreground);
@@ -422,7 +420,7 @@
 
   /* ==================================================================== */
   @media (width >= 40rem) {
-    .emoji-picker__popover {
+    .lc-emoji-picker__popover {
       position: absolute;
       inset-block: calc(100% + 8px) auto;
       inset-inline: 0 auto;
@@ -452,10 +450,10 @@
       @media (prefers-reduced-motion: reduce) { transition: none; }
     }
 
-    .emoji-picker__handle { display: none; }
+    .lc-emoji-picker__handle { display: none; }
 
-    main:has(.emoji-picker__popover[data-open]),
-    .emoji-picker:has(.emoji-picker__popover[data-open]) {
+    main:has(.lc-emoji-picker__popover[data-open]),
+    .lc-emoji-picker:has(.lc-emoji-picker__popover[data-open]) {
       z-index: var(--lc-z-overlay);
     }
   }

data/app/assets/tailwind/lostcoords/ui/{reading.css → prose.css}

@@ -58,3 +58,9 @@
     }
   }
 }
+
+@layer utilities {
+  .lc-prose :where(code):not(:where(pre code)) {
+    @apply lc-inline-code;
+  }
+}

data/app/assets/tailwind/lostcoords/ui/sheet.css

@@ -4,13 +4,12 @@
       position: fixed;
 
       /* Anchored from the top edge at the screen height it opened at
-         (sheet_controller), then lifted by its own height. In-app browsers
+         (lc-sheet), then lifted by its own height. In-app browsers
          (Brave, Chrome) resize the page under the keyboard; anything hung
          from the bottom edge jumps a frame as they do, but the top holds. */
       inset: var(--lc-sheet-floor, 100dvh) 0 auto;
       translate: 0 -100%;
       margin: 0;
-      z-index: var(--lc-z-sheet);
       inline-size: 100%;
       max-block-size: calc(var(--lc-sheet-floor, 100dvh) * 0.9);
       overflow-y: auto;
@@ -74,7 +73,7 @@
 }
 
 @layer modules {
-  /* Phones: every modal dialog is an iOS sheet (sheet_controller). It floats
+  /* Phones: every modal dialog is an iOS sheet (lc-sheet). It floats
      inset with all corners round while it is short, and docks to the screen
      edges as it reaches the large detent: --lc-sheet-p runs 0 → 1 between them.
      Lives in this layer so it out-ranks a dialog's own frame. */
@@ -151,7 +150,7 @@
     }
 
     /* Behind a large sheet the page shrinks back and rounds off, over black,
-       as UIKit's page sheet does; sheet_controller drives the variables. */
+       as UIKit's page sheet does; lc-sheet drives the variables. */
     html[data-lc-sheet-page] {
       background: #000;
 

data/app/assets/tailwind/lostcoords/ui/theme.css

@@ -15,6 +15,11 @@
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
+
+  /* Muted fills that a card switches to stay visible on it (card.css): bg-tile for choice tiles,
+     alerts, neutral badges, skeletons and key hints; bg-track for toggle group tracks. */
+  --color-tile: var(--lc-tile-bg, var(--muted));
+  --color-track: var(--lc-track-bg, var(--muted));
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
@@ -56,6 +61,11 @@
   --spacing-control-sm: var(--lc-control-sm);
   --spacing-control-md: var(--lc-control-md);
   --spacing-control-lg: var(--lc-control-lg);
+
+  /* In-page layers: z-raised lifts content over its neighbours, z-sticky keeps
+     app chrome above content. Overlays need no z-index; see --lc-z-popover. */
+  --z-index-raised: var(--lc-z-raised);
+  --z-index-sticky: var(--lc-z-sticky);
 }
 
 @theme {
@@ -116,8 +126,13 @@
     --lc-sheet-duration: 500ms;
     --lc-sheet-offscreen: calc(100% + 2rem);
 
+    --lc-z-raised: 1;
+    --lc-z-sticky: 20;
+
+    /* Dialogs, sheets, menus, popovers, tooltips and toasts open in the
+       browser's top layer, above every z-index. These order them only where
+       the Popover API is missing. */
     --lc-z-popover: 30;
-    --lc-z-sheet: 50;
     --lc-z-overlay: 60;
     --lc-z-toast: 70;
 

data/app/assets/tailwind/lostcoords/ui/toast.css

@@ -0,0 +1,23 @@
+@layer components {
+  /* lc-toast-region opens it as a popover; these rules also override the
+     popover defaults, which would centre it and hide it while closed. */
+  .lc-toast-region {
+    position: fixed;
+    inset: auto var(--spacing-gutter) var(--spacing-gutter) auto;
+    z-index: var(--lc-z-toast);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--spacing-related);
+    max-inline-size: calc(100vw - var(--spacing-gutter) * 2);
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+    border: 0;
+    background: none;
+    color: inherit;
+
+    &:dir(rtl) { inset: auto auto var(--spacing-gutter) var(--spacing-gutter); }
+    &:empty { display: none; }
+  }
+}

data/app/assets/tailwind/lostcoords/ui/tooltip.css

@@ -1,4 +1,6 @@
 @layer components {
+  /* lc-tooltip lifts the content into the top layer while it shows. Without
+     JavaScript or the Popover API it shows in place, over its neighbours. */
   .lc-tooltip__content {
     position: absolute;
     inset-block-end: calc(100% + var(--spacing-related));
@@ -6,7 +8,9 @@
     z-index: var(--lc-z-popover);
     inline-size: max-content;
     max-inline-size: min(16rem, calc(100vw - 2rem));
+    overflow: visible;
     padding: var(--spacing-tight) var(--spacing-related);
+    border: 0;
     border-radius: var(--radius-md);
     background: var(--foreground);
     color: var(--background);
@@ -17,31 +21,28 @@
     pointer-events: none;
     opacity: 0;
     visibility: hidden;
-    translate: -50% 0.125rem;
+    translate: -50% 0;
+
+    /* allow-discrete keeps a lifted tooltip in the top layer while it fades out. */
     transition:
       opacity 120ms var(--lc-ease-out),
-      translate 120ms var(--lc-ease-out),
-      visibility 120ms;
+      visibility 120ms,
+      display 120ms allow-discrete,
+      overlay 120ms allow-discrete;
 
-    &:dir(rtl) { translate: 50% 0.125rem; }
+    &:dir(rtl) { translate: 50% 0; }
   }
 
   .lc-tooltip[data-side="bottom"] > .lc-tooltip__content {
     inset-block: calc(100% + var(--spacing-related)) auto;
-    translate: -50% -0.125rem;
   }
 
-  .lc-tooltip:is(:hover, :has(:focus-visible)) > .lc-tooltip__content {
+  .lc-tooltip:is([data-open], :hover, :has(:focus-visible)) > .lc-tooltip__content {
     opacity: 1;
     visibility: visible;
-    translate: -50% 0;
     transition-delay: 300ms;
   }
 
-  .lc-tooltip:is(:hover, :has(:focus-visible)) > .lc-tooltip__content:dir(rtl) {
-    translate: 50% 0;
-  }
-
   .lc-tooltip[data-dismissed] > .lc-tooltip__content {
     opacity: 0;
     visibility: hidden;

data/app/assets/tailwind/lostcoords/ui/typography.css

@@ -31,7 +31,7 @@
   text-box: trim-both cap alphabetic; /* browser-compat: enhancement */
 }
 
-/* Inline code inside running text. base.css applies it to every <code>; prose
+/* Inline code inside running text. base.css applies it to every <code>; prose.css
    applies it inside .lc-prose. */
 @utility lc-inline-code {
   font-family: var(--font-mono);
@@ -49,9 +49,3 @@
     content: none;
   }
 }
-
-@layer utilities {
-  .lc-prose :where(code):not(:where(pre code)) {
-    @apply lc-inline-code;
-  }
-}

data/app/helpers/lostcoords/ui/badge_helper.rb

@@ -58,7 +58,7 @@ module Lostcoords::Ui
       "font-sans text-caption font-medium whitespace-nowrap"
 
     BADGE_TONES = {
-      neutral: "bg-muted text-muted-foreground",
+      neutral: "bg-tile text-muted-foreground",
       success: "bg-success-soft text-success",
       warning: "bg-warning-soft text-warning",
       destructive: "bg-destructive-soft text-destructive",
@@ -86,7 +86,7 @@ module Lostcoords::Ui
       shape = lc_option!(:shape, shape, ICON_BADGE_SHAPES.keys)
       tone = lc_option!(:tone, tone, BADGE_TONES.keys)
       lc_tw(ICON_BADGE_BASE, ICON_BADGE_SIZES.fetch(size), ICON_BADGE_SHAPES.fetch(shape),
-        (tone == :neutral ? "bg-muted text-foreground" : BADGE_TONES.fetch(tone)), extra)
+        (tone == :neutral ? "bg-tile text-foreground" : BADGE_TONES.fetch(tone)), extra)
     end
 
     def lc_avatar_class(size: :md, ink: false, linked: false, extra: nil)

data/app/helpers/lostcoords/ui/button_helper.rb

@@ -1,10 +1,16 @@
 module Lostcoords::Ui
   module ButtonHelper
+    # Disabled controls drop their variant colours for a faint tint and dim ink, so they read as unavailable on any surface.
+    BUTTON_DISABLED =
+      "disabled:cursor-not-allowed disabled:shadow-none " \
+      "disabled:[--lc-button-bg:color-mix(in_oklab,var(--foreground)_10%,transparent)] " \
+      "disabled:text-[color-mix(in_oklab,var(--foreground)_38%,transparent)]"
+
     BUTTON_BASE =
       "inline-flex items-center justify-center gap-related rounded-pill font-sans " \
       "whitespace-nowrap no-underline cursor-pointer " \
       "transition-[background-color,border-color,color,box-shadow,transform,translate,scale,filter] duration-(--lc-motion-control) ease-(--lc-ease-out) " \
-      "motion-safe:hover:-translate-y-px motion-safe:active:translate-y-px active:shadow-none disabled:opacity-40 disabled:pointer-events-none " \
+      "motion-safe:not-disabled:hover:-translate-y-px motion-safe:not-disabled:active:translate-y-px active:shadow-none #{BUTTON_DISABLED} " \
       "[&_svg]:block [&_svg:not([class*='size-'])]:size-[1.1em] [&_svg]:shrink-0"
 
     # Height comes from the shared control sizes; an icon trims the padding on its side.
@@ -15,15 +21,15 @@ module Lostcoords::Ui
     }.freeze
 
     BUTTON_HOVER =
-      "hover:bg-[color-mix(in_oklab,var(--lc-button-bg,var(--secondary))_94%,var(--lc-button-ink,var(--foreground)))] " \
-      "active:bg-[color-mix(in_oklab,var(--lc-button-bg,var(--secondary))_94%,var(--lc-button-ink,var(--foreground)))]"
+      "not-disabled:hover:bg-[color-mix(in_oklab,var(--lc-button-bg,var(--secondary))_94%,var(--lc-button-ink,var(--foreground)))] " \
+      "not-disabled:active:bg-[color-mix(in_oklab,var(--lc-button-bg,var(--secondary))_94%,var(--lc-button-ink,var(--foreground)))]"
 
     BUTTON_VARIANTS = {
       primary: "border border-transparent [--lc-button-bg:var(--primary)] [--lc-button-ink:var(--primary-foreground)] bg-(--lc-button-bg) text-(--lc-button-ink) #{BUTTON_HOVER}",
       secondary: "border border-transparent [--lc-button-bg:var(--secondary)] [--lc-button-ink:var(--secondary-foreground)] bg-(--lc-button-bg) text-(--lc-button-ink) #{BUTTON_HOVER}",
       outline: "border border-border bg-transparent text-(--lc-button-ink,var(--foreground)) #{BUTTON_HOVER}",
       glass: "[--lc-button-bg:var(--_lc-glass-fill)] text-(--lc-button-ink,var(--foreground)) #{BUTTON_HOVER}",
-      ghost: "border border-transparent bg-transparent text-muted-foreground hover:text-(--lc-button-ink,var(--foreground)) #{BUTTON_HOVER}",
+      ghost: "border border-transparent bg-transparent text-muted-foreground not-disabled:hover:text-(--lc-button-ink,var(--foreground)) #{BUTTON_HOVER}",
       destructive: "border border-transparent [--lc-button-bg:color-mix(in_oklab,var(--destructive)_60%,black)] [--lc-button-ink:#fff] bg-(--lc-button-bg) text-(--lc-button-ink) #{BUTTON_HOVER}"
     }.freeze
 
@@ -31,8 +37,8 @@ module Lostcoords::Ui
       "lc-press inline-grid place-items-center shrink-0 border-0 bg-transparent " \
       "text-muted-foreground cursor-pointer no-underline " \
       "transition-[background-color,color,transform,scale] duration-(--lc-motion-quick) ease-(--lc-ease-out) " \
-      "hover:text-(--lc-button-ink,var(--foreground)) #{BUTTON_HOVER} " \
-      "disabled:opacity-40 disabled:pointer-events-none " \
+      "not-disabled:hover:text-(--lc-button-ink,var(--foreground)) #{BUTTON_HOVER} " \
+      "#{BUTTON_DISABLED} " \
       "[&_svg]:block [&_svg]:shrink-0"
 
     ICON_BUTTON_SHAPES = {

data/app/helpers/lostcoords/ui/choice_helper.rb

@@ -6,7 +6,7 @@ module Lostcoords::Ui
     CHOICE_LABEL = "lc-choice inline-flex min-w-0 items-start gap-related text-body text-foreground cursor-pointer has-disabled:cursor-not-allowed has-disabled:opacity-60"
 
     # card: true draws the whole label as a selectable tile, for plan or theme pickers.
-    CHOICE_CARD = "flex w-full rounded-2xl lc-squircle border border-transparent bg-(--lc-tile-bg,var(--muted)) p-content " \
+    CHOICE_CARD = "flex w-full rounded-2xl lc-squircle border border-transparent bg-tile p-content " \
       "transition-[background-color,border-color] duration-(--lc-motion-quick) ease-(--lc-ease-out) hover:bg-accent " \
       "has-checked:border-primary has-checked:bg-primary-soft has-focus-visible:outline-2 has-focus-visible:outline-offset-2 " \
       "has-focus-visible:outline-(--ring,color-mix(in_oklab,var(--primary)_50%,transparent))"
@@ -42,15 +42,18 @@ module Lostcoords::Ui
       lc_choice("switch", label, hint, false, name, unchecked_value, { type: "checkbox", role: "switch", name: name, value: value, checked: checked, class: lc_switch_class }, attributes)
     end
 
-    # A fieldset of checkboxes, radios or switches with a legend, hint and error.
-    def lc_choice_group(legend:, hint: nil, error: nil, **attributes, &block)
+    # A fieldset of checkboxes, radios or switches with a legend, hint and error. With an id, the
+    # fieldset's aria-describedby points at the hint and error, as lc_field does for its control.
+    def lc_choice_group(legend:, id: nil, hint: nil, error: nil, **attributes, &block)
       lc_label!(legend, :legend)
       errors = Array(error).compact_blank
-      tag.fieldset(**lc_attributes({ class: lc_field_class(extra: "m-0 min-w-0 border-0 p-0"), aria: { invalid: (true if errors.any?) }, data: { slot: "choice-group" } }, attributes)) do
+      described = [ ("#{id}-hint" if id && hint.present?), ("#{id}-error" if id && errors.any?) ].compact.presence&.join(" ")
+      defaults = { id: id, class: lc_field_class(extra: "m-0 min-w-0 border-0 p-0"), aria: { invalid: (true if errors.any?), describedby: described }, data: { slot: "choice-group", invalid: (true if errors.any?) } }
+      tag.fieldset(**lc_attributes(defaults, attributes)) do
         safe_join([
-          tag.legend(legend, class: lc_field_label_class(extra: "p-0")),
+          tag.legend(legend, class: lc_field_label_class(extra: "p-0"), data: { slot: "choice-group-legend" }),
           tag.div(class: "flex flex-col gap-related", &block),
-          *lc_field_messages(nil, hint, errors)
+          *lc_field_messages(id, hint, errors)
         ])
       end
     end
@@ -64,7 +67,7 @@ module Lostcoords::Ui
       end
 
       # Shared with Lostcoords::Ui::FormBuilder, which renders its own inputs.
-      def lc_choice_label(slot, label, hint, input, card: false, **attributes, &block)
+      def lc_choice_label(slot, label, hint, input, card: false, errors: [], error_id: nil, **attributes, &block)
         extra = capture(&block) if block
         tag.label(**lc_attributes({ class: lc_choice_label_class(card: card), data: { slot: slot, card: (true if card) } }, attributes)) do
           safe_join([
@@ -73,6 +76,7 @@ module Lostcoords::Ui
               safe_join([
                 tag.span(label, class: ("text-label" if card)),
                 (tag.span(hint, class: "text-small text-muted-foreground") if hint.present?),
+                (tag.span(safe_join(errors, tag.br), id: error_id, class: "text-small text-destructive", data: { slot: "field-error" }) if errors.any?),
                 (tag.span(extra, class: "flex min-w-0 flex-col pt-tight") if extra.present?)
               ].compact)
             end

data/app/helpers/lostcoords/ui/collapsible_helper.rb

@@ -0,0 +1,9 @@
+module Lostcoords::Ui
+  module CollapsibleHelper
+    def lc_collapsible(title:, open: false, **attributes, &block)
+      lc_label!(title, :title)
+      defaults = { class: lc_card_class(extra: "lc-collapsible"), open: open, data: { slot: "collapsible", controller: "lc-collapsible", action: "click->lc-collapsible#toggle" } }
+      render "lostcoords/ui/components/lc_collapsible", title: title, attributes: lc_attributes(defaults, attributes), content: (capture(&block) if block)
+    end
+  end
+end

data/app/helpers/lostcoords/ui/dialog_helper.rb

@@ -14,13 +14,18 @@ module Lostcoords::Ui
     }.freeze
 
     def lc_dialog_class(kind = :modal, extra: nil)
-      lc_tw("lc-squircle", lc_dialog_kinds.fetch(kind), extra)
+      lc_tw("lc-squircle", DIALOGS.fetch(lc_option!(:kind, kind, DIALOGS.keys)), extra)
     end
 
-    private
-
-    def lc_dialog_kinds
-      DIALOGS
+    # Yields a builder with footer and close parts.
+    def lc_dialog(id:, title:, description: nil, trigger: lc_t("lostcoords.ui.dialog.trigger"), kind: :modal, detents: "fit", **attributes, &block)
+      lc_label!(id, :id)
+      lc_label!(title, :title)
+      lc_label!(trigger, :trigger)
+      defaults = { class: lc_dialog_class(kind), aria: { describedby: ("#{id}-description" if description.present?) }, data: lc_sheet_data({ slot: "dialog" }, detents: detents) }
+      required = { id: id, aria: { labelledby: "#{id}-title" }, data: { lc_dialog_target: "dialog" } }
+      render "lostcoords/ui/components/lc_dialog", id: id, title: title, description: description, trigger: trigger,
+        attributes: lc_attributes(defaults, attributes, required), content: (capture(Parts::Dialog.new(self, id), &block) if block)
     end
   end
 end

data/app/helpers/lostcoords/ui/emoji_picker_helper.rb

@@ -6,6 +6,12 @@ module Lostcoords::Ui
   module EmojiPickerHelper
     include TranslationHelper
 
+    def lc_emoji_picker(form:, field:, label:, catalog_url:, value: nil, quick: [], recent: [], recent_scope: nil, auto_submit: false, **attributes)
+      lc_label!(label, :label)
+      lc_label!(catalog_url, :catalog_url)
+      render "lostcoords/ui/components/emoji_picker", form: form, field: field, label: label, catalog_url: catalog_url, value: value, quick: quick, recent: recent, recent_scope: recent_scope, auto_submit: auto_submit, attributes: attributes
+    end
+
     SEARCH_NAMES_PATH = Lostcoords::Ui.root.join("config/emoji_search_names.yml")
     SEARCH_NAMES_JA_PATH = Lostcoords::Ui.root.join("config/emoji_search_names_ja.yml")
     SEARCH_ALIASES_PATH = Lostcoords::Ui.root.join("config/emoji_search_aliases.yml")

data/app/helpers/lostcoords/ui/feedback_helper.rb

@@ -9,13 +9,13 @@ module Lostcoords::Ui
       lg: "size-8 border-[3px]"
     }.freeze
 
-    SKELETON_BASE = "block rounded-xl bg-muted animate-pulse"
+    SKELETON_BASE = "block rounded-xl bg-tile animate-pulse"
 
     EMPTY_STATE_BASE =
       "flex flex-col items-center gap-content text-center " \
       "py-section px-content"
 
-    ALERT_BASE = "flex items-start gap-related py-heading px-content rounded-2xl lc-squircle bg-muted text-foreground text-label"
+    ALERT_BASE = "flex items-start gap-related py-heading px-content rounded-2xl lc-squircle bg-tile text-foreground text-label"
     ALERT_ICONS = {
       neutral: [ "information-circle", "text-muted-foreground" ],
       primary: [ "information-circle", "text-primary" ],

data/app/helpers/lostcoords/ui/form_helper.rb

@@ -1,7 +1,7 @@
 module Lostcoords::Ui
   module FormHelper
     TOGGLE_GROUP_BASE =
-      "inline-flex items-center gap-1 rounded-2xl bg-muted p-1 lc-squircle"
+      "inline-flex items-center gap-1 rounded-2xl bg-track p-1 lc-squircle"
 
     TOGGLE_GROUP_ITEM_BASE =
       "lc-press inline-flex items-center justify-center gap-1.5 whitespace-nowrap " \