@signal9/era-ui 1.1.2

package/dist/generated-docs/llms-full.txt

@@ -0,0 +1,3104 @@
+# era-ui
+
+> A Svelte 5 + Bits UI component library. Every surface — heights, paddings, radii, gaps — derives from a single spacing atom, so density is a one-attribute override at any scope.
+
+## Using the library
+
+```ts
+import { Button, Table, Select } from "@sig-nine/era-ui";
+import "@sig-nine/era-ui/css";
+```
+
+Named exports wrap a single primitive (`Button`, `Badge`, `Chip`, `Input`, …). Namespace exports compose primitives via sub-components (`Table.Root`, `Table.Row`, `Select.Trigger`, `Dialog.Content`, …). Every wrapper forwards unknown props to its underlying element or bits-ui primitive, so standard HTML attributes (`class`, `style`, event handlers, `aria-*`, `data-*`) work without ceremony.
+
+## Scoped overrides
+
+Five orthogonal axes are exposed as HTML attributes on any ancestor. The entire subtree re-tiers through CSS inheritance — no JS, no context provider.
+
+- `data-mode`: **dense** (default) · balanced · spacious · touch — adjusts the spacing atom (`--era-sp`).
+- `data-surface`: **flat** (default) · glass · bevel · cartoon — swaps the background treatment.
+- `data-corners`: **rounded** (default) · square — scales all radii toward 0.
+- `data-font`: **mono** (default) · sans · serif — switches the font stack.
+- `data-motion`: instant · **normal** (default) · extra — sets animation speed (`--era-duration` / `--era-ease`), independent of density.
+
+The `Mode` component is a thin wrapper that applies these attributes plus optional `primary` / `primaryFg` color overrides to a subtree.
+
+## Per-component docs
+
+Every component has a passive markdown doc at `/<slug>.md`.
+Examples: `/button.md`, `/select.md`, `/table.md`.
+Full concatenated reference: `/llms-full.txt`.
+
+<!-- Full component documentation, concatenated. -->
+
+<!-- begin: quickstart -->
+
+# Quickstart
+
+Installation and setup guide.
+
+## Hero Template
+
+Use a single, pure component import from `$lib/ui` for a clean docs-friendly starter hero.
+
+```svelte
+<script lang="ts">
+	import { Badge, Bar, Button, ButtonGroup, Card, Separator } from '$lib/ui';
+</script>
+
+<section class="mx-auto flex w-full max-w-4xl flex-col gap-(--era-content-p) p-(--era-content-p)">
+	<Badge tone="accent">Now shipping v0.8</Badge>
+
+	<div class="space-y-(--era-gap)">
+		<h1 class="font-mono text-[length:calc(var(--era-text)*2)] font-semibold text-bright">
+			Era Hero
+		</h1>
+		<p class="max-w-prose text-muted">
+			Build once, then switch feel instantly with density and surface tokens.
+		</p>
+	</div>
+
+	<Bar class="border border-[color:var(--era-border-color)] bg-[var(--era-surface-bg)]">
+		<ButtonGroup>
+			<Button tone="accent">Get started</Button>
+			<Button variant="outline">Live preview</Button>
+		</ButtonGroup>
+	</Bar>
+
+	<Separator />
+
+	<div class="grid gap-(--era-gap) md:grid-cols-3">
+		<Card class="p-(--era-gap)">Dense-ready</Card>
+		<Card class="p-(--era-gap)">Balanced defaults</Card>
+		<Card class="p-(--era-gap)">Spacious polish</Card>
+	</div>
+</section>
+```
+
+### Why this template
+
+- Pure imports keep setup simple for first-time users.
+- Every spacing and size value comes from era tokens.
+- Works in all density modes without rewriting markup.
+
+<!-- end: quickstart -->
+
+<!-- begin: surfaces -->
+
+# Surfaces
+
+Every surface × corners rendered live for visual QA.
+
+<!-- end: surfaces -->
+
+<!-- begin: draggable -->
+
+# Draggable
+
+Make any element draggable with @neodrag/svelte v3.
+
+<!-- end: draggable -->
+
+<!-- begin: aspect-ratio -->
+
+# Aspect Ratio
+
+Maintains a specified aspect ratio for content.
+
+## Import
+
+```ts
+import { AspectRatio } from "$lib/ui/aspect-ratio";
+```
+
+## Props
+
+Inherits all props from `PartProps<AspectRatio.RootProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: aspect-ratio -->
+
+<!-- begin: badge -->
+
+# Badge
+
+A small label for status or categorization.
+
+## Import
+
+```ts
+import { Badge } from "$lib/ui/badge";
+```
+
+## Props
+
+Inherits all props from `HTMLAttributes<HTMLSpanElement>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLSpanElement \| null` | `null` | bindable |
+| `tone?` | `'default' \| 'accent' \| 'destructive' \| 'success'` | `'default'` | — |
+| `children?` | `Snippet` | — | — |
+
+## Usage
+
+```svelte
+<script>
+	import { Badge } from '$lib/ui/badge';
+</script>
+
+<Badge>draft</Badge>
+<Badge tone="accent">new</Badge>
+<Badge tone="success">passing</Badge>
+<Badge tone="destructive">failing</Badge>
+```
+
+## Notes
+
+- Non-interactive. For dismissible tokens use `Chip`. For labelled pairs use `KV`.
+- Uses the `xxs` tier tokens (height, radius, inset).
+- Inter-icon gap tightens to `--era-inset-xxs` when an SVG is present.
+
+<!-- end: badge -->
+
+<!-- begin: avatar -->
+
+# Avatar
+
+An image with optional initials/icon fallback.
+
+## Import
+
+```ts
+import { Avatar } from "$lib/ui/avatar";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Avatar.Root`
+- `Avatar.Image`
+- `Avatar.Fallback`
+
+## Avatar.Root
+
+Inherits all props from `PartProps<Avatar.RootProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Avatar.Image
+
+Inherits all props from `Avatar.ImageProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Avatar.Fallback
+
+Inherits all props from `PartProps<Avatar.FallbackProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: avatar -->
+
+<!-- begin: bar -->
+
+# Bar
+
+A flex container for toolbars and headers, in three heights.
+
+## Import
+
+```ts
+import { Bar } from "$lib/ui/bar";
+```
+
+## Props
+
+Inherits all props from `HTMLAttributes<HTMLDivElement>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLDivElement \| null` | `null` | bindable |
+| `size?` | `'sm' \| 'md' \| 'lg'` | `'lg'` | Height tier (scales with density). Default `lg` — a full toolbar. |
+| `children?` | `Snippet` | — | — |
+
+<!-- end: bar -->
+
+<!-- begin: button -->
+
+# Button
+
+A flexible button or link element.
+
+## Import
+
+```ts
+import { Button } from "$lib/ui/button";
+```
+
+## Props
+
+Inherits all props from `Button.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `tone?` | `'default' \| 'accent' \| 'destructive' \| 'success'` | `'default'` | — |
+| `size?` | `'default' \| 'sm' \| 'xs' \| 'icon'` | `'default'` | — |
+| `variant?` | `'filled' \| 'link'` | `'filled'` | — |
+| `active?` | `boolean` | `false` | — |
+| `icon?` | `boolean` | `false` | — |
+| `loading?` | `boolean` | `false` | When true, disables the button, sets `aria-busy`, and prepends a
+spinner. The existing label stays rendered so focus, click targets,
+and screen-reader accessible names don't change shape mid-flight. |
+| `loadingLabel?` | `string` | — | Screen-reader-only label announced while `loading` is true. |
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Usage
+
+```svelte
+<script>
+	import { Button } from '$lib/ui/button';
+</script>
+
+<Button onclick={() => console.log('clicked')}>Save</Button>
+<Button tone="accent" size="sm">Confirm</Button>
+<Button tone="destructive" variant="link">Delete</Button>
+<Button icon size="icon" aria-label="Close"><X /></Button>
+```
+
+## Notes
+
+- Heights, radii, paddings, and gaps come from density tokens — never hard-code px.
+- `link` variant intentionally does not change color on hover (underline only) so it reads as static prose until confirmed interactive.
+- For a segmented row of buttons, use `ButtonGroup`.
+
+<!-- end: button -->
+
+<!-- begin: button-group -->
+
+# Button Group
+
+Groups buttons with consistent spacing.
+
+## Import
+
+```ts
+import { ButtonGroup } from "$lib/ui/button-group";
+```
+
+## Props
+
+Inherits all props from `HTMLAttributes<HTMLDivElement>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLDivElement \| null` | `null` | bindable |
+| `children?` | `Snippet` | — | — |
+| `orientation?` | `'horizontal' \| 'vertical'` | `'horizontal'` | — |
+
+<!-- end: button-group -->
+
+<!-- begin: pane -->
+
+# Pane
+
+A draggable floating window with a handle bar.
+
+## Import
+
+```ts
+import { Pane } from "$lib/ui/pane";
+```
+
+## Props
+
+Inherits all props from `HTMLAttributes<HTMLDivElement>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLDivElement \| null` | `null` | bindable |
+| `position?` | `{ x: number; y: number }` | `{ x: 0, y: 0 }` | bindable — Offset from the pane's layout position. Bindable and writable —
+assign to move the pane programmatically (e.g. reset to 0,0). |
+| `title?` | `string` | — | Text shown in the handle bar. For richer chrome use `header`. |
+| `icon?` | `Component<IconProps> \| null` | `AppWindow` | Lucide icon rendered left of the title. Pass `null` to omit. |
+| `disabled?` | `boolean` | `false` | Disables dragging (reactive). |
+| `plugins?` | `(Plugin \| Compartment)[] \| (() => (Plugin \| Compartment)[])` | `[]` | Extra neodrag plugins (axis, bounds, grid, threshold, …) appended
+after the pane's own. Pass Compartments for reactive plugin sets. |
+| `onDragStart?` | `(data: DragEventData) => void` | — | — |
+| `onDrag?` | `(data: DragEventData) => void` | — | — |
+| `onDragEnd?` | `(data: DragEventData) => void` | — | — |
+| `onClose?` | `() => void` | — | When set, a close button renders at the right of the handle bar. |
+| `header?` | `Snippet` | — | Extra handle-bar content, rendered after the title. |
+| `children?` | `Snippet` | — | — |
+
+<!-- end: pane -->
+
+<!-- begin: card -->
+
+# Card
+
+A surface container that can behave as a link or button.
+
+## Import
+
+```ts
+import { Card } from "$lib/ui/card";
+```
+
+## Props
+
+Inherits all props from `HTMLAttributes<HTMLElement>`.
+Inherits all props from `AnchorBits`.
+Inherits all props from `ButtonBits`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `CardElement \| null` | `null` | bindable |
+| `tone?` | `'elevated' \| 'surface' \| 'flat'` | `'elevated'` | Surface tier the card paints on.
+- `elevated` (default): the lifted surface. Use on the page background.
+- `surface`: the base surface tier. Use when nesting cards inside another elevated container.
+- `flat`: no background; only the rounded/padded shell. For grouping content visually without adding contrast. |
+| `header?` | `Snippet` | — | Rendered above the body with a subtle divider. |
+| `footer?` | `Snippet` | — | Rendered below the body with a subtle divider. |
+| `children?` | `Snippet` | — | — |
+
+<!-- end: card -->
+
+<!-- begin: chip -->
+
+# Chip
+
+An interactive, optionally dismissible token.
+
+## Import
+
+```ts
+import { Chip } from "$lib/ui/chip";
+```
+
+## Props
+
+Inherits all props from `HTMLAttributes<HTMLDivElement>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLDivElement \| null` | `null` | bindable |
+| `ondismiss?` | `() => void` | — | — |
+| `children?` | `Snippet` | — | — |
+
+## Usage
+
+```svelte
+<script>
+	import { Chip } from '$lib/ui/chip';
+
+	let tags = $state(['alpha', 'beta', 'gamma']);
+</script>
+
+{#each tags as tag}
+	<Chip ondismiss={() => (tags = tags.filter((t) => t !== tag))}>
+		{tag}
+	</Chip>
+{/each}
+```
+
+## Notes
+
+- Internal pointerdown/up events on the dismiss button are stopped from bubbling — this prevents accidental toggling when a Chip is nested inside a Select/Popover trigger.
+- Uses the `xxs` tier tokens (height, radius, inset). Part of the Badge/Chip/KV "tag" family.
+
+<!-- end: chip -->
+
+<!-- begin: code-block -->
+
+# Code Block
+
+A code snippet with optional copy button.
+
+## Import
+
+```ts
+import { CodeBlock } from "$lib/ui/code-block";
+```
+
+## Props
+
+Inherits all props from `HTMLAttributes<HTMLDivElement>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLDivElement \| null` | `null` | bindable |
+| `code?` | `string` | — | — |
+| `copyable?` | `boolean` | `true` | — |
+| `children?` | `Snippet` | — | — |
+
+<!-- end: code-block -->
+
+<!-- begin: kv -->
+
+# KV
+
+A key-value pair display using Badge.
+
+## Import
+
+```ts
+import { KV } from "$lib/ui/kv";
+```
+
+## Props
+
+Inherits all props from `HTMLAttributes<HTMLSpanElement>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLSpanElement \| null` | `null` | bindable |
+| `key` | `string` | — | — |
+| `value` | `string` | — | — |
+| `tone?` | `'default' \| 'accent' \| 'destructive' \| 'success'` | `'default'` | — |
+
+<!-- end: kv -->
+
+<!-- begin: separator -->
+
+# Separator
+
+A visual divider between content.
+
+## Import
+
+```ts
+import { Separator } from "$lib/ui/separator";
+```
+
+## Props
+
+Inherits all props from `Separator.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `variant?` | `'line' \| 'slant'` | `'line'` | Use `slant` for inline dividers in breadcrumbs, titles, and compact metadata. |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Usage
+
+```svelte
+<script>
+	import { Separator } from '$lib/ui/separator';
+</script>
+
+<p>
+	era
+	<Separator variant="slant" decorative />
+	ui
+	<Separator variant="slant" decorative />
+	separator
+</p>
+```
+
+## Notes
+
+- `variant="slant"` is for inline text separators only, such as breadcrumbs, compact metadata, and split titles.
+- Mark slant separators `decorative` unless they communicate a meaningful boundary to assistive technology.
+
+<!-- end: separator -->
+
+<!-- begin: sheet -->
+
+# Sheet
+
+A dialog anchored to a screen edge — a mobile drawer.
+
+## Import
+
+```ts
+import { Sheet } from "$lib/ui/sheet";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+<!-- end: sheet -->
+
+<!-- begin: skeleton -->
+
+# Skeleton
+
+A placeholder shimmer for loading states.
+
+## Import
+
+```ts
+import { Skeleton } from "$lib/ui/skeleton";
+```
+
+## Props
+
+Inherits all props from `HTMLAttributes<HTMLDivElement>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLDivElement \| null` | `null` | bindable |
+| `variant?` | `'line' \| 'circle' \| 'block'` | `'line'` | — |
+
+<!-- end: skeleton -->
+
+<!-- begin: switch -->
+
+# Switch
+
+A toggle switch control.
+
+## Import
+
+```ts
+import { Switch } from "$lib/ui/switch";
+```
+
+## Props
+
+Inherits all props from `Switch.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `checked?` | `(forwarded)` | `false` | bindable |
+
+<!-- end: switch -->
+
+<!-- begin: toggle -->
+
+# Toggle
+
+A two-state toggle button.
+
+## Import
+
+```ts
+import { Toggle } from "$lib/ui/toggle";
+```
+
+## Props
+
+Inherits all props from `WithoutChildrenOrChild<Toggle.RootProps>`.
+Inherits all props from `Omit<ButtonVariants, 'active'>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `pressed?` | `(forwarded)` | `false` | bindable |
+
+<!-- end: toggle -->
+
+<!-- begin: accordion -->
+
+# Accordion
+
+Collapsible content sections.
+
+## Import
+
+```ts
+import { Accordion } from "$lib/ui/accordion";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Accordion.Root`
+- `Accordion.Item`
+- `Accordion.Header`
+- `Accordion.Trigger`
+- `Accordion.Content`
+
+## Accordion.Root
+
+Inherits all props from `Accordion.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Accordion.Item
+
+Inherits all props from `Accordion.ItemProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Accordion.Header
+
+Inherits all props from `Accordion.HeaderProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Accordion.Trigger
+
+Inherits all props from `PartProps<Accordion.TriggerProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Accordion.Content
+
+Inherits all props from `Accordion.ContentProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: accordion -->
+
+<!-- begin: alert-dialog -->
+
+# Alert Dialog
+
+A modal confirmation before destructive actions.
+
+## Import
+
+```ts
+import { AlertDialog } from "$lib/ui/alert-dialog";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `AlertDialog.Trigger`
+- `AlertDialog.Content`
+- `AlertDialog.Overlay`
+- `AlertDialog.Title`
+- `AlertDialog.Description`
+- `AlertDialog.Cancel`
+- `AlertDialog.Action`
+
+## AlertDialog.Trigger
+
+Inherits all props from `WithoutChildrenOrChild<AlertDialog.TriggerProps>`.
+Inherits all props from `ButtonVariants`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## AlertDialog.Content
+
+Inherits all props from `PartProps<AlertDialog.ContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## AlertDialog.Overlay
+
+Inherits all props from `AlertDialog.OverlayProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## AlertDialog.Title
+
+Inherits all props from `AlertDialog.TitleProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## AlertDialog.Description
+
+Inherits all props from `AlertDialog.DescriptionProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## AlertDialog.Cancel
+
+Inherits all props from `WithoutChildrenOrChild<AlertDialog.CancelProps>`.
+Inherits all props from `Omit<ButtonVariants, 'active'>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## AlertDialog.Action
+
+Inherits all props from `WithoutChildrenOrChild<AlertDialog.ActionProps>`.
+Inherits all props from `Omit<ButtonVariants, 'active'>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: alert-dialog -->
+
+<!-- begin: calendar -->
+
+# Calendar
+
+A date picker calendar grid.
+
+## Import
+
+```ts
+import { Calendar } from "$lib/ui/calendar";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Calendar.Root`
+- `Calendar.Header`
+- `Calendar.Heading`
+- `Calendar.PrevButton`
+- `Calendar.NextButton`
+- `Calendar.Grid`
+- `Calendar.GridHead`
+- `Calendar.GridBody`
+- `Calendar.GridRow`
+- `Calendar.HeadCell`
+- `Calendar.Cell`
+- `Calendar.Day`
+
+## Calendar.Root
+
+Inherits all props from `Calendar.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `value?` | `(forwarded)` | — | bindable |
+| `placeholder?` | `(forwarded)` | — | bindable |
+
+## Calendar.Header
+
+Inherits all props from `Calendar.HeaderProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Calendar.Heading
+
+Inherits all props from `Calendar.HeadingProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Calendar.PrevButton
+
+Inherits all props from `WithoutChildrenOrChild<Calendar.PrevButtonProps>`.
+Inherits all props from `Pick<ButtonVariants, 'tone' | 'size'>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Calendar.NextButton
+
+Inherits all props from `WithoutChildrenOrChild<Calendar.NextButtonProps>`.
+Inherits all props from `Pick<ButtonVariants, 'tone' | 'size'>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Calendar.Grid
+
+Inherits all props from `Calendar.GridProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Calendar.GridHead
+
+Inherits all props from `Calendar.GridHeadProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Calendar.GridBody
+
+Inherits all props from `Calendar.GridBodyProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Calendar.GridRow
+
+Inherits all props from `Calendar.GridRowProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Calendar.HeadCell
+
+Inherits all props from `Calendar.HeadCellProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Calendar.Cell
+
+Inherits all props from `Calendar.CellProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Calendar.Day
+
+Inherits all props from `Calendar.DayProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: calendar -->
+
+<!-- begin: checkbox -->
+
+# Checkbox
+
+Toggleable check with indeterminate support.
+
+## Import
+
+```ts
+import { Checkbox } from "$lib/ui/checkbox";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Checkbox.Root`
+- `Checkbox.Group`
+- `Checkbox.GroupLabel`
+
+## Checkbox.Root
+
+Inherits all props from `Checkbox.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `checked?` | `(forwarded)` | `false` | bindable |
+| `indeterminate?` | `(forwarded)` | `false` | bindable |
+
+## Checkbox.Group
+
+Inherits all props from `Checkbox.GroupProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `value?` | `(forwarded)` | `[]` | bindable |
+
+## Checkbox.GroupLabel
+
+Inherits all props from `Checkbox.GroupLabelProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: checkbox -->
+
+<!-- begin: collapsible -->
+
+# Collapsible
+
+Show and hide content sections with a trigger.
+
+## Import
+
+```ts
+import { Collapsible } from "$lib/ui/collapsible";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Collapsible.Trigger`
+- `Collapsible.Content`
+
+## Collapsible.Trigger
+
+Inherits all props from `PartProps<Collapsible.TriggerProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Collapsible.Content
+
+Inherits all props from `PartProps<Collapsible.ContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: collapsible -->
+
+<!-- begin: combobox -->
+
+# Combobox
+
+Search and select from a filtered list of options.
+
+## Import
+
+```ts
+import { Combobox } from "$lib/ui/combobox";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Combobox.Input`
+- `Combobox.Trigger`
+- `Combobox.Content`
+- `Combobox.Item`
+- `Combobox.Empty`
+- `Combobox.Group`
+- `Combobox.GroupHeading`
+
+## Combobox.Input
+
+Inherits all props from `Combobox.InputProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Combobox.Trigger
+
+Inherits all props from `PartProps<Combobox.TriggerProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Combobox.Content
+
+Inherits all props from `PartProps<Combobox.ContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Combobox.Item
+
+Inherits all props from `Combobox.ItemProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Combobox.Empty
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `class?` | `string` | — | — |
+
+## Combobox.Group
+
+Inherits all props from `Combobox.GroupProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Combobox.GroupHeading
+
+Inherits all props from `PartProps<Combobox.GroupHeadingProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: combobox -->
+
+<!-- begin: command -->
+
+# Command
+
+A searchable command menu for quick navigation.
+
+## Import
+
+```ts
+import { Command } from "$lib/ui/command";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Command.Root`
+- `Command.Input`
+- `Command.List`
+- `Command.Viewport`
+- `Command.Empty`
+- `Command.Loading`
+- `Command.Group`
+- `Command.GroupHeading`
+- `Command.GroupItems`
+- `Command.Item`
+- `Command.LinkItem`
+- `Command.Separator`
+
+## Command.Root
+
+Inherits all props from `Command.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `value?` | `(forwarded)` | `''` | bindable |
+
+## Command.Input
+
+Inherits all props from `Command.InputProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `icon?` | `Component<IconProps> \| null` | `null` | Lucide icon rendered inside the field, left of the text (e.g. a search glyph). |
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `value?` | `(forwarded)` | `''` | bindable |
+
+## Command.List
+
+Inherits all props from `Command.ListProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Command.Viewport
+
+Inherits all props from `Command.ViewportProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Command.Empty
+
+Inherits all props from `Command.EmptyProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Command.Loading
+
+Inherits all props from `Command.LoadingProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Command.Group
+
+Inherits all props from `Command.GroupProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Command.GroupHeading
+
+Inherits all props from `Command.GroupHeadingProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Command.GroupItems
+
+Inherits all props from `Command.GroupItemsProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Command.Item
+
+Inherits all props from `Command.ItemProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Command.LinkItem
+
+Inherits all props from `Command.LinkItemProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Command.Separator
+
+Inherits all props from `Command.SeparatorProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: command -->
+
+<!-- begin: context-menu -->
+
+# Context Menu
+
+Options and actions triggered by right-click.
+
+## Import
+
+```ts
+import { ContextMenu } from "$lib/ui/context-menu";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `ContextMenu.Trigger`
+- `ContextMenu.Content`
+- `ContextMenu.Item`
+- `ContextMenu.CheckboxItem`
+- `ContextMenu.RadioItem`
+- `ContextMenu.Separator`
+- `ContextMenu.SubTrigger`
+- `ContextMenu.SubContent`
+- `ContextMenu.GroupHeading`
+
+## ContextMenu.Trigger
+
+Inherits all props from `ContextMenu.TriggerProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## ContextMenu.Content
+
+Inherits all props from `PartProps<ContextMenu.ContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## ContextMenu.Item
+
+Inherits all props from `PartProps<ContextMenu.ItemProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## ContextMenu.CheckboxItem
+
+Inherits all props from `ContextMenu.CheckboxItemProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `checked?` | `(forwarded)` | `false` | bindable |
+
+## ContextMenu.RadioItem
+
+Inherits all props from `ContextMenu.RadioItemProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## ContextMenu.Separator
+
+Inherits all props from `ContextMenu.SeparatorProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## ContextMenu.SubTrigger
+
+Inherits all props from `PartProps<ContextMenu.SubTriggerProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## ContextMenu.SubContent
+
+Inherits all props from `PartProps<ContextMenu.SubContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## ContextMenu.GroupHeading
+
+Inherits all props from `ContextMenu.GroupHeadingProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: context-menu -->
+
+<!-- begin: date-field -->
+
+# Date Field
+
+Segmented date input with keyboard navigation.
+
+## Import
+
+```ts
+import { DateField } from "$lib/ui/date-field";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `DateField.Root`
+- `DateField.Input`
+- `DateField.Segment`
+- `DateField.Label`
+
+## DateField.Root
+
+Inherits all props from `DateField.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `value?` | `(forwarded)` | — | bindable |
+| `placeholder?` | `(forwarded)` | — | bindable |
+
+## DateField.Input
+
+Inherits all props from `DateField.InputProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateField.Segment
+
+Inherits all props from `DateField.SegmentProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateField.Label
+
+Inherits all props from `DateField.LabelProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: date-field -->
+
+<!-- begin: date-picker -->
+
+# Date Picker
+
+Date input with a calendar popover.
+
+## Import
+
+```ts
+import { DatePicker } from "$lib/ui/date-picker";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `DatePicker.Root`
+- `DatePicker.Label`
+- `DatePicker.Input`
+- `DatePicker.Segment`
+- `DatePicker.Trigger`
+- `DatePicker.Content`
+- `DatePicker.Calendar`
+- `DatePicker.Header`
+- `DatePicker.Heading`
+- `DatePicker.PrevButton`
+- `DatePicker.NextButton`
+- `DatePicker.Grid`
+- `DatePicker.GridHead`
+- `DatePicker.GridBody`
+- `DatePicker.GridRow`
+- `DatePicker.HeadCell`
+- `DatePicker.Cell`
+- `DatePicker.Day`
+
+## DatePicker.Root
+
+Inherits all props from `DatePicker.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `value?` | `(forwarded)` | — | bindable |
+| `placeholder?` | `(forwarded)` | — | bindable |
+| `open?` | `(forwarded)` | `false` | bindable |
+
+## DatePicker.Label
+
+Inherits all props from `DatePicker.LabelProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DatePicker.Input
+
+Inherits all props from `DatePicker.InputProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DatePicker.Segment
+
+Inherits all props from `DatePicker.SegmentProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DatePicker.Trigger
+
+Inherits all props from `PartProps<DatePicker.TriggerProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DatePicker.Content
+
+Inherits all props from `PartProps<DatePicker.ContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DatePicker.Calendar
+
+Inherits all props from `DatePicker.CalendarProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DatePicker.Header
+
+Inherits all props from `DatePicker.HeaderProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DatePicker.Heading
+
+Inherits all props from `DatePicker.HeadingProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DatePicker.PrevButton
+
+Inherits all props from `WithoutChildrenOrChild<DatePicker.PrevButtonProps>`.
+Inherits all props from `Pick<ButtonVariants, 'tone' | 'size'>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DatePicker.NextButton
+
+Inherits all props from `WithoutChildrenOrChild<DatePicker.NextButtonProps>`.
+Inherits all props from `Pick<ButtonVariants, 'tone' | 'size'>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DatePicker.Grid
+
+Inherits all props from `DatePicker.GridProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DatePicker.GridHead
+
+Inherits all props from `DatePicker.GridHeadProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DatePicker.GridBody
+
+Inherits all props from `DatePicker.GridBodyProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DatePicker.GridRow
+
+Inherits all props from `DatePicker.GridRowProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DatePicker.HeadCell
+
+Inherits all props from `DatePicker.HeadCellProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DatePicker.Cell
+
+Inherits all props from `DatePicker.CellProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DatePicker.Day
+
+Inherits all props from `DatePicker.DayProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: date-picker -->
+
+<!-- begin: date-range-field -->
+
+# Date Range Field
+
+Segmented start/end date input.
+
+## Import
+
+```ts
+import { DateRangeField } from "$lib/ui/date-range-field";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `DateRangeField.Root`
+- `DateRangeField.Input`
+- `DateRangeField.Segment`
+- `DateRangeField.Label`
+
+## DateRangeField.Root
+
+Inherits all props from `DateRangeField.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `value?` | `(forwarded)` | — | bindable |
+| `placeholder?` | `(forwarded)` | — | bindable |
+
+## DateRangeField.Input
+
+Inherits all props from `DateRangeField.InputProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangeField.Segment
+
+Inherits all props from `DateRangeField.SegmentProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangeField.Label
+
+Inherits all props from `DateRangeField.LabelProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: date-range-field -->
+
+<!-- begin: date-range-picker -->
+
+# Date Range Picker
+
+Date range input with a calendar popover.
+
+## Import
+
+```ts
+import { DateRangePicker } from "$lib/ui/date-range-picker";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `DateRangePicker.Root`
+- `DateRangePicker.Label`
+- `DateRangePicker.Input`
+- `DateRangePicker.Segment`
+- `DateRangePicker.Trigger`
+- `DateRangePicker.Content`
+- `DateRangePicker.Calendar`
+- `DateRangePicker.Header`
+- `DateRangePicker.Heading`
+- `DateRangePicker.PrevButton`
+- `DateRangePicker.NextButton`
+- `DateRangePicker.Grid`
+- `DateRangePicker.GridHead`
+- `DateRangePicker.GridBody`
+- `DateRangePicker.GridRow`
+- `DateRangePicker.HeadCell`
+- `DateRangePicker.Cell`
+- `DateRangePicker.Day`
+
+## DateRangePicker.Root
+
+Inherits all props from `DateRangePicker.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `value?` | `(forwarded)` | — | bindable |
+| `placeholder?` | `(forwarded)` | — | bindable |
+| `open?` | `(forwarded)` | `false` | bindable |
+
+## DateRangePicker.Label
+
+Inherits all props from `DateRangePicker.LabelProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangePicker.Input
+
+Inherits all props from `DateRangePicker.InputProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangePicker.Segment
+
+Inherits all props from `DateRangePicker.SegmentProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangePicker.Trigger
+
+Inherits all props from `PartProps<DateRangePicker.TriggerProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangePicker.Content
+
+Inherits all props from `PartProps<DateRangePicker.ContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangePicker.Calendar
+
+Inherits all props from `DateRangePicker.CalendarProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangePicker.Header
+
+Inherits all props from `DateRangePicker.HeaderProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangePicker.Heading
+
+Inherits all props from `DateRangePicker.HeadingProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangePicker.PrevButton
+
+Inherits all props from `WithoutChildrenOrChild<DateRangePicker.PrevButtonProps>`.
+Inherits all props from `Pick<ButtonVariants, 'tone' | 'size'>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangePicker.NextButton
+
+Inherits all props from `WithoutChildrenOrChild<DateRangePicker.NextButtonProps>`.
+Inherits all props from `Pick<ButtonVariants, 'tone' | 'size'>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangePicker.Grid
+
+Inherits all props from `DateRangePicker.GridProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangePicker.GridHead
+
+Inherits all props from `DateRangePicker.GridHeadProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangePicker.GridBody
+
+Inherits all props from `DateRangePicker.GridBodyProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangePicker.GridRow
+
+Inherits all props from `DateRangePicker.GridRowProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangePicker.HeadCell
+
+Inherits all props from `DateRangePicker.HeadCellProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangePicker.Cell
+
+Inherits all props from `DateRangePicker.CellProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DateRangePicker.Day
+
+Inherits all props from `DateRangePicker.DayProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: date-range-picker -->
+
+<!-- begin: dialog -->
+
+# Dialog
+
+A modal window for content or user input.
+
+## Import
+
+```ts
+import { Dialog } from "$lib/ui/dialog";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Dialog.Trigger`
+- `Dialog.Content`
+- `Dialog.Overlay`
+- `Dialog.Title`
+- `Dialog.Description`
+- `Dialog.Close`
+
+## Dialog.Trigger
+
+Inherits all props from `WithoutChildrenOrChild<Dialog.TriggerProps>`.
+Inherits all props from `ButtonVariants`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Dialog.Content
+
+Inherits all props from `PartProps<Dialog.ContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Dialog.Overlay
+
+Inherits all props from `Dialog.OverlayProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Dialog.Title
+
+Inherits all props from `Dialog.TitleProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Dialog.Description
+
+Inherits all props from `Dialog.DescriptionProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Dialog.Close
+
+Inherits all props from `WithoutChildrenOrChild<Dialog.CloseProps>`.
+Inherits all props from `Omit<ButtonVariants, 'active'>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: dialog -->
+
+<!-- begin: dropdown-menu -->
+
+# Dropdown Menu
+
+A menu of selectable items.
+
+## Import
+
+```ts
+import { DropdownMenu } from "$lib/ui/dropdown-menu";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `DropdownMenu.Trigger`
+- `DropdownMenu.Content`
+- `DropdownMenu.Item`
+- `DropdownMenu.CheckboxItem`
+- `DropdownMenu.RadioItem`
+- `DropdownMenu.Separator`
+- `DropdownMenu.SubTrigger`
+- `DropdownMenu.SubContent`
+- `DropdownMenu.GroupHeading`
+
+## DropdownMenu.Trigger
+
+Inherits all props from `PartProps<DropdownMenu.TriggerProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DropdownMenu.Content
+
+Inherits all props from `PartProps<DropdownMenu.ContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DropdownMenu.Item
+
+Inherits all props from `PartProps<DropdownMenu.ItemProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DropdownMenu.CheckboxItem
+
+Inherits all props from `DropdownMenu.CheckboxItemProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `checked?` | `(forwarded)` | `false` | bindable |
+
+## DropdownMenu.RadioItem
+
+Inherits all props from `DropdownMenu.RadioItemProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DropdownMenu.Separator
+
+Inherits all props from `DropdownMenu.SeparatorProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DropdownMenu.SubTrigger
+
+Inherits all props from `PartProps<DropdownMenu.SubTriggerProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DropdownMenu.SubContent
+
+Inherits all props from `PartProps<DropdownMenu.SubContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## DropdownMenu.GroupHeading
+
+Inherits all props from `DropdownMenu.GroupHeadingProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: dropdown-menu -->
+
+<!-- begin: file-upload -->
+
+# File Upload
+
+A file input with click-to-browse and drag-and-drop.
+
+## Import
+
+```ts
+import { FileUpload } from "$lib/ui/file-upload";
+```
+
+## Props
+
+Inherits all props from `Omit<HTMLInputAttributes, 'type' | 'files'>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLInputElement \| null` | `null` | bindable |
+| `files?` | `FileList \| null` | `null` | bindable |
+
+<!-- end: file-upload -->
+
+<!-- begin: scroll-area -->
+
+# Scroll Area
+
+A cross-platform scroll container.
+
+## Import
+
+```ts
+import { ScrollArea } from "$lib/ui/scroll-area";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `ScrollArea.Root`
+- `ScrollArea.Viewport`
+- `ScrollArea.Scrollbar`
+- `ScrollArea.Thumb`
+- `ScrollArea.Corner`
+
+## ScrollArea.Root
+
+Inherits all props from `ScrollArea.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## ScrollArea.Viewport
+
+Inherits all props from `ScrollArea.ViewportProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## ScrollArea.Scrollbar
+
+Inherits all props from `ScrollArea.ScrollbarProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## ScrollArea.Thumb
+
+Inherits all props from `ScrollArea.ThumbProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## ScrollArea.Corner
+
+Inherits all props from `ScrollArea.CornerProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: scroll-area -->
+
+<!-- begin: input -->
+
+# Input
+
+A text input field, with textarea variant.
+
+## Import
+
+```ts
+import { Input } from "$lib/ui/input";
+```
+
+## Props
+
+Inherits all props from `HTMLInputAttributes`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLInputElement \| null` | `null` | bindable |
+| `value?` | `(forwarded)` | `''` | bindable |
+
+<!-- end: input -->
+
+<!-- begin: link-preview -->
+
+# Link Preview
+
+Shows rich preview content when hovering a link.
+
+## Import
+
+```ts
+import { LinkPreview } from "$lib/ui/link-preview";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `LinkPreview.Trigger`
+- `LinkPreview.Content`
+
+## LinkPreview.Trigger
+
+Inherits all props from `PartProps<LinkPreview.TriggerProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## LinkPreview.Content
+
+Inherits all props from `PartProps<LinkPreview.ContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: link-preview -->
+
+<!-- begin: label -->
+
+# Label
+
+Identifies or describes associated UI elements.
+
+## Import
+
+```ts
+import { Label } from "$lib/ui/label";
+```
+
+## Props
+
+Inherits all props from `PartProps<Label.RootProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: label -->
+
+<!-- begin: menu -->
+
+# Menu
+
+Headless menu primitives re-exported from bits-ui.
+
+## Import
+
+```ts
+import { Menu } from "$lib/ui/menu";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+<!-- end: menu -->
+
+<!-- begin: menubar -->
+
+# Menubar
+
+A horizontal bar of dropdown menus.
+
+## Import
+
+```ts
+import { Menubar } from "$lib/ui/menubar";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Menubar.Root`
+- `Menubar.Trigger`
+- `Menubar.Content`
+- `Menubar.Item`
+- `Menubar.CheckboxItem`
+- `Menubar.RadioItem`
+- `Menubar.Separator`
+- `Menubar.SubTrigger`
+- `Menubar.SubContent`
+- `Menubar.GroupHeading`
+
+## Menubar.Root
+
+Inherits all props from `Menubar.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Menubar.Trigger
+
+Inherits all props from `PartProps<Menubar.TriggerProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Menubar.Content
+
+Inherits all props from `PartProps<Menubar.ContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Menubar.Item
+
+Inherits all props from `PartProps<Menubar.ItemProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Menubar.CheckboxItem
+
+Inherits all props from `Menubar.CheckboxItemProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `checked?` | `(forwarded)` | `false` | bindable |
+
+## Menubar.RadioItem
+
+Inherits all props from `Menubar.RadioItemProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Menubar.Separator
+
+Inherits all props from `Menubar.SeparatorProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Menubar.SubTrigger
+
+Inherits all props from `PartProps<Menubar.SubTriggerProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Menubar.SubContent
+
+Inherits all props from `PartProps<Menubar.SubContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Menubar.GroupHeading
+
+Inherits all props from `Menubar.GroupHeadingProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: menubar -->
+
+<!-- begin: meter -->
+
+# Meter
+
+Displays a value within a known range.
+
+## Import
+
+```ts
+import { Meter } from "$lib/ui/meter";
+```
+
+## Props
+
+Inherits all props from `Meter.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: meter -->
+
+<!-- begin: navigation-menu -->
+
+# Navigation Menu
+
+Headless navigation-menu primitives re-exported from bits-ui.
+
+## Import
+
+```ts
+import { NavigationMenu } from "$lib/ui/navigation-menu";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+<!-- end: navigation-menu -->
+
+<!-- begin: mode -->
+
+# Mode
+
+Scoped density / surface / corners override for any subtree.
+
+## Import
+
+```ts
+import { Mode } from "$lib/ui/mode";
+```
+
+## Props
+
+Inherits all props from `HTMLAttributes<HTMLDivElement>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `mode?` | `ProviderMode` | — | — |
+| `surface?` | `Surface` | — | — |
+| `corners?` | `Corners` | — | — |
+| `font?` | `Font` | — | — |
+| `motion?` | `Motion` | — | — |
+| `primary?` | `string` | — | Any CSS color — sets --color-primary for this subtree. |
+| `primaryFg?` | `string` | — | Foreground against `primary` — sets --color-primary-fg. |
+| `children?` | `Snippet` | — | — |
+
+<!-- end: mode -->
+
+<!-- begin: pagination -->
+
+# Pagination
+
+Enables users to navigate through a series of pages.
+
+## Import
+
+```ts
+import { Pagination } from "$lib/ui/pagination";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Pagination.Root`
+- `Pagination.Page`
+- `Pagination.PrevButton`
+- `Pagination.NextButton`
+
+## Pagination.Root
+
+Inherits all props from `Pagination.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `page?` | `(forwarded)` | `1` | bindable |
+
+## Pagination.Page
+
+Inherits all props from `WithoutChildrenOrChild<Pagination.PageProps>`.
+Inherits all props from `Pick<ButtonVariants, 'tone' | 'size'>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Pagination.PrevButton
+
+Inherits all props from `WithoutChildrenOrChild<Pagination.PrevButtonProps>`.
+Inherits all props from `Pick<ButtonVariants, 'tone' | 'size'>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Pagination.NextButton
+
+Inherits all props from `WithoutChildrenOrChild<Pagination.NextButtonProps>`.
+Inherits all props from `Pick<ButtonVariants, 'tone' | 'size'>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: pagination -->
+
+<!-- begin: pin-input -->
+
+# PIN Input
+
+Enables users to input a sequence of one-character inputs.
+
+## Import
+
+```ts
+import { PinInput } from "$lib/ui/pin-input";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `PinInput.Root`
+- `PinInput.Cell`
+
+## PinInput.Root
+
+Inherits all props from `PinInput.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `value?` | `(forwarded)` | `''` | bindable |
+
+## PinInput.Cell
+
+Inherits all props from `WithoutChildrenOrChild<PinInput.CellProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: pin-input -->
+
+<!-- begin: popover -->
+
+# Popover
+
+A floating panel anchored to a trigger.
+
+## Import
+
+```ts
+import { Popover } from "$lib/ui/popover";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Popover.Trigger`
+- `Popover.Content`
+- `Popover.Close`
+
+## Popover.Trigger
+
+Inherits all props from `WithoutChildrenOrChild<Popover.TriggerProps>`.
+Inherits all props from `ButtonVariants`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Popover.Content
+
+Inherits all props from `PartProps<Popover.ContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Popover.Close
+
+Inherits all props from `WithoutChildrenOrChild<Popover.CloseProps>`.
+Inherits all props from `Omit<ButtonVariants, 'active'>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: popover -->
+
+<!-- begin: progress -->
+
+# Progress
+
+Shows the completion status of a task.
+
+## Import
+
+```ts
+import { Progress } from "$lib/ui/progress";
+```
+
+## Props
+
+Inherits all props from `Progress.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: progress -->
+
+<!-- begin: range-calendar -->
+
+# Range Calendar
+
+Headless range-calendar primitives re-exported from bits-ui.
+
+## Import
+
+```ts
+import { RangeCalendar } from "$lib/ui/range-calendar";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+<!-- end: range-calendar -->
+
+<!-- begin: radio-group -->
+
+# Radio Group
+
+Groups radio items for single selection.
+
+## Import
+
+```ts
+import { RadioGroup } from "$lib/ui/radio-group";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `RadioGroup.Root`
+- `RadioGroup.Item`
+
+## RadioGroup.Root
+
+Inherits all props from `RadioGroup.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `value?` | `(forwarded)` | `''` | bindable |
+
+## RadioGroup.Item
+
+Inherits all props from `RadioGroup.ItemProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: radio-group -->
+
+<!-- begin: rating-group -->
+
+# Rating Group
+
+A star-style single-choice rating input.
+
+## Import
+
+```ts
+import { RatingGroup } from "$lib/ui/rating-group";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `RatingGroup.Root`
+- `RatingGroup.Item`
+
+## RatingGroup.Root
+
+Inherits all props from `RatingGroup.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `value?` | `(forwarded)` | `0` | bindable |
+
+## RatingGroup.Item
+
+Inherits all props from `RatingGroup.ItemProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: rating-group -->
+
+<!-- begin: select -->
+
+# Select
+
+A dropdown select menu.
+
+## Import
+
+```ts
+import { Select } from "$lib/ui/select";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Select.Trigger`
+- `Select.Value`
+- `Select.Content`
+- `Select.Item`
+
+## Select.Trigger
+
+Inherits all props from `PartProps<Select.TriggerProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Select.Value
+
+Inherits all props from `WithoutChildrenOrChild<Select.ValueProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet<[SnippetProps]>` | — | — |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Select.Content
+
+Inherits all props from `PartProps<Select.ContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Select.Item
+
+Inherits all props from `Select.ItemProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: select -->
+
+<!-- begin: slider -->
+
+# Slider
+
+Enables value selection from a continuous range.
+
+## Import
+
+```ts
+import { Slider } from "$lib/ui/slider";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Slider.Root`
+- `Slider.Range`
+- `Slider.Thumb`
+- `Slider.Tick`
+- `Slider.TickLabel`
+- `Slider.ThumbLabel`
+
+## Slider.Root
+
+Inherits all props from `Slider.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `value?` | `(forwarded)` | `0` | bindable |
+
+## Slider.Range
+
+Inherits all props from `Slider.RangeProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `trackClass?` | `string` | — | — |
+| `progress?` | `number` | — | Optional secondary fill (0–1) painted underneath the active range —
+e.g. buffered fraction on a media seek bar. Clamped to [0, 1] and
+rendered with reduced opacity so the active range stays dominant. |
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Slider.Thumb
+
+Inherits all props from `Slider.ThumbProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Slider.Tick
+
+Inherits all props from `Slider.TickProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Slider.TickLabel
+
+Inherits all props from `Slider.TickLabelProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Slider.ThumbLabel
+
+Inherits all props from `Slider.ThumbLabelProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: slider -->
+
+<!-- begin: table -->
+
+# Table
+
+A tabular data display with rows, headers, and cells.
+
+## Import
+
+```ts
+import { Table } from "$lib/ui/table";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Table.Root`
+- `Table.Head`
+- `Table.Body`
+- `Table.Row`
+- `Table.HeadCell`
+- `Table.Cell`
+
+## Table.Root
+
+Inherits all props from `HTMLTableAttributes`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLTableElement \| null` | `null` | bindable |
+| `variant?` | `'default' \| 'cells'` | `'default'` | Visual treatment. `default` paints divider lines between rows. `cells`
+separates every cell into its own rounded muted surface — think the
+markdown-table look from Claude Code Desktop. Descendant rows and
+cells style themselves against `data-variant` on this element, so
+mixing the two forms in one tree isn't supported. |
+| `children?` | `Snippet` | — | — |
+
+## Table.Head
+
+Inherits all props from `HTMLAttributes<HTMLTableSectionElement>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLTableSectionElement \| null` | `null` | bindable |
+| `children?` | `Snippet` | — | — |
+
+## Table.Body
+
+Inherits all props from `HTMLAttributes<HTMLTableSectionElement>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLTableSectionElement \| null` | `null` | bindable |
+| `children?` | `Snippet` | — | — |
+
+## Table.Row
+
+Inherits all props from `HTMLAttributes<HTMLTableRowElement>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLTableRowElement \| null` | `null` | bindable |
+| `children?` | `Snippet` | — | — |
+
+## Table.HeadCell
+
+Inherits all props from `HTMLThAttributes`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLTableCellElement \| null` | `null` | bindable |
+| `children?` | `Snippet` | — | — |
+
+## Table.Cell
+
+Inherits all props from `HTMLTdAttributes`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLTableCellElement \| null` | `null` | bindable |
+| `children?` | `Snippet` | — | — |
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { Table } from '$lib/ui/table';
+
+	const rows = [
+		{ id: 1, name: 'Ada', role: 'Engineer' },
+		{ id: 2, name: 'Grace', role: 'Designer' }
+	];
+</script>
+
+<Table.Root>
+	<Table.Head>
+		<Table.Row>
+			<Table.HeadCell>Name</Table.HeadCell>
+			<Table.HeadCell>Role</Table.HeadCell>
+		</Table.Row>
+	</Table.Head>
+	<Table.Body>
+		{#each rows as row (row.id)}
+			<Table.Row>
+				<Table.Cell>{row.name}</Table.Cell>
+				<Table.Cell>{row.role}</Table.Cell>
+			</Table.Row>
+		{/each}
+	</Table.Body>
+</Table.Root>
+```
+
+## Notes
+
+- Composition-first API (like `Table.Row`), not a single data-driven component — keeps layout decisions local to the call site.
+- All parts pass through `class` and standard HTML attrs.
+- Density tokens drive row height and cell padding.
+
+<!-- end: table -->
+
+<!-- begin: tabs -->
+
+# Tabs
+
+Organizes content into tabbed sections.
+
+## Import
+
+```ts
+import { Tabs } from "$lib/ui/tabs";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Tabs.Root`
+- `Tabs.List`
+- `Tabs.Trigger`
+- `Tabs.Content`
+
+## Tabs.Root
+
+Inherits all props from `Tabs.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Tabs.List
+
+Inherits all props from `Tabs.ListProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Tabs.Trigger
+
+Inherits all props from `Tabs.TriggerProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Tabs.Content
+
+Inherits all props from `Tabs.ContentProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: tabs -->
+
+<!-- begin: time-field -->
+
+# Time Field
+
+Segmented time input with keyboard navigation.
+
+## Import
+
+```ts
+import { TimeField } from "$lib/ui/time-field";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `TimeField.Root`
+- `TimeField.Input`
+- `TimeField.Segment`
+- `TimeField.Label`
+
+## TimeField.Root
+
+Inherits all props from `TimeField.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `value?` | `(forwarded)` | — | bindable |
+| `placeholder?` | `(forwarded)` | — | bindable |
+
+## TimeField.Input
+
+Inherits all props from `TimeField.InputProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## TimeField.Segment
+
+Inherits all props from `TimeField.SegmentProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## TimeField.Label
+
+Inherits all props from `TimeField.LabelProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: time-field -->
+
+<!-- begin: time-range-field -->
+
+# Time Range Field
+
+Segmented start/end time input.
+
+## Import
+
+```ts
+import { TimeRangeField } from "$lib/ui/time-range-field";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `TimeRangeField.Root`
+- `TimeRangeField.Input`
+- `TimeRangeField.Segment`
+- `TimeRangeField.Label`
+
+## TimeRangeField.Root
+
+Inherits all props from `TimeRangeField.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `value?` | `(forwarded)` | — | bindable |
+| `placeholder?` | `(forwarded)` | — | bindable |
+
+## TimeRangeField.Input
+
+Inherits all props from `TimeRangeField.InputProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## TimeRangeField.Segment
+
+Inherits all props from `TimeRangeField.SegmentProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## TimeRangeField.Label
+
+Inherits all props from `TimeRangeField.LabelProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: time-range-field -->
+
+<!-- begin: toggle-group -->
+
+# Toggle Group
+
+A set of toggle buttons with single or multiple selection.
+
+## Import
+
+```ts
+import { ToggleGroup } from "$lib/ui/toggle-group";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `ToggleGroup.Root`
+- `ToggleGroup.Item`
+
+## ToggleGroup.Root
+
+Inherits all props from `PartProps<ToggleGroup.RootProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## ToggleGroup.Item
+
+Inherits all props from `ToggleGroup.ItemProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: toggle-group -->
+
+<!-- begin: toolbar -->
+
+# Toolbar
+
+Headless toolbar primitives re-exported from bits-ui.
+
+## Import
+
+```ts
+import { Toolbar } from "$lib/ui/toolbar";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+<!-- end: toolbar -->
+
+<!-- begin: video-player -->
+
+# Video Player
+
+A vidstack-powered player with support for MP4, HLS, and live streams.
+
+## Import
+
+```ts
+import { VideoPlayer } from "$lib/ui/video-player";
+```
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLElement \| null` | `null` | bindable |
+| `src` | `string` | — | — |
+| `poster?` | `string` | — | — |
+| `chapters?` | `string \| ChapterTrack` | — | Optional WebVTT chapters track. Pass a URL or full track descriptor. |
+| `preload?` | `'none' \| 'metadata' \| 'auto'` | `'metadata'` | — |
+| `load?` | `'eager' \| 'idle' \| 'visible' \| 'custom'` | `'visible'` | — |
+| `muted?` | `boolean` | `false` | — |
+| `autoplay?` | `boolean` | `false` | — |
+| `loop?` | `boolean` | `false` | — |
+| `playsinline?` | `boolean` | `true` | — |
+| `crossorigin?` | `'anonymous' \| 'use-credentials'` | — | — |
+| `initialVolume?` | `number` | — | Initial volume (0–1). |
+| `initialPlaybackRate?` | `number` | — | Initial playback rate (e.g. 1, 1.5, 2). |
+| `aspectRatio?` | `number` | — | Force a fixed aspect ratio as width/height, e.g. 16/9. |
+| `viewType?` | `'unknown' \| 'audio' \| 'video'` | — | — |
+| `streamType?` | `'unknown' \| 'on-demand' \| 'live' \| 'live:dvr' \| 'll-live' \| 'll-live:dvr'` | — | — |
+| `fullscreenOrientation?` | `\| 'any' \| 'natural' \| 'landscape' \| 'portrait' \| 'portrait-primary' \| 'portrait-secondary' \| 'landscape-primary' \| 'landscape-secondary'` | — | — |
+| `controls?` | `boolean` | `false` | Fall back to the provider's native controls instead of the custom chrome. |
+| `play?` | `boolean` | `true` | Show the play / pause button in the custom chrome. |
+| `time?` | `boolean` | `true` | Show the elapsed and duration time badges. |
+| `skip?` | `boolean \| number` | `false` | Show ±N-second skip buttons. `true` defaults to 10s; pass a number to override. |
+| `volume?` | `boolean` | `false` | Show the mute toggle and volume slider. |
+| `volumeOrientation?` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction for the volume slider. |
+| `speed?` | `boolean` | `false` | Show the playback-speed dropdown. |
+| `quality?` | `boolean` | `false` | Show the quality dropdown. Auto-hidden when the source exposes no quality options (e.g. plain MP4). |
+| `pip?` | `boolean` | `false` | Show the picture-in-picture toggle. |
+| `fullscreen?` | `boolean` | `false` | Show the fullscreen toggle. |
+| `seekPreview?` | `boolean` | `false` | Show a hover preview above the seek bar with the cursor's time and (if available) the chapter at that point. |
+| `contextMenu?` | `boolean` | `false` | Enable a right-click context menu mirroring the enabled chrome plus a download shortcut. |
+| `autoHide?` | `boolean` | `true` | Whether the controls bar fades when the user is idle during playback. Set `false` to keep it visible. |
+| `idleDelay?` | `number` | `500` | Delay (ms) of inactivity during playback before vidstack flips `userIdle` to true.
+Maps to the player's `user-idle-delay` attribute. Defaults to 500 ms (vidstack's
+own default is 2000 ms). |
+| `idleWhilePaused?` | `boolean` | `false` | Vidstack only fades the bar while playing (deliberately — its `MediaUserController`
+bails out of idle tracking on `pause`). Set this to `true` to also hide the bar
+while paused after `idleDelay` ms of pointer/keyboard inactivity. |
+| `mobileTimelineOnly?` | `boolean` | `true` | On narrow viewports / coarse-pointer devices, auto-collapse to a "timeline-only"
+layout — every chrome control suppresses regardless of its individual prop, leaving
+just the seek bar. Set `false` to honor the chrome props as-is on mobile too. |
+| `keyDisabled?` | `boolean` | `false` | — |
+| `keyTarget?` | `'document' \| 'player'` | — | — |
+| `keyShortcuts?` | `Record<string, string>` | — | — |
+| `onplay?` | `(e: Event) => void` | — | — |
+| `onpause?` | `(e: Event) => void` | — | — |
+| `onended?` | `(e: Event) => void` | — | — |
+| `onplaying?` | `(e: Event) => void` | — | — |
+| `onseeked?` | `(e: MediaEventWithDetail<number>) => void` | — | — |
+| `onseeking?` | `(e: MediaEventWithDetail<number>) => void` | — | — |
+| `oncanplay?` | `(e: Event) => void` | — | — |
+| `ontimeupdate?` | `(e: MediaEventWithDetail<{ currentTime: number; played: TimeRanges }>) => void` | — | — |
+| `onvolumechange?` | `(e: MediaEventWithDetail<{ volume: number; muted: boolean }>) => void` | — | — |
+| `onratechange?` | `(e: MediaEventWithDetail<number>) => void` | — | — |
+| `ondurationchange?` | `(e: MediaEventWithDetail<number>) => void` | — | — |
+| `onloadedmetadata?` | `(e: Event) => void` | — | — |
+| `onfullscreenchange?` | `(e: MediaEventWithDetail<boolean>) => void` | — | — |
+| `onpipchange?` | `(e: MediaEventWithDetail<boolean>) => void` | — | — |
+| `onerror?` | `(e: Event) => void` | — | — |
+| `children?` | `Snippet` | — | Optional override for the entire controls layer — replaces the default chrome. |
+| `class?` | `string` | — | — |
+
+<!-- end: video-player -->
+
+<!-- begin: tooltip -->
+
+# Tooltip
+
+Supplementary info on hover or focus.
+
+## Import
+
+```ts
+import { Tooltip } from "$lib/ui/tooltip";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Tooltip.Trigger`
+- `Tooltip.Content`
+
+## Tooltip.Trigger
+
+Inherits all props from `Tooltip.TriggerProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Tooltip.Content
+
+Inherits all props from `PartProps<Tooltip.ContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+<!-- end: tooltip -->