lostcoords-ui 0.4.1 → 0.5.0

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

@@ -1,17 +1,10 @@
 module Lostcoords::Ui
   module PrimitivesHelper
-    BUTTON_STYLES = {
-      primary: :accent,
-      secondary: :secondary,
-      ghost: :ghost,
-      destructive: :danger
-    }.freeze
-
-    def lc_button(content = nil, variant: :primary, size: :base, icon: nil, icon_position: :start, **attributes, &block)
+    def lc_button(content = nil, variant: :primary, size: :md, icon: nil, icon_position: :start, **attributes, &block)
       tag.button(lc_button_content(content, icon, icon_position, &block), **lc_button_attributes(variant, size, { type: "button" }, attributes))
     end
 
-    def lc_button_link_to(content = nil, url = nil, variant: :primary, size: :base, icon: nil, icon_position: :start, **attributes, &block)
+    def lc_button_link_to(content = nil, url = nil, variant: :primary, size: :md, icon: nil, icon_position: :start, **attributes, &block)
       attributes = lc_button_attributes(variant, size, {}, attributes)
       raise ArgumentError, "Links cannot be disabled; use lc_button for a disabled control" if attributes[:disabled]
 
@@ -23,7 +16,7 @@ module Lostcoords::Ui
       link_to(lc_button_content(content, icon, icon_position), url, attributes)
     end
 
-    def lc_button_to(content = nil, url = nil, variant: :primary, size: :base, icon: nil, icon_position: :start, **attributes, &block)
+    def lc_button_to(content = nil, url = nil, variant: :primary, size: :md, icon: nil, icon_position: :start, **attributes, &block)
       if block
         url ||= content
         content = capture(&block)
@@ -32,10 +25,10 @@ module Lostcoords::Ui
       button_to(lc_button_content(content, icon, icon_position), url, lc_button_attributes(variant, size, {}, attributes))
     end
 
-    def lc_icon_button(label, icon:, size: :base, shape: :circle, **attributes)
+    def lc_icon_button(label, icon:, size: :md, shape: :circle, **attributes)
       size = lc_option!(:size, size, ButtonHelper::ICON_BUTTON_SIZES.keys)
       shape = lc_option!(:shape, shape, ButtonHelper::ICON_BUTTON_SHAPES.keys)
-      defaults = { type: "button", class: lc_icon_button_class(size: size, shape: shape), aria: { label: label } }
+      defaults = { type: "button", class: lc_icon_button_class(size: size, shape: shape), aria: { label: label }, data: { slot: "icon-button", size: size } }
       attributes = lc_attributes(defaults, attributes)
       accessible_label = attributes.fetch(:"aria-label", attributes.dig(:aria, :label))
       raise ArgumentError, "lc_icon_button requires a nonblank accessible label" if label.blank? || accessible_label.blank?
@@ -47,36 +40,18 @@ module Lostcoords::Ui
 
     def lc_badge(content = nil, tone: :neutral, **attributes, &block)
       tone = lc_option!(:tone, tone, BadgeHelper::BADGE_TONES.keys)
-      tag.span(content, **lc_attributes({ class: lc_badge_class(tone: tone) }, attributes), &block)
+      tag.span(content, **lc_attributes({ class: lc_badge_class(tone: tone), data: { slot: "badge", tone: tone } }, attributes), &block)
     end
 
-    def lc_status_pill(content = nil, tone: :accent, **attributes, &block)
-      tone = lc_option!(:tone, tone, BadgeHelper::STATUS_PILL_TONES.keys)
-      tag.span(content, **lc_attributes({ class: lc_status_pill_class(tone: tone) }, attributes), &block)
-    end
-
-    def lc_eyebrow(content = nil, **attributes, &block)
-      tag.span(content, **lc_attributes({ class: lc_eyebrow_class }, attributes), &block)
-    end
-
-    def lc_icon_badge(icon:, size: :base, **attributes)
-      size = lc_option!(:size, size, BadgeHelper::ICON_BADGE_SIZES.keys)
-      tag.span(**lc_attributes({ class: lc_icon_badge_class(size: size) }, attributes)) do
+    def lc_icon_badge(icon:, size: :md, shape: :square, tone: :neutral, **attributes)
+      tag.span(**lc_attributes({ class: lc_icon_badge_class(size: size, shape: shape, tone: tone), data: { slot: "icon-badge" } }, attributes)) do
         lc_icon(icon, options: { class: "size-[1em]", "aria-hidden": true })
       end
     end
 
