opui-css 5.4.2 → 6.0.0-rc.1

package/README.md

@@ -1,6 +1,8 @@
 # Open Props UI
 
-A CSS UI library exploring how next-gen HTML & CSS features can change the way we create components. Built on top of [Open Props](https://open-props.style/) and ships HTML, [Astro](https://astro.build/) and [Vue](https://vuejs.org/) components alongside framework-agnostic CSS.
+Design system. Components. Modern HTML & CSS.
+
+HTML, [Astro](https://astro.build/), [React](https://react.dev/), [Svelte](https://svelte.dev/) and [Vue](https://vuejs.org/) components alongside framework-agnostic CSS. The theme tokens started from [Open Props](https://open-props.style/), and the components don't need it: it ships as an optional companion for your own CSS.
 
 - Docs: [open-props-ui.netlify.app](https://open-props-ui.netlify.app/)
 - Source: [github.com/felix-bohlin/ui](https://github.com/felix-bohlin/ui)
@@ -8,14 +10,16 @@ A CSS UI library exploring how next-gen HTML & CSS features can change the way w
 ## Install
 
 ```bash
-pnpm add opui-css open-props
+pnpm add opui-css
 ```
 
 Peer dependencies:
 
-- `astro` `^6` (only required if you use the Astro components)
-- `vue` `^3` (only required if you use the Vue components)
-- `open-props` `^1`
+- `astro` `^7` (only required if you use the Astro components)
+- `open-props` `^1.7.23` (only required if you import `opui-css/open-props.css`, the Open Props source)
+- `react` and `react-dom` `^19` (only required if you use the React components)
+- `svelte` `^5.57` (only required if you use the Svelte components)
+- `vue` `^3.5` (only required if you use the Vue components)
 
 ## Usage
 
@@ -28,10 +32,105 @@ import { Button, Card } from "opui-css/astro"
 ---
 
 <Card>
-  <Button variant="primary">Click me</Button>
+  <Button color="primary" variant="filled">Click me</Button>
+</Card>
+```
+
+### React components
+
+React components ship markup only, so import the CSS once in your app entry:
+
+```css
+@import "opui-css/css/imports.css";
+```
+
+```tsx
+import { Button, Card } from "opui-css/react"
+
+export default function App() {
+  return (
+    <Card>
+      <Button color="primary" variant="filled">
+        Click me
+      </Button>
+    </Card>
+  )
+}
+```
+
+Containers take parts, such as `CardHeader` and `DialogFooter`. Other slots are props: `children`, and camelCased names such as `endText`. Form controls take the native `value`/`defaultValue`, `checked`/`defaultChecked` and `onChange` props. Components that need context, state or effects (Anchor, Callout, Dialog, Drawer, FieldGroup, Menu, Range, Select, Tabs, TextField, Textarea, ToggleButton and ToggleGroup, and the CheckboxInput, RadioInput and SwitchInput parts) are marked `"use client"`; the rest also render as React Server Components.
+
+### Svelte components
+
+Svelte components ship markup only, so import the CSS once in your root layout or app entry:
+
+```css
+@import "opui-css/css/imports.css";
+```
+
+```svelte
+<script lang="ts">
+  import { Button, Card } from "opui-css/svelte"
+</script>
+
+<Card>
+  <Button color="primary" variant="filled">Click me</Button>
 </Card>
 ```
 
+### Vue components
+
+Vue components ship markup only, so import the CSS once in your app entry:
+
+```css
+@import "opui-css/css/imports.css";
+```
+
+```vue
+<script setup lang="ts">
+import { Button, Card } from "opui-css/vue"
+</script>
+
+<template>
+  <Card>
+    <Button color="primary" variant="filled">Click me</Button>
+  </Card>
+</template>
+```
+
+`opui-css/astro`, `opui-css/react`, `opui-css/svelte` and `opui-css/vue` export uncompiled sources (`.astro`, `.tsx`, `.svelte`, `.vue`, `.ts`), so they need a bundler that compiles them, e.g. Astro, or Vite with `@vitejs/plugin-react`, `@sveltejs/vite-plugin-svelte` or `@vitejs/plugin-vue`. In Next.js, add `transpilePackages: ["opui-css"]` to `next.config`.
+
+Vite's server build loads dependencies from `node_modules` without compiling them, and Node can't load `.svelte`, `.vue` or `.tsx`, so the package has to go through the bundler on the server too. Astro does this on its own, and SvelteKit through the package's `svelte` field. In Vite SSR, add `ssr: { noExternal: ["opui-css"] }` to `vite.config`, and in Nuxt, add `build: { transpile: ["opui-css"] }` to `nuxt.config`.
+
+#### TypeScript
+
+The components ship their TypeScript sources instead of `.d.ts` files, so your `tsconfig.json` type-checks them with your own `compilerOptions`. They are checked with `strict: true`, `verbatimModuleSyntax` and `isolatedModules`, and resolve with `moduleResolution: "bundler"`, `"node16"` or `"nodenext"` (not `"node10"`). The React components need `jsx: "react-jsx"` or `"preserve"`. `exactOptionalPropertyTypes` and `noUncheckedIndexedAccess` aren't checked, so they can report errors in the package, and `skipLibCheck` doesn't skip its `.ts` files.
+
+#### Ids in Astro
+
+Components that link elements with ids (form fields, Tabs, Drawer, Menu, …) read `Astro.locals.$id` when it exists and otherwise generate a random id per render. For stable, per-request ids (useful for snapshot tests), define it in a middleware:
+
+```ts
+// src/middleware.ts
+import { defineMiddleware } from "astro:middleware"
+
+export const onRequest = defineMiddleware((context, next) => {
+  const counts = new Map<string, number>()
+  context.locals.$id = (prefix) => {
+    const count = (counts.get(prefix) ?? 0) + 1
+    counts.set(prefix, count)
+    return `${prefix}-${count}`
+  }
+  return next()
+})
+```
+
+Add `/// <reference types="opui-css/env.d.ts" />` to your `env.d.ts` to type `$id` and the `interestfor` attribute on `<a>` and `<button>`.
+
+#### Astro runtime
+
+The Astro components pass settings to their parts with `AsyncLocalStorage` (`node:async_hooks`), so they run on Node, Deno and Bun. On Cloudflare, enable the `nodejs_compat` compatibility flag.
+
 ### Plain HTML + CSS (no build step)
 
 Drop a pre-bundled stylesheet into any page and use the documented class names:
@@ -39,18 +138,20 @@ Drop a pre-bundled stylesheet into any page and use the documented class names:
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/opui-css/dist/opui.css"
+  href="https://cdn.jsdelivr.net/npm/opui-css@6/dist/opui.css"
 />
 
 <button class="ui-button ui-primary">Click me</button>
 ```
 
-`dist/opui.css` is a single self-contained file (Open Props + normalize + theme + every component + utils, in the correct cascade layers). `dist/opui.components.css` is the same minus tokens and reset for users who already have those.
+`dist/opui.css` is a single self-contained file (Open Props + palette + theme + normalize + every component + browser fallbacks + utils, in the correct cascade layers). `dist/opui.components.css` has only the layer order, the component styles, their browser fallbacks and the `Layout` classes. The components need `core/palette.css` and `css/theme.css` to look right, and `core/utils.css` holds `.ui-sr-only` and the motion and contrast classes, so load those yourself when you use it. Nothing in the package reads Open Props: `theme.css` holds its own values, and Open Props is in the bundle for your own CSS.
+
+The browser fallbacks are the `components.compat` layer, which only applies in browsers without a feature. `dist/opui.no-compat.css` is `dist/opui.css` without them, and `dist/opui.baseline-<year>.css` keeps only the ones that browsers of that Baseline year need ([Compat layer](https://open-props-ui.netlify.app/html/guide/browser-support/#compat)).
 
 If you do have a bundler that resolves CSS `@import`s (Vite, Astro, webpack, …), import the source instead so you only ship what you use:
 
 ```css
-@import "opui-css/css/imports.css"; /* same content as dist/opui.css */
+@import "opui-css/css/imports.css"; /* dist/opui.css without Open Props */
 @import "opui-css/css/components/button.css"; /* or pick à la carte */
 ```
 
@@ -59,28 +160,78 @@ If you do have a bundler that resolves CSS `@import`s (Vite, Astro, webpack, …
 The library defines this layer order:
 
 ```css
-@layer openprops, theme, normalize, components.root, components.extended, utils;
+@layer openprops, theme, normalize, components.prose, components.root, components.extended, components.compat, utils;
+@layer theme.palette, theme.base, theme.custom, theme.severity;
 ```
 
-Wrap your own styles in a layer above `utils` (or unlayered) to override.
+Import `opui-css/css/layers.css` first to set this order when you import single files, and `opui-css/css/compat.css` after the components for the browser fallbacks.
+
+Put your theme tokens in `@layer theme.custom`, which beats the defaults in `theme.base`. `theme.severity` comes after it and only holds the palette source of the severity classes, so a theme that sets `--ui-palette-source` doesn't recolor a `.ui-critical` on the same element. Wrap other overrides in a layer above `utils` (or unlayered).
+
+## Upgrading
+
+Breaking changes and how to update your code are in [MIGRATING.md](./MIGRATING.md) (also on the docs site: [Migrating to v6](https://open-props-ui.netlify.app/html/guide/migrating/)), with every change listed in [CHANGELOG.md](./CHANGELOG.md).
 
 ## Entry points
 
-| Import                              | What it gives you                             |
-| ----------------------------------- | --------------------------------------------- |
-| `opui-css`                          | Pre-bundled: everything in one file (default) |
-| `opui-css/open-props`               | Pre-bundled: Open Props tokens only           |
-| `opui-css/dist/opui.css`            | Same as default - explicit path               |
-| `opui-css/dist/opui.components.css` | Pre-bundled: components only                  |
-| `opui-css/dist/op.css`              | Same as `opui-css/open-props` - explicit path |
-| `opui-css/css/imports.css`          | Source: everything (resolved by your bundler) |
-| `opui-css/css/components.css`       | All component styles (no tokens / reset)      |
-| `opui-css/css/components/*.css`     | One component at a time                       |
-| `opui-css/core/normalize.css`       | CSS reset                                     |
-| `opui-css/core/palette.css`         | Extra OKLCH palette                           |
-| `opui-css/core/utils.css`           | Utility classes                               |
-| `opui-css/astro`                    | All Astro components                          |
-| `opui-css/components/*`             | Individual Astro component sources            |
+| Import                                   | What it gives you                                                                                                                                                                                                                                                      |
+| ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `opui-css`                               | Pre-bundled: everything in one file (default)                                                                                                                                                                                                                          |
+| `opui-css/open-props`                    | Pre-bundled: Open Props tokens only, for your own CSS (the components don't read them)                                                                                                                                                                                 |
+| `opui-css/open-props.css`                | Source: the Open Props imports (needs `open-props` installed)                                                                                                                                                                                                          |
+| `opui-css/dist/opui.css`                 | Same as default - explicit path                                                                                                                                                                                                                                        |
+| `opui-css/dist/opui.baseline-<year>.css` | Pre-bundled: everything, with only the browser fallbacks that browsers of that Baseline year need                                                                                                                                                                      |
+| `opui-css/dist/opui.components.css`      | Pre-bundled: components only (no Open Props, palette, theme, reset or utils)                                                                                                                                                                                           |
+| `opui-css/dist/opui.no-compat.css`       | Pre-bundled: everything but the browser fallbacks                                                                                                                                                                                                                      |
+| `opui-css/dist/op.css`                   | Same as `opui-css/open-props` - explicit path                                                                                                                                                                                                                          |
+| `opui-css/css/imports.css`               | Source: everything but Open Props (resolved by your bundler)                                                                                                                                                                                                           |
+| `opui-css/css/layers.css`                | `@layer` order only                                                                                                                                                                                                                                                    |
+| `opui-css/css/compat.css`                | All browser fallbacks, in the `components.compat` layer                                                                                                                                                                                                                |
+| `opui-css/css/compat/*.css`              | The browser fallbacks of one component                                                                                                                                                                                                                                 |
+| `opui-css/css/components.css`            | All component styles (no Open Props, palette, theme, reset or utils)                                                                                                                                                                                                   |
+| `opui-css/css/components/*.css`          | One component at a time                                                                                                                                                                                                                                                |
+| `opui-css/css/theme.css`                 | Theme tokens (colors, sizes, motion, state)                                                                                                                                                                                                                            |
+| `opui-css/core/normalize.css`            | CSS reset                                                                                                                                                                                                                                                              |
+| `opui-css/core/palette.css`              | OKLCH palette (required by the components)                                                                                                                                                                                                                             |
+| `opui-css/core/utils.css`                | Utility classes                                                                                                                                                                                                                                                        |
+| `opui-css/css/js/checkbox.js`            | `activateIndeterminate()`, `initCheckbox()` and `syncIndeterminate()` for indeterminate checkboxes without a framework                                                                                                                                                 |
+| `opui-css/css/js/range.js`               | `initRange()` keeps a `.ui-range` `<output data-live>` in sync with its slider without a framework                                                                                                                                                                     |
+| `opui-css/themes/*`                      | Example themes (`bootstrap`, `brutalist`, `m3`, `shadcn`), with or without `.css`                                                                                                                                                                                      |
+| `opui-css/tokens.json`                   | Every theme token in the W3C design tokens format                                                                                                                                                                                                                      |
+| `opui-css/astro`                         | All Astro components                                                                                                                                                                                                                                                   |
+| `opui-css/react`                         | All React components                                                                                                                                                                                                                                                   |
+| `opui-css/svelte`                        | All Svelte components                                                                                                                                                                                                                                                  |
+| `opui-css/vue`                           | All Vue components                                                                                                                                                                                                                                                     |
+| `opui-css/components/*`                  | Individual Astro, React, Svelte and Vue component sources. The files at the top of `components/` (`cx.ts`, `dev.ts`, `group.ts`, `id.ts`, `style.ts`, `tag.ts`, `vue.ts`, `context.astro.ts` and `content.svelte`) are internal helpers that can change in any release |
+| `opui-css/env.d.ts`                      | Astro types for `Astro.locals.$id` and `interestfor` (see [Ids in Astro](#ids-in-astro))                                                                                                                                                                               |
+| `opui-css/package.json`                  | The package manifest, for tools that read it                                                                                                                                                                                                                           |
+
+Importing a React component from `opui-css/components/*` skips the type augmentation in `opui-css/react`, which adds `command`, `commandfor` and `interestfor` to React's element types. `Menu` and `DrawerHeader` need it, so add `import type {} from "opui-css/react"` once in your app.
+
+## Themes
+
+Put your own tokens in `@layer theme.custom`, which beats the defaults and loses to everything else. Example themes ship in `themes/`: `bootstrap` (Bootstrap 5), `brutalist` (neobrutalism), `m3` (Material 3) and `shadcn` (shadcn/ui). They name their fonts (DM Sans, Roboto and Geist) but don't load them.
+
+```css
+@import "opui-css/css/imports.css";
+@import "opui-css/themes/brutalist.css";
+```
+
+## Design tokens
+
+`opui-css/tokens.json` lists every theme token in the [W3C design tokens](https://www.designtokens.org/) format: its `$type`, description and default as `$value`, and under `$extensions.opui` its CSS variable, tier (`role`, `component` or `hook`), contrast promise and dark and more-contrast values. A plain number, a `px` or `rem` length and an alias of another token are native values (`0.41`, `{"unit": "px", "value": 1}`, `{typography.ui-font-size-100}`) with the CSS beside them as `$extensions.opui.css`. Every other value is the CSS expression, since a color or size that follows another token or the color scheme has no single resolved value, so a design tool resolves those first. Tokens that are unset by default have no `$value`, only an `example`.
+
+## AI assistants
+
+The package ships an agent skill in `skills/opui`, with one reference per component for every framework, matching the installed version. Agents don't load skills from `node_modules` on their own, so copy it into your project:
+
+```bash
+npx opui-css skill
+```
+
+It writes `.claude/skills/opui` and prints the version it copied. Pass `--dir <path>` to copy it into another agent's skills folder (`<path>/opui`), and `--force` to replace an older copy after an upgrade. Without the command: `mkdir -p .claude/skills && cp -r node_modules/opui-css/skills/opui .claude/skills/opui`.
+
+The docs are also available as [llms.txt](https://open-props-ui.netlify.app/llms.txt), and every docs page has a Markdown version, e.g. [/html/components/button.md](https://open-props-ui.netlify.app/html/components/button.md).
 
 ## License
 

package/astro/index.ts

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

package/bin/opui-css.mjs

@@ -0,0 +1,68 @@
+#!/usr/bin/env node
+import { cpSync, existsSync, readFileSync, rmSync } from "node:fs"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+import { parseArgs } from "node:util"
+
+const packageDir = fileURLToPath(new URL("..", import.meta.url))
+const { version } = JSON.parse(
+  readFileSync(path.join(packageDir, "package.json"), "utf8"),
+)
+
+const USAGE = `opui-css ${version}
+
+Usage: npx opui-css skill [--dir <path>] [--force]
+
+Commands:
+  skill         Copy the opui agent skill into .claude/skills/opui
+
+Options:
+  --dir <path>  Copy it into <path>/opui instead, for another agent's skills folder
+  --force       Replace an existing copy
+  --help        Show this help`
+
+const fail = (message) => {
+  if (message) console.error(`${message}\n`)
+  console.error(USAGE)
+  process.exit(1)
+}
+
+let parsed
+try {
+  parsed = parseArgs({
+    allowPositionals: true,
+    options: {
+      dir: { type: "string" },
+      force: { type: "boolean" },
+      help: { short: "h", type: "boolean" },
+    },
+  })
+} catch (error) {
+  fail(error.message)
+}
+
+const { positionals, values } = parsed
+if (values.help) fail()
+if (positionals.length === 0) fail("Missing a command.")
+if (positionals[0] !== "skill" || positionals.length > 1) {
+  fail(`Unknown command: ${positionals.join(" ")}`)
+}
+
+const source = path.join(packageDir, "skills", "opui")
+const target = path.resolve(
+  values.dir ?? path.join(".claude", "skills"),
+  "opui",
+)
+const relative = path.relative(process.cwd(), target)
+const shown = relative && !relative.startsWith("..") ? relative : target
+
+if (existsSync(target) && !values.force) {
+  console.error(
+    `${shown} already exists. Run the command again with --force to replace it.`,
+  )
+  process.exit(1)
+}
+
+rmSync(target, { force: true, recursive: true })
+cpSync(source, target, { recursive: true })
+console.log(`Copied the opui skill from opui-css ${version} to ${shown}`)

package/components/Accordion/Accordion.astro

@@ -3,46 +3,19 @@ import type { Props } from "./types.astro"
 
 export const title = "Accordion"
 
-const { $id } = Astro.locals
-const { class: className, name, open, variant, ...rest } = Astro.props
-
-const summaryId = $id("summary")
-const contentId = $id("content")
+const { class: className, markerAnimation, variant, ...rest } = Astro.props
 ---
 
 <details
-  name={name}
   class:list={[
     "ui-accordion",
-    "ui-card",
-    variant && `ui-${variant}`,
+    markerAnimation &&
+      markerAnimation !== "rotate" &&
+      `ui-marker-animation-${markerAnimation}`,
+    variant && variant !== "plain" && `ui-${variant}`,
     className,
   ]}
-  open={open}
   {...rest}
 >
-  <!-- Summary -->
-
-  <summary id={summaryId} aria-controls={contentId}
-    ><slot name="summary" /><slot name="marker" /></summary
-  >
-
-  <!-- Content -->
-  <div
-    id={contentId}
-    class="ui-content"
-    role="region"
-    aria-labelledby={summaryId}
-  >
-    <slot />
-  </div>
-
-  <!-- Actions -->
-  {
-    Astro.slots.has("actions") && (
-      <div class="ui-actions">
-        <slot name="actions" />
-      </div>
-    )
-  }
+  <slot />
 </details>

package/components/Accordion/Accordion.react.tsx

@@ -0,0 +1,23 @@
+import { cx } from "../cx"
+import type { Props } from "./types.react"
+
+export default function Accordion({
+  className,
+  markerAnimation,
+  variant,
+  ...rest
+}: Props) {
+  return (
+    <details
+      className={cx([
+        "ui-accordion",
+        markerAnimation &&
+          markerAnimation !== "rotate" &&
+          `ui-marker-animation-${markerAnimation}`,
+        variant && variant !== "plain" && `ui-${variant}`,
+        className,
+      ])}
+      {...rest}
+    />
+  )
+}

package/components/Accordion/Accordion.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Props } from "./types.svelte"
+
+  let {
+    class: className,
+    markerAnimation,
+    variant,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<details
+  class={[
+    "ui-accordion",
+    markerAnimation &&
+      markerAnimation !== "rotate" &&
+      `ui-marker-animation-${markerAnimation}`,
+    variant && variant !== "plain" && `ui-${variant}`,
+    className,
+  ]}
+  {...rest}
+>
+  {@render children?.()}
+</details>