lostcoords-ui 0.4.1 → 0.6.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/render_attributes_helper.rb

@@ -1,7 +1,10 @@
 module Lostcoords::Ui
   module RenderAttributesHelper
     private
-      def lc_attributes(defaults, attributes)
+      # required: attributes the component needs to work, merged last so a caller can't override them.
+      def lc_attributes(defaults, attributes, required = nil)
+        return lc_attributes(lc_attributes(defaults, attributes), required) if required
+
         defaults = lc_normalize_attributes(defaults)
         attributes = lc_normalize_attributes(attributes)
         merged = defaults.merge(attributes)
@@ -36,6 +39,19 @@ module Lostcoords::Ui
         normalized
       end
 
+      def lc_label!(value, name)
+        raise ArgumentError, "#{name} must not be blank" if value.blank?
+      end
+
+      # 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_option!(name, value, allowed)
         normalized = value.to_sym if value.is_a?(String) || value.is_a?(Symbol)
         return normalized if allowed.include?(normalized)

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

@@ -1,54 +1,16 @@
 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".
+    SHEET_DETENTS = [ "fit", "medium large", "large" ].freeze
+
     def lc_sheet_data(data = {}, detents: "fit")
+      detents = lc_option!(:detents, detents, SHEET_DETENTS.map(&:to_sym)).to_s
+      data = data.to_h.symbolize_keys
       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

@@ -1,159 +1,60 @@
 module Lostcoords::Ui
   module StructuresHelper
     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 } }
-      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)
+      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(defaults, attributes, { role: "group", aria: { label: label } })) do
+        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 } }
-      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
-    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)
-      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)
-    end
-
-    def lc_menu(id:, label: "Actions", 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)
-    end
-
-    def lc_popover(id:, label: "Open popover", title: nil, align: :end, **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)
-    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" } }
-      if href
-        raise ArgumentError, "Links cannot be disabled; use a menu button instead" if attributes[:disabled] || attributes["disabled"]
-
-        tag.a(content, **lc_attributes(defaults.merge(href: href), attributes))
-      else
-        tag.button(content, **lc_attributes(defaults.merge(type: "button"), attributes))
-      end
-    end
-
-    def lc_toast(message = nil, tone: :notice, timeout: 4000, **attributes, &block)
-      tone = lc_option!(:tone, tone, FormHelper::FORM_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 } }
-      tag.div(**lc_attributes(defaults, attributes)) do
-        safe_join([ lc_form_alert_icon(tone: tone), tag.span(block ? capture(&block) : message) ])
-      end
-    end
-
-    def lc_disclosure(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_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(defaults, attributes, required))
     end
 
-    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
-
-    private
-
-    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)
-      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") }
-      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)
-    end
-
-    def lc_render_panel(id, label, title, controller, role, classes, attributes, &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)
+    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
   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/toast_helper.rb

@@ -0,0 +1,22 @@
+module Lostcoords::Ui
+  module ToastHelper
+    # Render toasts inside lc_toast_region, the live region that announces them. A destructive toast
+    # is also an alert, so it interrupts.
+    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-related px-content py-heading text-label font-semibold transition-opacity data-leaving:opacity-0"), role: ("alert" if tone == :destructive), 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_alert_icon(tone: tone), tag.span(block ? capture(&block) : message) ])
+      end
+    end
+
+    # Fixed corner that holds toasts. Render it once in the layout and append toasts to it, from flash
+    # or a Turbo Stream; it shows in the top layer, above dialogs and sticky chrome.
+    def lc_toast_region(**attributes, &block)
+      defaults = { class: "lc-toast-region", role: "status", aria: { live: "polite" }, data: { slot: "toast-region", controller: "lc-toast-region" } }
+      tag.div(**lc_attributes(defaults, attributes)) { capture(&block) if block }
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+module Lostcoords::Ui
+  module TooltipHelper
+    TOOLTIP_SIDES = %i[top bottom].freeze
+
+    # Yields attributes for the trigger; splat them with `**tip` so the trigger is described by the tooltip.
+    # The tooltip shows on hover and keyboard focus, and Escape hides it. It is a hint: keep essential information visible.
+    def lc_tooltip(text, id:, side: :top, **attributes, &block)
+      lc_label!(text, :text)
+      lc_label!(id, :id)
+      side = lc_option!(:side, side, TOOLTIP_SIDES)
+      trigger = capture({ aria: { describedby: id } }, &block) if block
+      tag.span(**lc_attributes({ class: "lc-tooltip relative inline-flex", data: { slot: "tooltip", side: side, controller: "lc-tooltip", action: "mouseenter->lc-tooltip#show focusin->lc-tooltip#show mouseleave->lc-tooltip#hide focusout->lc-tooltip#hide" } }, attributes)) do
+        safe_join([ trigger, tag.span(text, id: id, role: "tooltip", class: "lc-tooltip__content", data: { slot: "tooltip-content", lc_tooltip_target: "content" }) ].compact)
+      end
+    end
+  end
+end

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

@@ -1,28 +1,58 @@
 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
+    KBD_BASE = "lc-kbd inline-flex items-center rounded-md bg-tile px-1.5 font-sans text-caption leading-5 whitespace-nowrap text-muted-foreground"
+    KBD_NAMES = { "mod" => "Ctrl", "ctrl" => "Ctrl", "alt" => "Alt", "shift" => "Shift", "meta" => "Meta", "escape" => "Esc", "enter" => "↵",
+                  "arrowup" => "↑", "arrowdown" => "↓", "arrowleft" => "←", "arrowright" => "→" }.freeze
+    KBD_MODIFIERS = %w[mod ctrl alt shift meta].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_kbd_class(extra: nil)
+      lc_tw(KBD_BASE, extra)
+    end
+
+    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, trim: false, **attributes, &block)
+      tag.p(content, **lc_attributes({ class: lc_text_class(size: size, tone: tone, trim: trim) }, attributes), &block)
+    end
+
+    # A key hint, such as lc_kbd("mod+k"). "mod" renders Ctrl and reads ⌘ on Apple platforms once JS runs.
+    def lc_kbd(keys, **attributes)
+      lc_label!(keys, :keys)
+      text = keys.split.map do |combo|
+        *modifiers, key = combo.downcase.split(/\+(?!\z)/)
+        names = modifiers.map { |modifier| KBD_MODIFIERS.include?(modifier) ? KBD_NAMES.fetch(modifier) : raise(ArgumentError, "Unknown modifier #{modifier.inspect} in #{keys.inspect}. Expected one of: #{KBD_MODIFIERS.join(', ')}") }
+        # A symbol such as ? already implies Shift; a letter or digit keeps it.
+        names.delete("Shift") if key.match?(/\A[^[:alnum:]]\z/)
+        [ *names, KBD_NAMES.fetch(key) { key.length == 1 ? key.upcase : key.capitalize } ].join(" ")
+      end.join(" / ")
+      tag.kbd(text, **lc_attributes({ class: lc_kbd_class, data: { controller: "lc-kbd", lc_kbd_keys_value: keys } }, attributes))
     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)
+    # Data for the element a page-wide shortcut focuses (fields) or clicks (anything else):
+    # lc_button "Search", data: lc_shortcut_data("mod+k"). Shortcuts without mod, ctrl or alt
+    # don't fire while typing in a field; inside an open modal, only its own shortcuts do.
+    def lc_shortcut_data(keys, data = {})
+      lc_label!(keys, :keys)
+      data = data.to_h.symbolize_keys
+      data.merge(controller: [ data[:controller], "lc-shortcut" ].compact.join(" "), lc_shortcut_keys_value: keys)
     end
   end
 end