-    def lc_medallion(icon:, size: :sm, tone: :accent, **attributes)
-      size = lc_option!(:size, size, BadgeHelper::ICON_MEDALLION_SIZES.keys)
-      tone = lc_option!(:tone, tone, BadgeHelper::ICON_MEDALLION_TONES.keys)
-      tag.span(**lc_attributes({ class: lc_icon_medallion_class(size: size, tone: tone) }, attributes)) do
-        lc_icon(icon, options: { class: "size-1/2", "aria-hidden": true })
-      end
-    end
-
-    def lc_avatar(content = nil, src: nil, alt: nil, size: :base, ink: false, linked: false, **attributes, &block)
+    def lc_avatar(content = nil, src: nil, alt: nil, size: :md, ink: false, linked: false, **attributes, &block)
       size = lc_option!(:size, size, BadgeHelper::AVATAR_SIZES.keys)
-      defaults = { class: lc_avatar_class(size: size, ink: ink, linked: linked) }
+      defaults = { class: lc_avatar_class(size: size, ink: ink, linked: linked), data: { slot: "avatar" } }
       if src
         tag.img(**lc_attributes(defaults.merge(src: src, alt: alt.to_s, class: lc_tw(defaults[:class], "object-cover")), attributes))
       else
@@ -85,51 +60,55 @@ module Lostcoords::Ui
     end
 
     def lc_avatar_stack(compact: false, **attributes, &block)
-      tag.span(**lc_attributes({ class: lc_avatar_stack_class(compact: compact) }, attributes)) do
+      tag.span(**lc_attributes({ class: lc_avatar_stack_class(compact: compact), data: { slot: "avatar-stack" } }, attributes)) do
         tag.span(class: lc_avatar_stack_row_class, &block)
       end
     end
 
-    def lc_card(href: nil, interactive: false, dense: false, **attributes, &block)
-      defaults = { class: lc_card_class(interactive: interactive || !href.nil?, dense: dense) }
+    # Yields a card builder with header, title, description, content and footer parts. The card stacks
+    # its children with the same inset it pads with.
+    def lc_card(href: nil, interactive: false, padding: :md, **attributes, &block)
+      defaults = { class: lc_card_class(interactive: interactive || !href.nil?, padding: padding, extra: "flex flex-col gap-inset"), data: { slot: "card" } }
+      content = capture(Parts::Card.new(self), &block) if block
       if href.nil?
-        tag.div(**lc_attributes(defaults, attributes), &block)
+        tag.div(content, **lc_attributes(defaults, attributes))
       else
-        defaults.merge!(href: href, class: lc_tw(defaults[:class], "block no-underline text-inherit"))
-        tag.a(**lc_attributes(defaults, attributes), &block)
+        defaults.merge!(href: href, class: lc_tw(defaults[:class], "no-underline text-inherit"))
+        tag.a(content, **lc_attributes(defaults, attributes))
       end
     end
 
-    def lc_card_surface(**attributes, &block)
-      tag.div(**lc_attributes({ class: lc_card_surface_class }, attributes), &block)
-    end
-
-    def lc_form_card(padding: :default, **attributes, &block)
-      padding = lc_option!(:padding, padding, CardHelper::FORM_CARD_PADDINGS.keys)
-      tag.div(**lc_attributes({ class: lc_form_card_class(padding: padding) }, attributes), &block)
-    end
-
     def lc_empty_state(**attributes, &block)
-      tag.div(**lc_attributes({ class: lc_empty_state_class }, attributes), &block)
+      tag.div(**lc_attributes({ class: lc_empty_state_class, data: { slot: "empty-state" } }, attributes), &block)
     end
 
-    def lc_spinner(size: :base, label: "Loading…", **attributes)
+    def lc_spinner(size: :md, label: lc_t("lostcoords.ui.spinner.label"), **attributes)
       size = lc_option!(:size, size, FeedbackHelper::SPINNER_SIZES.keys)
-      defaults = { class: lc_spinner_class(size: size), role: ("status" if label.present?), aria: { hidden: (true if label.blank?) } }
+      defaults = { class: lc_spinner_class(size: size), role: ("status" if label.present?), aria: { hidden: (true if label.blank?) }, data: { slot: "spinner" } }
       tag.span(**lc_attributes(defaults, attributes)) do
         tag.span(label, class: "sr-only") if label.present?
       end
     end
 
     def lc_skeleton(**attributes)
-      tag.span(**lc_attributes({ class: lc_tw(lc_skeleton_class, "h-4 w-full"), aria: { hidden: true } }, attributes))
+      tag.span(**lc_attributes({ class: lc_tw(lc_skeleton_class, "h-4 w-full"), aria: { hidden: true }, data: { slot: "skeleton" } }, attributes))
     end
 
