{
  "library": "lostcoords-ui",
  "adapter": "Rails",
  "components": [
    {
      "name": "lc_checkbox",
      "signature": "lc_checkbox(label, name: nil, value: \"1\", checked: false, unchecked_value: \"0\", hint: nil, card: false, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/checkbox.html#lc_checkbox",
      "examples": [
        {
          "title": "Checkboxes",
          "url": "https://ui.lostcoords.com/components/checkbox.html",
          "erb": "<%= lc_stack gap: :related do %>\n  <%= lc_checkbox \"Email me about comments\", name: \"notify[comments]\", checked: true %>\n  <%= lc_checkbox \"Weekly digest\", name: \"notify[digest]\", hint: \"A summary every Monday.\" %>\n  <%= lc_checkbox \"Product news\", name: \"notify[news]\", disabled: true %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_radio",
      "signature": "lc_radio(label, name:, value:, checked: false, hint: nil, card: false, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/radio.html#lc_radio",
      "examples": [
        {
          "title": "Radio group",
          "url": "https://ui.lostcoords.com/components/radio.html",
          "erb": "<%= lc_choice_group legend: \"Plan\", hint: \"You can change plans at any time.\" do %>\n  <%= lc_radio \"Free\", name: \"plan\", value: \"free\", checked: true %>\n  <%= lc_radio \"Team\", name: \"plan\", value: \"team\", hint: \"Shared projects and roles.\" %>\n  <%= lc_radio \"Enterprise\", name: \"plan\", value: \"enterprise\" %>\n<% end %>"
        },
        {
          "title": "Cards",
          "url": "https://ui.lostcoords.com/components/radio.html",
          "erb": "<%= lc_choice_group legend: \"Plan\", class: \"w-full max-w-md\" do %>\n  <%= lc_radio \"Free\", name: \"my-component-plan\", value: \"free\", hint: \"Up to 3 projects.\", card: true %>\n  <%= lc_radio \"Team\", name: \"my-component-plan\", value: \"team\", hint: \"Shared projects and roles.\", card: true, checked: true do %>\n    <%= lc_text \"$12 per member, per month\", size: :caption, tone: :muted %>\n  <% end %>\n  <%= lc_radio \"Enterprise\", name: \"my-component-plan\", value: \"enterprise\", hint: \"SSO and audit logs.\", card: true %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_switch",
      "signature": "lc_switch(label, name: nil, value: \"1\", checked: false, unchecked_value: \"0\", hint: nil, **attributes)",
      "url": "https://ui.lostcoords.com/components/switch.html#lc_switch",
      "examples": [
        {
          "title": "Switches",
          "url": "https://ui.lostcoords.com/components/switch.html",
          "erb": "<%= lc_stack gap: :related do %>\n  <%= lc_switch \"Public project\", name: \"project[public]\", checked: true %>\n  <%= lc_switch \"Allow comments\", name: \"project[comments]\", hint: \"Members can comment on pages.\" %>\n<% end %>"
        },
        {
          "title": "Tabs",
          "url": "https://ui.lostcoords.com/components/tabs.html",
          "erb": "<%= lc_tabs id: \"my-component-tabs\", label: \"Project\", class: \"w-full\" do |tabs| %>\n  <% tabs.panel \"Overview\" do %>\n    <%= lc_text \"Pages, members and recent changes.\" %>\n  <% end %>\n  <% tabs.panel \"Activity\" do %>\n    <%= lc_text \"Nothing new this week.\", tone: :muted %>\n  <% end %>\n  <% tabs.panel \"Settings\" do %>\n    <%= lc_switch \"Public project\", name: \"project[public]\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Vertical, with manual activation",
          "url": "https://ui.lostcoords.com/components/tabs.html",
          "erb": "<%= lc_tabs id: \"my-component-settings\", label: \"Settings\", orientation: :vertical, activation: :manual, class: \"w-full\" do |tabs| %>\n  <% tabs.panel \"Profile\" do %>\n    <%= lc_text \"Name, photo and contact details.\" %>\n  <% end %>\n  <% tabs.panel \"Notifications\" do %>\n    <%= lc_switch \"Email me about mentions\", name: \"settings[mentions]\" %>\n  <% end %>\n  <% tabs.panel \"Billing\" do %>\n    <%= lc_text \"Plan, invoices and payment method.\", tone: :muted %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_choice_group",
      "signature": "lc_choice_group(legend:, **options, &block)",
      "url": "https://ui.lostcoords.com/components/radio.html#lc_choice_group",
      "examples": [
        {
          "title": "Radio group",
          "url": "https://ui.lostcoords.com/components/radio.html",
          "erb": "<%= lc_choice_group legend: \"Plan\", hint: \"You can change plans at any time.\" do %>\n  <%= lc_radio \"Free\", name: \"plan\", value: \"free\", checked: true %>\n  <%= lc_radio \"Team\", name: \"plan\", value: \"team\", hint: \"Shared projects and roles.\" %>\n  <%= lc_radio \"Enterprise\", name: \"plan\", value: \"enterprise\" %>\n<% end %>"
        },
        {
          "title": "Cards",
          "url": "https://ui.lostcoords.com/components/radio.html",
          "erb": "<%= lc_choice_group legend: \"Plan\", class: \"w-full max-w-md\" do %>\n  <%= lc_radio \"Free\", name: \"my-component-plan\", value: \"free\", hint: \"Up to 3 projects.\", card: true %>\n  <%= lc_radio \"Team\", name: \"my-component-plan\", value: \"team\", hint: \"Shared projects and roles.\", card: true, checked: true do %>\n    <%= lc_text \"$12 per member, per month\", size: :caption, tone: :muted %>\n  <% end %>\n  <%= lc_radio \"Enterprise\", name: \"my-component-plan\", value: \"enterprise\", hint: \"SSO and audit logs.\", card: true %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_code_block",
      "signature": "lc_code_block(source, id:, language: nil, title: nil, label: nil, max_lines: 10, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/code_block.html#lc_code_block",
      "examples": [
        {
          "title": "Plain source",
          "url": "https://ui.lostcoords.com/components/code_block.html",
          "erb": "<%= lc_code_block \"def hello(name)\\n  puts name\\nend\", id: \"my-component-ruby\", language: :ruby, label: \"Ruby greeting\", class: \"w-full\" %>"
        },
        {
          "title": "With a filename",
          "url": "https://ui.lostcoords.com/components/code_block.html",
          "erb": "<%= lc_code_block \"def hello(name)\\n  puts name\\nend\", id: \"my-component-file\", language: :ruby, title: \"app/helpers/greeting_helper.rb\", label: \"Greeting helper\", class: \"w-full\" %>"
        },
        {
          "title": "Collapsible source",
          "url": "https://ui.lostcoords.com/components/code_block.html",
          "erb": "<%= lc_code_block (1..15).map { |number| \"puts #{number}\" }.join(\"\\n\"), id: \"my-component-long\", language: :ruby, label: \"Long Ruby snippet\", max_lines: 5, class: \"w-full\" %>"
        }
      ]
    },
    {
      "name": "lc_collapsible",
      "signature": "lc_collapsible(title: nil, open: false, card: true, summary_class: nil, indicator: :marker, button: nil, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/collapsible.html#lc_collapsible",
      "examples": [
        {
          "title": "Expandable content",
          "url": "https://ui.lostcoords.com/components/collapsible.html",
          "erb": "<%= lc_collapsible class: \"w-full\", title: \"Can I use my own colors?\" do %>\n  <p class=\"text-sm text-muted-foreground\">Yes. Override the default theme values in your application stylesheet.</p>\n<% end %>"
        },
        {
          "title": "Row summary with a chevron",
          "url": "https://ui.lostcoords.com/components/collapsible.html",
          "erb": "<%= lc_collapsible card: false, indicator: :chevron, class: \"w-full max-w-80\", summary_class: \"rounded-2xl px-3 font-medium hover:bg-accent\" do |collapsible| %>\n  <% collapsible.summary do %>\n    <span class=\"me-auto\">Language</span>\n    <span class=\"font-normal text-muted-foreground\">English</span>\n  <% end %>\n  <%= lc_toggle_group label: \"Language\", value: \"en\" do %>\n    <%= lc_toggle_group_item \"English\", value: \"en\", selected: true %>\n    <%= lc_toggle_group_item \"日本語\", value: \"ja\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Button summary",
          "url": "https://ui.lostcoords.com/components/collapsible.html",
          "erb": "<%= lc_collapsible card: false, button: { variant: :secondary, size: :sm }, summary_class: \"w-fit\", class: \"w-full max-w-80\" do |collapsible| %>\n  <% collapsible.summary do %>\n    <%= lc_icon \"user-plus\", options: { \"aria-hidden\": true } %>\n    <span>Invite people</span>\n  <% end %>\n  <%= lc_field label: \"Email\", id: \"my-component-email\" do |field| %>\n    <%= lc_input name: \"email\", type: :email, **field %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_copy_button",
      "signature": "lc_copy_button(label = nil, value: nil, source: nil, copied_label: nil, error_label: nil, reset_after: 2000, icon_only: false, variant: :secondary, size: :md, **attributes)",
      "url": "https://ui.lostcoords.com/components/copy_button.html#lc_copy_button",
      "examples": [
        {
          "title": "Motion feedback",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_copy_button \"Copy link\", value: \"https://ui.lostcoords.com\", copied_label: \"Link copied\", reset_after: 2500 %>\n<%= lc_copy_button \"Copy link\", value: \"https://ui.lostcoords.com\", icon_only: true, variant: :ghost %>"
        },
        {
          "title": "Labels, icons and disabled controls",
          "url": "https://ui.lostcoords.com/components/copy_button.html",
          "erb": "<%= lc_copy_button value: \"https://ui.lostcoords.com\", variant: :primary %>\n<%= lc_copy_button \"Copy link\", value: \"https://ui.lostcoords.com\", copied_label: \"Link copied\" %>\n<%= lc_copy_button \"Copy link\", value: \"https://ui.lostcoords.com\", icon_only: true, variant: :ghost %>\n<%= lc_copy_button value: \"Unavailable\", disabled: true %>"
        },
        {
          "title": "Copy from an element",
          "url": "https://ui.lostcoords.com/components/copy_button.html",
          "erb": "<%= lc_stack gap: :related, class: \"w-full max-w-md\" do %>\n  <%= lc_field label: \"Share link\", id: \"my-component-link\" do |field| %>\n    <%= lc_input value: \"https://ui.lostcoords.com\", **field %>\n  <% end %>\n  <%= lc_copy_button \"Copy current link\", source: \"my-component-link\", copied_label: \"Link copied\", class: \"w-full\" %>\n  <%= lc_text \"Edit the link, then copy it. The button reads the current value each time.\", size: :small, tone: :muted %>\n<% end %>"
        },
        {
          "title": "Translated labels",
          "url": "https://ui.lostcoords.com/components/copy_button.html",
          "erb": "<% I18n.with_locale(:ja) do %>\n  <%= lc_copy_button value: \"https://ui.lostcoords.com\", lang: \"ja\" %>\n<% end %>\n<% I18n.with_locale(:es) do %>\n  <%= lc_copy_button value: \"https://ui.lostcoords.com\", lang: \"es\" %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_description_list",
      "signature": "lc_description_list(**attributes, &block)",
      "url": "https://ui.lostcoords.com/components/description_list.html#lc_description_list",
      "parts": [
        "list.item(term, detail = nil, **attributes, &block)"
      ],
      "examples": [
        {
          "title": "Details",
          "url": "https://ui.lostcoords.com/components/description_list.html",
          "erb": "<%= lc_card class: \"w-full\" do |card| %>\n  <%= card.header title: \"Workspace\" %>\n  <%= lc_description_list do |list| %>\n    <%= list.item \"Owner\", \"Ada Baker\" %>\n    <%= list.item \"Plan\" do %>\n      <%= lc_badge \"Team\", tone: :primary %>\n    <% end %>\n    <%= list.item \"Created\", \"March 4, 2026\" %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_dialog",
      "signature": "lc_dialog(id:, title:, description: nil, trigger: lc_t(\"lostcoords.ui.dialog.trigger\"), kind: :modal, size: nil, detents: \"fit\",\n      close_action: \"lc-dialog#close\", close_label: nil, title_attributes: {}, description_attributes: {}, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/dialog.html#lc_dialog",
      "parts": [
        "dialog.actions(&block)",
        "dialog.footer(**attributes, &block)",
        "dialog.close(label = nil, variant: :secondary, **attributes)"
      ],
      "examples": [
        {
          "title": "Modal",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<%= lc_dialog id: \"my-component-dialog\", title: \"Create project\", description: \"Projects group pages and members.\", trigger: \"New project\" do |dialog| %>\n  <form method=\"dialog\" class=\"flex flex-col gap-inset\">\n    <%= lc_field label: \"Project name\", id: \"my-component-dialog-name\" do |field| %>\n      <%= lc_input name: \"project[name]\", **field %>\n    <% end %>\n    <%= dialog.footer do %>\n      <%= dialog.close %>\n      <%= lc_button \"Create project\", type: :submit %>\n    <% end %>\n  </form>\n<% end %>"
        },
        {
          "title": "Mobile dialog",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<%= lc_dialog id: \"my-component-sheet\", title: \"Workspace details\", trigger: \"Open mobile dialog\", detents: \"fit\" do %>\n  <p class=\"text-sm text-muted-foreground\">Drag the handle down to dismiss.</p>\n  <%= lc_field label: \"Workspace\", id: \"my-component-workspace\" do |field| %>\n    <%= lc_input value: \"Design studio\", **field %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Mobile height options",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<%= lc_dialog id: \"my-component-sheet\", title: \"Notes\", detents: \"medium large\" do %>\n  <%= lc_textarea name: \"notes\", rows: 16, aria: { label: \"Notes\" }, placeholder: \"Write something…\" %>\n<% end %>"
        },
        {
          "title": "Compact dialog",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<%= lc_dialog id: \"my-component-context\", title: \"Quick details\", trigger: \"Open compact dialog\", kind: :context do %>\n  <p class=\"text-sm text-muted-foreground\">A compact dialog for a short, focused task.</p>\n<% end %>\n\n<%= lc_dialog id: \"my-component-invite\", title: \"Invite people\", kind: :context do |dialog| %>\n  <% dialog.trigger { |attrs| lc_button \"Invite with your own trigger\", variant: :ghost, **attrs } %>\n  <div class=\"flex flex-col gap-content\" data-dialog-size=\"md\">\n    <p class=\"text-sm text-muted-foreground\">This step marks itself data-dialog-size=\"md\", so the compact dialog widens to 32rem while it shows.</p>\n  </div>\n<% end %>"
        },
        {
          "title": "Opened by your controller",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<div data-controller=\"lc-dialog\">\n  <%= lc_button \"Show members\", variant: :secondary, aria: { haspopup: \"dialog\", controls: \"my-component-members\" }, data: { action: \"lc-dialog#open\" } %>\n  <%= lc_dialog id: \"my-component-members\", title: \"Members\", trigger: false, size: :lg, detents: \"large\", data: { lc_dialog_target: \"dialog\" } do |dialog| %>\n    <%= dialog.actions do %>\n      <%= lc_button \"Invite\", size: :sm %>\n    <% end %>\n    <% %w[Aiko Ben Chiara Dmitri Emi Farah Goro Hana].each do |name| %>\n      <p class=\"<%= lc_text_class %>\"><%= name %></p>\n    <% end %>\n  <% end %>\n</div>"
        }
      ]
    },
    {
      "name": "lc_confirm_sheet",
      "signature": "lc_confirm_sheet(**attributes)",
      "url": "https://ui.lostcoords.com/components/dialog.html#lc_confirm_sheet",
      "examples": [
        {
          "title": "Turbo confirm",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<%# In the layout, once. %>\n<%= lc_confirm_sheet %>\n\n<%= lc_button_to \"Delete project\", \"/projects/42\", method: :delete, variant: :destructive, form: { data: { turbo_confirm: \"Delete this project?\", turbo_confirm_description: \"Its pages and files are deleted for everyone.\", controller: \"confirm-demo\", action: \"confirm-demo#submit\" } } %>\n<%= lc_button_to \"Archive\", \"/projects/42/archival\", form: { data: { turbo_confirm: \"Archive this project?\", turbo_confirm_accept: \"Archive project\", controller: \"confirm-demo\", action: \"confirm-demo#submit\" } } %>\n<%= lc_menu id: \"my-component-menu\", label: \"Membership\" do %>\n  <%= lc_menu_option \"Leave project\", href: \"/projects/42/membership\", method: :delete, tone: :destructive, form: { data: { turbo_confirm: \"Leave this project?\", turbo_confirm_accept: \"Leave\", controller: \"confirm-demo\", action: \"confirm-demo#submit\" } } %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_emoji_picker",
      "signature": "lc_emoji_picker(form:, field:, label:, catalog_url:, value: nil, quick: [], recent: [], recent_scope: nil, auto_submit: false, **attributes)",
      "url": "https://ui.lostcoords.com/components/emoji.html#lc_emoji_picker",
      "examples": [
        {
          "title": "Emoji picker",
          "url": "https://ui.lostcoords.com/components/emoji.html",
          "erb": "<%= fields_for :project do |form| %>\n  <%= lc_emoji_picker form: form, field: :emoji, value: \"✨\", quick: %w[🥝 🍣 🍜 ☕], label: \"Choose an emoji\", catalog_url: \"/emoji-catalog.html\" %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_form_with",
      "signature": "lc_form_with(card: false, padding: :md, gap: nil, **options, &block)",
      "url": "https://ui.lostcoords.com/components/field.html#lc_form_with",
      "examples": [
        {
          "title": "Form builder",
          "url": "https://ui.lostcoords.com/components/field.html",
          "erb": "<%= lc_form_with model: DocsProject.invalid_example, url: \"#\", card: true, class: \"w-full max-w-sm\" do |form| %>\n  <%= form.field :name, hint: \"Shown to members.\" %>\n  <%= form.field :email, as: :email_field, size: :sm, label: \"Email (compact)\" %>\n  <%= form.switch :public, hint: \"Anyone with the link can view.\" %>\n  <%= form.submit \"Save project\" %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_glass",
      "signature": "lc_glass(shape: :bar, thick: false, as: :div, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/glass.html#lc_glass",
      "examples": [
        {
          "title": "Search bar",
          "url": "https://ui.lostcoords.com/components/glass.html",
          "erb": "<div class=\"relative isolate grid h-64 w-full place-items-center overflow-hidden rounded-3xl bg-linear-to-br from-success/40 via-warning/40 to-primary/30 p-6\">\n  <%= lc_glass as: :label, class: \"flex w-full max-w-sm items-center gap-related min-h-control-lg px-content\" do %>\n    <%= lc_icon \"magnifying-glass\", options: { class: \"size-5 text-muted-foreground\", \"aria-hidden\": true } %>\n    <input type=\"search\" class=\"min-w-0 flex-1 bg-transparent outline-none\" placeholder=\"Search expenses\" aria-label=\"Search expenses\">\n  <% end %>\n</div>"
        }
      ]
    },
    {
      "name": "lc_icon",
      "signature": "lc_icon(name, variant: :outline, options: {}, path_options: {})",
      "url": "https://ui.lostcoords.com/components/button.html#lc_icon",
      "examples": [
        {
          "title": "Custom icons and content",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_button variant: :secondary do %>\n  <%= lc_icon \"arrow-down-tray\", options: {\n    \"aria-hidden\": true,\n    \"data-icon\": \"inline-start\"\n  } %>\n  Download report\n<% end %>\n\n<%= lc_button disabled: true, aria: { busy: true } do %>\n  <%= lc_spinner size: :sm, label: nil,\n      data: { icon: \"inline-start\" } %>\n  Loading report…\n<% end %>"
        },
        {
          "title": "Button summary",
          "url": "https://ui.lostcoords.com/components/collapsible.html",
          "erb": "<%= lc_collapsible card: false, button: { variant: :secondary, size: :sm }, summary_class: \"w-fit\", class: \"w-full max-w-80\" do |collapsible| %>\n  <% collapsible.summary do %>\n    <%= lc_icon \"user-plus\", options: { \"aria-hidden\": true } %>\n    <span>Invite people</span>\n  <% end %>\n  <%= lc_field label: \"Email\", id: \"my-component-email\" do |field| %>\n    <%= lc_input name: \"email\", type: :email, **field %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Search bar",
          "url": "https://ui.lostcoords.com/components/glass.html",
          "erb": "<div class=\"relative isolate grid h-64 w-full place-items-center overflow-hidden rounded-3xl bg-linear-to-br from-success/40 via-warning/40 to-primary/30 p-6\">\n  <%= lc_glass as: :label, class: \"flex w-full max-w-sm items-center gap-related min-h-control-lg px-content\" do %>\n    <%= lc_icon \"magnifying-glass\", options: { class: \"size-5 text-muted-foreground\", \"aria-hidden\": true } %>\n    <input type=\"search\" class=\"min-w-0 flex-1 bg-transparent outline-none\" placeholder=\"Search expenses\" aria-label=\"Search expenses\">\n  <% end %>\n</div>"
        },
        {
          "title": "Settings",
          "url": "https://ui.lostcoords.com/components/list_group.html",
          "erb": "<%= lc_list_section \"Sign-in methods\", id: \"my-component\", footnote: \"Keep at least one way to sign in.\", class: \"w-full max-w-md\" do %>\n  <%= lc_list_group do %>\n    <%= lc_list_row \"Email\", subtitle: \"ada@example.com\", icon: \"envelope\" do %>\n      <%= lc_button \"Change\", variant: :secondary, size: :sm %>\n    <% end %>\n    <%= lc_list_row \"Passkey\", subtitle: \"Not set up\", icon: \"key\" do %>\n      <%= lc_button \"Add\", variant: :secondary, size: :sm %>\n    <% end %>\n    <%= lc_list_row \"Sign-in alerts\", subtitle: \"Email me when a new device signs in\", icon: \"bell\", tag: :label, class: \"cursor-pointer\" do %>\n      <input type=\"checkbox\" role=\"switch\" name=\"alerts\" class=\"<%= lc_switch_class %>\" checked>\n    <% end %>\n    <%= lc_list_row \"Recovery codes\", icon: \"document-text\", href: \"#recovery-codes\" do %>\n      <%= lc_icon \"chevron-right\", variant: :mini, options: { class: \"size-5 text-muted-foreground rtl:rotate-180\", \"aria-hidden\": true } %>\n    <% end %>\n    <%= lc_list_row padded: false do %>\n      <%= lc_list_item \"Delete account\", icon: \"trash\", tag: :button, type: \"button\", class: \"w-full cursor-pointer rounded-[inherit] text-destructive transition-colors hover:bg-accent\" %>\n    <% end %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_stack",
      "signature": "lc_stack(gap: :content, as: :div, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/foundations.html#lc_stack",
      "examples": [
        {
          "title": "Text styles",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<div class=\"grid gap-5\">\n  <%= lc_heading \"Weekend in Kyoto\", level: 2, size: :title %>\n  <%= lc_heading \"Shared expenses\", level: 3, size: :heading %>\n  <%= lc_heading \"Dinner with friends\", level: 4, size: :subheading %>\n  <%= lc_text do %>Use <code>lc_stack</code> to keep related content together.<% end %>\n  <%= lc_text \"Add a receipt or a short note for your group.\", size: :small, tone: :muted %>\n  <%= lc_text \"Updated a few minutes ago\", size: :caption, tone: :muted %>\n</div>"
        },
        {
          "title": "Page rhythm",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_stack gap: :section, class: \"w-full max-w-xl\" do %>\n  <%= lc_section title: \"Recent expenses\", actions: capture { lc_button(\"Add expense\", icon: \"plus\", size: :sm) } do %>\n    <%= lc_card do %>\n      <%= lc_inline class: \"flex-nowrap justify-between\" do %>\n        <%= lc_text \"Dinner with friends\" %>\n        <%= lc_text \"¥8,400\", class: \"shrink-0 tabular-nums\" %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_text \"Train tickets\" %>\n    <% end %>\n  <% end %>\n  <%= lc_stack as: :section, gap: :heading do %>\n    <%= lc_section_header do %>\n      <%= lc_stack gap: :tight do %>\n        <%= lc_heading \"Members\" %>\n        <%= lc_text \"Everyone who can see this workspace.\", size: :small, tone: :muted %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_inline do %>\n        <%= lc_avatar \"AK\", class: \"bg-primary\" %>\n        <%= lc_stack gap: :tight do %>\n          <%= lc_text \"Alex Kim\" %>\n          <%= lc_text \"Joined today\", size: :small, tone: :muted %>\n        <% end %>\n      <% end %>\n    <% end %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Responsive containers",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_container do %>\n  <%= lc_stack gap: :section do %>\n    <%= lc_heading \"Plan your next trip\", level: 2, size: :title %>\n    <div class=\"grid min-w-0 gap-8 md:grid-cols-2\">\n      <%= lc_section title: \"Travel details\", level: 3 do %>\n        <%= lc_card do %>\n          <%= lc_stack do %>\n            <%= lc_text \"Kyoto weekend\", size: :body %>\n            <%= lc_text \"Keep shared costs and travel notes together.\", size: :small, tone: :muted %>\n            <%= lc_inline do %>\n              <%= lc_button \"Invite friends\", size: :sm %>\n              <%= lc_button \"View itinerary\", variant: :ghost, size: :sm %>\n            <% end %>\n          <% end %>\n        <% end %>\n      <% end %>\n      <%= lc_section title: \"Shared costs\", level: 3 do %>\n        <%= lc_card do %>\n          <%= lc_text \"No expenses yet\", size: :body %>\n        <% end %>\n      <% end %>\n    </div>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Checkboxes",
          "url": "https://ui.lostcoords.com/components/checkbox.html",
          "erb": "<%= lc_stack gap: :related do %>\n  <%= lc_checkbox \"Email me about comments\", name: \"notify[comments]\", checked: true %>\n  <%= lc_checkbox \"Weekly digest\", name: \"notify[digest]\", hint: \"A summary every Monday.\" %>\n  <%= lc_checkbox \"Product news\", name: \"notify[news]\", disabled: true %>\n<% end %>"
        },
        {
          "title": "Copy from an element",
          "url": "https://ui.lostcoords.com/components/copy_button.html",
          "erb": "<%= lc_stack gap: :related, class: \"w-full max-w-md\" do %>\n  <%= lc_field label: \"Share link\", id: \"my-component-link\" do |field| %>\n    <%= lc_input value: \"https://ui.lostcoords.com\", **field %>\n  <% end %>\n  <%= lc_copy_button \"Copy current link\", source: \"my-component-link\", copied_label: \"Link copied\", class: \"w-full\" %>\n  <%= lc_text \"Edit the link, then copy it. The button reads the current value each time.\", size: :small, tone: :muted %>\n<% end %>"
        },
        {
          "title": "Empty state",
          "url": "https://ui.lostcoords.com/components/empty_state.html",
          "erb": "<%= lc_empty_state class: \"w-full\" do %>\n  <%= lc_icon_badge shape: :circle, tone: :primary, icon: \"folder-plus\", size: :lg%>\n  <%= lc_stack gap: :tight, class: \"max-w-xs\" do %>\n    <%= lc_heading \"No projects yet\", level: 3, size: :subheading %>\n    <%= lc_text \"Create a project to get started.\", size: :small, tone: :muted %>\n  <% end %>\n  <%= lc_button \"Create project\" %>\n<% end %>"
        },
        {
          "title": "Grouped controls",
          "url": "https://ui.lostcoords.com/components/field.html",
          "erb": "<%= lc_stack class: \"w-full max-w-sm\" do %>\n  <%= lc_fieldset legend: \"Split\", id: \"my-component-split\", hint: \"Everyone pays the same share unless you change it.\" do %>\n    <%= lc_inline do %>\n      <%= lc_toggle \"Equally\", active: true %>\n      <%= lc_toggle \"By amount\" %>\n      <%= lc_toggle \"By share\" %>\n    <% end %>\n  <% end %>\n  <%= lc_stack gap: :related do %>\n    <%= lc_text \"This app can\", size: :label, tone: :muted %>\n    <ul class=\"m-0 ps-5 list-disc text-muted-foreground\">\n      <li>Read your groups</li>\n      <li>Add expenses</li>\n    </ul>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Focus a field",
          "url": "https://ui.lostcoords.com/components/kbd.html",
          "erb": "<%= lc_stack gap: :related, class: \"w-full max-w-sm\" do %>\n  <%= lc_field label: \"Filter projects\", id: \"my-component-filter\" do |field| %>\n    <%= lc_input name: \"q\", type: :search, placeholder: \"Press / to filter\", data: lc_shortcut_data(\"/\"), **field %>\n  <% end %>\n  <%= lc_text size: :small, tone: :muted do %>\n    Press <%= lc_kbd \"/\" %> to filter, then <%= lc_kbd \"escape\" %> to clear.\n  <% end %>\n<% end %>"
        },
        {
          "title": "Tones",
          "url": "https://ui.lostcoords.com/components/link.html",
          "erb": "<%= lc_stack gap: :related do %>\n  <%= lc_text do %>Read the <%= lc_link \"installation guide\", \"/installation.html\" %> before you start.<% end %>\n  <%= lc_text size: :small, tone: :muted do %>Questions? <%= lc_link \"Contact support\", \"/components/link.html\", tone: :muted %>.<% end %>\n  <%= lc_text do %>See <%= lc_link \"what's new\", \"/components/link.html\", tone: :primary %> in this release.<% end %>\n<% end %>"
        },
        {
          "title": "Skip link",
          "url": "https://ui.lostcoords.com/components/skip_link.html",
          "erb": "<%= lc_stack gap: :related, class: \"items-center\" do %>\n  <%= lc_text \"Press Tab on this page: the skip link is the first thing to receive focus.\", size: :small, tone: :muted %>\n  <%= lc_skip_link \"#examples\", class: \"not-sr-only static\" %>\n<% end %>"
        },
        {
          "title": "Switches",
          "url": "https://ui.lostcoords.com/components/switch.html",
          "erb": "<%= lc_stack gap: :related do %>\n  <%= lc_switch \"Public project\", name: \"project[public]\", checked: true %>\n  <%= lc_switch \"Allow comments\", name: \"project[comments]\", hint: \"Members can comment on pages.\" %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_inline",
      "signature": "lc_inline(gap: :related, as: :div, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/foundations.html#lc_inline",
      "examples": [
        {
          "title": "Page rhythm",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_stack gap: :section, class: \"w-full max-w-xl\" do %>\n  <%= lc_section title: \"Recent expenses\", actions: capture { lc_button(\"Add expense\", icon: \"plus\", size: :sm) } do %>\n    <%= lc_card do %>\n      <%= lc_inline class: \"flex-nowrap justify-between\" do %>\n        <%= lc_text \"Dinner with friends\" %>\n        <%= lc_text \"¥8,400\", class: \"shrink-0 tabular-nums\" %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_text \"Train tickets\" %>\n    <% end %>\n  <% end %>\n  <%= lc_stack as: :section, gap: :heading do %>\n    <%= lc_section_header do %>\n      <%= lc_stack gap: :tight do %>\n        <%= lc_heading \"Members\" %>\n        <%= lc_text \"Everyone who can see this workspace.\", size: :small, tone: :muted %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_inline do %>\n        <%= lc_avatar \"AK\", class: \"bg-primary\" %>\n        <%= lc_stack gap: :tight do %>\n          <%= lc_text \"Alex Kim\" %>\n          <%= lc_text \"Joined today\", size: :small, tone: :muted %>\n        <% end %>\n      <% end %>\n    <% end %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Responsive containers",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_container do %>\n  <%= lc_stack gap: :section do %>\n    <%= lc_heading \"Plan your next trip\", level: 2, size: :title %>\n    <div class=\"grid min-w-0 gap-8 md:grid-cols-2\">\n      <%= lc_section title: \"Travel details\", level: 3 do %>\n        <%= lc_card do %>\n          <%= lc_stack do %>\n            <%= lc_text \"Kyoto weekend\", size: :body %>\n            <%= lc_text \"Keep shared costs and travel notes together.\", size: :small, tone: :muted %>\n            <%= lc_inline do %>\n              <%= lc_button \"Invite friends\", size: :sm %>\n              <%= lc_button \"View itinerary\", variant: :ghost, size: :sm %>\n            <% end %>\n          <% end %>\n        <% end %>\n      <% end %>\n      <%= lc_section title: \"Shared costs\", level: 3 do %>\n        <%= lc_card do %>\n          <%= lc_text \"No expenses yet\", size: :body %>\n        <% end %>\n      <% end %>\n    </div>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Expanded swap and decorative span",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_inline do %>\n  <%= lc_button \"New entry\", icon: \"plus\", expanded_icon: \"x-mark\", size: :sm, aria: { expanded: false } %>\n  <%= lc_button \"New entry\", icon: \"plus\", expanded_icon: \"x-mark\", size: :sm, aria: { expanded: true } %>\n  <label class=\"grid place-items-center gap-related rounded-3xl bg-muted p-inset text-small text-muted-foreground\">\n    Drop a receipt here\n    <%= lc_button \"Browse files\", as: :span, size: :sm, aria: { hidden: true } %>\n    <input type=\"file\" class=\"sr-only\">\n  </label>\n<% end %>"
        },
        {
          "title": "Form actions",
          "url": "https://ui.lostcoords.com/components/field.html",
          "erb": "<%= lc_inline class: \"justify-end\" do %>\n  <%= lc_button \"Cancel\", variant: :ghost %>\n  <%= lc_button \"Save changes\", type: :submit %>\n<% end %>"
        },
        {
          "title": "Grouped controls",
          "url": "https://ui.lostcoords.com/components/field.html",
          "erb": "<%= lc_stack class: \"w-full max-w-sm\" do %>\n  <%= lc_fieldset legend: \"Split\", id: \"my-component-split\", hint: \"Everyone pays the same share unless you change it.\" do %>\n    <%= lc_inline do %>\n      <%= lc_toggle \"Equally\", active: true %>\n      <%= lc_toggle \"By amount\" %>\n      <%= lc_toggle \"By share\" %>\n    <% end %>\n  <% end %>\n  <%= lc_stack gap: :related do %>\n    <%= lc_text \"This app can\", size: :label, tone: :muted %>\n    <ul class=\"m-0 ps-5 list-disc text-muted-foreground\">\n      <li>Read your groups</li>\n      <li>Add expenses</li>\n    </ul>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Filters",
          "url": "https://ui.lostcoords.com/components/toggle.html",
          "erb": "<%= lc_inline role: \"group\", aria: { label: \"Topics\" } do %>\n  <%= lc_toggle \"Design\", active: true %>\n  <%= lc_toggle \"Writing\" %>\n  <%= lc_toggle \"Research\" %>\n<% end %>"
        },
        {
          "title": "Navigation",
          "url": "https://ui.lostcoords.com/components/toggle.html",
          "erb": "<%= lc_inline do %>\n  <%= lc_toggle \"All projects\", href: \"/components/toggle.html\", active: true, size: :sm %>\n  <%= lc_toggle \"Archived\", href: \"/components/badge.html\", size: :sm %>\n<% end %>"
        },
        {
          "title": "Form values, native radios and reset",
          "url": "https://ui.lostcoords.com/components/toggle_group.html",
          "erb": "<form class=\"flex flex-col items-center gap-4\">\n  <%= lc_toggle_group label: \"Billing\", name: \"billing\", value: \"monthly\" do %>\n    <%= lc_toggle_group_item \"Monthly\", value: \"monthly\" %>\n    <%= lc_toggle_group_item \"Annual\", value: \"annual\" %>\n    <%= lc_toggle_group_item \"Custom\", value: \"custom\", disabled: true %>\n  <% end %>\n  <%= lc_inline role: \"radiogroup\", aria: { label: \"Heard about us\" } do %>\n    <%= lc_toggle \"A friend\", name: \"source\", value: \"friend\", size: :sm %>\n    <%= lc_toggle \"Search\", name: \"source\", value: \"search\", size: :sm %>\n  <% end %>\n  <%= lc_button \"Reset\", type: :reset, variant: :ghost, size: :sm %>\n</form>"
        },
        {
          "title": "Tooltips",
          "url": "https://ui.lostcoords.com/components/tooltip.html",
          "erb": "<%= lc_inline gap: :content do %>\n  <%= lc_tooltip \"Copy a link to this page\", id: \"my-component-copy-tip\" do |tip| %>\n    <%= lc_icon_button \"Copy link\", icon: \"link\", **tip %>\n  <% end %>\n  <%= lc_tooltip \"Only owners can archive\", id: \"my-component-archive-tip\", side: :bottom do |tip| %>\n    <%= lc_button \"Archive\", variant: :secondary, **tip %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_container",
      "signature": "lc_container(size: :page, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/foundations.html#lc_container",
      "examples": [
        {
          "title": "Responsive containers",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_container do %>\n  <%= lc_stack gap: :section do %>\n    <%= lc_heading \"Plan your next trip\", level: 2, size: :title %>\n    <div class=\"grid min-w-0 gap-8 md:grid-cols-2\">\n      <%= lc_section title: \"Travel details\", level: 3 do %>\n        <%= lc_card do %>\n          <%= lc_stack do %>\n            <%= lc_text \"Kyoto weekend\", size: :body %>\n            <%= lc_text \"Keep shared costs and travel notes together.\", size: :small, tone: :muted %>\n            <%= lc_inline do %>\n              <%= lc_button \"Invite friends\", size: :sm %>\n              <%= lc_button \"View itinerary\", variant: :ghost, size: :sm %>\n            <% end %>\n          <% end %>\n        <% end %>\n      <% end %>\n      <%= lc_section title: \"Shared costs\", level: 3 do %>\n        <%= lc_card do %>\n          <%= lc_text \"No expenses yet\", size: :body %>\n        <% end %>\n      <% end %>\n    </div>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_section",
      "signature": "lc_section(title:, level: 2, actions: nil, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/foundations.html#lc_section",
      "examples": [
        {
          "title": "Page rhythm",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_stack gap: :section, class: \"w-full max-w-xl\" do %>\n  <%= lc_section title: \"Recent expenses\", actions: capture { lc_button(\"Add expense\", icon: \"plus\", size: :sm) } do %>\n    <%= lc_card do %>\n      <%= lc_inline class: \"flex-nowrap justify-between\" do %>\n        <%= lc_text \"Dinner with friends\" %>\n        <%= lc_text \"¥8,400\", class: \"shrink-0 tabular-nums\" %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_text \"Train tickets\" %>\n    <% end %>\n  <% end %>\n  <%= lc_stack as: :section, gap: :heading do %>\n    <%= lc_section_header do %>\n      <%= lc_stack gap: :tight do %>\n        <%= lc_heading \"Members\" %>\n        <%= lc_text \"Everyone who can see this workspace.\", size: :small, tone: :muted %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_inline do %>\n        <%= lc_avatar \"AK\", class: \"bg-primary\" %>\n        <%= lc_stack gap: :tight do %>\n          <%= lc_text \"Alex Kim\" %>\n          <%= lc_text \"Joined today\", size: :small, tone: :muted %>\n        <% end %>\n      <% end %>\n    <% end %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Responsive containers",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_container do %>\n  <%= lc_stack gap: :section do %>\n    <%= lc_heading \"Plan your next trip\", level: 2, size: :title %>\n    <div class=\"grid min-w-0 gap-8 md:grid-cols-2\">\n      <%= lc_section title: \"Travel details\", level: 3 do %>\n        <%= lc_card do %>\n          <%= lc_stack do %>\n            <%= lc_text \"Kyoto weekend\", size: :body %>\n            <%= lc_text \"Keep shared costs and travel notes together.\", size: :small, tone: :muted %>\n            <%= lc_inline do %>\n              <%= lc_button \"Invite friends\", size: :sm %>\n              <%= lc_button \"View itinerary\", variant: :ghost, size: :sm %>\n            <% end %>\n          <% end %>\n        <% end %>\n      <% end %>\n      <%= lc_section title: \"Shared costs\", level: 3 do %>\n        <%= lc_card do %>\n          <%= lc_text \"No expenses yet\", size: :body %>\n        <% end %>\n      <% end %>\n    </div>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_section_header",
      "signature": "lc_section_header(as: :header, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/foundations.html#lc_section_header",
      "examples": [
        {
          "title": "Page rhythm",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_stack gap: :section, class: \"w-full max-w-xl\" do %>\n  <%= lc_section title: \"Recent expenses\", actions: capture { lc_button(\"Add expense\", icon: \"plus\", size: :sm) } do %>\n    <%= lc_card do %>\n      <%= lc_inline class: \"flex-nowrap justify-between\" do %>\n        <%= lc_text \"Dinner with friends\" %>\n        <%= lc_text \"¥8,400\", class: \"shrink-0 tabular-nums\" %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_text \"Train tickets\" %>\n    <% end %>\n  <% end %>\n  <%= lc_stack as: :section, gap: :heading do %>\n    <%= lc_section_header do %>\n      <%= lc_stack gap: :tight do %>\n        <%= lc_heading \"Members\" %>\n        <%= lc_text \"Everyone who can see this workspace.\", size: :small, tone: :muted %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_inline do %>\n        <%= lc_avatar \"AK\", class: \"bg-primary\" %>\n        <%= lc_stack gap: :tight do %>\n          <%= lc_text \"Alex Kim\" %>\n          <%= lc_text \"Joined today\", size: :small, tone: :muted %>\n        <% end %>\n      <% end %>\n    <% end %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_list_section",
      "signature": "lc_list_section(heading, footnote: nil, level: 2, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/list_group.html#lc_list_section",
      "examples": [
        {
          "title": "Settings",
          "url": "https://ui.lostcoords.com/components/list_group.html",
          "erb": "<%= lc_list_section \"Sign-in methods\", id: \"my-component\", footnote: \"Keep at least one way to sign in.\", class: \"w-full max-w-md\" do %>\n  <%= lc_list_group do %>\n    <%= lc_list_row \"Email\", subtitle: \"ada@example.com\", icon: \"envelope\" do %>\n      <%= lc_button \"Change\", variant: :secondary, size: :sm %>\n    <% end %>\n    <%= lc_list_row \"Passkey\", subtitle: \"Not set up\", icon: \"key\" do %>\n      <%= lc_button \"Add\", variant: :secondary, size: :sm %>\n    <% end %>\n    <%= lc_list_row \"Sign-in alerts\", subtitle: \"Email me when a new device signs in\", icon: \"bell\", tag: :label, class: \"cursor-pointer\" do %>\n      <input type=\"checkbox\" role=\"switch\" name=\"alerts\" class=\"<%= lc_switch_class %>\" checked>\n    <% end %>\n    <%= lc_list_row \"Recovery codes\", icon: \"document-text\", href: \"#recovery-codes\" do %>\n      <%= lc_icon \"chevron-right\", variant: :mini, options: { class: \"size-5 text-muted-foreground rtl:rotate-180\", \"aria-hidden\": true } %>\n    <% end %>\n    <%= lc_list_row padded: false do %>\n      <%= lc_list_item \"Delete account\", icon: \"trash\", tag: :button, type: \"button\", class: \"w-full cursor-pointer rounded-[inherit] text-destructive transition-colors hover:bg-accent\" %>\n    <% end %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_list_group",
      "signature": "lc_list_group(tag: :div, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/list_group.html#lc_list_group",
      "examples": [
        {
          "title": "Settings",
          "url": "https://ui.lostcoords.com/components/list_group.html",
          "erb": "<%= lc_list_section \"Sign-in methods\", id: \"my-component\", footnote: \"Keep at least one way to sign in.\", class: \"w-full max-w-md\" do %>\n  <%= lc_list_group do %>\n    <%= lc_list_row \"Email\", subtitle: \"ada@example.com\", icon: \"envelope\" do %>\n      <%= lc_button \"Change\", variant: :secondary, size: :sm %>\n    <% end %>\n    <%= lc_list_row \"Passkey\", subtitle: \"Not set up\", icon: \"key\" do %>\n      <%= lc_button \"Add\", variant: :secondary, size: :sm %>\n    <% end %>\n    <%= lc_list_row \"Sign-in alerts\", subtitle: \"Email me when a new device signs in\", icon: \"bell\", tag: :label, class: \"cursor-pointer\" do %>\n      <input type=\"checkbox\" role=\"switch\" name=\"alerts\" class=\"<%= lc_switch_class %>\" checked>\n    <% end %>\n    <%= lc_list_row \"Recovery codes\", icon: \"document-text\", href: \"#recovery-codes\" do %>\n      <%= lc_icon \"chevron-right\", variant: :mini, options: { class: \"size-5 text-muted-foreground rtl:rotate-180\", \"aria-hidden\": true } %>\n    <% end %>\n    <%= lc_list_row padded: false do %>\n      <%= lc_list_item \"Delete account\", icon: \"trash\", tag: :button, type: \"button\", class: \"w-full cursor-pointer rounded-[inherit] text-destructive transition-colors hover:bg-accent\" %>\n    <% end %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Form rows",
          "url": "https://ui.lostcoords.com/components/list_group.html",
          "erb": "<%= lc_list_group class: \"w-full max-w-md\" do %>\n  <%= lc_list_field \"Description\", icon: \"pencil\", id: \"my-component-description\" do %>\n    <%= lc_input plain: true, id: \"my-component-description\", name: \"description\", placeholder: \"Dinner at Ichiran\" %>\n  <% end %>\n  <%= lc_list_field \"Paid by\", icon: \"user\", tag: :fieldset do %>\n    <div class=\"flex flex-wrap items-center gap-related min-w-0\">\n      <%= lc_toggle \"Ada\", size: :sm, active: true %>\n      <%= lc_toggle \"Grace\", size: :sm %>\n    </div>\n  <% end %>\n  <%= lc_list_field \"Date\", icon: \"calendar\", id: \"my-component-date\" do %>\n    <%= lc_input type: :date, plain: true, id: \"my-component-date\", name: \"date\", value: \"2026-11-06\" %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_list_row",
      "signature": "lc_list_row(title = nil, subtitle: nil, icon: nil, href: nil, tag: nil, padded: true, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/list_group.html#lc_list_row",
      "examples": [
        {
          "title": "Settings",
          "url": "https://ui.lostcoords.com/components/list_group.html",
          "erb": "<%= lc_list_section \"Sign-in methods\", id: \"my-component\", footnote: \"Keep at least one way to sign in.\", class: \"w-full max-w-md\" do %>\n  <%= lc_list_group do %>\n    <%= lc_list_row \"Email\", subtitle: \"ada@example.com\", icon: \"envelope\" do %>\n      <%= lc_button \"Change\", variant: :secondary, size: :sm %>\n    <% end %>\n    <%= lc_list_row \"Passkey\", subtitle: \"Not set up\", icon: \"key\" do %>\n      <%= lc_button \"Add\", variant: :secondary, size: :sm %>\n    <% end %>\n    <%= lc_list_row \"Sign-in alerts\", subtitle: \"Email me when a new device signs in\", icon: \"bell\", tag: :label, class: \"cursor-pointer\" do %>\n      <input type=\"checkbox\" role=\"switch\" name=\"alerts\" class=\"<%= lc_switch_class %>\" checked>\n    <% end %>\n    <%= lc_list_row \"Recovery codes\", icon: \"document-text\", href: \"#recovery-codes\" do %>\n      <%= lc_icon \"chevron-right\", variant: :mini, options: { class: \"size-5 text-muted-foreground rtl:rotate-180\", \"aria-hidden\": true } %>\n    <% end %>\n    <%= lc_list_row padded: false do %>\n      <%= lc_list_item \"Delete account\", icon: \"trash\", tag: :button, type: \"button\", class: \"w-full cursor-pointer rounded-[inherit] text-destructive transition-colors hover:bg-accent\" %>\n    <% end %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_list_field",
      "signature": "lc_list_field(label, icon: nil, id: nil, tag: :div, surface: true, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/list_group.html#lc_list_field",
      "examples": [
        {
          "title": "Form rows",
          "url": "https://ui.lostcoords.com/components/list_group.html",
          "erb": "<%= lc_list_group class: \"w-full max-w-md\" do %>\n  <%= lc_list_field \"Description\", icon: \"pencil\", id: \"my-component-description\" do %>\n    <%= lc_input plain: true, id: \"my-component-description\", name: \"description\", placeholder: \"Dinner at Ichiran\" %>\n  <% end %>\n  <%= lc_list_field \"Paid by\", icon: \"user\", tag: :fieldset do %>\n    <div class=\"flex flex-wrap items-center gap-related min-w-0\">\n      <%= lc_toggle \"Ada\", size: :sm, active: true %>\n      <%= lc_toggle \"Grace\", size: :sm %>\n    </div>\n  <% end %>\n  <%= lc_list_field \"Date\", icon: \"calendar\", id: \"my-component-date\" do %>\n    <%= lc_input type: :date, plain: true, id: \"my-component-date\", name: \"date\", value: \"2026-11-06\" %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_list_item",
      "signature": "lc_list_item(title, subtitle: nil, icon: nil, tag: :div, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/list_group.html#lc_list_item",
      "examples": [
        {
          "title": "Settings",
          "url": "https://ui.lostcoords.com/components/list_group.html",
          "erb": "<%= lc_list_section \"Sign-in methods\", id: \"my-component\", footnote: \"Keep at least one way to sign in.\", class: \"w-full max-w-md\" do %>\n  <%= lc_list_group do %>\n    <%= lc_list_row \"Email\", subtitle: \"ada@example.com\", icon: \"envelope\" do %>\n      <%= lc_button \"Change\", variant: :secondary, size: :sm %>\n    <% end %>\n    <%= lc_list_row \"Passkey\", subtitle: \"Not set up\", icon: \"key\" do %>\n      <%= lc_button \"Add\", variant: :secondary, size: :sm %>\n    <% end %>\n    <%= lc_list_row \"Sign-in alerts\", subtitle: \"Email me when a new device signs in\", icon: \"bell\", tag: :label, class: \"cursor-pointer\" do %>\n      <input type=\"checkbox\" role=\"switch\" name=\"alerts\" class=\"<%= lc_switch_class %>\" checked>\n    <% end %>\n    <%= lc_list_row \"Recovery codes\", icon: \"document-text\", href: \"#recovery-codes\" do %>\n      <%= lc_icon \"chevron-right\", variant: :mini, options: { class: \"size-5 text-muted-foreground rtl:rotate-180\", \"aria-hidden\": true } %>\n    <% end %>\n    <%= lc_list_row padded: false do %>\n      <%= lc_list_item \"Delete account\", icon: \"trash\", tag: :button, type: \"button\", class: \"w-full cursor-pointer rounded-[inherit] text-destructive transition-colors hover:bg-accent\" %>\n    <% end %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_menu",
      "signature": "lc_menu(id:, label: lc_t(\"lostcoords.ui.menu.label\"), align: :end, trigger: :button, icon: \"ellipsis-vertical\", trigger_attributes: {}, wrapper_attributes: {}, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/menu.html#lc_menu",
      "examples": [
        {
          "title": "Select trigger",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_menu id: \"my-component-menu\", label: \"Member\", align: :start do |menu| %>\n  <% menu.trigger(class: \"min-w-44\") { |attrs| lc_select_trigger \"All members\", **attrs } %>\n  <%= lc_menu_option \"All members\", checked: true %>\n  <%= lc_menu_option \"Alex\", checked: false %>\n  <%= lc_menu_option \"Sam\", checked: false %>\n<% end %>"
        },
        {
          "title": "Turbo confirm",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<%# In the layout, once. %>\n<%= lc_confirm_sheet %>\n\n<%= lc_button_to \"Delete project\", \"/projects/42\", method: :delete, variant: :destructive, form: { data: { turbo_confirm: \"Delete this project?\", turbo_confirm_description: \"Its pages and files are deleted for everyone.\", controller: \"confirm-demo\", action: \"confirm-demo#submit\" } } %>\n<%= lc_button_to \"Archive\", \"/projects/42/archival\", form: { data: { turbo_confirm: \"Archive this project?\", turbo_confirm_accept: \"Archive project\", controller: \"confirm-demo\", action: \"confirm-demo#submit\" } } %>\n<%= lc_menu id: \"my-component-menu\", label: \"Membership\" do %>\n  <%= lc_menu_option \"Leave project\", href: \"/projects/42/membership\", method: :delete, tone: :destructive, form: { data: { turbo_confirm: \"Leave this project?\", turbo_confirm_accept: \"Leave\", controller: \"confirm-demo\", action: \"confirm-demo#submit\" } } %>\n<% end %>"
        },
        {
          "title": "Actions",
          "url": "https://ui.lostcoords.com/components/menu.html",
          "erb": "<%= lc_menu id: \"my-component-menu\", label: \"Project actions\" do %>\n  <%= lc_menu_option \"Edit project\", href: \"/components/input.html\" %>\n  <%= lc_menu_option \"Duplicate project\" %>\n  <%= lc_menu_option \"Archive project\", tone: :destructive %>\n<% end %>"
        },
        {
          "title": "Icon trigger, hints, choices and groups",
          "url": "https://ui.lostcoords.com/components/menu.html",
          "erb": "<div class=\"flex flex-wrap items-center gap-content\">\n  <%= lc_menu id: \"my-component-row-menu\", label: \"Actions for Alex\", trigger: :icon do %>\n    <%= lc_menu_option \"Rename\", icon: \"pencil\" %>\n    <%= lc_menu_option \"Move up\", icon: \"arrow-up\", hint: \"Second in the list\" %>\n    <%= lc_menu_option \"Copy link\" %>\n    <%= lc_menu_option \"Pinned\", icon: \"star\", checkbox: true %>\n    <%= lc_menu_option \"Remove\", icon: \"trash\", href: \"/components/menu.html\", method: :delete, tone: :destructive %>\n  <% end %>\n  <%= lc_menu id: \"my-component-currency-menu\", label: \"Currency\", align: :start do |menu| %>\n    <% menu.trigger { |attrs| lc_select_trigger \"Euro\", **attrs } %>\n    <%= lc_menu_group \"Suggested\", id: \"my-component-suggested\" do %>\n      <%= lc_menu_option \"Euro\", hint: \"EUR\", leading: tag.span(\"€\"), checked: true %>\n      <%= lc_menu_option \"Japanese yen\", hint: \"JPY\", leading: tag.span(\"¥\"), checked: false %>\n    <% end %>\n    <%= lc_menu_group \"Other\", id: \"my-component-other\" do %>\n      <%= lc_menu_option \"US dollar\", hint: \"USD\", leading: tag.span(\"$\"), checked: false %>\n    <% end %>\n  <% end %>\n</div>"
        }
      ]
    },
    {
      "name": "lc_popover",
      "signature": "lc_popover(id:, label: lc_t(\"lostcoords.ui.popover.trigger\"), title: nil, align: :end, trigger_variant: :secondary, trigger: :button, icon: \"ellipsis-vertical\", trigger_attributes: {}, wrapper_attributes: {}, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/popover.html#lc_popover",
      "examples": [
        {
          "title": "Anchored content",
          "url": "https://ui.lostcoords.com/components/popover.html",
          "erb": "<%= lc_popover id: \"my-component-popover\", label: \"Project details\", title: \"Design system\" do %>\n  <p class=\"text-sm text-muted-foreground\">Updated a moment ago by Alex.</p>\n<% end %>"
        },
        {
          "title": "Opened from a row",
          "url": "https://ui.lostcoords.com/components/popover.html",
          "erb": "<div class=\"flex items-center gap-related min-h-control-md px-3 rounded-2xl bg-muted cursor-pointer\" data-controller=\"lc-popover\" data-action=\"click->lc-popover#toggleFromRow\">\n  <button type=\"button\" class=\"font-semibold\" aria-haspopup=\"dialog\" aria-expanded=\"false\" data-lc-popover-target=\"trigger\" data-action=\"lc-popover#toggle\">Alex</button>\n  <span class=\"text-muted-foreground\">Tap anywhere on the row</span>\n  <%= lc_popover id: \"my-component-row-popover\", label: \"How to pay Alex\", trigger: false, align: :start do %>\n    <p class=\"m-0\">Alex takes bank transfers.</p>\n  <% end %>\n</div>"
        }
      ]
    },
    {
      "name": "lc_menu_option",
      "signature": "lc_menu_option(label = nil, href: nil, tone: :default, icon: nil, leading: nil, hint: nil, checked: nil, checkbox: false, method: nil, params: {}, form: {}, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/menu.html#lc_menu_option",
      "examples": [
        {
          "title": "Select trigger",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_menu id: \"my-component-menu\", label: \"Member\", align: :start do |menu| %>\n  <% menu.trigger(class: \"min-w-44\") { |attrs| lc_select_trigger \"All members\", **attrs } %>\n  <%= lc_menu_option \"All members\", checked: true %>\n  <%= lc_menu_option \"Alex\", checked: false %>\n  <%= lc_menu_option \"Sam\", checked: false %>\n<% end %>"
        },
        {
          "title": "Split button",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_split_button \"Add expense\", id: \"my-component-menu\", icon: \"plus\", menu_label: \"More ways to add\" do %>\n  <%= lc_menu_option \"Import a CSV\", icon: \"arrow-down-tray\" %>\n  <%= lc_menu_option \"Scan a receipt\", icon: \"camera\" %>\n<% end %>"
        },
        {
          "title": "Split button variants and sizes",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<% [ [ :secondary, :sm ], [ :outline, :md ], [ :ghost, :lg ] ].each do |variant, size| %>\n  <%= lc_split_button \"Export\", id: \"my-component-#{variant}\", variant: variant, size: size, menu_label: \"Export options\" do %>\n    <%= lc_menu_option \"Export as CSV\" %>\n    <%= lc_menu_option \"Export as PDF\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Turbo confirm",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<%# In the layout, once. %>\n<%= lc_confirm_sheet %>\n\n<%= lc_button_to \"Delete project\", \"/projects/42\", method: :delete, variant: :destructive, form: { data: { turbo_confirm: \"Delete this project?\", turbo_confirm_description: \"Its pages and files are deleted for everyone.\", controller: \"confirm-demo\", action: \"confirm-demo#submit\" } } %>\n<%= lc_button_to \"Archive\", \"/projects/42/archival\", form: { data: { turbo_confirm: \"Archive this project?\", turbo_confirm_accept: \"Archive project\", controller: \"confirm-demo\", action: \"confirm-demo#submit\" } } %>\n<%= lc_menu id: \"my-component-menu\", label: \"Membership\" do %>\n  <%= lc_menu_option \"Leave project\", href: \"/projects/42/membership\", method: :delete, tone: :destructive, form: { data: { turbo_confirm: \"Leave this project?\", turbo_confirm_accept: \"Leave\", controller: \"confirm-demo\", action: \"confirm-demo#submit\" } } %>\n<% end %>"
        },
        {
          "title": "Actions",
          "url": "https://ui.lostcoords.com/components/menu.html",
          "erb": "<%= lc_menu id: \"my-component-menu\", label: \"Project actions\" do %>\n  <%= lc_menu_option \"Edit project\", href: \"/components/input.html\" %>\n  <%= lc_menu_option \"Duplicate project\" %>\n  <%= lc_menu_option \"Archive project\", tone: :destructive %>\n<% end %>"
        },
        {
          "title": "Icon trigger, hints, choices and groups",
          "url": "https://ui.lostcoords.com/components/menu.html",
          "erb": "<div class=\"flex flex-wrap items-center gap-content\">\n  <%= lc_menu id: \"my-component-row-menu\", label: \"Actions for Alex\", trigger: :icon do %>\n    <%= lc_menu_option \"Rename\", icon: \"pencil\" %>\n    <%= lc_menu_option \"Move up\", icon: \"arrow-up\", hint: \"Second in the list\" %>\n    <%= lc_menu_option \"Copy link\" %>\n    <%= lc_menu_option \"Pinned\", icon: \"star\", checkbox: true %>\n    <%= lc_menu_option \"Remove\", icon: \"trash\", href: \"/components/menu.html\", method: :delete, tone: :destructive %>\n  <% end %>\n  <%= lc_menu id: \"my-component-currency-menu\", label: \"Currency\", align: :start do |menu| %>\n    <% menu.trigger { |attrs| lc_select_trigger \"Euro\", **attrs } %>\n    <%= lc_menu_group \"Suggested\", id: \"my-component-suggested\" do %>\n      <%= lc_menu_option \"Euro\", hint: \"EUR\", leading: tag.span(\"€\"), checked: true %>\n      <%= lc_menu_option \"Japanese yen\", hint: \"JPY\", leading: tag.span(\"¥\"), checked: false %>\n    <% end %>\n    <%= lc_menu_group \"Other\", id: \"my-component-other\" do %>\n      <%= lc_menu_option \"US dollar\", hint: \"USD\", leading: tag.span(\"$\"), checked: false %>\n    <% end %>\n  <% end %>\n</div>"
        }
      ]
    },
    {
      "name": "lc_menu_group",
      "signature": "lc_menu_group(label, id:, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/menu.html#lc_menu_group",
      "examples": [
        {
          "title": "Icon trigger, hints, choices and groups",
          "url": "https://ui.lostcoords.com/components/menu.html",
          "erb": "<div class=\"flex flex-wrap items-center gap-content\">\n  <%= lc_menu id: \"my-component-row-menu\", label: \"Actions for Alex\", trigger: :icon do %>\n    <%= lc_menu_option \"Rename\", icon: \"pencil\" %>\n    <%= lc_menu_option \"Move up\", icon: \"arrow-up\", hint: \"Second in the list\" %>\n    <%= lc_menu_option \"Copy link\" %>\n    <%= lc_menu_option \"Pinned\", icon: \"star\", checkbox: true %>\n    <%= lc_menu_option \"Remove\", icon: \"trash\", href: \"/components/menu.html\", method: :delete, tone: :destructive %>\n  <% end %>\n  <%= lc_menu id: \"my-component-currency-menu\", label: \"Currency\", align: :start do |menu| %>\n    <% menu.trigger { |attrs| lc_select_trigger \"Euro\", **attrs } %>\n    <%= lc_menu_group \"Suggested\", id: \"my-component-suggested\" do %>\n      <%= lc_menu_option \"Euro\", hint: \"EUR\", leading: tag.span(\"€\"), checked: true %>\n      <%= lc_menu_option \"Japanese yen\", hint: \"JPY\", leading: tag.span(\"¥\"), checked: false %>\n    <% end %>\n    <%= lc_menu_group \"Other\", id: \"my-component-other\" do %>\n      <%= lc_menu_option \"US dollar\", hint: \"USD\", leading: tag.span(\"$\"), checked: false %>\n    <% end %>\n  <% end %>\n</div>"
        }
      ]
    },
    {
      "name": "lc_link",
      "signature": "lc_link(content = nil, url = nil, tone: :inherit, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/link.html#lc_link",
      "examples": [
        {
          "title": "Tones",
          "url": "https://ui.lostcoords.com/components/link.html",
          "erb": "<%= lc_stack gap: :related do %>\n  <%= lc_text do %>Read the <%= lc_link \"installation guide\", \"/installation.html\" %> before you start.<% end %>\n  <%= lc_text size: :small, tone: :muted do %>Questions? <%= lc_link \"Contact support\", \"/components/link.html\", tone: :muted %>.<% end %>\n  <%= lc_text do %>See <%= lc_link \"what's new\", \"/components/link.html\", tone: :primary %> in this release.<% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_nav_list",
      "signature": "lc_nav_list(label:, compact: false, layout: :column, indicator: false, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/nav_list.html#lc_nav_list",
      "parts": [
        "nav.link(label = nil, url = nil, icon: nil, current: false, indent: false, **attributes, &block)",
        "nav.group(title, **attributes, &block)"
      ],
      "examples": [
        {
          "title": "Sidebar",
          "url": "https://ui.lostcoords.com/components/nav_list.html",
          "erb": "<%= lc_nav_list label: \"Settings\", class: \"w-full max-w-60\" do |nav| %>\n  <%= nav.group \"Workspace\" do %>\n    <%= nav.link \"General\", \"#general\", current: true %>\n    <%= nav.link \"Members\", \"#members\" %>\n    <%= nav.link \"Billing\", \"#billing\" %>\n  <% end %>\n  <%= nav.group \"Account\" do %>\n    <%= nav.link \"Profile\", \"#profile\" %>\n    <%= nav.link \"Notifications\", \"#notifications\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "On this page",
          "url": "https://ui.lostcoords.com/components/nav_list.html",
          "erb": "<%= lc_nav_list label: \"On this page\", compact: true, class: \"w-full max-w-48\" do |nav| %>\n  <%= nav.link \"Overview\", \"#overview\", current: true %>\n  <%= nav.link \"Usage\", \"#usage\" %>\n  <%= nav.link \"Sizes\", \"#sizes\", indent: true %>\n  <%= nav.link \"API reference\", \"#api\" %>\n<% end %>"
        },
        {
          "title": "Row with a sliding indicator",
          "url": "https://ui.lostcoords.com/components/nav_list.html",
          "erb": "<%= lc_nav_list label: \"Project\", layout: :row, indicator: true, class: \"w-full\" do |nav| %>\n  <%= nav.link \"Overview\", \"#overview\", icon: \"document-text\", current: true %>\n  <%= nav.link \"Activity\", \"#activity\", icon: \"clock\" %>\n  <%= nav.link \"Files\", \"#files\", icon: \"paper-clip\" %>\n  <%= nav.link \"Settings\", \"#settings\", icon: \"cog-6-tooth\" %>\n<% end %>"
        },
        {
          "title": "Dock",
          "url": "https://ui.lostcoords.com/components/nav_list.html",
          "erb": "<%# On phones, fix it to the bottom with your own classes. layout: :responsive is a dock below sm and a row from sm. %>\n<%= lc_nav_list label: \"Group\", layout: :dock, indicator: true, class: lc_glass_class(thick: true, extra: \"w-full max-w-sm\") do |nav| %>\n  <%= nav.link \"Overview\", \"#overview\", icon: \"document-text\", current: true %>\n  <%= nav.link \"Members\", \"#members\", icon: \"users\" %>\n  <%= nav.link \"Activity\", \"#activity\", icon: \"clock\" %>\n  <%= nav.link \"Stats\", \"#stats\", icon: \"chart-bar\" %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_pager",
      "signature": "lc_pager(previous: nil, next: nil, label: lc_t(\"lostcoords.ui.pager.label\"), compact: false, **attributes)",
      "url": "https://ui.lostcoords.com/components/pager.html#lc_pager",
      "examples": [
        {
          "title": "Pager",
          "url": "https://ui.lostcoords.com/components/pager.html",
          "erb": "<%= lc_pager previous: [ \"Installation\", \"/components/pager.html\" ], next: [ \"Theming\", \"/components/pager.html\" ], class: \"w-full\" %>"
        },
        {
          "title": "Compact",
          "url": "https://ui.lostcoords.com/components/pager.html",
          "erb": "<%= lc_pager previous: [ \"Button\", \"/components/pager.html\" ], next: [ \"Card\", \"/components/pager.html\" ], label: \"Components\", compact: true %>"
        }
      ]
    },
    {
      "name": "lc_skip_link",
      "signature": "lc_skip_link(target = \"#main\", label: lc_t(\"lostcoords.ui.skip_link.label\"), **attributes)",
      "url": "https://ui.lostcoords.com/components/skip_link.html#lc_skip_link",
      "examples": [
        {
          "title": "Skip link",
          "url": "https://ui.lostcoords.com/components/skip_link.html",
          "erb": "<%= lc_stack gap: :related, class: \"items-center\" do %>\n  <%= lc_text \"Press Tab on this page: the skip link is the first thing to receive focus.\", size: :small, tone: :muted %>\n  <%= lc_skip_link \"#examples\", class: \"not-sr-only static\" %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_breadcrumb",
      "signature": "lc_breadcrumb(items, label: lc_t(\"lostcoords.ui.breadcrumb.label\"), **attributes)",
      "url": "https://ui.lostcoords.com/components/breadcrumb.html#lc_breadcrumb",
      "examples": [
        {
          "title": "Breadcrumb",
          "url": "https://ui.lostcoords.com/components/breadcrumb.html",
          "erb": "<%= lc_breadcrumb [ [ \"Projects\", \"/components/breadcrumb.html\" ], [ \"Design system\", \"/components/breadcrumb.html\" ], \"Settings\" ] %>"
        }
      ]
    },
    {
      "name": "lc_tabs",
      "signature": "lc_tabs(id:, label:, selected: nil, orientation: :horizontal, activation: :automatic, list: {}, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/tabs.html#lc_tabs",
      "parts": [
        "tabs.panel(label, value: nil, **attributes, &block)"
      ],
      "examples": [
        {
          "title": "Tabs",
          "url": "https://ui.lostcoords.com/components/tabs.html",
          "erb": "<%= lc_tabs id: \"my-component-tabs\", label: \"Project\", class: \"w-full\" do |tabs| %>\n  <% tabs.panel \"Overview\" do %>\n    <%= lc_text \"Pages, members and recent changes.\" %>\n  <% end %>\n  <% tabs.panel \"Activity\" do %>\n    <%= lc_text \"Nothing new this week.\", tone: :muted %>\n  <% end %>\n  <% tabs.panel \"Settings\" do %>\n    <%= lc_switch \"Public project\", name: \"project[public]\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Vertical, with manual activation",
          "url": "https://ui.lostcoords.com/components/tabs.html",
          "erb": "<%= lc_tabs id: \"my-component-settings\", label: \"Settings\", orientation: :vertical, activation: :manual, class: \"w-full\" do |tabs| %>\n  <% tabs.panel \"Profile\" do %>\n    <%= lc_text \"Name, photo and contact details.\" %>\n  <% end %>\n  <% tabs.panel \"Notifications\" do %>\n    <%= lc_switch \"Email me about mentions\", name: \"settings[mentions]\" %>\n  <% end %>\n  <% tabs.panel \"Billing\" do %>\n    <%= lc_text \"Plan, invoices and payment method.\", tone: :muted %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_button",
      "signature": "lc_button(content = nil, variant: :primary, tone: :default, size: :md, block: false, icon: nil, icon_position: :start, as: :button, expanded_icon: nil, **attributes, &content_block)",
      "url": "https://ui.lostcoords.com/components/button.html#lc_button",
      "examples": [
        {
          "title": "Page rhythm",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_stack gap: :section, class: \"w-full max-w-xl\" do %>\n  <%= lc_section title: \"Recent expenses\", actions: capture { lc_button(\"Add expense\", icon: \"plus\", size: :sm) } do %>\n    <%= lc_card do %>\n      <%= lc_inline class: \"flex-nowrap justify-between\" do %>\n        <%= lc_text \"Dinner with friends\" %>\n        <%= lc_text \"¥8,400\", class: \"shrink-0 tabular-nums\" %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_text \"Train tickets\" %>\n    <% end %>\n  <% end %>\n  <%= lc_stack as: :section, gap: :heading do %>\n    <%= lc_section_header do %>\n      <%= lc_stack gap: :tight do %>\n        <%= lc_heading \"Members\" %>\n        <%= lc_text \"Everyone who can see this workspace.\", size: :small, tone: :muted %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_inline do %>\n        <%= lc_avatar \"AK\", class: \"bg-primary\" %>\n        <%= lc_stack gap: :tight do %>\n          <%= lc_text \"Alex Kim\" %>\n          <%= lc_text \"Joined today\", size: :small, tone: :muted %>\n        <% end %>\n      <% end %>\n    <% end %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Responsive containers",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_container do %>\n  <%= lc_stack gap: :section do %>\n    <%= lc_heading \"Plan your next trip\", level: 2, size: :title %>\n    <div class=\"grid min-w-0 gap-8 md:grid-cols-2\">\n      <%= lc_section title: \"Travel details\", level: 3 do %>\n        <%= lc_card do %>\n          <%= lc_stack do %>\n            <%= lc_text \"Kyoto weekend\", size: :body %>\n            <%= lc_text \"Keep shared costs and travel notes together.\", size: :small, tone: :muted %>\n            <%= lc_inline do %>\n              <%= lc_button \"Invite friends\", size: :sm %>\n              <%= lc_button \"View itinerary\", variant: :ghost, size: :sm %>\n            <% end %>\n          <% end %>\n        <% end %>\n      <% end %>\n      <%= lc_section title: \"Shared costs\", level: 3 do %>\n        <%= lc_card do %>\n          <%= lc_text \"No expenses yet\", size: :body %>\n        <% end %>\n      <% end %>\n    </div>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Reading content",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_prose do %>\n  <h2>Make room for the trip</h2>\n  <p>A shared plan is easier to follow when each idea has room to breathe. Keep the essentials close and give a new topic a little more space.</p>\n  <p>Start with <strong>one clear decision</strong>, name the plan <code>kyoto-weekend</code>, then <a href=\"#reading-next\">choose what comes next</a>.</p>\n  <ul>\n    <li>Choose a place to stay.</li>\n    <li>Set aside time for a slow morning.</li>\n    <li>Leave an afternoon open.</li>\n  </ul>\n  <blockquote><p>The best part of a plan is the space it leaves for a surprise.</p></blockquote>\n  <h3 id=\"reading-next\">Ready to begin?</h3>\n  <p>Buttons and other app controls can opt out of reading styles.</p>\n  <div class=\"not-prose mt-5\">\n    <%= lc_button \"Create a plan\" %>\n  </div>\n<% end %>"
        },
        {
          "title": "Hover and press",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_button \"Hover or press\", icon: \"plus\" %>\n<%= lc_button \"Secondary\", variant: :secondary %>\n<%= lc_icon_button \"Add item\", icon: \"plus\" %>"
        },
        {
          "title": "Title and actions",
          "url": "https://ui.lostcoords.com/components/alert.html",
          "erb": "<%= lc_alert \"Your card was declined. Update the payment method to keep the workspace active.\", title: \"Payment failed\" do |alert| %>\n  <%= alert.actions do %>\n    <%= lc_button \"Update payment\", size: :sm %>\n    <%= lc_button \"Dismiss\", variant: :ghost, size: :sm %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Default",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_button \"Create project\" %>"
        },
        {
          "title": "Variants",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_button \"Primary\" %>\n<%= lc_button \"Secondary\", variant: :secondary %>\n<%= lc_button \"Outline\", variant: :outline %>\n<%= lc_button \"Ghost\", variant: :ghost %>\n<%= lc_button \"Glass\", variant: :glass %>\n<%= lc_button \"Delete\", variant: :destructive %>"
        },
        {
          "title": "Destructive tone",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_button \"Revoke\", variant: :ghost, tone: :destructive %>\n<%= lc_button \"Sign out\", variant: :outline, tone: :destructive %>\n<%= lc_button \"Remove member\", variant: :secondary, tone: :destructive %>\n<%= lc_button \"Delete group\", tone: :destructive %>"
        },
        {
          "title": "Glass over content",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<div class=\"grid w-full gap-4\">\n  <p class=\"text-sm text-muted-foreground\">Use glass for controls floating over content. Its translucency is subtle on a flat background.</p>\n  <div class=\"relative isolate h-64 overflow-hidden rounded-3xl bg-linear-to-br from-success/40 via-warning/40 to-primary/30\">\n    <div class=\"absolute inset-0 grid grid-cols-3 gap-4 p-6\" aria-hidden=\"true\">\n      <div class=\"rounded-3xl bg-background/40\"></div>\n      <div class=\"translate-y-12 rounded-full bg-success/40\"></div>\n      <div class=\"-translate-y-8 rounded-3xl bg-warning/50\"></div>\n    </div>\n    <div class=\"absolute inset-x-6 bottom-6 flex flex-wrap justify-center gap-3\">\n      <%= lc_button \"Save\", variant: :glass, icon: \"bookmark\" %>\n      <%= lc_button \"Share\", variant: :glass, icon: \"arrow-up-tray\" %>\n    </div>\n  </div>\n</div>"
        },
        {
          "title": "Sizes",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_button \"Small\", size: :sm %>\n<%= lc_button \"Default\" %>\n<%= lc_button \"Large\", size: :lg %>"
        },
        {
          "title": "With an icon",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_button \"Create project\", icon: \"plus\" %>\n<%= lc_button \"Continue\", icon: \"arrow-right\", icon_position: :end, variant: :secondary %>"
        },
        {
          "title": "Custom icons and content",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_button variant: :secondary do %>\n  <%= lc_icon \"arrow-down-tray\", options: {\n    \"aria-hidden\": true,\n    \"data-icon\": \"inline-start\"\n  } %>\n  Download report\n<% end %>\n\n<%= lc_button disabled: true, aria: { busy: true } do %>\n  <%= lc_spinner size: :sm, label: nil,\n      data: { icon: \"inline-start\" } %>\n  Loading report…\n<% end %>"
        },
        {
          "title": "Loading",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_button disabled: true, aria: { busy: true } do %>\n  <%= lc_spinner size: :sm, label: nil, data: { icon: \"inline-start\" } %>\n  Saving…\n<% end %>"
        },
        {
          "title": "Disabled",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_button \"Unavailable\", disabled: true %>"
        },
        {
          "title": "Expanded swap and decorative span",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_inline do %>\n  <%= lc_button \"New entry\", icon: \"plus\", expanded_icon: \"x-mark\", size: :sm, aria: { expanded: false } %>\n  <%= lc_button \"New entry\", icon: \"plus\", expanded_icon: \"x-mark\", size: :sm, aria: { expanded: true } %>\n  <label class=\"grid place-items-center gap-related rounded-3xl bg-muted p-inset text-small text-muted-foreground\">\n    Drop a receipt here\n    <%= lc_button \"Browse files\", as: :span, size: :sm, aria: { hidden: true } %>\n    <input type=\"file\" class=\"sr-only\">\n  </label>\n<% end %>"
        },
        {
          "title": "Default",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card class: \"w-full\" do |card| %>\n  <%= card.header title: \"Project notes\", description: \"Keep related content together.\" do %>\n    <%= lc_button \"Edit\", variant: :secondary, size: :sm %>\n  <% end %>\n  <%= card.content do %>\n    <%= lc_text \"Notes, links and files for the launch.\" %>\n  <% end %>\n  <%= card.footer do %>\n    <%= lc_button \"Archive\", variant: :ghost %>\n    <%= lc_button \"Share\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Custom spacing",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card class: \"w-full [--lc-inset:var(--spacing-section)]\" do |card| %>\n  <%= card.header title: \"Welcome\", description: \"Padding and the gaps between parts both follow --lc-inset.\" %>\n  <%= card.footer do %>\n    <%= lc_button \"Get started\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "With form controls",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card class: \"@container w-full\" do |card| %>\n  <%= card.header title: \"Project settings\" %>\n  <%= card.content do %>\n    <%= lc_field label: \"Project name\", id: \"my-component-name\" do |field| %>\n      <%= lc_input name: \"project[name]\", value: \"Design system\", **field %>\n    <% end %>\n  <% end %>\n  <%= card.footer do %>\n    <%= lc_button \"Save changes\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Modal",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<%= lc_dialog id: \"my-component-dialog\", title: \"Create project\", description: \"Projects group pages and members.\", trigger: \"New project\" do |dialog| %>\n  <form method=\"dialog\" class=\"flex flex-col gap-inset\">\n    <%= lc_field label: \"Project name\", id: \"my-component-dialog-name\" do |field| %>\n      <%= lc_input name: \"project[name]\", **field %>\n    <% end %>\n    <%= dialog.footer do %>\n      <%= dialog.close %>\n      <%= lc_button \"Create project\", type: :submit %>\n    <% end %>\n  </form>\n<% end %>"
        },
        {
          "title": "Compact dialog",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<%= lc_dialog id: \"my-component-context\", title: \"Quick details\", trigger: \"Open compact dialog\", kind: :context do %>\n  <p class=\"text-sm text-muted-foreground\">A compact dialog for a short, focused task.</p>\n<% end %>\n\n<%= lc_dialog id: \"my-component-invite\", title: \"Invite people\", kind: :context do |dialog| %>\n  <% dialog.trigger { |attrs| lc_button \"Invite with your own trigger\", variant: :ghost, **attrs } %>\n  <div class=\"flex flex-col gap-content\" data-dialog-size=\"md\">\n    <p class=\"text-sm text-muted-foreground\">This step marks itself data-dialog-size=\"md\", so the compact dialog widens to 32rem while it shows.</p>\n  </div>\n<% end %>"
        },
        {
          "title": "Opened by your controller",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<div data-controller=\"lc-dialog\">\n  <%= lc_button \"Show members\", variant: :secondary, aria: { haspopup: \"dialog\", controls: \"my-component-members\" }, data: { action: \"lc-dialog#open\" } %>\n  <%= lc_dialog id: \"my-component-members\", title: \"Members\", trigger: false, size: :lg, detents: \"large\", data: { lc_dialog_target: \"dialog\" } do |dialog| %>\n    <%= dialog.actions do %>\n      <%= lc_button \"Invite\", size: :sm %>\n    <% end %>\n    <% %w[Aiko Ben Chiara Dmitri Emi Farah Goro Hana].each do |name| %>\n      <p class=\"<%= lc_text_class %>\"><%= name %></p>\n    <% end %>\n  <% end %>\n</div>"
        },
        {
          "title": "Empty state",
          "url": "https://ui.lostcoords.com/components/empty_state.html",
          "erb": "<%= lc_empty_state class: \"w-full\" do %>\n  <%= lc_icon_badge shape: :circle, tone: :primary, icon: \"folder-plus\", size: :lg%>\n  <%= lc_stack gap: :tight, class: \"max-w-xs\" do %>\n    <%= lc_heading \"No projects yet\", level: 3, size: :subheading %>\n    <%= lc_text \"Create a project to get started.\", size: :small, tone: :muted %>\n  <% end %>\n  <%= lc_button \"Create project\" %>\n<% end %>"
        },
        {
          "title": "Form actions",
          "url": "https://ui.lostcoords.com/components/field.html",
          "erb": "<%= lc_inline class: \"justify-end\" do %>\n  <%= lc_button \"Cancel\", variant: :ghost %>\n  <%= lc_button \"Save changes\", type: :submit %>\n<% end %>"
        },
        {
          "title": "Settings",
          "url": "https://ui.lostcoords.com/components/list_group.html",
          "erb": "<%= lc_list_section \"Sign-in methods\", id: \"my-component\", footnote: \"Keep at least one way to sign in.\", class: \"w-full max-w-md\" do %>\n  <%= lc_list_group do %>\n    <%= lc_list_row \"Email\", subtitle: \"ada@example.com\", icon: \"envelope\" do %>\n      <%= lc_button \"Change\", variant: :secondary, size: :sm %>\n    <% end %>\n    <%= lc_list_row \"Passkey\", subtitle: \"Not set up\", icon: \"key\" do %>\n      <%= lc_button \"Add\", variant: :secondary, size: :sm %>\n    <% end %>\n    <%= lc_list_row \"Sign-in alerts\", subtitle: \"Email me when a new device signs in\", icon: \"bell\", tag: :label, class: \"cursor-pointer\" do %>\n      <input type=\"checkbox\" role=\"switch\" name=\"alerts\" class=\"<%= lc_switch_class %>\" checked>\n    <% end %>\n    <%= lc_list_row \"Recovery codes\", icon: \"document-text\", href: \"#recovery-codes\" do %>\n      <%= lc_icon \"chevron-right\", variant: :mini, options: { class: \"size-5 text-muted-foreground rtl:rotate-180\", \"aria-hidden\": true } %>\n    <% end %>\n    <%= lc_list_row padded: false do %>\n      <%= lc_list_item \"Delete account\", icon: \"trash\", tag: :button, type: \"button\", class: \"w-full cursor-pointer rounded-[inherit] text-destructive transition-colors hover:bg-accent\" %>\n    <% end %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Over dialogs and sticky headers",
          "url": "https://ui.lostcoords.com/components/toast.html",
          "erb": "<%# In an app, render the region once in the layout and append toasts with turbo_stream.append. %>\n<%= lc_toast_region id: \"my-component-toasts\" %>\n<template id=\"my-component-toast\"><%= lc_toast \"Project saved.\" %></template>\n<%= lc_button \"Save project\", data: { controller: \"toast-demo\", action: \"toast-demo#show\", toast_demo_template_value: \"my-component-toast\", toast_demo_region_value: \"my-component-toasts\" } %>"
        },
        {
          "title": "Centred, at the top on phones",
          "url": "https://ui.lostcoords.com/components/toast.html",
          "erb": "<%# Centred at the bottom, and at the top on phones, clear of a bottom tab bar. %>\n<%= lc_toast_region id: \"my-component-toasts\", placement: :bottom_center, mobile_placement: :top_center %>\n<template id=\"my-component-toast\"><%= lc_toast \"Expense added.\" %></template>\n<%= lc_button \"Add expense\", data: { controller: \"toast-demo\", action: \"toast-demo#show\", toast_demo_template_value: \"my-component-toast\", toast_demo_region_value: \"my-component-toasts\" } %>"
        },
        {
          "title": "Form values, native radios and reset",
          "url": "https://ui.lostcoords.com/components/toggle_group.html",
          "erb": "<form class=\"flex flex-col items-center gap-4\">\n  <%= lc_toggle_group label: \"Billing\", name: \"billing\", value: \"monthly\" do %>\n    <%= lc_toggle_group_item \"Monthly\", value: \"monthly\" %>\n    <%= lc_toggle_group_item \"Annual\", value: \"annual\" %>\n    <%= lc_toggle_group_item \"Custom\", value: \"custom\", disabled: true %>\n  <% end %>\n  <%= lc_inline role: \"radiogroup\", aria: { label: \"Heard about us\" } do %>\n    <%= lc_toggle \"A friend\", name: \"source\", value: \"friend\", size: :sm %>\n    <%= lc_toggle \"Search\", name: \"source\", value: \"search\", size: :sm %>\n  <% end %>\n  <%= lc_button \"Reset\", type: :reset, variant: :ghost, size: :sm %>\n</form>"
        },
        {
          "title": "Tooltips",
          "url": "https://ui.lostcoords.com/components/tooltip.html",
          "erb": "<%= lc_inline gap: :content do %>\n  <%= lc_tooltip \"Copy a link to this page\", id: \"my-component-copy-tip\" do |tip| %>\n    <%= lc_icon_button \"Copy link\", icon: \"link\", **tip %>\n  <% end %>\n  <%= lc_tooltip \"Only owners can archive\", id: \"my-component-archive-tip\", side: :bottom do |tip| %>\n    <%= lc_button \"Archive\", variant: :secondary, **tip %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_button_link_to",
      "signature": "lc_button_link_to(content = nil, url = nil, variant: :primary, tone: :default, size: :md, block: false, icon: nil, icon_position: :start, **attributes, &content_block)",
      "url": "https://ui.lostcoords.com/components/button.html#lc_button_link_to",
      "examples": [
        {
          "title": "As a link",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_button_link_to \"Browse components\", \"/components/button.html\", variant: :secondary %>"
        }
      ]
    },
    {
      "name": "lc_button_to",
      "signature": "lc_button_to(content = nil, url = nil, variant: :primary, tone: :default, size: :md, block: false, icon: nil, icon_position: :start, **attributes, &content_block)",
      "url": "https://ui.lostcoords.com/components/button.html#lc_button_to",
      "examples": [
        {
          "title": "HTTP actions",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_button_to \"Archive project\", \"/projects/42\", method: :delete, variant: :destructive, form: { data: { turbo_confirm: \"Archive this project?\" } } %>"
        },
        {
          "title": "Turbo confirm",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<%# In the layout, once. %>\n<%= lc_confirm_sheet %>\n\n<%= lc_button_to \"Delete project\", \"/projects/42\", method: :delete, variant: :destructive, form: { data: { turbo_confirm: \"Delete this project?\", turbo_confirm_description: \"Its pages and files are deleted for everyone.\", controller: \"confirm-demo\", action: \"confirm-demo#submit\" } } %>\n<%= lc_button_to \"Archive\", \"/projects/42/archival\", form: { data: { turbo_confirm: \"Archive this project?\", turbo_confirm_accept: \"Archive project\", controller: \"confirm-demo\", action: \"confirm-demo#submit\" } } %>\n<%= lc_menu id: \"my-component-menu\", label: \"Membership\" do %>\n  <%= lc_menu_option \"Leave project\", href: \"/projects/42/membership\", method: :delete, tone: :destructive, form: { data: { turbo_confirm: \"Leave this project?\", turbo_confirm_accept: \"Leave\", controller: \"confirm-demo\", action: \"confirm-demo#submit\" } } %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_select_trigger",
      "signature": "lc_select_trigger(label = nil, size: :md, block: false, **attributes, &content)",
      "url": "https://ui.lostcoords.com/components/button.html#lc_select_trigger",
      "examples": [
        {
          "title": "Select trigger",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_menu id: \"my-component-menu\", label: \"Member\", align: :start do |menu| %>\n  <% menu.trigger(class: \"min-w-44\") { |attrs| lc_select_trigger \"All members\", **attrs } %>\n  <%= lc_menu_option \"All members\", checked: true %>\n  <%= lc_menu_option \"Alex\", checked: false %>\n  <%= lc_menu_option \"Sam\", checked: false %>\n<% end %>"
        },
        {
          "title": "Icon trigger, hints, choices and groups",
          "url": "https://ui.lostcoords.com/components/menu.html",
          "erb": "<div class=\"flex flex-wrap items-center gap-content\">\n  <%= lc_menu id: \"my-component-row-menu\", label: \"Actions for Alex\", trigger: :icon do %>\n    <%= lc_menu_option \"Rename\", icon: \"pencil\" %>\n    <%= lc_menu_option \"Move up\", icon: \"arrow-up\", hint: \"Second in the list\" %>\n    <%= lc_menu_option \"Copy link\" %>\n    <%= lc_menu_option \"Pinned\", icon: \"star\", checkbox: true %>\n    <%= lc_menu_option \"Remove\", icon: \"trash\", href: \"/components/menu.html\", method: :delete, tone: :destructive %>\n  <% end %>\n  <%= lc_menu id: \"my-component-currency-menu\", label: \"Currency\", align: :start do |menu| %>\n    <% menu.trigger { |attrs| lc_select_trigger \"Euro\", **attrs } %>\n    <%= lc_menu_group \"Suggested\", id: \"my-component-suggested\" do %>\n      <%= lc_menu_option \"Euro\", hint: \"EUR\", leading: tag.span(\"€\"), checked: true %>\n      <%= lc_menu_option \"Japanese yen\", hint: \"JPY\", leading: tag.span(\"¥\"), checked: false %>\n    <% end %>\n    <%= lc_menu_group \"Other\", id: \"my-component-other\" do %>\n      <%= lc_menu_option \"US dollar\", hint: \"USD\", leading: tag.span(\"$\"), checked: false %>\n    <% end %>\n  <% end %>\n</div>"
        }
      ]
    },
    {
      "name": "lc_split_button",
      "signature": "lc_split_button(label, id:, href: nil, menu_label: lc_t(\"lostcoords.ui.menu.label\"), variant: :primary, tone: :default, size: :md,\n                        icon: nil, icon_position: :start, block: false, align: :end, action: {}, toggle: {}, menu: {}, **attributes, &items)",
      "url": "https://ui.lostcoords.com/components/button.html#lc_split_button",
      "examples": [
        {
          "title": "Split button",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_split_button \"Add expense\", id: \"my-component-menu\", icon: \"plus\", menu_label: \"More ways to add\" do %>\n  <%= lc_menu_option \"Import a CSV\", icon: \"arrow-down-tray\" %>\n  <%= lc_menu_option \"Scan a receipt\", icon: \"camera\" %>\n<% end %>"
        },
        {
          "title": "Split button variants and sizes",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<% [ [ :secondary, :sm ], [ :outline, :md ], [ :ghost, :lg ] ].each do |variant, size| %>\n  <%= lc_split_button \"Export\", id: \"my-component-#{variant}\", variant: variant, size: size, menu_label: \"Export options\" do %>\n    <%= lc_menu_option \"Export as CSV\" %>\n    <%= lc_menu_option \"Export as PDF\" %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_icon_button",
      "signature": "lc_icon_button(label, icon: nil, size: :md, shape: :circle, variant: :ghost, tone: :default, **attributes, &content)",
      "url": "https://ui.lostcoords.com/components/button.html#lc_icon_button",
      "examples": [
        {
          "title": "Hover and press",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_button \"Hover or press\", icon: \"plus\" %>\n<%= lc_button \"Secondary\", variant: :secondary %>\n<%= lc_icon_button \"Add item\", icon: \"plus\" %>"
        },
        {
          "title": "Icon buttons",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_icon_button \"Add project\", icon: \"plus\" %>\n<%= lc_icon_button \"Settings\", icon: \"cog-6-tooth\", shape: :square %>\n<%= lc_icon_button \"Search\", icon: \"magnifying-glass\", size: :sm %>\n<%= lc_icon_button \"Close\", icon: \"x-mark\", size: :lg %>\n<%= lc_icon_button_link_to \"Back to buttons\", \"/components/button.html\", icon: \"chevron-left\", shape: :square %>\n<%= lc_icon_button \"Account\", size: :lg do %><span class=\"<%= lc_avatar_class %>\">AL</span><% end %>\n<%= lc_icon_button_to \"Reload buttons\", \"/components/button.html\", icon: \"arrow-path\", method: :get, form: { class: \"contents\" } %>\n<%= lc_icon_button \"Edit\", icon: \"pencil\", variant: :secondary %>\n<%= lc_icon_button \"Delete file\", icon: \"trash\", variant: :outline, tone: :destructive %>"
        },
        {
          "title": "Tooltips",
          "url": "https://ui.lostcoords.com/components/tooltip.html",
          "erb": "<%= lc_inline gap: :content do %>\n  <%= lc_tooltip \"Copy a link to this page\", id: \"my-component-copy-tip\" do |tip| %>\n    <%= lc_icon_button \"Copy link\", icon: \"link\", **tip %>\n  <% end %>\n  <%= lc_tooltip \"Only owners can archive\", id: \"my-component-archive-tip\", side: :bottom do |tip| %>\n    <%= lc_button \"Archive\", variant: :secondary, **tip %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_icon_button_link_to",
      "signature": "lc_icon_button_link_to(label, url, icon: nil, size: :md, shape: :circle, variant: :ghost, tone: :default, **attributes, &content)",
      "url": "https://ui.lostcoords.com/components/button.html#lc_icon_button_link_to",
      "examples": [
        {
          "title": "Icon buttons",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_icon_button \"Add project\", icon: \"plus\" %>\n<%= lc_icon_button \"Settings\", icon: \"cog-6-tooth\", shape: :square %>\n<%= lc_icon_button \"Search\", icon: \"magnifying-glass\", size: :sm %>\n<%= lc_icon_button \"Close\", icon: \"x-mark\", size: :lg %>\n<%= lc_icon_button_link_to \"Back to buttons\", \"/components/button.html\", icon: \"chevron-left\", shape: :square %>\n<%= lc_icon_button \"Account\", size: :lg do %><span class=\"<%= lc_avatar_class %>\">AL</span><% end %>\n<%= lc_icon_button_to \"Reload buttons\", \"/components/button.html\", icon: \"arrow-path\", method: :get, form: { class: \"contents\" } %>\n<%= lc_icon_button \"Edit\", icon: \"pencil\", variant: :secondary %>\n<%= lc_icon_button \"Delete file\", icon: \"trash\", variant: :outline, tone: :destructive %>"
        }
      ]
    },
    {
      "name": "lc_icon_button_to",
      "signature": "lc_icon_button_to(label, url, icon: nil, size: :md, shape: :circle, variant: :ghost, tone: :default, **attributes, &content)",
      "url": "https://ui.lostcoords.com/components/button.html#lc_icon_button_to",
      "examples": [
        {
          "title": "Icon buttons",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_icon_button \"Add project\", icon: \"plus\" %>\n<%= lc_icon_button \"Settings\", icon: \"cog-6-tooth\", shape: :square %>\n<%= lc_icon_button \"Search\", icon: \"magnifying-glass\", size: :sm %>\n<%= lc_icon_button \"Close\", icon: \"x-mark\", size: :lg %>\n<%= lc_icon_button_link_to \"Back to buttons\", \"/components/button.html\", icon: \"chevron-left\", shape: :square %>\n<%= lc_icon_button \"Account\", size: :lg do %><span class=\"<%= lc_avatar_class %>\">AL</span><% end %>\n<%= lc_icon_button_to \"Reload buttons\", \"/components/button.html\", icon: \"arrow-path\", method: :get, form: { class: \"contents\" } %>\n<%= lc_icon_button \"Edit\", icon: \"pencil\", variant: :secondary %>\n<%= lc_icon_button \"Delete file\", icon: \"trash\", variant: :outline, tone: :destructive %>"
        }
      ]
    },
    {
      "name": "lc_badge",
      "signature": "lc_badge(content = nil, tone: :neutral, shape: :rounded, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/badge.html#lc_badge",
      "examples": [
        {
          "title": "Tones",
          "url": "https://ui.lostcoords.com/components/badge.html",
          "erb": "<%= lc_badge \"Draft\" %>\n<%= lc_badge \"Published\", tone: :primary %>\n<%= lc_badge \"Complete\", tone: :success %>\n<%= lc_badge \"Needs attention\", tone: :warning %>\n<%= lc_badge \"Failed\", tone: :destructive %>"
        },
        {
          "title": "Pill status",
          "url": "https://ui.lostcoords.com/components/badge.html",
          "erb": "<%= lc_badge \"On track\", tone: :primary, shape: :pill %>\n<%= lc_badge \"Pending\", shape: :pill %>\n<%= lc_badge \"3 errors\", tone: :destructive, shape: :pill %>"
        },
        {
          "title": "Details",
          "url": "https://ui.lostcoords.com/components/description_list.html",
          "erb": "<%= lc_card class: \"w-full\" do |card| %>\n  <%= card.header title: \"Workspace\" %>\n  <%= lc_description_list do |list| %>\n    <%= list.item \"Owner\", \"Ada Baker\" %>\n    <%= list.item \"Plan\" do %>\n      <%= lc_badge \"Team\", tone: :primary %>\n    <% end %>\n    <%= list.item \"Created\", \"March 4, 2026\" %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_icon_badge",
      "signature": "lc_icon_badge(content = nil, icon: nil, size: :md, shape: :square, tone: :neutral, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/icon_badge.html#lc_icon_badge",
      "examples": [
        {
          "title": "Empty state",
          "url": "https://ui.lostcoords.com/components/empty_state.html",
          "erb": "<%= lc_empty_state class: \"w-full\" do %>\n  <%= lc_icon_badge shape: :circle, tone: :primary, icon: \"folder-plus\", size: :lg%>\n  <%= lc_stack gap: :tight, class: \"max-w-xs\" do %>\n    <%= lc_heading \"No projects yet\", level: 3, size: :subheading %>\n    <%= lc_text \"Create a project to get started.\", size: :small, tone: :muted %>\n  <% end %>\n  <%= lc_button \"Create project\" %>\n<% end %>"
        },
        {
          "title": "Shapes and sizes",
          "url": "https://ui.lostcoords.com/components/icon_badge.html",
          "erb": "<%= lc_icon_badge icon: \"folder\", size: :sm %>\n<%= lc_icon_badge icon: \"folder\" %>\n<%= lc_icon_badge icon: \"document-text\", size: :lg %>\n<%= lc_icon_badge icon: \"document-text\", size: :xl %>\n<%= lc_icon_badge \"🍜\", aria: { hidden: true } %>\n<%= lc_icon_badge \"🍜\", size: 7, shape: :plain, aria: { hidden: true } %>"
        },
        {
          "title": "Round icons and tones",
          "url": "https://ui.lostcoords.com/components/icon_badge.html",
          "erb": "<%= lc_icon_badge shape: :circle, size: :sm, icon: \"sparkles\", tone: :primary%>\n<%= lc_icon_badge shape: :circle, icon: \"user-plus\", tone: :neutral, size: :lg%>"
        }
      ]
    },
    {
      "name": "lc_avatar",
      "signature": "lc_avatar(content = nil, src: nil, alt: nil, size: :md, ink: false, linked: false, as: :span, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/avatar.html#lc_avatar",
      "examples": [
        {
          "title": "Page rhythm",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_stack gap: :section, class: \"w-full max-w-xl\" do %>\n  <%= lc_section title: \"Recent expenses\", actions: capture { lc_button(\"Add expense\", icon: \"plus\", size: :sm) } do %>\n    <%= lc_card do %>\n      <%= lc_inline class: \"flex-nowrap justify-between\" do %>\n        <%= lc_text \"Dinner with friends\" %>\n        <%= lc_text \"¥8,400\", class: \"shrink-0 tabular-nums\" %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_text \"Train tickets\" %>\n    <% end %>\n  <% end %>\n  <%= lc_stack as: :section, gap: :heading do %>\n    <%= lc_section_header do %>\n      <%= lc_stack gap: :tight do %>\n        <%= lc_heading \"Members\" %>\n        <%= lc_text \"Everyone who can see this workspace.\", size: :small, tone: :muted %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_inline do %>\n        <%= lc_avatar \"AK\", class: \"bg-primary\" %>\n        <%= lc_stack gap: :tight do %>\n          <%= lc_text \"Alex Kim\" %>\n          <%= lc_text \"Joined today\", size: :small, tone: :muted %>\n        <% end %>\n      <% end %>\n    <% end %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Initials and images",
          "url": "https://ui.lostcoords.com/components/avatar.html",
          "erb": "<%= lc_avatar \"AL\", ink: true, class: \"bg-accent\", aria: { label: \"Alex Lee\" } %>\n<%= lc_avatar \"SK\", size: :lg, ink: true, class: \"bg-success-soft\", aria: { label: \"Sam Kim\" } %>\n<%= lc_avatar \"JR\", ink: true, class: \"bg-warning-soft\", aria: { label: \"Jamie Rivera\" } %>\n<%= lc_avatar \"MK\", ink: true, class: \"bg-destructive-soft\", aria: { label: \"Morgan Kim\" } %>"
        },
        {
          "title": "Sizes",
          "url": "https://ui.lostcoords.com/components/avatar.html",
          "erb": "<% [ :xs, :sm, 7, :md, 11, :lg, :xl, :xxl ].each do |size| %>\n  <%= lc_avatar \"AL\", size: size, ink: true, class: \"bg-accent\", aria: { label: \"Alex Lee (#{size})\" } %>\n<% end %>"
        },
        {
          "title": "Avatar groups",
          "url": "https://ui.lostcoords.com/components/avatar.html",
          "erb": "<%= lc_avatar_stack aria: { label: \"Alex, Sam and Jamie\" } do %>\n  <%= lc_avatar \"AL\", ink: true, class: \"bg-success-soft\" %>\n  <%= lc_avatar \"SK\", ink: true, class: \"bg-warning-soft\" %>\n  <%= lc_avatar \"JR\", ink: true, class: \"bg-destructive-soft\" %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_avatar_stack",
      "signature": "lc_avatar_stack(compact: false, row: {}, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/avatar.html#lc_avatar_stack",
      "examples": [
        {
          "title": "Avatar groups",
          "url": "https://ui.lostcoords.com/components/avatar.html",
          "erb": "<%= lc_avatar_stack aria: { label: \"Alex, Sam and Jamie\" } do %>\n  <%= lc_avatar \"AL\", ink: true, class: \"bg-success-soft\" %>\n  <%= lc_avatar \"SK\", ink: true, class: \"bg-warning-soft\" %>\n  <%= lc_avatar \"JR\", ink: true, class: \"bg-destructive-soft\" %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_card",
      "signature": "lc_card(href: nil, interactive: false, padding: :md, as: :div, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/card.html#lc_card",
      "parts": [
        "card.header(title: nil, description: nil, level: 3, **attributes, &actions)",
        "card.title(content = nil, level: 3, **attributes, &block)",
        "card.description(content = nil, **attributes, &block)",
        "card.content(**attributes, &block)",
        "card.footer(**attributes, &block)"
      ],
      "examples": [
        {
          "title": "Page rhythm",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_stack gap: :section, class: \"w-full max-w-xl\" do %>\n  <%= lc_section title: \"Recent expenses\", actions: capture { lc_button(\"Add expense\", icon: \"plus\", size: :sm) } do %>\n    <%= lc_card do %>\n      <%= lc_inline class: \"flex-nowrap justify-between\" do %>\n        <%= lc_text \"Dinner with friends\" %>\n        <%= lc_text \"¥8,400\", class: \"shrink-0 tabular-nums\" %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_text \"Train tickets\" %>\n    <% end %>\n  <% end %>\n  <%= lc_stack as: :section, gap: :heading do %>\n    <%= lc_section_header do %>\n      <%= lc_stack gap: :tight do %>\n        <%= lc_heading \"Members\" %>\n        <%= lc_text \"Everyone who can see this workspace.\", size: :small, tone: :muted %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_inline do %>\n        <%= lc_avatar \"AK\", class: \"bg-primary\" %>\n        <%= lc_stack gap: :tight do %>\n          <%= lc_text \"Alex Kim\" %>\n          <%= lc_text \"Joined today\", size: :small, tone: :muted %>\n        <% end %>\n      <% end %>\n    <% end %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Responsive containers",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_container do %>\n  <%= lc_stack gap: :section do %>\n    <%= lc_heading \"Plan your next trip\", level: 2, size: :title %>\n    <div class=\"grid min-w-0 gap-8 md:grid-cols-2\">\n      <%= lc_section title: \"Travel details\", level: 3 do %>\n        <%= lc_card do %>\n          <%= lc_stack do %>\n            <%= lc_text \"Kyoto weekend\", size: :body %>\n            <%= lc_text \"Keep shared costs and travel notes together.\", size: :small, tone: :muted %>\n            <%= lc_inline do %>\n              <%= lc_button \"Invite friends\", size: :sm %>\n              <%= lc_button \"View itinerary\", variant: :ghost, size: :sm %>\n            <% end %>\n          <% end %>\n        <% end %>\n      <% end %>\n      <%= lc_section title: \"Shared costs\", level: 3 do %>\n        <%= lc_card do %>\n          <%= lc_text \"No expenses yet\", size: :body %>\n        <% end %>\n      <% end %>\n    </div>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Default",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card class: \"w-full\" do |card| %>\n  <%= card.header title: \"Project notes\", description: \"Keep related content together.\" do %>\n    <%= lc_button \"Edit\", variant: :secondary, size: :sm %>\n  <% end %>\n  <%= card.content do %>\n    <%= lc_text \"Notes, links and files for the launch.\" %>\n  <% end %>\n  <%= card.footer do %>\n    <%= lc_button \"Archive\", variant: :ghost %>\n    <%= lc_button \"Share\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Compact",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card padding: :sm, class: \"w-full\" do |card| %>\n  <%= card.header title: \"Compact card\", description: \"Padding and gaps tighten together.\" %>\n  <%= lc_text \"A compact summary.\", size: :small %>\n<% end %>"
        },
        {
          "title": "Linked card",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card href: \"/components/card.html\", class: \"w-full\" do |card| %>\n  <%= card.header title: \"Design system\", description: \"Open the project.\" %>\n<% end %>"
        },
        {
          "title": "Custom spacing",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card class: \"w-full [--lc-inset:var(--spacing-section)]\" do |card| %>\n  <%= card.header title: \"Welcome\", description: \"Padding and the gaps between parts both follow --lc-inset.\" %>\n  <%= card.footer do %>\n    <%= lc_button \"Get started\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Edge-to-edge content",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card padding: :none, class: \"w-full\" do %>\n  <ul class=\"m-0 list-none divide-y divide-border p-0\">\n    <% [ [ \"Design system\", \"Active\" ], [ \"Marketing site\", \"Draft\" ] ].each do |name, status| %>\n      <li class=\"flex items-center justify-between gap-content p-inset\">\n        <%= lc_text name %>\n        <%= lc_text status, size: :small, tone: :muted %>\n      </li>\n    <% end %>\n  </ul>\n<% end %>"
        },
        {
          "title": "With form controls",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card class: \"@container w-full\" do |card| %>\n  <%= card.header title: \"Project settings\" %>\n  <%= card.content do %>\n    <%= lc_field label: \"Project name\", id: \"my-component-name\" do |field| %>\n      <%= lc_input name: \"project[name]\", value: \"Design system\", **field %>\n    <% end %>\n  <% end %>\n  <%= card.footer do %>\n    <%= lc_button \"Save changes\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Validation feedback",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card class: \"w-full\" do |card| %>\n  <%= card.content do %>\n    <%= lc_alert \"Choose a unique project name.\", tone: :destructive %>\n    <%= lc_field label: \"Project name\", id: \"my-component-name\", error: \"This name is already taken.\" do |field| %>\n      <%= lc_input name: \"project[name]\", value: \"Design system\", **field %>\n    <% end %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Details",
          "url": "https://ui.lostcoords.com/components/description_list.html",
          "erb": "<%= lc_card class: \"w-full\" do |card| %>\n  <%= card.header title: \"Workspace\" %>\n  <%= lc_description_list do |list| %>\n    <%= list.item \"Owner\", \"Ada Baker\" %>\n    <%= list.item \"Plan\" do %>\n      <%= lc_badge \"Team\", tone: :primary %>\n    <% end %>\n    <%= list.item \"Created\", \"March 4, 2026\" %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_empty_state",
      "signature": "lc_empty_state(**attributes, &block)",
      "url": "https://ui.lostcoords.com/components/empty_state.html#lc_empty_state",
      "examples": [
        {
          "title": "Empty state",
          "url": "https://ui.lostcoords.com/components/empty_state.html",
          "erb": "<%= lc_empty_state class: \"w-full\" do %>\n  <%= lc_icon_badge shape: :circle, tone: :primary, icon: \"folder-plus\", size: :lg%>\n  <%= lc_stack gap: :tight, class: \"max-w-xs\" do %>\n    <%= lc_heading \"No projects yet\", level: 3, size: :subheading %>\n    <%= lc_text \"Create a project to get started.\", size: :small, tone: :muted %>\n  <% end %>\n  <%= lc_button \"Create project\" %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_spinner",
      "signature": "lc_spinner(size: :md, label: lc_t(\"lostcoords.ui.spinner.label\"), **attributes)",
      "url": "https://ui.lostcoords.com/components/spinner.html#lc_spinner",
      "examples": [
        {
          "title": "Custom icons and content",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_button variant: :secondary do %>\n  <%= lc_icon \"arrow-down-tray\", options: {\n    \"aria-hidden\": true,\n    \"data-icon\": \"inline-start\"\n  } %>\n  Download report\n<% end %>\n\n<%= lc_button disabled: true, aria: { busy: true } do %>\n  <%= lc_spinner size: :sm, label: nil,\n      data: { icon: \"inline-start\" } %>\n  Loading report…\n<% end %>"
        },
        {
          "title": "Loading",
          "url": "https://ui.lostcoords.com/components/button.html",
          "erb": "<%= lc_button disabled: true, aria: { busy: true } do %>\n  <%= lc_spinner size: :sm, label: nil, data: { icon: \"inline-start\" } %>\n  Saving…\n<% end %>"
        },
        {
          "title": "Sizes and labels",
          "url": "https://ui.lostcoords.com/components/spinner.html",
          "erb": "<%= lc_spinner size: :sm %>\n<%= lc_spinner label: \"Loading projects\" %>\n<%= lc_spinner size: :lg %>"
        }
      ]
    },
    {
      "name": "lc_skeleton",
      "signature": "lc_skeleton(**attributes)",
      "url": "https://ui.lostcoords.com/components/skeleton.html#lc_skeleton",
      "examples": [
        {
          "title": "Placeholder",
          "url": "https://ui.lostcoords.com/components/skeleton.html",
          "erb": "<div class=\"flex w-full flex-col gap-3\" aria-label=\"Loading content\" aria-busy=\"true\">\n  <%= lc_skeleton class: \"h-5 w-48\" %>\n  <%= lc_skeleton class: \"h-4 w-full\" %>\n  <%= lc_skeleton class: \"h-4 w-3/4\" %>\n</div>"
        }
      ]
    },
    {
      "name": "lc_alert",
      "signature": "lc_alert(message = nil, title: nil, tone: :destructive, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/alert.html#lc_alert",
      "parts": [
        "alert.actions(**attributes, &block)"
      ],
      "examples": [
        {
          "title": "Error",
          "url": "https://ui.lostcoords.com/components/alert.html",
          "erb": "<%= lc_alert \"That name is already taken.\" %>"
        },
        {
          "title": "Success",
          "url": "https://ui.lostcoords.com/components/alert.html",
          "erb": "<%= lc_alert \"Changes saved.\", tone: :success %>"
        },
        {
          "title": "Title and actions",
          "url": "https://ui.lostcoords.com/components/alert.html",
          "erb": "<%= lc_alert \"Your card was declined. Update the payment method to keep the workspace active.\", title: \"Payment failed\" do |alert| %>\n  <%= alert.actions do %>\n    <%= lc_button \"Update payment\", size: :sm %>\n    <%= lc_button \"Dismiss\", variant: :ghost, size: :sm %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Validation feedback",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card class: \"w-full\" do |card| %>\n  <%= card.content do %>\n    <%= lc_alert \"Choose a unique project name.\", tone: :destructive %>\n    <%= lc_field label: \"Project name\", id: \"my-component-name\", error: \"This name is already taken.\" do |field| %>\n      <%= lc_input name: \"project[name]\", value: \"Design system\", **field %>\n    <% end %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_prose",
      "signature": "lc_prose(**attributes, &block)",
      "url": "https://ui.lostcoords.com/components/foundations.html#lc_prose",
      "examples": [
        {
          "title": "Reading content",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_prose do %>\n  <h2>Make room for the trip</h2>\n  <p>A shared plan is easier to follow when each idea has room to breathe. Keep the essentials close and give a new topic a little more space.</p>\n  <p>Start with <strong>one clear decision</strong>, name the plan <code>kyoto-weekend</code>, then <a href=\"#reading-next\">choose what comes next</a>.</p>\n  <ul>\n    <li>Choose a place to stay.</li>\n    <li>Set aside time for a slow morning.</li>\n    <li>Leave an afternoon open.</li>\n  </ul>\n  <blockquote><p>The best part of a plan is the space it leaves for a surprise.</p></blockquote>\n  <h3 id=\"reading-next\">Ready to begin?</h3>\n  <p>Buttons and other app controls can opt out of reading styles.</p>\n  <div class=\"not-prose mt-5\">\n    <%= lc_button \"Create a plan\" %>\n  </div>\n<% end %>"
        },
        {
          "title": "Japanese reading",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_prose lang: \"ja\" do %>\n  <h2>旅の計画に、少しの余白を。</h2>\n  <p>みんなで予定を考えるときは、大切なことから順番に決めていきましょう。読みやすい行間と段落の間隔が、長い文章をたどる手助けになります。</p>\n  <h3>最初に決めておきたいこと</h3>\n  <ul>\n    <li>集合する場所と時間</li>\n    <li>みんなで分ける費用</li>\n    <li>自由に過ごす時間</li>\n  </ul>\n  <p>予定が変わったら、<a href=\"#reading-japanese-note\">グループにひとこと</a>。少しの共有で、旅がもっと気軽になります。</p>\n  <blockquote id=\"reading-japanese-note\"><p>何もしない時間も、旅の楽しみのひとつです。</p></blockquote>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_search",
      "signature": "lc_search(label:, src: nil, param: \"q\", placeholder: label, trigger: lc_t(\"lostcoords.ui.search.trigger\"), empty: lc_t(\"lostcoords.ui.search.empty\"), prompt: nil,\n      shortcut: \"mod+k\", id: \"lc-search\", **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/search.html#lc_search",
      "examples": [
        {
          "title": "Filtered in the browser",
          "url": "https://ui.lostcoords.com/components/search.html",
          "erb": "<%# Rows rendered in the block are filtered in the browser. Pass src: to have your server answer each query instead. %>\n<%= lc_search label: \"Search the workspace\", placeholder: \"Search projects and people…\", empty: \"Nothing matches %{query}\", id: \"my-component\", shortcut: nil do %>\n  <%= lc_search_group \"Projects\" do %>\n    <%= lc_search_result \"Fieldwork\", \"#fieldwork\", detail: \"A quieter identity for an outdoor journal.\", icon: \"sun\", keywords: \"brand identity\" %>\n    <%= lc_search_result \"Sunday House\", \"#sunday-house\", detail: \"A welcoming home for a neighborhood bakery.\", icon: \"home\", keywords: \"website\" %>\n  <% end %>\n  <%= lc_search_group \"People\" do %>\n    <%= lc_search_result \"Alex Lee\", \"#alex-lee\", detail: \"Designer\", icon: \"user\" %>\n    <%= lc_search_result \"Sam Kim\", \"#sam-kim\", detail: \"Developer\", icon: \"user\" %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_search_group",
      "signature": "lc_search_group(title, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/search.html#lc_search_group",
      "examples": [
        {
          "title": "Filtered in the browser",
          "url": "https://ui.lostcoords.com/components/search.html",
          "erb": "<%# Rows rendered in the block are filtered in the browser. Pass src: to have your server answer each query instead. %>\n<%= lc_search label: \"Search the workspace\", placeholder: \"Search projects and people…\", empty: \"Nothing matches %{query}\", id: \"my-component\", shortcut: nil do %>\n  <%= lc_search_group \"Projects\" do %>\n    <%= lc_search_result \"Fieldwork\", \"#fieldwork\", detail: \"A quieter identity for an outdoor journal.\", icon: \"sun\", keywords: \"brand identity\" %>\n    <%= lc_search_result \"Sunday House\", \"#sunday-house\", detail: \"A welcoming home for a neighborhood bakery.\", icon: \"home\", keywords: \"website\" %>\n  <% end %>\n  <%= lc_search_group \"People\" do %>\n    <%= lc_search_result \"Alex Lee\", \"#alex-lee\", detail: \"Designer\", icon: \"user\" %>\n    <%= lc_search_result \"Sam Kim\", \"#sam-kim\", detail: \"Developer\", icon: \"user\" %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_search_result",
      "signature": "lc_search_result(title, url, detail: nil, icon: nil, keywords: nil, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/search.html#lc_search_result",
      "examples": [
        {
          "title": "Filtered in the browser",
          "url": "https://ui.lostcoords.com/components/search.html",
          "erb": "<%# Rows rendered in the block are filtered in the browser. Pass src: to have your server answer each query instead. %>\n<%= lc_search label: \"Search the workspace\", placeholder: \"Search projects and people…\", empty: \"Nothing matches %{query}\", id: \"my-component\", shortcut: nil do %>\n  <%= lc_search_group \"Projects\" do %>\n    <%= lc_search_result \"Fieldwork\", \"#fieldwork\", detail: \"A quieter identity for an outdoor journal.\", icon: \"sun\", keywords: \"brand identity\" %>\n    <%= lc_search_result \"Sunday House\", \"#sunday-house\", detail: \"A welcoming home for a neighborhood bakery.\", icon: \"home\", keywords: \"website\" %>\n  <% end %>\n  <%= lc_search_group \"People\" do %>\n    <%= lc_search_result \"Alex Lee\", \"#alex-lee\", detail: \"Designer\", icon: \"user\" %>\n    <%= lc_search_result \"Sam Kim\", \"#sam-kim\", detail: \"Developer\", icon: \"user\" %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_sheet",
      "signature": "lc_sheet(tag: :div, anchored: false, detents: \"fit\", handle: false, size: nil, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/dialog.html#lc_sheet",
      "examples": [
        {
          "title": "Popover sheet",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<button type=\"button\" class=\"<%= lc_button_class(variant: :secondary) %>\" popovertarget=\"my-component-filters\">Filters</button>\n<%= lc_sheet id: \"my-component-filters\", popover: \"auto\", role: \"dialog\", aria: { labelledby: \"my-component-filters-title\" },\n      class: lc_glass_class(shape: :picker, extra: \"sm:m-auto sm:w-80 sm:rounded-3xl text-foreground\") do %>\n  <div class=\"grid gap-content p-inset\">\n    <%= lc_heading \"Filters\", id: \"my-component-filters-title\", size: :title %>\n    <p class=\"text-sm text-muted-foreground\">A popover on desktop, a sheet you can swipe away on phones.</p>\n    <button type=\"button\" class=\"<%= lc_button_class(block: true) %>\" popovertarget=\"my-component-filters\" popovertargetaction=\"hide\">Done</button>\n  </div>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_input",
      "signature": "lc_input(name: nil, value: nil, type: :text, size: :md, plain: false, **attributes)",
      "url": "https://ui.lostcoords.com/components/input.html#lc_input",
      "examples": [
        {
          "title": "With form controls",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card class: \"@container w-full\" do |card| %>\n  <%= card.header title: \"Project settings\" %>\n  <%= card.content do %>\n    <%= lc_field label: \"Project name\", id: \"my-component-name\" do |field| %>\n      <%= lc_input name: \"project[name]\", value: \"Design system\", **field %>\n    <% end %>\n  <% end %>\n  <%= card.footer do %>\n    <%= lc_button \"Save changes\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Validation feedback",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card class: \"w-full\" do |card| %>\n  <%= card.content do %>\n    <%= lc_alert \"Choose a unique project name.\", tone: :destructive %>\n    <%= lc_field label: \"Project name\", id: \"my-component-name\", error: \"This name is already taken.\" do |field| %>\n      <%= lc_input name: \"project[name]\", value: \"Design system\", **field %>\n    <% end %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Button summary",
          "url": "https://ui.lostcoords.com/components/collapsible.html",
          "erb": "<%= lc_collapsible card: false, button: { variant: :secondary, size: :sm }, summary_class: \"w-fit\", class: \"w-full max-w-80\" do |collapsible| %>\n  <% collapsible.summary do %>\n    <%= lc_icon \"user-plus\", options: { \"aria-hidden\": true } %>\n    <span>Invite people</span>\n  <% end %>\n  <%= lc_field label: \"Email\", id: \"my-component-email\" do |field| %>\n    <%= lc_input name: \"email\", type: :email, **field %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Copy from an element",
          "url": "https://ui.lostcoords.com/components/copy_button.html",
          "erb": "<%= lc_stack gap: :related, class: \"w-full max-w-md\" do %>\n  <%= lc_field label: \"Share link\", id: \"my-component-link\" do |field| %>\n    <%= lc_input value: \"https://ui.lostcoords.com\", **field %>\n  <% end %>\n  <%= lc_copy_button \"Copy current link\", source: \"my-component-link\", copied_label: \"Link copied\", class: \"w-full\" %>\n  <%= lc_text \"Edit the link, then copy it. The button reads the current value each time.\", size: :small, tone: :muted %>\n<% end %>"
        },
        {
          "title": "Modal",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<%= lc_dialog id: \"my-component-dialog\", title: \"Create project\", description: \"Projects group pages and members.\", trigger: \"New project\" do |dialog| %>\n  <form method=\"dialog\" class=\"flex flex-col gap-inset\">\n    <%= lc_field label: \"Project name\", id: \"my-component-dialog-name\" do |field| %>\n      <%= lc_input name: \"project[name]\", **field %>\n    <% end %>\n    <%= dialog.footer do %>\n      <%= dialog.close %>\n      <%= lc_button \"Create project\", type: :submit %>\n    <% end %>\n  </form>\n<% end %>"
        },
        {
          "title": "Mobile dialog",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<%= lc_dialog id: \"my-component-sheet\", title: \"Workspace details\", trigger: \"Open mobile dialog\", detents: \"fit\" do %>\n  <p class=\"text-sm text-muted-foreground\">Drag the handle down to dismiss.</p>\n  <%= lc_field label: \"Workspace\", id: \"my-component-workspace\" do |field| %>\n    <%= lc_input value: \"Design studio\", **field %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Label and hint",
          "url": "https://ui.lostcoords.com/components/field.html",
          "erb": "<%= lc_field label: \"Project name\", id: \"my-component-name\", hint: \"A short, memorable name.\", class: \"w-full max-w-sm\" do |field| %>\n  <%= lc_input name: \"project[name]\", **field %>\n<% end %>"
        },
        {
          "title": "Validation",
          "url": "https://ui.lostcoords.com/components/field.html",
          "erb": "<%= lc_field label: \"Email address\", id: \"my-component-email\", error: \"Enter a valid email address.\", class: \"w-full max-w-sm\" do |field| %>\n  <%= lc_input name: \"email\", type: :email, value: \"alex@\", **field %>\n<% end %>"
        },
        {
          "title": "Sizes",
          "url": "https://ui.lostcoords.com/components/input.html",
          "erb": "<%= lc_input name: \"title\", placeholder: \"Small\", size: :sm, class: \"max-w-sm\", aria: { label: \"Small input\" } %>\n<%= lc_input name: \"title\", placeholder: \"Default\", class: \"max-w-sm\", aria: { label: \"Default input\" } %>\n<%= lc_input name: \"title\", placeholder: \"Large\", size: :lg, class: \"max-w-sm\", aria: { label: \"Large input\" } %>"
        },
        {
          "title": "Disabled and read-only",
          "url": "https://ui.lostcoords.com/components/input.html",
          "erb": "<%= lc_input value: \"Read-only value\", readonly: true, class: \"max-w-sm\", aria: { label: \"Read-only input\" } %>\n<%= lc_input placeholder: \"Disabled\", disabled: true, class: \"max-w-sm\", aria: { label: \"Disabled input\" } %>"
        },
        {
          "title": "Focus a field",
          "url": "https://ui.lostcoords.com/components/kbd.html",
          "erb": "<%= lc_stack gap: :related, class: \"w-full max-w-sm\" do %>\n  <%= lc_field label: \"Filter projects\", id: \"my-component-filter\" do |field| %>\n    <%= lc_input name: \"q\", type: :search, placeholder: \"Press / to filter\", data: lc_shortcut_data(\"/\"), **field %>\n  <% end %>\n  <%= lc_text size: :small, tone: :muted do %>\n    Press <%= lc_kbd \"/\" %> to filter, then <%= lc_kbd \"escape\" %> to clear.\n  <% end %>\n<% end %>"
        },
        {
          "title": "Form rows",
          "url": "https://ui.lostcoords.com/components/list_group.html",
          "erb": "<%= lc_list_group class: \"w-full max-w-md\" do %>\n  <%= lc_list_field \"Description\", icon: \"pencil\", id: \"my-component-description\" do %>\n    <%= lc_input plain: true, id: \"my-component-description\", name: \"description\", placeholder: \"Dinner at Ichiran\" %>\n  <% end %>\n  <%= lc_list_field \"Paid by\", icon: \"user\", tag: :fieldset do %>\n    <div class=\"flex flex-wrap items-center gap-related min-w-0\">\n      <%= lc_toggle \"Ada\", size: :sm, active: true %>\n      <%= lc_toggle \"Grace\", size: :sm %>\n    </div>\n  <% end %>\n  <%= lc_list_field \"Date\", icon: \"calendar\", id: \"my-component-date\" do %>\n    <%= lc_input type: :date, plain: true, id: \"my-component-date\", name: \"date\", value: \"2026-11-06\" %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_textarea",
      "signature": "lc_textarea(content = nil, name: nil, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/textarea.html#lc_textarea",
      "examples": [
        {
          "title": "Mobile height options",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<%= lc_dialog id: \"my-component-sheet\", title: \"Notes\", detents: \"medium large\" do %>\n  <%= lc_textarea name: \"notes\", rows: 16, aria: { label: \"Notes\" }, placeholder: \"Write something…\" %>\n<% end %>"
        },
        {
          "title": "Textarea",
          "url": "https://ui.lostcoords.com/components/textarea.html",
          "erb": "<%= lc_textarea \"A place for your notes.\", name: \"notes\", rows: 4, class: \"max-w-sm\", aria: { label: \"Notes\" } %>"
        }
      ]
    },
    {
      "name": "lc_select",
      "signature": "lc_select(options = nil, name: nil, selected: nil, size: :md, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/select.html#lc_select",
      "examples": [
        {
          "title": "Native select",
          "url": "https://ui.lostcoords.com/components/select.html",
          "erb": "<%= lc_select [[\"Design\", \"design\"], [\"Engineering\", \"engineering\"]], name: \"team\", selected: \"design\", class: \"max-w-sm\", aria: { label: \"Team\" } %>"
        }
      ]
    },
    {
      "name": "lc_field",
      "signature": "lc_field(label:, id:, hint: nil, error: nil, size: :md, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/field.html#lc_field",
      "examples": [
        {
          "title": "With form controls",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card class: \"@container w-full\" do |card| %>\n  <%= card.header title: \"Project settings\" %>\n  <%= card.content do %>\n    <%= lc_field label: \"Project name\", id: \"my-component-name\" do |field| %>\n      <%= lc_input name: \"project[name]\", value: \"Design system\", **field %>\n    <% end %>\n  <% end %>\n  <%= card.footer do %>\n    <%= lc_button \"Save changes\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Validation feedback",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card class: \"w-full\" do |card| %>\n  <%= card.content do %>\n    <%= lc_alert \"Choose a unique project name.\", tone: :destructive %>\n    <%= lc_field label: \"Project name\", id: \"my-component-name\", error: \"This name is already taken.\" do |field| %>\n      <%= lc_input name: \"project[name]\", value: \"Design system\", **field %>\n    <% end %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Button summary",
          "url": "https://ui.lostcoords.com/components/collapsible.html",
          "erb": "<%= lc_collapsible card: false, button: { variant: :secondary, size: :sm }, summary_class: \"w-fit\", class: \"w-full max-w-80\" do |collapsible| %>\n  <% collapsible.summary do %>\n    <%= lc_icon \"user-plus\", options: { \"aria-hidden\": true } %>\n    <span>Invite people</span>\n  <% end %>\n  <%= lc_field label: \"Email\", id: \"my-component-email\" do |field| %>\n    <%= lc_input name: \"email\", type: :email, **field %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Copy from an element",
          "url": "https://ui.lostcoords.com/components/copy_button.html",
          "erb": "<%= lc_stack gap: :related, class: \"w-full max-w-md\" do %>\n  <%= lc_field label: \"Share link\", id: \"my-component-link\" do |field| %>\n    <%= lc_input value: \"https://ui.lostcoords.com\", **field %>\n  <% end %>\n  <%= lc_copy_button \"Copy current link\", source: \"my-component-link\", copied_label: \"Link copied\", class: \"w-full\" %>\n  <%= lc_text \"Edit the link, then copy it. The button reads the current value each time.\", size: :small, tone: :muted %>\n<% end %>"
        },
        {
          "title": "Modal",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<%= lc_dialog id: \"my-component-dialog\", title: \"Create project\", description: \"Projects group pages and members.\", trigger: \"New project\" do |dialog| %>\n  <form method=\"dialog\" class=\"flex flex-col gap-inset\">\n    <%= lc_field label: \"Project name\", id: \"my-component-dialog-name\" do |field| %>\n      <%= lc_input name: \"project[name]\", **field %>\n    <% end %>\n    <%= dialog.footer do %>\n      <%= dialog.close %>\n      <%= lc_button \"Create project\", type: :submit %>\n    <% end %>\n  </form>\n<% end %>"
        },
        {
          "title": "Mobile dialog",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<%= lc_dialog id: \"my-component-sheet\", title: \"Workspace details\", trigger: \"Open mobile dialog\", detents: \"fit\" do %>\n  <p class=\"text-sm text-muted-foreground\">Drag the handle down to dismiss.</p>\n  <%= lc_field label: \"Workspace\", id: \"my-component-workspace\" do |field| %>\n    <%= lc_input value: \"Design studio\", **field %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Label and hint",
          "url": "https://ui.lostcoords.com/components/field.html",
          "erb": "<%= lc_field label: \"Project name\", id: \"my-component-name\", hint: \"A short, memorable name.\", class: \"w-full max-w-sm\" do |field| %>\n  <%= lc_input name: \"project[name]\", **field %>\n<% end %>"
        },
        {
          "title": "Validation",
          "url": "https://ui.lostcoords.com/components/field.html",
          "erb": "<%= lc_field label: \"Email address\", id: \"my-component-email\", error: \"Enter a valid email address.\", class: \"w-full max-w-sm\" do |field| %>\n  <%= lc_input name: \"email\", type: :email, value: \"alex@\", **field %>\n<% end %>"
        },
        {
          "title": "Rails forms",
          "url": "https://ui.lostcoords.com/components/field.html",
          "erb": "<%= form_with scope: :project, url: \"#\", class: \"w-full max-w-sm\" do |form| %>\n  <%= lc_field label: \"Project name\", id: form.field_id(:name), hint: \"Works with Rails form builders.\" do |field| %>\n    <%= form.text_field :name, **field, class: lc_input_class %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Focus a field",
          "url": "https://ui.lostcoords.com/components/kbd.html",
          "erb": "<%= lc_stack gap: :related, class: \"w-full max-w-sm\" do %>\n  <%= lc_field label: \"Filter projects\", id: \"my-component-filter\" do |field| %>\n    <%= lc_input name: \"q\", type: :search, placeholder: \"Press / to filter\", data: lc_shortcut_data(\"/\"), **field %>\n  <% end %>\n  <%= lc_text size: :small, tone: :muted do %>\n    Press <%= lc_kbd \"/\" %> to filter, then <%= lc_kbd \"escape\" %> to clear.\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_fieldset",
      "signature": "lc_fieldset(legend:, id: nil, hint: nil, error: nil, size: :md, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/field.html#lc_fieldset",
      "examples": [
        {
          "title": "Grouped controls",
          "url": "https://ui.lostcoords.com/components/field.html",
          "erb": "<%= lc_stack class: \"w-full max-w-sm\" do %>\n  <%= lc_fieldset legend: \"Split\", id: \"my-component-split\", hint: \"Everyone pays the same share unless you change it.\" do %>\n    <%= lc_inline do %>\n      <%= lc_toggle \"Equally\", active: true %>\n      <%= lc_toggle \"By amount\" %>\n      <%= lc_toggle \"By share\" %>\n    <% end %>\n  <% end %>\n  <%= lc_stack gap: :related do %>\n    <%= lc_text \"This app can\", size: :label, tone: :muted %>\n    <ul class=\"m-0 ps-5 list-disc text-muted-foreground\">\n      <li>Read your groups</li>\n      <li>Add expenses</li>\n    </ul>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_toggle_group",
      "signature": "lc_toggle_group(label:, name: nil, value: nil, as: :div, variant: :segmented, size: :md, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/toggle_group.html#lc_toggle_group",
      "examples": [
        {
          "title": "Row summary with a chevron",
          "url": "https://ui.lostcoords.com/components/collapsible.html",
          "erb": "<%= lc_collapsible card: false, indicator: :chevron, class: \"w-full max-w-80\", summary_class: \"rounded-2xl px-3 font-medium hover:bg-accent\" do |collapsible| %>\n  <% collapsible.summary do %>\n    <span class=\"me-auto\">Language</span>\n    <span class=\"font-normal text-muted-foreground\">English</span>\n  <% end %>\n  <%= lc_toggle_group label: \"Language\", value: \"en\" do %>\n    <%= lc_toggle_group_item \"English\", value: \"en\", selected: true %>\n    <%= lc_toggle_group_item \"日本語\", value: \"ja\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Mutually exclusive choices",
          "url": "https://ui.lostcoords.com/components/toggle_group.html",
          "erb": "<%= lc_toggle_group label: \"View\", value: \"month\" do %>\n  <%= lc_toggle_group_item \"Week\", value: \"week\" %>\n  <%= lc_toggle_group_item \"Month\", value: \"month\", selected: true %>\n  <%= lc_toggle_group_item \"Year\", value: \"year\" %>\n<% end %>"
        },
        {
          "title": "Navigation links",
          "url": "https://ui.lostcoords.com/components/toggle_group.html",
          "erb": "<%= lc_toggle_group label: \"Period\", as: :nav do %>\n  <%= lc_toggle_group_item \"Month\", href: \"/components/toggle_group.html\", current: true %>\n  <%= lc_toggle_group_item \"Quarter\", href: \"/components/toggle.html\" %>\n  <%= lc_toggle_group_item \"Year\", href: \"/components/tabs.html\" %>\n<% end %>"
        },
        {
          "title": "Wrapping pills",
          "url": "https://ui.lostcoords.com/components/toggle_group.html",
          "erb": "<%= lc_toggle_group label: \"Category\", name: \"category\", value: \"\", variant: :pills do %>\n  <%= lc_toggle_group_item \"Leave unchanged\", value: \"\" %>\n  <%= lc_toggle_group_item \"Food\", value: \"food\" %>\n  <%= lc_toggle_group_item \"Transport\", value: \"transport\" %>\n  <%= lc_toggle_group_item \"Lodging\", value: \"lodging\" %>\n<% end %>"
        },
        {
          "title": "Form values, native radios and reset",
          "url": "https://ui.lostcoords.com/components/toggle_group.html",
          "erb": "<form class=\"flex flex-col items-center gap-4\">\n  <%= lc_toggle_group label: \"Billing\", name: \"billing\", value: \"monthly\" do %>\n    <%= lc_toggle_group_item \"Monthly\", value: \"monthly\" %>\n    <%= lc_toggle_group_item \"Annual\", value: \"annual\" %>\n    <%= lc_toggle_group_item \"Custom\", value: \"custom\", disabled: true %>\n  <% end %>\n  <%= lc_inline role: \"radiogroup\", aria: { label: \"Heard about us\" } do %>\n    <%= lc_toggle \"A friend\", name: \"source\", value: \"friend\", size: :sm %>\n    <%= lc_toggle \"Search\", name: \"source\", value: \"search\", size: :sm %>\n  <% end %>\n  <%= lc_button \"Reset\", type: :reset, variant: :ghost, size: :sm %>\n</form>"
        }
      ]
    },
    {
      "name": "lc_toggle_group_item",
      "signature": "lc_toggle_group_item(label = nil, value: nil, selected: nil, checked: nil, href: nil, current: nil, input: {}, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/toggle_group.html#lc_toggle_group_item",
      "examples": [
        {
          "title": "Row summary with a chevron",
          "url": "https://ui.lostcoords.com/components/collapsible.html",
          "erb": "<%= lc_collapsible card: false, indicator: :chevron, class: \"w-full max-w-80\", summary_class: \"rounded-2xl px-3 font-medium hover:bg-accent\" do |collapsible| %>\n  <% collapsible.summary do %>\n    <span class=\"me-auto\">Language</span>\n    <span class=\"font-normal text-muted-foreground\">English</span>\n  <% end %>\n  <%= lc_toggle_group label: \"Language\", value: \"en\" do %>\n    <%= lc_toggle_group_item \"English\", value: \"en\", selected: true %>\n    <%= lc_toggle_group_item \"日本語\", value: \"ja\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Mutually exclusive choices",
          "url": "https://ui.lostcoords.com/components/toggle_group.html",
          "erb": "<%= lc_toggle_group label: \"View\", value: \"month\" do %>\n  <%= lc_toggle_group_item \"Week\", value: \"week\" %>\n  <%= lc_toggle_group_item \"Month\", value: \"month\", selected: true %>\n  <%= lc_toggle_group_item \"Year\", value: \"year\" %>\n<% end %>"
        },
        {
          "title": "Navigation links",
          "url": "https://ui.lostcoords.com/components/toggle_group.html",
          "erb": "<%= lc_toggle_group label: \"Period\", as: :nav do %>\n  <%= lc_toggle_group_item \"Month\", href: \"/components/toggle_group.html\", current: true %>\n  <%= lc_toggle_group_item \"Quarter\", href: \"/components/toggle.html\" %>\n  <%= lc_toggle_group_item \"Year\", href: \"/components/tabs.html\" %>\n<% end %>"
        },
        {
          "title": "Wrapping pills",
          "url": "https://ui.lostcoords.com/components/toggle_group.html",
          "erb": "<%= lc_toggle_group label: \"Category\", name: \"category\", value: \"\", variant: :pills do %>\n  <%= lc_toggle_group_item \"Leave unchanged\", value: \"\" %>\n  <%= lc_toggle_group_item \"Food\", value: \"food\" %>\n  <%= lc_toggle_group_item \"Transport\", value: \"transport\" %>\n  <%= lc_toggle_group_item \"Lodging\", value: \"lodging\" %>\n<% end %>"
        },
        {
          "title": "Form values, native radios and reset",
          "url": "https://ui.lostcoords.com/components/toggle_group.html",
          "erb": "<form class=\"flex flex-col items-center gap-4\">\n  <%= lc_toggle_group label: \"Billing\", name: \"billing\", value: \"monthly\" do %>\n    <%= lc_toggle_group_item \"Monthly\", value: \"monthly\" %>\n    <%= lc_toggle_group_item \"Annual\", value: \"annual\" %>\n    <%= lc_toggle_group_item \"Custom\", value: \"custom\", disabled: true %>\n  <% end %>\n  <%= lc_inline role: \"radiogroup\", aria: { label: \"Heard about us\" } do %>\n    <%= lc_toggle \"A friend\", name: \"source\", value: \"friend\", size: :sm %>\n    <%= lc_toggle \"Search\", name: \"source\", value: \"search\", size: :sm %>\n  <% end %>\n  <%= lc_button \"Reset\", type: :reset, variant: :ghost, size: :sm %>\n</form>"
        }
      ]
    },
    {
      "name": "lc_toggle",
      "signature": "lc_toggle(label = nil, active: false, ghost: false, size: :md, href: nil, name: nil, value: nil, input: {}, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/toggle.html#lc_toggle",
      "examples": [
        {
          "title": "Grouped controls",
          "url": "https://ui.lostcoords.com/components/field.html",
          "erb": "<%= lc_stack class: \"w-full max-w-sm\" do %>\n  <%= lc_fieldset legend: \"Split\", id: \"my-component-split\", hint: \"Everyone pays the same share unless you change it.\" do %>\n    <%= lc_inline do %>\n      <%= lc_toggle \"Equally\", active: true %>\n      <%= lc_toggle \"By amount\" %>\n      <%= lc_toggle \"By share\" %>\n    <% end %>\n  <% end %>\n  <%= lc_stack gap: :related do %>\n    <%= lc_text \"This app can\", size: :label, tone: :muted %>\n    <ul class=\"m-0 ps-5 list-disc text-muted-foreground\">\n      <li>Read your groups</li>\n      <li>Add expenses</li>\n    </ul>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Form rows",
          "url": "https://ui.lostcoords.com/components/list_group.html",
          "erb": "<%= lc_list_group class: \"w-full max-w-md\" do %>\n  <%= lc_list_field \"Description\", icon: \"pencil\", id: \"my-component-description\" do %>\n    <%= lc_input plain: true, id: \"my-component-description\", name: \"description\", placeholder: \"Dinner at Ichiran\" %>\n  <% end %>\n  <%= lc_list_field \"Paid by\", icon: \"user\", tag: :fieldset do %>\n    <div class=\"flex flex-wrap items-center gap-related min-w-0\">\n      <%= lc_toggle \"Ada\", size: :sm, active: true %>\n      <%= lc_toggle \"Grace\", size: :sm %>\n    </div>\n  <% end %>\n  <%= lc_list_field \"Date\", icon: \"calendar\", id: \"my-component-date\" do %>\n    <%= lc_input type: :date, plain: true, id: \"my-component-date\", name: \"date\", value: \"2026-11-06\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Filters",
          "url": "https://ui.lostcoords.com/components/toggle.html",
          "erb": "<%= lc_inline role: \"group\", aria: { label: \"Topics\" } do %>\n  <%= lc_toggle \"Design\", active: true %>\n  <%= lc_toggle \"Writing\" %>\n  <%= lc_toggle \"Research\" %>\n<% end %>"
        },
        {
          "title": "Navigation",
          "url": "https://ui.lostcoords.com/components/toggle.html",
          "erb": "<%= lc_inline do %>\n  <%= lc_toggle \"All projects\", href: \"/components/toggle.html\", active: true, size: :sm %>\n  <%= lc_toggle \"Archived\", href: \"/components/badge.html\", size: :sm %>\n<% end %>"
        },
        {
          "title": "Disabled and ghost",
          "url": "https://ui.lostcoords.com/components/toggle.html",
          "erb": "<%= lc_toggle \"Unavailable\", disabled: true %>\n<%= lc_toggle \"Add filter\", ghost: true %>"
        },
        {
          "title": "Form values, native radios and reset",
          "url": "https://ui.lostcoords.com/components/toggle_group.html",
          "erb": "<form class=\"flex flex-col items-center gap-4\">\n  <%= lc_toggle_group label: \"Billing\", name: \"billing\", value: \"monthly\" do %>\n    <%= lc_toggle_group_item \"Monthly\", value: \"monthly\" %>\n    <%= lc_toggle_group_item \"Annual\", value: \"annual\" %>\n    <%= lc_toggle_group_item \"Custom\", value: \"custom\", disabled: true %>\n  <% end %>\n  <%= lc_inline role: \"radiogroup\", aria: { label: \"Heard about us\" } do %>\n    <%= lc_toggle \"A friend\", name: \"source\", value: \"friend\", size: :sm %>\n    <%= lc_toggle \"Search\", name: \"source\", value: \"search\", size: :sm %>\n  <% end %>\n  <%= lc_button \"Reset\", type: :reset, variant: :ghost, size: :sm %>\n</form>"
        }
      ]
    },
    {
      "name": "lc_table",
      "signature": "lc_table(**attributes, &block)",
      "url": "https://ui.lostcoords.com/components/table.html#lc_table",
      "examples": [
        {
          "title": "Records",
          "url": "https://ui.lostcoords.com/components/table.html",
          "erb": "<div class=\"overflow-x-auto\" tabindex=\"0\" role=\"region\" aria-label=\"Recent activity\">\n  <%= lc_table do %>\n    <caption>Recent activity</caption>\n    <thead>\n      <tr><th scope=\"col\">Project</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"text-end\">Members</th></tr>\n    </thead>\n    <tbody>\n      <tr><th scope=\"row\">WariWari</th><td>Active</td><td class=\"text-end tabular-nums\">4</td></tr>\n      <tr><th scope=\"row\">Personal site</th><td>Active</td><td class=\"text-end tabular-nums\">1</td></tr>\n    </tbody>\n  <% end %>\n</div>"
        }
      ]
    },
    {
      "name": "lc_toast",
      "signature": "lc_toast(message = nil, tone: :success, timeout: 4000, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/toast.html#lc_toast",
      "examples": [
        {
          "title": "Brief feedback",
          "url": "https://ui.lostcoords.com/components/toast.html",
          "erb": "<%= lc_toast \"Project saved.\", timeout: 0 %>"
        },
        {
          "title": "Over dialogs and sticky headers",
          "url": "https://ui.lostcoords.com/components/toast.html",
          "erb": "<%# In an app, render the region once in the layout and append toasts with turbo_stream.append. %>\n<%= lc_toast_region id: \"my-component-toasts\" %>\n<template id=\"my-component-toast\"><%= lc_toast \"Project saved.\" %></template>\n<%= lc_button \"Save project\", data: { controller: \"toast-demo\", action: \"toast-demo#show\", toast_demo_template_value: \"my-component-toast\", toast_demo_region_value: \"my-component-toasts\" } %>"
        },
        {
          "title": "Centred, at the top on phones",
          "url": "https://ui.lostcoords.com/components/toast.html",
          "erb": "<%# Centred at the bottom, and at the top on phones, clear of a bottom tab bar. %>\n<%= lc_toast_region id: \"my-component-toasts\", placement: :bottom_center, mobile_placement: :top_center %>\n<template id=\"my-component-toast\"><%= lc_toast \"Expense added.\" %></template>\n<%= lc_button \"Add expense\", data: { controller: \"toast-demo\", action: \"toast-demo#show\", toast_demo_template_value: \"my-component-toast\", toast_demo_region_value: \"my-component-toasts\" } %>"
        }
      ]
    },
    {
      "name": "lc_toast_region",
      "signature": "lc_toast_region(placement: :bottom_end, mobile_placement: nil, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/toast.html#lc_toast_region",
      "examples": [
        {
          "title": "Over dialogs and sticky headers",
          "url": "https://ui.lostcoords.com/components/toast.html",
          "erb": "<%# In an app, render the region once in the layout and append toasts with turbo_stream.append. %>\n<%= lc_toast_region id: \"my-component-toasts\" %>\n<template id=\"my-component-toast\"><%= lc_toast \"Project saved.\" %></template>\n<%= lc_button \"Save project\", data: { controller: \"toast-demo\", action: \"toast-demo#show\", toast_demo_template_value: \"my-component-toast\", toast_demo_region_value: \"my-component-toasts\" } %>"
        },
        {
          "title": "Centred, at the top on phones",
          "url": "https://ui.lostcoords.com/components/toast.html",
          "erb": "<%# Centred at the bottom, and at the top on phones, clear of a bottom tab bar. %>\n<%= lc_toast_region id: \"my-component-toasts\", placement: :bottom_center, mobile_placement: :top_center %>\n<template id=\"my-component-toast\"><%= lc_toast \"Expense added.\" %></template>\n<%= lc_button \"Add expense\", data: { controller: \"toast-demo\", action: \"toast-demo#show\", toast_demo_template_value: \"my-component-toast\", toast_demo_region_value: \"my-component-toasts\" } %>"
        }
      ]
    },
    {
      "name": "lc_tooltip",
      "signature": "lc_tooltip(text, id:, side: :top, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/tooltip.html#lc_tooltip",
      "examples": [
        {
          "title": "Tooltips",
          "url": "https://ui.lostcoords.com/components/tooltip.html",
          "erb": "<%= lc_inline gap: :content do %>\n  <%= lc_tooltip \"Copy a link to this page\", id: \"my-component-copy-tip\" do |tip| %>\n    <%= lc_icon_button \"Copy link\", icon: \"link\", **tip %>\n  <% end %>\n  <%= lc_tooltip \"Only owners can archive\", id: \"my-component-archive-tip\", side: :bottom do |tip| %>\n    <%= lc_button \"Archive\", variant: :secondary, **tip %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_heading",
      "signature": "lc_heading(content = nil, level: 2, size: :heading, trim: false, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/foundations.html#lc_heading",
      "examples": [
        {
          "title": "Text styles",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<div class=\"grid gap-5\">\n  <%= lc_heading \"Weekend in Kyoto\", level: 2, size: :title %>\n  <%= lc_heading \"Shared expenses\", level: 3, size: :heading %>\n  <%= lc_heading \"Dinner with friends\", level: 4, size: :subheading %>\n  <%= lc_text do %>Use <code>lc_stack</code> to keep related content together.<% end %>\n  <%= lc_text \"Add a receipt or a short note for your group.\", size: :small, tone: :muted %>\n  <%= lc_text \"Updated a few minutes ago\", size: :caption, tone: :muted %>\n</div>"
        },
        {
          "title": "Japanese text",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<div lang=\"ja\" class=\"grid max-w-sm gap-4\">\n  <%= lc_heading \"京都で過ごす週末、みんなの旅の記録\", level: 3, size: :title %>\n  <%= lc_text \"宿泊費や食事代をまとめて記録。誰がいくら支払ったか、グループのみんなで確認できます。\" %>\n  <%= lc_text \"レシートやメモを追加して、旅の思い出も一緒に残しましょう。\", size: :small, tone: :muted %>\n  <%= lc_text \"最終更新：数分前\", size: :caption, tone: :muted %>\n</div>"
        },
        {
          "title": "Eyebrow",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<div class=\"grid gap-related\">\n  <%= lc_text \"Product\", size: :eyebrow, tone: :muted %>\n  <%= lc_heading \"Split costs with anyone\", level: 3, size: :heading %>\n</div>\n<div lang=\"ja\" class=\"grid gap-related\">\n  <%= lc_text \"プロダクト\", size: :eyebrow, tone: :muted %>\n  <%= lc_heading \"誰とでも費用を割り勘\", level: 3, size: :heading %>\n</div>"
        },
        {
          "title": "Page rhythm",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_stack gap: :section, class: \"w-full max-w-xl\" do %>\n  <%= lc_section title: \"Recent expenses\", actions: capture { lc_button(\"Add expense\", icon: \"plus\", size: :sm) } do %>\n    <%= lc_card do %>\n      <%= lc_inline class: \"flex-nowrap justify-between\" do %>\n        <%= lc_text \"Dinner with friends\" %>\n        <%= lc_text \"¥8,400\", class: \"shrink-0 tabular-nums\" %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_text \"Train tickets\" %>\n    <% end %>\n  <% end %>\n  <%= lc_stack as: :section, gap: :heading do %>\n    <%= lc_section_header do %>\n      <%= lc_stack gap: :tight do %>\n        <%= lc_heading \"Members\" %>\n        <%= lc_text \"Everyone who can see this workspace.\", size: :small, tone: :muted %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_inline do %>\n        <%= lc_avatar \"AK\", class: \"bg-primary\" %>\n        <%= lc_stack gap: :tight do %>\n          <%= lc_text \"Alex Kim\" %>\n          <%= lc_text \"Joined today\", size: :small, tone: :muted %>\n        <% end %>\n      <% end %>\n    <% end %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Responsive containers",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_container do %>\n  <%= lc_stack gap: :section do %>\n    <%= lc_heading \"Plan your next trip\", level: 2, size: :title %>\n    <div class=\"grid min-w-0 gap-8 md:grid-cols-2\">\n      <%= lc_section title: \"Travel details\", level: 3 do %>\n        <%= lc_card do %>\n          <%= lc_stack do %>\n            <%= lc_text \"Kyoto weekend\", size: :body %>\n            <%= lc_text \"Keep shared costs and travel notes together.\", size: :small, tone: :muted %>\n            <%= lc_inline do %>\n              <%= lc_button \"Invite friends\", size: :sm %>\n              <%= lc_button \"View itinerary\", variant: :ghost, size: :sm %>\n            <% end %>\n          <% end %>\n        <% end %>\n      <% end %>\n      <%= lc_section title: \"Shared costs\", level: 3 do %>\n        <%= lc_card do %>\n          <%= lc_text \"No expenses yet\", size: :body %>\n        <% end %>\n      <% end %>\n    </div>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Popover sheet",
          "url": "https://ui.lostcoords.com/components/dialog.html",
          "erb": "<button type=\"button\" class=\"<%= lc_button_class(variant: :secondary) %>\" popovertarget=\"my-component-filters\">Filters</button>\n<%= lc_sheet id: \"my-component-filters\", popover: \"auto\", role: \"dialog\", aria: { labelledby: \"my-component-filters-title\" },\n      class: lc_glass_class(shape: :picker, extra: \"sm:m-auto sm:w-80 sm:rounded-3xl text-foreground\") do %>\n  <div class=\"grid gap-content p-inset\">\n    <%= lc_heading \"Filters\", id: \"my-component-filters-title\", size: :title %>\n    <p class=\"text-sm text-muted-foreground\">A popover on desktop, a sheet you can swipe away on phones.</p>\n    <button type=\"button\" class=\"<%= lc_button_class(block: true) %>\" popovertarget=\"my-component-filters\" popovertargetaction=\"hide\">Done</button>\n  </div>\n<% end %>"
        },
        {
          "title": "Empty state",
          "url": "https://ui.lostcoords.com/components/empty_state.html",
          "erb": "<%= lc_empty_state class: \"w-full\" do %>\n  <%= lc_icon_badge shape: :circle, tone: :primary, icon: \"folder-plus\", size: :lg%>\n  <%= lc_stack gap: :tight, class: \"max-w-xs\" do %>\n    <%= lc_heading \"No projects yet\", level: 3, size: :subheading %>\n    <%= lc_text \"Create a project to get started.\", size: :small, tone: :muted %>\n  <% end %>\n  <%= lc_button \"Create project\" %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_text",
      "signature": "lc_text(content = nil, size: :body, tone: :default, trim: false, as: :p, **attributes, &block)",
      "url": "https://ui.lostcoords.com/components/foundations.html#lc_text",
      "examples": [
        {
          "title": "Text styles",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<div class=\"grid gap-5\">\n  <%= lc_heading \"Weekend in Kyoto\", level: 2, size: :title %>\n  <%= lc_heading \"Shared expenses\", level: 3, size: :heading %>\n  <%= lc_heading \"Dinner with friends\", level: 4, size: :subheading %>\n  <%= lc_text do %>Use <code>lc_stack</code> to keep related content together.<% end %>\n  <%= lc_text \"Add a receipt or a short note for your group.\", size: :small, tone: :muted %>\n  <%= lc_text \"Updated a few minutes ago\", size: :caption, tone: :muted %>\n</div>"
        },
        {
          "title": "Japanese text",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<div lang=\"ja\" class=\"grid max-w-sm gap-4\">\n  <%= lc_heading \"京都で過ごす週末、みんなの旅の記録\", level: 3, size: :title %>\n  <%= lc_text \"宿泊費や食事代をまとめて記録。誰がいくら支払ったか、グループのみんなで確認できます。\" %>\n  <%= lc_text \"レシートやメモを追加して、旅の思い出も一緒に残しましょう。\", size: :small, tone: :muted %>\n  <%= lc_text \"最終更新：数分前\", size: :caption, tone: :muted %>\n</div>"
        },
        {
          "title": "Eyebrow",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<div class=\"grid gap-related\">\n  <%= lc_text \"Product\", size: :eyebrow, tone: :muted %>\n  <%= lc_heading \"Split costs with anyone\", level: 3, size: :heading %>\n</div>\n<div lang=\"ja\" class=\"grid gap-related\">\n  <%= lc_text \"プロダクト\", size: :eyebrow, tone: :muted %>\n  <%= lc_heading \"誰とでも費用を割り勘\", level: 3, size: :heading %>\n</div>"
        },
        {
          "title": "Page rhythm",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_stack gap: :section, class: \"w-full max-w-xl\" do %>\n  <%= lc_section title: \"Recent expenses\", actions: capture { lc_button(\"Add expense\", icon: \"plus\", size: :sm) } do %>\n    <%= lc_card do %>\n      <%= lc_inline class: \"flex-nowrap justify-between\" do %>\n        <%= lc_text \"Dinner with friends\" %>\n        <%= lc_text \"¥8,400\", class: \"shrink-0 tabular-nums\" %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_text \"Train tickets\" %>\n    <% end %>\n  <% end %>\n  <%= lc_stack as: :section, gap: :heading do %>\n    <%= lc_section_header do %>\n      <%= lc_stack gap: :tight do %>\n        <%= lc_heading \"Members\" %>\n        <%= lc_text \"Everyone who can see this workspace.\", size: :small, tone: :muted %>\n      <% end %>\n    <% end %>\n    <%= lc_card do %>\n      <%= lc_inline do %>\n        <%= lc_avatar \"AK\", class: \"bg-primary\" %>\n        <%= lc_stack gap: :tight do %>\n          <%= lc_text \"Alex Kim\" %>\n          <%= lc_text \"Joined today\", size: :small, tone: :muted %>\n        <% end %>\n      <% end %>\n    <% end %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Responsive containers",
          "url": "https://ui.lostcoords.com/components/foundations.html",
          "erb": "<%= lc_container do %>\n  <%= lc_stack gap: :section do %>\n    <%= lc_heading \"Plan your next trip\", level: 2, size: :title %>\n    <div class=\"grid min-w-0 gap-8 md:grid-cols-2\">\n      <%= lc_section title: \"Travel details\", level: 3 do %>\n        <%= lc_card do %>\n          <%= lc_stack do %>\n            <%= lc_text \"Kyoto weekend\", size: :body %>\n            <%= lc_text \"Keep shared costs and travel notes together.\", size: :small, tone: :muted %>\n            <%= lc_inline do %>\n              <%= lc_button \"Invite friends\", size: :sm %>\n              <%= lc_button \"View itinerary\", variant: :ghost, size: :sm %>\n            <% end %>\n          <% end %>\n        <% end %>\n      <% end %>\n      <%= lc_section title: \"Shared costs\", level: 3 do %>\n        <%= lc_card do %>\n          <%= lc_text \"No expenses yet\", size: :body %>\n        <% end %>\n      <% end %>\n    </div>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Default",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card class: \"w-full\" do |card| %>\n  <%= card.header title: \"Project notes\", description: \"Keep related content together.\" do %>\n    <%= lc_button \"Edit\", variant: :secondary, size: :sm %>\n  <% end %>\n  <%= card.content do %>\n    <%= lc_text \"Notes, links and files for the launch.\" %>\n  <% end %>\n  <%= card.footer do %>\n    <%= lc_button \"Archive\", variant: :ghost %>\n    <%= lc_button \"Share\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Compact",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card padding: :sm, class: \"w-full\" do |card| %>\n  <%= card.header title: \"Compact card\", description: \"Padding and gaps tighten together.\" %>\n  <%= lc_text \"A compact summary.\", size: :small %>\n<% end %>"
        },
        {
          "title": "Edge-to-edge content",
          "url": "https://ui.lostcoords.com/components/card.html",
          "erb": "<%= lc_card padding: :none, class: \"w-full\" do %>\n  <ul class=\"m-0 list-none divide-y divide-border p-0\">\n    <% [ [ \"Design system\", \"Active\" ], [ \"Marketing site\", \"Draft\" ] ].each do |name, status| %>\n      <li class=\"flex items-center justify-between gap-content p-inset\">\n        <%= lc_text name %>\n        <%= lc_text status, size: :small, tone: :muted %>\n      </li>\n    <% end %>\n  </ul>\n<% end %>"
        },
        {
          "title": "Copy from an element",
          "url": "https://ui.lostcoords.com/components/copy_button.html",
          "erb": "<%= lc_stack gap: :related, class: \"w-full max-w-md\" do %>\n  <%= lc_field label: \"Share link\", id: \"my-component-link\" do |field| %>\n    <%= lc_input value: \"https://ui.lostcoords.com\", **field %>\n  <% end %>\n  <%= lc_copy_button \"Copy current link\", source: \"my-component-link\", copied_label: \"Link copied\", class: \"w-full\" %>\n  <%= lc_text \"Edit the link, then copy it. The button reads the current value each time.\", size: :small, tone: :muted %>\n<% end %>"
        },
        {
          "title": "Empty state",
          "url": "https://ui.lostcoords.com/components/empty_state.html",
          "erb": "<%= lc_empty_state class: \"w-full\" do %>\n  <%= lc_icon_badge shape: :circle, tone: :primary, icon: \"folder-plus\", size: :lg%>\n  <%= lc_stack gap: :tight, class: \"max-w-xs\" do %>\n    <%= lc_heading \"No projects yet\", level: 3, size: :subheading %>\n    <%= lc_text \"Create a project to get started.\", size: :small, tone: :muted %>\n  <% end %>\n  <%= lc_button \"Create project\" %>\n<% end %>"
        },
        {
          "title": "Grouped controls",
          "url": "https://ui.lostcoords.com/components/field.html",
          "erb": "<%= lc_stack class: \"w-full max-w-sm\" do %>\n  <%= lc_fieldset legend: \"Split\", id: \"my-component-split\", hint: \"Everyone pays the same share unless you change it.\" do %>\n    <%= lc_inline do %>\n      <%= lc_toggle \"Equally\", active: true %>\n      <%= lc_toggle \"By amount\" %>\n      <%= lc_toggle \"By share\" %>\n    <% end %>\n  <% end %>\n  <%= lc_stack gap: :related do %>\n    <%= lc_text \"This app can\", size: :label, tone: :muted %>\n    <ul class=\"m-0 ps-5 list-disc text-muted-foreground\">\n      <li>Read your groups</li>\n      <li>Add expenses</li>\n    </ul>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Focus a field",
          "url": "https://ui.lostcoords.com/components/kbd.html",
          "erb": "<%= lc_stack gap: :related, class: \"w-full max-w-sm\" do %>\n  <%= lc_field label: \"Filter projects\", id: \"my-component-filter\" do |field| %>\n    <%= lc_input name: \"q\", type: :search, placeholder: \"Press / to filter\", data: lc_shortcut_data(\"/\"), **field %>\n  <% end %>\n  <%= lc_text size: :small, tone: :muted do %>\n    Press <%= lc_kbd \"/\" %> to filter, then <%= lc_kbd \"escape\" %> to clear.\n  <% end %>\n<% end %>"
        },
        {
          "title": "Tones",
          "url": "https://ui.lostcoords.com/components/link.html",
          "erb": "<%= lc_stack gap: :related do %>\n  <%= lc_text do %>Read the <%= lc_link \"installation guide\", \"/installation.html\" %> before you start.<% end %>\n  <%= lc_text size: :small, tone: :muted do %>Questions? <%= lc_link \"Contact support\", \"/components/link.html\", tone: :muted %>.<% end %>\n  <%= lc_text do %>See <%= lc_link \"what's new\", \"/components/link.html\", tone: :primary %> in this release.<% end %>\n<% end %>"
        },
        {
          "title": "Cards",
          "url": "https://ui.lostcoords.com/components/radio.html",
          "erb": "<%= lc_choice_group legend: \"Plan\", class: \"w-full max-w-md\" do %>\n  <%= lc_radio \"Free\", name: \"my-component-plan\", value: \"free\", hint: \"Up to 3 projects.\", card: true %>\n  <%= lc_radio \"Team\", name: \"my-component-plan\", value: \"team\", hint: \"Shared projects and roles.\", card: true, checked: true do %>\n    <%= lc_text \"$12 per member, per month\", size: :caption, tone: :muted %>\n  <% end %>\n  <%= lc_radio \"Enterprise\", name: \"my-component-plan\", value: \"enterprise\", hint: \"SSO and audit logs.\", card: true %>\n<% end %>"
        },
        {
          "title": "Skip link",
          "url": "https://ui.lostcoords.com/components/skip_link.html",
          "erb": "<%= lc_stack gap: :related, class: \"items-center\" do %>\n  <%= lc_text \"Press Tab on this page: the skip link is the first thing to receive focus.\", size: :small, tone: :muted %>\n  <%= lc_skip_link \"#examples\", class: \"not-sr-only static\" %>\n<% end %>"
        },
        {
          "title": "Tabs",
          "url": "https://ui.lostcoords.com/components/tabs.html",
          "erb": "<%= lc_tabs id: \"my-component-tabs\", label: \"Project\", class: \"w-full\" do |tabs| %>\n  <% tabs.panel \"Overview\" do %>\n    <%= lc_text \"Pages, members and recent changes.\" %>\n  <% end %>\n  <% tabs.panel \"Activity\" do %>\n    <%= lc_text \"Nothing new this week.\", tone: :muted %>\n  <% end %>\n  <% tabs.panel \"Settings\" do %>\n    <%= lc_switch \"Public project\", name: \"project[public]\" %>\n  <% end %>\n<% end %>"
        },
        {
          "title": "Vertical, with manual activation",
          "url": "https://ui.lostcoords.com/components/tabs.html",
          "erb": "<%= lc_tabs id: \"my-component-settings\", label: \"Settings\", orientation: :vertical, activation: :manual, class: \"w-full\" do |tabs| %>\n  <% tabs.panel \"Profile\" do %>\n    <%= lc_text \"Name, photo and contact details.\" %>\n  <% end %>\n  <% tabs.panel \"Notifications\" do %>\n    <%= lc_switch \"Email me about mentions\", name: \"settings[mentions]\" %>\n  <% end %>\n  <% tabs.panel \"Billing\" do %>\n    <%= lc_text \"Plan, invoices and payment method.\", tone: :muted %>\n  <% end %>\n<% end %>"
        }
      ]
    },
    {
      "name": "lc_kbd",
      "signature": "lc_kbd(keys, **attributes)",
      "url": "https://ui.lostcoords.com/components/kbd.html#lc_kbd",
      "examples": [
        {
          "title": "Focus a field",
          "url": "https://ui.lostcoords.com/components/kbd.html",
          "erb": "<%= lc_stack gap: :related, class: \"w-full max-w-sm\" do %>\n  <%= lc_field label: \"Filter projects\", id: \"my-component-filter\" do |field| %>\n    <%= lc_input name: \"q\", type: :search, placeholder: \"Press / to filter\", data: lc_shortcut_data(\"/\"), **field %>\n  <% end %>\n  <%= lc_text size: :small, tone: :muted do %>\n    Press <%= lc_kbd \"/\" %> to filter, then <%= lc_kbd \"escape\" %> to clear.\n  <% end %>\n<% end %>"
        }
      ]
    }
  ],
  "blocks": [
    {
      "id": "application_header",
      "title": "Application header",
      "description": "A glass header with navigation, an account menu and room for your brand.",
      "docs_only": true,
      "url": "https://ui.lostcoords.com/blocks/application_header.html",
      "components": [
        "button"
      ],
      "notes": [
        "Replace the sample brand, links and account actions with your application's content.",
        "Keep navigation destinations as links and account actions in the menu. The header's layout and scroll behavior live in the example files."
      ],
      "files": [
        {
          "path": "app/views/shared/_application_header.html.erb",
          "language": "erb",
          "source": "<%# locals: (brand:, home: \"/\", home_label:, links: [], label: \"Main\", width: \"max-w-5xl\", navigation_class: \"sm:flex\") %>\n<%# links: [[label, url, current], …]. The block's content renders the actions at the end of the bar. %>\n<header class=\"header-example sticky top-0 z-sticky px-3 pt-3 pb-4 sm:px-6\" data-controller=\"blocks-header\" data-action=\"scroll@window->blocks-header#scroll\">\n  <div class=\"relative isolate mx-auto flex min-h-16 <%= width %> items-center gap-related px-3 py-2 sm:gap-content sm:px-5\">\n    <span class=\"header-example__glass <%= lc_glass_class(thick: true, extra: \"pointer-events-none absolute inset-0 -z-10\") %>\" aria-hidden=\"true\"></span>\n    <a href=\"<%= home %>\" class=\"flex min-h-11 shrink-0 items-center gap-related pe-2 font-semibold tracking-tight no-underline text-inherit\" aria-label=\"<%= home_label %>\"><%= brand %></a>\n    <% if links.any? %>\n      <nav class=\"hidden items-center gap-tight <%= navigation_class %>\" aria-label=\"<%= label %>\">\n        <% links.each do |text, url, current| %>\n          <%= lc_button_link_to text, url, variant: :ghost, size: :sm, class: \"aria-[current=page]:bg-accent\", aria: { current: (\"page\" if current) } %>\n        <% end %>\n      </nav>\n    <% end %>\n    <div class=\"ms-auto flex items-center gap-related\"><%= yield %></div>\n  </div>\n</header>"
        },
        {
          "path": "app/assets/stylesheets/application_header.css",
          "language": "css",
          "source": ".header-example__glass {\n  opacity: 0;\n  transition: opacity 300ms ease;\n}\n\n.header-example[data-scrolled] .header-example__glass {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .header-example__glass {\n    transition: none;\n  }\n}"
        },
        {
          "path": "app/javascript/controllers/blocks_header_controller.js",
          "language": "javascript",
          "source": "import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n  connect() {\n    this.scroll()\n  }\n\n  // An open modal pins the body, so scrollY reads 0 until it closes; keep the\n  // state the page had rather than fading the glass out behind the dialog.\n  scroll() {\n    if (document.body.dataset.modalScrollLock === \"true\") return\n    this.element.toggleAttribute(\"data-scrolled\", window.scrollY > 8)\n  }\n}"
        }
      ]
    },
    {
      "id": "docs_shell",
      "title": "Documentation layout",
      "description": "A sidebar, page content and an \"On this page\" list, with a collapsible menu on phones.",
      "docs_only": true,
      "url": "https://ui.lostcoords.com/blocks/docs_shell.html",
      "components": [
        "button",
        "nav_list"
      ],
      "notes": [
        "Render it as a layout: pass the sidebar and contents lists as locals and the page as the block. This documentation site uses it for every guide and component page.",
        "Mark the current page with current: true so the sidebar sets aria-current. The contents list appears from the xl breakpoint."
      ],
      "files": [
        {
          "path": "app/views/shared/_docs_shell.html.erb",
          "language": "erb",
          "source": "<%# locals: (navigation:, contents: nil, menu_label: \"Menu\", width: nil) %>\n<%# navigation: the sidebar, usually lc_nav_list. contents: an optional \"On this page\" list for wide screens. %>\n<div class=\"docs-shell mx-auto flex max-w-360 gap-10 px-5 sm:px-8 lg:px-10\">\n  <aside tabindex=\"0\" aria-label=\"Documentation sidebar\" class=\"docs-shell__sidebar sticky top-20 hidden h-[calc(100dvh-5rem)] w-52 shrink-0 overflow-y-auto py-8 pe-4 lg:block\">\n    <%= navigation %>\n  </aside>\n  <main id=\"main\" class=\"isolate min-w-0 flex-1 py-5 lg:py-10 <%= width %>\">\n    <details class=\"group/nav relative z-raised rounded-2xl lc-squircle bg-muted lg:hidden\">\n      <summary class=\"flex min-h-12 cursor-pointer list-none items-center justify-between gap-content px-4 text-label [&::-webkit-details-marker]:hidden\"><%= menu_label %><%= lc_icon \"chevron-down\", options: { class: \"size-4 transition-transform group-open/nav:rotate-180\", \"aria-hidden\": true } %></summary>\n      <div class=\"max-h-[60dvh] overflow-y-auto p-3 pt-0\"><%= navigation %></div>\n    </details>\n    <div class=\"pt-6 lg:pt-0\"><%= yield %></div>\n  </main>\n  <% if contents %>\n    <aside class=\"sticky top-20 hidden h-[calc(100dvh-5rem)] w-40 shrink-0 overflow-y-auto py-12 ps-4 xl:block\"><%= contents %></aside>\n  <% end %>\n</div>"
        },
        {
          "path": "app/assets/stylesheets/docs_shell.css",
          "language": "css",
          "source": "/* The sidebar scrolls on its own without a visible scrollbar. */\n.docs-shell__sidebar {\n  scrollbar-width: none;\n}\n\n.docs-shell__sidebar::-webkit-scrollbar {\n  display: none;\n}"
        }
      ]
    },
    {
      "id": "mobile_navigation",
      "title": "Mobile navigation",
      "description": "A floating navigation pill and an expanding stack of quick actions.",
      "docs_only": true,
      "url": "https://ui.lostcoords.com/blocks/mobile_navigation.html",
      "components": [
        "foundations",
        "avatar",
        "badge",
        "button",
        "card",
        "field",
        "icon_badge",
        "textarea"
      ],
      "notes": [
        "Choose a small set of primary destinations and replace the sample quick actions.",
        "Copy the bottom spacing and safe-area rules with the controls, so page content remains reachable. Test keyboard visibility on a real phone."
      ],
      "files": [
        {
          "path": "app/views/shared/_mobile_navigation.html.erb",
          "language": "erb",
          "source": "<div class=\"mobile-example min-h-screen\" data-controller=\"blocks-mobile-navigation\" data-action=\"resize@window->blocks-mobile-navigation#keyboard focusin@document->blocks-mobile-navigation#keyboard focusout@document->blocks-mobile-navigation#keyboard\">\n  <header class=\"mx-auto flex max-w-2xl items-center justify-between gap-4 px-5 pt-7 pb-6 sm:px-8\">\n    <a href=\"#projects\" class=\"flex min-h-11 items-center gap-2 font-semibold\" data-action=\"blocks-mobile-navigation#home\"><%= lc_icon \"square-3-stack-3d\", options: { class: \"size-5\", \"aria-hidden\": true } %> Studio</a>\n    <%= lc_avatar \"AL\", class: \"bg-primary-soft text-primary\", aria: { label: \"Alex Lee\" } %>\n  </header>\n\n  <nav class=\"mobile-example__tabs\" aria-label=\"Studio sections\">\n    <div class=\"<%= lc_glass_class(thick: true, extra: \"relative isolate grid grid-flow-col auto-cols-fr gap-1 p-1\") %>\">\n      <span class=\"mobile-example__indicator\" data-blocks-mobile-navigation-target=\"indicator\" aria-hidden=\"true\"></span>\n      <% [ [ \"Projects\", \"projects\", \"rectangle-stack\" ], [ \"Notes\", \"notes\", \"document-text\" ], [ \"People\", \"people\", \"users\" ] ].each do |label, id, icon| %>\n        <a href=\"#<%= id %>\" class=\"mobile-example__tab\" <%= 'aria-current=page' if id == \"projects\" %> data-blocks-mobile-navigation-target=\"link\" data-action=\"blocks-mobile-navigation#select\">\n          <%= lc_icon icon, options: { class: \"size-5\", \"aria-hidden\": true } %><span><%= label %></span>\n        </a>\n      <% end %>\n    </div>\n  </nav>\n\n  <main class=\"mobile-example__main isolate mx-auto flex max-w-2xl flex-col gap-7 px-5 pt-3 sm:px-8\">\n    <div class=\"flex flex-col gap-2\"><%= lc_text \"A space to make things\", size: :caption, tone: :muted %><h1 class=\"text-4xl font-semibold tracking-tight\">Your little studio.</h1><p class=\"text-muted-foreground\">A few good ideas, and room for a few more.</p></div>\n    <p class=\"text-sm text-muted-foreground\" role=\"status\" aria-live=\"polite\" data-blocks-mobile-navigation-target=\"status\"></p>\n\n    <section id=\"projects\" class=\"flex flex-col gap-4\" data-blocks-mobile-navigation-target=\"panel\">\n      <div class=\"flex min-h-11 items-center justify-between gap-3\"><h2 class=\"text-xl font-semibold\">On your desk</h2><%= lc_badge \"This week\" %></div>\n      <div class=\"flex flex-col gap-4\" data-blocks-mobile-navigation-target=\"projects\">\n        <% [ [ \"Brand refresh\", \"Finding a fresh perspective.\", \"swatch\", :primary, \"In progress\" ], [ \"Field notes\", \"Small observations, collected.\", \"book-open\", :success, \"Taking shape\" ], [ \"Summer collection\", \"Objects for everyday moments.\", \"sun\", :neutral, \"Just getting started\" ] ].each do |title, description, icon, tone, status| %>\n          <%= lc_card class: \"flex flex-col gap-content\" do %>\n            <div class=\"flex items-center justify-between gap-3\"><%= lc_icon_badge shape: :circle, icon: icon, size: :lg, tone: tone%><%= lc_badge status %></div>\n            <div class=\"flex flex-col gap-1\"><h3 class=\"text-lg font-semibold\"><%= title %></h3><p class=\"text-sm text-muted-foreground\"><%= description %></p></div>\n            <div class=\"flex items-center gap-2 text-sm text-muted-foreground\"><%= lc_avatar \"AL\", size: :sm, class: \"bg-background text-muted-foreground\" %><span>You and your collaborators</span></div>\n          <% end %>\n        <% end %>\n      </div>\n    </section>\n\n    <section id=\"notes\" class=\"flex flex-col gap-4\" data-blocks-mobile-navigation-target=\"panel\" hidden>\n      <h2 class=\"text-xl font-semibold\">Notes to self</h2>\n      <div class=\"flex flex-col gap-4\" data-blocks-mobile-navigation-target=\"notes\">\n        <%= lc_card class: \"flex flex-col gap-3\" do %><%= lc_text \"A thought for today\", size: :caption, tone: :muted %><h3 class=\"text-lg font-semibold\">Leave a little room.</h3><p class=\"text-sm text-muted-foreground\">The best ideas sometimes arrive between the things you planned.</p><% end %>\n      </div>\n      <%= lc_field label: \"Capture a thought\", id: \"studio-thought\", hint: \"A small idea is a good place to start.\" do |field| %><%= lc_textarea name: \"thought\", placeholder: \"What’s on your mind?\", rows: 4, **field %><% end %>\n    </section>\n\n    <section id=\"people\" class=\"flex flex-col gap-4\" data-blocks-mobile-navigation-target=\"panel\" hidden>\n      <h2 class=\"text-xl font-semibold\">Good company</h2>\n      <%= lc_card class: \"flex flex-col gap-content\" do %>\n        <% [ [ \"AL\", \"Alex Lee\", \"Designer\" ], [ \"SK\", \"Sam Kim\", \"Writer\" ], [ \"JR\", \"Jamie Reed\", \"Maker\" ] ].each do |initials, name, role| %>\n          <div class=\"flex items-center gap-3\"><%= lc_avatar initials, class: \"bg-background text-muted-foreground\" %><div class=\"flex-1\"><h3 class=\"text-sm font-semibold\"><%= name %></h3><p class=\"text-sm text-muted-foreground\"><%= role %></p></div><%= lc_badge \"Available\", tone: :primary, class: \"rounded-full text-sm\" %></div>\n        <% end %>\n      <% end %>\n    </section>\n  </main>\n\n  <div class=\"mobile-example__dock\" data-controller=\"lc-menu\" data-lc-menu-lift-value=\"false\">\n    <button type=\"button\" class=\"mobile-example__trigger <%= lc_glass_class(shape: :disc, thick: true) %>\" aria-label=\"Create something\" aria-haspopup=\"menu\" aria-expanded=\"false\" aria-controls=\"studio-create-menu\" data-lc-menu-target=\"trigger\" data-action=\"lc-menu#toggle\">\n      <%= lc_icon \"plus\", options: { class: \"size-7\", \"aria-hidden\": true } %>\n    </button>\n    <div id=\"studio-create-menu\" class=\"mobile-example__actions\" role=\"menu\" aria-label=\"Create something\" data-lc-menu-target=\"popover\">\n      <button type=\"button\" class=\"mobile-example__scrim\" aria-label=\"Close create menu\" tabindex=\"-1\" data-action=\"lc-menu#close\"></button>\n      <% [ [ \"New project\", \"rectangle-stack\", \"projects\" ], [ \"Add a note\", \"pencil-square\", \"notes\" ] ].each_with_index do |(label, icon, destination), index| %>\n        <button type=\"button\" role=\"menuitem\" class=\"mobile-example__action <%= lc_glass_class(shape: :disc, thick: true) %>\" style=\"--action-index: <%= index + 1 %>\" data-action=\"blocks-mobile-navigation#add lc-menu#close\" data-blocks-mobile-navigation-destination-param=\"<%= destination %>\">\n          <span class=\"mobile-example__action-label\"><%= label %></span><%= lc_icon icon, options: { class: \"size-6\", \"aria-hidden\": true } %>\n        </button>\n      <% end %>\n    </div>\n  </div>\n\n  <template data-blocks-mobile-navigation-target=\"draft\">\n    <%= lc_card class: \"flex flex-col gap-3\" do %><%= lc_badge \"Draft\" %><h3 class=\"text-lg font-semibold\" data-draft-title></h3><p class=\"text-sm text-muted-foreground\">A fresh start. Make it your own.</p><% end %>\n  </template>\n</div>"
        },
        {
          "path": "app/assets/stylesheets/mobile_navigation.css",
          "language": "css",
          "source": ".mobile-example {\n  --dock-gap: max(1rem, env(safe-area-inset-right, 0px));\n  --dock-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));\n  --dock-size: 4rem;\n}\n\n.mobile-example__main {\n  padding-block-end: calc(var(--dock-bottom) + var(--dock-size) + 2rem);\n}\n\n.mobile-example__tabs {\n  position: fixed;\n  z-index: var(--lc-z-sticky);\n  inset-inline: max(1rem, env(safe-area-inset-left, 0px)) calc(var(--dock-gap) + var(--dock-size) + 0.75rem);\n  bottom: var(--dock-bottom);\n}\n\n.mobile-example__tab {\n  position: relative;\n  display: flex;\n  min-width: 0;\n  min-height: 3.5rem;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  border-radius: 999px;\n  color: var(--muted-foreground);\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-decoration: none;\n}\n\n.mobile-example__tab[aria-current=\"page\"] {\n  color: var(--primary);\n}\n\n.mobile-example__indicator {\n  position: absolute;\n  z-index: -1;\n  inset-block: 0.25rem;\n  inset-inline-start: 0;\n  border-radius: 999px;\n  background: color-mix(in oklab, var(--foreground) 7%, transparent);\n  transition: translate 380ms var(--lc-ease-sheet, ease), width 380ms var(--lc-ease-sheet, ease);\n}\n\n.mobile-example__dock {\n  position: fixed;\n  z-index: calc(var(--lc-z-sticky) + 1);\n  inset-inline-end: var(--dock-gap);\n  bottom: var(--dock-bottom);\n}\n\n.mobile-example__trigger,\n.mobile-example__action {\n  display: grid;\n  width: var(--dock-size);\n  height: var(--dock-size);\n  place-items: center;\n  padding: 0;\n  color: var(--primary);\n  cursor: pointer;\n}\n\n.mobile-example__trigger {\n  position: relative;\n  z-index: 2;\n}\n\n.mobile-example__trigger svg {\n  transition: rotate 300ms var(--lc-ease-sheet, ease);\n}\n\n.mobile-example__trigger[aria-expanded=\"true\"] svg {\n  rotate: 135deg;\n}\n\n.mobile-example__actions {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.mobile-example__actions[data-open] {\n  visibility: visible;\n}\n\n.mobile-example__scrim {\n  position: fixed;\n  inset: 0;\n  border: 0;\n  background: color-mix(in oklab, var(--foreground) 18%, transparent);\n  opacity: 0;\n  -webkit-backdrop-filter: blur(8px);\n  backdrop-filter: blur(8px);\n  transition: opacity 220ms ease;\n}\n\n.mobile-example__actions[data-open] .mobile-example__scrim {\n  pointer-events: auto;\n  opacity: 1;\n}\n\n.mobile-example__action {\n  position: absolute;\n  z-index: 1;\n  inset: 0;\n  width: 3.5rem;\n  height: 3.5rem;\n  margin: 0.25rem;\n  color: var(--foreground);\n  opacity: 0;\n  transform: scale(0.4);\n  transition: transform 300ms ease, opacity 150ms ease;\n}\n\n.mobile-example__actions[data-open] .mobile-example__action {\n  pointer-events: auto;\n  opacity: 1;\n  transform: translateY(calc(var(--action-index) * -4.5rem)) scale(1);\n  transition: transform 420ms cubic-bezier(0.34, 1.45, 0.64, 1), opacity 160ms ease;\n  transition-delay: calc((var(--action-index) - 1) * 40ms);\n}\n\n.mobile-example__action-label {\n  position: absolute;\n  inset-inline-end: calc(100% + 0.75rem);\n  width: max-content;\n  max-width: calc(100vw - 7rem);\n  padding: 0.5rem 0.875rem;\n  border-radius: 999px;\n  background: var(--background);\n  box-shadow: var(--lc-shadow);\n  color: var(--foreground);\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n.mobile-example[data-keyboard] .mobile-example__tabs,\n.mobile-example[data-keyboard] .mobile-example__dock {\n  display: none;\n}\n\n@media (width >= 40rem) {\n  .mobile-example__tabs {\n    position: relative;\n    inset: auto;\n    width: max-content;\n    margin-inline: auto;\n    margin-block-end: 1.5rem;\n  }\n\n  .mobile-example__tab {\n    min-width: 7rem;\n    min-height: 2.75rem;\n    flex-direction: row;\n    gap: 0.5rem;\n    font-size: 0.875rem;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mobile-example__indicator,\n  .mobile-example__trigger svg,\n  .mobile-example__scrim,\n  .mobile-example__action,\n  .mobile-example__actions[data-open] .mobile-example__action {\n    transition: none;\n  }\n}"
        },
        {
          "path": "app/javascript/controllers/blocks_mobile_navigation_controller.js",
          "language": "javascript",
          "source": "import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n  static targets = [\"link\", \"panel\", \"indicator\", \"status\", \"projects\", \"notes\", \"draft\"]\n\n  connect() {\n    this.resizeObserver = new ResizeObserver(() => this.placeIndicator())\n    this.linkTargets.forEach((link) => this.resizeObserver.observe(link))\n    this.onViewportResize = () => this.keyboard()\n    window.visualViewport?.addEventListener(\"resize\", this.onViewportResize)\n    this.placeIndicator()\n  }\n\n  disconnect() {\n    this.resizeObserver.disconnect()\n    window.visualViewport?.removeEventListener(\"resize\", this.onViewportResize)\n  }\n\n  select(event) {\n    event.preventDefault()\n    this.show(event.currentTarget.hash.slice(1))\n  }\n\n  home(event) {\n    event.preventDefault()\n    this.show(\"projects\")\n  }\n\n  show(id) {\n    for (const link of this.linkTargets) {\n      if (link.hash === `#${id}`) link.setAttribute(\"aria-current\", \"page\")\n      else link.removeAttribute(\"aria-current\")\n    }\n    for (const panel of this.panelTargets) panel.hidden = panel.id !== id\n    this.placeIndicator()\n  }\n\n  placeIndicator() {\n    const active = this.linkTargets.find((link) => link.getAttribute(\"aria-current\") === \"page\")\n    this.indicatorTarget.style.translate = `${active.offsetLeft}px 0`\n    this.indicatorTarget.style.width = `${active.offsetWidth}px`\n  }\n\n  add({ params: { destination } }) {\n    const draft = this.draftTarget.content.cloneNode(true)\n    const title = destination === \"projects\" ? \"Untitled project\" : \"A new thought\"\n    draft.querySelector(\"[data-draft-title]\").textContent = title\n    const list = destination === \"projects\" ? this.projectsTarget : this.notesTarget\n    list.prepend(draft)\n    this.show(destination)\n    this.statusTarget.textContent = `${title} added. Your next idea starts here.`\n  }\n\n  keyboard() {\n    const typing = document.activeElement?.matches(\"input, textarea, [contenteditable=true]\")\n    const inset = window.innerHeight - (window.visualViewport?.height ?? window.innerHeight)\n    this.element.toggleAttribute(\"data-keyboard\", typing && inset > 150)\n  }\n}"
        }
      ]
    }
  ],
  "tokens": [
    "--accent",
    "--accent-foreground",
    "--background",
    "--border",
    "--card",
    "--card-foreground",
    "--card-input",
    "--card-secondary",
    "--destructive",
    "--font-display",
    "--font-eyebrow",
    "--font-japanese",
    "--font-mono",
    "--font-sans",
    "--foreground",
    "--input",
    "--muted",
    "--muted-foreground",
    "--popover",
    "--popover-foreground",
    "--primary",
    "--primary-foreground",
    "--ring",
    "--secondary",
    "--secondary-foreground",
    "--success",
    "--warning"
  ],
  "color_roles": {
    "--background": "Page background",
    "--foreground": "Main text and headings",
    "--card": "Cards and grouped content",
    "--card-foreground": "Text on cards",
    "--card-input": "Fields on cards; defaults to --input",
    "--card-secondary": "Secondary buttons on cards; defaults to --secondary",
    "--popover": "Menus, popovers and dialogs",
    "--popover-foreground": "Text on menus, popovers and dialogs",
    "--primary": "Primary actions, links, selected states and keyboard focus",
    "--primary-foreground": "Text and icons on a solid primary background",
    "--secondary": "Secondary buttons",
    "--secondary-foreground": "Text on secondary buttons",
    "--muted": "Subtle backgrounds: badges, code, skeletons, table headers",
    "--muted-foreground": "Secondary text, hints and placeholders",
    "--accent": "Hovered rows, menu items and inline code",
    "--accent-foreground": "Text on accent backgrounds",
    "--destructive": "Errors and destructive actions",
    "--success": "Successful actions and positive feedback",
    "--warning": "Warnings and items needing attention",
    "--border": "Dividers and outlines",
    "--input": "Input and toggle fills",
    "--ring": "Keyboard focus ring; unset, it follows --primary"
  },
  "styles": [
    "lc_icon_badge_class(size: :md, shape: :square, tone: :neutral, extra: nil)",
    "lc_avatar_class(size: :md, ink: false, linked: false, extra: nil)",
    "lc_avatar_stack_class(compact: false, extra: nil)",
    "lc_avatar_stack_row_class(extra: nil)",
    "lc_badge_class(tone: :neutral, shape: :rounded, extra: nil)",
    "lc_toggle_class(active: false, ghost: false, size: :md, extra: nil)",
    "lc_button_class(variant: :primary, tone: :default, size: :md, block: false, extra: nil)",
    "lc_select_trigger_class(size: :md, block: false, extra: nil)",
    "lc_icon_button_class(shape: :square, size: :md, variant: :ghost, tone: :default, extra: nil)",
    "lc_card_class(interactive: false, padding: :md, extra: nil)",
    "lc_choice_label_class(card: false, extra: nil)",
    "lc_checkbox_class(extra: nil)",
    "lc_radio_class(extra: nil)",
    "lc_switch_class(extra: nil)",
    "lc_dialog_class(kind = :modal, size: nil, extra: nil)",
    "lc_emoji_picker_groups",
    "lc_emoji_picker_count",
    "lc_emoji_picker_version",
    "lc_emoji_picker_search_text(emoji)",
    "lc_emoji_picker_search_name(emoji)",
    "lc_emoji_picker_search_labels(emoji)",
    "lc_emoji_picker_toneable?(emoji)",
    "lc_alert_class(extra: nil)",
    "lc_alert_icon(tone: :destructive)",
    "lc_spinner_class(size: :md, extra: nil)",
    "lc_skeleton_class(extra: nil)",
    "lc_empty_state_class(extra: nil)",
    "lc_toggle_group_class(extra: nil)",
    "lc_toggle_group_item_class(active: false, extra: nil)",
    "lc_input_class(size: :md, plain: false, extra: nil)",
    "lc_select_class(size: :md, extra: nil)",
    "lc_textarea_class(extra: nil)",
    "lc_field_class(size: :md, extra: nil)",
    "lc_field_label_class(size: :md, extra: nil)",
    "lc_glass_class(shape: :bar, thick: false, extra: nil)",
    "lc_stack_class(gap: :content, extra: nil)",
    "lc_inline_class(gap: :related, extra: nil)",
    "lc_container_class(size: :page, extra: nil)",
    "lc_section_header_class(extra: nil)",
    "lc_popover_class(align: :end, extra: nil)",
    "lc_menu_popover_class(align: :end, extra: nil)",
    "lc_menu_option_class(tone: :default, extra: nil)",
    "lc_link_class(tone: :inherit, extra: nil)",
    "lc_nav_link_class(compact: false, layout: :column, extra: nil)",
    "lc_prose_class(extra: nil)",
    "lc_table_class(extra: nil)",
    "lc_tw(*classes)",
    "lc_heading_class(size: :heading, trim: false, extra: nil)",
    "lc_text_class(size: :body, tone: :default, trim: false, extra: nil)",
    "lc_kbd_class(extra: nil)",
    "lc_shortcut_data(keys, data = {})"
  ]
}