velvetkit 0.1.0.beta → 0.1.0

data/registry/app/javascript/controllers/ui/table_of_contents_controller.ts

@@ -0,0 +1,179 @@
+import { Controller } from '@hotwired/stimulus';
+
+// Scrollspy: marks the link whose section was scrolled to last and slides the
+// indicator beside it.
+export default class extends Controller<HTMLElement> {
+  static targets = ['link', 'indicator', 'rail'];
+  static values = {
+    offset: { type: Number, default: 80 },
+    container: String,
+  };
+
+  declare readonly linkTargets: HTMLAnchorElement[];
+  declare readonly indicatorTarget: HTMLElement;
+  declare readonly railTarget: HTMLElement;
+  declare offsetValue: number;
+  declare containerValue: string;
+
+  private scroller: HTMLElement | Window = window;
+  private active: HTMLAnchorElement | null = null;
+  private frame = 0;
+  private settleFrame = 0;
+  private locked = false;
+  private unlockTimer = 0;
+  private resizeObserver?: ResizeObserver;
+
+  connect() {
+    this.scroller =
+      (this.containerValue && document.querySelector<HTMLElement>(this.containerValue)) || window;
+    this.scroller.addEventListener('scroll', this.schedule, { passive: true });
+    this.scroller.addEventListener('scrollend', this.unlock);
+    this.resizeObserver = new ResizeObserver(this.schedule);
+    this.resizeObserver.observe(this.element);
+    this.update();
+    // The first state is drawn without transitions (data-settling); let them
+    // back in once it has been painted.
+    this.settleFrame = requestAnimationFrame(() => {
+      this.settleFrame = requestAnimationFrame(() => delete this.element.dataset.settling);
+    });
+  }
+
+  disconnect() {
+    this.scroller.removeEventListener('scroll', this.schedule);
+    this.scroller.removeEventListener('scrollend', this.unlock);
+    this.resizeObserver?.disconnect();
+    cancelAnimationFrame(this.frame);
+    cancelAnimationFrame(this.settleFrame);
+    clearTimeout(this.unlockTimer);
+  }
+
+  // A click scrolls the section to the offset line itself: left to the browser
+  // (or Turbo), the jump scrolls every ancestor, the window included, and lands
+  // wherever scroll-margin says rather than where the section counts as reached.
+  // The link is marked at once and held while the scroll runs, so the
+  // indicator doesn't stop at every section on the way.
+  select(event: MouseEvent) {
+    if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    const link = event.currentTarget as HTMLAnchorElement;
+    const target = this.targetOf(link);
+    if (!target) return;
+
+    event.preventDefault();
+    this.scrollToTarget(target);
+    if (this.scroller instanceof Window) history.replaceState(history.state, '', link.hash);
+    // Keyboard focus continues from the section, as it would after a jump.
+    if (!target.hasAttribute('tabindex')) target.setAttribute('tabindex', '-1');
+    target.focus({ preventScroll: true });
+
+    this.setActive(link);
+    this.locked = true;
+    clearTimeout(this.unlockTimer);
+    // scrollend never fires when the section is already in place, and some
+    // browsers don't send it at all.
+    this.unlockTimer = window.setTimeout(this.unlock, 1000);
+  }
+
+  private unlock = () => {
+    this.locked = false;
+  };
+
+  private schedule = () => {
+    if (!this.frame) this.frame = requestAnimationFrame(this.update);
+  };
+
+  private update = () => {
+    this.frame = 0;
+    if (this.locked) {
+      this.moveIndicator();
+      return;
+    }
+
+    const sections = this.sections();
+    if (sections.length === 0) return this.setActive(null);
+
+    // The last section whose top has passed the line; the first until one has.
+    // At the very bottom, the last section, which may be too short to reach it.
+    const line = this.scrollerTop() + this.offsetValue;
+    let current = sections[0];
+    if (this.atBottom()) {
+      current = sections[sections.length - 1];
+    } else {
+      for (const section of sections) {
+        if (section.top <= line) current = section;
+      }
+    }
+    this.setActive(current.link);
+  };
+
+  private targetOf(link: HTMLAnchorElement) {
+    const id = decodeURIComponent(link.hash.slice(1));
+    return id ? document.getElementById(id) : null;
+  }
+
+  private scrollToTarget(target: HTMLElement) {
+    const behavior = matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';
+    const distance = target.getBoundingClientRect().top - this.scrollerTop() - this.offsetValue;
+    this.scroller.scrollBy({ top: distance, behavior });
+  }
+
+  // Links paired with the sections they point at, in the order they appear.
+  private sections() {
+    return this.linkTargets
+      .map((link) => {
+        const target = this.targetOf(link);
+        return target && target.getClientRects().length > 0
+          ? { link, top: target.getBoundingClientRect().top }
+          : null;
+      })
+      .filter((section): section is { link: HTMLAnchorElement; top: number } => section !== null)
+      .sort((a, b) => a.top - b.top);
+  }
+
+  private scrollerTop() {
+    return this.scroller instanceof Window ? 0 : this.scroller.getBoundingClientRect().top;
+  }
+
+  private atBottom() {
+    const el = this.scroller instanceof Window ? document.documentElement : this.scroller;
+    return el.scrollHeight > el.clientHeight && el.scrollTop + el.clientHeight >= el.scrollHeight - 2;
+  }
+
+  private setActive(link: HTMLAnchorElement | null) {
+    if (link !== this.active) {
+      this.active = link;
+      const ancestors = link ? this.ancestorsOf(link) : [];
+      this.linkTargets.forEach((l) => {
+        l.dataset.state = l === link ? 'active' : ancestors.includes(l) ? 'ancestor' : 'inactive';
+        if (l === link) l.setAttribute('aria-current', 'location');
+        else l.removeAttribute('aria-current');
+      });
+      this.dispatch('change', { detail: { href: link?.getAttribute('href') ?? null } });
+    }
+    this.moveIndicator();
+  }
+
+  // Links of the items this link's item is nested in.
+  private ancestorsOf(link: HTMLAnchorElement) {
+    const links: HTMLAnchorElement[] = [];
+    let item = link.closest('li')?.parentElement?.closest('li');
+    while (item && this.element.contains(item)) {
+      const parent = item.querySelector<HTMLAnchorElement>(':scope > a');
+      if (parent) links.push(parent);
+      item = item.parentElement?.closest('li');
+    }
+    return links;
+  }
+
+  private moveIndicator() {
+    const indicator = this.indicatorTarget;
+    if (!this.active) {
+      indicator.dataset.state = 'hidden';
+      return;
+    }
+    const link = this.active.getBoundingClientRect();
+    const rail = this.railTarget.getBoundingClientRect();
+    indicator.style.transform = `translateY(${link.top - rail.top}px)`;
+    indicator.style.height = `${link.height}px`;
+    indicator.dataset.state = 'visible';
+  }
+}