-    def lc_form_alert(message, tone: :error, **attributes)
-      tone = lc_option!(:tone, tone, FormHelper::FORM_ALERT_ICONS.keys)
-      defaults = { class: lc_form_alert_class, role: (tone == :error ? "alert" : "status"), data: { tone: tone } }
+    # A block adds content below the message and yields a builder with an actions part.
+    def lc_alert(message = nil, title: nil, tone: :destructive, **attributes, &block)
+      tone = lc_option!(:tone, tone, FeedbackHelper::ALERT_ICONS.keys)
+      raise ArgumentError, "lc_alert needs a message, a title or a block" if message.blank? && title.blank? && block.nil?
+
+      defaults = { class: lc_alert_class, role: (tone == :destructive ? "alert" : "status"), data: { tone: tone, slot: "alert" } }
+      extra = capture(Parts::Alert.new(self), &block) if block
+      text = "m-0 min-w-0 text-pretty [overflow-wrap:anywhere]"
       tag.div(**lc_attributes(defaults, attributes)) do
-        safe_join([ lc_form_alert_icon(tone: tone), tag.p(message, class: "m-0 min-w-0 text-pretty [overflow-wrap:anywhere]") ])
+        body = [
+          (tag.p(title, class: "#{text} font-semibold", data: { slot: "alert-title" }) if title.present?),
+          (tag.p(message, class: lc_tw(text, ("font-normal" if title.present?)), data: { slot: "alert-description" }) if message.present?),
+          extra.presence
+        ].compact
+        safe_join([ lc_alert_icon(tone: tone), tag.div(safe_join(body), class: "flex min-w-0 flex-col gap-tight") ])
       end
     end
 
@@ -144,9 +123,8 @@ module Lostcoords::Ui
       end
 
       def lc_button_attributes(variant, size, defaults, attributes)
-        variant = lc_option!(:variant, variant, BUTTON_STYLES.keys)
-        size = lc_option!(:size, size, %i[sm base lg])
-        lc_attributes(defaults.merge(class: lc_button_class(variant: BUTTON_STYLES.fetch(variant), size: size)), attributes)
+        data = { slot: "button", variant: lc_option!(:variant, variant, ButtonHelper::BUTTON_VARIANTS.keys), size: lc_option!(:size, size, ButtonHelper::BUTTON_SIZES.keys) }
+        lc_attributes(defaults.merge(class: lc_button_class(variant: variant, size: size), data: data), attributes)
       end
   end
 end

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

@@ -1,8 +1,8 @@
 module Lostcoords::Ui
   module ReadingHelper
     PROSE_BASE =
-      "prose ui-prose min-w-0 max-w-(--ui-reading-measure,65ch) " \
-      "text-(length:--ui-reading-size,1rem) leading-(--ui-reading-leading,1.75)"
+      "prose lc-prose min-w-0 max-w-(--lc-reading-measure,65ch) " \
+      "text-(length:--lc-reading-size,1rem) leading-(--lc-reading-leading,1.75)"
 
     def lc_prose_class(extra: nil)
       lc_tw(PROSE_BASE, extra)

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

@@ -1,54 +1,12 @@
 module Lostcoords::Ui
   module SheetHelper
-    SHEET_ROW_BASE =
-      "grid grid-cols-[1.25rem_minmax(0,1fr)] @md:grid-cols-[8rem_minmax(0,1fr)] items-center " \
-      "gap-x-3 gap-y-2 min-h-14 px-4 py-2.5 bg-paper-2"
-
-    SHEET_ROW_LABEL_BASE =
-      "flex items-center gap-2 font-body text-sm font-semibold text-ink-3 " \
-      "[&_svg]:size-5 @md:[&_svg]:size-4.5 [&_svg]:shrink-0 @max-md:[&>span]:sr-only"
-
-    SHEET_CHIP_BASE = "max-w-full min-w-0 h-11 min-h-11 py-0 px-3.5 gap-2 text-sm bg-paper border-0 aria-pressed:font-semibold aria-[current]:not-aria-[current=false]:font-semibold"
-
-    SHEET_CHIP_ACTIVE = "bg-sky-soft font-semibold"
-
-    SHEET_MEMBER_CHIP = "ps-1.5 [&_.avatar]:shrink-0 [--avatar-size:28px]"
-
-    SHEET_DATETIME_INPUT_BASE =
-      "min-h-9 px-2 rounded-xl border-0 bg-transparent font-body text-base text-ink tabular-nums cursor-pointer " \
-      "outline-none [field-sizing:content] transition-colors hover:bg-paper focus-visible:bg-paper " \
-      "[&::-webkit-calendar-picker-indicator]:hidden"
-
-    SHEET_TEXT_INPUT_BASE =
-      "w-full min-w-0 min-h-9 p-0 border-0 bg-transparent font-body text-base text-ink placeholder:text-ink-3 aria-invalid:placeholder:text-berry/70 outline-none"
-
-    # Makes a <dialog> an iOS sheet on phones (sheet_controller), keeping the dialog's own
+    # Makes a <dialog> an iOS sheet on phones (lc-sheet controller), keeping the dialog's own
     # controllers. detents: "fit", "medium large" or "large".
     def lc_sheet_data(data = {}, detents: "fit")
       data.merge(
-        controller: [ data[:controller], "sheet" ].compact.join(" "),
-        sheet_detents_value: detents
+        controller: [ data[:controller], "lc-sheet" ].compact.join(" "),
+        lc_sheet_detents_value: detents
       )
     end
