opui-css 5.4.3 → 6.0.0-rc.1

package/react/index.ts

@@ -0,0 +1,176 @@
+import type {} from "./elements"
+export { default as Accordion } from "../components/Accordion/Accordion.react"
+export { default as AccordionActions } from "../components/Accordion/AccordionActions.react"
+export { default as AccordionContent } from "../components/Accordion/AccordionContent.react"
+export { default as AccordionSummary } from "../components/Accordion/AccordionSummary.react"
+export { default as Anchor } from "../components/Anchor/Anchor.react"
+export { default as AnchorContent } from "../components/Anchor/AnchorContent.react"
+export { default as Avatar } from "../components/Avatar/Avatar.react"
+export { default as AvatarGroup } from "../components/Avatar/AvatarGroup.react"
+export { default as Badge } from "../components/Badge/Badge.react"
+export { default as Button } from "../components/Button/Button.react"
+export { default as ButtonGroup } from "../components/ButtonGroup/ButtonGroup.react"
+export { default as Callout } from "../components/Callout/Callout.react"
+export { default as CalloutContent } from "../components/Callout/CalloutContent.react"
+export { default as CalloutIcon } from "../components/Callout/CalloutIcon.react"
+export { default as Card } from "../components/Card/Card.react"
+export { default as CardActions } from "../components/Card/CardActions.react"
+export { default as CardContent } from "../components/Card/CardContent.react"
+export { default as CardHeader } from "../components/Card/CardHeader.react"
+export { default as Carousel } from "../components/Carousel/Carousel.react"
+export { default as Checkbox } from "../components/Checkbox/Checkbox.react"
+export { default as CheckboxInput } from "../components/Checkbox/CheckboxInput.react"
+export { default as Chip } from "../components/Chip/Chip.react"
+export { default as DescriptionList } from "../components/DescriptionList/DescriptionList.react"
+export { default as DescriptionListDescription } from "../components/DescriptionList/DescriptionListDescription.react"
+export { default as DescriptionListItem } from "../components/DescriptionList/DescriptionListItem.react"
+export { default as DescriptionListTerm } from "../components/DescriptionList/DescriptionListTerm.react"
+export { default as Dialog } from "../components/Dialog/Dialog.react"
+export { default as DialogContent } from "../components/Dialog/DialogContent.react"
+export { default as DialogFooter } from "../components/Dialog/DialogFooter.react"
+export { default as DialogHeader } from "../components/Dialog/DialogHeader.react"
+export { default as DialogTitle } from "../components/Dialog/DialogTitle.react"
+export { default as Divider } from "../components/Divider/Divider.react"
+export { default as Drawer } from "../components/Drawer/Drawer.react"
+export { default as DrawerContent } from "../components/Drawer/DrawerContent.react"
+export { default as DrawerFooter } from "../components/Drawer/DrawerFooter.react"
+export { default as DrawerHeader } from "../components/Drawer/DrawerHeader.react"
+export { default as DrawerTitle } from "../components/Drawer/DrawerTitle.react"
+export { default as FieldDescription } from "../components/FieldDescription/FieldDescription.react"
+export { default as FieldGroup } from "../components/FieldGroup/FieldGroup.react"
+export { default as FieldLegend } from "../components/FieldLegend/FieldLegend.react"
+export { default as Fieldset } from "../components/Fieldset/Fieldset.react"
+export { default as Form } from "../components/Form/Form.react"
+export { default as List } from "../components/List/List.react"
+export { default as ListItem } from "../components/ListItem/ListItem.react"
+export { default as Menu } from "../components/Menu/Menu.react"
+export { default as Progress } from "../components/Progress/Progress.react"
+export { default as Radio } from "../components/Radio/Radio.react"
+export { default as RadioInput } from "../components/Radio/RadioInput.react"
+export { default as Range } from "../components/Range/Range.react"
+export { default as Select } from "../components/Select/Select.react"
+export { default as Switch } from "../components/Switch/Switch.react"
+export { default as SwitchInput } from "../components/Switch/SwitchInput.react"
+export { default as Table } from "../components/Table/Table.react"
+export { default as TableBody } from "../components/Table/TableBody.react"
+export { default as TableCaption } from "../components/Table/TableCaption.react"
+export { default as TableCell } from "../components/Table/TableCell.react"
+export { default as TableColumn } from "../components/Table/TableColumn.react"
+export { default as TableColumnGroup } from "../components/Table/TableColumnGroup.react"
+export { default as TableFoot } from "../components/Table/TableFoot.react"
+export { default as TableHead } from "../components/Table/TableHead.react"
+export { default as TableHeaderCell } from "../components/Table/TableHeaderCell.react"
+export { default as TableRow } from "../components/Table/TableRow.react"
+export { default as Tabs } from "../components/Tabs/Tabs.react"
+export { default as TabsItem } from "../components/Tabs/TabsItem.react"
+export { default as TabsLabel } from "../components/Tabs/TabsLabel.react"
+export { default as TabsPanel } from "../components/Tabs/TabsPanel.react"
+export { default as Textarea } from "../components/Textarea/Textarea.react"
+export { default as TextField } from "../components/TextField/TextField.react"
+export { default as ToggleButton } from "../components/ToggleButton/ToggleButton.react"
+export { default as ToggleGroup } from "../components/ToggleGroup/ToggleGroup.react"
+export { default as Tooltip } from "../components/Tooltip/Tooltip.react"
+export { default as TooltipContent } from "../components/Anchor/AnchorContent.react"
+export type {
+  AccordionActionsProps,
+  AccordionContentProps,
+  Props as AccordionProps,
+  AccordionSummaryProps,
+} from "../components/Accordion/types.react"
+export type {
+  AnchorContentProps,
+  Props as AnchorProps,
+  AnchorContentProps as TooltipContentProps,
+} from "../components/Anchor/types.react"
+export type {
+  AvatarGroupProps,
+  Props as AvatarProps,
+} from "../components/Avatar/types.react"
+export type { Props as BadgeProps } from "../components/Badge/types.react"
+export type { Props as ButtonProps } from "../components/Button/types.react"
+export type { Props as ButtonGroupProps } from "../components/ButtonGroup/types.react"
+export type {
+  CalloutContentProps,
+  CalloutIconProps,
+  Props as CalloutProps,
+} from "../components/Callout/types.react"
+export type {
+  CardActionsProps,
+  CardContentProps,
+  CardHeaderProps,
+  Props as CardProps,
+} from "../components/Card/types.react"
+export type { Props as CarouselProps } from "../components/Carousel/types.react"
+export type {
+  CheckboxInputProps,
+  Props as CheckboxProps,
+} from "../components/Checkbox/types.react"
+export type { Props as ChipProps } from "../components/Chip/types.react"
+export type {
+  DescriptionListDescriptionProps,
+  DescriptionListItemProps,
+  Props as DescriptionListProps,
+  DescriptionListTermProps,
+} from "../components/DescriptionList/types.react"
+export type {
+  DialogContentProps,
+  DialogFooterProps,
+  DialogHeaderProps,
+  Props as DialogProps,
+  DialogTitleProps,
+} from "../components/Dialog/types.react"
+export type { Props as DividerProps } from "../components/Divider/types.react"
+export type {
+  DrawerContentProps,
+  DrawerFooterProps,
+  DrawerHeaderProps,
+  Props as DrawerProps,
+  DrawerTitleProps,
+} from "../components/Drawer/types.react"
+export type { Props as FieldDescriptionProps } from "../components/FieldDescription/types.react"
+export type { Props as FieldGroupProps } from "../components/FieldGroup/types.react"
+export type { Props as FieldLegendProps } from "../components/FieldLegend/types.react"
+export type { Props as FieldsetProps } from "../components/Fieldset/types.react"
+export type { Props as FormProps } from "../components/Form/types.react"
+export type { Props as ListProps } from "../components/List/types.react"
+export type { Props as ListItemProps } from "../components/ListItem/types.react"
+export type {
+  MenuItem,
+  Props as MenuProps,
+} from "../components/Menu/types.react"
+export type { Props as ProgressProps } from "../components/Progress/types.react"
+export type {
+  RadioInputProps,
+  Props as RadioProps,
+} from "../components/Radio/types.react"
+export type { RangeItem } from "../components/Range/types"
+export type { Props as RangeProps } from "../components/Range/types.react"
+export type { SelectItem } from "../components/Select/types"
+export type { Props as SelectProps } from "../components/Select/types.react"
+export type {
+  SwitchInputProps,
+  Props as SwitchProps,
+} from "../components/Switch/types.react"
+export type {
+  TableBodyProps,
+  TableCaptionProps,
+  TableCellProps,
+  TableColumnGroupProps,
+  TableColumnProps,
+  TableFootProps,
+  TableHeaderCellProps,
+  TableHeadProps,
+  Props as TableProps,
+  TableRowProps,
+} from "../components/Table/types.react"
+export type {
+  TabsItemProps,
+  TabsLabelProps,
+  TabsPanelProps,
+  Props as TabsProps,
+} from "../components/Tabs/types.react"
+export type { Props as TextareaProps } from "../components/Textarea/types.react"
+export type { Props as TextFieldProps } from "../components/TextField/types.react"
+export type { Props as ToggleButtonProps } from "../components/ToggleButton/types.react"
+export type { Props as ToggleGroupProps } from "../components/ToggleGroup/types.react"
+export type { Props as TooltipProps } from "../components/Tooltip/types.react"

