opui-css 5.4.3 → 6.0.0-rc.1

package/skills/opui/references/tabs.md

@@ -0,0 +1,257 @@
+# Tabs
+
+The Tabs are radio inputs and the Panels are just divs that show and hide based on the radio inputs' :checked state. Use Tabs to switch between panels of content. To pick an option, like a list or grid view, use a Toggle group.
+
+- CSS: `opui-css/css/components/tabs.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/tabs.md), [Astro](https://open-props-ui.netlify.app/astro/components/tabs.md), [React](https://open-props-ui.netlify.app/react/components/tabs.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/tabs.md), [Vue](https://open-props-ui.netlify.app/vue/components/tabs.md).
+
+## Tabs
+
+### Parts
+
+- `.ui-tabs` (root): Container element.
+- `.ui-input` (`TabsItem`): A visually hidden radio input that holds a tab's state. The tab is its label.
+- `.ui-label` (`TabsLabel`): A tab.
+- `.ui-panel` (`TabsPanel`): The panel of the selected tab.
+
+### Props and modifiers
+
+- `defaultValue` (React): `string`. The `value` of the tab selected at the start, when `value` is omitted.
+- `name`: `string`, `.ui-input[name]`. The name shared by the tab inputs. Generated when omitted.
+- `onValueChange` (React): `(value: string) => void`. Called with the `value` of the tab when one is selected.
+- `overflow`: `"scroll"` (`.ui-overflow-scroll`), `"wrap"` (default). What the tabs do when they don't fit. `"wrap"` wraps them onto more rows, and `"scroll"` keeps them on one row and scrolls it sideways.
+- `value` (Astro and React): `string`. The `value` of the selected tab. The item whose `value` matches is checked, and the items' own `checked` is ignored.
+- `variant`: `"filled"` (`.ui-filled`), `"line"` (`.ui-line`), `"outlined"` (`.ui-outlined`), `"tonal"` (default). The variant to use. The default `tonal` tabs sit on a tonal track and the selected tab is a raised pill.
+
+### Slots
+
+- `default`: The tab items.
+
+Model: `value` (`string`), the `value` of the selected tab. Astro and React `value`, Svelte `bind:value`, Vue `v-model`.
+
+### Notes
+
+- HTML: Each tab is three elements, in this order: `input.ui-input[type="radio"]`, `label.ui-label` and `.ui-panel`.
+- Astro: `value` selects the item whose `value` matches on the server. After that the selection lives in the inputs: read it from the form, or listen for `change` in a script.
+- React: Use `value` with `onValueChange`, or `defaultValue`. Without them the items keep their own state, and `onValueChange` still reports changes.
+- Svelte: Bind `value` with a starting value to control the selection. Without it, or bound to `undefined`, the items keep their own state.
+- Vue: Bind `v-model` with a starting value to control the selection. Without it, or bound to `undefined`, the items keep their own state.
+
+## TabsItem
+
+### Parts
+
+- `input.ui-input` (root): The radio input for a tab, followed by the tab and the panel.
+
+### Props and modifiers
+
+- `checked`: `boolean`, `[checked]`. Selects the tab.
+- `id`: `string`, `[id]`. The id of the input. Generated when omitted.
+- `name`: `string`. Overrides the name shared by the tab inputs.
+- `value`: `string`, `[value]`. The value of the input. The tab is selected while it matches the `value` of `Tabs`.
+
+### Slots
+
+- `default`: The tab and the panel.
+
+### Notes
+
+- React: `defaultChecked` selects the starting tab. A tab that loses its check to another one fires no `onChange` of its own, so to control the tabs, give each item a `value` and set `value` with `onValueChange` on `Tabs`. The `Tabs` value then wins and an item's own `checked` and `defaultChecked` are ignored.
+- Svelte: `checked` selects the starting tab. A tab that loses its check to another one fires no `change` of its own, so to control the tabs, give each item a `value` and bind `value` on `Tabs`. The `Tabs` value then wins and an item's own `checked` is ignored.
+- Vue: `checked` selects the starting tab. A tab that loses its check to another one fires no `change` of its own, so to control the tabs, give each item a `value` and bind `v-model` on `Tabs`. The `Tabs` value then wins and an item's own `checked` is ignored.
+
+## TabsLabel
+
+### Parts
+
+- `label.ui-label` (root): The tab.
+
+### Props and modifiers
+
+- `for` (Astro, Svelte and Vue): `string`, `[for]`. The id of the input it labels. Set by the item.
+- `htmlFor` (React): `string`. The id of the input it labels, as `htmlFor` like on the element. Set by the item.
+
+### Slots
+
+- `default`: The tab label.
+
+## TabsPanel
+
+### Parts
+
+- `.ui-panel` (root): The panel.
+
+### Slots
+
+- `default`: The panel content.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### tabs.css
+
+- `--_ease`: Easing of the transitions and focus ring. Defaults to `--ui-ease`.
+- `--_indicator-bg-color`: Color of the line under the selected tab. `transparent` unless `.ui-line`, which reads `--ui-tabs-accent` and falls back to `--ui-text-strong`.
+- `--_indicator-size`: Thickness of the line under the selected tab.
+- `--_inset`: Gap between the track edge and the selected tab's background. `0px` in `.ui-line`.
+- `--_motion`: Motion multiplier for the transitions. `0` turns them off.
+- `--_radius`: Corner radius of the track. The selected tab's radius is reduced by `--_inset` and `--_track-border-width`.
+- `--_selected-bg-color`: Background of the selected tab. Defaults to `--ui-surface`, a translucent white in dark mode; the variant classes set it.
+- `--_selected-border-color`: Border color of the selected tab. `--ui-control-border-color`, or `--ui-field-border-color` when the theme doesn't set it, so the pill reaches 3:1 against the track; the variant classes set it to `transparent`.
+- `--_selected-shadow`: Shadow of the selected tab. Defaults to `--ui-shadow-selected`. `.ui-line` and `.ui-outlined` remove it.
+- `--_selected-text-color`: Text color of the selected tab. Defaults to `--ui-tabs-accent`, or `--ui-text-strong` when a theme leaves it unset. `.ui-filled` sets it to `--ui-on-selected-strong`.
+- `--_text-color`: Text color of the unselected tabs. Defaults to `--ui-text-subtle`.
+- `--_track-bg-color`: Background of the track behind the tabs. Defaults to `--ui-surface-tonal`.
+- `--_track-border-color`: Border color of the track. `.ui-outlined` sets it to `--ui-control-border-color`, or `--ui-border-color` when the theme doesn't set it.
+- `--_track-border-width`: Border width of the track. `0px` in `.ui-line`.
+
+Outputs: `--_duration` and `--_focus-ring-duration`.
+
+## Theme tokens
+
+The stylesheets read `--ui-border-color`, `--ui-border-width`, `--ui-border-width-thick`, `--ui-control-border-color`, `--ui-duration`, `--ui-duration-fast`, `--ui-ease`, `--ui-field-border-color`, `--ui-focus-ring-color`, `--ui-focus-ring-inset`, `--ui-focus-ring-offset`, `--ui-focus-ring-style`, `--ui-focus-ring-width`, `--ui-font-size-control`, `--ui-font-weight-medium`, `--ui-line-height-relaxed`, `--ui-motion`, `--ui-on-selected-strong`, `--ui-radius`, `--ui-selected-strong`, `--ui-shadow-selected`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-state-hover-alpha-dark`, `--ui-surface`, `--ui-surface-tonal`, `--ui-tabs-accent`, `--ui-text-strong` and `--ui-text-subtle`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Basics
+
+```html
+<div class="ui-tabs">
+  <input
+    type="radio"
+    name="basic-tabs"
+    id="tabs-basics-1"
+    class="ui-input"
+    checked
+  />
+  <label for="tabs-basics-1" class="ui-label">Profile</label>
+  <div class="ui-panel">Profile settings and information.</div>
+
+  <input type="radio" name="basic-tabs" id="tabs-basics-2" class="ui-input" />
+  <label for="tabs-basics-2" class="ui-label">Settings</label>
+  <div class="ui-panel">General account settings.</div>
+
+  <input type="radio" name="basic-tabs" id="tabs-basics-3" class="ui-input" />
+  <label for="tabs-basics-3" class="ui-label">Notifications</label>
+  <div class="ui-panel">Manage your notifications.</div>
+</div>
+```
+
+## Astro
+
+`import { Tabs, TabsItem, TabsLabel, TabsPanel } from "opui-css/astro"`
+
+### Example: Basics
+
+```astro
+---
+import { Tabs, TabsItem, TabsLabel, TabsPanel } from "opui-css/astro"
+---
+
+<Tabs name="basic-tabs">
+  <TabsItem checked>
+    <TabsLabel>Profile</TabsLabel>
+    <TabsPanel>Profile settings and information.</TabsPanel>
+  </TabsItem>
+  <TabsItem>
+    <TabsLabel>Settings</TabsLabel>
+    <TabsPanel>General account settings.</TabsPanel>
+  </TabsItem>
+  <TabsItem>
+    <TabsLabel>Notifications</TabsLabel>
+    <TabsPanel>Manage your notifications.</TabsPanel>
+  </TabsItem>
+</Tabs>
+```
+
+## React
+
+`import { Tabs, TabsItem, TabsLabel, TabsPanel } from "opui-css/react"`
+
+- Client components (`"use client"`): `Tabs`, `TabsItem` and `TabsLabel`.
+
+### Example: Basics
+
+```tsx
+import { Tabs, TabsItem, TabsLabel, TabsPanel } from "opui-css/react"
+
+export default function Basics() {
+  return (
+    <Tabs name="basic-tabs">
+      <TabsItem defaultChecked>
+        <TabsLabel>Profile</TabsLabel>
+        <TabsPanel>Profile settings and information.</TabsPanel>
+      </TabsItem>
+      <TabsItem>
+        <TabsLabel>Settings</TabsLabel>
+        <TabsPanel>General account settings.</TabsPanel>
+      </TabsItem>
+      <TabsItem>
+        <TabsLabel>Notifications</TabsLabel>
+        <TabsPanel>Manage your notifications.</TabsPanel>
+      </TabsItem>
+    </Tabs>
+  )
+}
+```
+
+## Svelte
+
+`import { Tabs, TabsItem, TabsLabel, TabsPanel } from "opui-css/svelte"`
+
+- Hydration: `bind:value` on `Tabs`. 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 { Tabs, TabsItem, TabsLabel, TabsPanel } from "opui-css/svelte"
+</script>
+
+<Tabs name="basic-tabs">
+  <TabsItem checked>
+    <TabsLabel>Profile</TabsLabel>
+    <TabsPanel>Profile settings and information.</TabsPanel>
+  </TabsItem>
+  <TabsItem>
+    <TabsLabel>Settings</TabsLabel>
+    <TabsPanel>General account settings.</TabsPanel>
+  </TabsItem>
+  <TabsItem>
+    <TabsLabel>Notifications</TabsLabel>
+    <TabsPanel>Manage your notifications.</TabsPanel>
+  </TabsItem>
+</Tabs>
+```
+
+## Vue
+
+`import { Tabs, TabsItem, TabsLabel, TabsPanel } from "opui-css/vue"`
+
+- Hydration: `v-model` on `Tabs`. 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 { Tabs, TabsItem, TabsLabel, TabsPanel } from "opui-css/vue"
+</script>
+
+<template>
+  <Tabs name="basic-tabs">
+    <TabsItem checked>
+      <TabsLabel>Profile</TabsLabel>
+      <TabsPanel>Profile settings and information.</TabsPanel>
+    </TabsItem>
+    <TabsItem>
+      <TabsLabel>Settings</TabsLabel>
+      <TabsPanel>General account settings.</TabsPanel>
+    </TabsItem>
+    <TabsItem>
+      <TabsLabel>Notifications</TabsLabel>
+      <TabsPanel>Manage your notifications.</TabsPanel>
+    </TabsItem>
+  </Tabs>
+</template>
+```