-
-    def lc_sheet_row_class(extra: nil)
-      lc_tw(SHEET_ROW_BASE, extra)
-    end
-
-    def lc_sheet_row_label_class(extra: nil)
-      lc_tw(SHEET_ROW_LABEL_BASE, extra)
-    end
-
-    def lc_sheet_chip_class(active: false, member: false, extra: nil)
-      lc_pill_class(size: :sm, active: active, extra: lc_tw(SHEET_CHIP_BASE, (SHEET_CHIP_ACTIVE if active), (SHEET_MEMBER_CHIP if member), extra))
-    end
-
-    def lc_sheet_datetime_input_class(extra: nil)
-      lc_tw(SHEET_DATETIME_INPUT_BASE, extra)
-    end
-
-    def lc_sheet_text_input_class(extra: nil)
-      lc_tw(SHEET_TEXT_INPUT_BASE, extra)
-    end
   end
 end

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

@@ -3,104 +3,86 @@ module Lostcoords::Ui
     INPUT_TYPES = %i[text search email password tel url number date time datetime-local month week].freeze
     SHEET_DETENTS = [ "fit", "medium large", "large" ].freeze
 
-    def lc_input(name: nil, value: nil, type: :text, size: :base, **attributes)
+    def lc_input(name: nil, value: nil, type: :text, size: :md, **attributes)
       type = lc_option!(:type, type, INPUT_TYPES)
       size = lc_option!(:size, size, TailwindHelper::CONTROL_SIZES.keys)
-      tag.input(**lc_attributes({ type: type, name: name, value: value, class: lc_input_class(size: size) }, attributes))
+      tag.input(**lc_attributes({ type: type, name: name, value: value, class: lc_input_class(size: size), data: { slot: "input" } }, attributes))
     end
 
     def lc_textarea(content = nil, name: nil, **attributes, &block)
-      tag.textarea(block ? capture(&block) : content, **lc_attributes({ name: name, class: lc_textarea_class }, attributes))
+      tag.textarea(block ? capture(&block) : content, **lc_attributes({ name: name, class: lc_textarea_class, data: { slot: "textarea" } }, attributes))
     end
 
-    def lc_select(options = nil, name: nil, selected: nil, size: :base, **attributes, &block)
+    def lc_select(options = nil, name: nil, selected: nil, size: :md, **attributes, &block)
       size = lc_option!(:size, size, TailwindHelper::CONTROL_SIZES.keys)
       content = block ? capture(&block) : options_for_select(options || [], selected)
-      tag.select(content, **lc_attributes({ name: name, class: lc_select_class(size: size) }, attributes))
+      tag.select(content, **lc_attributes({ name: name, class: lc_select_class(size: size), data: { slot: "select" } }, attributes))
     end
 
+    # Yields the control's attributes; splat them into the control with `**field`. error: takes a
+    # message or a list of messages, such as `record.errors.full_messages_for(:name)`.
     def lc_field(label:, id:, hint: nil, error: nil, **attributes, &block)
       lc_label!(label, :label)
       lc_label!(id, :id)
