lostcoords-ui 0.4.1 → 0.6.0

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

@@ -1,21 +1,2 @@
-@import "./theme.css";
-@source "../../../../helpers/**/*.rb";
-@source "../../../../javascript/**/*.js";
-@source "../../../../views/**/*.erb";
-@source not "../../../../../lib";
-
-@import "./glass.css";
-@import "./copy-button.css";
-@import "./disclosure.css";
-@import "./emoji-picker.css";
-@import "./popover.css";
-@import "./sheet.css";
-@import "./card.css";
-@import "./dialog.css";
-@import "./avatar.css";
-@import "./squircle.css";
-@import "./utilities.css";
-@import "./typography.css";
-@import "./layout.css";
-@import "./reading.css";
-@import "./field.css";
+@import "./components.css";
+@import "./base.css";

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

@@ -1,45 +1,37 @@
-/* The rim is the border box painted with --pill-rim under the surface, so
-   one element carries both layers. */
-@utility pill-3d {
-  border: calc(var(--spacing) * 0.375) solid transparent;
-  background: var(--pill-surface) padding-box, var(--pill-rim) border-box;
-  box-shadow: var(--pill-light), var(--pill-depth);
-}
-
 /* A control gives a little as it is pressed, unless it is disabled. */
-@utility press {
+@utility lc-press {
   @media (prefers-reduced-motion: no-preference) {
     &:not([disabled], :disabled, [aria-disabled="true"]):active {
-      transform: scale(var(--press-scale, var(--ui-press-scale)));
+      transform: scale(var(--lc-press-scale));
     }
   }
 }
 
 @layer components {
   /* A data-URI image cannot read CSS variables, so the chevron's ink is baked in. */
-  select.select-control {
+  select.lc-select {
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237b808a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
     background-size: calc(var(--spacing) * 5) calc(var(--spacing) * 5);
     background-repeat: no-repeat;
-    background-position: right calc(var(--spacing) * 4) center;
+    background-position: right calc(var(--spacing) * 3) center;
   }
 }
 
-@property --scroll-fade-start { syntax: "<length>"; inherits: false; initial-value: 0; }
-@property --scroll-fade-end { syntax: "<length>"; inherits: false; initial-value: 0; }
+@property --lc-scroll-fade-start { syntax: "<length>"; inherits: false; initial-value: 0; }
+@property --lc-scroll-fade-end { syntax: "<length>"; inherits: false; initial-value: 0; }
 
-@keyframes scroll-fade-x {
-  0%   { --scroll-fade-start: 0; --scroll-fade-end: 2rem; }
-  15%  { --scroll-fade-start: 2rem; }
-  85%  { --scroll-fade-end: 2rem; }
-  100% { --scroll-fade-start: 2rem; --scroll-fade-end: 0; }
+@keyframes lc-scroll-fade-x {
+  0%   { --lc-scroll-fade-start: 0; --lc-scroll-fade-end: 2rem; }
+  15%  { --lc-scroll-fade-start: 2rem; }
+  85%  { --lc-scroll-fade-end: 2rem; }
+  100% { --lc-scroll-fade-start: 2rem; --lc-scroll-fade-end: 0; }
 }
 
 @supports (animation-timeline: scroll(self inline)) {
-  .scroll-fade-x {
-    mask-image: linear-gradient(to right, transparent, black var(--scroll-fade-start), black calc(100% - var(--scroll-fade-end)), transparent);
-    animation: scroll-fade-x linear both;
+  .lc-scroll-fade-x {
+    mask-image: linear-gradient(to right, transparent, black var(--lc-scroll-fade-start), black calc(100% - var(--lc-scroll-fade-end)), transparent);
+    animation: lc-scroll-fade-x linear both;
     animation-timeline: scroll(self inline);
   }
 }

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

@@ -1,128 +1,96 @@
 module Lostcoords::Ui
   module BadgeHelper
     ICON_BADGE_BASE =
-      "icon-badge squircle grid place-items-center shrink-0 " \
-      "size-[var(--icon-badge-size,var(--icon-badge-size-default,--spacing(10)))] " \
-      "[border:var(--icon-badge-border,1px_solid_transparent)] " \
-      "rounded-[var(--icon-badge-radius,var(--radius-2xl))] " \
-      "bg-[var(--icon-badge-bg,var(--paper-2))] " \
-      "text-[length:var(--icon-badge-font-size,var(--icon-badge-font-size-default,1.125rem))] leading-none"
-
-    # Sizes set the default, so a context that pins --icon-badge-size still wins.
-    ICON_BADGE_SIZES = {
-      base: "",
-      lg: "[--icon-badge-size-default:--spacing(11)] [--icon-badge-font-size-default:1.25rem]",
-      xl: "[--icon-badge-size-default:--spacing(14)] [--icon-badge-font-size-default:1.5rem]"
-    }.freeze
-
-    ICON_MEDALLION_BASE = "grid place-items-center shrink-0 rounded-full"
+      "lc-icon-badge grid place-items-center shrink-0 " \
+      "size-[var(--lc-icon-badge-size,var(--lc-icon-badge-size-default,--spacing(10)))] " \
+      "[border:var(--lc-icon-badge-border,1px_solid_transparent)] " \
+      "text-[length:var(--lc-icon-badge-font-size,var(--lc-icon-badge-font-size-default,1.125rem))] leading-none"
 
-    ICON_MEDALLION_SIZES = {
-      sm: "size-6.5",
-      lg: "size-12"
+    # Sizes set the default, so a context that pins --lc-icon-badge-size still wins.
+    ICON_BADGE_SIZES = {
+      sm: "[--lc-icon-badge-size-default:--spacing(6.5)] [--lc-icon-badge-font-size-default:0.8125rem]",
+      md: "",
+      lg: "[--lc-icon-badge-size-default:--spacing(12)] [--lc-icon-badge-font-size-default:1.5rem]",
+      xl: "[--lc-icon-badge-size-default:--spacing(14)] [--lc-icon-badge-font-size-default:1.75rem]"
     }.freeze
 
-    ICON_MEDALLION_TONES = {
-      accent: "bg-sky-soft text-accent",
-      neutral: "bg-paper-2",
-      leaf: "bg-[color-mix(in_oklab,var(--leaf-soft)_72%,var(--paper))] text-leaf"
-    }.freeze
+    ICON_BADGE_SHAPES = { square: "lc-squircle rounded-2xl", circle: "rounded-full" }.freeze
 
     AVATAR_BASE =
-      "avatar grid place-items-center shrink-0 rounded-full font-medium tracking-[var(--avatar-tracking,0.05em)] " \
-      "size-[var(--avatar-size,var(--avatar-size-default,--spacing(8)))] " \
-      "text-[length:var(--avatar-font-size,var(--avatar-font-size-default,0.75rem))] " \
-      "text-[color:var(--avatar-color,var(--ink-on-accent))] " \
-      "border-[length:var(--avatar-border,0px)] border-[color:var(--avatar-cutout,var(--paper))]"
+      "lc-avatar grid place-items-center shrink-0 rounded-full font-medium tracking-[var(--lc-avatar-tracking,0.05em)] " \
+      "size-[var(--lc-avatar-size,var(--lc-avatar-size-default,--spacing(8)))] " \
+      "text-[length:var(--lc-avatar-font-size,var(--lc-avatar-font-size-default,0.75rem))] " \
+      "text-[color:var(--lc-avatar-color,var(--primary-foreground))] " \
+      "border-[length:var(--lc-avatar-border,0px)] border-[color:var(--lc-avatar-cutout,var(--background))]"
 
-    # Sizes set the default, so a context that pins --avatar-size (a stack, a dialog) still wins.
+    # Sizes set the default, so a context that pins --lc-avatar-size (a stack, a dialog) still wins.
     AVATAR_SIZES = {
-      base: "",
-      lg: "",
-      sm: "[--avatar-size-default:--spacing(6.5)] [--avatar-font-size-default:0.625rem]",
-      xl: "[--avatar-size-default:--spacing(24)] [--avatar-font-size-default:1.25rem]"
+      md: "",
+      lg: "[--lc-avatar-size-default:--spacing(12)] [--lc-avatar-font-size-default:1rem]",
+      sm: "[--lc-avatar-size-default:--spacing(6.5)] [--lc-avatar-font-size-default:0.625rem]",
+      xl: "[--lc-avatar-size-default:--spacing(24)] [--lc-avatar-font-size-default:1.25rem]"
     }.freeze
 
-    AVATAR_INK = "[--avatar-color:var(--ink)]"
+    AVATAR_INK = "[--lc-avatar-color:var(--foreground)]"
 
-    AVATAR_LINKED = "avatar-ring"
+    AVATAR_LINKED = "lc-avatar-ring"
 
     # Overlapping avatars with a "+N" chip. The stack sets inherited variables rather than styling
-    # its avatars, so a context's own `[&_.avatar]:` override still wins. The border cuts each
-    # avatar out of the one beneath, so it takes the fill it sits on (--avatar-cutout).
+    # its avatars, so a context's own `[&_.lc-avatar]:` override still wins. The border cuts each
+    # avatar out of the one beneath, so it takes the fill it sits on (--lc-avatar-cutout).
     AVATAR_STACK_BASE =
-      "avatar-stack relative inline-flex items-center min-w-0 [&_.avatar]:outline-none " \
-      "[--avatar-size:--spacing(8)] [--avatar-border:--spacing(0.5)] [--avatar-ring-gap:1] " \
-      "[--avatar-stack-overlap:--spacing(1.5)]"
+      "lc-avatar-stack relative inline-flex items-center min-w-0 [&_.lc-avatar]:outline-none " \
+      "[--lc-avatar-size:--spacing(8)] [--lc-avatar-border:--spacing(0.5)] [--lc-avatar-ring-gap:1] " \
+      "[--lc-avatar-stack-overlap:--spacing(1.5)]"
 
     AVATAR_STACK_COMPACT =
-      "[--avatar-size:--spacing(4.5)] [--avatar-font-size:0.4375rem] [--avatar-border:0px] [--avatar-ring-gap:2] " \
-      "@sm:[--avatar-size:--spacing(5.5)] @sm:[--avatar-font-size:0.5rem] " \
-      "[--avatar-stack-overlap:--spacing(1.25)] [--avatar-stack-padding:0px]"
+      "[--lc-avatar-size:--spacing(4.5)] [--lc-avatar-font-size:0.4375rem] [--lc-avatar-border:0px] [--lc-avatar-ring-gap:2] " \
+      "@sm:[--lc-avatar-size:--spacing(5.5)] @sm:[--lc-avatar-font-size:0.5rem] " \
+      "[--lc-avatar-stack-overlap:--spacing(1.25)] [--lc-avatar-stack-padding:0px]"
 
     # dynamic_avatar_stack_controller marks the leading visible avatar with data-first as it narrows the stack.
     AVATAR_STACK_ROW =
-      "avatar-stack__row flex shrink-0 p-[var(--avatar-stack-padding,--spacing(1))] " \
-      "[&>.avatar]:-ms-(--avatar-stack-overlap) [&>.avatar:first-child]:ms-0 [&>.avatar[data-first]]:ms-0"
-
-    EYEBROW_BASE =
-      "font-mono uppercase tracking-widest text-xs font-medium text-ink-3"
+      "lc-avatar-stack__row flex shrink-0 p-[var(--lc-avatar-stack-padding,--spacing(1))] " \
+      "[&>.lc-avatar]:-ms-(--lc-avatar-stack-overlap) [&>.lc-avatar:first-child]:ms-0 [&>.lc-avatar[data-first]]:ms-0"
 
     BADGE_BASE =
-      "inline-flex items-center gap-1 rounded-xl px-2.5 py-1 " \
-      "font-body text-xs font-medium whitespace-nowrap"
+      "inline-flex items-center gap-tight rounded-lg lc-squircle px-2 py-0.5 " \
+      "font-sans text-caption font-medium whitespace-nowrap"
 
     BADGE_TONES = {
-      neutral: "bg-paper-2 text-ink-2",
-      success: "bg-leaf-soft text-leaf",
-      warning: "bg-gold-soft text-gold",
-      danger: "bg-berry-soft text-berry",
-      info: "bg-sky-soft text-sky-deep"
+      neutral: "bg-tile text-muted-foreground",
+      success: "bg-success-soft text-success",
+      warning: "bg-warning-soft text-warning",
+      destructive: "bg-destructive-soft text-destructive",
+      primary: "bg-primary-soft text-primary"
     }.freeze
 
-    STATUS_PILL_BASE =
-      "inline-flex items-center rounded-full px-[0.6em] py-[0.15em] " \
-      "font-body text-sm font-medium"
-
-    STATUS_PILL_TONES = {
-      accent: "bg-sky-soft text-accent",
-      danger: "bg-berry-soft text-berry"
-    }.freeze
-
-    PILL_BASE =
-      "inline-flex items-center justify-center gap-2 rounded-full " \
-      "border border-transparent bg-paper-2 " \
-      "font-body text-ink-2 whitespace-nowrap cursor-pointer no-underline " \
-      "transition-[background-color,border-color,color,transform] duration-[150ms] ease-out " \
-      "hover:text-ink active:scale-[0.96] " \
-      "aria-pressed:[background:var(--sky-soft)] aria-pressed:border-accent aria-pressed:text-accent aria-pressed:shadow-none " \
-      "aria-[current]:not-aria-[current=false]:[background:var(--sky-soft)] aria-[current]:not-aria-[current=false]:border-accent " \
-      "aria-[current]:not-aria-[current=false]:text-accent aria-[current]:not-aria-[current=false]:shadow-none " \
-      "has-checked:[background:var(--sky-soft)] has-checked:border-accent has-checked:text-accent has-checked:shadow-none " \
+    TOGGLE_BASE =
+      "inline-flex items-center justify-center gap-related rounded-pill " \
+      "border border-transparent bg-input " \
+      "font-sans text-muted-foreground whitespace-nowrap cursor-pointer no-underline " \
+      "transition-[background-color,border-color,color,transform] duration-(--lc-motion-quick) ease-(--lc-ease-out) " \
+      "lc-press hover:text-foreground " \
+      "aria-pressed:bg-primary-soft aria-pressed:border-primary aria-pressed:text-primary aria-pressed:shadow-none " \
+      "aria-[current]:not-aria-[current=false]:bg-primary-soft aria-[current]:not-aria-[current=false]:border-primary " \
+      "aria-[current]:not-aria-[current=false]:text-primary aria-[current]:not-aria-[current=false]:shadow-none " \
+      "has-checked:bg-primary-soft has-checked:border-primary has-checked:text-primary has-checked:shadow-none " \
       "[&_svg]:size-[1.1em] [&_svg]:shrink-0"
 
-    PILL_ACTIVE = "bg-sky-soft border-accent text-accent hover:text-accent shadow-none"
+    TOGGLE_ACTIVE = "bg-primary-soft border-primary text-primary hover:text-primary shadow-none"
 
-    PILL_GHOST = "border-dashed border-ink-3/40 [background:none] shadow-none text-ink-3"
+    TOGGLE_GHOST = "border-dashed border-muted-foreground/40 [background:none] shadow-none text-muted-foreground"
 
-    PILL_ROW_BASE =
-      "flex flex-wrap items-center gap-y-2 gap-x-2"
-
-    def lc_icon_badge_class(size: :base, extra: nil)
-      lc_tw(ICON_BADGE_BASE, ICON_BADGE_SIZES.fetch(size.to_sym), extra)
+    def lc_icon_badge_class(size: :md, shape: :square, tone: :neutral, extra: nil)
+      size = lc_option!(:size, size, ICON_BADGE_SIZES.keys)
+      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-tile text-foreground" : BADGE_TONES.fetch(tone)), extra)
     end
 
-    def lc_icon_medallion_class(size: :sm, tone: :accent, extra: nil)
-      lc_tw(
-        ICON_MEDALLION_BASE,
-        ICON_MEDALLION_SIZES.fetch(size.to_sym, ICON_MEDALLION_SIZES[:sm]),
-        ICON_MEDALLION_TONES.fetch(tone.to_sym, ICON_MEDALLION_TONES[:accent]),
-        extra
-      )
-    end
-
-    def lc_avatar_class(size: :base, ink: false, linked: false, extra: nil)
-      lc_tw(AVATAR_BASE, AVATAR_SIZES.fetch(size.to_sym), (AVATAR_INK if ink), (AVATAR_LINKED if linked), extra)
+    def lc_avatar_class(size: :md, ink: false, linked: false, extra: nil)
+      lc_tw(AVATAR_BASE, AVATAR_SIZES.fetch(lc_option!(:size, size, AVATAR_SIZES.keys)), (AVATAR_INK if ink), (AVATAR_LINKED if linked), extra)
     end
 
     def lc_avatar_stack_class(compact: false, extra: nil)
@@ -133,30 +101,19 @@ module Lostcoords::Ui
       lc_tw(AVATAR_STACK_ROW, extra)
     end
 
-    def lc_eyebrow_class(extra: nil)
-      lc_tw(EYEBROW_BASE, extra)
-    end
-
     def lc_badge_class(tone: :neutral, extra: nil)
-      lc_tw(BADGE_BASE, BADGE_TONES.fetch(tone.to_sym, BADGE_TONES[:neutral]), extra)
-    end
-
-    def lc_status_pill_class(tone: :accent, extra: nil)
-      lc_tw(STATUS_PILL_BASE, STATUS_PILL_TONES.fetch(tone.to_sym, STATUS_PILL_TONES[:accent]), extra)
+      tone = lc_option!(:tone, tone, BADGE_TONES.keys)
+      lc_tw(BADGE_BASE, BADGE_TONES.fetch(tone), extra)
     end
 
-    def lc_pill_class(active: false, ghost: false, size: :base, extra: nil)
+    def lc_toggle_class(active: false, ghost: false, size: :md, extra: nil)
       lc_tw(
-        PILL_BASE,
-        ButtonHelper::BUTTON_SIZES.fetch(size.to_sym, ButtonHelper::BUTTON_SIZES[:base]),
-        (PILL_GHOST if ghost),
-        (PILL_ACTIVE if active),
+        TOGGLE_BASE,
+        ButtonHelper::BUTTON_SIZES.fetch(lc_option!(:size, size, ButtonHelper::BUTTON_SIZES.keys)),
+        (TOGGLE_GHOST if ghost),
+        (TOGGLE_ACTIVE if active),
         extra
       )
     end
-
-    def lc_pill_row_class(extra: nil)
-      lc_tw(PILL_ROW_BASE, extra)
-    end
   end
 end

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

@@ -1,70 +1,79 @@
 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-2 rounded-full font-body font-medium " \
+      "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-(--ui-motion-control) ease-out " \
-      "motion-safe:hover:-translate-y-px motion-safe:active:translate-y-px active:shadow-none disabled:opacity-40 disabled:pointer-events-none " \
+      "transition-[background-color,border-color,color,box-shadow,transform,translate,scale,filter] duration-(--lc-motion-control) ease-(--lc-ease-out) " \
+      "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.
     BUTTON_SIZES = {
-      sm: "#{TailwindHelper::CONTROL_SIZES[:sm]} px-4 has-[>[data-icon=inline-start]]:ps-3 has-[>[data-icon=inline-end]]:pe-3 text-sm",
-      base: "#{TailwindHelper::CONTROL_SIZES[:base]} px-5 has-[>[data-icon=inline-start]]:ps-4 has-[>[data-icon=inline-end]]:pe-4 text-base",
-      lg: "#{TailwindHelper::CONTROL_SIZES[:lg]} px-7 has-[>[data-icon=inline-start]]:ps-6 has-[>[data-icon=inline-end]]:pe-6 text-base",
-      nav: "#{TailwindHelper::CONTROL_SIZES[:sm]} px-4 has-[>[data-icon=inline-start]]:ps-3 has-[>[data-icon=inline-end]]:pe-3 text-base"
+      sm: "#{TailwindHelper::CONTROL_SIZES[:sm]} px-3 has-[>[data-icon=inline-start]]:ps-2.5 has-[>[data-icon=inline-end]]:pe-2.5 text-label",
+      md: "#{TailwindHelper::CONTROL_SIZES[:md]} px-4 has-[>[data-icon=inline-start]]:ps-3.5 has-[>[data-icon=inline-end]]:pe-3.5 text-label",
+      lg: "#{TailwindHelper::CONTROL_SIZES[:lg]} px-5 has-[>[data-icon=inline-start]]:ps-4 has-[>[data-icon=inline-end]]:pe-4 text-body font-medium"
     }.freeze
 
+    BUTTON_HOVER =
+      "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 = {
-      default: "border border-transparent bg-paper text-ink active:bg-paper-2",
-      accent: "border border-transparent bg-sky text-ink-on-accent hover:bg-sky-deep active:bg-sky-deep",
-      secondary: "border border-transparent bg-paper-2 text-ink hover:bg-paper-3 active:bg-paper-3",
-      glass: "pill-3d text-ink hover:brightness-[0.98] active:brightness-[0.96]",
-      ghost: "border border-transparent bg-transparent text-ink-2 hover:bg-(--ghost-hover-bg,var(--paper-2)) hover:text-ink active:bg-(--ghost-hover-bg,var(--paper-2))",
-      danger: "border border-transparent bg-transparent text-berry hover:bg-berry/8 active:bg-berry/8"
+      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 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
 
     ICON_BUTTON_BASE =
-      "inline-grid place-items-center shrink-0 border-0 bg-transparent " \
-      "text-ink-3 cursor-pointer no-underline " \
-      "transition-[background-color,color,transform,scale] duration-(--ui-motion-quick) ease-out " \
-      "hover:bg-paper-2 hover:text-ink motion-safe:active:scale-(--ui-press-scale) " \
-      "disabled:opacity-40 disabled:pointer-events-none " \
+      "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) " \
+      "not-disabled:hover:text-(--lc-button-ink,var(--foreground)) #{BUTTON_HOVER} " \
+      "#{BUTTON_DISABLED} " \
       "[&_svg]:block [&_svg]:shrink-0"
 
     ICON_BUTTON_SHAPES = {
-      square: "rounded-xl",
-      circle: "rounded-full"
+      square: "rounded-xl lc-squircle",
+      circle: "rounded-pill"
     }.freeze
 
     ICON_BUTTON_SIZES = {
-      sm: "size-11 [&_svg]:size-4",
-      base: "size-12 [&_svg]:size-5",
-      lg: "size-14 [&_svg]:size-6"
+      sm: "size-control-sm [&_svg]:size-4",
+      md: "size-control-md [&_svg]:size-5",
+      lg: "size-control-lg [&_svg]:size-6"
     }.freeze
 
-    def lc_button_class(variant: :default, size: :base, block: false, extra: nil)
+    def lc_button_class(variant: :primary, size: :md, block: false, extra: nil)
+      variant = lc_option!(:variant, variant, BUTTON_VARIANTS.keys)
+      size = lc_option!(:size, size, BUTTON_SIZES.keys)
       lc_tw(
         BUTTON_BASE,
-        BUTTON_SIZES.fetch(size.to_sym, BUTTON_SIZES[:base]),
-        lc_button_variants.fetch(variant.to_sym, lc_button_variants[:default]),
+        BUTTON_SIZES.fetch(size),
+        (lc_glass_class(shape: :bar) if variant == :glass),
+        BUTTON_VARIANTS.fetch(variant),
         ("w-full" if block),
         extra
       )
     end
 
-    def lc_icon_button_class(shape: :square, size: :base, extra: nil)
+    def lc_icon_button_class(shape: :square, size: :md, extra: nil)
+      shape = lc_option!(:shape, shape, ICON_BUTTON_SHAPES.keys)
+      size = lc_option!(:size, size, ICON_BUTTON_SIZES.keys)
       lc_tw(
         ICON_BUTTON_BASE,
-        ICON_BUTTON_SHAPES.fetch(shape.to_sym, ICON_BUTTON_SHAPES[:square]),
-        ICON_BUTTON_SIZES.fetch(size.to_sym, ICON_BUTTON_SIZES[:base]),
+        ICON_BUTTON_SHAPES.fetch(shape),
+        ICON_BUTTON_SIZES.fetch(size),
         extra
       )
     end
-
-    private
-
-    def lc_button_variants
-      BUTTON_VARIANTS
-    end
   end
 end

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

@@ -1,60 +1,17 @@
 module Lostcoords::Ui
   module CardHelper
-    CARD_BASE =
-      "squircle bg-paper-2 border border-transparent rounded-3xl"
-
+    # Padding sizes set --lc-inset, so nested content that pads or gaps with inset follows the card.
     CARD_PADDING = {
-      default: "p-5",
-      dense: "py-4 px-3.5 sm:p-5"
-    }.freeze
-
-    HOVER_LIFT =
-      "transition-[transform,box-shadow] duration-[180ms] ease-out " \
-      "hover:-translate-y-0.5 hover:shadow-(--shadow)"
-
-    CARD_SURFACE_CHROME =
-      "squircle bg-(--card-surface-bg,var(--paper-2)) " \
-      "[border:var(--card-surface-border,1px_solid_transparent)] " \
-      "rounded-(--card-surface-radius,var(--radius-3xl)) " \
-      "shadow-(--card-surface-shadow,none) [--field-bg:var(--paper)] " \
-      "[--avatar-cutout:var(--card-surface-bg,var(--paper-2))] " \
-      "transition-[background,border-color,box-shadow] duration-[180ms] ease-(--ease-out)"
-
-    FORM_CARD_BASE =
-      "form-card @container " \
-      "#{CARD_SURFACE_CHROME} " \
-      "has-[[data-tone=error]]:[border-color:color-mix(in_oklab,var(--berry)_30%,var(--hairline))]"
-
-    FORM_CARD_PADDINGS = {
-      default: "p-(--form-card-padding,1.25rem)",
-      compact: "p-(--form-card-padding,1rem_14px) sm:p-(--form-card-padding,20px)",
-      snug: "p-(--form-card-padding,1rem_14px) sm:p-(--form-card-padding,1rem_20px)",
-      empty: "p-(--form-card-padding,2rem_1.25rem)"
+      none: "p-0",
+      md: "p-inset",
+      sm: "[--lc-inset:var(--spacing-content)] p-inset"
     }.freeze
+    HOVER_LIFT = "transition-[transform,box-shadow] duration-(--lc-motion-control) ease-(--lc-ease-out) hover:-translate-y-0.5 hover:shadow-(--lc-shadow)"
 
-    FORM_CARD_EMPTY_CONTENT = "text-center text-ink-3"
-
-    def lc_card_class(interactive: false, dense: false, extra: nil)
-      lc_tw(
-        CARD_BASE,
-        CARD_PADDING.fetch(dense ? :dense : :default),
-        (HOVER_LIFT if interactive),
-        ("hover:bg-paper-3" if interactive),
-        extra
-      )
-    end
-
-    def lc_card_surface_class(extra: nil)
-      lc_tw(CARD_SURFACE_CHROME, extra)
-    end
-
-    def lc_form_card_class(padding: :default, extra: nil)
-      lc_tw(
-        FORM_CARD_BASE,
-        FORM_CARD_PADDINGS.fetch(padding.to_sym, FORM_CARD_PADDINGS[:default]),
-        (FORM_CARD_EMPTY_CONTENT if padding.to_sym == :empty),
-        extra
-      )
+    def lc_card_class(interactive: false, padding: :md, extra: nil)
+      padding = lc_option!(:padding, padding, CARD_PADDING.keys)
+      lc_tw("lc-card lc-squircle", CARD_PADDING.fetch(padding),
+        ("#{HOVER_LIFT} hover:bg-accent" if interactive), extra)
     end
   end
 end

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

@@ -0,0 +1,87 @@
+module Lostcoords::Ui
+  module ChoiceHelper
+    CHOICE_BASE = "shrink-0 size-4.5 m-0 cursor-pointer accent-primary disabled:cursor-not-allowed disabled:opacity-40"
+
+    # The label row centers the control on the first line of text, so a hint wraps under the label.
+    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-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))"
+
+    def lc_choice_label_class(card: false, extra: nil)
+      lc_tw(CHOICE_LABEL, (CHOICE_CARD if card), extra)
+    end
+
+    def lc_checkbox_class(extra: nil)
+      lc_tw("lc-checkbox rounded-sm", CHOICE_BASE, extra)
+    end
+
+    def lc_radio_class(extra: nil)
+      lc_tw("lc-radio rounded-full", CHOICE_BASE, extra)
+    end
+
+    def lc_switch_class(extra: nil)
+      lc_tw("lc-switch shrink-0 m-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-40", extra)
+    end
+
+    # A native checkbox. unchecked_value: submits a value when unchecked, like Rails' check_box; pass nil to omit it.
+    # A block adds content under the label, such as a preview inside a card: true tile.
+    def lc_checkbox(label, name: nil, value: "1", checked: false, unchecked_value: "0", hint: nil, card: false, **attributes, &block)
+      lc_choice("checkbox", label, hint, card, name, unchecked_value, { type: "checkbox", name: name, value: value, checked: checked, class: lc_checkbox_class }, attributes, &block)
+    end
+
+    def lc_radio(label, name:, value:, checked: false, hint: nil, card: false, **attributes, &block)
+      lc_choice("radio", label, hint, card, name, nil, { type: "radio", name: name, value: value, checked: checked, class: lc_radio_class }, attributes, &block)
+    end
+
+    # A checkbox drawn as a switch. It submits with the form, like a checkbox.
+    def lc_switch(label, name: nil, value: "1", checked: false, unchecked_value: "0", hint: nil, **attributes)
+      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. 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
+      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"), data: { slot: "choice-group-legend" }),
+          tag.div(class: "flex flex-col gap-related", &block),
+          *lc_field_messages(id, hint, errors)
+        ])
+      end
+    end
+
+    private
+      def lc_choice(slot, label, hint, card, name, unchecked_value, defaults, attributes, &block)
+        lc_label!(label, :label)
+        input = lc_attributes(defaults.merge(data: { slot: "#{slot}-input" }), attributes)
+        hidden = hidden_field_tag(name, unchecked_value, id: nil, disabled: input[:disabled]) if name && !unchecked_value.nil?
+        lc_choice_label(slot, label, hint, safe_join([ hidden, tag.input(**input) ].compact), card: card, &block)
+      end
+
+      # Shared with Lostcoords::Ui::FormBuilder, which renders its own inputs.
+      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([
+            tag.span(input, class: "flex h-lh items-center"),
+            tag.span(class: "flex min-w-0 flex-1 flex-col gap-tight") do
+              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
+          ])
+        end
+      end
+  end
+end

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

@@ -0,0 +1,22 @@
+module Lostcoords::Ui
+  module CodeBlockHelper
+    def lc_code_block(source, id:, language: nil, title: nil, label: nil, max_lines: 10, **attributes, &block)
+      lc_label!(id, :id)
+      lc_label!(title, :title) unless title.nil?
+      label ||= lc_t("lostcoords.ui.code_block.label")
+      lc_label!(label, :label)
+      raise ArgumentError, "max_lines must be a positive integer or nil" unless max_lines.nil? || (max_lines.is_a?(Integer) && max_lines.positive?)
+
+      source = String.new(source.to_s)
+      content = block ? capture(source, &block) : source
+      truncated = !max_lines.nil? && source.lines.size > max_lines
+      defaults = {
+        id: id, class: "lc-code-block group/code-block relative min-h-15 overflow-hidden rounded-2xl bg-muted",
+        data: { controller: "lc-code-block", action: "lc-copy:error->lc-code-block#copyFailed" }
+      }
+      render "lostcoords/ui/components/lc_code_block", id: id, language: language, title: title, label: label,
+        content: content, truncated: truncated, max_lines: max_lines,
+        attributes: lc_attributes(defaults, attributes)
+    end
+  end
+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