package/skills/opui/references/text-field.md

@@ -0,0 +1,167 @@
+# Text field
+
+An input for single-line text data. Basic text fields with labels, field descriptions, and validation states.
+
+- CSS: `opui-css/css/components/text-field.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/text-field.md), [Astro](https://open-props-ui.netlify.app/astro/components/text-field.md), [React](https://open-props-ui.netlify.app/react/components/text-field.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/text-field.md), [Vue](https://open-props-ui.netlify.app/vue/components/text-field.md).
+
+## TextField
+
+### Parts
+
+- `label.ui-text-field` (root): Container element.
+- `.ui-label` (prop `label`, slot `label`): The label for the field.
+- `.ui-start-text` (prop `startText`, slot `start-text`): Start text displayed above the field.
+- `.ui-field`: The boxed input area.
+- `.ui-field > .ui-top` (slot `top`): Content above the input, inside the border, with a divider.
+- `.ui-field > .ui-start` (slot `start`): Content at the inline-start of the field, inside the border.
+- `<input>` (model): The input element.
+- `.ui-field > .ui-end` (slot `end`): Content at the inline-end of the field, inside the border.
+- `.ui-field > .ui-bottom` (slot `bottom`): Content below the input, inside the border, with a divider.
+- `.ui-end-text` (prop `endText`, slot `end-text`): Supporting text displayed below the field.
+
+### Props and modifiers
+
+- `autoFit`: `boolean`, `.ui-auto-fit`. Lets the width follow the content, from `25ch`.
+- `disabled`: `boolean`, `input[disabled]`. Dims the field and blocks input.
+- `error`: `boolean`, `input[aria-invalid="true"]`. Marks the control invalid and shows error styles.
+- `hideLabel`: `boolean`, `.ui-text-field > span.ui-sr-only`. Visually hides the label, `.ui-sr-only` instead of `.ui-label`. The field keeps it as its accessible name.
+- `id`: `string`. The id of the `<input>`.
+- `name`: `string`. The name of the `<input>`. Inside a `FieldGroup`, the group's `name` applies.
+- `required`: `boolean`, `input[required]`. Adds a required mark after the label. The form won't submit while the field is empty.
+- `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 start text to one side and the input to the other.
+- `type`: `"numeric" | string`, default `"text"`. The input type. `"numeric"` renders a text input with a numeric keyboard.
+- `variant`: `"filled"` (`.ui-filled`), `"outlined"` (default). The variant to use.
+
+### Slots
+
+- `default`: Extra content inside the root, such as a `<datalist>`.
+
+Model: `value` (`string | number`), the input value. Astro and React `value`, Svelte `bind:value`, Vue `v-model`.
+
+### Notes
+
+- HTML: Use `.ui-select` for a `<select>` and `.ui-textarea` for a `<textarea>`. You can put a `<datalist>` inside the root.
+- Astro, Svelte and Vue: Attributes that aren't props go to the `<input>`, like `autocomplete` and `placeholder`, and `class` and `style` go to the root `<label>`.
+- React: Attributes that aren't props go to the `<input>`, like `autocomplete` and `placeholder`, and `className` and `style` go to the root `<label>`. Use `value` with `onChange`, or `defaultValue`.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### text-field.css
+
+- `--_accent`: Border color of `.ui-field` when focused with a pointer; keyboard focus shows the focus ring instead. Defaults to `--ui-primary`, `--ui-invalid` when invalid.
+- `--_arrow-inset`: Distance of the select arrow from the inline end.
+- `--_chevron-image`: The select arrow, as an image used for a mask.
+- `--_chevron-size`: Width and height of the select arrow.
+- `--_ease`: Easing of the transitions. Defaults to `--ui-ease`.
+- `--_field-padding-block`: The preferred block padding of the control. Set by the size classes.
+- `--_field-padding-inline`: The inline padding of the control and affixes. `.ui-large` sets it.
+- `--_font-size`: The font size of the control and affixes.
+- `--_motion`: Motion multiplier for the transitions. `0` turns them off.
+- `--_size`: The height of `.ui-field`, a minimum so a textarea can grow, and the width and height of a color field. Defaults to `--ui-field-size`, set by the size classes.
+
+Outputs: `--_affix-text-color`, `--_arrow-padding`, `--_bg-color`, `--_border-color`, `--_duration`, `--_field-padding-block-fit` and `--_helper-text-color`.
+
+## Theme tokens
+
+The stylesheets read `--ui-disabled-opacity`, `--ui-duration`, `--ui-ease`, `--ui-field-bg-color`, `--ui-field-border-color`, `--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-padding-inline`, `--ui-field-radius`, `--ui-field-required-text-color`, `--ui-field-size`, `--ui-field-size-large`, `--ui-field-size-small`, `--ui-field-size-x-small`, `--ui-focus-ring-color`, `--ui-focus-ring-offset`, `--ui-focus-ring-style`, `--ui-focus-ring-width`, `--ui-font-body`, `--ui-font-size-caption`, `--ui-font-size-control`, `--ui-font-size-small`, `--ui-icon-size`, `--ui-icon-size-small`, `--ui-invalid`, `--ui-invalid-text`, `--ui-line-height-control`, `--ui-line-height-tight`, `--ui-motion`, `--ui-primary`, `--ui-radius`, `--ui-shadow-control`, `--ui-shadow-field`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-space-4`, `--ui-surface`, `--ui-surface-tonal`, `--ui-surface-tonal-hover`, `--ui-text` and `--ui-text-strong`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Variants
+
+```html
+<label class="ui-text-field">
+  <span class="ui-label">Outlined</span>
+  <span class="ui-field">
+    <input type="text" placeholder="Placeholder" />
+  </span>
+</label>
+
+<label class="ui-text-field ui-filled">
+  <span class="ui-label">Filled</span>
+  <span class="ui-field">
+    <input type="text" placeholder="Placeholder" />
+  </span>
+</label>
+```
+
+## Astro
+
+`import { TextField } from "opui-css/astro"`
+
+- `TextField` named slots: `bottom`, `end`, `end-text`, `label`, `start`, `start-text` and `top`. Fill one with `slot="bottom"` on a child.
+
+### Example: Variants
+
+```astro
+---
+import { TextField } from "opui-css/astro"
+---
+
+<TextField label="Outlined" placeholder="Placeholder" />
+<TextField label="Filled" placeholder="Placeholder" variant="filled" />
+```
+
+## React
+
+`import { TextField } from "opui-css/react"`
+
+- `TextField` slot props (`ReactNode`): `bottom`, `children`, `end`, `endText`, `label`, `start`, `startText` and `top`.
+- Client components (`"use client"`): `TextField`.
+
+### Example: Variants
+
+```tsx
+import { TextField } from "opui-css/react"
+
+export default function Variants() {
+  return (
+    <>
+      <TextField label="Outlined" placeholder="Placeholder" />
+      <TextField label="Filled" placeholder="Placeholder" variant="filled" />
+    </>
+  )
+}
+```
+
+## Svelte
+
+`import { TextField } from "opui-css/svelte"`
+
+- `TextField` slot snippets: `bottom`, `children`, `end`, `endText`, `label`, `start`, `startText` and `top`.
+- Hydration: `bind:value` on `TextField`. 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: Variants
+
+```svelte
+<script lang="ts">
+  import { TextField } from "opui-css/svelte"
+</script>
+
+<TextField label="Outlined" placeholder="Placeholder" />
+<TextField label="Filled" placeholder="Placeholder" variant="filled" />
+```
+
+## Vue
+
+`import { TextField } from "opui-css/vue"`
+
+- `TextField` named slots: `bottom`, `end`, `end-text`, `label`, `start`, `start-text` and `top`. Fill one with `<template #bottom>`.
+- Hydration: `v-model` on `TextField`. 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: Variants
+
+```vue
+<script setup lang="ts">
+import { TextField } from "opui-css/vue"
+</script>
+
+<template>
+  <TextField label="Outlined" placeholder="Placeholder" />
+  <TextField label="Filled" placeholder="Placeholder" variant="filled" />
+</template>
+```