-      descriptions = [ ("#{id}-hint" if hint.present?), ("#{id}-error" if error.present?) ].compact
-      control = { id: id, aria: { describedby: descriptions.presence&.join(" "), invalid: (true if error.present?) } }
-      tag.div(**lc_attributes({ class: lc_field_class }, attributes)) do
+      errors = Array(error).compact_blank
+      descriptions = [ ("#{id}-hint" if hint.present?), ("#{id}-error" if errors.any?) ].compact
+      control = { id: id, aria: { describedby: descriptions.presence&.join(" "), invalid: (true if errors.any?) } }
+      tag.div(**lc_attributes({ class: lc_field_class, data: { slot: "field", invalid: (true if errors.any?) } }, attributes)) do
         safe_join([
-          tag.label(label, for: id, class: lc_field_label_class),
-          (capture(control, &block) if block),
-          (tag.p(hint, id: "#{id}-hint", class: "text-sm text-ink-3") if hint.present?),
-          (tag.p(error, id: "#{id}-error", class: "text-sm text-berry", role: "alert") if error.present?)
+          tag.label(label, for: id, class: lc_field_label_class, data: { slot: "field-label" }),
+          (capture(Parts::Field.new(self, id, control), &block) if block),
+          *lc_field_messages(id, hint, errors)
         ].compact)
       end
     end
 
-    def lc_form_actions(**attributes, &block)
-      tag.div(**lc_attributes({ class: lc_form_actions_class }, attributes), &block)
-    end
-
-    def lc_segmented(label:, name: nil, value: nil, **attributes, &block)
+    def lc_toggle_group(label:, name: nil, value: nil, **attributes, &block)
       lc_label!(label, :label)
-      defaults = { class: lc_segmented_class, role: "group", aria: { label: label }, data: { controller: "ui-selection", action: "click->ui-selection#select keydown->ui-selection#navigate", ui_selection_value_value: value } }
+      defaults = { class: lc_toggle_group_class, role: "group", aria: { label: label }, data: { slot: "toggle-group", controller: "lc-selection", action: "click->lc-selection#select keydown->lc-selection#navigate", lc_selection_value_value: value } }
       tag.div(**lc_attributes(lc_attributes(defaults, attributes), { role: "group", aria: { label: label } })) do
-        safe_join([ (hidden_field_tag(name, value, data: { ui_selection_target: "input" }) if name), (capture(&block) if block) ].compact)
+        safe_join([ (hidden_field_tag(name, value, data: { lc_selection_target: "input" }) if name), (capture(&block) if block) ].compact)
       end
     end
 
-    def lc_segmented_tab(label = nil, value: nil, selected: false, **attributes, &block)
+    def lc_toggle_group_item(label = nil, value: nil, selected: false, **attributes, &block)
       value ||= label
       lc_label!(value, :value)
-      defaults = { class: lc_segmented_tab_class, type: "button", aria: { pressed: selected }, data: { ui_selection_target: "option", value: value } }
-      required = { type: "button", data: { ui_selection_target: "option", value: value } }
+      defaults = { class: lc_toggle_group_item_class, type: "button", aria: { pressed: selected }, data: { slot: "toggle-group-item", lc_selection_target: "option", value: value } }
+      required = { type: "button", data: { lc_selection_target: "option", value: value } }
       tag.button(block ? capture(&block) : label, **lc_attributes(lc_attributes(defaults, attributes), required))
     end
 
-    def lc_pill(label = nil, active: false, ghost: false, size: :base, href: nil, **attributes, &block)
-      size = lc_option!(:size, size, %i[sm base lg])
-      content = block ? capture(&block) : label
-      defaults = { class: lc_pill_class(ghost: ghost, size: size) }
-      if href
-        raise ArgumentError, "Links cannot be disabled; use a pill button instead" if attributes[:disabled] || attributes["disabled"]
-
-        tag.a(content, **lc_attributes(defaults.merge(href: href, aria: { current: ("page" if active) }), attributes))
-      else
-        defaults.merge!(type: "button", aria: { pressed: active }, data: { controller: "ui-toggle", action: "click->ui-toggle#toggle" })
-        tag.button(content, **lc_attributes(defaults, attributes).merge(type: "button"))
-      end
+    def lc_toggle(label = nil, active: false, ghost: false, size: :md, **attributes, &block)
+      raise ArgumentError, "Use lc_button_link_to for navigation" if attributes.key?(:href) || attributes.key?("href")
+      defaults = { class: lc_toggle_class(ghost: ghost, size: size), type: "button", aria: { pressed: active }, data: { slot: "toggle", controller: "lc-toggle", action: "click->lc-toggle#toggle" } }
+      tag.button(block ? capture(&block) : label, **lc_attributes(defaults, attributes).merge(type: "button"))
     end
 
-    def lc_pill_row(**attributes, &block)
-      tag.div(**lc_attributes({ class: lc_pill_row_class }, attributes), &block)
-    end
-
-    def lc_dialog(id:, title:, trigger: "Open dialog", kind: :modal, **attributes, &block)
+    # 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)
       kind = lc_option!(:kind, kind, DialogHelper::DIALOGS.keys)