data/registry/components.yml

@@ -43,6 +43,8 @@ components:
     description: A bordered container with header, content and footer.
   checkbox:
     description: A checkbox with label, standalone or bound to a form builder.
+  collapsible:
+    description: A section that opens and closes under its trigger, like a branch of a nav tree.
   data_grid:
     description: A sortable, filterable, server-paged table on AG Grid.
   date_picker:
@@ -51,12 +53,14 @@ components:
     description: A modal dialog on the native <dialog> element.
   divider:
     description: A horizontal or vertical rule, optionally labelled.
+  form_field:
+    description: A label, hint and error message wired to any form control.
   icon:
     description: A Lucide icon.
   image:
     description: An image with consistent sizing and corner radius.
   input:
-    description: A text field with label, hint and error, standalone or with a form builder.
+    description: A text field with label, hint and error message, standalone or with a form builder.
   input_group:
     description: A text field with addons before or after it.
   label:
@@ -88,10 +92,14 @@ components:
     description: An on/off toggle.
   table:
     description: A styled table with header, rows and caption.
+  table_of_contents:
+    description: An "On this page" list that follows the reader's scroll.
   tabs:
     description: Tabbed panels with keyboard navigation.
   text:
     description: Body text in set sizes, weights and tones.
+  textarea:
+    description: A multi-line text field with label, hint and error, that can grow with its text.
   theme_toggle:
     description: A light/dark/system theme switcher.
     files:

data/registry/config/locales/velvetkit.en.yml

