opui-css 5.4.3 → 6.0.0-rc.2

package/skills/opui/references/index.md

@@ -0,0 +1,105 @@
+# References
+
+Guides: `getting-started.md` (setup, with a section per framework), `theming.md` (colors, scopes, density, spacing, corners, fonts, elevation, motion and contrast) and `customizing.md` (the `theme.custom` layer and component properties).
+
+Each component reference covers HTML, Astro, React, Svelte and Vue: the parts, props, classes, slots and notes they share, the component properties and theme tokens, then a section per framework with its import line, slots, hydration and an example.
+
+| Component | File | Description |
+| --- | --- | --- |
+| Accordion | `accordion.md` | Lets you show and hide content, on its own or as a group. |
+| Anchor | `anchor.md` | Places floating content next to an element with CSS anchor positioning. |
+| Avatar | `avatar.md` | Avatars show a person or entity as an image, initials or icon. |
+| Badge | `badge.md` | Badges attach a small count or status dot to another element. |
+| Button | `button.md` | Buttons allow users to take actions with a single tap. |
+| Callout | `callout.md` | A message in the flow of the page, without interrupting the task. |
+| Card | `card.md` | A surface for related content and actions. |
+| Carousel | `carousel.md` | A scrolling list with snap points, buttons and markers. |
+| Checkbox | `checkbox.md` | Choices submitted with a form. For a setting that applies right away, use a Switch. |
+| Chip | `chip.md` | Filters, tags and choices. For the main action, use a Button. |
+| Control group | `control-group.md` | Related buttons and fields joined into one control, like a split button, a search field with its button, or a currency and an amount. |
+| Copy | `copy.md` | A button that copies text or a field's value to the clipboard. |
+| Description list | `description-list.md` | Description lists are used to display a list of terms and their descriptions. |
+| Dialog | `dialog.md` | A minimally styled window overlaid on the main content. By design the Dialog is minimal with zero content to allow for both modal and non-modal use. |
+| Divider | `divider.md` | A line between content: an hr, or a label with a line on both sides, at the start, the middle or the end. |
+| Drawer | `drawer.md` | Slides in from an edge of the screen. For a task that needs full attention, use a Dialog. |
+| Form | `form.md` | Spacing and grouping for form fields. |
+| Layout | `layout.md` | Classes for the space between components. Put them on wrappers. Gaps follow the --ui-space-* scale. |
+| List | `list.md` | Lists are continuous, vertical indexes of text and images and video. Use lists to help users find a specific item and act on it. |
+| Menu | `menu.md` | A popover list of actions or links. |
+| Message | `message.md` | Chat bubbles that group by sender, with attachments, reactions and a typing indicator. |
+| Number field | `number-field.md` | A number field with buttons that step the value down and up, for amounts like a quantity. |
+| One-time code | `one-time-code.md` | A one-time password (OTP) field: one input drawn as a box per character, with paste and SMS autofill. |
+| Progress | `progress.md` | A progress bar on the native progress element, for a task that reports how far along it is, or one that doesn't. |
+| Radio | `radio.md` | Radio buttons on the native radio input, for picking one option from a few, with sizes, cards and an invalid state. |
+| Range | `range.md` | Range lets users pick a number by sliding a thumb along a track. |
+| Rating | `rating.md` | A star rating: a meter that shows a score, or radios that collect one. |
+| Select | `select.md` | Pick a value in a form. For actions, use a Menu. |
+| Spinner | `spinner.md` | A spinner on any element with aria-busy="true", for content that is loading, in every size. |
+| Stat | `stat.md` | A stat shows one number with its label and the change behind it. |
+| Stepper | `stepper.md` | Shows where someone is in a flow of steps, such as a checkout. |
+| Switch | `switch.md` | A setting that applies right away. For choices submitted with a form, use a Checkbox. |
+| Table | `table.md` | Displays tabular data. Basic tables with row and column headers, and optional captions and footers. |
+| Tabs | `tabs.md` | Radio inputs that switch panels. To pick an option, use a Toggle group. |
+| Text field | `text-field.md` | An input for single-line text data. Basic text fields with labels, field descriptions, and validation states. |
+| Textarea | `textarea.md` | An input for multi-line text data. Basic textareas with labels, supporting text, and validation states. |
+| Timeline | `timeline.md` | A list of dated events with markers and a connecting line. |
+| Toast | `toast.md` | Short messages that confirm an action and dismiss themselves. |
+| Toggle | `toggle.md` | Toggle buttons and toggle groups switch options on and off, alone or as a set. |
+| Tooltip | `tooltip.md` | A short label or hint for a control, shown on hover, focus or a long press. |
+| Typography | `typography.md` | Text styles: classes on single elements, or .ui-rich-text around content. |
+
+Components documented on another component's page:
+
+| Component | File |
+| --- | --- |
+| AccordionActions | `accordion.md` |
+| AccordionContent | `accordion.md` |
+| AccordionSummary | `accordion.md` |
+| AnchorContent | `anchor.md` |
+| AvatarGroup | `avatar.md` |
+| CalloutActions | `callout.md` |
+| CalloutContent | `callout.md` |
+| CalloutIcon | `callout.md` |
+| CardActions | `card.md` |
+| CardContent | `card.md` |
+| CardHeader | `card.md` |
+| CheckboxInput | `checkbox.md` |
+| DescriptionListDescription | `description-list.md` |
+| DescriptionListItem | `description-list.md` |
+| DescriptionListTerm | `description-list.md` |
+| DialogContent | `dialog.md` |
+| DialogFooter | `dialog.md` |
+| DialogHeader | `dialog.md` |
+| DialogTitle | `dialog.md` |
+| DrawerContent | `drawer.md` |
+| DrawerFooter | `drawer.md` |
+| DrawerHeader | `drawer.md` |
+| DrawerTitle | `drawer.md` |
+| FieldDescription | `form.md` |
+| FieldGroup | `form.md` |
+| FieldLegend | `form.md` |
+| Fieldset | `form.md` |
+| ListItem | `list.md` |
+| Messages | `message.md` |
+| RadioInput | `radio.md` |
+| SelectAll | `checkbox.md` |
+| SortableTable | `table.md` |
+| StepperItem | `stepper.md` |
+| SwitchInput | `switch.md` |
+| TableBody | `table.md` |
+| TableCaption | `table.md` |
+| TableCell | `table.md` |
+| TableColumn | `table.md` |
+| TableColumnGroup | `table.md` |
+| TableFoot | `table.md` |
+| TableHead | `table.md` |
+| TableHeaderCell | `table.md` |
+| TableRow | `table.md` |
+| TabsItem | `tabs.md` |
+| TabsLabel | `tabs.md` |
+| TabsPanel | `tabs.md` |
+| TimelineItem | `timeline.md` |
+| Toaster | `toast.md` |
+| ToggleButton | `toggle.md` |
+| ToggleGroup | `toggle.md` |
+| TooltipContent | `tooltip.md` |

