velvetkit 0.1.0.beta

data/registry/test/components/previews/ui/text_preview.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class UI::TextPreview < ViewComponent::Preview
+  # @label Playground
+  # @param as select { choices: [p, span, div] }
+  # @param size select { choices: [xs, sm, base, lg, xl, 2xl, 3xl, 4xl] }
+  # @param weight select { choices: [normal, medium, semibold, bold] }
+  # @param tone select { choices: [default, muted, destructive] }
+  def playground(as: :p, size: :base, weight: :normal, tone: :default)
+    render(UI::Text.new(
+      as: as.to_sym,
+      size: size.to_sym,
+      weight: weight.to_sym,
+      tone: tone.to_sym
+    )) { "The quick brown fox jumps over the lazy dog." }
+  end
+
+  # @label Sizes
+  def sizes; render_with_template; end
+
+  # @label Weights
+  def weights; render_with_template; end
+
+  # @label Tones
+  def tones; render_with_template; end
+end

data/registry/test/components/previews/ui/theme_toggle_preview/in_a_header.html.erb

@@ -0,0 +1,14 @@
+<%# Mirrors the real app header: sidebar trigger left, theme toggle right. %>
+<div class="rounded-lg border overflow-hidden">
+  <header class="flex border-b h-14 shrink-0 items-center gap-2">
+    <div class="flex items-center gap-2 px-2">
+      <%= render(UI::Sidebar::Trigger.new(sidebar_id: "preview-sidebar")) %>
+    </div>
+    <div class="ml-auto flex items-center gap-2 px-2">
+      <%= render(UI::ThemeToggle.new) %>
+    </div>
+  </header>
+  <div class="p-6">
+    <%= render(UI::Text.new) { "Switch the theme with the control above — the whole page follows." } %>
+  </div>
+</div>

data/registry/test/components/previews/ui/theme_toggle_preview/palette.html.erb

@@ -0,0 +1,47 @@
+<%# Every semantic token side by side. The fastest way to review both themes:
+    flip the toggle and check nothing goes muddy or illegible. %>
+<% pairs = [
+     ["background", "foreground"], ["card", "card-foreground"],
+     ["popover", "popover-foreground"], ["primary", "primary-foreground"],
+     ["secondary", "secondary-foreground"], ["muted", "muted-foreground"],
+     ["accent", "accent-foreground"], ["sidebar", "sidebar-foreground"],
+     ["sidebar-accent", "sidebar-accent-foreground"]
+   ] %>
+<div class="flex flex-col gap-6">
+  <div class="flex items-center gap-3">
+    <%= render(UI::ThemeToggle.new) %>
+    <%= render(UI::Typography::Muted.new) { "Flip the theme, then scan for anything unreadable." } %>
+  </div>
+
+  <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
+    <% pairs.each do |bg, fg| %>
+      <div class="rounded-md border p-4" style="background: var(--<%= bg %>); color: var(--<%= fg %>);">
+        <div class="text-sm font-medium">--<%= bg %></div>
+        <div class="text-xs opacity-80">--<%= fg %></div>
+      </div>
+    <% end %>
+  </div>
+
+  <div class="flex flex-wrap items-center gap-3">
+    <%= render(UI::Button.new) { "Primary" } %>
+    <%= render(UI::Button.new(variant: :secondary)) { "Secondary" } %>
+    <%= render(UI::Button.new(variant: :outline)) { "Outline" } %>
+    <%= render(UI::Button.new(variant: :ghost)) { "Ghost" } %>
+    <%= render(UI::Button.new(variant: :destructive)) { "Destructive" } %>
+  </div>
+
+  <div class="flex flex-wrap items-center gap-3">
+    <% %i[default secondary destructive outline success warning].each do |v| %>
+      <%= render(UI::Badge.new(variant: v)) { v.to_s.capitalize } %>
+    <% end %>
+  </div>
+
+  <div class="flex flex-col gap-3 max-w-md">
+    <% %i[default destructive warning success info].each do |v| %>
+      <%= render(UI::Alert.new(variant: v)) do |alert| %>
+        <% alert.with_title { v.to_s.capitalize } %>
+        <% alert.with_description { "How the #{v} alert reads in this theme." } %>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/registry/test/components/previews/ui/theme_toggle_preview.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class UI::ThemeTogglePreview < ViewComponent::Preview
+  # @label Playground
+  # @param label text
+  def playground(label: "Change theme")
+    render(UI::ThemeToggle.new(label: label))
+  end
+
+  # @label In A Header
+  def in_a_header; render_with_template; end
+
+  # @label Palette
+  def palette; render_with_template; end
+end