@@ -32,6 +32,8 @@ en:
       hide: 'Hide password'
     sidebar:
       toggle: 'Toggle sidebar'
+    table_of_contents:
+      label: 'On this page'
     pagination:
       label: 'Pages'
       summary: 'Showing %{from}–%{to} of %{count}'

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

@@ -0,0 +1,18 @@
+<%# A sidebar tree: branches open on click, and the one holding the current page starts open. %>
+<nav aria-label="Documentation" class="w-56 text-sm">
+  <%= render(UI::Collapsible.new(open: true, trigger_class: "font-medium hover:bg-accent", content_class: "ml-3 space-y-0.5 border-l pl-2")) do |c| %>
+    <% c.with_trigger { "Forms" } %>
+    <a href="#" class="block rounded-md px-3 py-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">Input</a>
+    <a href="#" aria-current="page" class="block rounded-md bg-primary/10 px-3 py-1.5 font-medium text-primary">Textarea</a>
+    <%= render(UI::Collapsible.new(trigger_class: "text-muted-foreground hover:bg-accent hover:text-foreground", content_class: "ml-3 space-y-0.5 border-l pl-2")) do |inner| %>
+      <% inner.with_trigger { "Choices" } %>
+      <a href="#" class="block rounded-md px-3 py-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">Select</a>
+      <a href="#" class="block rounded-md px-3 py-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">Checkbox</a>
+    <% end %>
+  <% end %>
+  <%= render(UI::Collapsible.new(trigger_class: "font-medium hover:bg-accent", content_class: "ml-3 space-y-0.5 border-l pl-2")) do |c| %>
+    <% c.with_trigger { "Overlays" } %>
+    <a href="#" class="block rounded-md px-3 py-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">Dialog</a>
+    <a href="#" class="block rounded-md px-3 py-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">Sheet</a>
+  <% end %>
+</nav>

data/registry/test/components/previews/ui/collapsible_preview/show_more.html.erb

@@ -0,0 +1,7 @@
+<div class="max-w-md rounded-lg border p-4">
+  <p class="text-sm">Payments are collected on the 1st of each month.</p>
+  <%= render(UI::Collapsible.new(size: :sm, class: "mt-2", trigger_class: "w-auto -ml-2 text-primary hover:underline")) do |c| %>
+    <% c.with_trigger { "How refunds work" } %>
+    <p class="px-0 text-sm text-muted-foreground">Cancel within 14 days for a full refund. After that, the rest of the month is credited to your next invoice.</p>
+  <% end %>
+</div>

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class UI::CollapsiblePreview < ViewComponent::Preview
+  # @label Playground
+  # @param open toggle
+  # @param size select { choices: [sm, default, lg] }
+  def playground(open: false, size: :default)
+    render(UI::Collapsible.new(open: open, size: size.to_sym, class: "max-w-xs")) do |c|
+      c.with_trigger { "Advanced settings" }
+      "Hidden until opened."
+    end
+  end
+
+  # @label Navigation tree
+  def default; render_with_template; end
+
+  # @label Show more
+  def show_more; render_with_template; end
+end

data/registry/test/components/previews/ui/form_field_preview/custom_control.html.erb

@@ -0,0 +1,6 @@
+<div class="max-w-md">
+  <%= render(UI::FormField.new(label: "Accent colour", hint: "Used for your avatar and links.")) do |field| %>
+    <%= tag.input(type: "color", name: "accent", value: "#4d1a7f",
+                  class: "h-9 w-16 rounded-md border border-input bg-background p-1", **field.control_attributes) %>
+  <% end %>
+</div>

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

@@ -0,0 +1,7 @@
+<div class="flex flex-col gap-6 max-w-md">
+  <%= render(UI::Input.new(type: :email, label: "Email", hint: "We'll only use it to send receipts.", placeholder: "you@example.com")) %>
+  <%= render(UI::Input.new(label: "Username", value: "a", error: "Use at least 3 characters.")) %>
+  <%= render(UI::Textarea.new(label: "Bio", hint: "Shown on your public profile.", rows: 3)) %>
+  <%= render(UI::NativeSelect.new(label: "Team", options: %w[Design Engineering], prompt: "Choose a team", error: "Choose a team to continue.")) %>
+  <%= render(UI::Select.new(label: "Plan", options: %w[Free Pro Team], hint: "You can change plans at any time.")) %>
+</div>