package/skills/opui/references/layout.md

@@ -0,0 +1,173 @@
+# Layout
+
+Classes for the space between components. Put them on wrappers. Gaps follow the --ui-space-* scale.
+
+- CSS: `opui-css/css/components/layout.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/layout.md), [Astro](https://open-props-ui.netlify.app/astro/components/layout.md), [React](https://open-props-ui.netlify.app/react/components/layout.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/layout.md), [Vue](https://open-props-ui.netlify.app/vue/components/layout.md).
+
+## Layout (CSS only)
+
+### Parts
+
+- `.ui-layout-column, .ui-layout-row, .ui-layout-grid, .ui-layout-columns, .ui-layout-media, .ui-layout-container` (root): Any element. The classes only set its layout.
+
+### Classes
+
+- Alignment: `center` (`.ui-align-center`), `end` (`.ui-align-end`), `start` (default). Where `.ui-layout-row` puts its children along the row, and where `.ui-layout-column` lines up its children and their text.
+- Breakpoint: `large` (`.ui-breakpoint-large`), `medium` (default), `small` (`.ui-breakpoint-small`). The container width at which `.ui-layout-columns` goes from one column to `--_columns`: `40rem`, `56rem` or `72rem`.
+- Column: `.ui-layout-column`. A column with even space between its children.
+- Columns: `.ui-layout-columns`. One column that becomes the `--_columns` tracks at the breakpoint, measured on the nearest container, such as `.ui-layout-container`.
+- Container: `.ui-layout-container`. Centers its content, caps its width and is the container `.ui-layout-columns` measures.
+- Divided: `.ui-divided`. Draws a line in the middle of each gap of `.ui-layout-column`, `.ui-layout-row`, `.ui-layout-grid` and `.ui-layout-columns`, only between two children, so a wrapped row or the short last row of a grid starts and ends without one. Browsers without gap decorations leave the gap without the line.
+- Grid: `.ui-layout-grid`. Columns that fill the width and wrap. On a `ul` or `ol` it also drops the list bullets and margins, and a `.ui-card` in each `li` fills its cell.
+- Media: `.ui-layout-media`. A media object: a fixed-size start, such as an avatar, next to text that fills the rest and wraps instead of widening the row.
+- Row: `.ui-layout-row`. A wrapping row with its children centered on one line. On a `ul` or `ol` it also drops the list bullets and margins.
+- Sizes: `large` (`.ui-large`), `medium` (default), `small` (`.ui-small`), `x-small` (`.ui-x-small`). The space between children of `.ui-layout-column`, `.ui-layout-row`, `.ui-layout-grid`, `.ui-layout-columns` and `.ui-layout-media`.
+- Spread: `.ui-spread`. Pushes the children of `.ui-layout-row` to its two ends, for a page header with a heading group and its actions.
+- Sticky: `.ui-sticky`. On a child of `.ui-layout-columns`, keeps it in view at `--_sticky-inset` from the top while the other column scrolls, once the columns sit side by side.
+- Stretch: `.ui-stretch`. Stretches the columns of `.ui-layout-grid` over the row when there are fewer children than fit, instead of leaving the rest empty.
+
+### Notes
+
+- Astro and Vue: Add the classes to elements in your templates.
+- React and Svelte: Add the classes to elements in your markup.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### layout.css
+
+- `--_columns`: The `grid-template-columns` of `.ui-layout-columns` from its breakpoint on, such as `3fr 2fr` or `15rem 1fr`. Defaults to `1fr 1fr`.
+- `--_divider-border-color`: Color of the lines `.ui-divided` draws between the children. Defaults to `--ui-border-color`.
+- `--_gap`: Space between the children of `.ui-layout-column`, `.ui-layout-row`, `.ui-layout-grid`, `.ui-layout-columns` and `.ui-layout-media`. Defaults to `--ui-space-3`, set by the size classes.
+- `--_justify-content`: How `.ui-layout-row` distributes its children along the row, such as `space-evenly`. `.ui-align-center`, `.ui-align-end` and `.ui-spread` set it.
+- `--_max-columns`: Most columns `.ui-layout-grid` makes, such as `3`. Defaults to `infinity`, as many as fit at `--_min-inline-size`.
+- `--_max-inline-size`: Maximum width of `.ui-layout-container`.
+- `--_min-inline-size`: Narrowest column of `.ui-layout-grid`. Columns are added while they fit at this width.
+- `--_padding-inline`: Inline padding of `.ui-layout-container`. Defaults to `--ui-space-4`.
+- `--_sticky-inset`: Distance from the top at which a `.ui-sticky` column of `.ui-layout-columns` sticks. Defaults to `--ui-space-4`.
+
+Outputs: `--_auto-repeat`.
+
+## Theme tokens
+
+The stylesheets read `--ui-border-color`, `--ui-border-width`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-space-4` and `--ui-space-5`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Column
+
+```html
+<div class="ui-layout-column">
+  <div class="ui-card ui-outlined">
+    <div class="ui-content">Review the pricing page</div>
+  </div>
+  <div class="ui-card ui-outlined">
+    <div class="ui-content">Update the onboarding emails</div>
+  </div>
+  <div class="ui-card ui-outlined">
+    <div class="ui-content">Write the release notes</div>
+  </div>
+</div>
+```
+
+## Astro
+
+There is no Astro component. Use the classes in your markup.
+
+### Example: Column
+
+```astro
+---
+import { Card, CardContent } from "opui-css/astro"
+---
+
+<div class="ui-layout-column">
+  <Card variant="outlined">
+    <CardContent>Review the pricing page</CardContent>
+  </Card>
+  <Card variant="outlined">
+    <CardContent>Update the onboarding emails</CardContent>
+  </Card>
+  <Card variant="outlined">
+    <CardContent>Write the release notes</CardContent>
+  </Card>
+</div>
+```
+
+## React
+
+There is no React component. Use the classes in your markup.
+
+### Example: Column
+
+```tsx
+import { Card, CardContent } from "opui-css/react"
+
+export default function Column() {
+  return (
+    <div className="ui-layout-column">
+      <Card variant="outlined">
+        <CardContent>Review the pricing page</CardContent>
+      </Card>
+      <Card variant="outlined">
+        <CardContent>Update the onboarding emails</CardContent>
+      </Card>
+      <Card variant="outlined">
+        <CardContent>Write the release notes</CardContent>
+      </Card>
+    </div>
+  )
+}
+```
+
+## Svelte
+
+There is no Svelte component. Use the classes in your markup.
+
+### Example: Column
+
+```svelte
+<script lang="ts">
+  import { Card, CardContent } from "opui-css/svelte"
+</script>
+
+<div class="ui-layout-column">
+  <Card variant="outlined">
+    <CardContent>Review the pricing page</CardContent>
+  </Card>
+  <Card variant="outlined">
+    <CardContent>Update the onboarding emails</CardContent>
+  </Card>
+  <Card variant="outlined">
+    <CardContent>Write the release notes</CardContent>
+  </Card>
+</div>
+```
+
+## Vue
+
+There is no Vue component. Use the classes in your markup.
+
+### Example: Column
+
+```vue
+<script setup lang="ts">
+import { Card, CardContent } from "opui-css/vue"
+</script>
+
+<template>
+  <div class="ui-layout-column">
+    <Card variant="outlined">
+      <CardContent>Review the pricing page</CardContent>
+    </Card>
+    <Card variant="outlined">
+      <CardContent>Update the onboarding emails</CardContent>
+    </Card>
+    <Card variant="outlined">
+      <CardContent>Write the release notes</CardContent>
+    </Card>
+  </div>
+</template>
+```