-      lc_render_dialog(id, title, trigger, { class: lc_dialog_class(kind), data: lc_sheet_data }, attributes, &block)
-    end
-
-    def lc_sheet(id:, title:, trigger: "Open sheet", detents: "fit", **attributes, &block)
       detents = detents.to_s
       raise ArgumentError, "detents must be one of #{SHEET_DETENTS.join(', ')}" unless SHEET_DETENTS.include?(detents)
-
-      defaults = { class: lc_dialog_class, data: lc_sheet_data({}, detents: detents) }
-      lc_render_dialog(id, title, trigger, defaults, attributes, &block)
+      defaults = { class: lc_dialog_class(kind), aria: { describedby: ("#{id}-description" if description.present?) }, data: lc_sheet_data({ slot: "dialog" }, detents: detents) }
+      lc_render_dialog(id, title, description, trigger, defaults, attributes, &block)
     end
 
-    def lc_menu(id:, label: "Actions", align: :end, **attributes, &block)
+    def lc_menu(id:, label: lc_t("lostcoords.ui.menu.label"), align: :end, **attributes, &block)
       align = lc_option!(:align, align, MenuHelper::MENU_POPOVER_ALIGN.keys)
-      lc_render_panel(id, label, nil, "row-menu", "menu", lc_menu_popover_class(align: align), attributes, &block)
+      lc_render_panel(id, label, nil, "lc-menu", "menu", lc_menu_popover_class(align: align), lc_attributes({ data: { slot: "menu" } }, attributes), &block)
     end
 
-    def lc_popover(id:, label: "Open popover", title: nil, align: :end, **attributes, &block)
+    def lc_popover(id:, label: lc_t("lostcoords.ui.popover.trigger"), title: nil, align: :end, trigger_variant: :secondary, **attributes, &block)
       title = title.presence
       align = lc_option!(:align, align, MenuHelper::MENU_POPOVER_ALIGN.keys)
-      classes = lc_popover_class(align: align, extra: "data-open:flex flex-col gap-4 p-5 z-nav-popover min-w-64 max-w-[calc(100vw-2rem)]")
-      lc_render_panel(id, label, title, "ui-popover", "dialog", classes, attributes, &block)
+      classes = lc_popover_class(align: align, extra: "data-open:flex flex-col gap-content p-inset z-(--lc-z-popover) min-w-64 max-w-[calc(100vw-2rem)]")
+      lc_render_panel(id, label, title, "lc-popover", "dialog", classes, lc_attributes({ data: { slot: "popover" } }, attributes), trigger_variant: trigger_variant, &block)
     end
 
     def lc_menu_option(label = nil, href: nil, tone: :default, **attributes, &block)
       tone = lc_option!(:tone, tone, MenuHelper::MENU_OPTION_TONES.keys)
       content = tag.span(block ? capture(&block) : label, class: "col-span-3")
-      defaults = { class: lc_menu_option_class(tone: tone), role: "menuitem", data: { action: "click->row-menu#close" } }
+      defaults = { class: lc_menu_option_class(tone: tone), role: "menuitem", data: { slot: "menu-item", action: "click->lc-menu#close" } }
       if href
         raise ArgumentError, "Links cannot be disabled; use a menu button instead" if attributes[:disabled] || attributes["disabled"]
 
@@ -110,20 +92,20 @@ module Lostcoords::Ui
       end
     end
 
-    def lc_toast(message = nil, tone: :notice, timeout: 4000, **attributes, &block)
-      tone = lc_option!(:tone, tone, FormHelper::FORM_ALERT_ICONS.keys)
+    def lc_toast(message = nil, tone: :success, timeout: 4000, **attributes, &block)
+      tone = lc_option!(:tone, tone, FeedbackHelper::ALERT_ICONS.keys)
       raise ArgumentError, "timeout must be a nonnegative integer" unless timeout.is_a?(Integer) && timeout >= 0
 
-      defaults = { class: lc_glass_class(shape: :hud, extra: "flex items-center gap-2 px-4 py-3 text-sm font-semibold transition-opacity data-leaving:opacity-0"), role: tone == :error ? "alert" : "status", data: { controller: "toast", action: "click->toast#dismiss", toast_timeout_value: timeout } }
+      defaults = { class: lc_glass_class(shape: :hud, extra: "flex items-center gap-related px-content py-heading text-label font-semibold transition-opacity data-leaving:opacity-0"), role: tone == :destructive ? "alert" : "status", data: { slot: "toast", tone: tone, controller: "lc-toast", action: "click->lc-toast#dismiss", lc_toast_timeout_value: timeout } }
       tag.div(**lc_attributes(defaults, attributes)) do
