# dryui component reference

> Machine-readable component import, props, styling hook, and example index for 133 DryUI components.

Theme imports:
- @dryui/ui/themes/default.css
- @dryui/ui/themes/dark.css

### action

## Button
Package: @dryui/ui
Category: action
Tags: form, action, click, submit, cta, link-button
Kind: simple
Root import: import { Button } from '@dryui/ui'
Subpath import: import { Button } from '@dryui/ui/button'
Props: variant ('solid' | 'outline' | 'ghost' | 'soft' | 'secondary' | 'link'), accepted solid, outline, ghost, soft, secondary, link, default 'solid' | size ('sm' | 'md' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg'), accepted sm, md, lg, icon, icon-sm, icon-lg, default 'md' | color ('primary' | 'danger'), accepted primary, danger, default 'primary' | disabled (boolean) | href (string), When provided, Button renders an anchor instead of a button for link-style actions. | rel (string) | target (string) | download (boolean | string) | type ('button' | 'submit' | 'reset'), accepted button, submit, reset | children (Snippet), required
Native props: Forwards <button> attributes via rest props.
CSS variables: --dry-btn-accent, --dry-btn-accent-active, --dry-btn-accent-hover, --dry-btn-bg, --dry-btn-border, --dry-btn-color, --dry-btn-font-size, --dry-btn-ghost-underline, --dry-btn-padding-x, --dry-btn-padding-y, --dry-btn-radius, --dry-btn-soft-active-bg, --dry-btn-soft-bg, --dry-btn-soft-hover-bg
Data attributes: data-disabled
Example:
```svelte
<Button variant="solid" onclick={handleClick}>Save</Button>
<Button href="/getting-started" variant="outline">Continue</Button>
```

## Toggle
Package: @dryui/ui
Category: action
Tags: button, toggle, pressed, switch
Kind: simple
Root import: import { Toggle } from '@dryui/ui'
Subpath import: import { Toggle } from '@dryui/ui/toggle'
Props: pressed (boolean), default false, bindable | variant ('outline' | 'ghost'), accepted outline, ghost, default 'outline' | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | disabled (boolean) | children (Snippet), required
Native props: Forwards <button> attributes via rest props.
CSS variables: --dry-toggle-font-size, --dry-toggle-padding-x, --dry-toggle-padding-y, --dry-toggle-radius
Data attributes: data-disabled, data-state
Example:
```svelte
<Toggle>Content</Toggle>
```

## ToggleGroup
Package: @dryui/ui
Category: action
Tags: button, toggle, group, select
Kind: compound
Root import: import { ToggleGroup } from '@dryui/ui'
Subpath import: import { ToggleGroup } from '@dryui/ui/toggle-group'
Parts:
- ToggleGroup.Root
  Props: type ('single' | 'multiple'), accepted single, multiple | value (string[]), default [], bindable | disabled (boolean) | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical, default 'horizontal' | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- ToggleGroup.Item
  Props: value (string), required | disabled (boolean) | children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
Structure:
  ToggleGroup.Root
    ToggleGroup.Item
CSS variables: --dry-tg-font-size, --dry-tg-item-focus-z-index, --dry-tg-item-selected-z-index, --dry-tg-padding-x, --dry-tg-padding-y, --dry-tg-radius
Data attributes: data-disabled, data-state
Example:
```svelte
<ToggleGroup.Root>
  <ToggleGroup.Item>...</ToggleGroup.Item>
</ToggleGroup.Root>
```

## Clipboard
Package: @dryui/ui
Category: action
Tags: copy, clipboard, paste, text
Kind: simple
Root import: import { Clipboard } from '@dryui/ui'
Subpath import: import { Clipboard } from '@dryui/ui/clipboard'
Props: value (string), required | timeout (number) | children (Snippet<[{ copied: boolean; copy: () => void }]>), required
Native props: Forwards <div> attributes via rest props.
CSS variables: none
Data attributes: none
Example:
```svelte
<Clipboard>Content</Clipboard>
```

## ScrollToTop
Package: @dryui/ui
Category: action
Tags: scroll, navigation, top, button
Kind: simple
Root import: import { ScrollToTop } from '@dryui/ui'
Subpath import: import { ScrollToTop } from '@dryui/ui/scroll-to-top'
Props: threshold (number), default 300 | target (HTMLElement) | behavior (ScrollBehavior), default 'smooth' | position ('bottom-right' | 'bottom-left' | 'bottom-center'), accepted bottom-right, bottom-left, bottom-center, default 'bottom-right' | class (string)
CSS variables: --dry-scroll-to-top-bg, --dry-scroll-to-top-border, --dry-scroll-to-top-color, --dry-scroll-to-top-offset, --dry-scroll-to-top-radius, --dry-scroll-to-top-shadow, --dry-scroll-to-top-size, --dry-scroll-to-top-z-index
Data attributes: data-theme, data-visible
Example:
```svelte
<ScrollToTop>Content</ScrollToTop>
```

## FloatButton
Package: @dryui/ui
Category: action
Tags: fab, float, action, button, expand
Kind: compound
Root import: import { FloatButton } from '@dryui/ui'
Subpath import: import { FloatButton } from '@dryui/ui/float-button'
Parts:
- FloatButton.Root
  Props: open (boolean), default false, bindable | position ('bottom-right' | 'bottom-left'), accepted bottom-right, bottom-left, default 'bottom-right' | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- FloatButton.Trigger
  Props: size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
- FloatButton.Action
  Props: children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
Structure:
  FloatButton.Root
    FloatButton.Trigger
    FloatButton.Action
CSS variables: --dry-fab-action-bg, --dry-fab-action-border, --dry-fab-action-color, --dry-fab-action-shadow, --dry-fab-action-size, --dry-fab-bg, --dry-fab-color, --dry-fab-gap, --dry-fab-offset, --dry-fab-shadow, --dry-fab-z-index
Data attributes: data-state, data-theme
Example:
```svelte
<FloatButton.Root>
  <FloatButton.Trigger>...</FloatButton.Trigger>
  <FloatButton.Action>...</FloatButton.Action>
</FloatButton.Root>
```

## ButtonGroup
Package: @dryui/ui
Category: action
Tags: button, group, toolbar, actions
Kind: simple
Root import: import { ButtonGroup } from '@dryui/ui'
Subpath import: import { ButtonGroup } from '@dryui/ui/button-group'
Props: orientation ('horizontal' | 'vertical'), accepted horizontal, vertical, default 'horizontal' | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet), required
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-button-group-gap, --dry-button-group-hover-z-index, --dry-button-group-radius
Data attributes: none
Example:
```svelte
<ButtonGroup>Content</ButtonGroup>
```

## Chip
Package: @dryui/ui
Category: action
Tags: chip, pill, filter, selection, tag
Kind: simple
Root import: import { Chip } from '@dryui/ui'
Subpath import: import { Chip } from '@dryui/ui/chip'
Props: none
Native props: Forwards native HTML attributes via rest props.
CSS variables: --dry-chip-bg, --dry-chip-border, --dry-chip-color, --dry-chip-default-bg, --dry-chip-default-color, --dry-chip-font-size, --dry-chip-padding-x, --dry-chip-padding-y, --dry-chip-radius
Data attributes: data-disabled, data-selected, data-theme
Example:
```svelte
<Chip variant="soft" color="blue">Policy friendly</Chip>
```

## ChipGroup
Package: @dryui/ui
Category: action
Tags: chip, group, filters, selection
Kind: compound
Root import: import { ChipGroup } from '@dryui/ui'
Subpath import: import { ChipGroup } from '@dryui/ui/chip-group'
Parts:
- ChipGroup.Root
  Props: type ('single' | 'multiple'), accepted single, multiple, default 'single' | value (string[]), default [], bindable | disabled (boolean), default false | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical, default 'horizontal' | size ('sm' | 'md'), accepted sm, md, default 'sm' | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- ChipGroup.Item
  Props: value (string), required | disabled (boolean) | children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
Structure:
  ChipGroup.Root
    ChipGroup.Item
CSS variables: --dry-chip-bg, --dry-chip-border, --dry-chip-color, --dry-chip-default-bg, --dry-chip-default-color, --dry-chip-font-size, --dry-chip-padding-x, --dry-chip-padding-y, --dry-chip-radius
Data attributes: data-disabled, data-state, data-theme
Example:
```svelte
<ChipGroup.Root type="multiple" bind:value={selectedFilters}>
  <ChipGroup.Item value="direct">Direct</ChipGroup.Item>
  <ChipGroup.Item value="flexible">Flexible</ChipGroup.Item>
  <ChipGroup.Item value="wifi">Wi-fi</ChipGroup.Item>
</ChipGroup.Root>
```

### input

## Input
Package: @dryui/ui
Category: input
Tags: form, text, input, field
Kind: simple
Root import: import { Input } from '@dryui/ui'
Subpath import: import { Input } from '@dryui/ui/input'
Props: value (string), default '', bindable | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | disabled (boolean)
Native props: Forwards <input> attributes via rest props.
CSS variables: --dry-input-bg, --dry-input-border, --dry-input-color, --dry-input-font-size, --dry-input-padding-x, --dry-input-padding-y, --dry-input-radius
Data attributes: data-disabled, data-invalid
Example:
```svelte
<Input type="email" bind:value={email} placeholder="you@example.com" />
```

## Textarea
Package: @dryui/ui
Category: input
Tags: form, text, multiline, textarea
Kind: simple
Root import: import { Textarea } from '@dryui/ui'
Subpath import: import { Textarea } from '@dryui/ui/textarea'
Props: value (string), default '', bindable | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | disabled (boolean)
Native props: Forwards native HTML attributes via rest props.
CSS variables: --dry-input-bg, --dry-input-border, --dry-input-color, --dry-input-font-size, --dry-input-padding-x, --dry-input-padding-y, --dry-input-radius
Data attributes: data-disabled, data-invalid
Example:
```svelte
<Textarea bind:value={message} placeholder="Write a message…" />
```

## PromptInput
Package: @dryui/ui
Category: input
Tags: prompt, input, chat, ai, textarea
Kind: simple
Root import: import { PromptInput } from '@dryui/ui'
Subpath import: import { PromptInput } from '@dryui/ui/prompt-input'
Props: value (string), default '' | placeholder (string) | disabled (boolean) | onpromptsubmit ((value: string) => void) | actions (Snippet)
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-prompt-input-action-bg, --dry-prompt-input-action-color, --dry-prompt-input-action-radius, --dry-prompt-input-bg, --dry-prompt-input-border, --dry-prompt-input-color, --dry-prompt-input-gap, --dry-prompt-input-padding, --dry-prompt-input-radius, --dry-prompt-input-textarea-min-height
Data attributes: data-disabled, data-part, data-theme
Example:
```svelte
<PromptInput>Content</PromptInput>
```

## NumberInput
Package: @dryui/ui
Category: input
Tags: form, number, input, counter
Kind: simple
Root import: import { NumberInput } from '@dryui/ui'
Subpath import: import { NumberInput } from '@dryui/ui/number-input'
Props: value (number), default 0, bindable | min (number) | max (number) | step (number) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md', Adjusts input density and its default maximum width for compact counter-style fields. | disabled (boolean)
Native props: Forwards <input> attributes via rest props.
CSS variables: --dry-input-bg, --dry-input-border, --dry-input-color, --dry-input-font-size, --dry-input-padding-x, --dry-input-padding-y, --dry-input-radius, --dry-number-input-focus-z-index, --dry-number-input-max-width
Data attributes: data-disabled
Example:
```svelte
<NumberInput bind:value={quantity} min={0} max={100} step={1} size="sm" />
```

## Checkbox
Package: @dryui/ui
Category: input
Tags: form, toggle, boolean, check
Kind: simple
Root import: import { Checkbox } from '@dryui/ui'
Subpath import: import { Checkbox } from '@dryui/ui/checkbox'
Props: checked (boolean), default false, bindable | indeterminate (boolean), default false | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | disabled (boolean)
Native props: Forwards <input> attributes via rest props.
CSS variables: --dry-checkbox-radius, --dry-checkbox-size
Data attributes: data-disabled, data-invalid, data-state
Example:
```svelte
<Checkbox bind:checked={agreed}>I agree to the terms</Checkbox>
```

## Switch
Package: @dryui/ui
Category: input
Tags: form, toggle, boolean, on-off
Kind: simple
Root import: import { Switch } from '@dryui/ui'
Subpath import: import { Switch } from '@dryui/ui/switch'
Props: checked (boolean), default false, bindable | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | disabled (boolean)
Native props: Forwards <button> attributes via rest props.
CSS variables: --dry-switch-thumb-offset, --dry-switch-thumb-size, --dry-switch-track-height, --dry-switch-track-width
Data attributes: data-disabled, data-state
Example:
```svelte
<Switch bind:checked={darkMode}>Dark mode</Switch>
```

## RadioGroup
Package: @dryui/ui
Category: input
Tags: form, radio, select, option, group
Kind: compound
Root import: import { RadioGroup } from '@dryui/ui'
Subpath import: import { RadioGroup } from '@dryui/ui/radio-group'
Parts:
- RadioGroup.Root
  Props: value (string), bindable | name (string) | disabled (boolean) | required (boolean) | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- RadioGroup.Item
  Props: value (string), required | disabled (boolean) | children (Snippet)
  Native props: Forwards <input> attributes via rest props.
Structure:
  RadioGroup.Root
    RadioGroup.Item
CSS variables: none
Data attributes: data-disabled, data-orientation
Example:
```svelte
<RadioGroup.Root>
  <RadioGroup.Item>...</RadioGroup.Item>
</RadioGroup.Root>
```

## Slider
Package: @dryui/ui
Category: input
Tags: form, range, slider, value
Kind: simple
Root import: import { Slider } from '@dryui/ui'
Subpath import: import { Slider } from '@dryui/ui/slider'
Props: value (number), default 50, bindable | min (number) | max (number) | step (number) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | disabled (boolean) | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical
Native props: Forwards <input> attributes via rest props.
CSS variables: --dry-slider-thumb-size, --dry-slider-track-height
Data attributes: data-disabled, data-orientation
Example:
```svelte
<Slider bind:value={volume} min={0} max={100} />
```

## Listbox
Package: @dryui/ui
Category: input
Tags: listbox, select, option, keyboard
Kind: compound
Root import: import { Listbox } from '@dryui/ui'
Subpath import: import { Listbox } from '@dryui/ui/listbox'
Parts:
- Listbox.Root
  Props: value (string | string[]), default '', bindable | multiple (boolean), default false | disabled (boolean) | onvaluechange ((value: string | string[]) => void) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Listbox.Item
  Props: value (string), required | disabled (boolean) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  Listbox.Root
    Listbox.Item
CSS variables: --dry-listbox-bg, --dry-listbox-border, --dry-listbox-item-hover-bg, --dry-listbox-item-padding-x, --dry-listbox-item-padding-y, --dry-listbox-item-radius, --dry-listbox-item-selected-bg, --dry-listbox-item-selected-color, --dry-listbox-padding, --dry-listbox-radius
Data attributes: data-disabled, data-selected, data-theme
Example:
```svelte
<Listbox.Root>
  <Listbox.Item>...</Listbox.Item>
</Listbox.Root>
```

## PinInput
Package: @dryui/ui
Category: input
Tags: form, pin, otp, code, verification
Kind: compound
Root import: import { PinInput } from '@dryui/ui'
Subpath import: import { PinInput } from '@dryui/ui/pin-input'
Parts:
- PinInput.Root
  Props: value (string), default '', bindable | length (number), default 4 | mask (boolean), default false | type ('numeric' | 'alphanumeric'), accepted numeric, alphanumeric, default 'numeric' | pattern (RegExp) | placeholder (string), default '○' | disabled (boolean), default false | oncomplete ((value: string) => void) | pasteTransformer ((text: string) => string) | blurOnComplete (boolean), default false | name (string) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | variant ('outline' | 'flushed'), accepted outline, flushed, default 'outline' | children (Snippet<[{ cells: PinInputCellType[] }]>)
  Native props: Forwards <div> attributes via rest props.
- PinInput.Group
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- PinInput.Cell
  Props: cell (PinInputCellType), required | children (Snippet<[{ char: string | null; isActive: boolean; hasFakeCaret: boolean }]>)
  Native props: Forwards <div> attributes via rest props.
- PinInput.Separator
  Props: children (Snippet)
  Native props: Forwards <div> attributes via rest props.
Structure:
  PinInput.Root
    PinInput.Group
      PinInput.Cell
    PinInput.Separator
CSS variables: --dry-pin-bg, --dry-pin-border, --dry-pin-caret-color, --dry-pin-font-size, --dry-pin-radius, --dry-pin-separator-color, --dry-pin-size
Data attributes: data-active, data-disabled, data-error, data-pin-input-caret, data-pin-input-hidden, data-pin-input-placeholder, data-state
Example:
```svelte
<PinInput.Root bind:value={pin} length={6} oncomplete={handleVerify}>
  {#snippet children({ cells })}
    <PinInput.Group>
      {#each cells.slice(0, 3) as cell}
        <PinInput.Cell {cell} />
      {/each}
    </PinInput.Group>
    <PinInput.Separator />
    <PinInput.Group>
      {#each cells.slice(3) as cell}
        <PinInput.Cell {cell} />
      {/each}
    </PinInput.Group>
  {/snippet}
</PinInput.Root>
```

## Rating
Package: @dryui/ui
Category: input
Tags: form, stars, rating, review, score
Kind: simple
Root import: import { Rating } from '@dryui/ui'
Subpath import: import { Rating } from '@dryui/ui/rating'
Props: value (number), default 0, bindable | max (number) | disabled (boolean) | readonly (boolean) | allowHalf (boolean) | onValueChange ((value: number) => void) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md'
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-rating-focus-ring, --dry-rating-radius, --dry-rating-selected-color, --dry-rating-unselected-color, --dry-star-size
Data attributes: data-disabled, data-highlighted, data-readonly, data-state
Example:
```svelte
<Rating bind:value={score} />
```

## TimeInput
Package: @dryui/ui
Category: input
Tags: time, input, form, clock
Kind: simple
Root import: import { TimeInput } from '@dryui/ui'
Subpath import: import { TimeInput } from '@dryui/ui/time-input'
Props: value (string), default '', bindable | disabled (boolean) | step (number)
Native props: Forwards <input> attributes via rest props.
CSS variables: --dry-time-input-bg, --dry-time-input-border, --dry-time-input-color, --dry-time-input-font-size, --dry-time-input-padding-x, --dry-time-input-padding-y, --dry-time-input-radius
Data attributes: data-disabled, data-theme
Example:
```svelte
<TimeInput>Content</TimeInput>
```

## TagsInput
Package: @dryui/ui
Category: input
Tags: form, tags, chips, multi, input
Kind: compound
Root import: import { TagsInput } from '@dryui/ui'
Subpath import: import { TagsInput } from '@dryui/ui/tags-input'
Parts:
- TagsInput.Root
  Props: value (string[]), default [], bindable | maxTags (number) | allowDuplicates (boolean) | disabled (boolean) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | onValueChange ((value: string[]) => void) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- TagsInput.Input
  Props: placeholder (string)
  Native props: Forwards <input> attributes via rest props.
- TagsInput.Tag
  Props: index (number), required | value (string), required, bindable | children (Snippet)
  Native props: Forwards <span> attributes via rest props.
- TagsInput.TagDelete
  Props: index (number), required | value (string)
  Native props: Forwards <button> attributes via rest props.
- TagsInput.List
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  TagsInput.Root
    TagsInput.Input
    TagsInput.Tag
    TagsInput.TagDelete
    TagsInput.List
CSS variables: none
Data attributes: data-disabled
Example:
```svelte
<TagsInput.Root>
  <TagsInput.Input>...</TagsInput.Input>
  <TagsInput.Tag>...</TagsInput.Tag>
  <TagsInput.TagDelete>...</TagsInput.TagDelete>
  <TagsInput.List>...</TagsInput.List>
</TagsInput.Root>
```

## FileUpload
Package: @dryui/ui
Category: input
Tags: form, file, upload, drag, drop
Kind: compound
Root import: import { FileUpload } from '@dryui/ui'
Subpath import: import { FileUpload } from '@dryui/ui/file-upload'
Parts:
- FileUpload.Root
  Props: files (File[]), default [], bindable | accept (string) | multiple (boolean) | maxSize (number) | maxFiles (number) | disabled (boolean) | onFilesChange ((files: File[]) => void) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- FileUpload.Dropzone
  Props: size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- FileUpload.Trigger
  Props: size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
- FileUpload.List
  Props: size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet<[{ file: File; index: number }]>), required
  Native props: Forwards <ul> attributes via rest props.
- FileUpload.Item
  Props: file (File), required | index (number), required | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet)
  Native props: Forwards <li> attributes via rest props.
- FileUpload.ItemDelete
  Props: index (number), required | children (Snippet)
  Native props: Forwards <button> attributes via rest props.
Structure:
  FileUpload.Root
    FileUpload.Dropzone
    FileUpload.Trigger
    FileUpload.List
    FileUpload.Item
    FileUpload.ItemDelete
