opui-css 5.4.3 → 6.0.0-rc.2

package/skills/opui/references/tabs.md

@@ -0,0 +1,257 @@
+# Tabs
+
+Radio inputs that switch panels. To pick an option, 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.
+- `orientation`: `"horizontal"` (default), `"vertical"` (`.ui-vertical`). The orientation of the tabs. `vertical` stacks them in a column at the inline start, with the panel beside them.
+- `overflow`: `"scroll"` (default), `"wrap"` (`.ui-overflow-wrap`). What the tabs do when they don't fit. `"scroll"` keeps them on one row and scrolls it sideways, and `"wrap"` wraps them onto more rows. Vertical tabs ignore it: long labels wrap within the column.
+- `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.
+- `--_panel-gap`: Space between the tab list and the panel. Defaults to `--ui-space-2`.
+- `--_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`, `--_focus-ring-duration`, `--_indicator-duration` and `--_panel-padding`.
+
+## 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-ease-move`, `--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" aria-label="Account settings" role="radiogroup">
+  <input
+    checked
+    class="ui-input"
+    id="tabs-basics-1"
+    name="basic-tabs"
+    type="radio"
+  />
+  <label for="tabs-basics-1" class="ui-label">Profile</label>
+  <div class="ui-panel">Profile settings and information.</div>
+  <input class="ui-input" id="tabs-basics-2" name="basic-tabs" type="radio" />
+  <label for="tabs-basics-2" class="ui-label">Settings</label>
+  <div class="ui-panel">General account settings.</div>
+  <input class="ui-input" id="tabs-basics-3" name="basic-tabs" type="radio" />
+  <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 aria-label="Account settings" name="basic-tabs" role="radiogroup">
+  <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 aria-label="Account settings" name="basic-tabs" role="radiogroup">
+      <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 aria-label="Account settings" name="basic-tabs" role="radiogroup">
+  <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>
+```
+
+## 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 aria-label="Account settings" name="basic-tabs" role="radiogroup">
+    <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,181 @@
+# 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
+
+- `.ui-text-field` (root): Container element, a `<label>`, or the `<opui-text-field>` custom element with `passwordToggle`.
+- `.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, and the password toggle.
+- `.ui-field > .ui-end > .ui-button` (prop `passwordToggle`, prop `passwordToggleLabel`, slot `icon-checked`, slot `icon-unchecked`): The password toggle, with `aria-pressed` and `command="--toggle-password"`. Renders an eye in `.ui-icon-unchecked` and a crossed-out eye in `.ui-icon-checked` by default, or the icons in `icon-unchecked` and `icon-checked`, and shows one of them. Hidden until `<opui-text-field>` is defined.
+- `.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.
+- `<opui-character-count>` (prop `characterCount`, prop `characterCountLabel`): The character count, `aria-hidden` so it stays out of the field's name. Near the limit, a live region outside the label announces the characters left.
+
+### Props and modifiers
+
+- `autoFit`: `boolean`, `.ui-auto-fit`. Lets the width follow the content, from `25ch`.
+- `characterCount`: `boolean`. Shows the characters typed out of `maxlength` in the end text, and announces how many are left once 10% or 10 are left, whichever is more. The component loads `opui-css/elements/character-count.js`, which keeps the count.
+- `characterCountLabel`: `string`, default `"Characters left: {count}"`. The announcement near the limit, with `{count}` for the characters left. Pass it translated.
+- `disabled`: `boolean`, `input[aria-disabled="true"]`, `input[disabled]`. Dims the field and blocks input. `aria-disabled="true"` looks the same, but keeps the field focusable, its text editable and its value in the form.
+- `dropZone`: `boolean`, `.ui-drop-zone`. Makes a `type="file"` field a tall drop zone with a dashed border. The whole input takes files dropped on it, and a click opens the file picker.
+- `error`: `boolean`, `input[aria-invalid="true"]`. Marks the control invalid and shows error styles.
+- `hideLabel`: `boolean`, `.ui-text-field > :is(span, label).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>`. With `passwordToggle`, the label and the toggle point at it, so the component generates one when it's left out, and the start and end text ids start with it: `x-start-text` and `x-end-text` for `id="x"`.
+- `inputmode`: `string`. The `inputmode` of the `<input>`. With `type="numeric"` it is `numeric`.
+- `name`: `string`. The name of the `<input>`. Inside a `FieldGroup`, the group's `name` applies.
+- `passwordToggle`: `boolean`. Adds a button to the end of a `type="password"` field that shows and hides the password. The root becomes `<opui-text-field>` with a `<label for>`, since a button inside a `<label>` would join the field's name, and the start and end text describe the input. The component loads `opui-css/elements/text-field.js`, which runs the button.
+- `passwordToggleLabel`: `string`, default `"Show password"`. The accessible name of the password toggle.
+- `pattern`: `string`. The `pattern` of the `<input>`. With `type="numeric"` it is `[0-9]*`.
+- `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 its control has focus without `:focus-visible`, such as a clicked file or color input or a Select picked with the pointer. Text-entry fields show the focus ring on click too. 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`.
+- `--_end-end-radius`: The radius of the end-end corner of `.ui-field`. Defaults to `--_radius`. A `ControlGroup` sets it to `0` where the field joins the next control.
+- `--_end-start-radius`: The radius of the end-start corner of `.ui-field`. Defaults to `--_radius`. A `ControlGroup` sets it to `0` where the field joins another control.
+- `--_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-field-padding-inline`, or `--ui-space-2` when a theme leaves it unset, and `--ui-field-padding-inline-large` or `--ui-space-3` in `.ui-large`.
+- `--_font-size`: The font size of the control and affixes.
+- `--_motion`: Motion multiplier for the transitions. `0` turns them off.
+- `--_radius`: The corner radius of `.ui-field` and a file input's button. Defaults to `--ui-field-radius`, or `--ui-radius` when the theme doesn't set it.
+- `--_shadow`: The shadow of `.ui-field`. Defaults to `--ui-shadow-field`, or `--ui-shadow-control` when the theme leaves it unset. `none` in a `ControlGroup`.
+- `--_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.
+- `--_start-end-radius`: The radius of the start-end corner of `.ui-field`. Defaults to `--_radius`. A `ControlGroup` sets it to `0` where the field joins another control.
+- `--_start-start-radius`: The radius of the start-start corner of `.ui-field`. Defaults to `--_radius`. A `ControlGroup` sets it to `0` where the field joins the control before it.
+
+Outputs: `--_affix-button-size`, `--_affix-text-color`, `--_arrow-padding`, `--_bg-color`, `--_border-color`, `--_duration`, `--_field-padding-block-fit`, `--_file-button-inset` 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-padding-inline-large`, `--ui-field-placeholder-text-color`, `--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-border-color`, `--ui-focus-border-width`, `--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-space-5`, `--ui-surface`, `--ui-surface-tonal`, `--ui-surface-tonal-hover`, `--ui-text`, `--ui-text-strong` and `--ui-text-subtle`. `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 placeholder="Placeholder" type="text" />
+  </span>
+</label>
+<label class="ui-text-field ui-filled">
+  <span class="ui-label">Filled</span>
+  <span class="ui-field">
+    <input placeholder="Placeholder" type="text" />
+  </span>
+</label>
+```
+
+## Astro
+
+`import { TextField } from "opui-css/astro"`
+
+- `TextField` named slots: `bottom`, `end`, `end-text`, `icon-checked`, `icon-unchecked`, `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`, `iconChecked`, `iconUnchecked`, `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`, `iconChecked`, `iconUnchecked`, `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`, `icon-checked`, `icon-unchecked`, `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,177 @@
+# 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.
+- `<opui-character-count>` (prop `characterCount`, prop `characterCountLabel`): The character count, `aria-hidden` so it stays out of the field's name. Near the limit, a live region outside the label announces the characters left.
+
+### Props and modifiers
+
+- `autoFit`: `boolean`, `.ui-auto-fit`. Lets the width follow the content and allows resizing in both directions.
+- `characterCount`: `boolean`. Shows the characters typed out of `maxlength` in the end text, and announces how many are left once 10% or 10 are left, whichever is more. The component loads `opui-css/elements/character-count.js`, which keeps the count.
+- `characterCountLabel`: `string`, default `"Characters left: {count}"`. The announcement near the limit, with `{count}` for the characters left. Pass it translated.
+- `disabled`: `boolean`, `textarea[aria-disabled="true"]`, `textarea[disabled]`. Dims the field and blocks input. `aria-disabled="true"` looks the same, but keeps the field focusable, its text editable and its value in the form.
+- `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 `maxlength` and `placeholder`, and `class` and `style` go to the root `<label>`.
+- React: Attributes that aren't props go to the `<textarea>`, like `maxlength` 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 its control has focus without `:focus-visible`, such as a clicked file or color input or a Select picked with the pointer. Text-entry fields show the focus ring on click too. 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`.
+- `--_end-end-radius`: The radius of the end-end corner of `.ui-field`. Defaults to `--_radius`. A `ControlGroup` sets it to `0` where the field joins the next control.
+- `--_end-start-radius`: The radius of the end-start corner of `.ui-field`. Defaults to `--_radius`. A `ControlGroup` sets it to `0` where the field joins another control.
+- `--_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-field-padding-inline`, or `--ui-space-2` when a theme leaves it unset, and `--ui-field-padding-inline-large` or `--ui-space-3` in `.ui-large`.
+- `--_font-size`: The font size of the control and affixes.
+- `--_motion`: Motion multiplier for the transitions. `0` turns them off.
+- `--_radius`: The corner radius of `.ui-field` and a file input's button. Defaults to `--ui-field-radius`, or `--ui-radius` when the theme doesn't set it.
+- `--_shadow`: The shadow of `.ui-field`. Defaults to `--ui-shadow-field`, or `--ui-shadow-control` when the theme leaves it unset. `none` in a `ControlGroup`.
+- `--_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.
+- `--_start-end-radius`: The radius of the start-end corner of `.ui-field`. Defaults to `--_radius`. A `ControlGroup` sets it to `0` where the field joins another control.
+- `--_start-start-radius`: The radius of the start-start corner of `.ui-field`. Defaults to `--_radius`. A `ControlGroup` sets it to `0` where the field joins the control before it.
+
+Outputs: `--_affix-button-size`, `--_affix-text-color`, `--_arrow-padding`, `--_bg-color`, `--_border-color`, `--_duration`, `--_field-padding-block-fit`, `--_file-button-inset` 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-padding-inline-large`, `--ui-field-placeholder-text-color`, `--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-border-color`, `--ui-focus-border-width`, `--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-space-5`, `--ui-surface`, `--ui-surface-tonal`, `--ui-surface-tonal-hover`, `--ui-text`, `--ui-text-strong` and `--ui-text-subtle`. `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>
+```