-        safe_join([ lc_form_alert_icon(tone: tone), tag.span(block ? capture(&block) : message) ])
+        safe_join([ lc_alert_icon(tone: tone), tag.span(block ? capture(&block) : message) ])
       end
     end
 
-    def lc_disclosure(title:, open: false, **attributes, &block)
+    def lc_collapsible(title:, open: false, **attributes, &block)
       lc_label!(title, :title)
-      defaults = { class: lc_card_class(extra: "disclosure-animated"), open: open, data: { controller: "disclosure", action: "click->disclosure#toggle" } }
-      render "lostcoords/ui/components/lc_disclosure", title: title, attributes: lc_attributes(defaults, attributes), content: (capture(&block) if block)
+      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
 
     def lc_emoji_picker(form:, field:, label:, catalog_url:, value: nil, quick: [], recent: [], recent_scope: nil, auto_submit: false, **attributes)
@@ -133,27 +115,36 @@ module Lostcoords::Ui
     end
 
     private
+      # The hint and error paragraphs under a field or choice group. With an id, controls can point
+      # aria-describedby at them.
+      def lc_field_messages(id, hint, errors)
+        [
+          (tag.p(hint, id: ("#{id}-hint" if id), class: "m-0 text-small text-muted-foreground", data: { slot: "field-description" }) if hint.present?),
+          (tag.p(safe_join(errors, tag.br), id: ("#{id}-error" if id), class: "m-0 text-small text-destructive", role: "alert", data: { slot: "field-error" }) if errors.any?)
+        ].compact
+      end
+
 
     def lc_label!(value, name)
       raise ArgumentError, "#{name} must not be blank" if value.blank?
     end
 
-    def lc_render_dialog(id, title, trigger, defaults, attributes, &block)
+    def lc_render_dialog(id, title, description, trigger, defaults, attributes, &block)
       lc_label!(id, :id)
       lc_label!(title, :title)
       lc_label!(trigger, :trigger)
-      required = { id: id, aria: { labelledby: "#{id}-title" }, data: (defaults[:data] || {}).merge(modal_target: "dialog") }
+      required = { id: id, aria: { labelledby: "#{id}-title" }, data: (defaults[:data] || {}).merge(lc_dialog_target: "dialog") }
       merged = lc_attributes(lc_attributes(defaults, attributes), required)
-      render "lostcoords/ui/components/lc_dialog", id: id, title: title, trigger: trigger, attributes: merged, content: (capture(&block) if block)
+      render "lostcoords/ui/components/lc_dialog", id: id, title: title, description: description, trigger: trigger, attributes: merged, content: (capture(Parts::Dialog.new(self, id), &block) if block)
     end
 
-    def lc_render_panel(id, label, title, controller, role, classes, attributes, &block)
+    def lc_render_panel(id, label, title, controller, role, classes, attributes, trigger_variant: :secondary, &block)
       lc_label!(id, :id)
       lc_label!(label, :label)
       required = { id: id, role: role, aria: { labelledby: "#{id}-#{title ? 'title' : 'trigger'}" }, data: { "#{controller}_target" => "popover" } }
       required[:tabindex] = -1 if role == "dialog"
       merged = lc_attributes(lc_attributes({ class: classes }, attributes), required)
-      render "lostcoords/ui/components/ui_floating_panel", id: id, label: label, title: title, controller: controller, role: role, attributes: merged, content: (capture(&block) if block)
+      render "lostcoords/ui/components/lc_floating_panel", id: id, label: label, title: title, controller: controller, role: role, trigger_variant: trigger_variant, attributes: merged, content: (capture(&block) if block)
     end
   end
 end

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

@@ -0,0 +1,11 @@
+module Lostcoords::Ui
+  module TableHelper
+    def lc_table_class(extra: nil)
+      lc_tw("lc-table w-full text-start text-sm", extra)
+    end
+
+    def lc_table(**attributes, &block)
+      tag.table(**lc_attributes({ class: lc_table_class }, attributes), &block)
+    end
+  end
+end

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

@@ -1,13 +1,22 @@
 module Lostcoords::Ui
   module TailwindHelper
+    # Buttons, inputs, selects, toggles and icon buttons share these heights.
     CONTROL_SIZES = {
-      sm: "min-h-11 py-2",
-      base: "min-h-12 py-2.5",
-      lg: "min-h-14 py-3.5"
+      sm: "h-control-sm",
+      md: "h-control-md",
+      lg: "h-control-lg"
+    }.freeze
+
+    # The theme's own scales, so class merging knows text-label is a size and gap-related a gap.
+    MERGE_THEME = {
+      "text" => %w[display title heading subheading body small label caption],
+      "spacing" => %w[tight related heading content inset section gutter control-sm control-md control-lg],
+      "container" => %w[page reading form],
+      "radius" => %w[pill]
     }.freeze
 
     def lc_tw(*classes)