data/registry/test/components/previews/ui/tooltip_preview/default.html.erb

@@ -0,0 +1,8 @@
+<%= render(UI::Tooltip.new) do |tooltip| %>
+  <% tooltip.with_trigger do %>
+    <%= tag.button("Hover me", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %>
+  <% end %>
+  <% tooltip.with_content do %>
+    Add to library
+  <% end %>
+<% end %>

data/registry/test/components/previews/ui/tooltip_preview/positions.html.erb

@@ -0,0 +1,34 @@
+<div class="flex flex-wrap gap-8 p-8">
+  <%= render(UI::Tooltip.new) do |tooltip| %>
+    <% tooltip.with_trigger do %>
+      <%= tag.button("Top", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %>
+    <% end %>
+    <% tooltip.with_content(side: :top) do %>
+      Tooltip on top
+    <% end %>
+  <% end %>
+  <%= render(UI::Tooltip.new) do |tooltip| %>
+    <% tooltip.with_trigger do %>
+      <%= tag.button("Right", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %>
+    <% end %>
+    <% tooltip.with_content(side: :right) do %>
+      Tooltip on right
+    <% end %>
+  <% end %>
+  <%= render(UI::Tooltip.new) do |tooltip| %>
+    <% tooltip.with_trigger do %>
+      <%= tag.button("Bottom", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %>
+    <% end %>
+    <% tooltip.with_content(side: :bottom) do %>
+      Tooltip on bottom
+    <% end %>
+  <% end %>
+  <%= render(UI::Tooltip.new) do |tooltip| %>
+    <% tooltip.with_trigger do %>
+      <%= tag.button("Left", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %>
+    <% end %>
+    <% tooltip.with_content(side: :left) do %>
+      Tooltip on left
+    <% end %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/tooltip_preview/with_button.html.erb

@@ -0,0 +1,8 @@
+<%= render(UI::Tooltip.new) do |tooltip| %>
+  <% tooltip.with_trigger do %>
+    <%= tag.button("Save Changes", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %>
+  <% end %>
+  <% tooltip.with_content do %>
+    Save your changes to the document
+  <% end %>
+<% end %>

data/registry/test/components/previews/ui/tooltip_preview/with_icon.html.erb

@@ -0,0 +1,10 @@
+<%= render(UI::Tooltip.new) do |tooltip| %>
+  <% tooltip.with_trigger do %>
+    <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-muted hover:bg-muted/80 cursor-pointer">
+      <%= render(UI::Icon.new(name: :info, size: :sm)) %>
+    </span>
+  <% end %>
+  <% tooltip.with_content do %>
+    More information about this feature
+  <% end %>
+<% end %>

data/registry/test/components/previews/ui/tooltip_preview.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class UI::TooltipPreview < ViewComponent::Preview
+  # @label Playground
+  # @param side select { choices: [top, right, bottom, left] }
+  # @param align select { choices: [start, center, end] }
+  def playground(side: :top, align: :center)
+    render(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger do
+        tag.button("Hover me", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md")
+      end
+      tooltip.with_content(side: side.to_sym, align: align.to_sym) do
+        "This is a tooltip"
+      end
+    end
+  end
+
+  # @label Default
+  def default; render_with_template; end
+
+  # @label Positions
+  def positions; render_with_template; end
+
+  # @label With Button
+  def with_button; render_with_template; end
+
+  # @label With Icon
+  def with_icon; render_with_template; end
+end

data/registry/test/components/previews/ui/typography_preview/article.html.erb

@@ -0,0 +1,11 @@
+<article class="max-w-2xl space-y-4">
+  <%= render(UI::Typography::H2.new) { "Release notes" } %>
+  <%= render(UI::Typography::Lead.new) { "This month's update makes reports faster to build and easier to share." } %>
+  <%= render(UI::Typography::H3.new) { "What changed" } %>
+  <%= render(UI::Text.new) do %>
+    Reports now load in under a second, and you can share one with a link. Owners can still limit sharing from
+    <%= render(UI::Typography::Code.new) { "Settings › Sharing" } %>.
+  <% end %>
+  <%= render(UI::Typography::Blockquote.new) { "We asked for faster reports and got them the same month." } %>
+  <%= render(UI::Typography::Muted.new) { "Published 21 October" } %>
+</article>

data/registry/test/components/previews/ui/typography_preview/code_and_quotes.html.erb

@@ -0,0 +1,6 @@
+<div class="max-w-xl space-y-6">
+  <%= render(UI::Text.new) do %>
+    Run <%= render(UI::Typography::Code.new) { "bin/rails generate velvetkit:add dialog" } %> to add a dialog.
+  <% end %>
+  <%= render(UI::Typography::Blockquote.new) { "Good components disappear: you notice the work, not the widgets." } %>
+</div>

data/registry/test/components/previews/ui/typography_preview/headings.html.erb

@@ -0,0 +1,6 @@
+<div class="space-y-4">
+  <%= render(UI::Typography::H1.new) { "Heading 1" } %>
+  <%= render(UI::Typography::H2.new) { "Heading 2" } %>
+  <%= render(UI::Typography::H3.new) { "Heading 3" } %>
+  <%= render(UI::Typography::H4.new) { "Heading 4" } %>
+</div>

data/registry/test/components/previews/ui/typography_preview/text_styles.html.erb

@@ -0,0 +1,7 @@
+<div class="max-w-xl space-y-4">
+  <%= render(UI::Typography::Lead.new) { "Lead: an introduction that sets up the page in a sentence or two." } %>
+  <%= render(UI::Typography::Large.new) { "Large: a line that needs a little more weight." } %>
+  <%= render(UI::Text.new) { "Body text, for most of what a page says." } %>
+  <%= render(UI::Typography::Muted.new) { "Muted: secondary detail, like a caption or a hint." } %>
+  <%= render(UI::Typography::Small.new) { "Small: a label or fine print." } %>
+</div>

data/registry/test/components/previews/ui/typography_preview.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class UI::TypographyPreview < ViewComponent::Preview
+  # @label Headings
+  def headings
+    render_with_template
+  end
+
+  # @label Text styles
+  def text_styles
+    render_with_template
+  end
+
+  # @label Code and quotes
+  def code_and_quotes
+    render_with_template
+  end
+
+  # @label An article
+  def article
+    render_with_template
+  end
+end

data/registry/test/components/ui/accordion/content_test.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Accordion::ContentTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def content_el
+    page.find("[data-ui--accordion-target='content']")
+  end
+
+  def test_renders_collapsed_by_default
+    render_inline(UI::Accordion::Content.new) { "Body" }
+    assert_equal "closed", content_el["data-state"]
+    assert_includes content_el[:class], "grid-rows-[0fr]"
+  end
+
+  def test_has_region_role
+    render_inline(UI::Accordion::Content.new) { "Body" }
+    assert_equal "region", content_el[:role]
+  end
+
+  def test_aria_labelledby_when_trigger_id_provided
+    render_inline(UI::Accordion::Content.new(trigger_id: "trigger-1")) { "Body" }
+    assert_equal "trigger-1", content_el["aria-labelledby"]
+  end
+
+  def test_auto_generated_id
+    render_inline(UI::Accordion::Content.new) { "Body" }
+    assert content_el[:id].present?
+    assert content_el[:id].start_with?("ui-accordion-content-")
+  end
+
+  def test_custom_id_preserved
+    render_inline(UI::Accordion::Content.new(id: "my-content")) { "Body" }
+    assert_selector "[data-ui--accordion-target='content']#my-content"
+  end
+
+  def test_renders_content
+    render_inline(UI::Accordion::Content.new) { "Body text" }
+    assert_selector "[data-ui--accordion-target='content']", text: "Body text"
+  end
+
+  def test_wrapper_uses_grid_animation_classes
+    render_inline(UI::Accordion::Content.new) { "x" }
+    classes = content_el[:class].split
+    assert_includes classes, "grid"
+    assert_includes classes, "grid-rows-[0fr]"
+    assert_includes classes, "transition-[grid-template-rows]"
+    assert_includes classes, "duration-200"
+  end
+
+  def test_user_class_merge
+    render_inline(UI::Accordion::Content.new(class: "bg-red-500")) { "x" }
+    classes = content_el[:class].split
+    assert_includes classes, "bg-red-500"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Accordion::Content.new(data: { test_id: "content-x" })) { "x" }
+    assert_selector "[data-test-id='content-x']"
+  end
+end

data/registry/test/components/ui/accordion/item_test.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Accordion::ItemTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_div_with_item_target
+    render_inline(UI::Accordion::Item.new(value: "test")) { "Content" }
+    div = page.find("[data-ui--accordion-target='item']")
+    assert_equal "test", div["data-value"]
+    assert_equal "closed", div["data-state"]
+  end
+
+  def test_renders_trigger_slot
+    render_inline(UI::Accordion::Item.new(value: "test")) do |item|
+      item.with_trigger { "Trigger" }
+    end
+    assert_selector "button[data-ui--accordion-target='trigger']", text: "Trigger"
+  end
+
+  def test_renders_content_slot_via_with_content_alias
+    render_inline(UI::Accordion::Item.new(value: "test")) do |item|
+      item.with_content { "Body" }
+    end
+    assert_selector "[data-ui--accordion-target='content']", text: "Body", visible: :all
+  end
+
+  def test_renders_trigger_and_content_together
+    render_inline(UI::Accordion::Item.new(value: "test")) do |item|
+      item.with_trigger { "Trigger" }
+      item.with_content { "Body" }
+    end
+    assert_selector "button", text: "Trigger"
+    assert_selector "[data-ui--accordion-target='content']", text: "Body", visible: :all
+  end
+
+  def test_default_classes
+    render_inline(UI::Accordion::Item.new(value: "test")) { "x" }
+    classes = page.find("[data-ui--accordion-target='item']")[:class].split
+    assert_includes classes, "border-b"
+  end
+
+  def test_last_item_no_border
+    render_inline(UI::Accordion::Item.new(value: "test", class: "last:border-b-0")) { "x" }
+    classes = page.find("[data-ui--accordion-target='item']")[:class].split
+    assert_includes classes, "last:border-b-0"
+  end
+
+  def test_user_class_merge
+    render_inline(UI::Accordion::Item.new(value: "test", class: "my-item")) { "x" }
+    classes = page.find("[data-ui--accordion-target='item']")[:class].split
+    assert_includes classes, "my-item"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Accordion::Item.new(value: "test", data: { test_id: "item-x" })) { "x" }
+    assert_selector "[data-ui--accordion-target='item'][data-test-id='item-x']"
+  end
+end

data/registry/test/components/ui/accordion/trigger_test.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Accordion::TriggerTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_button_inside_heading
+    render_inline(UI::Accordion::Trigger.new) { "Trigger" }
+    assert_selector "h3 button", text: "Trigger"
+  end
+
+  def test_has_aria_expanded_false_by_default
+    render_inline(UI::Accordion::Trigger.new) { "x" }
+    btn = page.find("button")
+    assert_equal "false", btn["aria-expanded"]
+  end
+
+  def test_has_stimulus_target_and_action
+    render_inline(UI::Accordion::Trigger.new) { "x" }
+    btn = page.find("button")
+    assert_equal "trigger", btn["data-ui--accordion-target"]
+    assert_includes btn["data-action"], "click->ui--accordion#toggle"
+    assert_includes btn["data-action"], "keydown->ui--accordion#keydown"
+  end
+
+  def test_renders_chevron_icon
+    render_inline(UI::Accordion::Trigger.new) { "x" }
+    assert_selector "button i[data-lucide='chevron-right']"
+  end
+
+  def test_aria_controls_when_content_id_provided
+    render_inline(UI::Accordion::Trigger.new(content_id: "panel-1")) { "x" }
+    btn = page.find("button")
+    assert_equal "panel-1", btn["aria-controls"]
+  end
+
+  def test_auto_generated_id
+    render_inline(UI::Accordion::Trigger.new) { "x" }
+    btn = page.find("button")
+    assert btn[:id].present?
+    assert btn[:id].start_with?("ui-accordion-trigger-")
+  end
+
+  def test_custom_id_preserved
+    render_inline(UI::Accordion::Trigger.new(id: "my-trigger")) { "x" }
+    assert_selector "button#my-trigger"
+  end
+
+  def test_disabled
+    render_inline(UI::Accordion::Trigger.new(disabled: true)) { "x" }
+    assert_selector "button[disabled]"
+  end
+
+  def test_default_classes
+    render_inline(UI::Accordion::Trigger.new) { "x" }
+    classes = page.find("button")[:class].split
+    assert_includes classes, "group"
+    assert_includes classes, "flex"
+    assert_includes classes, "w-full"
+    assert_includes classes, "items-center"
+    assert_includes classes, "gap-3"
+    assert_includes classes, "py-2"
+    assert_includes classes, "text-sm"
+    assert_includes classes, "font-medium"
+    assert_includes classes, "text-primary"
+  end
+
+  def test_user_class_merge
+    render_inline(UI::Accordion::Trigger.new(class: "bg-red-500")) { "x" }
+    classes = page.find("button")[:class].split
+    assert_includes classes, "bg-red-500"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Accordion::Trigger.new(data: { test_id: "trig" })) { "x" }
+    assert_selector "button[data-test-id='trig']"
+  end
+end

data/registry/test/components/ui/accordion_test.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::AccordionTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def render_accordion(type: :single, default_value: "item-1")
+    render_inline(UI::Accordion.new(type: type, default_value: default_value)) do |accordion|
+      accordion.with_item(value: "item-1") do |item|
+        item.with_trigger { "Trigger 1" }
+        item.with_content { "Content 1" }
+      end
+      accordion.with_item(value: "item-2") do |item|
+        item.with_trigger { "Trigger 2" }
+        item.with_content { "Content 2" }
+      end
+    end
+  end
+
+  def test_root_carries_controller
+    render_accordion
+    root = page.find("[data-controller~='ui--accordion']")
+    assert root.present?
+  end
+
+  def test_single_type_value
+    render_accordion(type: :single)
+    root = page.find("[data-controller~='ui--accordion']")
+    assert_equal "single", root["data-ui--accordion-type-value"]
+  end
+
+  def test_multiple_type_value
+    render_accordion(type: :multiple, default_value: [ "item-1", "item-2" ])
+    root = page.find("[data-controller~='ui--accordion']")
+    assert_equal "multiple", root["data-ui--accordion-type-value"]
+  end
+
+  def test_default_single_value
+    render_accordion(default_value: "item-1")
+    root = page.find("[data-controller~='ui--accordion']")
+    assert_includes root["data-ui--accordion-values-value"], "item-1"
+  end
+
+  def test_no_default_value_yields_empty_array
+    render_inline(UI::Accordion.new) do |accordion|
+      accordion.with_item(value: "x") { |i| i.with_trigger { "T" }; i.with_content { "C" } }
+    end
+    root = page.find("[data-controller~='ui--accordion']")
+    assert_equal "[]", root["data-ui--accordion-values-value"]
+  end
+
+  def test_renders_items
+    render_accordion
+    items = page.all("[data-ui--accordion-target='item']")
+    assert_equal 2, items.size
+  end
+
+  def test_root_classes
+    render_accordion
+    root = page.find("[data-controller~='ui--accordion']")
+    classes = root[:class].split
+    assert_includes classes, "w-full"
+  end
+
+  def test_user_class_merge
+    render_inline(UI::Accordion.new(class: "my-custom")) do |accordion|
+      accordion.with_item(value: "x") { |i| i.with_trigger { "T" }; i.with_content { "C" } }
+    end
+    classes = page.find("[data-controller~='ui--accordion']")[:class].split
+    assert_includes classes, "my-custom"
+    assert_includes classes, "w-full"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Accordion.new(data: { test_id: "acc-x" })) do |accordion|
+      accordion.with_item(value: "x") { |i| i.with_trigger { "T" }; i.with_content { "C" } }
+    end
+    assert_selector "[data-controller~='ui--accordion'][data-test-id='acc-x']"
+  end
+
+  def test_auto_generated_id
+    render_accordion
+    root = page.find("[data-controller~='ui--accordion']")
+    assert root[:id].present?
+    assert root[:id].start_with?("ui-accordion-")
+  end
+
+  def test_custom_id_preserved
+    render_inline(UI::Accordion.new(id: "my-accordion")) do |accordion|
+      accordion.with_item(value: "x") { |i| i.with_trigger { "T" }; i.with_content { "C" } }
+    end
+    assert_selector "[data-controller~='ui--accordion']#my-accordion"
+  end
+end

data/registry/test/components/ui/alert/description_test.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Alert::DescriptionTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_div
+    render_inline(UI::Alert::Description.new) { "Description" }
+    assert_selector "div", text: "Description"
+  end
+
+  def test_default_classes
+    render_inline(UI::Alert::Description.new) { "x" }
+    classes = page.find("div")[:class].split
+    assert_includes classes, "text-sm"
+    assert_includes classes, "leading-relaxed"
+  end
+
+  def test_user_class_override
+    render_inline(UI::Alert::Description.new(class: "text-base")) { "Custom" }
+    classes = page.find("div")[:class].split
+    refute_includes classes, "text-sm"
+    assert_includes classes, "text-base"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Alert::Description.new(id: "alert-desc", data: { test: "d" })) { "y" }
+    assert_selector "div#alert-desc[data-test='d']"
+  end
+
+  def test_content_slot
+    render_inline(UI::Alert::Description.new) { "Full description" }
+    assert_equal "Full description", page.find("div").text.strip
+  end
+end

data/registry/test/components/ui/alert/title_test.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Alert::TitleTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_h5
+    render_inline(UI::Alert::Title.new) { "Title" }
+    assert_selector "h5", text: "Title"
+  end
+
+  def test_default_classes
+    render_inline(UI::Alert::Title.new) { "x" }
+    classes = page.find("h5")[:class].split
+    assert_includes classes, "font-medium"
+    assert_includes classes, "leading-none"
+    assert_includes classes, "tracking-tight"
+  end
+
+  def test_user_class_override
+    render_inline(UI::Alert::Title.new(class: "font-normal")) { "Custom" }
+    classes = page.find("h5")[:class].split
+    refute_includes classes, "font-medium"
+    assert_includes classes, "font-normal"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Alert::Title.new(id: "alert-title", data: { test: "t" })) { "y" }
+    assert_selector "h5#alert-title[data-test='t']"
+  end
+
+  def test_content_slot
+    render_inline(UI::Alert::Title.new) { "My Title" }
+    assert_equal "My Title", page.find("h5").text.strip
+  end
+end