data/registry/test/components/previews/ui/form_field_preview/model_errors.html.erb

@@ -0,0 +1,11 @@
+<%# In an app, @signup comes back from a failed save. Bound fields show its errors on their own. %>
+<% signup = Struct.new(:email, :bio) do
+     include ActiveModel::Validations
+     def self.model_name = ActiveModel::Name.new(self, nil, "Signup")
+     validates :email, presence: true
+     validates :bio, length: { minimum: 20 }
+   end.new("", "Hi").tap(&:validate) %>
+<%= form_with(model: signup, url: "#", class: "flex flex-col gap-6 max-w-md") do |f| %>
+  <%= render(UI::Input.new(form: f, field: :email, type: :email)) %>
+  <%= render(UI::Textarea.new(form: f, field: :bio, hint: "A sentence or two about you.")) %>
+<% end %>

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

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class UI::FormFieldPreview < ViewComponent::Preview
+  # @label On the built-in controls
+  def default; render_with_template; end
+
+  # @label Errors from the model
+  def model_errors; render_with_template; end
+
+  # @label Your own control
+  def custom_control; render_with_template; end
+end

data/registry/test/components/previews/ui/input_preview/hint_and_error.html.erb

@@ -0,0 +1,4 @@
+<div class="flex flex-col gap-6 max-w-sm">
+  <%= render(UI::Input.new(label: "Email", type: :email, hint: "We'll only use it to send receipts.")) %>
+  <%= render(UI::Input.new(label: "Username", value: "a", error: "Use at least 3 characters.")) %>
+</div>

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

@@ -30,4 +30,7 @@ class UI::InputPreview < ViewComponent::Preview
 
   # @label With Labels
   def with_labels; render_with_template; end
+
+  # @label Hint and Error
+  def hint_and_error; render_with_template; end
 end

data/registry/test/components/previews/ui/sidebar_preview/_brand.html.erb

@@ -4,11 +4,11 @@
     the icons. The images are velvetkit.com's; in an app, put its own logo here. %>
 <div class="flex h-9 min-w-0 items-center px-2 group-data-[collapsible=icon]:px-0">
   <span class="group-data-[collapsible=icon]:hidden">
-    <img src="/velvetkit/logo-light.png" alt="VelvetKit" class="h-8 w-auto max-w-none dark:hidden">
-    <img src="/velvetkit/logo-dark.png" alt="VelvetKit" class="hidden h-8 w-auto max-w-none dark:block">
+    <img src="/velvetkit/logo-light.svg" alt="VelvetKit" class="h-8 w-auto max-w-none dark:hidden">
+    <img src="/velvetkit/logo-dark.svg" alt="VelvetKit" class="hidden h-8 w-auto max-w-none dark:block">
   </span>
   <span class="hidden size-8 shrink-0 items-center justify-center group-data-[collapsible=icon]:flex">
-    <img src="/velvetkit/mark-light.png" alt="VelvetKit" class="size-7 max-w-none shrink-0 object-contain dark:hidden">
-    <img src="/velvetkit/mark-dark.png" alt="VelvetKit" class="hidden size-7 max-w-none shrink-0 object-contain dark:block">
+    <img src="/velvetkit/mark-light.svg" alt="VelvetKit" class="size-7 max-w-none shrink-0 object-contain dark:hidden">
+    <img src="/velvetkit/mark-dark.svg" alt="VelvetKit" class="hidden size-7 max-w-none shrink-0 object-contain dark:block">
   </span>
 </div>

data/registry/test/components/previews/ui/sidebar_preview/with_dropdown_header.html.erb

@@ -1,7 +1,7 @@
 <% brand = capture do %>
   <%= render(UI::Menu.new) do |menu| %>
     <% menu.with_trigger(variant: :ghost, class: "w-full justify-start px-2 h-auto py-1.5 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0") do %>