-      @tailwind_merger ||= TailwindMerge::Merger.new
+      @tailwind_merger ||= TailwindMerge::Merger.new(config: { theme: MERGE_THEME })
       @tailwind_merger.merge(classes.flatten.compact.join(" "))
     end
   end

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

@@ -1,28 +1,28 @@
 module Lostcoords::Ui
   module TypographyHelper
-    HEADING_SIZES = { page: "ui-heading-page", section: "ui-heading-section", card: "ui-heading-card" }.freeze
-    TEXT_SIZES = { body: "ui-text-body", small: "ui-text-small", caption: "ui-text-caption" }.freeze
-    TEXT_TONES = { default: "text-ink", muted: "text-ink-2", subtle: "text-ink-3" }.freeze
+    HEADING_SIZES = { display: "text-display", title: "text-title", heading: "text-heading", subheading: "text-subheading" }.freeze
+    TEXT_SIZES = { body: "text-body", small: "text-small", label: "text-label", caption: "text-caption" }.freeze
+    TEXT_TONES = { default: "text-foreground", muted: "text-muted-foreground" }.freeze
 
-    def lc_heading_class(size: :section, extra: nil)
+    def lc_heading_class(size: :heading, trim: false, extra: nil)
       size = lc_option!(:size, size, HEADING_SIZES.keys)
-      lc_tw("ui-heading m-0 text-ink", HEADING_SIZES.fetch(size), extra)
+      lc_tw("lc-heading m-0 text-foreground", HEADING_SIZES.fetch(size), ("lc-trim" if trim), extra)
     end
 
-    def lc_text_class(size: :body, tone: :default, extra: nil)
+    def lc_text_class(size: :body, tone: :default, trim: false, extra: nil)
       size = lc_option!(:size, size, TEXT_SIZES.keys)
       tone = lc_option!(:tone, tone, TEXT_TONES.keys)
-      lc_tw("ui-text m-0", TEXT_SIZES.fetch(size), TEXT_TONES.fetch(tone), extra)
+      lc_tw("lc-text m-0", TEXT_SIZES.fetch(size), TEXT_TONES.fetch(tone), ("lc-trim" if trim), extra)
     end
 
-    def lc_heading(content = nil, level: 2, size: :section, **attributes, &block)
+    def lc_heading(content = nil, level: 2, size: :heading, trim: false, **attributes, &block)
       raise ArgumentError, "Invalid level: #{level.inspect}. Expected an integer from 1 to 6" unless (1..6).include?(level) && level.is_a?(Integer)
 
-      tag.public_send("h#{level}", content, **lc_attributes({ class: lc_heading_class(size: size) }, attributes), &block)
+      tag.public_send("h#{level}", content, **lc_attributes({ class: lc_heading_class(size: size, trim: trim) }, attributes), &block)
     end
 
-    def lc_text(content = nil, size: :body, tone: :default, **attributes, &block)
-      tag.p(content, **lc_attributes({ class: lc_text_class(size: size, tone: tone) }, attributes), &block)
+    def lc_text(content = nil, size: :body, tone: :default, trim: false, **attributes, &block)
+      tag.p(content, **lc_attributes({ class: lc_text_class(size: size, tone: tone, trim: trim) }, attributes), &block)
     end
   end
 end

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

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

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { prefersReducedMotion } from "helpers/viewport"
+import { prefersReducedMotion } from "lostcoords/ui/helpers/viewport"
 
 // Animates a <details> both ways and keeps what it reveals on screen. Only
 // user toggles go through here: programmatic opens (validation) already scroll
@@ -40,7 +40,7 @@ export default class extends Controller {
       from,
       this.element.offsetHeight,
       duration,
-      "--ease-out-expo",
+      "--lc-ease-out-expo",
     )
     animation.finished.then(
       () => animation.cancel(),
@@ -55,7 +55,7 @@ export default class extends Controller {
     this.element.toggleAttribute("data-closing", true)
     const duration = Math.max(...this.transitionDurations())
     if (!this.constructor.easesHeightInCss) {
-      this.animateHeight(this.element.offsetHeight, this.closedHeight(), duration, "--ease-out")
+      this.animateHeight(this.element.offsetHeight, this.closedHeight(), duration, "--lc-ease-out")
     }
     this.closeTimeout = setTimeout(() => {
       this.element.open = false

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

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

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

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