package/skills/opui/references/list.md

@@ -0,0 +1,218 @@
+# List
+
+Lists are continuous, vertical indexes of text and images and video. Use lists to help users find a specific item and act on it.
+
+- CSS: `opui-css/css/components/list.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/list.md), [Astro](https://open-props-ui.netlify.app/astro/components/list.md), [React](https://open-props-ui.netlify.app/react/components/list.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/list.md), [Vue](https://open-props-ui.netlify.app/vue/components/list.md).
+
+## List
+
+### Parts
+
+- `ul.ui-list` (root): Container element.
+- `<li>` (`ListItem`): A list item.
+
+### Props and modifiers
+
+- `bordered`: `boolean`, `.ui-bordered`. Adds a border between list items.
+- `dense`: `boolean`, `.ui-dense`. Packs the items tighter.
+- `flush`: `boolean`, `.ui-flush`. Removes the inline padding of the items and the block padding of the list.
+- `variant`: `"filled"` (default), `"tonal"` (`.ui-tonal`), `"transparent"` (`.ui-transparent`). The variant to use. The default `filled` list uses the filled surface.
+
+### Slots
+
+- `default`: The list items.
+
+## ListItem
+
+### Parts
+
+- `<li>` (root): The list item.
+- `<a>, <button>, <label>` (prop `as`, prop `href`, prop `type`): The clickable row, rendered by `as`, `href` or `type`.
+- `.ui-start` (slot `start`): Optional content at the start, such as an icon or avatar.
+- `.ui-text`: The text content.
+- `<p>` (prop `label`, slot `label`): The label, the first paragraph.
+- `<p>` (prop `description`, slot `description`): Supporting text, the second paragraph.
+- `.ui-end` (slot `end`): Optional content at the end, such as a value or an action.
+
+### Props and modifiers
+
+- `as`: `"a" | "button"`. The element to render inside the `<li>`: `"a"` or `"button"`. Defaults to `"a"` when `href` is set, and to nothing otherwise, so a static item is a bare `<li>`. A `<button>` gets `type="button"`.
+- `borderTop`: `boolean`, `.ui-border-top`. Adds a border above the item.
+- `color`: `"critical"` (`.ui-critical`). Optional colors. `critical` marks a destructive item in a [Menu](/components/menu).
+- `disabled`: `boolean`. Disables a button item. A link item drops its `href` and gets `role="link"` and `aria-disabled="true"` instead.
+- `for` (Astro, Svelte and Vue): `string`. The `for` attribute of the `<label>` when `type` is set.
+- `href`: `string`. The link to use. Renders an `<a>` inside the `<li>`.
+- `htmlFor` (React): `string`. The `for` attribute of the `<label>` when `type` is set, as `htmlFor` like on the element.
+- `inset`: `boolean`, `.ui-inset`. Aligns the text with items that have start content.
+- State (HTML): `current` (`[aria-current="page"]`), `disabled` (`[disabled]`), `disabledLink` (`[aria-disabled="true"]`). Highlights the current item, or dims a disabled one. `[disabled]` and `[aria-disabled="true"]` go on the `<a>` or `<button>` (a `<label>` row dims when its input is disabled); `[aria-current="page"]` on the `<a>`, `<button>` or `<label>`.
+- `type`: `"checkbox"` (`label.ui-checkbox`), `"radio"` (`label.ui-radio`), `"switch"` (`label.ui-switch`). Wraps the content in a `<label>` for a checkbox, radio or switch. Can't be combined with `as` or `href`.
+
+### Slots
+
+- `default`: More content inside `.ui-text`, after the label and description, or all the content when there's neither.
+- `submenu`: A submenu `Menu`, rendered inside the `<li>` after the element set by `as`.
+
+### Notes
+
+- HTML: To make the item interactive, wrap the content in an `<a>`, `<button>` or `<label>`.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### list.css
+
+- `--_bg-color`: Background of the list and its items. Defaults to `--ui-surface-filled`, `.ui-transparent` and `.ui-tonal` set it.
+- `--_description-text-color`: Text color of the description paragraph in an item. `--ui-text-subtle`, and `--ui-on-selected` on a selected or current row when a theme sets it.
+- `--_divider-border-color`: Color of the lines between items in `.ui-bordered` and on `.ui-border-top`. Defaults to `--ui-border-color`, mixed with 20% `--ui-text-strong` in `.ui-tonal`.
+- `--_hover-bg-color`: Background of hovered items, from `--ui-primary`.
+- `--_item-ease`: Easing of the row transitions. Defaults to `--ui-ease`.
+- `--_item-gap`: Gap between the content of an item. Smaller in `.ui-dense`.
+- `--_item-padding-inline`: Horizontal padding of items, headings and options. `--ui-list-item-padding-inline`, or `--ui-space-3` when a theme leaves it unset.
+- `--_motion`: Motion multiplier for the row transitions of a `.ui-list`. `0` turns them off. A `Menu` and a `Select` read their own.
+- `--_radius`: The corner radius of a `.ui-list`. Defaults to `--ui-radius`, and `0` when the list is a direct child of a `Card`, `Accordion` or `Dialog`, which round and clip it themselves.
+- `--_selected-bg-color`: Background of selected and current items and options. `--ui-selected` when the theme sets it, otherwise `--ui-primary` at `--ui-state-selected-alpha-accent`, stronger than `--_hover-bg-color`. With more contrast it is `--_hover-bg-color`, so the text keeps 7:1, and the bar marks the row.
+- `--_selected-indicator-bg-color`: Color of the bar on the start edge of selected and current items and options, which marks them without relying on the fill. Defaults to `--ui-selected-strong`.
+- `--_selected-indicator-size`: Width of the bar on selected and current items. Defaults to `--ui-border-width-thick`.
+- `--_separator-gap`: Space around the lines between items in `.ui-bordered` and on `.ui-border-top`. Smaller in `.ui-dense`.
+- `--_start-image-size`: Width of a square image in `.ui-start`.
+- `--_start-size`: Maximum size of leading and trailing icons, and the indent of `.ui-inset` items. Smaller in `.ui-dense`.
+- `--_start-video-size`: Height of a video in `.ui-start`, which keeps a 16:9 ratio.
+
+Outputs: `--_item-duration` and `--_selected-shadow`.
+
+## Theme tokens
+
+The stylesheets read `--ui-border-color`, `--ui-border-color-on-filled`, `--ui-border-color-on-raised`, `--ui-border-color-raised`, `--ui-border-width`, `--ui-border-width-thick`, `--ui-choice-size-small`, `--ui-control-size`, `--ui-control-size-small`, `--ui-disabled-opacity`, `--ui-duration-fast`, `--ui-duration-slow`, `--ui-ease`, `--ui-ease-enter`, `--ui-ease-exit`, `--ui-ease-move`, `--ui-field-border-color-on-filled`, `--ui-field-border-color-on-raised`, `--ui-focus-ring-inset`, `--ui-font-code`, `--ui-font-size-caption`, `--ui-font-size-small`, `--ui-font-weight-bold`, `--ui-font-weight-normal`, `--ui-icon-size`, `--ui-icon-size-small`, `--ui-line-height`, `--ui-list-item-padding-inline`, `--ui-menu-radius`, `--ui-motion`, `--ui-on-selected`, `--ui-palette-accent`, `--ui-palette-text`, `--ui-primary`, `--ui-radius`, `--ui-selected`, `--ui-selected-strong`, `--ui-shadow-overlay`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-space-6`, `--ui-state-hover-alpha-accent`, `--ui-state-selected-alpha-accent`, `--ui-surface-elevated`, `--ui-surface-filled`, `--ui-surface-tonal`, `--ui-switch-thumb-size-small`, `--ui-switch-track-block-size-small`, `--ui-switch-track-inline-size-small`, `--ui-text`, `--ui-text-strong` and `--ui-text-subtle`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Basics
+
+```html
+<ul class="ui-list" role="list">
+  <li>
+    <div class="ui-text">
+      <p>Headline</p>
+    </div>
+  </li>
+  <li>
+    <div class="ui-text">
+      <p>Headline</p>
+      <p>
+        Supporting text that truly is quite long enough to fill up multiple
+        lines.
+      </p>
+    </div>
+  </li>
+  <li>
+    <div class="ui-text">
+      <p>Trailing supporting text</p>
+    </div>
+    <div class="ui-end">100+</div>
+  </li>
+</ul>
+```
+
+## Astro
+
+`import { List, ListItem } from "opui-css/astro"`
+
+- `ListItem` named slots: `description`, `end`, `label`, `start` and `submenu`. Fill one with `slot="description"` on a child.
+
+### Example: Basics
+
+```astro
+---
+import { List, ListItem } from "opui-css/astro"
+---
+
+<List>
+  <ListItem label="Headline" />
+  <ListItem
+    description="Supporting text that truly is quite long enough to fill up multiple lines."
+    label="Headline"
+  />
+  <ListItem label="Trailing supporting text">
+    <Fragment slot="end">100+</Fragment>
+  </ListItem>
+</List>
+```
+
+## React
+
+`import { List, ListItem } from "opui-css/react"`
+
+- `ListItem` slot props (`ReactNode`): `children`, `description`, `end`, `label`, `start` and `submenu`.
+
+### Example: Basics
+
+```tsx
+import { List, ListItem } from "opui-css/react"
+
+export default function Basics() {
+  return (
+    <List>
+      <ListItem label="Headline" />
+      <ListItem
+        description="Supporting text that truly is quite long enough to fill up multiple lines."
+        label="Headline"
+      />
+      <ListItem end="100+" label="Trailing supporting text" />
+    </List>
+  )
+}
+```
+
+## Svelte
+
+`import { List, ListItem } from "opui-css/svelte"`
+
+- `ListItem` slot snippets: `children`, `description`, `end`, `label`, `start` and `submenu`.
+
+### Example: Basics
+
+```svelte
+<script lang="ts">
+  import { List, ListItem } from "opui-css/svelte"
+</script>
+
+<List>
+  <ListItem label="Headline" />
+  <ListItem
+    description="Supporting text that truly is quite long enough to fill up multiple lines."
+    label="Headline"
+  />
+  <ListItem label="Trailing supporting text">
+    {#snippet end()}100+{/snippet}
+  </ListItem>
+</List>
+```
+
+## Vue
+
+`import { List, ListItem } from "opui-css/vue"`
+
+- `ListItem` named slots: `description`, `end`, `label`, `start` and `submenu`. Fill one with `<template #description>`.
+
+### Example: Basics
+
+```vue
+<script setup lang="ts">
+import { List, ListItem } from "opui-css/vue"
+</script>
+
+<template>
+  <List>
+    <ListItem label="Headline" />
+    <ListItem
+      description="Supporting text that truly is quite long enough to fill up multiple lines."
+      label="Headline"
+    />
+    <ListItem label="Trailing supporting text">
+      <template #end>100+</template>
+    </ListItem>
+  </List>
+</template>
+```