opui-css 5.4.3 → 6.0.0-rc.2

package/skills/opui/references/toast.md

@@ -0,0 +1,221 @@
+# Toast
+
+Short messages that confirm an action and dismiss themselves.
+
+- CSS: `opui-css/css/components/toaster.css`, `opui-css/css/components/callout.css` and `opui-css/css/components/button.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/toast.md), [Astro](https://open-props-ui.netlify.app/astro/components/toast.md), [React](https://open-props-ui.netlify.app/react/components/toast.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/toast.md), [Vue](https://open-props-ui.netlify.app/vue/components/toast.md).
+
+## Toaster
+
+### Parts
+
+- `opui-toaster.ui-toaster` (root): The `<opui-toaster>` custom element, with `display: contents`. A button with `commandfor` and `command="--toast"` shows a toast with its `data-toast` text and `data-toast-severity`, and `toast(message, { action, duration, severity })` or `toast.success(message)` does it from a script, where `action` takes a `label` and an `onClick`. `dismiss(toast)` returns a promise that resolves once the toast is gone.
+- `<ol popover="manual">`: The stack of toasts, a manual popover at the block end and the inline end of the viewport unless `side` and `align` move it. It opens with the first toast and closes after the last.
+- `<li>`: A toast, a `Callout` with the severity class, its icon (an empty `svg` that `--_icon-image` masks), the message in `.ui-content`, an action `Button` when it has an `action`, and a close `Button`. The element adds it, and on dismiss makes it `inert`, fades it out and closes its gap before it removes it.
+- `<div role="status">`: The polite live region that announces each toast but a critical one, visually hidden with `.ui-sr-only` and outside the popover, so it's always in the page.
+- `<div role="alert">`: The assertive live region that announces a critical toast at once, visually hidden like the status region. Without it, critical toasts go to the status region.
+
+### Props and modifiers
+
+- `align`: `"center"` (`.ui-align-center`), `"end"` (default), `"start"` (`.ui-align-start`). Where the toasts sit along their side of the viewport.
+- `closeLabel`: `string`, `[close-label]`, default `"Close"`. The accessible name of the close button of each toast.
+- `duration`: `number`, `[duration]`, default `5000`. How long a toast stays, in milliseconds, while the pointer and focus are elsewhere.
+- `id`: `string`. The id the buttons point at with `commandfor`. Required.
+- `side`: `"block-end"` (default), `"block-start"` (`.ui-block-start`). The side of the viewport the toasts sit on.
+
+### Notes
+
+- HTML: Put an `<ol popover="manual">`, a `<div class="ui-sr-only" role="status">` and a `<div class="ui-sr-only" role="alert">` in `<opui-toaster class="ui-toaster">` with an id, and import `opui-css/elements/toaster.js`.
+- Astro: Attributes that aren't props go to the root `<opui-toaster>`. The component loads `opui-css/elements/toaster.js`, which exports `toast()` for a client script.
+- React: Attributes that aren't props go to the root `<opui-toaster>`. Toasts show once `opui-css/elements/toaster.js` runs, which the component loads once it mounts and `toast()` brings with your code. `opui-css/react` exports `toast()` next to `Toaster`.
+- Svelte: Attributes that aren't props go to the root `<opui-toaster>`. Toasts show as soon as the component's code loads, which imports `opui-css/elements/toaster.js`. `opui-css/svelte` exports `toast()` next to `Toaster`.
+- Vue: Attributes that aren't props go to the root `<opui-toaster>`. Toasts show as soon as the component's code loads, which imports `opui-css/elements/toaster.js`. `opui-css/vue` exports `toast()` next to `Toaster`.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### toaster.css
+
+- `--_close-image`: The icon of the close button, as an image used as a mask. Defaults to the Drawer's close icon.
+- `--_critical-image`: The icon of a critical toast, as an image used as a mask. Defaults to the `Callout` icon.
+- `--_ease`: Easing of a toast fading and sliding in.
+- `--_gap`: Space between stacked toasts.
+- `--_info-image`: The icon of an info toast, as an image used as a mask. Defaults to the `Callout` icon.
+- `--_inset`: Distance of the stack from the edges of the viewport.
+- `--_max-inline-size`: Maximum width of a toast.
+- `--_motion`: Motion multiplier, `0` with reduced motion.
+- `--_success-image`: The icon of a success toast, as an image used as a mask. Defaults to the `Callout` icon.
+- `--_warning-image`: The icon of a warning toast, as an image used as a mask. Defaults to the `Callout` icon.
+
+Outputs: `--_duration`, `--_icon-image` and `--_shadow`.
+
+### callout.css
+
+- `--_content-gap`: Space between the children of `.ui-content`.
+- `--_font-size`: Font size of `.ui-content`.
+- `--_gap`: Gap between a direct child `svg` and `.ui-content`.
+- `--_icon-size`: Width of the icon column when there's a direct child `svg`.
+- `--_link-ease`: Easing of the link color transition. Defaults to `--ui-ease`.
+- `--_link-hover-text-color`: Link color on hover and focus. Defaults to `--ui-primary-text`, not used in `.ui-outlined`.
+- `--_motion`: Motion multiplier for the link color transition. `0` turns it off.
+- `--_outlined-bg-color`: Background of `.ui-outlined`. Defaults to `--ui-surface`.
+- `--_outlined-border-color`: Border color of `.ui-outlined`. Defaults to `--ui-border-color`, set by the severity classes.
+- `--_outlined-icon-text-color`: Icon color of `.ui-outlined`. Set by the severity classes.
+- `--_outlined-text-color`: Text color of `.ui-outlined`. Set by the severity classes.
+- `--_padding`: The padding.
+- `--_radius`: The corner radius. Defaults to `--ui-radius`.
+- `--_shadow`: The shadow. Defaults to `--ui-shadow-surface`.
+- `--_surface-bg-color`: The opaque background under the tint. Defaults to `--ui-surface`.
+- `--_title-font-size`: Font size of headings in `.ui-content`.
+
+Outputs: `--_bg-color`, `--_border-color`, `--_icon-text-color`, `--_link-duration` and `--_text-color`.
+
+### 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, of hovered outlined buttons unless `--ui-button-hover` is `layer`, of hovered tonal ones when it is unset, 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`. `.ui-primary` resets it to `--_accent`, so the token applies to default buttons only.
+- `--_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`.
+- `--_end-end-radius`: The radius of the end-end corner. Defaults to `--_radius`. A `ControlGroup` sets it to `0` where the button joins the next control.
+- `--_end-start-radius`: The radius of the end-start corner. Defaults to `--_radius`. A `ControlGroup` sets it to `0` where the button joins another control.
+- `--_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, hovered outlined ones unless `--ui-button-hover` is `layer`, and hovered tonal ones when it is unset. `--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.
+- `--_start-end-radius`: The radius of the start-end corner. Defaults to `--_radius`. A `ControlGroup` sets it to `0` where the button joins another control.
+- `--_start-start-radius`: The radius of the start-start corner. Defaults to `--_radius`. A `ControlGroup` sets it to `0` where the button joins the control before it.
+
+Outputs: `--_accent-text`, `--_actions-shift`, `--_bg-color`, `--_border-color`, `--_current-bg-color`, `--_current-text-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-current-bg-color`, `--_tonal-hover-bg-color` and `--_tonal-hover-text-color`.
+
+## Theme tokens
+
+The stylesheets read `--ui-accent-fill-max-lightness`, `--ui-border-color`, `--ui-border-color-on-raised`, `--ui-border-color-raised`, `--ui-border-width`, `--ui-button-accent`, `--ui-button-accent-filled`, `--ui-button-focus`, `--ui-button-font-weight`, `--ui-button-hover`, `--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-shadow`, `--ui-button-size`, `--ui-button-size-large`, `--ui-button-size-small`, `--ui-button-size-x-small`, `--ui-card-padding`, `--ui-contrast`, `--ui-control-accent`, `--ui-control-border-color`, `--ui-control-border-color-filled`, `--ui-critical`, `--ui-critical-text`, `--ui-disabled-opacity`, `--ui-duration`, `--ui-duration-fast`, `--ui-ease`, `--ui-ease-enter`, `--ui-ease-exit`, `--ui-ease-move`, `--ui-field-border-color`, `--ui-field-border-color-on-raised`, `--ui-field-border-width`, `--ui-focus-border-color`, `--ui-focus-highlight`, `--ui-focus-ring-offset`, `--ui-focus-ring-width`, `--ui-font-code`, `--ui-font-size-body`, `--ui-font-size-caption`, `--ui-font-size-control`, `--ui-font-size-small`, `--ui-font-weight-bold`, `--ui-font-weight-normal`, `--ui-font-weight-semibold`, `--ui-icon-size`, `--ui-line-height-tight`, `--ui-motion`, `--ui-on-control-accent`, `--ui-on-fill`, `--ui-on-focus-highlight`, `--ui-on-primary`, `--ui-on-primary-tonal`, `--ui-palette-accent`, `--ui-palette-border`, `--ui-palette-on-strong`, `--ui-palette-on-tint`, `--ui-palette-strong`, `--ui-palette-tint`, `--ui-palette-tint-subtle`, `--ui-press-scale`, `--ui-primary`, `--ui-primary-text`, `--ui-primary-tonal`, `--ui-radius`, `--ui-radius-round`, `--ui-radius-small`, `--ui-shadow-control`, `--ui-shadow-field`, `--ui-shadow-overlay`, `--ui-shadow-surface`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-space-4`, `--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-state-selected-alpha-accent`, `--ui-surface`, `--ui-surface-tonal`, `--ui-surface-tonal-hover`, `--ui-text`, `--ui-text-disabled`, `--ui-text-max-chroma`, `--ui-text-min-lightness` and `--ui-text-strong`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Basics
+
+```html
+<button
+  class="ui-button ui-filled"
+  type="button"
+  command="--toast"
+  commandfor="toast-basics-1"
+  data-toast="Changes saved"
+  data-toast-severity="success"
+>
+  Save changes
+</button>
+<opui-toaster id="toast-basics-1" class="ui-toaster">
+  <ol popover="manual"></ol>
+  <div class="ui-sr-only" role="status"></div>
+  <div class="ui-sr-only" role="alert"></div>
+</opui-toaster>
+
+<script type="module">
+  import "opui-css/elements/toaster.js"
+</script>
+```
+
+## Astro
+
+`import { Toaster } from "opui-css/astro"`
+
+### Example: Basics
+
+```astro
+---
+import { Button, Toaster } from "opui-css/astro"
+---
+
+<Button
+  command="--toast"
+  commandfor="toast-basics-1"
+  data-toast="Changes saved"
+  data-toast-severity="success"
+  variant="filled"
+  >Save changes</Button
+>
+<Toaster id="toast-basics-1" />
+```
+
+## React
+
+`import { Toaster } from "opui-css/react"`
+
+- Client components (`"use client"`): `Toaster`.
+
+### Example: Basics
+
+```tsx
+import { Button, Toaster } from "opui-css/react"
+
+export default function Basics() {
+  return (
+    <>
+      <Button
+        command="--toast"
+        commandfor="toast-basics-1"
+        data-toast="Changes saved"
+        data-toast-severity="success"
+        variant="filled"
+      >
+        Save changes
+      </Button>
+      <Toaster id="toast-basics-1" />
+    </>
+  )
+}
+```
+
+## Svelte
+
+`import { Toaster } from "opui-css/svelte"`
+
+### Example: Basics
+
+```svelte
+<script lang="ts">
+  import { Button, Toaster } from "opui-css/svelte"
+</script>
+
+<Button
+  command="--toast"
+  commandfor="toast-basics-1"
+  data-toast="Changes saved"
+  data-toast-severity="success"
+  variant="filled">Save changes</Button
+>
+<Toaster id="toast-basics-1" />
+```
+
+## Vue
+
+`import { Toaster } from "opui-css/vue"`
+
+### Example: Basics
+
+```vue
+<script setup lang="ts">
+import { Button, Toaster } from "opui-css/vue"
+</script>
+
+<template>
+  <Button
+    command="--toast"
+    commandfor="toast-basics-1"
+    data-toast="Changes saved"
+    data-toast-severity="success"
+    variant="filled"
+    >Save changes</Button
+  >
+  <Toaster id="toast-basics-1" />
+</template>
+```

package/skills/opui/references/toggle.md

@@ -0,0 +1,211 @@
+# Toggle
+
+Toggle buttons and toggle groups switch options on and off, alone or as a set.
+
+- CSS: `opui-css/css/components/toggle-group.css` and `opui-css/css/components/toggle-button.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/toggle.md), [Astro](https://open-props-ui.netlify.app/astro/components/toggle.md), [React](https://open-props-ui.netlify.app/react/components/toggle.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/toggle.md), [Vue](https://open-props-ui.netlify.app/vue/components/toggle.md).
+
+## ToggleGroup
+
+### Parts
+
+- `.ui-toggle-group` (root): Container element.
+- `.ui-toggle-button` (`ToggleButton`): A toggle button.
+
+### Props and modifiers
+
+- `defaultValue` (React): `string | string[]`. The starting selection when `value` is omitted.
+- `multiple`: `boolean`, `[role="group"]`. Lets several buttons be checked, with checkbox inputs. Without it, one button is checked at a time, with radio inputs in a `[role="radiogroup"]`.
+- `name`: `string`. The name shared by the inputs. Generated when omitted.
+- `onValueChange` (React): `(value: string | string[]) => void`. Called with the new selection when a button is toggled.
+- `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.
+- `value` (Astro and React): `string | string[]`. The value of the checked button, or the values of the checked buttons with `multiple`. The buttons whose `value` matches are checked, and their own `checked` is ignored.
+
+### Slots
+
+- `default`: The toggle buttons.
+
+Model: `value` (`string | string[]`), the value of the checked button, or the values of the checked buttons with `multiple`. Astro and React `value`, Svelte `bind:value`, Vue `v-model`.
+
+### Notes
+
+- Astro: `value` checks the buttons 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 buttons keep their own state, and `onValueChange` still reports changes.
+- Svelte: Bind `value` with a starting value to control the selection, `""` or `[]` for none. Without it, or bound to `undefined`, the buttons keep their own state.
+- Vue: Bind `v-model` with a starting value to control the selection, `""` or `[]` for none. Without it, or bound to `undefined`, the buttons keep their own state.
+
+## ToggleButton
+
+### Parts
+
+- `label.ui-toggle-button` (root): Container element.
+- `<input>` (model): A visually hidden checkbox or radio input.
+
+### Props and modifiers
+
+- `checked`: `boolean`, `input[checked]`. Selects the button.
+- `disabled`: `boolean`, `input[aria-disabled="true"]`, `input[disabled]`. Dims the button and skips it with Tab and the arrow keys. `aria-disabled="true"` looks the same, but keeps the button focusable and its value in the form, and doesn't stop the change, so block it with a script.
+- `id`: `string`. The id of the `<input>`.
+- `label`: `string`. The button text when there is no child content.
+- `name`: `string`. The name of the input. Falls back to the `ToggleGroup`'s name, then to a `FieldGroup`'s.
+- `required`: `boolean`. The form won't submit until it's checked. A `ToggleGroup` without `multiple` needs it on one button only.
+- `size`: `"large"` (`.ui-large`), `"medium"` (default), `"small"` (`.ui-small`), `"x-small"` (`.ui-x-small`). The size of the element.
+- `type`: `"checkbox"` (`input[type="checkbox"]`, default), `"radio"` (`input[type="radio"]`). The input type. `"radio"` allows one selection in a group. A `ToggleGroup` without `multiple` makes every button a radio.
+- `value`: `string`. The value of the input.
+
+### Slots
+
+- `default`: The label and an optional icon.
+
+Model: `checked` (`boolean`), the checked state of a standalone button. Astro and React `checked`, Svelte `bind:checked`, Vue `v-model`.
+
+### Notes
+
+- Astro: Attributes that aren't props go to the `<input>`, like `autofocus` and `form`, and `class` and `style` go to the root `<label>`.
+- React: Attributes that aren't props go to the `<input>`, like `autofocus` and `form`, and `className` and `style` go to the root `<label>`. `defaultChecked` sets the starting state, and `checked` with `onChange` controls it, like on any input. In a `ToggleGroup` with a `value` or `defaultValue`, the group's value wins and a button's own `checked` and `defaultChecked` are ignored.
+- Svelte: Attributes that aren't props go to the `<input>`, like `autofocus` and `form`, and `class` and `style` go to the root `<label>`. `bind:checked` binds a standalone checkbox button. A radio fires no `change` when another one takes the check, so for a choice of one, use a `ToggleGroup` with `bind:value`. In a `ToggleGroup`, `checked` only sets the starting state: the group's value wins once it has one.
+- Vue: Attributes that aren't props go to the `<input>`, like `autofocus` and `form`, and `class` and `style` go to the root `<label>`. `v-model` binds a standalone checkbox button. A radio fires no `change` when another one takes the check, so for a choice of one, use a `ToggleGroup` with `v-model`. In a `ToggleGroup`, `checked` only sets the starting state: the group's value wins once it has one.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### toggle-group.css
+
+- `--_bg-color`: Background of the group. Defaults to `--ui-surface`.
+- `--_border-color`: Color of the outline around the group and the lines between buttons. Defaults to `--ui-control-border-color`, or `--ui-border-color` when the theme doesn't set it.
+- `--_radius`: Corner radius of the group. Defaults to `--ui-button-radius`, or `--ui-radius` when the theme doesn't set it, capped at half a button height so a round radius doesn't clip the end items.
+
+Outputs: `--_divider-border-width`, `--_divider-gap` and `--_divider-shadow`.
+
+### toggle-button.css
+
+- `--_ease`: Easing of the hover and selected transitions and the focus ring animation. Defaults to `--ui-ease`.
+- `--_font-size`: The font size. Defaults to `--ui-font-size-control`. Set by the size classes on the button or its group.
+- `--_icon-size`: Size of a direct child `svg`. Defaults to `--ui-icon-size`.
+- `--_motion`: Motion multiplier for the hover and selected transitions and the focus ring animation. `0` turns them off.
+- `--_selected-bg-color`: Background of the checked button. `--ui-selected` when the theme sets it, otherwise `--ui-primary`.
+- `--_size`: Height and minimum width. Defaults to `--ui-button-size`, set by the size classes on the button or its group.
+
+Outputs: `--_bg-color`, `--_border-color` and `--_duration`.
+
+## Theme tokens
+
+The stylesheets read `--ui-border-color`, `--ui-border-width`, `--ui-button-radius`, `--ui-button-size`, `--ui-button-size-large`, `--ui-button-size-small`, `--ui-button-size-x-small`, `--ui-control-border-color`, `--ui-control-border-color-filled`, `--ui-disabled-opacity`, `--ui-duration`, `--ui-ease`, `--ui-ease-move`, `--ui-focus-border-color`, `--ui-focus-ring-color`, `--ui-focus-ring-inset`, `--ui-focus-ring-style`, `--ui-focus-ring-width`, `--ui-font-size-caption`, `--ui-font-size-control`, `--ui-font-size-small`, `--ui-icon-size`, `--ui-motion`, `--ui-on-primary`, `--ui-on-selected`, `--ui-press-scale`, `--ui-primary`, `--ui-radius`, `--ui-selected`, `--ui-shadow-control`, `--ui-space-2`, `--ui-space-3`, `--ui-state-hover-alpha-dark`, `--ui-state-hover-alpha-light`, `--ui-surface`, `--ui-text-disabled` and `--ui-text-strong`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Standalone
+
+```html
+<label class="ui-toggle-button">
+  <input name="standalone-demo-1" type="checkbox" />
+  Toggle me
+</label>
+<label class="ui-toggle-button">
+  <input name="standalone-demo-2" type="checkbox" />
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M12 21a9 9 0 1 0-9-9 9 9 0 0 0 9 9Z"></path>
+    <path d="M12 8v4"></path>
+    <path d="M12 16h.01"></path>
+  </svg>
+  Toggle with icon
+</label>
+```
+
+## Astro
+
+`import { ToggleButton, ToggleGroup } from "opui-css/astro"`
+
+### Example: Standalone
+
+```astro
+---
+import { ToggleButton } from "opui-css/astro"
+---
+
+<ToggleButton label="Toggle me" name="standalone-demo-1" />
+<ToggleButton name="standalone-demo-2">
+  <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></svg>
+  Toggle with icon
+</ToggleButton>
+```
+
+## React
+
+`import { ToggleButton, ToggleGroup } from "opui-css/react"`
+
+- Client components (`"use client"`): `ToggleGroup` and `ToggleButton`.
+
+### Example: Standalone
+
+```tsx
+import { ToggleButton } from "opui-css/react"
+
+export default function Standalone() {
+  return (
+    <>
+      <ToggleButton label="Toggle me" name="standalone-demo-1" />
+      <ToggleButton name="standalone-demo-2">
+        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></svg>
+        Toggle with icon
+      </ToggleButton>
+    </>
+  )
+}
+```
+
+## Svelte
+
+`import { ToggleButton, ToggleGroup } from "opui-css/svelte"`
+
+- Hydration: `bind:value` on `ToggleGroup` and `bind:checked` on `ToggleButton`. 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: Standalone
+
+```svelte
+<script lang="ts">
+  import { ToggleButton } from "opui-css/svelte"
+</script>
+
+<ToggleButton label="Toggle me" name="standalone-demo-1" />
+<ToggleButton name="standalone-demo-2">
+  <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></svg>
+  Toggle with icon
+</ToggleButton>
+```
+
+## Vue
+
+`import { ToggleButton, ToggleGroup } from "opui-css/vue"`
+
+- Hydration: `v-model` on `ToggleGroup` and `ToggleButton`. 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: Standalone
+
+```vue
+<script setup lang="ts">
+import { ToggleButton } from "opui-css/vue"
+</script>
+
+<template>
+  <ToggleButton label="Toggle me" name="standalone-demo-1" />
+  <ToggleButton name="standalone-demo-2">
+    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></svg>
+    Toggle with icon
+  </ToggleButton>
+</template>
+```

package/skills/opui/references/tooltip.md

@@ -0,0 +1,158 @@
+# Tooltip
+
+A short label or hint for a control, shown on hover, focus or a long press.
+
+- CSS: `opui-css/css/components/tooltip.css` and `opui-css/css/components/anchor.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/tooltip.md), [Astro](https://open-props-ui.netlify.app/astro/components/tooltip.md), [React](https://open-props-ui.netlify.app/react/components/tooltip.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/tooltip.md), [Vue](https://open-props-ui.netlify.app/vue/components/tooltip.md).
+
+## Tooltip
+
+### Parts
+
+- `.ui-tooltip` (root): Container element.
+- `.ui-floating` (`TooltipContent`): The tooltip, a `popover="hint"`.
+- `& > :first-child`: The trigger that shows the tooltip on hover and focus.
+
+### Props and modifiers
+
+- `arrow`: `boolean`, `.ui-arrow`. Adds an arrow that points to the trigger.
+- `id`: `string`. The id of the tooltip. Add `interestfor` with the same id to the trigger, and on a toggletip `commandfor` and `command="toggle-popover"` too. Required.
+- `positionArea`: `string`, `--ui-anchor-position-area`, default `"self-block-start"`. Any valid `position-area` value. Controls where the tooltip is placed. The `self-` keywords follow the tooltip's own direction, so the placement mirrors in a right-to-left part of a left-to-right page.
+
+### Slots
+
+- `default`: The trigger, followed by `TooltipContent`.
+
+### Notes
+
+- HTML: Give `.ui-floating` `popover="hint"` and an id, and add `interestfor` with that id to the trigger. A toggletip trigger also takes `commandfor` and `command="toggle-popover"`.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### tooltip.css
+
+- `--_arrow-size`: Size of the arrow in `.ui-arrow`.
+- `--_bg-color`: Background of the tooltip and its arrow. Defaults to `--ui-surface-inverse`.
+- `--_ease`: Easing of the fade and the scale. Defaults to `--ui-ease-enter`.
+- `--_max-inline-size`: The maximum width. Longer content wraps.
+- `--_min-inline-size`: The minimum width, unless the content is narrower.
+- `--_motion`: Motion multiplier for the fade and the scale. `0` turns them off.
+- `--_offset`: Distance from the trigger. `.ui-arrow` computes it from `--_arrow-size`.
+- `--_shift`: How far a shifted tooltip reaches past the center of the trigger.
+- `--_text-color`: The text color. Defaults to `--ui-on-inverse`.
+
+Outputs: `--_duration` and `--_ease-move`.
+
+### 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-border-width`, `--ui-duration`, `--ui-ease-enter`, `--ui-ease-move`, `--ui-font-size-small`, `--ui-line-height-tight`, `--ui-motion`, `--ui-on-inverse`, `--ui-radius-small`, `--ui-space-1`, `--ui-space-2`, `--ui-space-4` and `--ui-surface-inverse`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Basics
+
+```html
+<span class="ui-tooltip">
+  <button
+    class="ui-button"
+    type="button"
+    aria-describedby="tooltip-basics-1"
+    interestfor="tooltip-basics-1"
+  >
+    Save
+  </button>
+  <span class="ui-floating" id="tooltip-basics-1" popover="hint"
+    >Save your changes</span
+  >
+</span>
+```
+
+## Astro
+
+`import { Tooltip, TooltipContent } from "opui-css/astro"`
+
+### Example: Basics
+
+```astro
+---
+import { Button, Tooltip, TooltipContent } from "opui-css/astro"
+---
+
+<Tooltip id="tooltip-basics-1">
+  <Button aria-describedby="tooltip-basics-1" interestfor="tooltip-basics-1"
+    >Save</Button
+  >
+  <TooltipContent>Save your changes</TooltipContent>
+</Tooltip>
+```
+
+## React
+
+`import { Tooltip, TooltipContent } from "opui-css/react"`
+
+### Example: Basics
+
+```tsx
+import { Button, Tooltip, TooltipContent } from "opui-css/react"
+
+export default function Basics() {
+  return (
+    <Tooltip id="tooltip-basics-1">
+      <Button
+        aria-describedby="tooltip-basics-1"
+        interestfor="tooltip-basics-1"
+      >
+        Save
+      </Button>
+      <TooltipContent>Save your changes</TooltipContent>
+    </Tooltip>
+  )
+}
+```
+
+## Svelte
+
+`import { Tooltip, TooltipContent } from "opui-css/svelte"`
+
+### Example: Basics
+
+```svelte
+<script lang="ts">
+  import { Button, Tooltip, TooltipContent } from "opui-css/svelte"
+</script>
+
+<Tooltip id="tooltip-basics-1">
+  <Button aria-describedby="tooltip-basics-1" interestfor="tooltip-basics-1"
+    >Save</Button
+  >
+  <TooltipContent>Save your changes</TooltipContent>
+</Tooltip>
+```
+
+## Vue
+
+`import { Tooltip, TooltipContent } from "opui-css/vue"`
+
+### Example: Basics
+
+```vue
+<script setup lang="ts">
+import { Button, Tooltip, TooltipContent } from "opui-css/vue"
+</script>
+
+<template>
+  <Tooltip id="tooltip-basics-1">
+    <Button aria-describedby="tooltip-basics-1" interestfor="tooltip-basics-1"
+      >Save</Button
+    >
+    <TooltipContent>Save your changes</TooltipContent>
+  </Tooltip>
+</template>
+```