package/skills/opui/references/textarea.md

@@ -0,0 +1,169 @@
+# Textarea
+
+An input for multi-line text data. Basic textareas with labels, supporting text, and validation states.
+
+- CSS: `opui-css/css/components/text-field.css` and `opui-css/css/components/textarea.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/textarea.md), [Astro](https://open-props-ui.netlify.app/astro/components/textarea.md), [React](https://open-props-ui.netlify.app/react/components/textarea.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/textarea.md), [Vue](https://open-props-ui.netlify.app/vue/components/textarea.md).
+
+## Textarea
+
+### Parts
+
+- `label.ui-textarea` (root): Container element.
+- `.ui-label` (prop `label`, slot `label`): The label for the field.
+- `.ui-start-text` (prop `startText`, slot `start-text`): Start text displayed above the field.
+- `.ui-field`: The boxed textarea area.
+- `.ui-field > .ui-top` (slot `top`): Content above the textarea, inside the border, with a divider.
+- `.ui-field > .ui-start` (slot `start`): Content at the inline-start of the field, inside the border.
+- `<textarea>` (model): The textarea element.
+- `.ui-field > .ui-end` (slot `end`): Content at the inline-end of the field, inside the border.
+- `.ui-field > .ui-bottom` (slot `bottom`): Content below the textarea, inside the border, with a divider.
+- `.ui-end-text` (prop `endText`, slot `end-text`): Supporting text displayed below the field.
+
+### Props and modifiers
+
+- `autoFit`: `boolean`, `.ui-auto-fit`. Lets the width follow the content and allows resizing in both directions.
+- `disabled`: `boolean`, `textarea[disabled]`. Dims the field and blocks input.
+- `error`: `boolean`, `textarea[aria-invalid="true"]`. Marks the control invalid and shows error styles.
+- `hideLabel`: `boolean`, `.ui-textarea > span.ui-sr-only`. Visually hides the label, `.ui-sr-only` instead of `.ui-label`. The field keeps it as its accessible name.
+- `id`: `string`. The id of the `<textarea>`.
+- `name`: `string`. The name of the `<textarea>`. Inside a `FieldGroup`, the group's `name` applies.
+- `required`: `boolean`, `textarea[required]`. Adds a required mark after the label. The form won't submit while the field is empty.
+- `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 start text to one side and the textarea to the other.
+- `variant`: `"filled"` (`.ui-filled`), `"outlined"` (default). The variant to use.
+
+### Slots
+
+- `default`: Extra content inside the root.
+
+Model: `value` (`string`), the textarea value. Astro and React `value`, Svelte `bind:value`, Vue `v-model`.
+
+### Notes
+
+- Astro, Svelte and Vue: Attributes that aren't props go to the `<textarea>`, like `placeholder` and `rows`, and `class` and `style` go to the root `<label>`.
+- React: Attributes that aren't props go to the `<textarea>`, like `placeholder` and `rows`, and `className` and `style` go to the root `<label>`. Use `value` with `onChange`, or `defaultValue`.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### text-field.css
+
+- `--_accent`: Border color of `.ui-field` when focused with a pointer; keyboard focus shows the focus ring instead. Defaults to `--ui-primary`, `--ui-invalid` when invalid.
+- `--_arrow-inset`: Distance of the select arrow from the inline end.
+- `--_chevron-image`: The select arrow, as an image used for a mask.
+- `--_chevron-size`: Width and height of the select arrow.
+- `--_ease`: Easing of the transitions. Defaults to `--ui-ease`.
+- `--_field-padding-block`: The preferred block padding of the control. Set by the size classes.
+- `--_field-padding-inline`: The inline padding of the control and affixes. `.ui-large` sets it.
+- `--_font-size`: The font size of the control and affixes.
+- `--_motion`: Motion multiplier for the transitions. `0` turns them off.
+- `--_size`: The height of `.ui-field`, a minimum so a textarea can grow, and the width and height of a color field. Defaults to `--ui-field-size`, set by the size classes.
+
+Outputs: `--_affix-text-color`, `--_arrow-padding`, `--_bg-color`, `--_border-color`, `--_duration`, `--_field-padding-block-fit` and `--_helper-text-color`.
+
+### textarea.css
+
+- `--_max-block-size`: Maximum height the `textarea` grows to with its content.
+
+## Theme tokens
+
+The stylesheets read `--ui-disabled-opacity`, `--ui-duration`, `--ui-ease`, `--ui-field-bg-color`, `--ui-field-border-color`, `--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-padding-inline`, `--ui-field-radius`, `--ui-field-required-text-color`, `--ui-field-size`, `--ui-field-size-large`, `--ui-field-size-small`, `--ui-field-size-x-small`, `--ui-focus-ring-color`, `--ui-focus-ring-offset`, `--ui-focus-ring-style`, `--ui-focus-ring-width`, `--ui-font-body`, `--ui-font-size-caption`, `--ui-font-size-control`, `--ui-font-size-small`, `--ui-icon-size`, `--ui-icon-size-small`, `--ui-invalid`, `--ui-invalid-text`, `--ui-line-height-control`, `--ui-line-height-tight`, `--ui-motion`, `--ui-primary`, `--ui-radius`, `--ui-shadow-control`, `--ui-shadow-field`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-space-4`, `--ui-surface`, `--ui-surface-tonal`, `--ui-surface-tonal-hover`, `--ui-text` and `--ui-text-strong`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Variants
+
+```html
+<label class="ui-textarea">
+  <span class="ui-label">Outlined</span>
+  <span class="ui-field">
+    <textarea placeholder="Placeholder"></textarea>
+  </span>
+</label>
+
+<label class="ui-textarea ui-filled">
+  <span class="ui-label">Filled</span>
+  <span class="ui-field">
+    <textarea placeholder="Placeholder"></textarea>
+  </span>
+</label>
+```
+
+## Astro
+
+`import { Textarea } from "opui-css/astro"`
+
+- `Textarea` named slots: `bottom`, `end`, `end-text`, `label`, `start`, `start-text` and `top`. Fill one with `slot="bottom"` on a child.
+
+### Example: Variants
+
+```astro
+---
+import { Textarea } from "opui-css/astro"
+---
+
+<Textarea label="Outlined" placeholder="Placeholder" />
+<Textarea label="Filled" placeholder="Placeholder" variant="filled" />
+```
+
+## React
+
+`import { Textarea } from "opui-css/react"`
+
+- `Textarea` slot props (`ReactNode`): `bottom`, `children`, `end`, `endText`, `label`, `start`, `startText` and `top`.
+- Client components (`"use client"`): `Textarea`.
+
+### Example: Variants
+
+```tsx
+import { Textarea } from "opui-css/react"
+
+export default function Variants() {
+  return (
+    <>
+      <Textarea label="Outlined" placeholder="Placeholder" />
+      <Textarea label="Filled" placeholder="Placeholder" variant="filled" />
+    </>
+  )
+}
+```
+
+## Svelte
+
+`import { Textarea } from "opui-css/svelte"`
+
+- `Textarea` slot snippets: `bottom`, `children`, `end`, `endText`, `label`, `start`, `startText` and `top`.
+- Hydration: `bind:value` on `Textarea`. 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: Variants
+
+```svelte
+<script lang="ts">
+  import { Textarea } from "opui-css/svelte"
+</script>
+
+<Textarea label="Outlined" placeholder="Placeholder" />
+<Textarea label="Filled" placeholder="Placeholder" variant="filled" />
+```
+
+## Vue
+
+`import { Textarea } from "opui-css/vue"`
+
+- `Textarea` named slots: `bottom`, `end`, `end-text`, `label`, `start`, `start-text` and `top`. Fill one with `<template #bottom>`.
+- Hydration: `v-model` on `Textarea`. 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: Variants
+
+```vue
+<script setup lang="ts">
+import { Textarea } from "opui-css/vue"
+</script>
+
+<template>
+  <Textarea label="Outlined" placeholder="Placeholder" />
+  <Textarea label="Filled" placeholder="Placeholder" variant="filled" />
+</template>
+```