-      <img src="/velvetkit/mark-light.png" alt="" class="size-8 max-w-none shrink-0 object-contain dark:hidden"><img src="/velvetkit/mark-dark.png" alt="" class="hidden size-8 max-w-none shrink-0 object-contain dark:block">
+      <img src="/velvetkit/mark-light.svg" alt="" class="size-8 max-w-none shrink-0 object-contain dark:hidden"><img src="/velvetkit/mark-dark.svg" alt="" class="hidden size-8 max-w-none shrink-0 object-contain dark:block">
       <div class="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
         <span class="truncate font-medium">VelvetKit</span>
         <span class="truncate text-xs text-muted-foreground">Workspace</span>

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

@@ -0,0 +1,41 @@
+<%# The article scrolls in its own box here; on a real page leave out `container:`. %>
+<div class="grid grid-cols-[1fr_14rem] gap-8 max-w-3xl">
+  <div id="toc-default-article" class="h-96 overflow-y-auto rounded-md border p-6 space-y-6">
+    <section class="space-y-2">
+      <h2 id="toc-default-process" class="text-lg font-semibold">Contribution process</h2>
+      <p class="text-sm text-muted-foreground">Every change goes through the same four steps.</p>
+    </section>
+    <% [
+      ["toc-default-issue", "1. Create an issue or open a merge request"],
+      ["toc-default-classify", "2. Classify as core or extended"],
+      ["toc-default-support", "3. Define level of support"],
+      ["toc-default-merge", "4. Merge your changes"]
+    ].each do |id, heading| %>
+      <section class="space-y-2">
+        <h3 id="<%= id %>" class="font-medium"><%= heading %></h3>
+        <p class="text-sm text-muted-foreground">Describe the change and why it matters. Link related issues, add screenshots for visual changes, and note anything reviewers should try by hand.</p>
+        <p class="text-sm text-muted-foreground">Keep each change focused on one thing, so it is quick to review and easy to revert.</p>
+      </section>
+    <% end %>
+    <section class="space-y-2">
+      <h2 id="toc-default-resources" class="text-lg font-semibold">Resources</h2>
+      <p class="text-sm text-muted-foreground">Guides, design files and the component checklist.</p>
+      <p class="text-sm text-muted-foreground">Ask in the discussion board when something is unclear.</p>
+    </section>
+    <section class="min-h-80 space-y-2">
+      <h2 id="toc-default-conduct" class="text-lg font-semibold">Code of conduct</h2>
+      <p class="text-sm text-muted-foreground">Be kind, assume good intent, and keep feedback about the work.</p>
+    </section>
+  </div>
+
+  <%= render(UI::TableOfContents.new(title: "On this page", container: "#toc-default-article", offset: 24)) do |toc| %>
+    <% toc.with_item(href: "#toc-default-process", text: "Contribution process") do |item| %>
+      <% item.with_item(href: "#toc-default-issue", text: "1. Create an issue or open a merge request") %>
+      <% item.with_item(href: "#toc-default-classify", text: "2. Classify as core or extended") %>
+      <% item.with_item(href: "#toc-default-support", text: "3. Define level of support") %>
+      <% item.with_item(href: "#toc-default-merge", text: "4. Merge your changes") %>
+    <% end %>
+    <% toc.with_item(href: "#toc-default-resources", text: "Resources") %>
+    <% toc.with_item(href: "#toc-default-conduct", text: "Code of conduct") %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/table_of_contents_preview/flat.html.erb

@@ -0,0 +1,17 @@
+<div class="grid grid-cols-[1fr_12rem] gap-8 max-w-2xl">
+  <div id="toc-flat-article" class="h-72 overflow-y-auto rounded-md border p-6 space-y-6 [&>section:last-child]:min-h-60">
+    <% %w[Install Configure Theme Deploy].each do |heading| %>
+      <section class="space-y-2">
+        <h2 id="toc-flat-<%= heading.downcase %>" class="font-semibold"><%= heading %></h2>
+        <p class="text-sm text-muted-foreground">Each section starts with what you need and ends with how to check it worked.</p>
+        <p class="text-sm text-muted-foreground">Commands run from the root of your Rails app.</p>
+      </section>
+    <% end %>
+  </div>
+
+  <%= render(UI::TableOfContents.new(container: "#toc-flat-article", offset: 24)) do |toc| %>
+    <% %w[Install Configure Theme Deploy].each do |heading| %>
+      <% toc.with_item(href: "#toc-flat-#{heading.downcase}", text: heading) %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class UI::TableOfContentsPreview < ViewComponent::Preview
+  # @label Nested sections
+  def default; render_with_template; end
+
+  # @label Flat
+  def flat; render_with_template; end
+end

