opui-css 5.4.2 → 6.0.0-rc.1

package/skills/opui/references/badge.md

@@ -0,0 +1,199 @@
+# Badge
+
+Badges attach a small count or status dot to another element.
+
+- CSS: `opui-css/css/components/badge.css` and `opui-css/css/components/anchor.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/badge.md), [Astro](https://open-props-ui.netlify.app/astro/components/badge.md), [React](https://open-props-ui.netlify.app/react/components/badge.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/badge.md), [Vue](https://open-props-ui.netlify.app/vue/components/badge.md).
+
+## Badge
+
+### Parts
+
+- `.ui-badge` (root): Container element.
+- `& > :first-child` (slot `default`): The element the badge is anchored to.
+- `.ui-indicator` (prop `label`, slot `indicator`): The indicator, inside `.ui-floating`. Holds `label`, the visible text with `hideLabel`, or only screen reader text with `dot`.
+
+### Props and modifiers
+
+- `color`: `"critical"` (`.ui-critical`), `"info"` (`.ui-info`), `"neutral"` (`.ui-neutral`), `"success"` (`.ui-success`), `"warning"` (`.ui-warning`). Optional colors.
+- `corner`: `"end-end"` (`.ui-end-end`), `"end-start"` (`.ui-end-start`), `"start-end"` (default), `"start-start"` (`.ui-start-start`). The corner the indicator sits on.
+- `dot`: `boolean`, `.ui-dot`. Renders the indicator as a dot. `label` stays as screen reader text, and the `indicator` slot isn't shown.
+- `hideLabel`: `boolean`, `.ui-indicator > span.ui-sr-only`. Hides `label` visually, for the whole sentence screen readers read, such as "5 unread messages". The `indicator` slot then holds the visible text and is hidden from screen readers.
+- `invisible`: `boolean`, `.ui-invisible`. Hides the indicator.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### badge.css
+
+- `--_border-width`: Border width of the indicator.
+- `--_dot-size`: Width and height of the indicator in `.ui-dot`.
+- `--_ease`: Easing of the indicator fade. Defaults to `--ui-ease-enter`.
+- `--_inset`: Distance of the indicator from the opposite edges. `100%` places it on the corner, round avatars move it onto the circle.
+- `--_motion`: Motion multiplier for the transitions. `0` turns them off.
+- `--_size`: Height and minimum width of the indicator.
+
+Outputs: `--_accent`, `--_bg-color`, `--_border-color`, `--_direction`, `--_duration`, `--_inset-block`, `--_inset-inline`, `--_shift-x`, `--_shift-y`, `--_sign-x`, `--_sign-y` and `--_text-color`.
+
+### anchor.css
+
+- `--_shift-x`: Horizontal shift of `.ui-floating`. Defaults to `0`.
+- `--_shift-y`: Vertical shift of `.ui-floating`. Defaults to `0`.
+
+## Theme tokens
+
+The stylesheets read `--ui-accent-fill-max-lightness`, `--ui-border-width-thick`, `--ui-critical`, `--ui-duration`, `--ui-ease-enter`, `--ui-font-size-caption`, `--ui-font-weight-medium`, `--ui-info`, `--ui-motion`, `--ui-neutral`, `--ui-on-fill`, `--ui-on-primary`, `--ui-on-warning`, `--ui-primary`, `--ui-radius-round`, `--ui-space-1`, `--ui-space-2`, `--ui-space-4`, `--ui-success` and `--ui-warning`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Basics
+
+```html
+<span class="ui-badge">
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+  >
+    <path
+      fill="currentColor"
+      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
+    ></path>
+  </svg>
+  <span class="ui-floating">
+    <span class="ui-indicator"
+      ><span aria-hidden="true">5</span
+      ><span class="ui-sr-only">5 unread messages</span></span
+    >
+  </span>
+</span>
+
+<span class="ui-badge ui-dot">
+  <svg aria-hidden="true" viewBox="0 0 32 32"></svg>
+  <span class="ui-floating">
+    <span class="ui-indicator"
+      ><span class="ui-sr-only">New messages</span></span
+    >
+  </span>
+</span>
+```
+
+## Astro
+
+`import { Badge } from "opui-css/astro"`
+
+- `Badge` named slots: `indicator`. Fill one with `slot="indicator"` on a child.
+
+### Example: Basics
+
+```astro
+---
+import { Badge } from "opui-css/astro"
+---
+
+<Badge hideLabel label="5 unread messages">
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    ><path
+      fill="currentColor"
+      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
+    ></path></svg
+  >
+  <Fragment slot="indicator">5</Fragment>
+</Badge>
+
+<Badge dot label="New messages">
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    ><path
+      fill="currentColor"
+      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
+    ></path></svg
+  >
+</Badge>
+```
+
+## React
+
+`import { Badge } from "opui-css/react"`
+
+- `Badge` slot props (`ReactNode`): `children` and `indicator`.
+
+### Example: Basics
+
+```tsx
+import { Badge } from "opui-css/react"
+
+export default function Basics() {
+  return (
+    <>
+      <Badge hideLabel indicator="5" label="5 unread messages">
+        <svg aria-hidden="true" viewBox="0 0 32 32"></svg>
+      </Badge>
+
+      <Badge dot label="New messages">
+        <svg aria-hidden="true" viewBox="0 0 32 32"></svg>
+      </Badge>
+    </>
+  )
+}
+```
+
+## Svelte
+
+`import { Badge } from "opui-css/svelte"`
+
+- `Badge` slot snippets: `children` and `indicator`.
+
+### Example: Basics
+
+```svelte
+<script lang="ts">
+  import { Badge } from "opui-css/svelte"
+</script>
+
+<Badge hideLabel label="5 unread messages">
+  <svg aria-hidden="true" viewBox="0 0 32 32"></svg>
+  {#snippet indicator()}5{/snippet}
+</Badge>
+
+<Badge dot label="New messages">
+  <svg aria-hidden="true" viewBox="0 0 32 32"></svg>
+</Badge>
+```
+
+## Vue
+
+`import { Badge } from "opui-css/vue"`
+
+- `Badge` named slots: `indicator`. Fill one with `<template #indicator>`.
+
+### Example: Basics
+
+```vue
+<script setup lang="ts">
+import { Badge } from "opui-css/vue"
+</script>
+
+<template>
+  <Badge hideLabel label="5 unread messages">
+    <svg aria-hidden="true" viewBox="0 0 32 32"></svg>
+    <template #indicator>5</template>
+  </Badge>
+
+  <Badge dot label="New messages">
+    <svg aria-hidden="true" viewBox="0 0 32 32"></svg>
+  </Badge>
+</template>
+```

package/skills/opui/references/button-group.md

@@ -0,0 +1,239 @@
+# Button group
+
+Groups related buttons by wrapping them with class="ui-button-group" and role="group".
+
+- CSS: `opui-css/css/components/button-group.css` and `opui-css/css/components/button.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/button-group.md), [Astro](https://open-props-ui.netlify.app/astro/components/button-group.md), [React](https://open-props-ui.netlify.app/react/components/button-group.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/button-group.md), [Vue](https://open-props-ui.netlify.app/vue/components/button-group.md).
+- The docs page also documents `Button`, see `button.md`.
+
+## ButtonGroup
+
+### Parts
+
+- `.ui-button-group` (root): Container element.
+- `& > .ui-button` (slot `default`): The buttons and button links.
+
+### Props and modifiers
+
+- `color`: `"critical"` (`.ui-critical`), `"primary"` (`.ui-primary`). Optional colors for the buttons.
+- `orientation`: `"horizontal"` (default), `"vertical"` (`.ui-vertical`). The orientation of the element.
+- `overflow`: `"scroll"` (`.ui-overflow-scroll`), `"shrink"` (`.ui-overflow-shrink`), `"wrap"` (default). What the items do when they don't fit. `"wrap"` wraps them onto more rows, `"scroll"` keeps them on one row and scrolls it sideways, and `"shrink"` keeps them on one row and truncates labels with an ellipsis. Icon-only items keep their size.
+- `size`: `"large"` (`.ui-large`), `"medium"` (default), `"small"` (`.ui-small`), `"x-small"` (`.ui-x-small`). The size of the buttons.
+- `variant`: `"filled"` (`.ui-filled`), `"outlined"` (`.ui-outlined`), `"tonal"` (`.ui-tonal`), `"transparent"` (default). The variant of the buttons.
+
+### Notes
+
+- HTML: The root needs `role="group"`.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### button-group.css
+
+- `--_radius`: Corner radius of the group. Defaults to `--ui-button-radius`, or `--ui-radius` when the theme doesn't set it.
+
+Outputs: `--_border-color`, `--_divider-border-color`, `--_edge-accent`, `--_edge-outline-color` and `--_edge-text`.
+
+### button.css
+
+- `--_accent`: The accent color. Fills, borders, text, hover and active states are derived from it. Defaults to `--ui-button-accent` when a theme sets it. `.ui-primary` and `.ui-critical` set it.
+- `--_accent-fill`: Fill of filled buttons and of hovered outlined and tonal buttons, and the base of the filled hover and pressed shades. `--ui-button-accent-filled` when a theme sets it, else `--_accent`, and in `.ui-critical` `--ui-critical` kept within `--ui-accent-fill-max-lightness`, so the light text stays readable while the border keeps `--ui-critical`.
+- `--_accent-tonal`: Background of `.ui-tonal`. `--ui-surface-tonal`, a palette tint in `.ui-critical`, and `--ui-primary-tonal` or the tint in `.ui-primary`.
+- `--_border-width`: The border width.
+- `--_ease`: Easing of the transitions. Defaults to `--ui-ease`.
+- `--_font-size`: The font size. Set by `.ui-x-small` and `.ui-small`.
+- `--_icon-size`: The size of a direct child `svg`. Icon-only buttons scale it with `--_size`.
+- `--_motion`: Motion multiplier for the transitions. `0` turns them off.
+- `--_on-accent`: Text color on a fill of `--_accent`. Defaults to `--ui-button-on-accent` when a theme sets it. `.ui-primary` sets `--ui-on-primary`, `.ui-critical` `--ui-on-fill`.
+- `--_on-accent-fill`: Text color on `--_accent-fill`: filled buttons, and hovered outlined and tonal ones. `--ui-button-on-accent-filled` when a theme sets it, else `--_on-accent`.
+- `--_on-accent-tonal`: Text color of `.ui-tonal`.
+- `--_padding-inline`: The inline padding. Set by the size classes from `--ui-button-padding-inline` and its size variants.
+- `--_radius`: The corner radius. Defaults to `--ui-button-radius`, or `--ui-radius` when the theme doesn't set it. `.ui-round` makes it round.
+- `--_size`: The height, and the width of an icon-only button. Defaults to `--ui-button-size`, set by the size classes.
+
+Outputs: `--_accent-text`, `--_actions-shift`, `--_bg-color`, `--_border-color`, `--_default-active-bg-color`, `--_default-hover-bg-color`, `--_duration`, `--_filled-active-bg-color`, `--_filled-hover-bg-color`, `--_outlined-active-bg-color`, `--_outlined-active-border-color`, `--_outlined-active-text-color`, `--_outlined-hover-bg-color`, `--_outlined-hover-border-color`, `--_outlined-hover-text-color`, `--_shadow`, `--_text-color`, `--_tonal-active-bg-color`, `--_tonal-active-text-color`, `--_tonal-hover-bg-color` and `--_tonal-hover-text-color`.
+
+## Theme tokens
+
+The stylesheets read `--ui-accent-fill-max-lightness`, `--ui-border-width`, `--ui-button-accent`, `--ui-button-accent-filled`, `--ui-button-font-weight`, `--ui-button-hover-shadow`, `--ui-button-hover-translate`, `--ui-button-on-accent`, `--ui-button-on-accent-filled`, `--ui-button-padding-inline`, `--ui-button-padding-inline-large`, `--ui-button-padding-inline-small`, `--ui-button-padding-inline-x-small`, `--ui-button-radius`, `--ui-button-size`, `--ui-button-size-large`, `--ui-button-size-small`, `--ui-button-size-x-small`, `--ui-control-accent`, `--ui-control-border-color`, `--ui-control-border-color-filled`, `--ui-critical`, `--ui-critical-text`, `--ui-disabled-opacity`, `--ui-duration-fast`, `--ui-ease`, `--ui-field-border-color`, `--ui-field-border-width`, `--ui-focus-ring-inset`, `--ui-focus-ring-offset`, `--ui-focus-ring-width`, `--ui-font-code`, `--ui-font-size-caption`, `--ui-font-size-control`, `--ui-font-size-small`, `--ui-font-weight-bold`, `--ui-font-weight-normal`, `--ui-line-height-tight`, `--ui-motion`, `--ui-on-control-accent`, `--ui-on-fill`, `--ui-on-primary`, `--ui-on-primary-tonal`, `--ui-palette-on-strong`, `--ui-palette-on-tint`, `--ui-palette-strong`, `--ui-palette-tint`, `--ui-primary`, `--ui-primary-text`, `--ui-primary-tonal`, `--ui-radius`, `--ui-radius-round`, `--ui-radius-small`, `--ui-shadow-control`, `--ui-shadow-field`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-state-active-alpha-accent`, `--ui-state-active-alpha-dark`, `--ui-state-active-alpha-light`, `--ui-state-hover-alpha-accent`, `--ui-state-hover-alpha-dark`, `--ui-state-hover-alpha-light`, `--ui-surface-tonal`, `--ui-text`, `--ui-text-disabled`, `--ui-text-max-chroma` and `--ui-text-min-lightness`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Variants
+
+```html
+<div role="group" class="ui-button-group">
+  <button type="button" class="ui-button">Transparent</button>
+  <button type="button" class="ui-button">Transparent</button>
+  <a class="ui-button" href="#">Transparent</a>
+</div>
+
+<div role="group" class="ui-button-group ui-outlined">
+  <button type="button" class="ui-button">Outlined</button>
+  <button type="button" class="ui-button">Outlined</button>
+  <a class="ui-button" href="#">Outlined</a>
+</div>
+
+<div role="group" class="ui-button-group ui-tonal">
+  <button type="button" class="ui-button">Tonal</button>
+  <button type="button" class="ui-button">Tonal</button>
+  <a class="ui-button" href="#">Tonal</a>
+</div>
+
+<div role="group" class="ui-button-group ui-filled">
+  <button type="button" class="ui-button">Filled</button>
+  <button type="button" class="ui-button">Filled</button>
+  <a class="ui-button" href="#">Filled</a>
+</div>
+```
+
+## Astro
+
+`import { ButtonGroup } from "opui-css/astro"`
+
+### Example: Variants
+
+```astro
+---
+import { Button, ButtonGroup } from "opui-css/astro"
+---
+
+<ButtonGroup>
+  <Button>Transparent</Button>
+  <Button>Transparent</Button>
+  <Button href="#">Transparent</Button>
+</ButtonGroup>
+
+<ButtonGroup variant="outlined">
+  <Button>Outlined</Button>
+  <Button>Outlined</Button>
+  <Button href="#">Outlined</Button>
+</ButtonGroup>
+
+<ButtonGroup variant="tonal">
+  <Button>Tonal</Button>
+  <Button>Tonal</Button>
+  <Button href="#">Tonal</Button>
+</ButtonGroup>
+
+<ButtonGroup variant="filled">
+  <Button>Filled</Button>
+  <Button>Filled</Button>
+  <Button href="#">Filled</Button>
+</ButtonGroup>
+```
+
+## React
+
+`import { ButtonGroup } from "opui-css/react"`
+
+### Example: Variants
+
+```tsx
+import { Button, ButtonGroup } from "opui-css/react"
+
+export default function Variants() {
+  return (
+    <>
+      <ButtonGroup>
+        <Button>Transparent</Button>
+        <Button>Transparent</Button>
+        <Button href="#">Transparent</Button>
+      </ButtonGroup>
+
+      <ButtonGroup variant="outlined">
+        <Button>Outlined</Button>
+        <Button>Outlined</Button>
+        <Button href="#">Outlined</Button>
+      </ButtonGroup>
+
+      <ButtonGroup variant="tonal">
+        <Button>Tonal</Button>
+        <Button>Tonal</Button>
+        <Button href="#">Tonal</Button>
+      </ButtonGroup>
+
+      <ButtonGroup variant="filled">
+        <Button>Filled</Button>
+        <Button>Filled</Button>
+        <Button href="#">Filled</Button>
+      </ButtonGroup>
+    </>
+  )
+}
+```
+
+## Svelte
+
+`import { ButtonGroup } from "opui-css/svelte"`
+
+### Example: Variants
+
+```svelte
+<script lang="ts">
+  import { Button, ButtonGroup } from "opui-css/svelte"
+</script>
+
+<ButtonGroup>
+  <Button>Transparent</Button>
+  <Button>Transparent</Button>
+  <Button href="#">Transparent</Button>
+</ButtonGroup>
+
+<ButtonGroup variant="outlined">
+  <Button>Outlined</Button>
+  <Button>Outlined</Button>
+  <Button href="#">Outlined</Button>
+</ButtonGroup>
+
+<ButtonGroup variant="tonal">
+  <Button>Tonal</Button>
+  <Button>Tonal</Button>
+  <Button href="#">Tonal</Button>
+</ButtonGroup>
+
+<ButtonGroup variant="filled">
+  <Button>Filled</Button>
+  <Button>Filled</Button>
+  <Button href="#">Filled</Button>
+</ButtonGroup>
+```
+
+## Vue
+
+`import { ButtonGroup } from "opui-css/vue"`
+
+### Example: Variants
+
+```vue
+<script setup lang="ts">
+import { Button, ButtonGroup } from "opui-css/vue"
+</script>
+
+<template>
+  <ButtonGroup>
+    <Button>Transparent</Button>
+    <Button>Transparent</Button>
+    <Button href="#">Transparent</Button>
+  </ButtonGroup>
+
+  <ButtonGroup variant="outlined">
+    <Button>Outlined</Button>
+    <Button>Outlined</Button>
+    <Button href="#">Outlined</Button>
+  </ButtonGroup>
+
+  <ButtonGroup variant="tonal">
+    <Button>Tonal</Button>
+    <Button>Tonal</Button>
+    <Button href="#">Tonal</Button>
+  </ButtonGroup>
+
+  <ButtonGroup variant="filled">
+    <Button>Filled</Button>
+    <Button>Filled</Button>
+    <Button href="#">Filled</Button>
+  </ButtonGroup>
+</template>
+```

package/skills/opui/references/button.md

@@ -0,0 +1,242 @@
+# Button
+
+Buttons allow users to take actions, and make choices, with a single tap.
+
+- CSS: `opui-css/css/components/button.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/button.md), [Astro](https://open-props-ui.netlify.app/astro/components/button.md), [React](https://open-props-ui.netlify.app/react/components/button.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/button.md), [Vue](https://open-props-ui.netlify.app/vue/components/button.md).
+
+## Button
+
+### Parts
+
+- `.ui-button` (root): Container element.
+- `<svg>`: An optional icon.
+- `<kbd>`: An optional keyboard hint.
+
+### Props and modifiers
+
+- `aria-label`: `string`. The accessible name, for a button without visible text. React and Svelte require it, or `aria-labelledby`, when there are no `children`.
+- `aria-labelledby`: `string`. The id of the element that names a button without visible text, instead of `aria-label`.
+- `as`: `"a" | "button"`, default `"button"`. The element to render. Defaults to `"a"` with `href`.
+- `color`: `"critical"` (`.ui-critical`), `"primary"` (`.ui-primary`). Optional colors.
+- `disabled`: `boolean`. Disables the button. A link button drops its `href` and gets `aria-disabled="true"`.
+- `href`: `string`. The link to use. Renders an `<a>`.
+- `round`: `boolean`, `.ui-round`. Fully rounded corners, a circle when icon-only.
+- `size`: `"large"` (`.ui-large`), `"medium"` (default), `"small"` (`.ui-small`), `"x-small"` (`.ui-x-small`). The size of the element.
+- State (HTML): `current` (`[aria-current="page"]`), `disabled` (`[disabled]`), `disabledLink` (`a[aria-disabled="true"]`). Keeps the pressed background on a transparent (text) button link for the current page in navigation, or dims a disabled one. A link button, which can't take `disabled`, drops its `href` and takes `aria-disabled="true"` instead.
+- `variant`: `"filled"` (`.ui-filled`), `"outlined"` (`.ui-outlined`), `"tonal"` (`.ui-tonal`), `"transparent"` (default). The variant to use.
+
+### Slots
+
+- `default`: The label and an optional icon.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### button.css
+
+- `--_accent`: The accent color. Fills, borders, text, hover and active states are derived from it. Defaults to `--ui-button-accent` when a theme sets it. `.ui-primary` and `.ui-critical` set it.
+- `--_accent-fill`: Fill of filled buttons and of hovered outlined and tonal buttons, and the base of the filled hover and pressed shades. `--ui-button-accent-filled` when a theme sets it, else `--_accent`, and in `.ui-critical` `--ui-critical` kept within `--ui-accent-fill-max-lightness`, so the light text stays readable while the border keeps `--ui-critical`.
+- `--_accent-tonal`: Background of `.ui-tonal`. `--ui-surface-tonal`, a palette tint in `.ui-critical`, and `--ui-primary-tonal` or the tint in `.ui-primary`.
+- `--_border-width`: The border width.
+- `--_ease`: Easing of the transitions. Defaults to `--ui-ease`.
+- `--_font-size`: The font size. Set by `.ui-x-small` and `.ui-small`.
+- `--_icon-size`: The size of a direct child `svg`. Icon-only buttons scale it with `--_size`.
+- `--_motion`: Motion multiplier for the transitions. `0` turns them off.
+- `--_on-accent`: Text color on a fill of `--_accent`. Defaults to `--ui-button-on-accent` when a theme sets it. `.ui-primary` sets `--ui-on-primary`, `.ui-critical` `--ui-on-fill`.
+- `--_on-accent-fill`: Text color on `--_accent-fill`: filled buttons, and hovered outlined and tonal ones. `--ui-button-on-accent-filled` when a theme sets it, else `--_on-accent`.
+- `--_on-accent-tonal`: Text color of `.ui-tonal`.
+- `--_padding-inline`: The inline padding. Set by the size classes from `--ui-button-padding-inline` and its size variants.
+- `--_radius`: The corner radius. Defaults to `--ui-button-radius`, or `--ui-radius` when the theme doesn't set it. `.ui-round` makes it round.
+- `--_size`: The height, and the width of an icon-only button. Defaults to `--ui-button-size`, set by the size classes.
+
+Outputs: `--_accent-text`, `--_actions-shift`, `--_bg-color`, `--_border-color`, `--_default-active-bg-color`, `--_default-hover-bg-color`, `--_duration`, `--_filled-active-bg-color`, `--_filled-hover-bg-color`, `--_outlined-active-bg-color`, `--_outlined-active-border-color`, `--_outlined-active-text-color`, `--_outlined-hover-bg-color`, `--_outlined-hover-border-color`, `--_outlined-hover-text-color`, `--_shadow`, `--_text-color`, `--_tonal-active-bg-color`, `--_tonal-active-text-color`, `--_tonal-hover-bg-color` and `--_tonal-hover-text-color`.
+
+## Theme tokens
+
+The stylesheets read `--ui-accent-fill-max-lightness`, `--ui-border-width`, `--ui-button-accent`, `--ui-button-accent-filled`, `--ui-button-font-weight`, `--ui-button-hover-shadow`, `--ui-button-hover-translate`, `--ui-button-on-accent`, `--ui-button-on-accent-filled`, `--ui-button-padding-inline`, `--ui-button-padding-inline-large`, `--ui-button-padding-inline-small`, `--ui-button-padding-inline-x-small`, `--ui-button-radius`, `--ui-button-size`, `--ui-button-size-large`, `--ui-button-size-small`, `--ui-button-size-x-small`, `--ui-control-accent`, `--ui-control-border-color`, `--ui-control-border-color-filled`, `--ui-critical`, `--ui-critical-text`, `--ui-disabled-opacity`, `--ui-duration-fast`, `--ui-ease`, `--ui-field-border-color`, `--ui-field-border-width`, `--ui-focus-ring-offset`, `--ui-focus-ring-width`, `--ui-font-code`, `--ui-font-size-caption`, `--ui-font-size-control`, `--ui-font-size-small`, `--ui-font-weight-bold`, `--ui-font-weight-normal`, `--ui-line-height-tight`, `--ui-motion`, `--ui-on-control-accent`, `--ui-on-fill`, `--ui-on-primary`, `--ui-on-primary-tonal`, `--ui-palette-on-strong`, `--ui-palette-on-tint`, `--ui-palette-strong`, `--ui-palette-tint`, `--ui-primary`, `--ui-primary-text`, `--ui-primary-tonal`, `--ui-radius`, `--ui-radius-round`, `--ui-radius-small`, `--ui-shadow-control`, `--ui-shadow-field`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-state-active-alpha-accent`, `--ui-state-active-alpha-dark`, `--ui-state-active-alpha-light`, `--ui-state-hover-alpha-accent`, `--ui-state-hover-alpha-dark`, `--ui-state-hover-alpha-light`, `--ui-surface-tonal`, `--ui-text`, `--ui-text-disabled`, `--ui-text-max-chroma` and `--ui-text-min-lightness`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Variants
+
+```html
+<div class="example-row">
+  <button type="button" class="ui-button">Transparent</button>
+  <button type="button" class="ui-button" disabled>Disabled</button>
+  <a class="ui-button" href="#">Link</a>
+  <a class="ui-button" href="#" aria-current="page">Current</a>
+</div>
+<div class="example-row">
+  <button type="button" class="ui-button ui-outlined">Outlined</button>
+  <button type="button" class="ui-button ui-outlined" disabled>Disabled</button>
+  <a class="ui-button ui-outlined" href="#">Link</a>
+</div>
+<div class="example-row">
+  <button type="button" class="ui-button ui-tonal">Tonal</button>
+  <button type="button" class="ui-button ui-tonal" disabled>Disabled</button>
+  <a class="ui-button ui-tonal" href="#">Link</a>
+</div>
+<div class="example-row">
+  <button type="button" class="ui-button ui-filled">Filled</button>
+  <button type="button" class="ui-button ui-filled" disabled>Disabled</button>
+  <a class="ui-button ui-filled" href="#">Link</a>
+</div>
+```
+
+## Astro
+
+`import { Button } from "opui-css/astro"`
+
+### Example: Variants
+
+```astro
+---
+import { Button } from "opui-css/astro"
+---
+
+<div class="example-row">
+  <Button>Transparent</Button>
+  <Button disabled>Disabled</Button>
+  <Button href="#">Link</Button>
+  <Button href="#" aria-current="page">Current</Button>
+</div>
+<div class="example-row">
+  <Button variant="outlined">Outlined</Button>
+  <Button variant="outlined" disabled>Disabled</Button>
+  <Button variant="outlined" href="#">Link</Button>
+</div>
+<div class="example-row">
+  <Button variant="tonal">Tonal</Button>
+  <Button variant="tonal" disabled>Disabled</Button>
+  <Button variant="tonal" href="#">Link</Button>
+</div>
+<div class="example-row">
+  <Button variant="filled">Filled</Button>
+  <Button variant="filled" disabled>Disabled</Button>
+  <Button variant="filled" href="#">Link</Button>
+</div>
+```
+
+## React
+
+`import { Button } from "opui-css/react"`
+
+### Example: Variants
+
+```tsx
+import { Button } from "opui-css/react"
+
+export default function Variants() {
+  return (
+    <>
+      <div className="example-row">
+        <Button>Transparent</Button>
+        <Button disabled>Disabled</Button>
+        <Button href="#">Link</Button>
+        <Button href="#" aria-current="page">
+          Current
+        </Button>
+      </div>
+      <div className="example-row">
+        <Button variant="outlined">Outlined</Button>
+        <Button variant="outlined" disabled>
+          Disabled
+        </Button>
+        <Button variant="outlined" href="#">
+          Link
+        </Button>
+      </div>
+      <div className="example-row">
+        <Button variant="tonal">Tonal</Button>
+        <Button variant="tonal" disabled>
+          Disabled
+        </Button>
+        <Button variant="tonal" href="#">
+          Link
+        </Button>
+      </div>
+      <div className="example-row">
+        <Button variant="filled">Filled</Button>
+        <Button variant="filled" disabled>
+          Disabled
+        </Button>
+        <Button variant="filled" href="#">
+          Link
+        </Button>
+      </div>
+    </>
+  )
+}
+```
+
+## Svelte
+
+`import { Button } from "opui-css/svelte"`
+
+### Example: Variants
+
+```svelte
+<script lang="ts">
+  import { Button } from "opui-css/svelte"
+</script>
+
+<div class="example-row">
+  <Button>Transparent</Button>
+  <Button disabled>Disabled</Button>
+  <Button href="#">Link</Button>
+  <Button href="#" aria-current="page">Current</Button>
+</div>
+<div class="example-row">
+  <Button variant="outlined">Outlined</Button>
+  <Button variant="outlined" disabled>Disabled</Button>
+  <Button variant="outlined" href="#">Link</Button>
+</div>
+<div class="example-row">
+  <Button variant="tonal">Tonal</Button>
+  <Button variant="tonal" disabled>Disabled</Button>
+  <Button variant="tonal" href="#">Link</Button>
+</div>
+<div class="example-row">
+  <Button variant="filled">Filled</Button>
+  <Button variant="filled" disabled>Disabled</Button>
+  <Button variant="filled" href="#">Link</Button>
+</div>
+```
+
+## Vue
+
+`import { Button } from "opui-css/vue"`
+
+### Example: Variants
+
+```vue
+<script setup lang="ts">
+import { Button } from "opui-css/vue"
+</script>
+
+<template>
+  <div class="example-row">
+    <Button>Transparent</Button>
+    <Button disabled>Disabled</Button>
+    <Button href="#">Link</Button>
+    <Button href="#" aria-current="page">Current</Button>
+  </div>
+  <div class="example-row">
+    <Button variant="outlined">Outlined</Button>
+    <Button variant="outlined" disabled>Disabled</Button>
+    <Button variant="outlined" href="#">Link</Button>
+  </div>
+  <div class="example-row">
+    <Button variant="tonal">Tonal</Button>
+    <Button variant="tonal" disabled>Disabled</Button>
+    <Button variant="tonal" href="#">Link</Button>
+  </div>
+  <div class="example-row">
+    <Button variant="filled">Filled</Button>
+    <Button variant="filled" disabled>Disabled</Button>
+    <Button variant="filled" href="#">Link</Button>
+  </div>
+</template>
+```