opui-css 5.4.3 → 6.0.0-rc.2

package/skills/opui/references/switch.md

@@ -0,0 +1,269 @@
+# Switch
+
+A setting that applies right away. For choices submitted with a form, use a Checkbox.
+
+- CSS: `opui-css/css/components/switch.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/switch.md), [Astro](https://open-props-ui.netlify.app/astro/components/switch.md), [React](https://open-props-ui.netlify.app/react/components/switch.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/switch.md), [Vue](https://open-props-ui.netlify.app/vue/components/switch.md).
+- The docs page also documents `FieldGroup`, see `form.md`.
+
+## Switch
+
+### Parts
+
+- `label.ui-switch` (root): Container element.
+- `<input>` (model): The switch input.
+- `.ui-icon-unchecked` (slot `icon-unchecked`): An optional icon on the track, shown while unchecked.
+- `.ui-icon-checked` (slot `icon-checked`): An optional icon on the track, shown while checked.
+- `.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 switch 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 switch and shows a not-allowed cursor. `aria-disabled="true"` looks the same, but keeps the switch 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-switch > 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 switch.
+- `required`: `boolean`, `input[required]`. Adds a required mark after the label. The form won't submit until it's on.
+- `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 switch 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: `checked` (`boolean | (string | number)[]`), the checked state, or the checked values of a group. Astro and React `checked`, Svelte `bind:checked`, `bind:group`, Vue `v-model`.
+
+### Notes
+
+- HTML: The input needs `type="checkbox"` and `role="switch"`.
+- 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`, 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`.
+
+## SwitchInput
+
+### Parts
+
+- `<input type="checkbox" role="switch">` (root): The switch input, without a label.
+
+### Props and modifiers
+
+- `name`: `string`. The name of the `<input>`. Inside a `FieldGroup`, the group's `name` when omitted.
+
+Model: `checked` (`boolean | (string | number)[]`), the checked state, or the checked values of a group. Astro and React `checked`, Svelte `bind:checked`, `bind:group`, Vue `v-model`.
+
+### Notes
+
+- Astro, React, Svelte and Vue: The switch `<input>` without the label, for a custom layout such as the end of a list item. 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.
+
+### switch.css
+
+- `--_accent`: Fill and border of the checked track. In forced colors `SelectedItem`, `GrayText` when disabled.
+- `--_on-accent`: Color of the checked thumb on `--_accent`. `SelectedItemText` in forced colors.
+- `--_thumb-bg-color`: Color of the unchecked thumb. Defaults to `--ui-switch-thumb-bg-color`. The checked thumb uses `--_on-accent`.
+- `--_thumb-size`: Width and height of the thumb. Defaults to `--ui-switch-thumb-size`, set by the size classes.
+- `--_track-bg-color`: Background of the unchecked track. `--ui-track-bg-color` when the theme sets it, otherwise `--ui-switch-track-bg-color`.
+- `--_track-block-size`: Height of the track. Defaults to `--ui-switch-track-block-size`, set by the size classes.
+- `--_track-border-color`: Border of the track. Defaults to `--ui-choice-border-color`, or `--ui-field-border-color` when the theme leaves it unset, like the checkbox and radio borders, and `--_accent` when checked. A focused switch draws `--ui-focus-border-color` instead when the theme sets it.
+- `--_track-inline-size`: Width of the track. Defaults to `--ui-switch-track-inline-size`, set by the size classes.
+
+Outputs: `--_icon-size`, `--_size`, `--_thumb-inset` and `--_thumb-outline-width`.
+
+### choice.css
+
+- `--_accent`: Fill and border of the checked input. `--ui-choice-accent` when the theme sets it, else `--ui-control-accent`, otherwise `--ui-primary` with its lightness capped in dark mode, and `--ui-invalid`, capped the same way, when invalid.
+- `--_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, else `--ui-on-control-accent`, otherwise `--ui-on-primary`, or `--ui-on-fill` in dark mode. `--ui-on-fill` when invalid.
+- `--_padding`: Padding of `.ui-card`. `--ui-card-padding`, or `--ui-space-3` when a theme leaves it unset, and `--ui-space-2` in `.ui-small` and `.ui-x-small`.
+- `--_ripple-size`: Size of the hover ripple of checkboxes and radios, relative to the input. Set on `input`.
+- `--_selected-bg-color`: Background of a checked `.ui-card`: `--_accent` at `--ui-state-selected-alpha-accent`, so the fill, the border and the checked input share one color, red when invalid.
+- `--_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`, `--_ripple-scale` and `--_shadow`.
+
+### form.css
+
+- `--_field-min-inline-size`: Width a field in a horizontal `.ui-field-group` wraps at. Fields grow from it to share the row.
+
+### card.css
+
+- `--_ease`: Easing of the card link border transition and 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`.
+- `--_footer-gap`: Gap between the items in a dialog's or drawer's `.ui-footer` and between the buttons in its `.ui-actions`. Defaults to `--ui-space-2`.
+- `--_gap`: Gap between the parts. `--ui-space-3`, or `--ui-space-2` in `.ui-dense`. The part after an image subtracts it from its padding.
+- `--_media-inline-size`: Width of the image when it sits at the start of the card, and the start margin of the parts next to it. Defaults to `40%` of the card.
+- `--_motion`: Motion multiplier for the card link border transition and the focus ring animation. `0` turns them 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.
+- `--_scroll-shadow`: Shadow at the edges of a dialog's or drawer's `.ui-content` when it scrolls. Defaults to `--ui-shadow-scroll`.
+- `--_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`.
+- `--_title-font-size`: Font size of a dialog's or drawer's title, a heading in `.ui-header`. Defaults to `--ui-font-size-h4`.
+- `--_tonal-bg-color`: Background of `.ui-tonal`. Defaults to `--ui-surface-tonal`.
+
+Outputs: `--_bg-color`, `--_border-color`, `--_border-width`, `--_content-anchor`, `--_duration`, `--_orientation` and `--_shadow`.
+
+## Theme tokens
+
+The stylesheets read `--ui-border-color`, `--ui-border-color-on-raised`, `--ui-border-color-raised`, `--ui-border-width`, `--ui-border-width-thick`, `--ui-card-padding`, `--ui-choice-accent`, `--ui-choice-border-color`, `--ui-choice-border-width`, `--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-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-body`, `--ui-font-size-caption`, `--ui-font-size-h4`, `--ui-invalid`, `--ui-invalid-text`, `--ui-letter-spacing-heading`, `--ui-line-height-control`, `--ui-line-height-tight`, `--ui-motion`, `--ui-on-control-accent`, `--ui-on-fill`, `--ui-on-primary`, `--ui-primary`, `--ui-radius`, `--ui-radius-round`, `--ui-rhythm-step`, `--ui-shadow-elevated`, `--ui-shadow-scroll`, `--ui-shadow-surface`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-space-4`, `--ui-space-5`, `--ui-space-6`, `--ui-state-selected-alpha-accent`, `--ui-surface`, `--ui-surface-elevated`, `--ui-surface-tonal`, `--ui-surface-tonal-hover`, `--ui-switch-thumb-bg-color`, `--ui-switch-thumb-size`, `--ui-switch-thumb-size-large`, `--ui-switch-thumb-size-small`, `--ui-switch-thumb-size-x-small`, `--ui-switch-track-bg-color`, `--ui-switch-track-block-size`, `--ui-switch-track-block-size-large`, `--ui-switch-track-block-size-small`, `--ui-switch-track-block-size-x-small`, `--ui-switch-track-inline-size`, `--ui-switch-track-inline-size-large`, `--ui-switch-track-inline-size-small`, `--ui-switch-track-inline-size-x-small`, `--ui-text`, `--ui-text-strong` and `--ui-track-bg-color`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Basics
+
+```html
+<label class="ui-switch">
+  <input
+    type="checkbox"
+    role="switch"
+    name="switch-basics"
+    checked
+    value="wifi"
+  />
+  <span class="ui-sr-only">Wi-Fi</span>
+</label>
+<label class="ui-switch">
+  <input type="checkbox" role="switch" name="switch-basics" value="bluetooth" />
+  <span class="ui-sr-only">Bluetooth</span>
+</label>
+<label class="ui-switch">
+  <input
+    type="checkbox"
+    role="switch"
+    name="switch-basics"
+    checked
+    disabled
+    value="location"
+  />
+  <span class="ui-sr-only">Location</span>
+</label>
+<label class="ui-switch">
+  <input
+    type="checkbox"
+    role="switch"
+    name="switch-basics"
+    disabled
+    value="airplane-mode"
+  />
+  <span class="ui-sr-only">Airplane mode</span>
+</label>
+```
+
+## Astro
+
+`import { Switch, SwitchInput } from "opui-css/astro"`
+
+- `Switch` named slots: `end-text`, `icon-checked` and `icon-unchecked`. Fill one with `slot="end-text"` on a child.
+
+### Example: Basics
+
+```astro
+---
+import { Switch } from "opui-css/astro"
+---
+
+<Switch checked hideLabel name="switch-basics" value="wifi">Wi-Fi</Switch>
+<Switch hideLabel name="switch-basics" value="bluetooth">Bluetooth</Switch>
+<Switch checked disabled hideLabel name="switch-basics" value="location"
+  >Location</Switch
+>
+<Switch disabled hideLabel name="switch-basics" value="airplane-mode"
+  >Airplane mode</Switch
+>
+```
+
+## React
+
+`import { Switch, SwitchInput } from "opui-css/react"`
+
+- `Switch` slot props (`ReactNode`): `children`, `endText`, `iconChecked` and `iconUnchecked`.
+- Client components (`"use client"`): `SwitchInput`.
+
+### Example: Basics
+
+```tsx
+import { Switch } from "opui-css/react"
+
+export default function Basics() {
+  return (
+    <>
+      <Switch defaultChecked hideLabel name="switch-basics" value="wifi">
+        Wi-Fi
+      </Switch>
+      <Switch hideLabel name="switch-basics" value="bluetooth">
+        Bluetooth
+      </Switch>
+      <Switch
+        defaultChecked
+        disabled
+        hideLabel
+        name="switch-basics"
+        value="location"
+      >
+        Location
+      </Switch>
+      <Switch disabled hideLabel name="switch-basics" value="airplane-mode">
+        Airplane mode
+      </Switch>
+    </>
+  )
+}
+```
+
+## Svelte
+
+`import { Switch, SwitchInput } from "opui-css/svelte"`
+
+- `Switch` slot snippets: `children`, `endText`, `iconChecked` and `iconUnchecked`.
+- Hydration: `bind:checked` and `bind:group` on `Switch` and `SwitchInput`. 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 { Switch } from "opui-css/svelte"
+</script>
+
+<Switch defaultChecked hideLabel name="switch-basics" value="wifi">Wi-Fi</Switch
+>
+<Switch hideLabel name="switch-basics" value="bluetooth">Bluetooth</Switch>
+<Switch defaultChecked disabled hideLabel name="switch-basics" value="location"
+  >Location</Switch
+>
+<Switch disabled hideLabel name="switch-basics" value="airplane-mode"
+  >Airplane mode</Switch
+>
+```
+
+## Vue
+
+`import { Switch, SwitchInput } from "opui-css/vue"`
+
+- `Switch` named slots: `end-text`, `icon-checked` and `icon-unchecked`. Fill one with `<template #end-text>`.
+- Hydration: `v-model` on `Switch` and `SwitchInput`. 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 { Switch } from "opui-css/vue"
+</script>
+
+<template>
+  <Switch checked hideLabel name="switch-basics" value="wifi">Wi-Fi</Switch>
+  <Switch hideLabel name="switch-basics" value="bluetooth">Bluetooth</Switch>
+  <Switch checked disabled hideLabel name="switch-basics" value="location"
+    >Location</Switch
+  >
+  <Switch disabled hideLabel name="switch-basics" value="airplane-mode"
+    >Airplane mode</Switch
+  >
+</template>
+```

package/skills/opui/references/table.md

@@ -0,0 +1,344 @@
+# Table
+
+Displays tabular data. Basic tables with row and column headers, and optional captions and footers.
+
+- CSS: `opui-css/css/components/table.css` and `opui-css/css/components/sortable-table.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/table.md), [Astro](https://open-props-ui.netlify.app/astro/components/table.md), [React](https://open-props-ui.netlify.app/react/components/table.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/table.md), [Vue](https://open-props-ui.netlify.app/vue/components/table.md).
+
+## Table
+
+### Parts
+
+- `table.ui-table` (root): Container element.
+- `<thead>` (`TableHead`): The header rows.
+- `<th>` (`TableHeaderCell`): A header cell.
+- `<tbody>` (`TableBody`): The body rows.
+- `<tr>` (`TableRow`): A row.
+- `<td>` (`TableCell`): A data cell.
+- `<tfoot>` (`TableFoot`): Optional footer rows, such as totals.
+- `<caption>` (`TableCaption`): An optional title for the table.
+
+### Props and modifiers
+
+- `density`: `"dense"` (`.ui-dense`), `"normal"` (default), `"spacious"` (`.ui-spacious`). The cell padding.
+- `flush`: `boolean`, `.ui-flush`. Drops the block margin, for a table that sits in a card or another padded box.
+- `overflow`: `"scroll"` (`.ui-overflow-scroll`), `"wrap"` (default). What the table does when its columns don't fit. `"wrap"` lets the cells wrap their text, and `"scroll"` keeps each cell on one line, scrolls the table sideways and lets the last column take the space left over. Give a scrolling table `tabindex="0"`, so keyboard users can scroll it.
+- `stickyHeader`: `boolean`, `.ui-sticky-header`. Keeps the header rows at the top of the nearest scroll container. Offset it with `--_sticky-offset`.
+
+### Slots
+
+- `default`: The table sections.
+
+### Notes
+
+- Astro, React, Svelte and Vue: Set column widths with `TableColumnGroup` and `TableColumn`.
+
+## TableHeaderCell
+
+### Parts
+
+- `<th>` (root): A header cell, inside `TableRow`.
+
+### Props and modifiers
+
+- `numeric`: `boolean`, `.ui-numeric`. Aligns the header to the end, over a column of `numeric` cells.
+- `sortable`: `boolean`, `[data-sort]`. Wraps the label in a `<button>` that sorts the table by this column, inside a `SortableTable`.
+
+### Slots
+
+- `default`: The header content.
+
+## TableCell
+
+### Parts
+
+- `<td>` (root): A data cell, inside `TableRow`.
+
+### Props and modifiers
+
+- `numeric`: `boolean`, `.ui-numeric`. Aligns the cell to the end and uses tabular figures, so the digits of a column line up.
+
+### Slots
+
+- `default`: The cell content.
+
+## TableColumnGroup
+
+### Parts
+
+- `<colgroup>` (root): A group of columns, before the table head.
+
+### Slots
+
+- `default`: The `TableColumn`s.
+
+## TableColumn
+
+### Parts
+
+- `<col>` (root): A column, inside `TableColumnGroup`.
+
+### Props and modifiers
+
+- `width`: `string`, `width`. The column width, merged into `style`.
+
+## SortableTable
+
+### Parts
+
+- `opui-sortable-table.ui-sortable-table` (root): The `<opui-sortable-table>` custom element, `display: contents`, around the table. It fires a cancelable `sort` event, moves the body rows and announces the new order.
+- `th[data-sort] > button` (`TableHeaderCell`): The button around a sortable header's label. A press sorts by its column, ascending first, and sets `aria-sort` on the header.
+
+### Props and modifiers
+
+- `ascendingLabel`: `string`, `[ascending-label]`, default `"{column}, sorted ascending"`. What a sort in ascending order announces, with `{column}` where the header's label goes.
+- `descendingLabel`: `string`, `[descending-label]`, default `"{column}, sorted descending"`. What a sort in descending order announces, with `{column}` where the header's label goes.
+- `onsort` (Svelte): `EventHandler<CustomEvent<SortDetail>, HTMLElement>`. Called before the rows are sorted, with the column index, the direction and the header in `event.detail`. `preventDefault()` keeps the rows where they are.
+- `onSort` (React): `(event: CustomEvent<SortDetail>) => void`. Called before the rows are sorted, with the column index, the direction and the header in `event.detail`. `preventDefault()` keeps the rows where they are.
+
+### Slots
+
+- `default`: The `Table`.
+
+### Notes
+
+- HTML: Wrap the table in `<opui-sortable-table class="ui-sortable-table">`, add `data-sort` to each sortable header with a `<button type="button">` around its label, and import `opui-css/elements/sortable-table.js`. A cell sorts by its `data-sort-value`, or else its text.
+- Astro: The component loads `opui-css/elements/sortable-table.js`. The element moves the rows it sorts, so when the framework renders the rows from data, call `preventDefault()` on the `sort` event and sort the data instead.
+- React: The component loads `opui-css/elements/sortable-table.js` once it mounts, unless the page imports it first. The element moves the rows it sorts, so when the framework renders the rows from data, call `preventDefault()` on the `sort` event and sort the data instead.
+- Svelte and Vue: The component imports `opui-css/elements/sortable-table.js`, so the element runs as soon as the component's code loads. The element moves the rows it sorts, so when the framework renders the rows from data, call `preventDefault()` on the `sort` event and sort the data instead.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### table.css
+
+- `--_ease`: Easing of the row and header shadow transitions. Defaults to `--ui-ease`.
+- `--_motion`: Motion multiplier for the row and header shadow transitions. `0` turns them off.
+- `--_radius`: Corner radius of the table and its corner cells. Defaults to `--ui-radius`.
+- `--_scroll-shadow`: Shadow of the stuck header in `.ui-sticky-header`. Defaults to `--ui-shadow-scroll`.
+- `--_sticky-offset`: Distance from the top of the scroll container where the header of `.ui-sticky-header` sticks.
+
+Outputs: `--_duration` and `--_row-duration`.
+
+### sortable-table.css
+
+- `--_arrow-image`: The sort arrow after a header's label, as an image used for a mask.
+- `--_arrow-size`: Width and height of the sort arrow.
+- `--_ease`: Easing of the sort arrow's transitions. Defaults to `--ui-ease`.
+- `--_motion`: Motion multiplier for the transitions. `0` turns them off.
+
+Outputs: `--_duration`.
+
+## Theme tokens
+
+The stylesheets read `--ui-border-color`, `--ui-border-color-on-filled`, `--ui-border-width`, `--ui-duration`, `--ui-duration-fast`, `--ui-ease`, `--ui-field-border-color-on-filled`, `--ui-focus-ring-color`, `--ui-focus-ring-offset`, `--ui-focus-ring-style`, `--ui-focus-ring-width`, `--ui-font-size-small`, `--ui-font-weight-semibold`, `--ui-icon-size-small`, `--ui-line-height-tight`, `--ui-motion`, `--ui-radius`, `--ui-radius-small`, `--ui-shadow-scroll`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-space-6`, `--ui-surface`, `--ui-surface-filled`, `--ui-text-strong` and `--ui-text-subtle`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Normal
+
+```html
+<table class="ui-table">
+  <caption>
+    Band Members
+  </caption>
+  <thead>
+    <tr>
+      <th>Band</th>
+      <th>Name</th>
+      <th>Instrument</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Korn</td>
+      <td>Jonathan Davis</td>
+      <td>Vocals</td>
+    </tr>
+    <tr>
+      <td>Radiohead</td>
+      <td>Ed O'Brien</td>
+      <td>Guitar/Vocals</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+## Astro
+
+`import { SortableTable, Table, TableBody, TableCaption, TableCell, TableColumn, TableColumnGroup, TableFoot, TableHead, TableHeaderCell, TableRow } from "opui-css/astro"`
+
+### Example: Normal
+
+```astro
+---
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+} from "opui-css/astro"
+---
+
+<Table>
+  <TableCaption>Band Members</TableCaption>
+  <TableHead>
+    <TableRow>
+      <TableHeaderCell>Band</TableHeaderCell>
+      <TableHeaderCell>Name</TableHeaderCell>
+      <TableHeaderCell>Instrument</TableHeaderCell>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    <TableRow>
+      <TableCell>Korn</TableCell>
+      <TableCell>Jonathan Davis</TableCell>
+      <TableCell>Vocals</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Radiohead</TableCell>
+      <TableCell>Ed O'Brien</TableCell>
+      <TableCell>Guitar/Vocals</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+## React
+
+`import { SortableTable, Table, TableBody, TableCaption, TableCell, TableColumn, TableColumnGroup, TableFoot, TableHead, TableHeaderCell, TableRow } from "opui-css/react"`
+
+- Client components (`"use client"`): `SortableTable`.
+
+### Example: Normal
+
+```tsx
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+} from "opui-css/react"
+
+export default function Normal() {
+  return (
+    <Table>
+      <TableCaption>Band Members</TableCaption>
+      <TableHead>
+        <TableRow>
+          <TableHeaderCell>Band</TableHeaderCell>
+          <TableHeaderCell>Name</TableHeaderCell>
+          <TableHeaderCell>Instrument</TableHeaderCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Korn</TableCell>
+          <TableCell>Jonathan Davis</TableCell>
+          <TableCell>Vocals</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Radiohead</TableCell>
+          <TableCell>Ed O'Brien</TableCell>
+          <TableCell>Guitar/Vocals</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  )
+}
+```
+
+## Svelte
+
+`import { SortableTable, Table, TableBody, TableCaption, TableCell, TableColumn, TableColumnGroup, TableFoot, TableHead, TableHeaderCell, TableRow } from "opui-css/svelte"`
+
+### Example: Normal
+
+```svelte
+<script lang="ts">
+  import {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeaderCell,
+    TableRow,
+  } from "opui-css/svelte"
+</script>
+
+<Table>
+  <TableCaption>Band Members</TableCaption>
+  <TableHead>
+    <TableRow>
+      <TableHeaderCell>Band</TableHeaderCell>
+      <TableHeaderCell>Name</TableHeaderCell>
+      <TableHeaderCell>Instrument</TableHeaderCell>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    <TableRow>
+      <TableCell>Korn</TableCell>
+      <TableCell>Jonathan Davis</TableCell>
+      <TableCell>Vocals</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Radiohead</TableCell>
+      <TableCell>Ed O'Brien</TableCell>
+      <TableCell>Guitar/Vocals</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+## Vue
+
+`import { SortableTable, Table, TableBody, TableCaption, TableCell, TableColumn, TableColumnGroup, TableFoot, TableHead, TableHeaderCell, TableRow } from "opui-css/vue"`
+
+### Example: Normal
+
+```vue
+<script setup lang="ts">
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+} from "opui-css/vue"
+</script>
+
+<template>
+  <Table>
+    <TableCaption>Band Members</TableCaption>
+    <TableHead>
+      <TableRow>
+        <TableHeaderCell>Band</TableHeaderCell>
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Instrument</TableHeaderCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell>Korn</TableCell>
+        <TableCell>Jonathan Davis</TableCell>
+        <TableCell>Vocals</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Radiohead</TableCell>
+        <TableCell>Ed O'Brien</TableCell>
+        <TableCell>Guitar/Vocals</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</template>
+```