data/registry/test/components/previews/ui/textarea_preview/autogrow.html.erb

@@ -0,0 +1,4 @@
+<div class="max-w-md">
+  <%= render(UI::Textarea.new(label: "Comment", autogrow: true, class: "max-h-60",
+                              placeholder: "Type a few lines; the box grows with them, up to a limit.")) %>
+</div>

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

@@ -0,0 +1,3 @@
+<div class="max-w-md">
+  <%= render(UI::Textarea.new(label: "Feedback", placeholder: "What could we do better?", rows: 4)) %>
+</div>

data/registry/test/components/previews/ui/textarea_preview/sizes.html.erb

@@ -0,0 +1,5 @@
+<div class="flex flex-col gap-3 max-w-md">
+  <%= render(UI::Textarea.new(size: :sm, rows: 2, placeholder: "Small")) %>
+  <%= render(UI::Textarea.new(rows: 2, placeholder: "Default")) %>
+  <%= render(UI::Textarea.new(size: :lg, rows: 2, placeholder: "Large")) %>
+</div>

data/registry/test/components/previews/ui/textarea_preview/states.html.erb

@@ -0,0 +1,7 @@
+<div class="flex flex-col gap-4 max-w-md">
+  <%= render(UI::Textarea.new(label: "Bio", value: "Rails developer who likes accessible UI.")) %>
+  <%= render(UI::Textarea.new(label: "Reason", required: true, placeholder: "Required")) %>
+  <%= render(UI::Textarea.new(label: "Summary", error: true, value: "Too short")) %>
+  <%= render(UI::Textarea.new(label: "Notes", disabled: true, value: "Locked after review")) %>
+  <%= render(UI::Textarea.new(label: "Fixed size", resize: :none, placeholder: "Can't be resized")) %>
+</div>

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

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+class UI::TextareaPreview < ViewComponent::Preview
+  # @label Playground
+  # @param size     select { choices: [sm, default, lg] }
+  # @param resize   select { choices: [vertical, none, both] }
+  # @param rows     number
+  # @param autogrow toggle
+  # @param label    text
+  # @param required toggle
+  # @param error    toggle
+  # @param disabled toggle
+  # @param placeholder text
+  def playground(size: :default, resize: :vertical, rows: 3, autogrow: false,
+                 label: "Message", required: false, error: false, disabled: false,
+                 placeholder: "Write a message…")
+    render(UI::Textarea.new(size: size.to_sym, resize: resize.to_sym, rows: rows.to_i, autogrow: autogrow,
+                            label: label, required: required, error: error, disabled: disabled,
+                            placeholder: placeholder))
+  end
+
+  # @label Default
+  def default; render_with_template; end
+
+  # @label Grows with its text
+  def autogrow; render_with_template; end
+
+  # @label States
+  def states; render_with_template; end
+
+  # @label All Sizes
+  def sizes; render_with_template; end
+end

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

@@ -233,4 +233,28 @@ class UI::CheckboxTest < ViewComponent::TestCase
     render_inline(UI::Checkbox.new(form: form_builder_for(User.new), field: :remember_me, label: false))
     assert_no_selector "label"
   end