CSS variables: --dry-fu-bg, --dry-fu-border, --dry-fu-btn-bg, --dry-fu-btn-color, --dry-fu-btn-font-size, --dry-fu-btn-padding-x, --dry-fu-btn-padding-y, --dry-fu-btn-radius, --dry-fu-font-size, --dry-fu-item-font-size, --dry-fu-item-padding, --dry-fu-item-radius, --dry-fu-min-height, --dry-fu-padding, --dry-fu-radius
Data attributes: data-disabled, data-dragging
Example:
```svelte
<FileUpload.Root>
  <FileUpload.Dropzone>...</FileUpload.Dropzone>
  <FileUpload.Trigger>...</FileUpload.Trigger>
  <FileUpload.List>...</FileUpload.List>
  <FileUpload.Item>...</FileUpload.Item>
  <FileUpload.ItemDelete>...</FileUpload.ItemDelete>
</FileUpload.Root>
```

## ColorPicker
Package: @dryui/ui
Category: input
Tags: form, color, picker, palette
Kind: compound
Root import: import { ColorPicker } from '@dryui/ui'
Subpath import: import { ColorPicker } from '@dryui/ui/color-picker'
Parts:
- ColorPicker.Root
  Props: value (string), default '#ff0000', bindable | alpha (number), default 1, bindable | disabled (boolean) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- ColorPicker.Area
  Props: width (number), default 200 | height (number), default 150
  Native props: Forwards <div> attributes via rest props.
- ColorPicker.HueSlider
  Props: none
  Native props: Forwards <input> attributes via rest props.
- ColorPicker.AlphaSlider
  Props: none
  Native props: Forwards <input> attributes via rest props.
- ColorPicker.Input
  Props: format ('hex' | 'rgb' | 'hsl'), accepted hex, rgb, hsl, default 'hex'
  Native props: Forwards <input> attributes via rest props.
- ColorPicker.Swatch
  Props: color (string)
  Native props: Forwards <div> attributes via rest props.
- ColorPicker.EyeDropper
  Props: none
  Native props: Forwards <button> attributes via rest props.
Structure:
  ColorPicker.Root
    ColorPicker.Area
    ColorPicker.HueSlider
    ColorPicker.AlphaSlider
    ColorPicker.Input
    ColorPicker.Swatch
    ColorPicker.EyeDropper
CSS variables: --dry-color-picker-area-height, --dry-color-picker-area-width, --dry-color-picker-grid-dark, --dry-color-picker-grid-light, --dry-color-picker-grid-size, --dry-color-picker-indicator-border, --dry-color-picker-indicator-shadow, --dry-color-picker-indicator-size, --dry-color-picker-slider-thumb-bg, --dry-color-picker-slider-thumb-border, --dry-color-picker-slider-thumb-shadow, --dry-color-picker-slider-thumb-shadow-hover, --dry-color-picker-slider-thumb-size, --dry-color-picker-slider-track-height, --dry-color-picker-surface-hover, --dry-color-picker-swatch-size, --dry-color-picker-width, --dry-input-bg, --dry-input-border, --dry-input-color, --dry-input-font-size, --dry-input-padding-x, --dry-input-padding-y, --dry-input-radius, --dry-slider-thumb-size, --dry-slider-track-height
Data attributes: data-disabled
Example:
```svelte
<ColorPicker.Root>
  <ColorPicker.Area>...</ColorPicker.Area>
  <ColorPicker.HueSlider>...</ColorPicker.HueSlider>
  <ColorPicker.AlphaSlider>...</ColorPicker.AlphaSlider>
  <ColorPicker.Input>...</ColorPicker.Input>
  <ColorPicker.Swatch>...</ColorPicker.Swatch>
  <ColorPicker.EyeDropper>...</ColorPicker.EyeDropper>
</ColorPicker.Root>
```