package/skills/opui/SKILL.md

@@ -0,0 +1,75 @@
+---
+name: opui
+description: Build UI with Open Props UI (the opui-css package). Use when a project depends on opui-css, imports from opui-css/astro, opui-css/react, opui-css/svelte or opui-css/vue, or uses ui-* classes such as .ui-button or .ui-card, and you need correct markup, classes, props or CSS imports for its components.
+---
+
+# Open Props UI
+
+A CSS UI library whose tokens started from [Open Props](https://open-props.style/); the components don't need it. It ships framework-agnostic CSS plus Astro, React, Svelte and Vue components that render matching markup; a parity test suite keeps them in step.
+
+## Setup
+
+Install with `npm install opui-css`. Open Props is bundled in `dist/opui.css` for your own CSS, and the components don't read it; install `open-props` only to import `opui-css/open-props.css` with a bundler.
+
+- With a bundler, import everything with `@import "opui-css/css/imports.css"`, or import `opui-css/css/layers.css` first, then `opui-css/core/palette.css`, `opui-css/css/theme.css`, `opui-css/core/normalize.css`, the components from `opui-css/css/components/<name>.css` (`choice.css` with `checkbox.css`, `radio.css` or `switch.css`), the browser fallbacks from `opui-css/css/compat.css`, and `opui-css/core/utils.css` last. `references/getting-started.md` has the full list.
+- Without a bundler, link `https://cdn.jsdelivr.net/npm/opui-css@6/dist/opui.css`. It includes the browser fallbacks of the `components.compat` layer: `dist/opui.no-compat.css` leaves them out, and `dist/opui.baseline-<year>.css` keeps only the ones browsers of that Baseline year need.
+- Astro: `import { Button } from "opui-css/astro"`. React: `import { Button } from "opui-css/react"`. Svelte: `import { Button } from "opui-css/svelte"`. Vue: `import { Button } from "opui-css/vue"`. All still need the CSS imported once.
+- `npx opui-css skill` copies this skill, matching the installed version, into `.claude/skills/opui`. Pass `--dir <path>` for another agent's skills folder and `--force` to replace an older copy after an upgrade.
+
+## Conventions
+
+- Every class is prefixed with `ui-`: a base class (`.ui-button`) plus modifiers (`.ui-filled`, `.ui-small`, `.ui-primary`).
+- Astro, React, Svelte and Vue props mirror the modifiers without the prefix: `<Button variant="filled" size="small" color="primary">`.
+- Slots: Astro fills a named slot with `slot="end-text"` on a child and Vue with `<template #end-text>`. React takes slots as props and Svelte as snippets, camelCased (`endText`), with the default slot as `children`. Containers take parts instead, such as `CardHeader`.
+- Common modifiers: sizes `.ui-x-small`, `.ui-small`, `.ui-large` (not every component has all three), variants `.ui-filled`, `.ui-outlined`, `.ui-tonal`, colors `.ui-primary`, `.ui-critical`, severities `.ui-info`, `.ui-success`, `.ui-warning`, `.ui-critical`. The reference lists which apply.
+- Buttons: give `<button>` a `type`. When a button has an icon, wrap the label in `<span class="ui-text">` (also inside `<Button>`); a button whose only element is an `svg` is styled as icon-only.
+- Components lean on native HTML: `<dialog>`, `popover`, invoker commands (`commandfor` / `command`), `<details>`. Prefer these over custom JavaScript.
+- Styles live in cascade layers (`openprops, theme, normalize, components.prose, components.root, components.extended, components.compat, utils`), and `theme` has the sublayers `theme.palette, theme.base, theme.custom, theme.severity`. Put theme tokens in `@layer theme.custom`. Put other overrides in a layer after `utils` or leave them unlayered.
+
+## Customizing
+
+Change the least specific thing that does the job, in this order:
+
+1. A theme token in `@layer theme.custom`, for the whole site. Only list the tokens you change.
+2. A component's `--_` input, set on the component itself (inline or in your own CSS), for one component or one instance.
+3. Your own CSS in a layer after `utils`, or unlayered, for anything else.
+
+Never override a component's outputs (`--_bg-color`, `--_text-color`, `--_border-color`): hover, active and disabled set them, so an override freezes them in every state. Change the input they derive from, such as `--_accent`. Don't add `!important` or long selectors: the layers already let your CSS win.
+
+| To change                          | Set                                                                                                                                             |
+| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| Main color                         | `--ui-palette-hue` and `--ui-palette-chroma`, or `--ui-palette-source` with any color                                                           |
+| Main color in one part of the page | `.ui-palette` and `--ui-palette-hue` on that element                                                                                            |
+| Corners                            | `--ui-radius` (buttons and fields follow it)                                                                                                    |
+| Fonts                              | `--ui-font-body`, `--ui-font-heading`, `--ui-font-code`                                                                                         |
+| Control height                     | `--ui-density`                                                                                                                                  |
+| Spacing in and between containers  | `--ui-space-scale`                                                                                                                              |
+| Shadows                            | `--ui-shadow-color` (light and dark), `--ui-shadow-elevated`, `--ui-shadow-overlay`                                                             |
+| Space between components           | `.ui-layout-column`, `.ui-layout-row`, `.ui-layout-grid` and `.ui-layout-container` (see `references/layout.md`), not your own flex or grid CSS |
+| Transitions                        | `--ui-motion` (`0` turns them off), `--ui-duration`, `--ui-ease`                                                                                |
+| One component's color              | `--_accent` on it, or `.ui-primary`/`.ui-critical`                                                                                              |
+| A severity color for a section     | `.ui-critical`, `.ui-info`, `.ui-success`, `.ui-warning`, `.ui-neutral`                                                                         |
+
+```css
+@layer theme.custom {
+  :where(html) {
+    --ui-radius: 4px;
+    --ui-font-body: "Inter", var(--font-sans);
+    --ui-palette-hue: 265;
+  }
+}
+```
+
+Example themes ship in `opui-css/themes/` (`bootstrap.css`, a Bootstrap 5 look, `brutalist.css`, a neobrutalism look, `m3.css`, a Material 3 look, and `shadcn.css`, a shadcn/ui look), to import or copy as a starting point. They name their fonts (DM Sans, Roboto, Geist) but don't load them. They start with the layer order, so they work wherever they load. A theme file you write should load after the library, or start with the two `@layer` statements from `css/layers.css`.
+
+`tokens.json` at the package root (`node_modules/opui-css/tokens.json`, or `import tokens from "opui-css/tokens.json"`) lists every theme token in the W3C design tokens format: its `$type`, description and default as `$value`, and under `$extensions.opui` its CSS variable, tier, contrast promise and dark and more-contrast values. Unset tokens have no `$value`, only an `example`.
+
+## References
+
+1. Read `references/getting-started.md` for setup, with a section per framework, `references/theming.md` for colors, scopes, density, spacing, corners, fonts, elevation, motion and contrast, and `references/customizing.md` for the `theme.custom` layer and component properties.
+2. Find the component in `references/index.md`.
+3. Read `references/<component>.md` before writing markup. One file covers every framework. It starts with the stylesheets to import and links to the full docs page per framework, with every example, the accessibility notes and the Under the hood walkthrough. Then it lists each component on the page: its parts with their selectors, its props with the class or attribute they render, their values and defaults, its slots, model and notes. The stylesheets' component properties and the theme tokens they read follow, and a section per framework (HTML, Astro, React, Svelte and Vue) with its import line, slot syntax, hydration notes and the page's first example. A prop marked with frameworks, such as `onValueChange` (React), only exists there, and a modifier marked HTML has no prop.
+4. After the first icon in a reference, repeated icon SVGs in the examples are shortened to `<svg aria-hidden="true" viewBox="..."></svg>`: put any inline SVG icon there.
+5. Set a component's inputs (like `--_accent`) on the component itself. Don't override outputs (like `--_bg-color`): states set them, so an override freezes them. For exact selectors, read `node_modules/opui-css/css/components/<component>.css`.
+
+Full docs: https://open-props-ui.netlify.app/llms.txt

package/skills/opui/references/accordion.md

@@ -0,0 +1,253 @@
+# Accordion
+
+Lets you show and hide content, on its own or as a group.
+
+- CSS: `opui-css/css/components/accordion.css` and `opui-css/css/components/card.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/accordion.md), [Astro](https://open-props-ui.netlify.app/astro/components/accordion.md), [React](https://open-props-ui.netlify.app/react/components/accordion.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/accordion.md), [Vue](https://open-props-ui.netlify.app/vue/components/accordion.md).
+
+## Accordion
+
+### Parts
+
+- `details.ui-accordion` (root): Container element.
+- `<summary>` (`AccordionSummary`): The always visible header.
+- `<svg class="ui-marker">`: The marker. In Astro, React, Svelte and Vue, `AccordionSummary` renders a chevron by default. Only `.ui-marker` animates.
+- `.ui-content` (`AccordionContent`): The collapsible content.
+- `.ui-actions` (`AccordionActions`): A group of actions, such as buttons.
+
+### Props and modifiers
+
+- `markerAnimation`: `"flip"` (`.ui-marker-animation-flip`), `"rotate"` (default), `"turn"` (`.ui-marker-animation-turn`). How the marker animates when the accordion opens. `rotate` turns it upside down, `flip` mirrors it, and `turn` gives a chevron that points to the inline end a quarter turn, so it points down when open.
+- `name`: `string`, `[name]`. Groups accordions so only one of them can be open at a time.
+- `open`: `boolean`, `[open]`. Whether the accordion is open.
+- `variant`: `"elevated"` (`.ui-elevated`), `"outlined"` (`.ui-outlined`), `"plain"` (default), `"tonal"` (`.ui-tonal`), `"transparent"` (`.ui-transparent`). The variant to use. The default `plain` accordion has the page surface and no border, like a Card. `transparent` has no surface, border or padding.
+
+### Slots
+
+- `default`: The accordion parts.
+
+### Notes
+
+- HTML: To group accordions, wrap them in a `.ui-card[role="group"]`. A variant on the group styles every accordion in it.
+- Astro, React, Svelte and Vue: Build it from `AccordionSummary`, `AccordionContent` and `AccordionActions`. To group accordions, wrap them in a `<Card role="group">`. Its `variant` styles every accordion in it.
+
+## AccordionSummary
+
+### Parts
+
+- `<summary>` (root): The always visible header.
+- `<svg class="ui-marker">` (slot `marker`): The marker. Renders a chevron by default. Only `.ui-marker` animates.
+
+### Slots
+
+- `default`: The summary text.
+
+## AccordionActions
+
+### Parts
+
+- `.ui-actions` (root): A group of actions, such as buttons.
+
+### Props and modifiers
+
+- `align`: `"end"` (default), `"start"` (`.ui-align-start`). Alignment for the actions.
+
+### Slots
+
+- `default`: The actions, such as buttons.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### accordion.css
+
+- `--_actions-gap`: Space between the buttons in `.ui-actions`.
+- `--_actions-margin-block-start`: Space above `.ui-actions`.
+- `--_actions-padding-block-end`: Bottom padding of `.ui-actions`. Defaults to `--_summary-padding-block`.
+- `--_actions-padding-inline`: Inline padding of `.ui-actions`. Defaults to `--_content-padding-inline`, and at least the focus ring's space.
+- `--_content-padding-block`: Block padding of `.ui-content`.
+- `--_content-padding-inline`: Inline padding of `.ui-content`. Defaults to `--_padding-inline`.
+- `--_divider-border-color`: Color of the border between items in a group. Defaults to `--ui-border-color`.
+- `--_ease`: Easing of the transitions. Defaults to `--ui-ease`.
+- `--_focus-ring-offset`: Offset of the `summary` focus ring. Inside the summary, except in `.ui-transparent`.
+- `--_group-radius`: Corner radius of the first and last item in a group. Defaults to `--ui-radius`.
+- `--_item-padding-inline`: Inline padding of the items in a group. `0` when the card is `.ui-transparent`.
+- `--_item-summary-padding-inline`: Inline padding of the item `summary` in a group. Defaults to `--_item-padding-inline`.
+- `--_margin-inline`: The inline margin. `0`, except in `.ui-transparent` outside a group.
+- `--_motion`: Motion multiplier for `--_duration`. `0` turns the transitions off.
+- `--_padding-inline`: Inline padding of `summary`, `.ui-content` and `.ui-actions`. `0` in `.ui-transparent`.
+- `--_radius`: The corner radius, also of the `summary` focus ring. Defaults to `--ui-radius`.
+- `--_summary-padding-block`: Block padding of `summary`.
+- `--_summary-padding-inline`: Inline padding of `summary`. Defaults to `--_padding-inline`.
+
+Outputs: `--_bg-color`, `--_border-color`, `--_border-width`, `--_duration`, `--_overflow` and `--_shadow`.
+
+### card.css
+
+- `--_ease`: Easing of 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`.
+- `--_motion`: Motion multiplier for the focus ring animation. `0` turns it 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.
+- `--_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`.
+- `--_tonal-bg-color`: Background of `.ui-tonal`. Defaults to `--ui-surface-tonal`.
+
+Outputs: `--_bg-color`, `--_border-color`, `--_border-width`, `--_duration` and `--_shadow`.
+
+## Theme tokens
+
+The stylesheets read `--ui-border-color`, `--ui-border-color-on-raised`, `--ui-border-color-raised`, `--ui-border-width`, `--ui-card-padding`, `--ui-duration`, `--ui-ease`, `--ui-field-border-color-on-raised`, `--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-weight-bold`, `--ui-line-height-tight`, `--ui-motion`, `--ui-radius`, `--ui-shadow-elevated`, `--ui-shadow-surface`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-surface`, `--ui-surface-elevated`, `--ui-surface-tonal` and `--ui-text`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Basics
+
+```html
+<details class="ui-accordion">
+  <summary>
+    Accordion
+    <svg
+      aria-hidden="true"
+      class="ui-marker"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M4.293 8.293a1 1 0 0 1 1.414 0L12 14.586l6.293-6.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414"
+      />
+    </svg>
+  </summary>
+  <div class="ui-content">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales,
+      nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis
+      neque ante id justo. Nam tempor euismod nisi ac ornare. Pellentesque id
+      sapien lacinia, venenatis est aliquam, dignissim elit. Suspendisse
+      potenti. Cras ut ante in libero tempus sodales sed quis dolor.
+    </p>
+  </div>
+</details>
+```
+
+## Astro
+
+`import { Accordion, AccordionActions, AccordionContent, AccordionSummary } from "opui-css/astro"`
+
+- `AccordionSummary` named slots: `marker`. Fill one with `slot="marker"` on a child.
+
+### Example: Basics
+
+```astro
+---
+import { Accordion, AccordionContent, AccordionSummary } from "opui-css/astro"
+---
+
+<Accordion>
+  <AccordionSummary>Accordion</AccordionSummary>
+  <AccordionContent>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales,
+      nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis
+      neque ante id justo. Nam tempor euismod nisi ac ornare. Pellentesque id
+      sapien lacinia, venenatis est aliquam, dignissim elit. Suspendisse
+      potenti. Cras ut ante in libero tempus sodales sed quis dolor.
+    </p>
+  </AccordionContent>
+</Accordion>
+```
+
+## React
+
+`import { Accordion, AccordionActions, AccordionContent, AccordionSummary } from "opui-css/react"`
+
+- `AccordionSummary` slot props (`ReactNode`): `children` and `marker`.
+
+### Example: Basics
+
+```tsx
+import { Accordion, AccordionContent, AccordionSummary } from "opui-css/react"
+
+export default function Basics() {
+  return (
+    <Accordion>
+      <AccordionSummary>Accordion</AccordionSummary>
+      <AccordionContent>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
+          sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero,
+          ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare.
+          Pellentesque id sapien lacinia, venenatis est aliquam, dignissim elit.
+          Suspendisse potenti. Cras ut ante in libero tempus sodales sed quis
+          dolor.
+        </p>
+      </AccordionContent>
+    </Accordion>
+  )
+}
+```
+
+## Svelte
+
+`import { Accordion, AccordionActions, AccordionContent, AccordionSummary } from "opui-css/svelte"`
+
+- `AccordionSummary` slot snippets: `children` and `marker`.
+
+### Example: Basics
+
+```svelte
+<script lang="ts">
+  import {
+    Accordion,
+    AccordionContent,
+    AccordionSummary,
+  } from "opui-css/svelte"
+</script>
+
+<Accordion>
+  <AccordionSummary>Accordion</AccordionSummary>
+  <AccordionContent>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales,
+      nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis
+      neque ante id justo. Nam tempor euismod nisi ac ornare. Pellentesque id
+      sapien lacinia, venenatis est aliquam, dignissim elit. Suspendisse
+      potenti. Cras ut ante in libero tempus sodales sed quis dolor.
+    </p>
+  </AccordionContent>
+</Accordion>
+```
+
+## Vue
+
+`import { Accordion, AccordionActions, AccordionContent, AccordionSummary } from "opui-css/vue"`
+
+- `AccordionSummary` named slots: `marker`. Fill one with `<template #marker>`.
+
+### Example: Basics
+
+```vue
+<script setup lang="ts">
+import { Accordion, AccordionContent, AccordionSummary } from "opui-css/vue"
+</script>
+
+<template>
+  <Accordion>
+    <AccordionSummary>Accordion</AccordionSummary>
+    <AccordionContent>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
+        sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero,
+        ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare.
+        Pellentesque id sapien lacinia, venenatis est aliquam, dignissim elit.
+        Suspendisse potenti. Cras ut ante in libero tempus sodales sed quis
+        dolor.
+      </p>
+    </AccordionContent>
+  </Accordion>
+</template>
+```