opui-css 5.4.2 → 6.0.0-rc.1

package/skills/opui/references/menu.md

@@ -0,0 +1,248 @@
+# Menu
+
+A popover list of actions or links.
+
+- CSS: `opui-css/css/components/list.css` and `opui-css/css/components/menu.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/menu.md), [Astro](https://open-props-ui.netlify.app/astro/components/menu.md), [React](https://open-props-ui.netlify.app/react/components/menu.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/menu.md), [Vue](https://open-props-ui.netlify.app/vue/components/menu.md).
+
+## Menu
+
+### Parts
+
+- `menu.ui-menu[popover]` (root): The menu surface, a popover anchored to its trigger.
+- `li.ui-heading`: A group heading. HTML and CSS only.
+- `<li>`: An item, holding a `<button>` or an `<a>` with `href`. Rendered from `items`, or a `ListItem` in the default slot.
+- `.ui-start`: Optional content at the start, such as an icon.
+- `.ui-text`: The label (`label` on an item).
+- `.ui-end`: Optional content at the end, such as a shortcut in a `<kbd>` (`shortcut` on an item).
+
+### Props and modifiers
+
+- `align`: `"end"` (`.ui-align-end`), `"start"` (default). Which edge of the trigger the menu lines up with.
+- Anchor position area (HTML): `--ui-anchor-position-area`, default `"self-block-end span-self-inline-end"`. Any valid `position-area` value. Overrides the side and alignment classes. The `self-` keywords follow the menu's own direction, so the placement mirrors in a right-to-left part of a left-to-right page.
+- `bordered`: `boolean`, `.ui-bordered`. Adds a border between the items.
+- `dense`: `boolean`, `.ui-dense`. Packs the items tighter.
+- `id`: `string`. The id of the menu, which the trigger's `commandfor` points at. Required.
+- `items`: `MenuItem[]`. The items, as `{ borderTop, color, disabled, href, keepOpen, label, shortcut }` objects. `borderTop` adds a border above the item, `color: "critical"` marks a destructive one, a disabled link has no `href`, and `keepOpen` keeps the menu open on click. Other keys go to the item's `<a>` or `<button>`.
+- Items (HTML): `borderTop` (`li.ui-border-top`), `close` (`li > button[command="hide-popover"]`), `critical` (`li.ui-critical`), `disabled` (`li > button[disabled], li > a[aria-disabled="true"]`). The item states. `close` closes the whole menu on click, also from a submenu, and only button items take it. A disabled link has no `href`.
+- `popover`: `"auto"` (default), `"manual"` (`[popover="manual"]`). The popover type. With `"manual"`, Esc and a click outside don't close the menu, and opening another menu doesn't either.
+- `side`: `"block-end"` (default), `"block-start"` (`.ui-block-start`), `"inline-end"` (`.ui-inline-end`), `"inline-start"` (`.ui-inline-start`). The side of the trigger the menu opens on.
+- Trigger (HTML): `button[commandfor][command="toggle-popover"]`. Opens the menu. `commandfor` is the menu id.
+
+### Slots
+
+- `default`: The items, such as `ListItem`s.
+
+### Notes
+
+- HTML: Items are built like `List` items: icons in `.ui-start`, the text in `.ui-text` and shortcuts in `.ui-end`. Open the menu with a button that has `commandfor` set to the menu id and `command="toggle-popover"`.
+- Astro and Vue: Attributes that aren't props go to the `<menu>`. Item keys that aren't listed go to the item's `<a>` or `<button>`, like `target` or `data-*`.
+- React: Attributes that aren't props go to the `<menu>`. Item keys that aren't listed go to the item's `<a>` or `<button>`, like `onClick`, `target` or `data-*`.
+- Svelte: Attributes that aren't props go to the `<menu>`. Item keys that aren't listed go to the item's `<a>` or `<button>`, like `onclick`, `target` or `data-*`.
+
+## 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-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.
+- `--_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-active-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: `--_selected-shadow`.
+
+### menu.css
+
+- `--_bg-color`: The background. Defaults to `--ui-surface-elevated`.
+- `--_border-color`: The edge color. `--ui-border-color-raised` when a theme sets it, otherwise `--ui-border-color-on-raised`.
+- `--_border-width`: The border width. Defaults to `--ui-border-width`.
+- `--_divider-border-color`: Color of the item separators. Defaults to `--ui-border-color-on-raised`.
+- `--_max-block-size`: Maximum height.
+- `--_min-block-size`: Height a popover menu keeps when space is tight, unless its content is shorter. Needs `calc-size()`.
+- `--_min-inline-size`: Minimum width. A popover menu is also at least as wide as its invoker.
+- `--_motion`: Motion multiplier for the transitions. `0` turns them off.
+- `--_offset`: Gap between a popover menu and its invoker.
+- `--_radius`: The corner radius. Defaults to `--ui-radius`.
+- `--_shadow`: The shadow. Defaults to `--ui-shadow-overlay`.
+
+Outputs: `--_duration`, `--_ease`, `--_hover-bg-color`, `--_margin-block`, `--_margin-inline`, `--_position-area`, `--_side` and `--_span`.
+
+## 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-critical`, `--ui-critical-text`, `--ui-disabled-opacity`, `--ui-duration-slow`, `--ui-ease-enter`, `--ui-ease-exit`, `--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-primary`, `--ui-primary-text`, `--ui-radius`, `--ui-selected`, `--ui-selected-strong`, `--ui-shadow-overlay`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-space-6`, `--ui-state-active-alpha-accent`, `--ui-state-hover-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
+<button
+  type="button"
+  class="ui-button ui-outlined"
+  commandfor="menu-basics-1"
+  command="toggle-popover"
+>
+  Options
+</button>
+<menu class="ui-menu" id="menu-basics-1" popover>
+  <li>
+    <button type="button" commandfor="menu-basics-1" command="hide-popover">
+      <div class="ui-text"><p>Edit</p></div>
+      <div class="ui-end"><kbd>Ctrl+E</kbd></div>
+    </button>
+  </li>
+  <li>
+    <button type="button" commandfor="menu-basics-1" command="hide-popover">
+      <div class="ui-text"><p>Duplicate</p></div>
+      <div class="ui-end"><kbd>Ctrl+D</kbd></div>
+    </button>
+  </li>
+  <li>
+    <button type="button" disabled>
+      <div class="ui-text"><p>Archive</p></div>
+    </button>
+  </li>
+  <li>
+    <a href="/guide/getting-started/">
+      <div class="ui-text"><p>Help</p></div>
+    </a>
+  </li>
+  <li class="ui-border-top ui-critical">
+    <button type="button" commandfor="menu-basics-1" command="hide-popover">
+      <div class="ui-text"><p>Delete</p></div>
+    </button>
+  </li>
+</menu>
+```
+
+## Astro
+
+`import { Menu } from "opui-css/astro"`
+
+### Example: Basics
+
+```astro
+---
+import { Button, Menu } from "opui-css/astro"
+---
+
+<Button commandfor="menu-basics-1" command="toggle-popover" variant="outlined">
+  Options
+</Button>
+<Menu
+  id="menu-basics-1"
+  items={[
+    { label: "Edit", shortcut: "Ctrl+E" },
+    { label: "Duplicate", shortcut: "Ctrl+D" },
+    { disabled: true, label: "Archive" },
+    { href: "/guide/getting-started/", label: "Help" },
+    { borderTop: true, color: "critical", label: "Delete" },
+  ]}
+/>
+```
+
+## React
+
+`import { Menu } from "opui-css/react"`
+
+- Client components (`"use client"`): `Menu`.
+
+### Example: Basics
+
+```tsx
+import { Button, Menu } from "opui-css/react"
+
+export default function Basics() {
+  return (
+    <>
+      <Button
+        commandfor="menu-basics-1"
+        command="toggle-popover"
+        variant="outlined"
+      >
+        Options
+      </Button>
+      <Menu
+        id="menu-basics-1"
+        items={[
+          { label: "Edit", shortcut: "Ctrl+E" },
+          { label: "Duplicate", shortcut: "Ctrl+D" },
+          { disabled: true, label: "Archive" },
+          { href: "/guide/getting-started/", label: "Help" },
+          { borderTop: true, color: "critical", label: "Delete" },
+        ]}
+      />
+    </>
+  )
+}
+```
+
+## Svelte
+
+`import { Menu } from "opui-css/svelte"`
+
+### Example: Basics
+
+```svelte
+<script lang="ts">
+  import { Button, Menu } from "opui-css/svelte"
+</script>
+
+<Button commandfor="menu-basics-1" command="toggle-popover" variant="outlined">
+  Options
+</Button>
+<Menu
+  id="menu-basics-1"
+  items={[
+    { label: "Edit", shortcut: "Ctrl+E" },
+    { label: "Duplicate", shortcut: "Ctrl+D" },
+    { disabled: true, label: "Archive" },
+    { href: "/guide/getting-started/", label: "Help" },
+    { borderTop: true, color: "critical", label: "Delete" },
+  ]}
+/>
+```
+
+## Vue
+
+`import { Menu } from "opui-css/vue"`
+
+### Example: Basics
+
+```vue
+<script setup lang="ts">
+import { Button, Menu } from "opui-css/vue"
+</script>
+
+<template>
+  <Button
+    commandfor="menu-basics-1"
+    command="toggle-popover"
+    variant="outlined"
+  >
+    Options
+  </Button>
+  <Menu
+    id="menu-basics-1"
+    :items="[
+      { label: 'Edit', shortcut: 'Ctrl+E' },
+      { label: 'Duplicate', shortcut: 'Ctrl+D' },
+      { disabled: true, label: 'Archive' },
+      { href: '/guide/getting-started/', label: 'Help' },
+      { borderTop: true, color: 'critical', label: 'Delete' },
+    ]"
+  />
+</template>
+```

package/skills/opui/references/progress.md

@@ -0,0 +1,114 @@
+# Progress
+
+See also: Spinner.
+
+- CSS: `opui-css/css/components/progress.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/progress.md), [Astro](https://open-props-ui.netlify.app/astro/components/progress.md), [React](https://open-props-ui.netlify.app/react/components/progress.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/progress.md), [Vue](https://open-props-ui.netlify.app/vue/components/progress.md).
+
+## Progress
+
+### Parts
+
+- `.ui-progress` (root): Container element.
+- `<progress>` (prop `value`, prop `max`): The progress bar.
+
+### Props and modifiers
+
+- `max`: `number | string`. The maximum value.
+- `value`: `number | string`, `progress[value]`. The current value. Omit it for an indeterminate state.
+- `variant`: `"filled"` (`.ui-filled`), `"tonal"` (default). The variant to use.
+
+### Slots
+
+- `default`: Fallback content inside the `<progress>`.
+
+### Notes
+
+- Astro, Svelte and Vue: Attributes that aren't props go to the `<progress>`, like `aria-busy`, `aria-label` and `id`, and `class` and `style` go to the root `<div>`.
+- React: Attributes that aren't props go to the `<progress>`, like `aria-busy`, `aria-label` and `id`, and `className` and `style` go to the root `<div>`.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### progress.css
+
+- `--_accent`: Color of the bar. Defaults to `--ui-primary`.
+- `--_bg-color`: Color of the track. `--ui-track-bg-color` when the theme sets it, otherwise `--ui-surface-tonal`; `.ui-filled` sets it to `--ui-surface-filled`.
+- `--_ease`: Easing of the value transition. Defaults to `--ui-ease-enter`.
+- `--_loop-duration`: Length of one cycle of the indeterminate animation, and of the pulse that replaces it when `--_motion` is `0`. `2s` by default, multiplied by `--_motion`.
+- `--_motion`: Motion multiplier for the value transition and the indeterminate animation.
+
+Outputs: `--_duration`.
+
+## Theme tokens
+
+The stylesheets read `--ui-border-width`, `--ui-duration`, `--ui-ease-enter`, `--ui-field-border-color`, `--ui-motion`, `--ui-primary`, `--ui-radius`, `--ui-space-1`, `--ui-surface-filled`, `--ui-surface-tonal` and `--ui-track-bg-color`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Indeterminate
+
+```html
+<div class="ui-progress">
+  <progress aria-label="Loading"></progress>
+</div>
+```
+
+## Astro
+
+`import { Progress } from "opui-css/astro"`
+
+### Example: Indeterminate
+
+```astro
+---
+import { Progress } from "opui-css/astro"
+---
+
+<Progress aria-label="Loading" />
+```
+
+## React
+
+`import { Progress } from "opui-css/react"`
+
+### Example: Indeterminate
+
+```tsx
+import { Progress } from "opui-css/react"
+
+export default function Indeterminate() {
+  return <Progress aria-label="Loading" />
+}
+```
+
+## Svelte
+
+`import { Progress } from "opui-css/svelte"`
+
+### Example: Indeterminate
+
+```svelte
+<script lang="ts">
+  import { Progress } from "opui-css/svelte"
+</script>
+
+<Progress aria-label="Loading" />
+```
+
+## Vue
+
+`import { Progress } from "opui-css/vue"`
+
+### Example: Indeterminate
+
+```vue
+<script setup lang="ts">
+import { Progress } from "opui-css/vue"
+</script>
+
+<template>
+  <Progress aria-label="Loading" />
+</template>
+```

package/skills/opui/references/radio.md

@@ -0,0 +1,234 @@
+# Radio
+
+See also: Form documentation.
+
+- CSS: `opui-css/css/components/radio.css`, `opui-css/css/components/choice.css`, `opui-css/css/components/form.css` and `opui-css/css/components/card.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/radio.md), [Astro](https://open-props-ui.netlify.app/astro/components/radio.md), [React](https://open-props-ui.netlify.app/react/components/radio.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/radio.md), [Vue](https://open-props-ui.netlify.app/vue/components/radio.md).
+- The docs page also documents `FieldGroup`, see `form.md`.
+
+## Radio
+
+### Parts
+
+- `label.ui-radio` (root): Container element.
+- `<input>` (model): The radio input.
+- `.ui-label` (prop `label`, slot `default`): The label.
+- `.ui-end-text` (prop `endText`, slot `end-text`): Supporting text displayed below the label.
+
+### Props and modifiers
+
+- `card`: `boolean`, `.ui-card`. Renders the radio as a card: a padded, outlined surface that tints when hovered and when checked, with the label and `endText` inside. Add `spread` to put the input at the end, and `variant` to change the surface.
+- `disabled`: `boolean`, `input[aria-disabled="true"]`, `input[disabled]`. Dims the radio and shows a not-allowed cursor. `aria-disabled="true"` looks the same, but keeps the radio focusable and its value in the form, and doesn't stop the change, so block it with a script.
+- `error`: `boolean`, `input[aria-invalid="true"]`. Marks the control invalid and shows error styles.
+- `hideLabel`: `boolean`, `.ui-radio > span.ui-sr-only`. Visually hides the label, `.ui-sr-only` instead of `.ui-label`.
+- `id`: `string`. The id of the `<input>`.
+- `name`: `string`. The name of the `<input>`. Inside a `FieldGroup`, the group's `name` applies.
+- `orientation`: `"horizontal"` (default), `"vertical"` (`.ui-vertical`). The orientation of the element. `vertical` stacks the label under the input.
+- `required`: `boolean`, `input[required]`. Adds a required mark after the label. The form won't submit until one radio in the group is checked.
+- `size`: `"large"` (`.ui-large`), `"medium"` (default), `"small"` (`.ui-small`), `"x-small"` (`.ui-x-small`). The size of the element.
+- `spread`: `boolean`, `.ui-spread`. Pushes the label and the input to opposite ends.
+- `value`: `string`. The value of the `<input>`, submitted with the form when it's checked.
+- `variant`: `"elevated"` (`.ui-elevated`), `"outlined"` (default), `"tonal"` (`.ui-tonal`). The surface of the card, with `card`. `outlined` has a border, `tonal` a tinted surface and `elevated` a shadow, like Card.
+
+Model: `value` (`string | number | boolean`), the selected value of the group. Astro and React `value`, Svelte `bind:group`, Vue `v-model`.
+
+### Notes
+
+- Astro and Vue: Attributes that aren't props go to the `<input>`, like `autofocus` and `form`, and `class` and `style` go to the root `<label>`. To hide the label, set `hideLabel` and keep the text in `label` or the slot.
+- React: Attributes that aren't props go to the `<input>`, like `autofocus` and `form`, and `className` and `style` go to the root `<label>`. To hide the label, set `hideLabel` and keep the text in `label` or `children`. Use `checked` with `onChange` on each radio, or `defaultChecked`.
+- Svelte: Attributes that aren't props go to the `<input>`, like `autofocus` and `form`, and `class` and `style` go to the root `<label>`. To hide the label, set `hideLabel` and keep the text in `label` or `children`.
+
+## RadioInput
+
+### Parts
+
+- `<input type="radio">` (root): The radio input, without a label.
+
+Model: `value` (`string | number | boolean`), the selected value of the group. Astro and React `value`, Svelte `bind:group`, Vue `v-model`.
+
+### Notes
+
+- Astro, React, Svelte and Vue: The radio `<input>` without the label, for a custom layout inside a `label.ui-radio`, such as the end of a `ListItem` with `type="radio"`. Attributes that aren't props go to the `<input>`. Inside a `FieldGroup`, it takes the group's `name`.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### radio.css
+
+- `--_accent`: Fill and border of the checked circle. `SelectedItem` in forced colors.
+- `--_on-accent`: Color of the dot on `--_accent`. `SelectedItemText` in forced colors.
+
+Outputs: `--_dot-radius`.
+
+### choice.css
+
+- `--_accent`: Fill and border of the checked input. `--ui-choice-accent` when the theme sets it, otherwise `--ui-primary` with its lightness capped in dark mode, and `--ui-invalid` when invalid.
+- `--_card-padding`: Padding of `.ui-card`. `--ui-space-3`, and `--ui-space-2` in `.ui-small` and `.ui-x-small`.
+- `--_checked-bg-color`: Background of a checked `.ui-card`. `--ui-primary-tonal` when the theme sets it, otherwise `--ui-primary` at `--ui-state-active-alpha-accent`.
+- `--_ease`: Easing of the transitions. Defaults to `--ui-ease`.
+- `--_hover-bg-color`: Background of a hovered `.ui-card`. Defaults to `--ui-surface-tonal-hover`.
+- `--_motion`: Motion multiplier for the transitions. `0` turns them off.
+- `--_on-accent`: Color of the checkmark, dash and dots on `--_accent`. `--ui-choice-on-accent` when the theme sets it, otherwise `--ui-on-primary`, or `--ui-on-fill` in dark mode. `--ui-on-fill` when invalid.
+- `--_ripple-size`: Size of the hover ripple of checkboxes and radios, relative to the input. Set on `input`.
+- `--_size`: Width and height of the checkbox and radio input, which the label centers on. Defaults to `--ui-choice-size`, set by the size classes. `switch.css` sets it to the track height.
+
+Outputs: `--_bg-color`, `--_border-color`, `--_border-width`, `--_duration`, `--_shadow` and `--_thumb-scale`.
+
+### card.css
+
+- `--_ease`: Easing of the focus ring animation. Defaults to `--ui-ease`.
+- `--_elevated-bg-color`: Background of `.ui-elevated`. Defaults to `--ui-surface-elevated`.
+- `--_elevated-shadow`: Shadow of `.ui-elevated`. Defaults to `--ui-shadow-elevated`.
+- `--_motion`: Motion multiplier for the focus ring animation. `0` turns it off.
+- `--_outlined-border-color`: Border color of `.ui-outlined`. Defaults to `--ui-border-color`.
+- `--_padding`: Padding of the header, content and actions. `--ui-card-padding`, or `--ui-space-3` when a theme leaves it unset.
+- `--_surface-bg-color`: Background of default and `.ui-outlined` cards, and border color of `.ui-tonal` and `.ui-elevated` unless a theme sets `--ui-border-color-raised`. Defaults to `--ui-surface`.
+- `--_tonal-bg-color`: Background of `.ui-tonal`. Defaults to `--ui-surface-tonal`.
+
+Outputs: `--_bg-color`, `--_border-color`, `--_border-width`, `--_duration` and `--_shadow`.
+
+## Theme tokens
+
+The stylesheets read `--ui-border-color`, `--ui-border-color-on-raised`, `--ui-border-color-raised`, `--ui-border-width`, `--ui-card-padding`, `--ui-choice-accent`, `--ui-choice-border-color`, `--ui-choice-fill-max-lightness`, `--ui-choice-label-offset`, `--ui-choice-on-accent`, `--ui-choice-ripple-bg-color`, `--ui-choice-size`, `--ui-choice-size-large`, `--ui-choice-size-small`, `--ui-choice-size-x-small`, `--ui-control-accent`, `--ui-disabled-opacity`, `--ui-duration`, `--ui-ease`, `--ui-field-border-color`, `--ui-field-border-color-on-raised`, `--ui-field-border-width`, `--ui-field-helper-font-size`, `--ui-field-helper-line-height`, `--ui-field-helper-text-color`, `--ui-field-label-font-size`, `--ui-field-label-font-weight`, `--ui-field-label-text-color`, `--ui-field-required-text-color`, `--ui-focus-ring-color`, `--ui-focus-ring-offset`, `--ui-focus-ring-style`, `--ui-focus-ring-width`, `--ui-font-size-body`, `--ui-font-size-caption`, `--ui-invalid`, `--ui-invalid-text`, `--ui-line-height-control`, `--ui-line-height-tight`, `--ui-motion`, `--ui-on-control-accent`, `--ui-on-fill`, `--ui-on-primary`, `--ui-primary`, `--ui-primary-tonal`, `--ui-radius`, `--ui-radius-round`, `--ui-shadow-elevated`, `--ui-shadow-surface`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-space-4`, `--ui-space-5`, `--ui-state-active-alpha-accent`, `--ui-state-hover-alpha-accent`, `--ui-surface`, `--ui-surface-elevated`, `--ui-surface-tonal`, `--ui-surface-tonal-hover`, `--ui-switch-thumb-size-large`, `--ui-switch-thumb-size-small`, `--ui-switch-thumb-size-x-small`, `--ui-switch-track-block-size-large`, `--ui-switch-track-block-size-small`, `--ui-switch-track-block-size-x-small`, `--ui-switch-track-inline-size-large`, `--ui-switch-track-inline-size-small`, `--ui-switch-track-inline-size-x-small`, `--ui-text` and `--ui-text-strong`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Basics
+
+```html
+<form class="ui-form">
+  <fieldset class="ui-fieldset">
+    <legend>Legend</legend>
+    <div class="ui-field-group">
+      <label class="ui-radio">
+        <input name="radio-group" type="radio" value="1" checked />
+        <span class="ui-label">Radio 1</span>
+      </label>
+      <label class="ui-radio">
+        <input name="radio-group" type="radio" value="2" />
+        <span class="ui-label">Radio 2</span>
+      </label>
+      <label class="ui-radio">
+        <input name="radio-group" type="radio" value="3" />
+        <span class="ui-label">Radio 3</span>
+      </label>
+    </div>
+  </fieldset>
+</form>
+```
+
+## Astro
+
+`import { Radio, RadioInput } from "opui-css/astro"`
+
+- `Radio` named slots: `end-text`. Fill one with `slot="end-text"` on a child.
+
+### Example: Basics
+
+```astro
+---
+import { FieldGroup, FieldLegend, Fieldset, Form, Radio } from "opui-css/astro"
+---
+
+<Form>
+  <Fieldset>
+    <FieldLegend>Legend</FieldLegend>
+    <FieldGroup name="radio-group">
+      <Radio value="1" checked>Radio 1</Radio>
+      <Radio value="2">Radio 2</Radio>
+      <Radio value="3">Radio 3</Radio>
+    </FieldGroup>
+  </Fieldset>
+</Form>
+```
+
+## React
+
+`import { Radio, RadioInput } from "opui-css/react"`
+
+- `Radio` slot props (`ReactNode`): `children` and `endText`.
+- Client components (`"use client"`): `RadioInput`.
+
+### Example: Basics
+
+```tsx
+import { FieldGroup, FieldLegend, Fieldset, Form, Radio } from "opui-css/react"
+
+export default function Basics() {
+  return (
+    <Form>
+      <Fieldset>
+        <FieldLegend>Legend</FieldLegend>
+        <FieldGroup name="radio-group">
+          <Radio value="1" defaultChecked>
+            Radio 1
+          </Radio>
+          <Radio value="2">Radio 2</Radio>
+          <Radio value="3">Radio 3</Radio>
+        </FieldGroup>
+      </Fieldset>
+    </Form>
+  )
+}
+```
+
+## Svelte
+
+`import { Radio, RadioInput } from "opui-css/svelte"`
+
+- `Radio` slot snippets: `children` and `endText`.
+- Hydration: `bind:group` on `Radio` and `RadioInput`. The bound value only updates on the client. The native control still changes and submits with its form. Without hydration: Read the value from the form instead.
+
+### Example: Basics
+
+```svelte
+<script lang="ts">
+  import {
+    FieldGroup,
+    FieldLegend,
+    Fieldset,
+    Form,
+    Radio,
+  } from "opui-css/svelte"
+</script>
+
+<Form>
+  <Fieldset>
+    <FieldLegend>Legend</FieldLegend>
+    <FieldGroup name="radio-group">
+      <Radio value="1" checked>Radio 1</Radio>
+      <Radio value="2">Radio 2</Radio>
+      <Radio value="3">Radio 3</Radio>
+    </FieldGroup>
+  </Fieldset>
+</Form>
+```
+
+## Vue
+
+`import { Radio, RadioInput } from "opui-css/vue"`
+
+- `Radio` named slots: `end-text`. Fill one with `<template #end-text>`.
+- Hydration: `v-model` on `Radio` and `RadioInput`. The bound value only updates on the client. The native control still changes and submits with its form. Without hydration: Read the value from the form instead.
+
+### Example: Basics
+
+```vue
+<script setup lang="ts">
+import { FieldGroup, FieldLegend, Fieldset, Form, Radio } from "opui-css/vue"
+</script>
+
+<template>
+  <Form>
+    <Fieldset>
+      <FieldLegend>Legend</FieldLegend>
+      <FieldGroup name="radio-group">
+        <Radio value="1" checked>Radio 1</Radio>
+        <Radio value="2">Radio 2</Radio>
+        <Radio value="3">Radio 3</Radio>
+      </FieldGroup>
+    </Fieldset>
+  </Form>
+</template>
+```