+
+  def test_error_message_shows_under_the_box_and_describes_it
+    render_inline(UI::Checkbox.new(name: "terms", label: "I accept the terms", id: "terms", error: "You must accept the terms"))
+    box = page.find("input#terms[aria-invalid='true']")
+    assert_equal "terms-error", box["aria-describedby"]
+    assert_selector "div > label + p#terms-error.text-destructive", text: "You must accept the terms"
+  end
+
+  def test_model_errors_show_under_a_bound_checkbox
+    record = Struct.new(:terms) do
+      include ActiveModel::Validations
+      def self.model_name = ActiveModel::Name.new(self, nil, "Signup")
+      validates :terms, acceptance: { accept: "1" }
+    end.new("0").tap(&:validate)
+    form = ActionView::Helpers::FormBuilder.new(:signup, record, vc_test_controller.view_context, {})
+    render_inline(UI::Checkbox.new(form: form, field: :terms))
+    assert_selector "input[type='checkbox'][aria-invalid='true']"
+    assert_selector "p.text-destructive", text: "Terms must be accepted"
+  end
+
+  def test_no_messages_no_wrapper
+    render_inline(UI::Checkbox.new(name: "terms", label: "Terms"))
+    refute_selector "div"
+  end
 end

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

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::CollapsibleTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def render_collapsible(**opts)
+    render_inline(UI::Collapsible.new(**opts)) do |c|
+      c.with_trigger { "Forms" }
+      "<a href='/input'>Input</a>".html_safe
+    end
+  end
+
+  def test_renders_details_with_summary_trigger
+    render_collapsible
+    assert_selector "details > summary", text: "Forms"
+    assert_selector "details > summary + div > a[href='/input']", visible: :all
+  end
+
+  def test_closed_by_default
+    render_collapsible
+    assert_selector "details:not([open])", visible: :all
+  end
+
+  def test_open
+    render_collapsible(open: true)
+    assert_selector "details[open]"
+    assert_selector "a[href='/input']", text: "Input"
+  end
+
+  def test_chevron_is_decorative_and_turns_when_open
+    render_collapsible
+    icon = page.find("summary [aria-hidden='true']", visible: :all)
+    assert_includes icon[:class].split, "group-open/collapsible:rotate-90"
+  end
+
+  def test_hides_the_native_marker
+    render_collapsible
+    classes = page.find("summary")[:class].split
+    assert_includes classes, "list-none"
+    assert_includes classes, "[&::-webkit-details-marker]:hidden"
+  end
+
+  def test_sizes
+    render_collapsible(size: :sm)
+    assert_includes page.find("summary")[:class].split, "text-xs"
+  end
+
+  def test_trigger_and_content_classes
+    render_collapsible(trigger_class: "font-semibold", content_class: "ml-3 border-l")
+    assert_includes page.find("summary")[:class].split, "font-semibold"
+    assert_includes page.find("details > div", visible: :all)[:class].split, "border-l"
+  end
+
+  def test_html_attrs_and_class_on_details
+    render_collapsible(id: "forms-tree", class: "mt-2", data: { test_id: "tree" })
+    details = page.find("details#forms-tree[data-test-id='tree']", visible: :all)
+    assert_includes details[:class].split, "mt-2"
+    assert_includes details[:class].split, "group/collapsible"
+  end
+
+  def test_nests
+    render_inline(UI::Collapsible.new(open: true)) do |outer|
+      outer.with_trigger { "Components" }
+      vc_test_controller.view_context.render(UI::Collapsible.new) { |inner| inner.with_trigger { "Forms" } }
+    end
+    assert_selector "details[open] > div > details > summary", text: "Forms"
+  end
+end

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

@@ -165,4 +165,18 @@ class UI::DatePickerTest < ViewComponent::TestCase
       assert_includes arrow.text(:all), I18n.t(key)
     end
   end
+
+  def test_error_message_shows_under_the_hint_and_describes_the_input
+    render_inline(UI::DatePicker.new(name: "starts_on", label: "Start date", error: "Pick a date in the future"))
+    input = page.find("input[type='text'][aria-invalid='true']")
+    assert_equal "#{input[:id]}-hint #{input[:id]}-error", input["aria-describedby"]
+    assert_selector "p##{input[:id]}-error.text-destructive", text: "Pick a date in the future"
+  end
+
+  def test_no_error_only_the_hint_describes
+    render_inline(UI::DatePicker.new(name: "starts_on"))
+    input = page.find("input[type='text']")
+    assert_equal "#{input[:id]}-hint", input["aria-describedby"]
+    refute input["aria-invalid"]
+  end
 end

data/registry/test/components/ui/form_field/messages_test.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::FormField::MessagesTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_hint_and_error_with_ids
+    render_inline(UI::FormField::Messages.new(UI::FormField.new(hint: "Hint", error: "Error", for: "f")))
+    assert_selector "p#f-hint", text: "Hint"
+    assert_selector "p#f-error", text: "Error"
+  end
+
+  def test_renders_nothing_without_messages
+    render_inline(UI::FormField::Messages.new(UI::FormField.new(error: true, for: "f")))
+    refute_selector "p"
+  end
+end