UI component contracts
This private reference is generated from registry/component-manifest.mjs. Edit the manifest, then run pnpm ui:artifacts:generate; do not edit this file.
VAccordion
- Category: disclosure
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, focus, open, disabled, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
type | 'single' | 'multiple' | No | — | Controls single or multiple expanded items; the UI Kit wrapper does not supply a default. |
Accessibility: Expose the native or Reka control role and state attributes. The control requires visible text or an explicit accessible name.
Member deprecations:
None.
VAlert
- Category: feedback
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, overflow
- Themes: light, dark
- Densities: default, compact
- Slots:
title,description,default - Emits:
click(void)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
variant | 'error' | 'success' | 'info' | 'warning' | No | undefined | Selects the alert treatment. |
buttonText | string | No | undefined | Adds the branded alert action button. |
Accessibility: Preserve the native or Reka-provided semantic role. Visible text or an explicit accessible label is required.
Member deprecations:
None.
VAvatar
- Category: identity
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, loading
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
size | 'x-large' | 'large' | 'medium' | 'small' | 'x-small' | No | 'medium' | Controls avatar dimensions. |
shape | 'circle' | 'square' | No | 'circle' | Controls avatar geometry. |
Accessibility: Preserve the native or Reka-provided semantic role. Visible text or an explicit accessible label is required.
Member deprecations:
None.
VBadge
- Category: status
- Status: primitive
- Owner: packages/ui-kit
- Supported states: default, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
size | 'medium' | 'small' | No | 'medium' | Controls badge density. |
color | 'primary' | 'secondary' | 'secondary-light' | 'red' | 'yellow' | 'red-light' | 'yellow-light' | 'purple-light' | 'default' | No | undefined | Selects the legacy badge color treatment. |
as | string | No | 'span' | Selects the rendered element. |
Accessibility: Preserve the native or Reka-provided semantic role. Visible text or an explicit accessible label is required.
Member deprecations:
None.
VBreadcrumb
- Category: navigation
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, focus, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| — | — | — | — | No component-level props are recorded; use composed child contracts. |
Accessibility: Render breadcrumb navigation with an ordered path and current-page marker. The control requires visible text or an explicit accessible name.
Member deprecations:
None.
VButton
- Category: action
- Status: primitive
- Owner: packages/ui-kit
- Supported states: default, focus, loading, disabled, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
variant | ButtonVariant | No | 'default' | Visual action hierarchy. |
size | ButtonSize | No | 'medium' | Controls action height and spacing. |
color | ButtonColor | No | 'primary' | Selects the legacy color treatment. |
loading | boolean | No | false | Announces and renders pending state. |
disabled | boolean | No | false | Prevents activation. |
Accessibility: Expose the native or Reka control role and state attributes. The control requires visible text or an explicit accessible name.
Member deprecations:
variant=tetriary→variant="tertiary": Replace the misspelled tetriary value with tertiary; the alias remains supported until the consumer graph reaches zero.
VCalendar
- Category: date-input
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, focus
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits:
update:modelValue(DateValue | undefined),update:placeholder(DateValue)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
modelValue | DateValue | No | undefined | Selected date value. |
placeholder | DateValue | Yes | — | Required date used to select the visible month. |
layout | 'default' | 'month-and-year' | No | 'default' | Controls header layout. |
locale | string | No | 'en-US' | Formats month names. |
Accessibility: Expose the native or Reka control role and state attributes. The control requires visible text or an explicit accessible name.
Member deprecations:
None.
VCard
- Category: layout
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
href | string | No | undefined | Optional card link URL. |
to | unknown | No | undefined | Optional router destination. |
linkIs | string | No | 'a' | Element used for the card overlay link. |
variant | 'primary' | 'secondary' | 'ghost' | No | undefined | Selects the card treatment. |
Accessibility: Preserve the native or Reka-provided semantic role. Visible text or an explicit accessible label is required.
Member deprecations:
None.
VCarousel
- Category: content
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, focus, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| — | — | — | — | No component-level props are recorded; use composed child contracts. |
Accessibility: Expose the native or Reka control role and state attributes. The control requires visible text or an explicit accessible name.
Member deprecations:
None.
VCollapsible
- Category: disclosure
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, focus, open, disabled, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits:
update:open(boolean)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
open | boolean | No | undefined | Controlled expanded state. |
Accessibility: Expose the native or Reka control role and state attributes. The control requires visible text or an explicit accessible name.
Member deprecations:
None.
VCommand
- Category: command-menu
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, focus, disabled, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits:
update:modelValue(AcceptableValue)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
modelValue | AcceptableValue | No | undefined | Selected command value. |
Accessibility: Expose the native or Reka control role and state attributes. The control requires visible text or an explicit accessible name.
Member deprecations:
None.
VDialog
- Category: overlay
- Status: primitive
- Owner: packages/ui-kit
- Supported states: default, focus, open, disabled, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits:
update:open(boolean)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
open | boolean | No | undefined | Controlled dialog state. |
Accessibility: Expose dialog semantics, modal state and a labelled content surface. A title labels the overlay; a description supplies supporting context.
Member deprecations:
None.
VDropdownMenu
- Category: menu
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, focus, open, disabled, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| — | — | — | — | No component-level props are recorded; use composed child contracts. |
Accessibility: Expose the native or Reka control role and state attributes. The control requires visible text or an explicit accessible name.
Member deprecations:
None.
VForm
- Category: form
- Status: primitive
- Owner: packages/ui-kit
- Supported states: default, focus, disabled, invalid, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
sendLoading | boolean | No | false | Marks a form submission as pending. |
sendSuccess | boolean | No | false | Marks a form submission as successful. |
keepLoadingSendOnSuccess | boolean | No | false | Keeps the pending slot state active after success. |
Accessibility: Use native form, label, input and error relationships. Every field requires a programmatic label; errors must be described by the control.
Member deprecations:
None.
VImage
- Category: media
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, loading
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits:
loading:src(boolean)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
src | string | undefined | Yes | — | Image URL. |
alt | string | Yes | — | Text alternative. |
isLoading | boolean | No | false | Forces the loading placeholder. |
Accessibility: Preserve the native or Reka-provided semantic role. Visible text or an explicit accessible label is required.
Member deprecations:
None.
VMoreActions
- Category: menu
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, focus, open, disabled, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits:
select(VMoreActionsItem)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
items | VMoreActionsItem[] | Yes | — | Available actions. |
Accessibility: Expose the native or Reka control role and state attributes. The control requires visible text or an explicit accessible name.
Member deprecations:
None.
VNavigationMenu
- Category: navigation
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, focus, open, disabled, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| — | — | — | — | No component-level props are recorded; use composed child contracts. |
Accessibility: Expose the native or Reka control role and state attributes. The control requires visible text or an explicit accessible name.
Member deprecations:
None.
VPopover
- Category: overlay
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, focus, open, disabled, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits:
update:open(boolean)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
open | boolean | No | undefined | Controlled popover state. |
Accessibility: Expose the native or Reka control role and state attributes. The control requires visible text or an explicit accessible name.
Member deprecations:
None.
VProgress
- Category: feedback
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, loading
- Themes: light, dark
- Densities: default, compact
- Slots:
top-start,top-end - Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
modelValue | number | null | No | 0 | Current progress value. |
withText | boolean | No | false | Displays the percentage label. |
Accessibility: Expose progressbar value semantics. Provide an accessible label in context.
Member deprecations:
None.
VSeparator
- Category: layout
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
orientation | 'horizontal' | 'vertical' | No | 'horizontal' | Separator axis. |
Accessibility: Expose a decorative or semantic separator as configured. No label is required for decorative separators.
Member deprecations:
None.
VSheet
- Category: overlay
- Status: primitive
- Owner: packages/ui-kit
- Supported states: default, focus, open, disabled, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits:
update:open(boolean)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
open | boolean | No | undefined | Controlled sheet state. |
Accessibility: Expose dialog semantics, modal state and a labelled content surface. A title labels the overlay; a description supplies supporting context.
Member deprecations:
None.
VSidebar
- Category: navigation
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, focus, open, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
side | 'left' | 'right' | No | provider value | Sidebar edge, inherited from the provider when omitted. |
collapsible | 'offcanvas' | 'icon' | 'none' | No | provider value | Collapse behavior, inherited from the provider when omitted. |
Accessibility: Expose a labelled navigation or complementary landmark. The control requires visible text or an explicit accessible name.
Member deprecations:
None.
VSkeleton
- Category: feedback
- Status: primitive
- Owner: packages/ui-kit
- Supported states: default, loading
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
isLoaded | boolean | No | false | Reveals slotted content after loading. |
animation | 'wave' | false | No | 'wave' | Controls the loading animation. |
width | string | No | '100%' | Controls placeholder width. |
height | string | No | '20px' | Controls placeholder height. |
Accessibility: Remain non-interactive and hidden from the accessibility tree when decorative. The loading region, not each skeleton, announces pending state.
Member deprecations:
None.
VSpinner
- Category: feedback
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, loading
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
show | boolean | Yes | — | Controls visibility. |
small | boolean | No | false | Uses the compact spinner size. |
Accessibility: The containing region exposes busy state. Provide loading text in the containing region.
Member deprecations:
None.
VStepper
- Category: navigation
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, focus, disabled, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits:
update:modelValue(number | undefined)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
modelValue | number | No | undefined | Active step. |
Accessibility: Expose the native or Reka control role and state attributes. The control requires visible text or an explicit accessible name.
Member deprecations:
None.
VSvgIcon
- Category: icon
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
icon | Component | string | No | undefined | SVG component or supported asset path. |
iconSize | string | No | '16px' | Controls rendered width and height. |
iconColor | string | No | undefined | Controls inherited SVG color. |
Accessibility: Decorative icons are hidden; meaningful icons require an accessible name. Prefer adjacent visible text for action icons.
Member deprecations:
None.
VSwitch
- Category: form-control
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, focus, disabled
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits:
update:modelValue(boolean)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
modelValue | boolean | null | No | undefined | Controlled checked state. |
Accessibility: Expose the native or Reka control role and state attributes. The control requires visible text or an explicit accessible name.
Member deprecations:
None.
VTable
- Category: data-display
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
size | 'large' | 'regular' | 'small' | No | undefined | Controls table density. |
Accessibility: Use native table structure with header and data-cell relationships. Provide a caption or nearby heading for non-trivial data tables.
Member deprecations:
None.
VTabs
- Category: navigation
- Status: primitive
- Owner: packages/ui-kit
- Supported states: default, focus, disabled, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits:
update:modelValue(string | number)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
modelValue | string | number | No | undefined | Controlled active tab. |
variant | 'primary' | 'secondary' | No | 'primary' | Selects the tab treatment. |
fullWidth | boolean | No | false | Expands the tab root to its container. |
Accessibility: Expose the native or Reka control role and state attributes. The control requires visible text or an explicit accessible name.
Member deprecations:
None.
VTimeline
- Category: data-display
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
title | string | No | undefined | Timeline heading. |
Accessibility: Preserve the native or Reka-provided semantic role. Visible text or an explicit accessible label is required.
Member deprecations:
None.
VToast
- Category: feedback
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
variant | 'error' | 'success' | 'info' | No | 'info' | Feedback severity. |
Accessibility: Use an appropriate live-region role without stealing focus. A title or description communicates the result.
Member deprecations:
None.
VToggleGroup
- Category: form-control
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, focus, disabled, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits:
update:modelValue(string)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
modelValue | string | Yes | — | Selected option value; an empty string represents no direct-signup selection. |
options | readonly ToggleGroupOption[] | Yes | — | Single-select options with visible labels and optional descriptions. |
label | string | Yes | — | Accessible group label. |
disabled | boolean | No | false | Prevents selection changes. |
Accessibility: Expose a labelled radiogroup with one radio selected at most. The group requires a visible and programmatic label; every option has visible text.
Member deprecations:
None.
VTooltip
- Category: overlay
- Status: compatibility
- Owner: packages/ui-kit
- Supported states: default, focus, open, disabled, overflow
- Themes: light, dark
- Densities: default, compact
- Slots: None
- Emits: None
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| — | — | — | — | No component-level props are recorded; use composed child contracts. |
Accessibility: Associate tooltip content with its trigger using description semantics. Tooltip text supplements, but does not replace, the trigger accessible name.
Member deprecations:
None.