opui-css 5.0.0 → 5.1.0

package/MIGRATING.md

@@ -1,127 +1,138 @@
-# Migrating from v4 to v5
-
-v5 prefixes every OPUI-owned class with `ui-`. The component prop API is unchanged; only the rendered class names change.
-
-If you use the framework component (e.g. `<Button size="small" variant="outlined">`), you don't need to do anything — the component emits the prefixed classes for you.
-
-If you use raw HTML or write CSS that targets library classes, you must rename every reference:
-
-```diff
-- <button class="button outlined small">Save</button>
-+ <button class="ui-button ui-outlined ui-small">Save</button>
-```
-
-```diff
-- .button.filled { /* override */ }
-+ .ui-button.ui-filled { /* override */ }
-```
-
-The full list of renamed tokens is in [CHANGELOG.md](./CHANGELOG.md#500). Run a project-wide find/replace per token, then visually smoke test.
-
-CSS custom properties (`--primary`, `--surface-default`, `--size-3`, …) are unchanged.
-
-# Migrating from v3 to v4
-
-v4 is a full re-platform.
-
-## 1. `import "opui-css"` still works
-
-The default export still resolves to a complete, ready-to-use stylesheet — just under a different filename. No code change needed unless you want one.
-
-```diff
-- import "opui-css"          // resolved to dist/theme-two/theme-two.css
-+ import "opui-css"          // now resolves to dist/opui.css (single theme)
-```
-
-If you imported `theme-one` specifically, you need to either accept the new theme or vendor the v3 stylesheet into your repo:
-
-```diff
-- import "opui-css/theme-one"
-- import "opui-css/theme-one/components"
-+ import "opui-css"          // or your own override layer
-```
-
-## 2. `opui-css/open-props` is unchanged
-
-```js
-import "opui-css/open-props" // still points at compiled Open Props tokens
-```
-
-## 3. The other `dist/` subpaths
-
-| v3                                       | v4                                  |
-| ---------------------------------------- | ----------------------------------- |
-| `opui-css/dist/theme-two/theme-two.css`  | `opui-css/dist/opui.css`            |
-| `opui-css/dist/theme-two/components.css` | `opui-css/dist/opui.components.css` |
-| `opui-css/dist/theme-one/theme-one.css`  | removed                             |
-| `opui-css/dist/theme-one/components.css` | removed                             |
-| `opui-css/dist/op.css`                   | `opui-css/dist/op.css` (unchanged)  |
-
-## 4. Source layout moved
-
-If you were importing from `src/`:
-
-```diff
-- @import "opui-css/src/components/button.css";
-+ @import "opui-css/css/components/button.css";
-```
-
-The component CSS now lives under `css/`. The pre-bundled output stays in `dist/`.
-
-## 5. Pick a theme — there's only one
-
-`theme-one` and `theme-two` are removed. The shipped theme lives in `css/theme.css`. To customise, override variables in a layer:
-
-```css
-@layer theme {
-  :root {
-    --primary: oklch(60% 0.2 250);
-  }
-}
-```
-
-## 6. `open-props` is now a peer dependency
-
-v3 had `open-props` as a regular dependency. v4 makes it a peer so you control the version:
-
-```bash
-pnpm add open-props
-```
-
-## 7. New: Astro components
-
-```astro
----
-import { Button, Dialog, Tabs } from "opui-css/astro"
----
-
-<Button variant="primary">Save</Button>
-```
-
-`astro` is an _optional_ peer — only required if you actually import from `opui-css/astro`. Pure-CSS consumers won't see a peer warning.
-
-Astro components emit prefixed `ui-` classes (see the v4 → v5 section at the top of this file). Raw HTML and CSS overrides must use those prefixed names.
-
-## 8. Cascade layers
-
-v4 declares the layer order in `css/imports.css` / `dist/opui.css`:
-
-```css
-@layer openprops, normalize, theme, components.root, components.extended, utils;
-```
-
-Put your overrides in a later layer or unlayered. If your app already declared `@layer` with a different order, reconcile or import `dist/opui.components.css` and own the layer order yourself.
-
-## 9. Copy/paste is still supported
-
-The source files under `components/` and `css/components/` are unminified and free to vendor in — the license is unchanged (MIT).
-
-## 10. Pinning v3
-
-If you're not ready to migrate, pin the last v3 release:
-
-```json
-{ "dependencies": { "opui-css": "3.3.5" } }
-```
-
-v3 will not receive further updates.
+# Migrating from v5.0 to v5.1
+
+In v5.1.0, the `critical` prop has been renamed to `error` on all form components (`TextField`, `Checkbox`, `Radio`, `Switch`, `Select`, `ClassicSelect`, `Textarea`).
+
+```diff
+- <TextField critical label="Name" />
++ <TextField error label="Name" />
+```
+
+Note: Components that use `critical` for severity styling (such as `Button`, `Callout`, `Badge`) still use the `critical` prop.
+
+# Migrating from v4 to v5
+
+v5 prefixes every OPUI-owned class with `ui-`. The component prop API is unchanged; only the rendered class names change.
+
+If you use the framework component (e.g. `<Button size="small" variant="outlined">`), you don't need to do anything — the component emits the prefixed classes for you.
+
+If you use raw HTML or write CSS that targets library classes, you must rename every reference:
+
+```diff
+- <button class="button outlined small">Save</button>
++ <button class="ui-button ui-outlined ui-small">Save</button>
+```
+
+```diff
+- .button.filled { /* override */ }
++ .ui-button.ui-filled { /* override */ }
+```
+
+The full list of renamed tokens is in [CHANGELOG.md](./CHANGELOG.md#500). Run a project-wide find/replace per token, then visually smoke test.
+
+CSS custom properties (`--primary`, `--surface-default`, `--size-3`, …) are unchanged.
+
+# Migrating from v3 to v4
+
+v4 is a full re-platform.
+
+## 1. `import "opui-css"` still works
+
+The default export still resolves to a complete, ready-to-use stylesheet — just under a different filename. No code change needed unless you want one.
+
+```diff
+- import "opui-css"          // resolved to dist/theme-two/theme-two.css
++ import "opui-css"          // now resolves to dist/opui.css (single theme)
+```
+
+If you imported `theme-one` specifically, you need to either accept the new theme or vendor the v3 stylesheet into your repo:
+
+```diff
+- import "opui-css/theme-one"
+- import "opui-css/theme-one/components"
++ import "opui-css"          // or your own override layer
+```
+
+## 2. `opui-css/open-props` is unchanged
+
+```js
+import "opui-css/open-props" // still points at compiled Open Props tokens
+```
+
+## 3. The other `dist/` subpaths
+
+| v3                                       | v4                                  |
+| ---------------------------------------- | ----------------------------------- |
+| `opui-css/dist/theme-two/theme-two.css`  | `opui-css/dist/opui.css`            |
+| `opui-css/dist/theme-two/components.css` | `opui-css/dist/opui.components.css` |
+| `opui-css/dist/theme-one/theme-one.css`  | removed                             |
+| `opui-css/dist/theme-one/components.css` | removed                             |
+| `opui-css/dist/op.css`                   | `opui-css/dist/op.css` (unchanged)  |
+
+## 4. Source layout moved
+
+If you were importing from `src/`:
+
+```diff
+- @import "opui-css/src/components/button.css";
++ @import "opui-css/css/components/button.css";
+```
+
+The component CSS now lives under `css/`. The pre-bundled output stays in `dist/`.
+
+## 5. Pick a theme — there's only one
+
+`theme-one` and `theme-two` are removed. The shipped theme lives in `css/theme.css`. To customise, override variables in a layer:
+
+```css
+@layer theme {
+  :root {
+    --primary: oklch(60% 0.2 250);
+  }
+}
+```
+
+## 6. `open-props` is now a peer dependency
+
+v3 had `open-props` as a regular dependency. v4 makes it a peer so you control the version:
+
+```bash
+pnpm add open-props
+```
+
+## 7. New: Astro components
+
+```astro
+---
+import { Button, Dialog, Tabs } from "opui-css/astro"
+---
+
+<Button variant="primary">Save</Button>
+```
+
+`astro` is an _optional_ peer — only required if you actually import from `opui-css/astro`. Pure-CSS consumers won't see a peer warning.
+
+Astro components emit prefixed `ui-` classes (see the v4 → v5 section at the top of this file). Raw HTML and CSS overrides must use those prefixed names.
+
+## 8. Cascade layers
+
+v4 declares the layer order in `css/imports.css` / `dist/opui.css`:
+
+```css
+@layer openprops, normalize, theme, components.root, components.extended, utils;
+```
+
+Put your overrides in a later layer or unlayered. If your app already declared `@layer` with a different order, reconcile or import `dist/opui.components.css` and own the layer order yourself.
+
+## 9. Copy/paste is still supported
+
+The source files under `components/` and `css/components/` are unminified and free to vendor in — the license is unchanged (MIT).
+
+## 10. Pinning v3
+
+If you're not ready to migrate, pin the last v3 release:
+
+```json
+{ "dependencies": { "opui-css": "3.3.5" } }
+```
+
+v3 will not receive further updates.

package/README.md

@@ -1,87 +1,87 @@
-# 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 [Astro](https://astro.build/) components alongside framework-agnostic 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)
-
-## Install
-
-```bash
-pnpm add opui-css open-props
-```
-
-Peer dependencies:
-
-- `astro` `^6` (only required if you use the Astro components)
-- `open-props` `^1`
-
-## Usage
-
-### Astro components
-
-```astro
----
-import "opui-css/css/imports.css"
-import { Button, Card } from "opui-css/astro"
----
-
-<Card>
-  <Button variant="primary">Click me</Button>
-</Card>
-```
-
-### Plain HTML + CSS (no build step)
-
-Drop a pre-bundled stylesheet into any page and use the documented class names:
-
-```html
-<link rel="stylesheet" href="https://unpkg.com/opui-css/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.
-
-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/components/button.css"; /* or pick à la carte */
-```
-
-### Cascade layers
-
-The library defines this layer order:
-
-```css
-@layer openprops, normalize, theme, components.root, components.extended, utils;
-```
-
-Wrap your own styles in a layer above `utils` (or unlayered) to override.
-
-## 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            |
-
-## Contributing
-
-See [`CONTRIBUTING.md`](./CONTRIBUTING.md) for the component-authoring pattern.
-
-## License
-
-[MIT](./LICENSE) © Felix Bohlin
+# 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 [Astro](https://astro.build/) components alongside framework-agnostic 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)
+
+## Install
+
+```bash
+pnpm add opui-css open-props
+```
+
+Peer dependencies:
+
+- `astro` `^6` (only required if you use the Astro components)
+- `open-props` `^1`
+
+## Usage
+
+### Astro components
+
+```astro
+---
+import "opui-css/css/imports.css"
+import { Button, Card } from "opui-css/astro"
+---
+
+<Card>
+  <Button variant="primary">Click me</Button>
+</Card>
+```
+
+### Plain HTML + CSS (no build step)
+
+Drop a pre-bundled stylesheet into any page and use the documented class names:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/opui-css/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.
+
+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/components/button.css"; /* or pick à la carte */
+```
+
+### Cascade layers
+
+The library defines this layer order:
+
+```css
+@layer openprops, theme, normalize, components.root, components.extended, utils;
+```
+
+Wrap your own styles in a layer above `utils` (or unlayered) to override.
+
+## 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            |
+
+## Contributing
+
+See [`CONTRIBUTING.md`](./CONTRIBUTING.md) for the component-authoring pattern.
+
+## License
+
+[MIT](./LICENSE) © Felix Bohlin

package/astro/index.ts

@@ -1,46 +1,46 @@
-export { default as Accordion } from "../components/Accordion/Accordion.astro"
-export { default as Anchor } from "../components/Anchor/Anchor.astro"
-export { default as Avatar } from "../components/Avatar/Avatar.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 Card } from "../components/Card/Card.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 Dialog } from "../components/Dialog/Dialog.astro"
-export { default as Divider } from "../components/Divider/Divider.astro"
-export { default as Drawer } from "../components/Drawer/Drawer.astro"
-export { default as DrawerFooter } from "../components/Drawer/DrawerFooter.astro"
-export { default as DrawerHeader } from "../components/Drawer/DrawerHeader.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 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 Progress } from "../components/Progress/Progress.astro"
-export { default as Radio } from "../components/Radio/Radio.astro"
-export { default as RadioInput } from "../components/Radio/RadioInput.astro"
-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 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 Accordion } from "../components/Accordion/Accordion.astro"
+export { default as Anchor } from "../components/Anchor/Anchor.astro"
+export { default as Avatar } from "../components/Avatar/Avatar.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 Card } from "../components/Card/Card.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 Dialog } from "../components/Dialog/Dialog.astro"
+export { default as Divider } from "../components/Divider/Divider.astro"
+export { default as Drawer } from "../components/Drawer/Drawer.astro"
+export { default as DrawerFooter } from "../components/Drawer/DrawerFooter.astro"
+export { default as DrawerHeader } from "../components/Drawer/DrawerHeader.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 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 Progress } from "../components/Progress/Progress.astro"
+export { default as Radio } from "../components/Radio/Radio.astro"
+export { default as RadioInput } from "../components/Radio/RadioInput.astro"
+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 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"