## Transfer
Package: @dryui/ui
Category: input
Tags: transfer, dual-list, move, select, shuttle
Kind: compound
Root import: import { Transfer } from '@dryui/ui'
Subpath import: import { Transfer } from '@dryui/ui/transfer'
Parts:
- Transfer.Root
  Props: sourceItems (TransferItemType[]), default [], required, bindable | targetItems (TransferItemType[]), default [], bindable | onChange ((source: TransferItemType[], target: TransferItemType[]) => void), default () => { | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Transfer.List
  Props: type ('source' | 'target'), accepted source, target, required | title (string) | filterable (boolean), default false | content (Snippet<[{ items: TransferItemType[] }]>)
  Native props: Forwards <div> attributes via rest props.
- Transfer.Item
  Props: key (string), required | type ('source' | 'target'), accepted source, target, required | disabled (boolean) | children (Snippet), required
  Native props: Forwards native HTML attributes via rest props.
- Transfer.Actions
  Props: children (Snippet<[{) | moveToTarget (() => void), required | moveToSource (() => void), required | moveAllToTarget (() => void), required | moveAllToSource (() => void), required | canMoveToTarget (boolean), required | canMoveToSource (boolean), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  Transfer.Root
    Transfer.List
    Transfer.Item
    Transfer.Actions
CSS variables: --dry-transfer-actions-gap, --dry-transfer-bg, --dry-transfer-border, --dry-transfer-header-bg, --dry-transfer-item-disabled, --dry-transfer-item-hover, --dry-transfer-item-selected, --dry-transfer-list-height, --dry-transfer-padding, --dry-transfer-radius
Data attributes: data-disabled, data-selected, data-transfer-count, data-transfer-item, data-transfer-list-content, data-transfer-list-header, data-transfer-select-all
Example:
```svelte
<Transfer.Root>
  <Transfer.List>...</Transfer.List>
  <Transfer.Item>...</Transfer.Item>
  <Transfer.Actions>...</Transfer.Actions>
</Transfer.Root>
```

## RichTextEditor
Package: @dryui/ui
Category: input
Tags: editor, rich-text, wysiwyg, contenteditable, formatting
Kind: compound
Root import: import { RichTextEditor } from '@dryui/ui'
Subpath import: import { RichTextEditor } from '@dryui/ui/rich-text-editor'
Parts:
- RichTextEditor.Root
  Props: value (string), default '', bindable | placeholder (string) | readonly (boolean) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- RichTextEditor.Toolbar
  Props: none
  Native props: Forwards <div> attributes via rest props.
- RichTextEditor.Content
  Props: none
  Native props: Forwards <div> attributes via rest props.
Structure:
  RichTextEditor.Root
    RichTextEditor.Toolbar
    RichTextEditor.Content
CSS variables: --dry-rte-border, --dry-rte-button-size, --dry-rte-content-bg, --dry-rte-padding, --dry-rte-popover-z-index, --dry-rte-radius, --dry-rte-toolbar-bg
Data attributes: data-active, data-readonly
Example:
```svelte
<RichTextEditor.Root>
  <RichTextEditor.Toolbar>...</RichTextEditor.Toolbar>
  <RichTextEditor.Content>...</RichTextEditor.Content>
</RichTextEditor.Root>
```

## PhoneInput
Package: @dryui/ui
Category: input
Tags: form, phone, telephone, input, country-code, international
Kind: simple
Root import: import { PhoneInput } from '@dryui/ui'
Subpath import: import { PhoneInput } from '@dryui/ui/phone-input'
Props: value (string), default '', bindable | defaultCountry (string) | disabled (boolean) | name (string) | placeholder (string) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | countries (CountryInfo[]) | onchange ((value: string) => void)
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-phone-input-bg, --dry-phone-input-border, --dry-phone-input-color, --dry-phone-input-radius
Data attributes: data-disabled, data-part
Example:
```svelte
<PhoneInput bind:value={phone} defaultCountry="US" placeholder="(555) 123-4567" />
```

## CountrySelect
Package: @dryui/ui
Category: input
Tags: form, country, select, region, flag, dial-code
Kind: simple
Root import: import { CountrySelect } from '@dryui/ui'
Subpath import: import { CountrySelect } from '@dryui/ui/country-select'
Props: value (string), default '', bindable | regions (string[]) | showDialCode (boolean) | disabled (boolean) | placeholder (string) | name (string) | onchange ((code: string) => void) | children (Snippet)
Native props: Forwards <div> attributes via rest props.
CSS variables: none
Data attributes: data-part, data-selected, data-theme
Example:
```svelte
<CountrySelect bind:value={country} placeholder="Select country" />
```

## DateTimeInput
Package: @dryui/ui
Category: input
Tags: date, time, datetime, input, form, locale
Kind: simple
Root import: import { DateTimeInput } from '@dryui/ui'
Subpath import: import { DateTimeInput } from '@dryui/ui/date-time-input'
Props: value (Date), default $bindable(new Date()), bindable | min (Date) | max (Date) | disabled (boolean), default false | locale (string), default 'en-US' | name (string) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md'
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-dti-gap
Data attributes: data-part
Example:
```svelte
<DateTimeInput bind:value={appointmentDate} name="appointment" />
```

### form

## Label
Package: @dryui/ui
Category: form
Tags: form, label, text, accessibility
Kind: simple
Root import: import { Label } from '@dryui/ui'
Subpath import: import { Label } from '@dryui/ui/label'
Props: children (Snippet), required | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md'
Native props: Forwards native HTML attributes via rest props.
CSS variables: --dry-label-color, --dry-label-font-size, --dry-label-leading, --dry-label-weight
Data attributes: data-disabled, data-required
Example:
```svelte
<Label>Content</Label>
```

## Field
Package: @dryui/ui
Category: form
Tags: form, field, label, error, validation
Kind: compound
Root import: import { Field } from '@dryui/ui'
Subpath import: import { Field } from '@dryui/ui/field'
Parts:
- Field.Root
  Props: children (Snippet), required | error (string) | required (boolean) | disabled (boolean)
  Native props: Forwards <div> attributes via rest props.
- Field.Description
  Props: children (Snippet), required
  Native props: Forwards <p> attributes via rest props.
- Field.Error
  Props: children (Snippet), required
  Native props: Forwards <p> attributes via rest props.
Structure:
  Field.Root
CSS variables: --dry-field-gap
Data attributes: data-disabled, data-error
Example:
```svelte
<Field.Root>
  <Label>Username</Label>
  <Input bind:value={username} />
</Field.Root>
```

## Fieldset
Package: @dryui/ui
Category: form
Tags: form, group, legend, settings
Kind: compound
Root import: import { Fieldset } from '@dryui/ui'
Subpath import: import { Fieldset } from '@dryui/ui/fieldset'
Parts:
- Fieldset.Root
  Props: children (Snippet), required
  Native props: Forwards native HTML attributes via rest props.
- Fieldset.Legend
  Props: children (Snippet), required
  Native props: Forwards native HTML attributes via rest props.
- Fieldset.Description
  Props: children (Snippet), required
  Native props: Forwards <p> attributes via rest props.
- Fieldset.Content
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  Fieldset.Root
    Fieldset.Legend
    Fieldset.Description
    Fieldset.Content
CSS variables: none
Data attributes: none
Example:
```svelte
<Fieldset.Root>
  <Fieldset.Legend>Notification preferences</Fieldset.Legend>
  <Fieldset.Description>Choose how release updates reach your team.</Fieldset.Description>
  <Fieldset.Content>
    <Checkbox checked={true}>Email digests</Checkbox>
    <Checkbox>SMS alerts</Checkbox>
  </Fieldset.Content>
</Fieldset.Root>
```

## Select
Package: @dryui/ui
Category: form
Tags: form, select, dropdown, option, choice, non-searchable
Kind: compound
Root import: import { Select } from '@dryui/ui'
Subpath import: import { Select } from '@dryui/ui/select'
Parts:
- Select.Root
  Props: open (boolean), default false, bindable | value (string), default '', bindable | disabled (boolean) | name (string), Adds a hidden input so the selected value participates in native form submission. | children (Snippet), required
- Select.Trigger
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Select.Content
  Props: offset (number) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Select.Item
  Props: value (string), required | disabled (boolean) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Select.Value
  Props: placeholder (string)
  Native props: Forwards <span> attributes via rest props.
Structure:
  Select.Root
    Select.Trigger
      Select.Value
    Select.Content
      Select.Item
CSS variables: --dry-select-bg, --dry-select-border, --dry-select-color, --dry-select-font-size, --dry-select-padding-x, --dry-select-padding-y, --dry-select-radius
Data attributes: data-disabled, data-invalid, data-placeholder, data-state
Example:
```svelte
<Select.Root bind:value={selected} bind:open={selectOpen} name="selection">
  <Select.Trigger>
    <Select.Value placeholder="Choose…" />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="a">Alpha</Select.Item>
    <Select.Item value="b">Beta</Select.Item>
  </Select.Content>
</Select.Root>
```

## SegmentedControl
Package: @dryui/ui
Category: form
Tags: segmented, switcher, single-select, view-toggle
Kind: compound
Root import: import { SegmentedControl } from '@dryui/ui'
Subpath import: import { SegmentedControl } from '@dryui/ui/segmented-control'
Parts:
- SegmentedControl.Root
  Props: value (string), default '', bindable | disabled (boolean), default false | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical, default 'horizontal' | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- SegmentedControl.Item
  Props: value (string), required | disabled (boolean) | children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
Structure:
  SegmentedControl.Root
    SegmentedControl.Item
CSS variables: --dry-sc-bg, --dry-sc-border, --dry-sc-foreground, --dry-sc-radius, --dry-sc-selected-bg, --dry-sc-selected-color
Data attributes: data-disabled, data-state
Example:
```svelte
<SegmentedControl.Root bind:value={tripType}>
  <SegmentedControl.Item value="one-way">One way</SegmentedControl.Item>
  <SegmentedControl.Item value="round-trip">Round trip</SegmentedControl.Item>
  <SegmentedControl.Item value="multi-city">Multi-city</SegmentedControl.Item>
</SegmentedControl.Root>
```

## Combobox
Package: @dryui/ui
Category: form
Tags: form, search, autocomplete, filter, select, typeahead, searchable-select
Kind: compound
Root import: import { Combobox } from '@dryui/ui'
Subpath import: import { Combobox } from '@dryui/ui/combobox'
Parts:
- Combobox.Root
  Props: open (boolean), default false, bindable | value (string), default '', bindable | disabled (boolean) | name (string), Adds a hidden input so the selected value participates in native form submission. | children (Snippet), required
- Combobox.Input
  Props: placeholder (string) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md'
  Native props: Forwards <input> attributes via rest props.
- Combobox.Content
  Props: offset (number) | loading (boolean) | loadingContent (Snippet) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Combobox.Item
  Props: value (string), required | index (number), required | disabled (boolean) | icon (Snippet) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Combobox.Empty
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Combobox.Group
  Props: label (string), required | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  Combobox.Root
    Combobox.Input
    Combobox.Content
      Combobox.Item
CSS variables: --dry-combobox-bg, --dry-combobox-border, --dry-combobox-color, --dry-combobox-font-size, --dry-combobox-padding-x, --dry-combobox-padding-y, --dry-combobox-radius
Data attributes: data-disabled, data-highlighted, data-invalid, data-part, data-state
Example:
```svelte
<Combobox.Root bind:value={selectedFramework} name="framework">
  <Combobox.Input placeholder="Search frameworks..." />
  <Combobox.Content>
    <Combobox.Item value="svelte" index={0}>Svelte</Combobox.Item>
    <Combobox.Item value="react" index={1}>React</Combobox.Item>
  </Combobox.Content>
</Combobox.Root>
```

## DateField
Package: @dryui/ui
Category: form
Tags: date, input, field, segment, locale, form, date-input
Kind: compound
Root import: import { DateField } from '@dryui/ui'
Subpath import: import { DateField } from '@dryui/ui/date-field'
Parts:
- DateField.Root
  Props: value (Date | null), default $bindable<Date | null>(null), bindable | name (string), Adds a hidden input so the selected date participates in native form submission as YYYY-MM-DD. | locale (string) | min (Date | null) | max (Date | null) | disabled (boolean) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- DateField.Segment
  Props: type (DateSegmentType), required
  Native props: Forwards <span> attributes via rest props.
- DateField.Separator
  Props: separator (string)
  Native props: Forwards <span> attributes via rest props.
Structure:
  DateField.Root
    DateField.Segment
    DateField.Separator
CSS variables: --dry-df-bg, --dry-df-border, --dry-df-color, --dry-df-font-size, --dry-df-padding-x, --dry-df-padding-y, --dry-df-radius
Data attributes: data-disabled, data-invalid, data-placeholder
Example:
```svelte
<DateField.Root bind:value={departureDate} name="departureDate">
  <DateField.Segment type="month" />
  <DateField.Separator />
  <DateField.Segment type="day" />
  <DateField.Separator />
  <DateField.Segment type="year" />
</DateField.Root>
```

## DatePicker
Package: @dryui/ui
Category: form
Tags: form, date, calendar, picker, locale, popover
Kind: compound
Root import: import { DatePicker } from '@dryui/ui'
Subpath import: import { DatePicker } from '@dryui/ui/date-picker'
Parts:
- DatePicker.Root
  Props: open (boolean), bindable | value (Date | null), bindable | name (string), Adds a hidden input so the selected date participates in native form submission as YYYY-MM-DD. | locale (string) | min (Date | null) | max (Date | null) | disabled (boolean) | children (Snippet), required
- DatePicker.Trigger
  Props: size ('sm' | 'md' | 'lg'), accepted sm, md, lg | placeholder (string) | children (Snippet)
  Native props: Forwards <button> attributes via rest props.
- DatePicker.Content
  Props: offset (number) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- DatePicker.Calendar
  Props: none
  Native props: Forwards <div> attributes via rest props.
Structure:
  DatePicker.Root
    DatePicker.Trigger
    DatePicker.Content
      DatePicker.Calendar
CSS variables: --dry-dp-bg, --dry-dp-border, --dry-dp-color, --dry-dp-font-size, --dry-dp-padding-x, --dry-dp-padding-y, --dry-dp-radius
Data attributes: data-disabled, data-invalid, data-outside-month, data-placeholder, data-selected, data-theme, data-today
Example:
```svelte
<DatePicker.Root bind:value={departureDate} name="departureDate">
  <DatePicker.Trigger placeholder="Select departure date" />
  <DatePicker.Content>
    <DatePicker.Calendar />
  </DatePicker.Content>
</DatePicker.Root>
```

## Calendar
Package: @dryui/ui
Category: form
Tags: date, calendar, picker, month, locale
Kind: compound
Root import: import { Calendar } from '@dryui/ui'
Subpath import: import { Calendar } from '@dryui/ui/calendar'
Parts:
- Calendar.Root
  Props: value (Date | null), default $bindable<Date | null>(null), bindable | locale (string) | min (Date | null) | max (Date | null) | disabled (boolean) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Calendar.Header
  Props: children (Snippet)
  Native props: Forwards <div> attributes via rest props.
- Calendar.Grid
  Props: none
  Native props: Forwards <div> attributes via rest props.
- Calendar.Prev
  Props: children (Snippet)
  Native props: Forwards <button> attributes via rest props.
- Calendar.Next
  Props: children (Snippet)
  Native props: Forwards <button> attributes via rest props.
- Calendar.Heading
  Props: none
  Native props: Forwards <span> attributes via rest props.
Structure:
  Calendar.Root
    Calendar.Header
    Calendar.Grid
    Calendar.Prev
    Calendar.Next
    Calendar.Heading
CSS variables: --dry-calendar-bg, --dry-calendar-border, --dry-calendar-day-hover-bg, --dry-calendar-day-radius, --dry-calendar-day-size, --dry-calendar-grid-gap, --dry-calendar-header-color, --dry-calendar-muted-color, --dry-calendar-outside-color, --dry-calendar-padding, --dry-calendar-radius, --dry-calendar-range-bg, --dry-calendar-selected-bg, --dry-calendar-selected-color, --dry-calendar-selected-hover-bg, --dry-calendar-shadow, --dry-calendar-today-color
Data attributes: data-disabled, data-in-range, data-outside-month, data-range-end, data-range-start, data-selected, data-theme, data-today
Example:
```svelte
<Calendar.Root>
  <Calendar.Header>...</Calendar.Header>
  <Calendar.Grid>...</Calendar.Grid>
  <Calendar.Prev>...</Calendar.Prev>
  <Calendar.Next>...</Calendar.Next>
  <Calendar.Heading>...</Calendar.Heading>
</Calendar.Root>
```

## DateRangePicker
Package: @dryui/ui
Category: form
Tags: date, range, picker, calendar, period
Kind: compound
Root import: import { DateRangePicker } from '@dryui/ui'
Subpath import: import { DateRangePicker } from '@dryui/ui/date-range-picker'
Parts:
- DateRangePicker.Root
  Props: open (boolean), default false, bindable | startDate (Date | null), default $bindable<Date | null>(null), bindable | endDate (Date | null), default $bindable<Date | null>(null), bindable | locale (string) | min (Date | null) | max (Date | null) | disabled (boolean) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- DateRangePicker.Trigger
  Props: placeholder (string) | children (Snippet | undefined)
  Native props: Forwards <button> attributes via rest props.
- DateRangePicker.Content
  Props: placement ('top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'), accepted top, top-start, top-end, bottom, bottom-start, bottom-end | offset (number) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- DateRangePicker.Calendar
  Props: none
  Native props: Forwards <div> attributes via rest props.
- DateRangePicker.Preset
  Props: startDate (Date), required | endDate (Date), required | children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
Structure:
  DateRangePicker.Root
    DateRangePicker.Trigger
    DateRangePicker.Content
    DateRangePicker.Calendar
    DateRangePicker.Preset
CSS variables: --dry-drp-calendar-bg, --dry-drp-calendar-border, --dry-drp-calendar-day-hover-bg, --dry-drp-calendar-range-bg, --dry-drp-content-bg, --dry-drp-content-border, --dry-drp-content-padding, --dry-drp-content-radius, --dry-drp-content-shadow, --dry-drp-preset-bg, --dry-drp-preset-border, --dry-drp-preset-color, --dry-drp-preset-selected-bg, --dry-drp-preset-selected-color, --dry-drp-trigger-bg, --dry-drp-trigger-border, --dry-drp-trigger-color, --dry-drp-trigger-padding-x, --dry-drp-trigger-padding-y, --dry-drp-trigger-radius
Data attributes: data-disabled, data-in-range, data-outside-month, data-placeholder, data-range-end, data-range-start, data-selected, data-theme, data-today
Example:
```svelte
<DateRangePicker.Root>
  <DateRangePicker.Trigger>...</DateRangePicker.Trigger>
  <DateRangePicker.Content>...</DateRangePicker.Content>
  <DateRangePicker.Calendar>...</DateRangePicker.Calendar>
  <DateRangePicker.Preset>...</DateRangePicker.Preset>
</DateRangePicker.Root>
```

## RangeCalendar
Package: @dryui/ui
Category: form
Tags: date, range, calendar, selection
Kind: compound
Root import: import { RangeCalendar } from '@dryui/ui'
Subpath import: import { RangeCalendar } from '@dryui/ui/range-calendar'
Parts:
- RangeCalendar.Root
  Props: startDate (Date | null), default $bindable<Date | null>(null), bindable | endDate (Date | null), default $bindable<Date | null>(null), bindable | locale (string) | min (Date | null) | max (Date | null) | disabled (boolean) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- RangeCalendar.Grid
  Props: none
  Native props: Forwards <div> attributes via rest props.
Structure:
  RangeCalendar.Root
    RangeCalendar.Grid
CSS variables: --dry-range-calendar-bg, --dry-range-calendar-border, --dry-range-calendar-day-hover-bg, --dry-range-calendar-day-radius, --dry-range-calendar-day-size, --dry-range-calendar-outside-color, --dry-range-calendar-padding, --dry-range-calendar-radius, --dry-range-calendar-range-bg, --dry-range-calendar-selected-bg, --dry-range-calendar-selected-color, --dry-range-calendar-selected-hover-bg, --dry-range-calendar-shadow, --dry-range-calendar-today-color
Data attributes: data-disabled, data-in-range, data-outside-month, data-range-end, data-range-start, data-selected, data-theme, data-today
Example:
```svelte
<RangeCalendar.Root>
  <RangeCalendar.Grid>...</RangeCalendar.Grid>
</RangeCalendar.Root>
```

### layout

## Container
Package: @dryui/ui
Category: layout
Tags: wrapper, center, max-width
Kind: simple
Root import: import { Container } from '@dryui/ui'
Subpath import: import { Container } from '@dryui/ui/container'
Props: size ('sm' | 'md' | 'lg' | 'xl' | 'full'), accepted sm, md, lg, xl, full, default 'lg', Preset container width, not an arbitrary CSS length. | padding (boolean), default true | children (Snippet), required
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-container-padding
Data attributes: none
Example:
```svelte
<Container>
  <p>Centered content</p>
</Container>
```

## Stack
Package: @dryui/ui
Category: layout
Tags: layout, stack, vertical, horizontal, gap
Kind: simple
Root import: import { Stack } from '@dryui/ui'
Subpath import: import { Stack } from '@dryui/ui/stack'
Props: direction ('vertical' | 'horizontal' | 'row' | 'column'), accepted vertical, horizontal, row, column, default 'vertical', Controls whether items stack vertically or horizontally. Also accepts row and column aliases. | gap ('sm' | 'md' | 'lg' | 'xl'), accepted sm, md, lg, xl, default 'md', Uses DryUI spacing scale tokens, not raw CSS units. | align ('start' | 'center' | 'end' | 'stretch'), accepted start, center, end, stretch, default 'stretch', Maps to align-items for the stack container. | children (Snippet), required
Native props: Forwards <div> attributes via rest props.
CSS variables: none
Data attributes: none
Example:
```svelte
<Stack direction="row" gap="md">
  <p>First item</p>
  <p>Second item</p>
</Stack>
```

## Grid
Package: @dryui/ui
Category: layout
Tags: layout, grid, columns, responsive
Kind: simple
Root import: import { Grid } from '@dryui/ui'
Subpath import: import { Grid } from '@dryui/ui/grid'
Props: columns (1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12), accepted 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, default 12, Fixed integer column count for evenly sized columns. Use template when you need uneven widths. | template (string), Custom CSS grid-template-columns value for uneven or mixed-width columns. | gap ('sm' | 'md' | 'lg' | 'xl'), accepted sm, md, lg, xl, default 'md', Uses DryUI spacing scale tokens, not raw CSS units. | align ('start' | 'center' | 'end' | 'stretch'), accepted start, center, end, stretch, default 'stretch', Maps to align-items for the grid container. | children (Snippet), required
Native props: Forwards <div> attributes via rest props.
CSS variables: none
Data attributes: none
Example:
```svelte
<Grid template="minmax(0, 2fr) minmax(18rem, 1fr)" gap="lg">
  <Card.Root><Card.Content>Main</Card.Content></Card.Root>
  <Card.Root><Card.Content>Sidebar</Card.Content></Card.Root>
</Grid>
```

## Flex
Package: @dryui/ui
Category: layout
Tags: layout, flex, row, column, align
Kind: simple
Root import: import { Flex } from '@dryui/ui'
Subpath import: import { Flex } from '@dryui/ui/flex'
Props: direction ('row' | 'column' | 'row-reverse' | 'column-reverse'), accepted row, column, row-reverse, column-reverse, default 'row', Maps to flex-direction. | wrap ('nowrap' | 'wrap' | 'wrap-reverse'), accepted nowrap, wrap, wrap-reverse, default 'nowrap', Maps to flex-wrap. | gap ('sm' | 'md' | 'lg' | 'xl'), accepted sm, md, lg, xl, default 'md', Uses DryUI spacing scale tokens, not raw CSS units. | justify ('start' | 'center' | 'end' | 'between' | 'around' | 'evenly'), accepted start, center, end, between, around, evenly, default 'start', Maps to justify-content. | align ('start' | 'center' | 'end' | 'stretch' | 'baseline'), accepted start, center, end, stretch, baseline, default 'stretch', Maps to align-items. | children (Snippet), required
Native props: Forwards <div> attributes via rest props.
CSS variables: none
Data attributes: none
Example:
```svelte
<Flex justify="between" align="center">
  <span>Left</span>
  <Button>Right</Button>
</Flex>
```

## Separator
Package: @dryui/ui
Category: layout
Tags: divider, line, hr, separator
Kind: simple
Root import: import { Separator } from '@dryui/ui'
Subpath import: import { Separator } from '@dryui/ui/separator'
Props: orientation ('horizontal' | 'vertical'), accepted horizontal, vertical, default 'horizontal' | decorative (boolean), default true
Native props: Forwards <div> attributes via rest props.
CSS variables: none
Data attributes: none
Example:
```svelte
<Separator />
```

## Spacer
Package: @dryui/ui
Category: layout
Tags: space, gap, margin, padding
Kind: simple
Root import: import { Spacer } from '@dryui/ui'
Subpath import: import { Spacer } from '@dryui/ui/spacer'
Props: size ('xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'), accepted xs, sm, md, lg, xl, 2xl, default 'md' | axis ('vertical' | 'horizontal'), accepted vertical, horizontal, default 'vertical'
Native props: Forwards <div> attributes via rest props.
CSS variables: none
Data attributes: none
Example:
```svelte
<Spacer size="lg" />
```

## AspectRatio
Package: @dryui/ui
Category: layout
Tags: image, video, ratio, responsive
Kind: simple
Root import: import { AspectRatio } from '@dryui/ui'
Subpath import: import { AspectRatio } from '@dryui/ui/aspect-ratio'
Props: ratio (number), default 16 / 9 | children (Snippet), required
Native props: Forwards <div> attributes via rest props.
CSS variables: none
Data attributes: none
Example:
```svelte
<AspectRatio>Content</AspectRatio>
```

## PageLayout
Package: @dryui/ui
Category: layout
Tags: page, layout, shell, sidebar, aside
Kind: compound
Root import: import { PageLayout } from '@dryui/ui'
Subpath import: import { PageLayout } from '@dryui/ui/page-layout'
Parts:
- PageLayout.Root
  Props: fullHeight (boolean), default false | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- PageLayout.Header
  Props: sticky (boolean), default false | children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
- PageLayout.Sidebar
  Props: sticky (boolean), default false | children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
- PageLayout.Content
  Props: children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
- PageLayout.Aside
  Props: sticky (boolean), default false | children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
Structure:
  PageLayout.Root
    PageLayout.Header
    PageLayout.Sidebar
    PageLayout.Content
CSS variables: --dry-page-layout-aside-width, --dry-page-layout-bg, --dry-page-layout-border, --dry-page-layout-content-max-width, --dry-page-layout-gap, --dry-page-layout-header-height, --dry-page-layout-padding, --dry-page-layout-radius, --dry-page-layout-shadow, --dry-page-layout-sidebar-width, --dry-page-layout-surface, --dry-page-layout-surface-shadow
Data attributes: data-full-height, data-region, data-sticky, data-theme
Example:
```svelte
<PageLayout.Root fullHeight>
  <PageLayout.Header sticky>
    <AppBar.Root>
      <AppBar.Title>Workspace</AppBar.Title>
      <Button variant="ghost" size="sm">Search</Button>
      <Button size="sm">New</Button>
    </AppBar.Root>
  </PageLayout.Header>
  <PageLayout.Sidebar sticky>
    <Sidebar.Root>
      <Sidebar.Content>
        <Sidebar.Group>
          <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
          <Sidebar.Item active href="#">Overview</Sidebar.Item>
          <Sidebar.Item href="#">Releases</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <PageHeader.Root>
      <PageHeader.Content>
        <PageHeader.Title level={1}>Overview</PageHeader.Title>
      </PageHeader.Content>
    </PageHeader.Root>
    <Card.Root>
      <Card.Content>Primary content</Card.Content>
    </Card.Root>
  </PageLayout.Content>
</PageLayout.Root>
```

## ScrollArea
Package: @dryui/ui
Category: layout
Tags: scroll, overflow, scrollbar
Kind: simple
Root import: import { ScrollArea } from '@dryui/ui'
Subpath import: import { ScrollArea } from '@dryui/ui/scroll-area'
Props: orientation ('vertical' | 'horizontal' | 'both'), accepted vertical, horizontal, both | children (Snippet), required
Native props: Forwards <div> attributes via rest props.
CSS variables: none
Data attributes: none
Example:
```svelte
<ScrollArea>Content</ScrollArea>
```

## Splitter
Package: @dryui/ui
Category: layout
Tags: split, resize, panel, drag
Kind: compound
Root import: import { Splitter } from '@dryui/ui'
Subpath import: import { Splitter } from '@dryui/ui/splitter'
Parts:
- Splitter.Root
  Props: orientation ('horizontal' | 'vertical'), accepted horizontal, vertical | sizes (number[]), default $bindable([50 | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Splitter.Panel
  Props: index (number), required | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Splitter.Handle
  Props: index (number), required | children (Snippet)
  Native props: Forwards <div> attributes via rest props.
Structure:
  Splitter.Root
    Splitter.Panel
    Splitter.Handle
CSS variables: --dry-splitter-handle-z-index
Data attributes: data-orientation
Example:
```svelte
<Splitter.Root>
  <Splitter.Panel>...</Splitter.Panel>
  <Splitter.Handle>...</Splitter.Handle>
</Splitter.Root>
```

## WaveDivider
Package: @dryui/ui
Category: layout
Tags: divider, wave, section, svg, decoration
Kind: simple
Root import: import { WaveDivider } from '@dryui/ui'
Subpath import: import { WaveDivider } from '@dryui/ui/wave-divider'
Props: none
CSS variables: --dry-wave-divider-color, --dry-wave-divider-height
Data attributes: data-theme
Example:
```svelte
<WaveDivider shape="wave" color="var(--dry-color-primary)" height={48} />
```

### navigation

## Tabs
Package: @dryui/ui
Category: navigation
Tags: tabs, nav, switch, panel
Kind: compound
Root import: import { Tabs } from '@dryui/ui'
Subpath import: import { Tabs } from '@dryui/ui/tabs'
Parts:
- Tabs.Root
  Props: value (string), default '' | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical | activationMode ('automatic' | 'manual'), accepted automatic, manual | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Tabs.List
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Tabs.Trigger
  Props: value (string), required | disabled (boolean) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
- Tabs.Content
  Props: value (string), required | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  Tabs.Root
    Tabs.List
      Tabs.Trigger
    Tabs.Content
CSS variables: --dry-tabs-font-size, --dry-tabs-padding-x, --dry-tabs-padding-y
Data attributes: data-disabled, data-orientation, data-state
Example:
```svelte
<Tabs.Root bind:value={activeTab}>
  <Tabs.List>
    <Tabs.Trigger value="one">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="two">Tab 2</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="one">First panel</Tabs.Content>
  <Tabs.Content value="two">Second panel</Tabs.Content>
</Tabs.Root>
```

## Breadcrumb
Package: @dryui/ui
Category: navigation
Tags: nav, path, hierarchy, trail
Kind: compound
Root import: import { Breadcrumb } from '@dryui/ui'
Subpath import: import { Breadcrumb } from '@dryui/ui/breadcrumb'
Parts:
- Breadcrumb.Root
  Props: children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
- Breadcrumb.List
  Props: children (Snippet), required
  Native props: Forwards <ol> attributes via rest props.
- Breadcrumb.Item
  Props: children (Snippet), required
  Native props: Forwards <li> attributes via rest props.
- Breadcrumb.Link
  Props: href (string) | current (boolean), default false | children (Snippet), required
  Native props: Forwards <a> attributes via rest props.
- Breadcrumb.Separator
  Props: children (Snippet)
  Native props: Forwards <li> attributes via rest props.
Structure:
  Breadcrumb.Root
    Breadcrumb.Item
CSS variables: none
Data attributes: none
Example:
```svelte
<Breadcrumb.Root>
  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
  <Breadcrumb.Item href="/docs">Docs</Breadcrumb.Item>
  <Breadcrumb.Item>Current</Breadcrumb.Item>
</Breadcrumb.Root>
```

## Pagination
Package: @dryui/ui
Category: navigation
Tags: nav, pages, paging, navigation
Kind: compound
Root import: import { Pagination } from '@dryui/ui'
Subpath import: import { Pagination } from '@dryui/ui/pagination'
Parts:
- Pagination.Root
  Props: page (number), default 1 | totalPages (number), required | children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
- Pagination.Content
  Props: children (Snippet), required
  Native props: Forwards <ul> attributes via rest props.
- Pagination.Item
  Props: children (Snippet), required
  Native props: Forwards <li> attributes via rest props.
- Pagination.Previous
  Props: children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
- Pagination.Next
  Props: children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
- Pagination.Link
  Props: page (number), required | children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
- Pagination.Ellipsis
  Props: none
  Native props: Forwards <span> attributes via rest props.
Structure:
  Pagination.Root
    Pagination.Content
    Pagination.Item
    Pagination.Previous
    Pagination.Next
    Pagination.Link
    Pagination.Ellipsis
CSS variables: none
Data attributes: data-state
Example:
```svelte
<Pagination.Root>
  <Pagination.Content>...</Pagination.Content>
  <Pagination.Item>...</Pagination.Item>
  <Pagination.Previous>...</Pagination.Previous>
  <Pagination.Next>...</Pagination.Next>
  <Pagination.Link>...</Pagination.Link>
  <Pagination.Ellipsis>...</Pagination.Ellipsis>
</Pagination.Root>
```

## Stepper
Package: @dryui/ui
Category: navigation
Tags: steps, wizard, progress, workflow
Kind: compound
Root import: import { Stepper } from '@dryui/ui'
Subpath import: import { Stepper } from '@dryui/ui/stepper'
Parts:
- Stepper.Root
  Props: activeStep (number), default 0, bindable, Bindable current step index for controlled multi-step flows. | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Stepper.List
  Props: children (Snippet), required
  Native props: Forwards <ol> attributes via rest props.
- Stepper.Step
  Props: step (number), required | clickable (boolean) | error (boolean) | onclick ((index: number) => void) | children (Snippet), required
  Native props: Forwards <li> attributes via rest props.
- Stepper.Separator
  Props: step (number), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  Stepper.Root
    Stepper.List
      Stepper.Step
      Stepper.Separator
CSS variables: --dry-stepper-connector-width, --dry-stepper-gap, --dry-stepper-indicator-size
Data attributes: data-orientation, data-part, data-state
Example:
```svelte
<Stepper.Root bind:activeStep={activeStep}>
  <Stepper.List>
    <Stepper.Step step={0}>Account</Stepper.Step>
    <Stepper.Separator step={0} />
    <Stepper.Step step={1}>Profile</Stepper.Step>
    <Stepper.Separator step={1} />
    <Stepper.Step step={2}>Review</Stepper.Step>
  </Stepper.List>
</Stepper.Root>
```

## Toolbar
Package: @dryui/ui
Category: navigation
Tags: actions, toolbar, buttons, bar
Kind: compound
Root import: import { Toolbar } from '@dryui/ui'
Subpath import: import { Toolbar } from '@dryui/ui/toolbar'
Parts:
- Toolbar.Root
  Props: orientation ('horizontal' | 'vertical'), accepted horizontal, vertical | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Toolbar.Button
  Props: disabled (boolean) | children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
- Toolbar.Separator
  Props: none
  Native props: Forwards <div> attributes via rest props.
- Toolbar.Link
  Props: href (string), required | children (Snippet), required
  Native props: Forwards <a> attributes via rest props.
Structure:
  Toolbar.Root
    Toolbar.Button
    Toolbar.Separator
    Toolbar.Link
CSS variables: none
Data attributes: data-disabled, data-orientation
Example:
```svelte
<Toolbar.Root>
  <Toolbar.Button>...</Toolbar.Button>
  <Toolbar.Separator>...</Toolbar.Separator>
  <Toolbar.Link>...</Toolbar.Link>
</Toolbar.Root>
```

## Menubar
Package: @dryui/ui
Category: navigation
Tags: menu, menubar, dropdown, navigation
Kind: compound
Root import: import { Menubar } from '@dryui/ui'
Subpath import: import { Menubar } from '@dryui/ui/menubar'
Parts:
- Menubar.Root
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Menubar.Menu
  Props: children (Snippet), required
- Menubar.Trigger
  Props: children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
- Menubar.Content
  Props: placement ('bottom' | 'bottom-start' | 'bottom-end'), accepted bottom, bottom-start, bottom-end | offset (number) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Menubar.Item
  Props: disabled (boolean) | onSelect (() => void) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Menubar.Separator
  Props: none
  Native props: Forwards <div> attributes via rest props.
- Menubar.Label
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  Menubar.Root
    Menubar.Menu
    Menubar.Trigger
    Menubar.Content
    Menubar.Item
    Menubar.Separator
    Menubar.Label
CSS variables: --dry-menu-bg, --dry-menu-border, --dry-menu-padding, --dry-menu-radius, --dry-menu-shadow
Data attributes: data-disabled, data-state, data-theme
Example:
```svelte
<Menubar.Root>
  <Menubar.Menu>...</Menubar.Menu>
  <Menubar.Trigger>...</Menubar.Trigger>
  <Menubar.Content>...</Menubar.Content>
  <Menubar.Item>...</Menubar.Item>
  <Menubar.Separator>...</Menubar.Separator>
  <Menubar.Label>...</Menubar.Label>
</Menubar.Root>
```

## AppBar
Package: @dryui/ui
Category: navigation
Tags: header, toolbar, app-bar, navigation
Kind: compound
Root import: import { AppBar } from '@dryui/ui'
Subpath import: import { AppBar } from '@dryui/ui/app-bar'
Parts:
- AppBar.Root
  Props: position ('static' | 'fixed' | 'sticky'), accepted static, fixed, sticky, default 'static' | children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
- AppBar.Title
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  AppBar.Root
    AppBar.Title
CSS variables: --dry-app-bar-bg, --dry-app-bar-border, --dry-app-bar-height, --dry-app-bar-padding-x, --dry-app-bar-shadow
Data attributes: data-position, data-theme
Example:
```svelte
<AppBar.Root>
  <AppBar.Title>...</AppBar.Title>
</AppBar.Root>
```

## PageHeader
Package: @dryui/ui
Category: navigation
Tags: page, header, title, actions, meta
Kind: compound
Root import: import { PageHeader } from '@dryui/ui'
Subpath import: import { PageHeader } from '@dryui/ui/page-header'
Parts:
- PageHeader.Root
  Props: children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
- PageHeader.Content
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- PageHeader.Actions
  Props: children (Snippet)
  Native props: Forwards <div> attributes via rest props.
- PageHeader.Eyebrow
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- PageHeader.Title
  Props: level (1 | 2 | 3 | 4 | 5 | 6), accepted 1, 2, 3, 4, 5, 6, default 2 | children (Snippet), required
  Native props: Forwards <h*> attributes via rest props.
- PageHeader.Description
  Props: children (Snippet), required
  Native props: Forwards <p> attributes via rest props.
- PageHeader.Meta
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  PageHeader.Root
    PageHeader.Content
      PageHeader.Eyebrow
      PageHeader.Title
      PageHeader.Description
    PageHeader.Actions
    PageHeader.Meta
CSS variables: --dry-page-header-actions-gap, --dry-page-header-bg, --dry-page-header-border, --dry-page-header-content-gap, --dry-page-header-description-color, --dry-page-header-eyebrow-color, --dry-page-header-gap, --dry-page-header-meta-color, --dry-page-header-padding-x, --dry-page-header-padding-y, --dry-page-header-radius
Data attributes: data-theme
Example:
```svelte
<PageHeader.Root>
  <PageHeader.Content>
    <PageHeader.Eyebrow>Workspace</PageHeader.Eyebrow>
    <PageHeader.Title level={1}>Launch Control</PageHeader.Title>
    <PageHeader.Description>Coordinate releases, approvals, and rollout health.</PageHeader.Description>
  </PageHeader.Content>
  <PageHeader.Actions>
    <Button variant="ghost">Share</Button>
    <Button variant="solid">Publish</Button>
  </PageHeader.Actions>
  <PageHeader.Meta>
    <Badge variant="soft">Live</Badge>
    <span>Updated 5 minutes ago</span>
  </PageHeader.Meta>
</PageHeader.Root>
```

## Navbar
Package: @dryui/ui
Category: navigation
Tags: navbar, navigation, responsive, mobile
Kind: compound
Root import: import { Navbar } from '@dryui/ui'
Subpath import: import { Navbar } from '@dryui/ui/navbar'
Parts:
- Navbar.Root
  Props: children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
- Navbar.Brand
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Navbar.Content
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Navbar.Item
  Props: active (boolean) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Navbar.Toggle
  Props: children (Snippet)
  Native props: Forwards <button> attributes via rest props.
Structure:
  Navbar.Root
    Navbar.Brand
    Navbar.Content
    Navbar.Item
    Navbar.Toggle
CSS variables: none
Data attributes: data-active, data-menu-open
Example:
```svelte
<Navbar.Root>
  <Navbar.Brand>...</Navbar.Brand>
  <Navbar.Content>...</Navbar.Content>
  <Navbar.Item>...</Navbar.Item>
  <Navbar.Toggle>...</Navbar.Toggle>
</Navbar.Root>
```

## NavigationMenu
Package: @dryui/ui
Category: navigation
Tags: navigation, menu, flyout, mega-menu
Kind: compound
Root import: import { NavigationMenu } from '@dryui/ui'
Subpath import: import { NavigationMenu } from '@dryui/ui/navigation-menu'
Parts:
- NavigationMenu.Root
  Props: children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
- NavigationMenu.List
  Props: children (Snippet), required
  Native props: Forwards <ul> attributes via rest props.
- NavigationMenu.Item
  Props: children (Snippet), required
- NavigationMenu.Trigger
  Props: children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
- NavigationMenu.Content
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- NavigationMenu.Link
  Props: active (boolean), default false | children (Snippet), required
  Native props: Forwards <a> attributes via rest props.
Structure:
  NavigationMenu.Root
    NavigationMenu.List
    NavigationMenu.Item
    NavigationMenu.Trigger
    NavigationMenu.Content
    NavigationMenu.Link
CSS variables: --dry-nav-menu-bg, --dry-nav-menu-border, --dry-nav-menu-content-bg, --dry-nav-menu-content-border, --dry-nav-menu-content-padding, --dry-nav-menu-content-radius, --dry-nav-menu-content-shadow, --dry-nav-menu-gap, --dry-nav-menu-link-padding-x, --dry-nav-menu-link-padding-y, --dry-nav-menu-padding, --dry-nav-menu-radius, --dry-nav-menu-shadow, --dry-nav-menu-trigger-padding-x, --dry-nav-menu-trigger-padding-y
Data attributes: data-active, data-state, data-theme
Example:
```svelte
<NavigationMenu.Root>
  <NavigationMenu.List>...</NavigationMenu.List>
  <NavigationMenu.Item>...</NavigationMenu.Item>
  <NavigationMenu.Trigger>...</NavigationMenu.Trigger>
  <NavigationMenu.Content>...</NavigationMenu.Content>
  <NavigationMenu.Link>...</NavigationMenu.Link>
</NavigationMenu.Root>
```

## Sidebar
Package: @dryui/ui
Category: navigation
Tags: sidebar, navigation, panel, collapsible
Kind: compound
Root import: import { Sidebar } from '@dryui/ui'
Subpath import: import { Sidebar } from '@dryui/ui/sidebar'
Parts:
- Sidebar.Root
  Props: collapsed (boolean), default false, bindable | side ('left' | 'right'), accepted left, right, default 'left' | children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
- Sidebar.Header
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Sidebar.Content
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Sidebar.Footer
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Sidebar.Group
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Sidebar.GroupLabel
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Sidebar.Item
  Props: active (boolean), default false | children (Snippet), required
  Native props: Forwards <a> attributes via rest props.
- Sidebar.Trigger
  Props: children (Snippet)
  Native props: Forwards <button> attributes via rest props.
Structure:
  Sidebar.Root
    Sidebar.Header
    Sidebar.Content
    Sidebar.Footer
    Sidebar.Group
    Sidebar.GroupLabel
    Sidebar.Item
    Sidebar.Trigger
CSS variables: --dry-sidebar-active-bg, --dry-sidebar-bg, --dry-sidebar-border, --dry-sidebar-collapsed-width, --dry-sidebar-group-gap, --dry-sidebar-item-padding-x, --dry-sidebar-item-padding-y, --dry-sidebar-radius, --dry-sidebar-shadow, --dry-sidebar-width
Data attributes: data-active, data-side, data-state, data-theme
Example:
```svelte
<Sidebar.Root>
  <Sidebar.Header>...</Sidebar.Header>
  <Sidebar.Content>...</Sidebar.Content>
  <Sidebar.Footer>...</Sidebar.Footer>
  <Sidebar.Group>...</Sidebar.Group>
  <Sidebar.GroupLabel>...</Sidebar.GroupLabel>
  <Sidebar.Item>...</Sidebar.Item>
  <Sidebar.Trigger>...</Sidebar.Trigger>
</Sidebar.Root>
```

## TableOfContents
Package: @dryui/ui
Category: navigation
Tags: toc, navigation, headings, scroll-spy
Kind: compound
Root import: import { TableOfContents } from '@dryui/ui'
Subpath import: import { TableOfContents } from '@dryui/ui/table-of-contents'
Parts:
- TableOfContents.Root
  Props: selector (string), default 'main' | headingSelector (string), default 'h2 | rootMargin (string), default '0px 0px -80% 0px' | autoId (boolean), default true | children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
- TableOfContents.List
  Props: none
  Native props: Forwards <ol> attributes via rest props.
- TableOfContents.Item
  Props: heading (import('@dryui/primitives').TocHeading), required | children (Snippet<[{ heading: import('@dryui/primitives').TocHeading; active: boolean }]>)
  Native props: Forwards <li> attributes via rest props.
Structure:
  TableOfContents.Root
    TableOfContents.List
    TableOfContents.Item
CSS variables: --dry-toc-active-color, --dry-toc-bg, --dry-toc-border, --dry-toc-indent, --dry-toc-item-padding-x, --dry-toc-item-padding-y, --dry-toc-muted-color, --dry-toc-padding, --dry-toc-radius, --dry-toc-shadow, --dry-toc-width
Data attributes: data-active, data-level, data-theme
Example:
```svelte
<TableOfContents.Root>
  <TableOfContents.List>...</TableOfContents.List>
  <TableOfContents.Item>...</TableOfContents.Item>
</TableOfContents.Root>
```

## Link
Package: @dryui/ui
Category: navigation
Tags: link, anchor, href, external
Kind: simple
Root import: import { Link } from '@dryui/ui'
Subpath import: import { Link } from '@dryui/ui/link'
Props: external (boolean), default false | disabled (boolean), default false | underline ('always' | 'hover' | 'none'), accepted always, hover, none, default 'hover' | children (Snippet), required
Native props: Forwards <a> attributes via rest props.
CSS variables: --dry-link-color, --dry-link-hover-color, --dry-link-underline-offset
Data attributes: data-disabled, data-theme, data-underline
Example:
```svelte
<Link>Content</Link>
```

## MegaMenu
Package: @dryui/ui
Category: navigation
Tags: menu, mega-menu, navigation, dropdown, panel, flyout
Kind: compound
Root import: import { MegaMenu } from '@dryui/ui'
Subpath import: import { MegaMenu } from '@dryui/ui/mega-menu'
Parts:
- MegaMenu.Root
  Props: children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
- MegaMenu.Item
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- MegaMenu.Trigger
  Props: children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
- MegaMenu.Panel
  Props: fullWidth (boolean) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- MegaMenu.Column
  Props: title (string) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- MegaMenu.Link
  Props: icon (Snippet) | description (Snippet) | children (Snippet), required
  Native props: Forwards <a> attributes via rest props.
Structure:
  MegaMenu.Root
    MegaMenu.Trigger
    MegaMenu.Panel
      MegaMenu.Column
        MegaMenu.Link
CSS variables: --dry-mm-column-gap, --dry-mm-link-hover-bg, --dry-mm-panel-bg
Data attributes: data-active, data-full-width, data-part, data-theme
Example:
```svelte
<MegaMenu.Root>
  <MegaMenu.Trigger>Products</MegaMenu.Trigger>
  <MegaMenu.Panel>
    <MegaMenu.Column title="Platform">
      <MegaMenu.Link href="/analytics">Analytics</MegaMenu.Link>
      <MegaMenu.Link href="/automation">Automation</MegaMenu.Link>
    </MegaMenu.Column>
  </MegaMenu.Panel>
</MegaMenu.Root>
```

### overlay

## Dialog
Package: @dryui/ui
Category: overlay
Tags: modal, overlay, dialog, popup
Kind: compound
Root import: import { Dialog } from '@dryui/ui'
Subpath import: import { Dialog } from '@dryui/ui/dialog'
Parts:
- Dialog.Root
  Props: open (boolean), default false | children (Snippet), required
- Dialog.Trigger
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Dialog.Content
  Props: children (Snippet), required
  Native props: Forwards native HTML attributes via rest props.
- Dialog.Overlay
  Props: none
  Native props: Forwards <div> attributes via rest props.
- Dialog.Header
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Dialog.Body
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Dialog.Footer
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Dialog.Close
  Props: children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
Structure:
  Dialog.Root
    Dialog.Trigger
    Dialog.Content
      Dialog.Header
      Dialog.Footer
CSS variables: --dry-dialog-bg, --dry-dialog-border, --dry-dialog-max-width, --dry-dialog-padding, --dry-dialog-radius, --dry-dialog-shadow
Data attributes: data-state
Example:
```svelte
<Dialog.Root bind:open={showDialog}>
  <Dialog.Trigger>
    <Button>Open Dialog</Button>
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>Confirm</Dialog.Header>
    <p>Are you sure?</p>
    <Dialog.Footer>
      <Button variant="outline" onclick={() => showDialog = false}>Cancel</Button>
      <Button variant="solid" onclick={handleConfirm}>Confirm</Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>
```

## AlertDialog
Package: @dryui/ui
Category: overlay
Tags: modal, confirm, dialog, destructive
Kind: compound
Root import: import { AlertDialog } from '@dryui/ui'
Subpath import: import { AlertDialog } from '@dryui/ui/alert-dialog'
Parts:
- AlertDialog.Root
  Props: open (boolean), default false | children (Snippet), required
- AlertDialog.Trigger
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- AlertDialog.Content
  Props: children (Snippet), required
  Native props: Forwards native HTML attributes via rest props.
- AlertDialog.Overlay
  Props: none
  Native props: Forwards <div> attributes via rest props.
- AlertDialog.Header
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- AlertDialog.Body
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- AlertDialog.Footer
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- AlertDialog.Action
  Props: children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
- AlertDialog.Cancel
  Props: children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
Structure:
  AlertDialog.Root
    AlertDialog.Trigger
    AlertDialog.Content
    AlertDialog.Overlay
    AlertDialog.Header
    AlertDialog.Body
    AlertDialog.Footer
    AlertDialog.Action
    AlertDialog.Cancel
CSS variables: --dry-dialog-bg, --dry-dialog-border, --dry-dialog-max-width, --dry-dialog-padding, --dry-dialog-radius, --dry-dialog-shadow
Data attributes: data-state
Example:
```svelte
<AlertDialog.Root>
  <AlertDialog.Trigger>...</AlertDialog.Trigger>
  <AlertDialog.Content>...</AlertDialog.Content>
  <AlertDialog.Overlay>...</AlertDialog.Overlay>
  <AlertDialog.Header>...</AlertDialog.Header>
  <AlertDialog.Body>...</AlertDialog.Body>
  <AlertDialog.Footer>...</AlertDialog.Footer>
  <AlertDialog.Action>...</AlertDialog.Action>
  <AlertDialog.Cancel>...</AlertDialog.Cancel>
</AlertDialog.Root>
```

## Drawer
Package: @dryui/ui
Category: overlay
Tags: modal, panel, slide, sidebar
Kind: compound
Root import: import { Drawer } from '@dryui/ui'
Subpath import: import { Drawer } from '@dryui/ui/drawer'
Parts:
- Drawer.Root
  Props: open (boolean), default false | side ('top' | 'right' | 'bottom' | 'left'), accepted top, right, bottom, left, default 'right' | children (Snippet), required
- Drawer.Trigger
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Drawer.Content
  Props: children (Snippet), required
  Native props: Forwards native HTML attributes via rest props.
- Drawer.Overlay
  Props: none
  Native props: Forwards <div> attributes via rest props.
- Drawer.Header
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Drawer.Body
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Drawer.Footer
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Drawer.Close
  Props: children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
Structure:
  Drawer.Root
    Drawer.Trigger
    Drawer.Content
      Drawer.Header
CSS variables: --dry-drawer-bg, --dry-drawer-border, --dry-drawer-shadow, --dry-drawer-size
Data attributes: data-side, data-state
Example:
```svelte
<Drawer.Root bind:open={drawerOpen}>
  <Drawer.Trigger>
    <Button>Open Drawer</Button>
  </Drawer.Trigger>
  <Drawer.Content side="right">
    <Drawer.Header>Settings</Drawer.Header>
    <p>Drawer body content.</p>
  </Drawer.Content>
</Drawer.Root>
```

## Popover
Package: @dryui/ui
Category: overlay
Tags: popup, floating, tooltip, popover
Kind: compound
Root import: import { Popover } from '@dryui/ui'
Subpath import: import { Popover } from '@dryui/ui/popover'
Parts:
- Popover.Root
  Props: open (boolean), default false, bindable | children (Snippet), required
- Popover.Trigger
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Popover.Content
  Props: offset (number) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  Popover.Root
    Popover.Trigger
    Popover.Content
CSS variables: --dry-popover-bg, --dry-popover-border, --dry-popover-padding, --dry-popover-radius, --dry-popover-shadow
Data attributes: none
Example:
```svelte
<Popover.Root bind:open={popoverOpen}>
  <Popover.Trigger>
    <Button variant="outline">Info</Button>
  </Popover.Trigger>
  <Popover.Content>
    <p>Popover details here.</p>
  </Popover.Content>
</Popover.Root>
```

## Tooltip
Package: @dryui/ui
Category: overlay
Tags: hover, info, tooltip, hint
Kind: compound
Root import: import { Tooltip } from '@dryui/ui'
Subpath import: import { Tooltip } from '@dryui/ui/tooltip'
Parts:
- Tooltip.Root
  Props: openDelay (number) | closeDelay (number) | children (Snippet), required
- Tooltip.Trigger
  Props: children (Snippet), required
  Native props: Forwards <span> attributes via rest props.
- Tooltip.Content
  Props: offset (number) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  Tooltip.Root
    Tooltip.Trigger
    Tooltip.Content
CSS variables: --dry-tooltip-bg, --dry-tooltip-border, --dry-tooltip-color, --dry-tooltip-padding-x, --dry-tooltip-padding-y, --dry-tooltip-radius, --dry-tooltip-shadow
Data attributes: none
Example:
```svelte
<Tooltip.Root>
  <Tooltip.Trigger>
    <Button variant="ghost">Hover me</Button>
  </Tooltip.Trigger>
  <Tooltip.Content>Extra information</Tooltip.Content>
</Tooltip.Root>
```

## DropdownMenu
Package: @dryui/ui
Category: overlay
Tags: menu, dropdown, actions, popover
Kind: compound
Root import: import { DropdownMenu } from '@dryui/ui'
Subpath import: import { DropdownMenu } from '@dryui/ui/dropdown-menu'
Parts:
- DropdownMenu.Root
  Props: open (boolean), default false | children (Snippet), required
- DropdownMenu.Trigger
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- DropdownMenu.Content
  Props: offset (number) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- DropdownMenu.Item
  Props: disabled (boolean) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- DropdownMenu.Separator
  Props: none
  Native props: Forwards <div> attributes via rest props.
- DropdownMenu.Group
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- DropdownMenu.Label
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  DropdownMenu.Root
    DropdownMenu.Trigger
    DropdownMenu.Content
      DropdownMenu.Item
CSS variables: --dry-menu-bg, --dry-menu-border, --dry-menu-padding, --dry-menu-radius, --dry-menu-shadow
Data attributes: data-disabled
Example:
```svelte
<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button variant="ghost">Menu</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item onclick={handleEdit}>Edit</DropdownMenu.Item>
    <DropdownMenu.Item onclick={handleDelete}>Delete</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>
```

## ContextMenu
Package: @dryui/ui
Category: overlay
Tags: menu, right-click, context, actions
Kind: compound
Root import: import { ContextMenu } from '@dryui/ui'
Subpath import: import { ContextMenu } from '@dryui/ui/context-menu'
Parts:
- ContextMenu.Root
  Props: open (boolean), default false | children (Snippet), required
- ContextMenu.Trigger
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- ContextMenu.Content
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- ContextMenu.Item
  Props: disabled (boolean) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- ContextMenu.Separator
  Props: none
  Native props: Forwards <div> attributes via rest props.
- ContextMenu.Group
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- ContextMenu.Label
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  ContextMenu.Root
    ContextMenu.Trigger
    ContextMenu.Content
    ContextMenu.Item
    ContextMenu.Separator
    ContextMenu.Group
    ContextMenu.Label
CSS variables: --dry-menu-bg, --dry-menu-border, --dry-menu-padding, --dry-menu-radius, --dry-menu-shadow
Data attributes: data-disabled
Example:
```svelte
<ContextMenu.Root>
  <ContextMenu.Trigger>...</ContextMenu.Trigger>
  <ContextMenu.Content>...</ContextMenu.Content>
  <ContextMenu.Item>...</ContextMenu.Item>
  <ContextMenu.Separator>...</ContextMenu.Separator>
  <ContextMenu.Group>...</ContextMenu.Group>
  <ContextMenu.Label>...</ContextMenu.Label>
</ContextMenu.Root>
```

## CommandPalette
Package: @dryui/ui
Category: overlay
Tags: modal, search, command, shortcut, palette
Kind: compound
Root import: import { CommandPalette } from '@dryui/ui'
Subpath import: import { CommandPalette } from '@dryui/ui/command-palette'
Parts:
- CommandPalette.Root
  Props: open (boolean), default false | children (Snippet), required
  Native props: Forwards native HTML attributes via rest props.
- CommandPalette.Input
  Props: placeholder (string)
  Native props: Forwards <input> attributes via rest props.
- CommandPalette.List
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- CommandPalette.Group
  Props: heading (string) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- CommandPalette.Item
  Props: value (string), required | disabled (boolean) | onSelect (() => void) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- CommandPalette.Empty
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- CommandPalette.Separator
  Props: none
  Native props: Forwards <div> attributes via rest props.
Structure:
  CommandPalette.Root
    CommandPalette.Input
    CommandPalette.List
    CommandPalette.Group
    CommandPalette.Item
    CommandPalette.Empty
    CommandPalette.Separator
CSS variables: --dry-cmd-bg, --dry-cmd-border, --dry-cmd-max-width, --dry-cmd-radius, --dry-cmd-shadow
Data attributes: data-active, data-disabled, data-state
Example:
```svelte
<CommandPalette.Root>
  <CommandPalette.Input>...</CommandPalette.Input>
  <CommandPalette.List>...</CommandPalette.List>
  <CommandPalette.Group>...</CommandPalette.Group>
  <CommandPalette.Item>...</CommandPalette.Item>
  <CommandPalette.Empty>...</CommandPalette.Empty>
  <CommandPalette.Separator>...</CommandPalette.Separator>
</CommandPalette.Root>
```

## LinkPreview
Package: @dryui/ui
Category: overlay
Tags: link, preview, hover, popup
Kind: compound
Root import: import { LinkPreview } from '@dryui/ui'
Subpath import: import { LinkPreview } from '@dryui/ui/link-preview'
Parts:
- LinkPreview.Root
  Props: open (boolean), default false, bindable | openDelay (number), default 700 | closeDelay (number), default 300 | children (Snippet), required
- LinkPreview.Trigger
  Props: children (Snippet), required
  Native props: Forwards <a> attributes via rest props.
- LinkPreview.Content
  Props: offset (number) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  LinkPreview.Root
    LinkPreview.Trigger
    LinkPreview.Content
CSS variables: --dry-link-preview-bg, --dry-link-preview-border, --dry-link-preview-color, --dry-link-preview-padding, --dry-link-preview-radius, --dry-link-preview-shadow, --dry-link-preview-underline-offset
Data attributes: data-theme
Example:
```svelte
<LinkPreview.Root>
  <LinkPreview.Trigger>...</LinkPreview.Trigger>
  <LinkPreview.Content>...</LinkPreview.Content>
</LinkPreview.Root>
```

## Tour
Package: @dryui/ui
Category: overlay
Tags: tour, guide, spotlight, onboarding, walkthrough
Kind: compound
Root import: import { Tour } from '@dryui/ui'
Subpath import: import { Tour } from '@dryui/ui/tour'
Parts:
- Tour.Root
  Props: steps (TourStep[]), required | active (boolean), default false, bindable | onComplete (() => void) | onSkip (() => void) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Tour.Tooltip
  Props: children (Snippet<[TooltipSnippetParams]>)
  Native props: Forwards <div> attributes via rest props.
Structure:
  Tour.Root
    Tour.Tooltip
CSS variables: --dry-tour-arrow-size, --dry-tour-overlay-color, --dry-tour-spotlight-padding, --dry-tour-spotlight-radius, --dry-tour-spotlight-ring, --dry-tour-tooltip-bg, --dry-tour-tooltip-max-width, --dry-tour-tooltip-radius, --dry-tour-tooltip-shadow
Data attributes: data-placement, data-tour-overlay, data-tour-spotlight
Example:
```svelte
<Tour.Root>
  <Tour.Tooltip>...</Tour.Tooltip>
</Tour.Root>
```

## Backdrop
Package: @dryui/ui
Category: overlay
Tags: overlay, modal, backdrop, scrim
Kind: simple
Root import: import { Backdrop } from '@dryui/ui'
Subpath import: import { Backdrop } from '@dryui/ui/backdrop'
Props: open (boolean) | invisible (boolean)
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-backdrop-bg, --dry-backdrop-blur, --dry-backdrop-padding
Data attributes: data-invisible, data-theme
Example:
```svelte
<Backdrop>Content</Backdrop>
```

## HoverCard
Package: @dryui/ui
Category: overlay
Tags: hover, card, preview, popup
Kind: compound
Root import: import { HoverCard } from '@dryui/ui'
Subpath import: import { HoverCard } from '@dryui/ui/hover-card'
Parts:
- HoverCard.Root
  Props: openDelay (number) | closeDelay (number) | children (Snippet), required
- HoverCard.Trigger
  Props: href (string) | children (Snippet), required
  Native props: Forwards native HTML attributes via rest props.
- HoverCard.Content
  Props: offset (number) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  HoverCard.Root
    HoverCard.Trigger
    HoverCard.Content
CSS variables: --dry-hover-card-bg, --dry-hover-card-border, --dry-hover-card-max-width, --dry-hover-card-min-width, --dry-hover-card-padding, --dry-hover-card-radius, --dry-hover-card-shadow
Data attributes: none
Example:
```svelte
<HoverCard.Root>
  <HoverCard.Trigger>...</HoverCard.Trigger>
  <HoverCard.Content>...</HoverCard.Content>
</HoverCard.Root>
```

## NotificationCenter
Package: @dryui/ui
Category: overlay
Tags: notification, bell, alerts, inbox, popover, unread
Kind: compound
Root import: import { NotificationCenter } from '@dryui/ui'
Subpath import: import { NotificationCenter } from '@dryui/ui/notification-center'
Parts:
- NotificationCenter.Root
  Props: items (import('@dryui/primitives').NotificationItem[]), default [], bindable | open (boolean), default false, bindable | children (Snippet), required
- NotificationCenter.Trigger
  Props: children (Snippet<[{ unreadCount: number }]>), required
  Native props: Forwards <button> attributes via rest props.
- NotificationCenter.Panel
  Props: offset (number) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- NotificationCenter.Item
  Props: id (string), required | read (boolean) | timestamp (Date) | variant ('info' | 'warning' | 'critical'), accepted info, warning, critical | action (Snippet) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- NotificationCenter.Group
  Props: label (string), required | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  NotificationCenter.Root
    NotificationCenter.Trigger
    NotificationCenter.Panel
      NotificationCenter.Group
        NotificationCenter.Item
CSS variables: --dry-nc-item-padding, --dry-nc-panel-width, --dry-nc-unread-bg
Data attributes: data-part, data-state, data-theme, data-variant
Example:
```svelte
<NotificationCenter.Root bind:items={notifications} bind:open={panelOpen}>
  <NotificationCenter.Trigger>
    {#snippet children({ unreadCount })}
      <Button>Notifications ({unreadCount})</Button>
    {/snippet}
  </NotificationCenter.Trigger>
  <NotificationCenter.Panel>
    <NotificationCenter.Group label="Today">
      <NotificationCenter.Item id="1" variant="info">New deployment complete</NotificationCenter.Item>
    </NotificationCenter.Group>
  </NotificationCenter.Panel>
</NotificationCenter.Root>
```

### display

## Card
Package: @dryui/ui
Category: display
Tags: surface, container, content, panel
Kind: compound
Root import: import { Card } from '@dryui/ui'
Subpath import: import { Card } from '@dryui/ui/card'
Parts:
- Card.Root
  Props: as ('div' | 'a' | 'button'), accepted div, a, button | selected (boolean) | orientation ('vertical' | 'horizontal'), accepted vertical, horizontal | variant ('default' | 'elevated' | 'interactive'), accepted default, elevated, interactive, default 'default' | size ('default' | 'sm'), accepted default, sm, default 'default' | children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
- Card.Header
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Card.Content
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Card.Footer
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  Card.Root
    Card.Header
    Card.Content
    Card.Footer
CSS variables: --dry-card-bg, --dry-card-border, --dry-card-padding, --dry-card-radius, --dry-card-selected-ring-color, --dry-card-shadow
Data attributes: data-orientation, data-part, data-selected
Example:
```svelte
<Card.Root>
  <Card.Header>Title</Card.Header>
  <Card.Content>
    <p>Card body content goes here.</p>
  </Card.Content>
  <Card.Footer>
    <Button variant="solid">Action</Button>
  </Card.Footer>
</Card.Root>
```

## Accordion
Package: @dryui/ui
Category: display
Tags: disclosure, collapse, expand, faq
Kind: compound
Root import: import { Accordion } from '@dryui/ui'
Subpath import: import { Accordion } from '@dryui/ui/accordion'
Parts:
- Accordion.Root
  Props: type ('single' | 'multiple'), accepted single, multiple | value (string[]), default [] | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Accordion.Item
  Props: value (string), required | disabled (boolean) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Accordion.Trigger
  Props: children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
- Accordion.Content
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  Accordion.Root
    Accordion.Item
      Accordion.Trigger
      Accordion.Content
CSS variables: none
Data attributes: data-disabled, data-state
Example:
```svelte
<Accordion.Root>
  <Accordion.Item value="a">
    <Accordion.Trigger>Section A</Accordion.Trigger>
    <Accordion.Content>Content for section A.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="b">
    <Accordion.Trigger>Section B</Accordion.Trigger>
    <Accordion.Content>Content for section B.</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>
```

## Collapsible
Package: @dryui/ui
Category: display
Tags: disclosure, collapse, expand, toggle
Kind: compound
Root import: import { Collapsible } from '@dryui/ui'
Subpath import: import { Collapsible } from '@dryui/ui/collapsible'
Parts:
- Collapsible.Root
  Props: open (boolean), default false | disabled (boolean), default false | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Collapsible.Trigger
  Props: children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
- Collapsible.Content
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  Collapsible.Root
    Collapsible.Trigger
    Collapsible.Content
CSS variables: none
Data attributes: data-disabled, data-state
Example:
```svelte
<Collapsible.Root>
  <Collapsible.Trigger>...</Collapsible.Trigger>
  <Collapsible.Content>...</Collapsible.Content>
</Collapsible.Root>
```

## Table
Package: @dryui/ui
Category: display
Tags: data, table, grid, rows, columns
Kind: compound
Root import: import { Table } from '@dryui/ui'
Subpath import: import { Table } from '@dryui/ui/table'
Parts:
- Table.Root
  Props: children (Snippet), required
  Native props: Forwards <table> attributes via rest props.
- Table.Header
  Props: children (Snippet), required
  Native props: Forwards <tbody> attributes via rest props.
- Table.Body
  Props: children (Snippet), required
  Native props: Forwards <tbody> attributes via rest props.
- Table.Footer
  Props: children (Snippet), required
  Native props: Forwards <tbody> attributes via rest props.
- Table.Row
  Props: children (Snippet), required
  Native props: Forwards <tr> attributes via rest props.
- Table.Head
  Props: scope ('col' | 'row'), accepted col, row | children (Snippet), required
  Native props: Forwards <td> attributes via rest props.
- Table.Cell
  Props: children (Snippet), required
  Native props: Forwards <td> attributes via rest props.
- Table.Caption
  Props: children (Snippet), required
  Native props: Forwards native HTML attributes via rest props.
Structure:
  Table.Root
    Table.Header
      Table.Row
        Table.Head
    Table.Body
      Table.Row
        Table.Cell
CSS variables: --dry-table-border, --dry-table-head-padding-y, --dry-table-header-bg, --dry-table-padding-x, --dry-table-padding-y, --dry-table-row-hover
Data attributes: none
Example:
```svelte
<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.Head>Name</Table.Head>
      <Table.Head>Status</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Alice</Table.Cell>
      <Table.Cell><Badge variant="soft">Active</Badge></Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>
```

## Avatar
Package: @dryui/ui
Category: display
Tags: user, profile, image, initials
Kind: simple
Root import: import { Avatar } from '@dryui/ui'
Subpath import: import { Avatar } from '@dryui/ui/avatar'
Props: src (string) | alt (string) | fallback (string) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | shape ('circle' | 'square'), accepted circle, square, default 'circle' | status ('online' | 'offline' | 'busy' | 'away'), accepted online, offline, busy, away | badge (Snippet) | children (Snippet)
Native props: Forwards <span> attributes via rest props.
CSS variables: --dry-avatar-bg, --dry-avatar-color, --dry-avatar-font-size, --dry-avatar-radius, --dry-avatar-size, --dry-avatar-status-color, --dry-avatar-status-size
Data attributes: data-part, data-status, data-theme
Example:
```svelte
<Avatar src="/avatar.jpg" alt="Jane" fallback="JD" />
```

## AvatarGroup
Package: @dryui/ui
Category: display
Tags: avatars, group, team, people, social-proof
Kind: simple
Root import: import { AvatarGroup } from '@dryui/ui'
Subpath import: import { AvatarGroup } from '@dryui/ui/avatar-group'
Props: count (number), default 0 | maxVisible (number), default 4 | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | overlap ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | status ('online' | 'offline' | 'busy' | 'away'), accepted online, offline, busy, away | label (string), default 'Avatar group' | children (Snippet), required
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-avatar-group-overflow-bg, --dry-avatar-group-overflow-color, --dry-avatar-group-overflow-size, --dry-avatar-group-overlap
Data attributes: data-part
Example:
```svelte
<AvatarGroup count={5} maxVisible={4} label="Trip attendees">
  <Avatar src="/avatar-1.jpg" alt="Maya Chen" fallback="MC" />
  <Avatar src="/avatar-2.jpg" alt="Jordan Lee" fallback="JL" />
  <Avatar src="/avatar-3.jpg" alt="Priya Patel" fallback="PP" />
  <Avatar src="/avatar-4.jpg" alt="Sam Rivera" fallback="SR" />
</AvatarGroup>
```

## Badge
Package: @dryui/ui
Category: display
Tags: status, count, label, tag
Kind: simple
Root import: import { Badge } from '@dryui/ui'
Subpath import: import { Badge } from '@dryui/ui/badge'
Props: variant ('solid' | 'outline' | 'soft' | 'dot'), accepted solid, outline, soft, dot, default 'soft' | color (BadgeColor), default 'gray' | size ('sm' | 'md'), accepted sm, md, default 'sm' | children (Snippet) | pulse (boolean) | icon (Snippet)
Native props: Forwards <span> attributes via rest props.
CSS variables: --dry-badge-bg, --dry-badge-border, --dry-badge-color, --dry-badge-default-bg, --dry-badge-default-color, --dry-badge-font-size, --dry-badge-padding-x, --dry-badge-padding-y, --dry-badge-radius
Data attributes: data-pulse
Example:
```svelte
<Badge variant="soft">Active</Badge>
```

## Chart
Package: @dryui/ui
Category: display
Tags: chart, graph, bar, line, data, visualization
Kind: compound
Root import: import { Chart } from '@dryui/ui'
Subpath import: import { Chart } from '@dryui/ui/chart'
Parts:
- Chart.Root
  Props: data (import('@dryui/primitives').ChartDataPoint[]), required | width (number) | height (number) | padding ({ top?: number; right?: number; bottom?: number; left?: number }) | children (Snippet), required
- Chart.Bars
  Props: radius (number) | onclick ((event: { label: string; value: number; index: number }) => void)
- Chart.Line
  Props: strokeWidth (number) | showDots (boolean) | dotRadius (number) | color (string)
- Chart.Area
  Props: strokeWidth (number) | showDots (boolean) | dotRadius (number) | color (string)
- Chart.Donut
  Props: innerRadius (number) | outerRadius (number) | label (Snippet<[{ total: number }]>) | onclick ((event: { label: string; value: number; index: number }) => void)
- Chart.StackedBar
  Props: stackedData (import('@dryui/primitives').ChartStackedDataPoint[]), required | radius (number)
- Chart.HorizontalBar
  Props: radius (number)
- Chart.XAxis
  Props: none
- Chart.YAxis
  Props: ticks (number)
Structure:
  Chart.Root
    Chart.Bars
    Chart.Line
    Chart.Area
    Chart.Donut
    Chart.StackedBar
    Chart.HorizontalBar
    Chart.XAxis
    Chart.YAxis
CSS variables: --dry-chart-axis-color, --dry-chart-bar-color, --dry-chart-bg, --dry-chart-border, --dry-chart-grid-color, --dry-chart-line-color, --dry-chart-radius
Data attributes: data-clickable, data-part, data-theme
Example:
```svelte
<Chart.Root>
  <Chart.Bars>...</Chart.Bars>
  <Chart.Line>...</Chart.Line>
  <Chart.Area>...</Chart.Area>
  <Chart.Donut>...</Chart.Donut>
  <Chart.StackedBar>...</Chart.StackedBar>
  <Chart.HorizontalBar>...</Chart.HorizontalBar>
  <Chart.XAxis>...</Chart.XAxis>
  <Chart.YAxis>...</Chart.YAxis>
</Chart.Root>
```

## ChatMessage
Package: @dryui/ui
Category: display
Tags: chat, message, bubble, conversation
Kind: simple
Root import: import { ChatMessage } from '@dryui/ui'
Subpath import: import { ChatMessage } from '@dryui/ui/chat-message'
Props: role ('user' | 'assistant' | 'system'), accepted user, assistant, system, default 'user' | variant ('sent' | 'received'), accepted sent, received | avatar (string) | name (string) | timestamp (string) | typing (boolean), default false | children (Snippet), required
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-chat-message-avatar-size, --dry-chat-message-bg, --dry-chat-message-border, --dry-chat-message-gap, --dry-chat-message-header-color, --dry-chat-message-padding, --dry-chat-message-radius, --dry-chat-message-received-bg, --dry-chat-message-sent-bg, --dry-chat-message-system-bg
Data attributes: data-part, data-role, data-theme, data-variant
Example:
```svelte
<ChatMessage>Content</ChatMessage>
```

## ChatThread
Package: @dryui/ui
Category: display
Tags: chat, thread, conversation, log
Kind: simple
Root import: import { ChatThread } from '@dryui/ui'
Subpath import: import { ChatThread } from '@dryui/ui/chat-thread'
Props: messageCount (number), required | scrollKey (number), default 0 | children (Snippet<[), required | index (number), required | viewTransitionName (string), required | isLatest (boolean), required
Native props: Forwards <element> attributes via rest props.
CSS variables: --dry-chat-thread-gap, --dry-chat-thread-message-gap
Data attributes: none
Example:
```svelte
<ChatThread messageCount={messages.length}>
  {#snippet children({ index })}
    <ChatMessage role={messages[index].role} name={messages[index].name}>
      {messages[index].message}
    </ChatMessage>
  {/snippet}
</ChatThread>
```

## TypingIndicator
Package: @dryui/ui
Category: display
Tags: typing, status, chat, loading
Kind: simple
Root import: import { TypingIndicator } from '@dryui/ui'
Subpath import: import { TypingIndicator } from '@dryui/ui/typing-indicator'
Props: none
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-typing-indicator-dot-color, --dry-typing-indicator-dot-size, --dry-typing-indicator-gap
Data attributes: none
Example:
```svelte
<TypingIndicator aria-label="Assistant is typing" />
```

## Image
Package: @dryui/ui
Category: display
Tags: image, lazy, loading, fallback
Kind: simple
Root import: import { Image } from '@dryui/ui'
Subpath import: import { Image } from '@dryui/ui/image'
Props: fallback (string) | fallbackSnippet (Snippet)
Native props: Forwards native HTML attributes via rest props.
CSS variables: --dry-image-bg, --dry-image-object-fit, --dry-image-radius
Data attributes: data-state, data-theme
Example:
```svelte
<Image>Content</Image>
```

## Kbd
Package: @dryui/ui
Category: display
Tags: keyboard, shortcut, key, kbd
Kind: simple
Root import: import { Kbd } from '@dryui/ui'
Subpath import: import { Kbd } from '@dryui/ui/kbd'
Props: keys (string[]) | children (Snippet)
Native props: Forwards <element> attributes via rest props.
CSS variables: --dry-kbd-bg, --dry-kbd-border, --dry-kbd-font-size, --dry-kbd-radius
Data attributes: data-theme
Example:
```svelte
<Kbd>Content</Kbd>
```

## List
Package: @dryui/ui
Category: display
Tags: list, item, icon, dense
Kind: compound
Root import: import { List } from '@dryui/ui'
Subpath import: import { List } from '@dryui/ui/list'
Parts:
- List.Root
  Props: dense (boolean) | disablePadding (boolean) | children (Snippet), required
  Native props: Forwards <ul> attributes via rest props.
- List.Item
  Props: interactive (boolean) | disabled (boolean) | children (Snippet), required
  Native props: Forwards <li> attributes via rest props.
- List.ItemIcon
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- List.ItemText
  Props: primary (Snippet) | secondary (Snippet) | children (Snippet)
  Native props: Forwards <div> attributes via rest props.
- List.Subheader
  Props: children (Snippet), required
  Native props: Forwards <li> attributes via rest props.
Structure:
  List.Root
    List.Item
    List.ItemIcon
    List.ItemText
    List.Subheader
CSS variables: --dry-list-gap, --dry-list-item-active-bg, --dry-list-item-hover-bg, --dry-list-item-icon-color, --dry-list-item-padding, --dry-list-item-radius, --dry-list-padding, --dry-list-subheader-color
Data attributes: data-dense, data-disable-padding, data-disabled, data-interactive, data-list-item-primary, data-list-item-secondary, data-theme
Example:
```svelte
<List.Root>
  <List.Item>...</List.Item>
  <List.ItemIcon>...</List.ItemIcon>
  <List.ItemText>...</List.ItemText>
  <List.Subheader>...</List.Subheader>
</List.Root>
```

## Timeline
Package: @dryui/ui
Category: display
Tags: timeline, activity, feed, history, events
Kind: compound
Root import: import { Timeline } from '@dryui/ui'
Subpath import: import { Timeline } from '@dryui/ui/timeline'
Parts:
- Timeline.Root
  Props: orientation ('vertical' | 'horizontal'), accepted vertical, horizontal, default 'vertical' | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Timeline.Item
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Timeline.Icon
  Props: children (Snippet)
  Native props: Forwards <div> attributes via rest props.
- Timeline.Content
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Timeline.Title
  Props: level (1 | 2 | 3 | 4 | 5 | 6), accepted 1, 2, 3, 4, 5, 6, default 3 | children (Snippet), required
  Native props: Forwards <h*> attributes via rest props.
- Timeline.Description
  Props: children (Snippet), required
  Native props: Forwards <p> attributes via rest props.
- Timeline.Time
  Props: datetime (string) | children (Snippet), required
  Native props: Forwards <time> attributes via rest props.
Structure:
  Timeline.Root
    Timeline.Item
    Timeline.Icon
    Timeline.Content
    Timeline.Title
    Timeline.Description
    Timeline.Time
CSS variables: --dry-timeline-content-gap, --dry-timeline-dot-color, --dry-timeline-dot-size, --dry-timeline-gap, --dry-timeline-item-gap, --dry-timeline-line-color
Data attributes: data-level, data-orientation, data-theme
Example:
```svelte
<Timeline.Root>
  <Timeline.Item>...</Timeline.Item>
  <Timeline.Icon>...</Timeline.Icon>
  <Timeline.Content>...</Timeline.Content>
  <Timeline.Title>...</Timeline.Title>
  <Timeline.Description>...</Timeline.Description>
  <Timeline.Time>...</Timeline.Time>
</Timeline.Root>
```

## Typography
Package: @dryui/ui
Category: display
Tags: text, heading, typography, prose, standalone
Kind: namespaced
Root import: import { Typography } from '@dryui/ui'
Subpath import: import { Typography } from '@dryui/ui/typography'
Parts:
- Typography.Heading
  Props: level (1 | 2 | 3 | 4 | 5 | 6), accepted 1, 2, 3, 4, 5, 6 | children (Snippet), required
  Native props: Forwards <h*> attributes via rest props.
- Typography.Text
  Props: as ('p' | 'span' | 'div'), accepted p, span, div | color ('default' | 'muted' | 'secondary'), accepted default, muted, secondary, Use muted or secondary for supporting copy without reaching for inline color styles. | variant ('default' | 'muted' | 'secondary'), accepted default, muted, secondary | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, Applies DryUI text scale tokens for compact or emphasized body copy. | children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
- Typography.Code
  Props: children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
- Typography.Blockquote
  Props: children (Snippet), required
  Native props: Forwards <blockquote> attributes via rest props.
CSS variables: --dry-typography-blockquote-border, --dry-typography-code-bg, --dry-typography-code-border, --dry-typography-heading-color, --dry-typography-text-color
Data attributes: data-as, data-color, data-level, data-size, data-theme
Example:
```svelte
<Typography.Heading level={2}>Launch readiness</Typography.Heading>
<Typography.Text color="muted" size="sm">Use Typography.Text for supporting copy and metadata.</Typography.Text>
```

## Heading
Package: @dryui/ui
Category: display
Tags: text, heading, title, typography
Kind: simple
Root import: import { Heading } from '@dryui/ui'
Subpath import: import { Heading } from '@dryui/ui/heading'
Props: level (1 | 2 | 3 | 4 | 5 | 6), accepted 1, 2, 3, 4, 5, 6, default 2 | children (Snippet), required
Native props: Forwards <h*> attributes via rest props.
CSS variables: none
Data attributes: data-level
Example:
```svelte
<Heading level={2}>Launch readiness</Heading>
```

## Text
Package: @dryui/ui
Category: display
Tags: text, copy, paragraph, typography
Kind: simple
Root import: import { Text } from '@dryui/ui'
Subpath import: import { Text } from '@dryui/ui/text'
Props: as ('p' | 'span' | 'div'), accepted p, span, div, default 'p' | color ('default' | 'muted' | 'secondary'), accepted default, muted, secondary, default 'default', Use muted or secondary for supporting copy without reaching for inline color styles. | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md', Applies DryUI text scale tokens for compact or emphasized body copy. | children (Snippet), required
Native props: Forwards <element> attributes via rest props.
CSS variables: none
Data attributes: data-as, data-color, data-size
Example:
```svelte
<Text as="p" color="secondary" size="sm">Use Text for supporting copy, labels, and starter-kit body content.</Text>
```

## DescriptionList
Package: @dryui/ui
Category: display
Tags: details, summary, metadata, definitions
Kind: compound
Root import: import { DescriptionList } from '@dryui/ui'
Subpath import: import { DescriptionList } from '@dryui/ui/description-list'
Parts:
- DescriptionList.Root
  Props: children (Snippet), required
  Native props: Forwards <dl> attributes via rest props.
- DescriptionList.Item
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- DescriptionList.Term
  Props: children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
- DescriptionList.Description
  Props: children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
Structure:
  DescriptionList.Root
    DescriptionList.Item
      DescriptionList.Term
      DescriptionList.Description
CSS variables: none
Data attributes: none
Example:
```svelte
<DescriptionList.Root>
  <DescriptionList.Item>
    <DescriptionList.Term>Workspace</DescriptionList.Term>
    <DescriptionList.Description>North America expansion</DescriptionList.Description>
  </DescriptionList.Item>
  <DescriptionList.Item>
    <DescriptionList.Term>Status</DescriptionList.Term>
    <DescriptionList.Description>Reviewing launch checklist</DescriptionList.Description>
  </DescriptionList.Item>
</DescriptionList.Root>
```

## User
Package: @dryui/ui
Category: display
Tags: user, profile, avatar, identity, person
Kind: simple
Root import: import { User } from '@dryui/ui'
Subpath import: import { User } from '@dryui/ui/user'
Props: name (string), required | description (string) | avatar (UserAvatarConfig) | chip (UserChipConfig | boolean) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical, default 'horizontal'
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-user-gap, --dry-user-name-weight, --dry-user-text-gap
Data attributes: data-orientation, data-size
Example:
```svelte
<User name="Elena Rossi" description="Engineering Lead" avatar={{ fallback: "E" }} />
```

## Tag
Package: @dryui/ui
Category: display
Tags: chip, tag, label, removable
Kind: simple
Root import: import { Tag } from '@dryui/ui'
Subpath import: import { Tag } from '@dryui/ui/tag'
Props: variant ('solid' | 'outline' | 'soft'), accepted solid, outline, soft, default 'soft' | color (TagColor), default 'gray' | size ('sm' | 'md'), accepted sm, md, default 'sm' | dismissible (boolean) | onDismiss (() => void) | children (Snippet), required
Native props: Forwards <span> attributes via rest props.
CSS variables: --dry-tag-bg, --dry-tag-border, --dry-tag-color, --dry-tag-dismiss-size, --dry-tag-font-size, --dry-tag-padding-x, --dry-tag-padding-y, --dry-tag-radius
Data attributes: data-theme
Example:
```svelte
<Tag dismissible ondismiss={handleDismiss}>Svelte</Tag>
```

## EmptyState
Package: @dryui/ui
Category: display
Tags: empty, placeholder, no-data, zero-state
Kind: compound
Root import: import { EmptyState } from '@dryui/ui'
Subpath import: import { EmptyState } from '@dryui/ui/empty-state'
Parts:
- EmptyState.Root
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- EmptyState.Icon
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- EmptyState.Title
  Props: children (Snippet), required
  Native props: Forwards <h*> attributes via rest props.
- EmptyState.Description
  Props: children (Snippet), required
  Native props: Forwards <p> attributes via rest props.
- EmptyState.Action
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  EmptyState.Root
    EmptyState.Icon
    EmptyState.Title
    EmptyState.Description
    EmptyState.Action
CSS variables: --dry-empty-state-gap, --dry-empty-state-icon-size, --dry-empty-state-padding
Data attributes: none
Example:
```svelte
<EmptyState.Root>
  <EmptyState.Icon>...</EmptyState.Icon>
  <EmptyState.Title>...</EmptyState.Title>
  <EmptyState.Description>...</EmptyState.Description>
  <EmptyState.Action>...</EmptyState.Action>
</EmptyState.Root>
```

## Marquee
Package: @dryui/ui
Category: display
Tags: scroll, ticker, animation, text
Kind: simple
Root import: import { Marquee } from '@dryui/ui'
Subpath import: import { Marquee } from '@dryui/ui/marquee'
Props: speed (number), default 50 | direction ('left' | 'right' | 'up' | 'down'), accepted left, right, up, down, default 'left' | pauseOnHover (boolean), default false | gap (string), default '1rem' | children (Snippet), required
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-marquee-gap, --dry-marquee-speed
Data attributes: data-direction, data-marquee-track, data-pause-on-hover
Example:
```svelte
<Marquee>Content</Marquee>
```

## QRCode
Package: @dryui/ui
Category: display
Tags: qr, code, barcode, canvas, generate
Kind: simple
Root import: import { QRCode } from '@dryui/ui'
Subpath import: import { QRCode } from '@dryui/ui/qr-code'
Props: value (string), required | size (number), default 200 | errorCorrection ('L' | 'M' | 'Q' | 'H'), accepted L, M, Q, H, default 'M' | fgColor (string), default '#000' | bgColor (string), default '#fff'
Native props: Forwards <canvas> attributes via rest props.
CSS variables: --dry-qr-bg, --dry-qr-border, --dry-qr-padding, --dry-qr-radius, --dry-qr-size
Data attributes: none
Example:
```svelte
<QRCode>Content</QRCode>
```

## CodeBlock
Package: @dryui/ui
Category: display
Tags: code, syntax, pre, monospace, copy
Kind: simple
Root import: import { CodeBlock } from '@dryui/ui'
Subpath import: import { CodeBlock } from '@dryui/ui/code-block'
Props: code (string), required | language (string) | showLineNumbers (boolean), default false | showCopyButton (boolean), default true | linkResolver ((text: string, type: string) => string | undefined) | children (Snippet)
Native props: Forwards <element> attributes via rest props.
CSS variables: --dry-code-attribute-color, --dry-code-bg, --dry-code-border, --dry-code-color, --dry-code-comment-color, --dry-code-component-color, --dry-code-copy-color, --dry-code-copy-hover-bg, --dry-code-copy-hover-color, --dry-code-copy-z-index, --dry-code-font-size, --dry-code-function-color, --dry-code-header-bg, --dry-code-header-color, --dry-code-keyword-color, --dry-code-line-height, --dry-code-line-number-color, --dry-code-number-color, --dry-code-operator-color, --dry-code-padding, --dry-code-punctuation-color, --dry-code-radius, --dry-code-rune-color, --dry-code-string-color, --dry-code-svelte-keyword-color, --dry-code-tag-color, --dry-code-type-color
Data attributes: data-language, data-single-line
Example:
```svelte
<CodeBlock>Content</CodeBlock>
```

## MarkdownRenderer
Package: @dryui/ui
Category: display
Tags: markdown, text, render, prose, content
Kind: simple
Root import: import { MarkdownRenderer } from '@dryui/ui'
Subpath import: import { MarkdownRenderer } from '@dryui/ui/markdown-renderer'
Props: content (string), required | sanitize (boolean), default true
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-markdown-blockquote-border, --dry-markdown-blockquote-color, --dry-markdown-code-bg, --dry-markdown-code-border, --dry-markdown-code-color, --dry-markdown-color, --dry-markdown-font-size, --dry-markdown-heading-color, --dry-markdown-hr-color, --dry-markdown-line-height, --dry-markdown-link-color, --dry-markdown-link-hover-color, --dry-markdown-max-width
Data attributes: data-code-block, data-markdown-renderer
Example:
```svelte
<MarkdownRenderer>Content</MarkdownRenderer>
```

## VirtualList
Package: @dryui/ui
Category: display
Tags: virtual, list, scroll, performance, large
Kind: simple
Root import: import { VirtualList } from '@dryui/ui'
Subpath import: import { VirtualList } from '@dryui/ui/virtual-list'
Props: items (T[]), required | itemHeight (number | ((index: number) => number)), required | overscan (number) | children (Snippet<[{ item: T; index: number; style: string }]>), required
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-virtual-list-scrollbar-radius, --dry-virtual-list-scrollbar-thumb, --dry-virtual-list-scrollbar-thumb-hover, --dry-virtual-list-scrollbar-track, --dry-virtual-list-scrollbar-width
Data attributes: none
Example:
```svelte
<VirtualList>Content</VirtualList>
```

## InfiniteScroll
Package: @dryui/ui
Category: display
Tags: infinite, scroll, load, pagination, lazy
Kind: simple
Root import: import { InfiniteScroll } from '@dryui/ui'
Subpath import: import { InfiniteScroll } from '@dryui/ui/infinite-scroll'
Props: onLoadMore (() => void | Promise<void>), required | hasMore (boolean), default true | loading (boolean), default false | rootMargin (string), default '200px' | children (Snippet), required | loadingIndicator (Snippet) | endMessage (Snippet)
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-infinite-scroll-end-color, --dry-infinite-scroll-end-font-size, --dry-infinite-scroll-end-padding, --dry-infinite-scroll-indicator-color, --dry-infinite-scroll-indicator-padding
Data attributes: none
Example:
```svelte
<InfiniteScroll>Content</InfiniteScroll>
```

## DataGrid
Package: @dryui/ui
Category: display
Tags: data, grid, table, sort, filter, paginate
Kind: compound
Root import: import { DataGrid } from '@dryui/ui'
Subpath import: import { DataGrid } from '@dryui/ui/data-grid'
Parts:
- DataGrid.Root
  Props: items (T[]), required | pageSize (number) | striped (boolean), default false | selectable (boolean) | onSelectionChange ((selected: string[]) => void) | actionBar (Snippet<[{ selectedCount: number; clearSelection: () => void }]>) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- DataGrid.Table
  Props: children (Snippet), required
  Native props: Forwards <table> attributes via rest props.
- DataGrid.Header
  Props: children (Snippet), required
  Native props: Forwards <tbody> attributes via rest props.
- DataGrid.Column
  Props: key (string), required | sortable (boolean) | filterable (boolean) | pinned (boolean) | resizable (boolean) | header (Snippet) | children (Snippet), required
  Native props: Forwards <td> attributes via rest props.
- DataGrid.Body
  Props: children (Snippet<[{ items: T[]; page: number }]>), required
  Native props: Forwards <tbody> attributes via rest props.
- DataGrid.Row
  Props: rowId (string) | children (Snippet), required
  Native props: Forwards <tr> attributes via rest props.
- DataGrid.Cell
  Props: children (Snippet), required
  Native props: Forwards <td> attributes via rest props.
- DataGrid.Pagination
  Props: children (Snippet<[{) | page (number), required | totalPages (number), required | totalItems (number), required | pageSize (number), required | canPrevious (boolean), required | canNext (boolean), required | previous (() => void), required | next (() => void), required | goto ((page: number) => void), required
  Native props: Forwards <element> attributes via rest props.
- DataGrid.SelectAll
  Props: none
  Native props: Forwards <td> attributes via rest props.
- DataGrid.SelectCell
  Props: rowId (string), required
  Native props: Forwards <td> attributes via rest props.
- DataGrid.ExpandableRow
  Props: rowId (string), required | expandable (Snippet), required | children (Snippet), required
  Native props: Forwards <tr> attributes via rest props.
- DataGrid.ExpandTrigger
  Props: rowId (string), required | children (Snippet)
  Native props: Forwards native HTML attributes via rest props.
Structure:
  DataGrid.Root
    DataGrid.Table
    DataGrid.Header
    DataGrid.Column
    DataGrid.Body
    DataGrid.Row
    DataGrid.Cell
    DataGrid.Pagination
    DataGrid.SelectAll
    DataGrid.SelectCell
    DataGrid.ExpandableRow
    DataGrid.ExpandTrigger
CSS variables: --dry-data-grid-border, --dry-data-grid-head-padding-y, --dry-data-grid-header-bg, --dry-data-grid-padding-x, --dry-data-grid-padding-y, --dry-data-grid-pagination-gap, --dry-data-grid-row-hover, --dry-data-grid-row-stripe, --dry-data-grid-sort-color
Data attributes: data-expanded, data-filter-input, data-pagination-info, data-pagination-next, data-pagination-prev, data-part, data-pinned, data-resizable, data-resizing, data-selected, data-sort-indicator, data-sort-trigger, data-sorted
Example:
```svelte
<DataGrid.Root>
  <DataGrid.Table>...</DataGrid.Table>
  <DataGrid.Header>...</DataGrid.Header>
  <DataGrid.Column>...</DataGrid.Column>
  <DataGrid.Body>...</DataGrid.Body>
  <DataGrid.Row>...</DataGrid.Row>
  <DataGrid.Cell>...</DataGrid.Cell>
  <DataGrid.Pagination>...</DataGrid.Pagination>
  <DataGrid.SelectAll>...</DataGrid.SelectAll>
  <DataGrid.SelectCell>...</DataGrid.SelectCell>
  <DataGrid.ExpandableRow>...</DataGrid.ExpandableRow>
  <DataGrid.ExpandTrigger>...</DataGrid.ExpandTrigger>
</DataGrid.Root>
```

## Carousel
Package: @dryui/ui
Category: display
Tags: slider, carousel, scroll, gallery, slideshow
Kind: compound
Root import: import { Carousel } from '@dryui/ui'
Subpath import: import { Carousel } from '@dryui/ui/carousel'
Parts:
- Carousel.Root
  Props: orientation ('horizontal' | 'vertical'), accepted horizontal, vertical | loop (boolean) | autoplay (number | false) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Carousel.Viewport
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Carousel.Slide
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Carousel.Prev
  Props: children (Snippet)
  Native props: Forwards <button> attributes via rest props.
- Carousel.Next
  Props: children (Snippet)
  Native props: Forwards <button> attributes via rest props.
- Carousel.Dots
  Props: none
  Native props: Forwards <div> attributes via rest props.
- Carousel.Thumbnails
  Props: position ('bottom' | 'left' | 'right'), accepted bottom, left, right | children (Snippet<[{ index: number; isActive: boolean; scrollTo: (index: number) => void }]>), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  Carousel.Root
    Carousel.Viewport
    Carousel.Slide
    Carousel.Prev
    Carousel.Next
    Carousel.Dots
    Carousel.Thumbnails
CSS variables: --dry-carousel-gap, --dry-carousel-indicator-active-color, --dry-carousel-indicator-color, --dry-carousel-indicator-size, --dry-carousel-nav-size, --dry-carousel-slide-size
Data attributes: data-active, data-orientation, data-position, data-theme
Example:
```svelte
<Carousel.Root>
  <Carousel.Viewport>...</Carousel.Viewport>
  <Carousel.Slide>...</Carousel.Slide>
  <Carousel.Prev>...</Carousel.Prev>
  <Carousel.Next>...</Carousel.Next>
  <Carousel.Dots>...</Carousel.Dots>
  <Carousel.Thumbnails>...</Carousel.Thumbnails>
</Carousel.Root>
```

## FormatBytes
Package: @dryui/ui
Category: display
Tags: format, bytes, file-size, number
Kind: simple
Root import: import { FormatBytes } from '@dryui/ui'
Subpath import: import { FormatBytes } from '@dryui/ui/format-bytes'
Props: value (number), required | locale (string) | unit ('byte' | 'bit'), accepted byte, bit | display ('short' | 'long' | 'narrow'), accepted short, long, narrow
Native props: Forwards <span> attributes via rest props.
CSS variables: --dry-format-bytes-color, --dry-format-bytes-font-size
Data attributes: data-theme
Example:
```svelte
<FormatBytes>Content</FormatBytes>
```

## FormatDate
Package: @dryui/ui
Category: display
Tags: format, date, time, intl, locale
Kind: simple
Root import: import { FormatDate } from '@dryui/ui'
Subpath import: import { FormatDate } from '@dryui/ui/format-date'
Props: date (Date | string | number), required | locale (string) | weekday ('long' | 'short' | 'narrow'), accepted long, short, narrow | era ('long' | 'short' | 'narrow'), accepted long, short, narrow | year ('numeric' | '2-digit'), accepted numeric, 2-digit | month ('numeric' | '2-digit' | 'long' | 'short' | 'narrow'), accepted numeric, 2-digit, long, short, narrow | day ('numeric' | '2-digit'), accepted numeric, 2-digit | hour ('numeric' | '2-digit'), accepted numeric, 2-digit | minute ('numeric' | '2-digit'), accepted numeric, 2-digit | second ('numeric' | '2-digit'), accepted numeric, 2-digit | timeZoneName ('long' | 'short'), accepted long, short | timeZone (string) | hourCycle ('h11' | 'h12' | 'h23' | 'h24'), accepted h11, h12, h23, h24 | dateStyle ('full' | 'long' | 'medium' | 'short'), accepted full, long, medium, short | timeStyle ('full' | 'long' | 'medium' | 'short'), accepted full, long, medium, short
Native props: Forwards <time> attributes via rest props.
CSS variables: --dry-format-date-color, --dry-format-date-font-size
Data attributes: data-theme
Example:
```svelte
<FormatDate>Content</FormatDate>
```

## FormatNumber
Package: @dryui/ui
Category: display
Tags: format, number, currency, percent
Kind: simple
Root import: import { FormatNumber } from '@dryui/ui'
Subpath import: import { FormatNumber } from '@dryui/ui/format-number'
Props: value (number), required | locale (string) | type ('decimal' | 'currency' | 'percent' | 'unit'), accepted decimal, currency, percent, unit | currency (string) | unit (string) | notation ('standard' | 'scientific' | 'engineering' | 'compact'), accepted standard, scientific, engineering, compact | minimumFractionDigits (number) | maximumFractionDigits (number) | minimumIntegerDigits (number) | minimumSignificantDigits (number) | maximumSignificantDigits (number)
Native props: Forwards <span> attributes via rest props.
CSS variables: --dry-format-number-color, --dry-format-number-font-size
Data attributes: data-theme
Example:
```svelte
<FormatNumber>Content</FormatNumber>
```

## ImageComparison
Package: @dryui/ui
Category: display
Tags: image, compare, slider, before-after
Kind: simple
Root import: import { ImageComparison } from '@dryui/ui'
Subpath import: import { ImageComparison } from '@dryui/ui/image-comparison'
Props: position (number), default 50, bindable | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical, default 'horizontal' | before (Snippet), required | after (Snippet), required | handle (Snippet)
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-image-comparison-arrow-color, --dry-image-comparison-arrow-width, --dry-image-comparison-arrow-width-wide, --dry-image-comparison-grip-z-index, --dry-image-comparison-handle-color, --dry-image-comparison-handle-shadow, --dry-image-comparison-handle-width, --dry-image-comparison-radius
Data attributes: data-orientation
Example:
```svelte
<ImageComparison>Content</ImageComparison>
```

## StatCard
Package: @dryui/ui
Category: display
Tags: stats, kpi, metric, dashboard, trend
Kind: compound
Root import: import { StatCard } from '@dryui/ui'
Subpath import: import { StatCard } from '@dryui/ui/stat-card'
Parts:
- StatCard.Root
  Props: tone ('neutral' | 'info' | 'success' | 'warning' | 'danger'), accepted neutral, info, success, warning, danger, default 'neutral' | density ('comfortable' | 'compact'), accepted comfortable, compact, default 'comfortable' | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- StatCard.Label
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- StatCard.Value
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- StatCard.Trend
  Props: direction ('up' | 'down' | 'flat'), accepted up, down, flat, default 'flat' | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  StatCard.Root
    StatCard.Label
    StatCard.Value
    StatCard.Trend
CSS variables: --dry-stat-card-accent, --dry-stat-card-gap, --dry-stat-card-padding, --dry-stat-card-radius, --dry-stat-card-trend
Data attributes: data-direction
Example:
```svelte
<StatCard.Root tone="info">
  <StatCard.Label>Total travel spend</StatCard.Label>
  <StatCard.Value>$613M</StatCard.Value>
  <StatCard.Trend direction="up">12.4% vs last quarter</StatCard.Trend>
</StatCard.Root>
```

## RelativeTime
Package: @dryui/ui
Category: display
Tags: time, relative, ago, auto-update
Kind: simple
Root import: import { RelativeTime } from '@dryui/ui'
Subpath import: import { RelativeTime } from '@dryui/ui/relative-time'
Props: date (Date | string | number), required | locale (string) | updateInterval (number)
Native props: Forwards <time> attributes via rest props.
CSS variables: --dry-relative-time-color, --dry-relative-time-font-size
Data attributes: data-theme
Example:
```svelte
<RelativeTime>Content</RelativeTime>
```

## Tree
Package: @dryui/ui
Category: display
Tags: tree, hierarchy, expand, collapse, nested
Kind: compound
Root import: import { Tree } from '@dryui/ui'
Subpath import: import { Tree } from '@dryui/ui/tree'
Parts:
- Tree.Root
  Props: defaultExpanded (string[]) | selectedItem (string | null), default null, bindable | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Tree.Item
  Props: itemId (string), required | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Tree.ItemLabel
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Tree.ItemChildren
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  Tree.Root
    Tree.Item
    Tree.ItemLabel
    Tree.ItemChildren
CSS variables: --dry-tree-icon-size, --dry-tree-indent, --dry-tree-item-hover-bg, --dry-tree-item-padding, --dry-tree-item-radius, --dry-tree-item-selected-bg, --dry-tree-item-selected-color
Data attributes: data-selected, data-theme
Example:
```svelte
<Tree.Root>
  <Tree.Item>...</Tree.Item>
  <Tree.ItemLabel>...</Tree.ItemLabel>
  <Tree.ItemChildren>...</Tree.ItemChildren>
</Tree.Root>
```

## Gauge
Package: @dryui/ui
Category: display
Tags: gauge, meter, dial, svg, dashboard, threshold
Kind: simple
Root import: import { Gauge } from '@dryui/ui'
Subpath import: import { Gauge } from '@dryui/ui/gauge'
Props: none
CSS variables: --dry-gauge-fill-color, --dry-gauge-size, --dry-gauge-stroke-width, --dry-gauge-track-color
Data attributes: data-part, data-theme
Example:
```svelte
<Gauge value={72} min={0} max={100} thresholds={[{ value: 30, color: "red" }, { value: 70, color: "orange" }, { value: 90, color: "green" }]} />
```

## Sparkline
Package: @dryui/ui
Category: display
Tags: sparkline, chart, inline, trend, svg, data
Kind: simple
Root import: import { Sparkline } from '@dryui/ui'
Subpath import: import { Sparkline } from '@dryui/ui/sparkline'
Props: data (number[]), required | width (number) | height (number) | color (string) | filled (boolean) | strokeWidth (number) | highlightLast (boolean)
CSS variables: --dry-sparkline-color, --dry-sparkline-fill-opacity
Data attributes: data-part, data-theme
Example:
```svelte
<Sparkline data={[5, 10, 3, 8, 12, 7]} width={120} height={30} />
```

## FlipCard
Package: @dryui/ui
Category: display
Tags: card, flip, hover, click, 3d, animation
Kind: compound
Root import: import { FlipCard } from '@dryui/ui'
Subpath import: import { FlipCard } from '@dryui/ui/flip-card'
Parts:
- FlipCard.Root
  Props: trigger ('hover' | 'click'), accepted hover, click | direction ('horizontal' | 'vertical'), accepted horizontal, vertical | flipped (boolean) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- FlipCard.Front
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- FlipCard.Back
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  FlipCard.Root
    FlipCard.Front
    FlipCard.Back
CSS variables: --dry-flip-card-duration, --dry-flip-card-perspective
Data attributes: data-direction, data-flipped, data-part
Example:
```svelte
<FlipCard.Root trigger="hover">
  <FlipCard.Front>Front content</FlipCard.Front>
  <FlipCard.Back>Back content</FlipCard.Back>
</FlipCard.Root>
```

## LogoCloud
Package: @dryui/ui
Category: display
Tags: logo, brand, grid, partners, sponsors
Kind: compound
Root import: import { LogoCloud } from '@dryui/ui'
Subpath import: import { LogoCloud } from '@dryui/ui/logo-cloud'
Parts:
- LogoCloud.Root
  Props: columns (number), default 5 | gap (string) | align ('start' | 'center' | 'end'), accepted start, center, end | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- LogoCloud.Item
  Props: href (string) | name (string) | children (Snippet), required
  Native props: Forwards <element> attributes via rest props.
Structure:
  LogoCloud.Root
    LogoCloud.Item
CSS variables: --dry-logo-cloud-columns, --dry-logo-cloud-gap, --dry-logo-cloud-item-height
Data attributes: none
Example:
```svelte
<LogoCloud.Root columns={4}>
  <LogoCloud.Item name="Acme">Acme logo</LogoCloud.Item>
  <LogoCloud.Item name="Globex">Globex logo</LogoCloud.Item>
</LogoCloud.Root>
```

## VideoEmbed
Package: @dryui/ui
Category: display
Tags: video, embed, youtube, vimeo, player, media
Kind: simple
Root import: import { VideoEmbed } from '@dryui/ui'
Subpath import: import { VideoEmbed } from '@dryui/ui/video-embed'
Props: src (string), required | poster (string) | title (string) | provider ('youtube' | 'vimeo' | 'native'), accepted youtube, vimeo, native | autoplay (boolean) | aspectRatio (string) | playButton (Snippet) | children (Snippet)
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-video-embed-play-size, --dry-video-embed-radius
Data attributes: data-part
Example:
```svelte
<VideoEmbed src="https://youtube.com/watch?v=dQw4w9WgXcQ" provider="youtube" title="Video title" />
```

## SeatMap
Package: @dryui/ui
Category: display
Tags: seat, map, booking, venue, selection, ticket
Kind: compound
Root import: import { SeatMap } from '@dryui/ui'
Subpath import: import { SeatMap } from '@dryui/ui/seat-map'
Parts:
- SeatMap.Root
  Props: selectedSeats (string[]) | maxSelections (number) | onSelectionChange ((seats: string[]) => void) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- SeatMap.Row
  Props: label (string), required | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- SeatMap.Seat
  Props: id (string), required | status ('available' | 'occupied' | 'selected' | 'blocked'), accepted available, occupied, selected, blocked, required | tier (string) | price (number) | children (Snippet)
  Native props: Forwards <button> attributes via rest props.
- SeatMap.Legend
  Props: children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
Structure:
  SeatMap.Root
    SeatMap.Row
      SeatMap.Seat
    SeatMap.Legend
CSS variables: --dry-seat-available-bg, --dry-seat-blocked-bg, --dry-seat-gap, --dry-seat-occupied-bg, --dry-seat-selected-bg, --dry-seat-size
Data attributes: data-part, data-status
Example:
```svelte
<SeatMap.Root selectedSeats={selected} onSelectionChange={(s) => selected = s}>
  <SeatMap.Row label="A">
    <SeatMap.Seat id="A1" status="available" />
    <SeatMap.Seat id="A2" status="occupied" />
    <SeatMap.Seat id="A3" status="available" />
  </SeatMap.Row>
  <SeatMap.Legend>Legend content</SeatMap.Legend>
</SeatMap.Root>
```

## Map
Package: @dryui/ui
Category: display
Tags: map, geo, marker, popup, layer, geojson
Kind: compound
Root import: import { Map } from '@dryui/ui'
Subpath import: import { Map } from '@dryui/ui/map'
Parts:
- Map.Root
  Props: center (LngLat) | zoom (number) | minZoom (number) | maxZoom (number) | mapStyle (string) | createMap ((container: HTMLDivElement, options: MapOptions) => MapInstance) | children (Snippet)
  Native props: Forwards <div> attributes via rest props.
- Map.Marker
  Props: position (LngLat), required | color (string) | children (Snippet) | class (string)
- Map.Popup
  Props: maxWidth (string) | closeButton (boolean) | closeOnClick (boolean) | children (Snippet), required | class (string)
- Map.Layer
  Props: id (string), required | type ('heatmap' | 'polygon' | 'fill' | 'circle' | 'line'), accepted heatmap, polygon, fill, circle, line, required | data (GeoJsonData), required | color (string) | opacity (number)
- Map.Controls
  Props: position ('top-left' | 'top-right' | 'bottom-left' | 'bottom-right'), accepted top-left, top-right, bottom-left, bottom-right | navigation (boolean) | fullscreen (boolean) | children (Snippet)
Structure:
  Map.Root
    Map.Marker
      Map.Popup
    Map.Controls
CSS variables: --dry-map-border, --dry-map-radius
Data attributes: data-part, data-theme
Example:
```svelte
<Map.Root center={[-122.4, 37.8]} zoom={12}>
  <Map.Marker position={[-122.4, 37.8]}>
    <Map.Popup>San Francisco</Map.Popup>
  </Map.Marker>
  <Map.Controls navigation fullscreen />
</Map.Root>
```

### feedback

## Alert
Package: @dryui/ui
Category: feedback
Tags: message, notification, info, warning, error
Kind: compound
Root import: import { Alert } from '@dryui/ui'
Subpath import: import { Alert } from '@dryui/ui/alert'
Parts:
- Alert.Root
  Props: variant (AlertVariant), default 'info' | dismissible (boolean) | onDismiss (() => void) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Alert.Icon
  Props: children (Snippet), required
  Native props: Forwards <span> attributes via rest props.
- Alert.Title
  Props: children (Snippet), required
  Native props: Forwards <h*> attributes via rest props.
- Alert.Description
  Props: children (Snippet), required
  Native props: Forwards <p> attributes via rest props.
- Alert.Close
  Props: children (Snippet)
  Native props: Forwards <button> attributes via rest props.
Structure:
  Alert.Root
    Alert.Description
CSS variables: --dry-alert-bg, --dry-alert-border, --dry-alert-color, --dry-alert-gap, --dry-alert-icon-color, --dry-alert-padding, --dry-alert-radius
Data attributes: none
Example:
```svelte
<Alert.Root variant="info"><Alert.Description>Your changes have been saved.</Alert.Description></Alert.Root>
```

## Toast
Package: @dryui/ui
Category: feedback
Tags: notification, toast, snackbar, alert
Kind: compound
Root import: import { Toast } from '@dryui/ui'
Subpath import: import { Toast } from '@dryui/ui/toast'
Parts:
- Toast.Provider
  Props: position ('top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'), accepted top-right, top-left, bottom-right, bottom-left, top-center, bottom-center, default 'bottom-right' | children (Snippet)
  Native props: Forwards <div> attributes via rest props.
- Toast.Root
  Props: id (string), required | variant ('info' | 'success' | 'warning' | 'error'), accepted info, success, warning, error | persistent (boolean) | progress (number) | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- Toast.Title
  Props: children (Snippet), required
  Native props: Forwards <p> attributes via rest props.
- Toast.Description
  Props: children (Snippet), required
  Native props: Forwards <p> attributes via rest props.
- Toast.Close
  Props: children (Snippet), required
  Native props: Forwards <button> attributes via rest props.
- Toast.Action
  Props: children (Snippet), required | onclick (() => void)
  Native props: Forwards native HTML attributes via rest props.
Structure:
  Toast.Root
    Toast.Provider
    Toast.Title
    Toast.Description
    Toast.Close
    Toast.Action
CSS variables: --dry-toast-accent, --dry-toast-bg, --dry-toast-border, --dry-toast-close-hover-bg, --dry-toast-title-color
Data attributes: data-part, data-persistent, data-position, data-removing, data-theme, data-variant
Example:
```svelte
<Toast.Root>
  <Toast.Provider>...</Toast.Provider>
  <Toast.Title>...</Toast.Title>
  <Toast.Description>...</Toast.Description>
  <Toast.Close>...</Toast.Close>
  <Toast.Action>...</Toast.Action>
</Toast.Root>
```

## Progress
Package: @dryui/ui
Category: feedback
Tags: loading, progress, bar, percentage
Kind: simple
Root import: import { Progress } from '@dryui/ui'
Subpath import: import { Progress } from '@dryui/ui/progress'
Props: value (number) | max (number), default 100 | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | color ('blue' | 'green' | 'red' | 'yellow'), accepted blue, green, red, yellow, default 'blue' | segments (ProgressSegment[]) | thresholds (ProgressThreshold[]) | showLabel (boolean | 'inside' | 'outside')
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-progress-bar, --dry-progress-height, --dry-progress-radius, --dry-progress-track
Data attributes: data-part, data-position, data-state
Example:
```svelte
<Progress value={65} max={100} />
```

## Skeleton
Package: @dryui/ui
Category: feedback
Tags: loading, placeholder, shimmer, skeleton
Kind: simple
Root import: import { Skeleton } from '@dryui/ui'
Subpath import: import { Skeleton } from '@dryui/ui/skeleton'
Props: variant ('text' | 'circular' | 'rectangular'), accepted text, circular, rectangular, default 'text' | width (string) | height (string)
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-skeleton-color, --dry-skeleton-highlight, --dry-skeleton-radius
Data attributes: none
Example:
```svelte
<Skeleton width="200px" height="1rem" />
```

## Spinner
Package: @dryui/ui
Category: feedback
Tags: loading, spinner, wait, processing
Kind: simple
Root import: import { Spinner } from '@dryui/ui'
Subpath import: import { Spinner } from '@dryui/ui/spinner'
Props: size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | color ('primary' | 'current'), accepted primary, current, default 'primary' | label (string)
CSS variables: --dry-spinner-color, --dry-spinner-size, --dry-spinner-track, --dry-spinner-width
Data attributes: none
Example:
```svelte
<Spinner size="md" />
```

## ProgressRing
Package: @dryui/ui
Category: feedback
Tags: progress, ring, circular, loading
Kind: simple
Root import: import { ProgressRing } from '@dryui/ui'
Subpath import: import { ProgressRing } from '@dryui/ui/progress-ring'
Props: value (number | undefined) | max (number), default 100 | size (number), default 40 | strokeWidth (number), default 4 | color ('primary' | 'gray' | 'green' | 'red' | 'yellow'), accepted primary, gray, green, red, yellow, default 'primary' | indeterminate (boolean), default false
Native props: Forwards <div> attributes via rest props.
CSS variables: --dry-progress-ring-indeterminate-speed, --dry-progress-ring-indicator-color, --dry-progress-ring-track-color
Data attributes: data-part, data-state, data-theme
Example:
```svelte
<ProgressRing>Content</ProgressRing>
```

### interaction

## DragAndDrop
Package: @dryui/ui
Category: interaction
Tags: drag, drop, reorder, sortable, list
Kind: compound
Root import: import { DragAndDrop } from '@dryui/ui'
Subpath import: import { DragAndDrop } from '@dryui/ui/drag-and-drop'
Parts:
- DragAndDrop.Root
  Props: items (T[]), required | onReorder ((items: T[]) => void), required | orientation ('vertical' | 'horizontal'), accepted vertical, horizontal | children (Snippet), required
  Native props: Forwards <div> attributes via rest props.
- DragAndDrop.Item
  Props: index (number), required | children (Snippet<[{ isDragging: boolean; isOver: boolean }]>), required
  Native props: Forwards <div> attributes via rest props.
- DragAndDrop.Handle
  Props: index (number), required | children (Snippet)
  Native props: Forwards <div> attributes via rest props.
Structure:
  DragAndDrop.Root
    DragAndDrop.Item
    DragAndDrop.Handle
CSS variables: --dry-dnd-drag-opacity, --dry-dnd-drag-scale, --dry-dnd-drag-shadow, --dry-dnd-drag-z-index, --dry-dnd-gap, --dry-dnd-handle-color, --dry-dnd-handle-hover-color, --dry-dnd-indicator-color, --dry-dnd-indicator-size, --dry-dnd-item-bg, --dry-dnd-item-border, --dry-dnd-item-padding, --dry-dnd-item-radius, --dry-dnd-item-shadow
Data attributes: data-dnd-grip, data-dragging, data-orientation, data-over
Example:
```svelte
<DragAndDrop.Root>
  <DragAndDrop.Item>...</DragAndDrop.Item>
  <DragAndDrop.Handle>...</DragAndDrop.Handle>
</DragAndDrop.Root>
```

### utility

## Portal
Package: @dryui/ui
Category: utility
Tags: teleport, portal, mount, target
Kind: simple
Root import: import { Portal } from '@dryui/ui'
Subpath import: import { Portal } from '@dryui/ui/portal'
Props: target (string | HTMLElement) | disabled (boolean) | children (Snippet), required
CSS variables: none
Data attributes: none
Example:
```svelte
<Portal>Content</Portal>
```

## VisuallyHidden
Package: @dryui/ui
Category: utility
Tags: a11y, screen-reader, hidden, accessible
Kind: simple
Root import: import { VisuallyHidden } from '@dryui/ui'
Subpath import: import { VisuallyHidden } from '@dryui/ui/visually-hidden'
Props: children (Snippet), required
Native props: Forwards <span> attributes via rest props.
CSS variables: none
Data attributes: none
Example:
```svelte
<VisuallyHidden>Content</VisuallyHidden>
```

## FocusTrap
Package: @dryui/ui
Category: utility
Tags: a11y, focus, trap, modal, keyboard
Kind: simple
Root import: import { FocusTrap } from '@dryui/ui'
Subpath import: import { FocusTrap } from '@dryui/ui/focus-trap'
Props: active (boolean) | initialFocus (string) | returnFocus (boolean) | children (Snippet), required
Native props: Forwards <div> attributes via rest props.
CSS variables: none
Data attributes: none
Example:
```svelte
<FocusTrap>Content</FocusTrap>
```

## Hotkey
Package: @dryui/ui
Category: utility
Tags: keyboard, shortcut, hotkey, keybinding
Kind: simple
Root import: import { Hotkey } from '@dryui/ui'
Subpath import: import { Hotkey } from '@dryui/ui/hotkey'
Props: none
CSS variables: none
Data attributes: none
Example:
```svelte
<Hotkey>Content</Hotkey>
```

## composed outputs

### application

## Analytics Dashboards
Surface: application
Kind: page
Audience: Travel admins, finance teams, and operations analysts
Route: /blocks/analytics-dashboards
Tags: application, dashboard, analytics, travel
Variants: Spend dashboard, Compliance dashboard, Sustainability dashboard
Source: available via get/info surfaces

## Approval Workflows
Surface: application
Kind: page
Audience: Travel approvals, expense reviews, and finance operations
Route: /blocks/approval-workflows
Tags: application, approval, workflow, queue
Variants: Approval inbox, Proposal review, Approval chain
Source: available via get/info surfaces

## Audit Log
Surface: application
Kind: block
Audience: Compliance officers, admins, and security teams
Route: /blocks/audit-log
Tags: application, admin, audit, compliance
Variants: Searchable log table, Filter bar, Detail expansion, CSV export
Source: available via get/info surfaces

## Budget Tracking
Surface: application
Kind: block
Audience: Finance teams and budget owners
Route: /blocks/budget-tracking
Tags: expense, application, budget, finance
Variants: Budget card, Budget creation form, Budget breakdown table, Over-budget alert
Source: available via get/info surfaces

## Corporate Card Management
Surface: application
Kind: block
Audience: Corporate card administrators and cardholders
Route: /blocks/corporate-card-management
Tags: expense, application, cards, finance
Variants: Card display, Virtual card creation, Card controls, Transaction feed
Source: available via get/info surfaces

## Detail Screens
Surface: application
Kind: page
Audience: CRM, project, and workflow detail pages
Route: /blocks/detail-screens
Tags: detail screen, application
Variants: Project detail, Customer detail, Incident detail
Source: available via get/info surfaces

## Form Sections
Surface: application
Kind: block
Audience: Account settings, onboarding, and workflow builders
Route: /blocks/form-sections
Tags: application, forms, settings
Variants: Settings group, Onboarding block, Approval form
Source: available via get/info surfaces

## Group Travel & Events
Surface: application
Kind: block
Audience: Corporate event planners and group travel coordinators
Route: /blocks/group-travel-events
Tags: travel, application, events, group
Variants: Event creation form, Attendee management grid, Booking status dashboard, Budget tracker
Source: available via get/info surfaces

## Home Screens
Surface: application
Kind: page
Audience: Internal tools and SaaS home surfaces
Route: /blocks/home-screens
Tags: home screen, dashboard, application
Variants: Launch center, Ops dashboard, Workspace home
Source: available via get/info surfaces

## Integration Marketplace
Surface: application
Kind: block
Audience: IT admins and operations teams managing integrations
Route: /blocks/integration-marketplace
Tags: application, admin, integrations, marketplace
Variants: Integration card grid, Category filter sidebar, Detail modal, Connection status dashboard
Source: available via get/info surfaces

## Itinerary Timeline
Surface: application
Kind: block
Audience: Corporate travel itinerary views and trip management
Route: /blocks/itinerary-timeline
Tags: travel, application, itinerary, timeline
Variants: Full trip timeline, Single-day view, Compact card
Source: available via get/info surfaces

## Layout Sections
Surface: application
Kind: block
Audience: Workspace and dashboard layouts
Route: /blocks/layout-sections
Tags: application, layout, regions
Variants: Summary rail, Filter bar, Context stack
Source: available via get/info surfaces

## List Surfaces
Surface: application
Kind: block
Audience: Admin panels, review queues, and project workspaces
Route: /blocks/list-surfaces
Tags: application, lists, data
Variants: Review queue, Activity feed, Table + detail rail
Source: available via get/info surfaces

## Live Traveler Map
Surface: application
Kind: block
Audience: Travel managers, security teams, and operations centers
Route: /blocks/live-traveler-map
Tags: application, map, dashboard, travel, safety
Variants: World map with pins, Risk zone overlays, Traveler detail popover, Dashboard sidebar
Source: available via get/info surfaces

## Navigation Shells
Surface: application
Kind: block
Audience: SaaS products, internal tools, and ops consoles
Route: /blocks/navigation-shells
Tags: application, navigation, shell
Variants: Sidebar workspace, Top-nav workspace, Dual-nav shell
Source: available via get/info surfaces

## Onboarding Wizard
Surface: application
Kind: block
Audience: IT admins onboarding new organizations and departments
Route: /blocks/onboarding-wizard
Tags: application, admin, onboarding, wizard
Variants: Multi-step wizard, Checklist dashboard, Bulk user upload, Go-live summary
Source: available via get/info surfaces

## Overlay Surfaces
Surface: application
Kind: block
Audience: Workflow builders, editors, and review flows
Route: /blocks/overlay-surfaces
Tags: application, overlay, workflow
Variants: Approval drawer, Create dialog, Context side panel
Source: available via get/info surfaces

## Policy Builder
Surface: application
Kind: block
Audience: Travel admins and policy managers
Route: /blocks/policy-builder
Tags: application, admin, policy, configuration
Variants: Rule builder rows, Policy template selector, Preview/test mode
Source: available via get/info surfaces

## Policy Compliance System
Surface: application
Kind: block
Audience: Corporate travel policy enforcement and compliance teams
Route: /blocks/policy-compliance
Tags: travel, application, policy, compliance
Variants: Policy badge inline, Policy tooltip, Price-to-beat bar, Justification field, Policy summary panel
Source: available via get/info surfaces

## Receipt Capture & Processing
Surface: application
Kind: block
Audience: Expense management products and receipt processing workflows
Route: /blocks/receipt-capture
Tags: expense, application, receipts, upload
Variants: Upload zone, OCR preview, Receipt gallery
Source: available via get/info surfaces

## Reimbursement Tracker
Surface: application
Kind: block
Audience: Employees tracking reimbursements and payroll teams
Route: /blocks/reimbursement-tracker
Tags: expense, application, reimbursement, finance
Variants: Status pipeline, Payment detail, Failed payment alert
Source: available via get/info surfaces

## Seat Selection
Surface: application
Kind: block
Audience: Travel booking seat selection flows
Route: /blocks/seat-selection
Tags: travel, application, booking, seats
Variants: Aircraft layout, Train layout, Selection summary
Source: available via get/info surfaces

## Settings Screens
Surface: application
Kind: page
Audience: Account, billing, permissions, and preferences flows
Route: /blocks/settings-screens
Tags: settings, application, forms
Variants: Workspace settings, Notification settings, Billing settings
Source: available via get/info surfaces

## Transaction Management
Surface: application
Kind: block
Audience: Expense management and corporate card transaction review
Route: /blocks/transaction-management
Tags: expense, application, transactions, data-grid
Variants: Transaction list, Inline detail expansion, Bulk action bar
Source: available via get/info surfaces

## Travel Result Cards
Surface: application
Kind: block
Audience: Corporate travel search and booking products
Route: /blocks/travel-result-cards
Tags: travel, application, results, booking
Variants: Flight result, Hotel result, Fare matrix
Source: available via get/info surfaces

## Traveler Profile Sections
Surface: application
Kind: block
Audience: Corporate travel profile management and traveler self-service
Route: /blocks/traveler-profile
Tags: travel, application, profile, settings
Variants: Personal info tab, Documents tab, Preferences tab, Loyalty programs tab, Payment methods tab
Source: available via get/info surfaces

## Trip Search Forms
Surface: application
Kind: block
Audience: Corporate travel booking products and OTAs
Route: /blocks/trip-search-forms
Tags: travel, application, search, booking, forms
Variants: Flight search, Hotel search, Car rental search, Rail search, Multi-city builder, Unified tabbed search
Source: available via get/info surfaces

### ecommerce

## Cart Page Example
Surface: ecommerce
Kind: page
Audience: Pre-checkout purchase review flows
Route: /blocks/cart-page
Tags: ecommerce page, cart page
Variants: Standard cart, Upsell cart
Source: available via get/info surfaces

## Category Filters
Surface: ecommerce
Kind: block
Audience: Collection pages and search results
Route: /blocks/category-filters
Tags: ecommerce, filters
Variants: Sidebar filters, Toolbar filters, Guided filters
Source: available via get/info surfaces

## Category Page Example
Surface: ecommerce
Kind: page
Audience: Collection and search-adjacent ecommerce pages
Route: /blocks/category-page
Tags: ecommerce page, category page
Variants: Merch category, Dense catalog
Source: available via get/info surfaces

## Category Previews
Surface: ecommerce
Kind: block
Audience: Storefront homepages and category landing pages
Route: /blocks/category-previews
Tags: ecommerce, category, homepage
Variants: Collection trio, Seasonal spotlight, Editorial collection
Source: available via get/info surfaces

## Checkout Forms
Surface: ecommerce
Kind: block
Audience: Checkout pages and one-page purchase flows
Route: /blocks/checkout-forms
Tags: ecommerce, checkout, forms
Variants: One-page checkout, Step checkout, Express checkout
Source: available via get/info surfaces

## Checkout Page Example
Surface: ecommerce
Kind: page
Audience: Checkout and express purchase flows
Route: /blocks/checkout-page
Tags: ecommerce page, checkout page
Variants: One-page checkout, Step checkout
Source: available via get/info surfaces

## Incentives
Surface: ecommerce
Kind: block
Audience: Storefronts, PDPs, and cart surfaces
Route: /blocks/incentives
Tags: ecommerce, incentives, trust
Variants: Shipping incentives, Service incentives, Bundle incentives
Source: available via get/info surfaces

## Order History
Surface: ecommerce
Kind: block
Audience: Customer account areas
Route: /blocks/order-history
Tags: ecommerce, orders, account
Variants: Account order list, Receipt detail, Reorder history
Source: available via get/info surfaces

## Order Page Example
Surface: ecommerce
Kind: page
Audience: Customer account and post-purchase flows
Route: /blocks/order-page
Tags: ecommerce page, order page
Variants: Receipt-first, Account-first
Source: available via get/info surfaces

## Order Summaries
Surface: ecommerce
Kind: block
Audience: Cart, checkout, and account order views
Route: /blocks/order-summaries
Tags: ecommerce, summary, order
Variants: Sticky summary, Inline summary, Confirmation summary
Source: available via get/info surfaces

## Product Features
Surface: ecommerce
Kind: block
Audience: Product pages and launch pages
Route: /blocks/product-features
Tags: ecommerce, features, product
Variants: Material story, Travel proof, Spec pairing
Source: available via get/info surfaces

## Product Lists
Surface: ecommerce
Kind: block
Audience: Collection pages and storefront discovery
Route: /blocks/product-lists
Tags: ecommerce, products, listing
Variants: Editorial grid, Dense catalog, Featured row
Source: available via get/info surfaces

## Product Overviews
Surface: ecommerce
Kind: block
Audience: Storefront product pages and seasonal campaigns
Route: /blocks/product-overviews
Tags: ecommerce, product, overview
Variants: Launch overview, Spec overview, Editorial overview
Source: available via get/info surfaces

## Product Page Example
Surface: ecommerce
Kind: page
Audience: Flagship and standard product detail pages
Route: /blocks/product-page
Tags: ecommerce page, product page
Variants: Flagship PDP, Spec-led PDP
Source: available via get/info surfaces

## Product Quickviews
Surface: ecommerce
Kind: block
Audience: Grid-based shopping experiences
Route: /blocks/product-quickviews
Tags: ecommerce, quickview, overlay
Variants: Card quickview, Spec quickview, Color quickview
Source: available via get/info surfaces

## Promo Sections
Surface: ecommerce
Kind: block
Audience: Storefront homepages and seasonal campaigns
Route: /blocks/promo-sections
Tags: ecommerce, promo, campaign
Variants: Sale spotlight, Bundle promo, New arrival promo
Source: available via get/info surfaces

## Reviews
Surface: ecommerce
Kind: block
Audience: Product pages and collection proof sections
Route: /blocks/reviews
Tags: ecommerce, reviews, proof
Variants: Review grid, Review feed, Highlighted review
Source: available via get/info surfaces

## Shopping Carts
Surface: ecommerce
Kind: block
Audience: Cart views and quick-add flows
Route: /blocks/shopping-carts
Tags: ecommerce, cart
Variants: Page cart, Slide cart, Quick add cart
Source: available via get/info surfaces

## Store Navigation
Surface: ecommerce
Kind: block
Audience: Storefront homepages and product/category pages
Route: /blocks/store-navigation
Tags: ecommerce, navigation, store
Variants: Classic store header, Campaign store nav, Editorial store nav
Source: available via get/info surfaces

## Storefront Page Example
Surface: ecommerce
Kind: page
Audience: Always-on storefront homepages
Route: /blocks/storefront-page
Tags: ecommerce page, storefront
Variants: Campaign storefront, Editorial storefront
Source: available via get/info surfaces

### marketing

## 404 Pages
Surface: marketing
Kind: block
Audience: Public marketing surfaces and docs
Route: /blocks/404-pages
Tags: 404, empty state, routing
Variants: Search fallback, Editorial fallback, Support fallback
Source: available via get/info surfaces

## About Page Example
Surface: marketing
Kind: page
Audience: Company pages, hiring surfaces, and partner intros
Route: /blocks/about-page
Tags: about page, company
Variants: Story-led company page, Proof-led company page
Source: available via get/info surfaces

## Banners
Surface: marketing
Kind: block
Audience: Campaign launches, product updates, and docs announcements
Route: /blocks/banners
Tags: banner, announcement, campaign
Variants: Announcement bar, Upgrade banner, Launch countdown
Source: available via get/info surfaces

## Bento Grids
Surface: marketing
Kind: block
Audience: Homepage middle sections and feature overviews
Route: /blocks/bento-grids
Tags: bento, grid, marketing
Variants: Narrative mosaic, Metric matrix, Media mosaic
Source: available via get/info surfaces

## Blog Sections
Surface: marketing
Kind: block
Audience: Content hubs, homepages, and changelog surfaces
Route: /blocks/blog-sections
Tags: blog, content, editorial
Variants: Feature story row, Article grid, Update rail
Source: available via get/info surfaces

## Case Study Metric Cards
Surface: marketing
Kind: block
Audience: Case study pages, customer stories, and social proof sections
Route: /blocks/case-study-metrics
Tags: marketing, social-proof, metrics, case-study
Variants: Single metric callout, Multi-metric row, Customer quote card
Source: available via get/info surfaces

## Contact Sections
Surface: marketing
Kind: block
Audience: Sales, support, and company pages
Route: /blocks/contact-sections
Tags: contact, support, sales
Variants: Sales contact, Support split, Office hours
Source: available via get/info surfaces

## Content Sections
Surface: marketing
Kind: block
Audience: Documentation fronts, product essays, and company narratives
Route: /blocks/content-sections
Tags: content, editorial, layout
Variants: Two-column story, Editorial stack, Proof + narrative
Source: available via get/info surfaces

## CTA Sections
Surface: marketing
Kind: block
Audience: Pricing, comparison, and campaign landing pages
Route: /blocks/cta-sections
Tags: cta, conversion, marketing
Variants: End-cap band, Split CTA, Proof CTA
Source: available via get/info surfaces

## FAQs
Surface: marketing
Kind: block
Audience: Pricing, launch, docs, and product marketing pages
Route: /blocks/faqs
Tags: faq, accordion, support
Variants: Accordion FAQ, Split FAQ, Editorial FAQ
Source: available via get/info surfaces

## Feature Sections
Surface: marketing
Kind: block
Audience: Product marketing pages and roadmap explainers
Route: /blocks/feature-sections
Tags: features, grid, marketing
Variants: Capability Grid, Narrative Pairing, Checklist Stack
Source: available via get/info surfaces

## Flyout Menus
Surface: marketing
Kind: block
Audience: Marketing nav bars and docs top-level navigation
Route: /blocks/flyout-menus
Tags: menu, flyout, navigation
Variants: Product flyout, Resource flyout, Action flyout
Source: available via get/info surfaces

## Footers
Surface: marketing
Kind: block
Audience: All public marketing and docs surfaces
Route: /blocks/footers
Tags: footer, navigation, site
Variants: Compact footer, Multi-column footer, CTA footer
Source: available via get/info surfaces

## Header Sections and Headers
Surface: marketing
Kind: block
Audience: Landing pages, docs fronts, and marketing pages
Route: /blocks/header-sections
Tags: header, page-header, marketing
Variants: Section header, Editorial header, Launch header
Source: available via get/info surfaces

## Hero Sections
Surface: marketing
Kind: block
Audience: Launch pages, campaign landers, and homepage refreshes
Route: /blocks/hero-sections
Tags: hero, marketing, cta
Variants: Signal Split, Launch Banner, Editorial Hero
Source: available via get/info surfaces

## Interactive Hero Card Selector
Surface: marketing
Kind: block
Audience: Product landing pages and persona-targeted homepages
Route: /blocks/hero-card-selector
Tags: hero, marketing, interactive, cards
Variants: Intent cards grid, Hover/selected states
Source: available via get/info surfaces

## Landing Page Example
Surface: marketing
Kind: page
Audience: Product launches and demand-generation pages
Route: /blocks/landing-page
Tags: landing page, marketing page
Variants: Launch story, Product overview
Source: available via get/info surfaces

## Logo Clouds
Surface: marketing
Kind: block
Audience: Homepages, pricing pages, and proof sections
Route: /blocks/logo-clouds
Tags: logos, proof, brands
Variants: Trust strip, Statement cloud, Segmented cloud
Source: available via get/info surfaces

## Newsletter Sections
Surface: marketing
Kind: block
Audience: Content programs, changelogs, and community pages
Route: /blocks/newsletter-sections
Tags: newsletter, signup, content
Variants: Inline subscribe, Editorial signup, Sidebar opt-in
Source: available via get/info surfaces

## Pricing Page Example
Surface: marketing
Kind: page
Audience: Pricing surfaces and upgrade paths
Route: /blocks/pricing-page
Tags: pricing page, plans
Variants: Self-serve first, Comparison-first
Source: available via get/info surfaces

## Pricing Sections
Surface: marketing
Kind: block
Audience: Pricing pages and upgrade flows
Route: /blocks/pricing-sections
Tags: pricing, plans, comparison
Variants: Plan grid, Comparison ladder, Enterprise split
Source: available via get/info surfaces

## Role-Based Flip Cards
Surface: marketing
Kind: block
Audience: B2B marketing pages and product positioning sections
Route: /blocks/role-flip-cards
Tags: marketing, interactive, personas, cards
Variants: Role card grid, Hover flip, Click flip
Source: available via get/info surfaces

## Split-Screen Signup
Surface: marketing
Kind: block
Audience: SaaS signup pages and trial registration flows
Route: /blocks/split-screen-signup
Tags: signup, marketing, auth, forms
Variants: Email signup, Google SSO variant
Source: available via get/info surfaces

## Stats
Surface: marketing
Kind: block
Audience: Landing pages, PR pages, and customer proof sections
Route: /blocks/stats
Tags: stats, metrics, proof
Variants: Hero stats, Section stats, Card stats
Source: available via get/info surfaces

## Tabbed Video Feature Showcase
Surface: marketing
Kind: block
Audience: Product marketing pages and feature tour sections
Route: /blocks/tabbed-video-showcase
Tags: features, marketing, video, tabs
Variants: Horizontal tabs with video, Vertical tabs with video
Source: available via get/info surfaces

## Team Sections
Surface: marketing
Kind: block
Audience: About pages, hiring surfaces, and investor-facing pages
Route: /blocks/team-sections
Tags: team, about, people
Variants: Leadership grid, Editorial bios, Compact team list
Source: available via get/info surfaces

## Testimonials
Surface: marketing
Kind: block
Audience: Landing pages, pricing pages, and case-study hubs
Route: /blocks/testimonials
Tags: testimonials, quotes, customers
Variants: Quote grid, Hero quote, Customer reel
Source: available via get/info surfaces

### starter

## Agency Starter
Surface: starter
Kind: starter
Audience: Studios, agencies, and client-service teams
Route: /templates/agency-starter
Tags: starter, agency, marketing
Variants: Case-study agency, Boutique studio
Source: available via get/info surfaces

## Changelog Starter
Surface: starter
Kind: starter
Audience: Product changelogs and update hubs
Route: /templates/changelog-starter
Tags: starter, changelog, content
Variants: Release notes, Launch recap
Source: available via get/info surfaces

## Conference / Event Starter
Surface: starter
Kind: starter
Audience: Conferences, summits, and brand events
Route: /templates/conference-event-starter
Tags: starter, conference, events
Variants: Registration-first, Agenda-first
Source: available via get/info surfaces

## Course / Education Starter
Surface: starter
Kind: starter
Audience: Educators, cohort programs, and learning products
Route: /templates/course-education-starter
Tags: starter, education, course
Variants: Cohort launch, Curriculum-first
Source: available via get/info surfaces

## Documentation / API Starter
Surface: starter
Kind: starter
Audience: Developer docs and product documentation sites
Route: /templates/documentation-api-starter
Tags: starter, docs, api
Variants: API docs, Guides docs
Source: available via get/info surfaces

## Ecommerce Starter
Surface: starter
Kind: starter
Audience: DTC storefronts and commerce launches
Route: /templates/ecommerce-starter
Tags: starter, ecommerce, storefront
Variants: Campaign storefront, Always-on storefront
Source: available via get/info surfaces

## Personal Starter
Surface: starter
Kind: starter
Audience: Personal brands, consultants, and creators
Route: /templates/personal-starter
Tags: starter, personal, marketing
Variants: Portfolio-led, Editorial profile
Source: available via get/info surfaces

## Podcast / Content Starter
Surface: starter
Kind: starter
Audience: Editorial brands, podcasts, and community media
Route: /templates/podcast-content-starter
Tags: starter, podcast, content
Variants: Show-led, Editorial media
Source: available via get/info surfaces

## SaaS Starter
Surface: starter
Kind: starter
Audience: B2B SaaS products and team workspaces
Route: /templates/saas-starter
Tags: starter, saas, application
Variants: Launch workspace, Ops console
Source: available via get/info surfaces

### starter-kit

## Auth Layout
Surface: starter-kit
Kind: kit
Audience: Account access flows in apps and starters
Route: /starter-kit/auth-layout
Tags: starter kit, auth
Variants: Sign-in shell, Invite acceptance
Source: available via get/info surfaces

## Corporate Travel
Surface: starter-kit
Kind: kit
Audience: Teams building corporate travel and expense management products
Route: /starter-kit/corporate-travel
Tags: starter kit, travel, operations, expense, admin
Variants: Travel Dashboard Home, Flight Search & Results, Hotel Search & Results, Booking Checkout, Trip Itinerary, Expense Dashboard, Receipt Submission, Admin Analytics, Traveler Map, Policy Configuration, Approval Queue, Settings & Integrations
Source: available via get/info surfaces

## Profile Summary
Surface: starter-kit
Kind: kit
Audience: Profile pages, billing owners, and workspace settings
Route: /starter-kit/profile-summary
Tags: starter kit, profile, description list
Variants: Workspace summary, Profile summary
Source: available via get/info surfaces

## Settings Groups
Surface: starter-kit
Kind: kit
Audience: Workspace and account settings screens
Route: /starter-kit/settings-groups
Tags: starter kit, settings, fieldset
Variants: Notification group, Billing group
Source: available via get/info surfaces

## Starter Kit Overview
Surface: starter-kit
Kind: kit
Audience: Teams building account, settings, and workspace flows
Route: /starter-kit/starter-kit-overview
Tags: starter kit, overview
Variants: Account base kit
Source: available via get/info surfaces

## Type Scale
Surface: starter-kit
Kind: kit
Audience: All starters and account-facing surfaces
Route: /starter-kit/type-scale
Tags: starter kit, typography
Variants: Page rhythm, Card rhythm
Source: available via get/info surfaces