opui-css 5.0.0 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. package/CHANGELOG.md +317 -276
  2. package/LICENSE +21 -21
  3. package/MIGRATING.md +138 -127
  4. package/README.md +87 -87
  5. package/astro/index.ts +46 -46
  6. package/components/AGENTS.md +248 -248
  7. package/components/Accordion/Accordion.astro +52 -42
  8. package/components/Anchor/Anchor.astro +55 -51
  9. package/components/Avatar/Avatar.astro +38 -38
  10. package/components/Badge/Badge.astro +59 -59
  11. package/components/Button/Button.astro +45 -45
  12. package/components/ButtonGroup/ButtonGroup.astro +36 -29
  13. package/components/Callout/Callout.astro +75 -75
  14. package/components/Card/Card.astro +38 -36
  15. package/components/Checkbox/Checkbox.astro +76 -76
  16. package/components/Checkbox/CheckboxInput.astro +32 -32
  17. package/components/Chip/Chip.astro +37 -37
  18. package/components/ClassicSelect/ClassicSelect.astro +83 -83
  19. package/components/DescriptionList/Description.astro +12 -12
  20. package/components/DescriptionList/DescriptionList.astro +22 -22
  21. package/components/DescriptionList/Item.astro +12 -12
  22. package/components/DescriptionList/Term.astro +12 -12
  23. package/components/DescriptionList/index.ts +12 -12
  24. package/components/Dialog/Dialog.astro +43 -41
  25. package/components/Divider/Divider.astro +17 -17
  26. package/components/Drawer/Drawer.astro +49 -49
  27. package/components/Drawer/DrawerFooter.astro +14 -14
  28. package/components/Drawer/DrawerHeader.astro +31 -31
  29. package/components/FieldDescription/FieldDescription.astro +13 -13
  30. package/components/FieldGroup/FieldGroup.astro +31 -31
  31. package/components/FieldLegend/FieldLegend.astro +15 -15
  32. package/components/FieldSet/FieldSet.astro +15 -15
  33. package/components/Form/Form.astro +15 -15
  34. package/components/IconButton/IconButton.astro +26 -26
  35. package/components/List/List.astro +36 -36
  36. package/components/ListItem/ListItem.astro +118 -118
  37. package/components/Progress/Progress.astro +41 -40
  38. package/components/Radio/Radio.astro +70 -70
  39. package/components/Radio/RadioInput.astro +24 -24
  40. package/components/Range/Range.astro +136 -136
  41. package/components/Select/Select.astro +106 -106
  42. package/components/Switch/Switch.astro +101 -101
  43. package/components/Switch/SwitchInput.astro +25 -25
  44. package/components/Table/Body.astro +13 -13
  45. package/components/Table/Cell.astro +13 -13
  46. package/components/Table/Column.astro +15 -15
  47. package/components/Table/ColumnGroup.astro +13 -13
  48. package/components/Table/Head.astro +13 -13
  49. package/components/Table/HeaderCell.astro +13 -13
  50. package/components/Table/Row.astro +13 -13
  51. package/components/Table/Table.astro +18 -18
  52. package/components/Table/index.ts +20 -20
  53. package/components/Tabs/Tabs.astro +28 -28
  54. package/components/Tabs/TabsItem.astro +47 -47
  55. package/components/Tabs/TabsPanel.astro +21 -21
  56. package/components/Tabs/TabsTab.astro +19 -19
  57. package/components/Tabs/index.ts +14 -14
  58. package/components/TextField/TextField.astro +128 -128
  59. package/components/Textarea/Textarea.astro +106 -106
  60. package/components/Toast/Toast.astro +42 -42
  61. package/components/ToggleButton/ToggleButton.astro +53 -53
  62. package/components/ToggleGroup/ToggleGroup.astro +49 -49
  63. package/components/Tooltip/Tooltip.astro +30 -30
  64. package/core/normalize.css +200 -194
  65. package/core/palette.css +110 -59
  66. package/core/utils.css +71 -71
  67. package/css/components/accordion.css +174 -174
  68. package/css/components/anchor.css +27 -27
  69. package/css/components/avatar.css +65 -65
  70. package/css/components/badge.css +107 -107
  71. package/css/components/button-group.css +193 -179
  72. package/css/components/button.css +227 -215
  73. package/css/components/callout.css +112 -109
  74. package/css/components/card.css +115 -117
  75. package/css/components/checkbox.css +211 -205
  76. package/css/components/chip.css +92 -87
  77. package/css/components/description-list.css +81 -80
  78. package/css/components/dialog.css +69 -68
  79. package/css/components/divider.css +20 -20
  80. package/css/components/drawer.css +171 -171
  81. package/css/components/form.css +147 -146
  82. package/css/components/icon-button.css +158 -139
  83. package/css/components/link.css +21 -21
  84. package/css/components/list.css +343 -345
  85. package/css/components/progress.css +103 -97
  86. package/css/components/radio.css +170 -172
  87. package/css/components/range.css +342 -337
  88. package/css/components/select.css +172 -169
  89. package/css/components/spinner.css +38 -37
  90. package/css/components/switch.css +271 -268
  91. package/css/components/table.css +173 -179
  92. package/css/components/tabs.css +84 -83
  93. package/css/components/text-field.css +449 -450
  94. package/css/components/text-input.css +68 -64
  95. package/css/components/textarea.css +26 -24
  96. package/css/components/toast.css +160 -161
  97. package/css/components/toggle-button.css +91 -87
  98. package/css/components/toggle-group.css +56 -56
  99. package/css/components/tooltip.css +70 -67
  100. package/css/components/typography.css +585 -585
  101. package/css/components.css +41 -41
  102. package/css/imports.css +17 -16
  103. package/css/js/checkbox.js +21 -21
  104. package/css/js/toast.js +94 -94
  105. package/css/theme.css +133 -132
  106. package/dist/op.css +4 -66
  107. package/dist/op.css.map +1 -1
  108. package/dist/opui.components.css +5234 -5154
  109. package/dist/opui.components.css.map +1 -1
  110. package/dist/opui.css +5798 -5663
  111. package/dist/opui.css.map +1 -1
  112. package/env.d.ts +14 -14
  113. package/open-props.css +8 -9
  114. package/package.json +81 -81
package/CHANGELOG.md CHANGED
@@ -1,276 +1,317 @@
1
- # Changelog
2
-
3
- ## 5.0.0 - 2026-05-21
4
-
5
- ### Breaking
6
-
7
- This is technically very breaking, but with a little prompting from you it's probably not a big deal for you. Hopefully you'll understand the reasoning behind this.
8
-
9
- Every OPUI-owned class now has a `ui-` prefix. This eliminates collisions with consumer styles and makes library classes self-identifying in the DOM.
10
-
11
- - Component prop API is **unchanged**: `<Button size="small" variant="outlined" color="primary">` works exactly as before.
12
- - Raw HTML / CSS users **must** rename every library class. `<button class="button outlined">` → `<button class="ui-button ui-outlined">`. `.button { ... }` overrides → `.ui-button { ... }`.
13
- - CSS custom properties (`--primary`, `--surface-default`, `--size-3`, …) are unchanged.
14
- - The framework component renders prefixed classes (`<button class="ui-button ui-small ui-outlined ui-primary">`); only the rendered HTML changes, not the public prop API.
15
- - **Divider**, **Progress**, **Table**, **Tabs**, and **Description List** now render and style prefixed classes end-to-end (`.ui-divider`, `.ui-progress`, `.ui-table`, `.ui-tab-label`, `.ui-tab-panel`, `.ui-term`). Plain `<hr>`, `<progress>`, and `<table>` elements no longer pick up library styles unless the class is present.
16
- - **Toggle Button**: pressed state no longer adds an unprefixed `selected` class.
17
- - **Avatar**: removed unused `spacing` prop and related group gap classes.
18
-
19
- #### Migration
20
-
21
- Run a project-wide find/replace per token, prompt or whatever. Below are all the classes that got a `ui-` prefix.
22
-
23
- <details>
24
- <summary>Migrated classes</summary>
25
-
26
- `abbr`, `accordion`, `actions`, `align-end`, `anchor`, `anchor-floating`, `auto-fit`, `avatar`, `backdrop-transparent`, `badge`, `badge-indicator`, `block-end`, `block-start`, `blockquote`, `border-filled`, `border-primary`, `border-tonal`, `border-top`, `bordered`, `button`, `button-group`, `callout`, `caption`, `card`, `checkbox`, `chip`, `cite`, `close-button`, `code-block`, `content`, `critical`, `dark`, `default`, `del`, `dense`, `description`, `description-list`, `dfn`, `dialog`, `disabled`, `divider`, `dot`, `dotted`, `drawer`, `elevated`, `end`, `end-end`, `end-start`, `end-text`, `exiting`, `field`, `field-description`, `field-group`, `fieldset`, `fieldset-item`, `filled`, `footer`, `form`, `gutterless`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `header`, `hgroup`, `icon`, `icon-button`, `icon-checked`, `icon-only`, `icon-unchecked`, `info`, `inline-end`, `inline-start`, `ins`, `inset`, `invisible`, `item`, `kbd`, `label`, `large`, `legend`, `light`, `link`, `list`, `mark`, `multiline`, `neutral`, `not-rich-text`, `outlined`, `overline`, `p`, `prefix`, `primary`, `progress`, `radio`, `range`, `rich-text`, `rounded`, `row`, `s`, `samp`, `scroll-lock`, `select`, `small`, `spacious`, `spread`, `squared`, `squircle`, `sr-only`, `stack`, `start`, `start-start`, `start-text`, `sub`, `success`, `suffix`, `sup`, `switch`, `tab-input`, `tab-label`, `tab-panel`, `table`, `tabs`, `term`, `text`, `text-field`, `textarea`, `title`, `toast`, `toggle-button`, `toggle-group`, `tonal`, `tooltip`, `transparent`, `u`, `value`, `var`, `vertical`, `warning`, `with-arrow`, `x-small`.
27
-
28
- </details>
29
-
30
- After the search/replace, do a visual smoke test — there is no automated codemod for consumer projects.
31
-
32
- ## 4.1.0 - 2026-05-18
33
-
34
- ### Breaking
35
-
36
- - **Card** and **Dialog** (Astro): the `actions` prop with an `align` field is removed. Use the `actionsAlign` prop instead (`"start"` | `"end"`).
37
-
38
- ## 4.0.1 - 2026-05-13
39
-
40
- ### Fixed
41
-
42
- - Autosuggest arrow placement.
43
-
44
- ## 4.0.0
45
-
46
- Complete rewrite. The library now also ships as an installable npm package with Astro components.
47
-
48
- Don't forget, I'm just a single person working on this in my free time. I'm doing this for fun. There will be bugs.
49
-
50
- ### Breaking
51
-
52
- - `theme-one` and `theme-two` are removed. I can't maintain a million themes. There is now a single theme in `css/theme.css`.
53
- - The default package entry (`import "opui-css"`) now resolves to the single bundled stylesheet (`dist/opui.css`) instead of `dist/theme-two/theme-two.css`. The class names are the same, the file path is not.
54
- - The `src/themes/` build pipeline is gone (vite + postcss + per-theme scripts). The package now builds with a small `postcss-import`-only pipeline that does not transform or lower any CSS syntax.
55
- - Component CSS source moved from `src/components/` to `css/components/`. The pre-bundled output stays in `dist/`.
56
- - Cascade layer order is now declared by the library in `css/imports.css`: `openprops, normalize, theme, components.root, components.extended, utils`.
57
- - `astro` `^6` is required if you import from `opui-css/astro`. Pure-CSS consumers are unaffected (the peer is marked optional).
58
-
59
- ### Added
60
-
61
- - Anchor, Drawer, Form, Toast, Toggle, Tooltip and a lot of re-writes and improvements to existing components.
62
- - Definition List -> Description List
63
- - Tab buttons -> Tabs
64
- - Toggle button group -> Toggle
65
- - Astro component entry: `import { Button } from "opui-css/astro"`.
66
- - Per-component CSS imports under `opui-css/css/components/*.css`.
67
- - Pre-bundled stylesheets in `opui-css/dist/`: `opui.css` (everything), `opui.components.css` (components only), and `op.css` (Open Props tokens, unchanged subpath from v3) for CDN / no-bundler use.
68
- - `sideEffects` correctly declared so bundlers don't tree-shake CSS.
69
-
70
- ### Migration
71
-
72
- See [`MIGRATING.md`](./MIGRATING.md).
73
-
74
- ## 3.3.5 - 2026-02-19
75
-
76
- ### Changed
77
-
78
- - goof: forgot to leave open-props as a dependency
79
-
80
- ## 3.3.4 - 2026-02-19
81
-
82
- ### Changed
83
-
84
- - Moved all dependencies to `devDependencies`.
85
-
86
- ## 3.3.3 - 2026-01-07
87
-
88
- ### Changed
89
-
90
- - **Build Process**: Refactored `scripts/build-themes.js` to support organized theme exports. Files are now exported to theme-specific subdirectories in `dist/`.
91
- - **Package Exports**: Updated `package.json` to use subpath exports:
92
- - Default export `"."` now points to `theme-two.css`.
93
- - Added `"./theme-one"` and `"./theme-two"` exports.
94
- - Added `"./theme-one/components"` and `"./theme-two/components"` component imports.
95
- - Added `"./open-props"` export for the base Open Props stuff.
96
- - **Documentation**: Updated "Getting Started" guide with new usage examples and bundler configuration instructions (Vite vs. PostCSS).
97
-
98
- ### Fixed
99
-
100
- - Improved build script to automatically create subdirectories in `dist/` if they don't exist.
101
- - Fixed watch mode in `build-themes.js` to correctly track and rebuild both theme and component files.
102
-
103
- ## 3.3.1 - 2025-12-17
104
-
105
- ### Fixed
106
-
107
- - `switch.css` goof.
108
-
109
- ## 3.3.0 - 2025-12-17
110
-
111
- ### Added
112
-
113
- - Internal updates and optimizations.
114
-
115
- ## 3.2.0 - 2025-12-07
116
-
117
- ### Added
118
-
119
- - Add support for `kbd` element inside of `<button>`.
120
-
121
- ## 3.1.2 - 2025-11-09
122
-
123
- ### Added
124
-
125
- - Added CSS variable to control list hover `background-color`.
126
-
127
- ## 3.1.1 - 2025-10-23
128
-
129
- ### Added
130
-
131
- - Add support for icons in Switch component (e.g., dark mode toggle).
132
-
133
- ### Fixed
134
-
135
- - Bug fix for definition list where lists with lots of content weren't rendering correctly.
136
-
137
- ## 3.1.0 - 2025-10-23
138
-
139
- ### Changed
140
-
141
- - Removed sticky header from `table` component to allow for custom implementations.
142
-
143
- ## 3.0.0 - 2025-10-22
144
-
145
- ### Added
146
-
147
- - **Themes**: Introduced a formal theme system.
148
- - Added `theme-two` as the new default theme (cleaner, more unified).
149
- - Revised documentation and getting started guide for the new theme system.
150
-
151
- ### Changed
152
-
153
- - Refactored component structure to better support multiple themes.
154
-
155
- ## 2.2.3 - 2025-09-21
156
-
157
- ### Changed
158
-
159
- - Reverted `box-sizing` change from previous release.
160
-
161
- ## 2.2.2 - 2025-08-19
162
-
163
- ### Changed
164
-
165
- - Moved `theme.css` out of the main bundle.
166
- - Made `box-sizing` declaration in normalize less intrusive.
167
-
168
- ## 2.0.1 - 2025-08-19
169
-
170
- ### Removed
171
-
172
- - Removed redundant code and assets.
173
-
174
- ## 2.0.0 - 2025-08-19
175
-
176
- ### Changed
177
-
178
- - **Folder Structure**: New and improved folder structure.
179
- - **PostCSS**: Switched from `lightningcss` to `postcss` for better stability.
180
- - **NPM**: Made the package installable via npm.
181
- - **Layers**: Renamed component sub-layers to `components.root` and `components.extended`.
182
- - **Bundles**: Added pre-bundled versions with and without Open Props.
183
-
184
- ### Fixed
185
-
186
- - Progress component wrapped in `@layer`.
187
- - Theme color scheme fallback improvements.
188
-
189
- ## 1.2.4 - 2025-04-23
190
-
191
- ### Fixed
192
-
193
- - Normalize custom-media improvements.
194
-
195
- ## 1.2.3 - 2025-04-16
196
-
197
- ### Fixed
198
-
199
- - Button CSS updates.
200
-
201
- ## 1.2.2 - 2025-03-18
202
-
203
- ### Added
204
-
205
- - Improved Select list animation and implementation of `::picker-icon`.
206
- - Context-aware link colors in Alerts.
207
-
208
- ## 1.2.1 - 2025-03-07
209
-
210
- ### Fixed
211
-
212
- - Removed unused border color in Switch component.
213
-
214
- ## 1.2.0 - 2025-02-18
215
-
216
- ### Added
217
-
218
- - New component: `tab-buttons`.
219
-
220
- ## 1.1.4 - 2025-02-18
221
-
222
- ### Fixed
223
-
224
- - Dialog component improvements when used with `.card` class.
225
-
226
- ## 1.1.3 - 2025-02-11
227
-
228
- ### Fixed
229
-
230
- - Field component: Fixed issue where input was pushed down instead of label moving.
231
-
232
- ## 1.1.2 - 2025-02-10
233
-
234
- ### Changed
235
-
236
- - Refactored pseudo-elements to use double colons (`::`).
237
- - General package upgrades.
238
-
239
- ### Fixed
240
-
241
- - Normalize `::before` fix.
242
- - Outline offset clipping.
243
-
244
- ## 1.1.1 - 2025-01-26
245
-
246
- ### Added
247
-
248
- - `box-decoration-clone` for `mark` elements.
249
-
250
- ## 1.1.0 - 2025-01-19
251
-
252
- ### Added
253
-
254
- - New component: `range` input.
255
-
256
- ## 1.0.2 - 2025-01-17
257
-
258
- ### Fixed
259
-
260
- - Select and documentation fixes.
261
-
262
- ## 1.0.1 - 2025-01-16
263
-
264
- ### Changed
265
-
266
- - Adjusted for Select API changes (`<selectedoption>` to `<selectedcontent>`).
267
- - Checkmark pseudo-element changed from `::before` to `::check`.
268
-
269
- ## 1.0.0 - 2025-01-14
270
-
271
- ### Added
272
-
273
- - Initial release with 25+ components.
274
- - Full documentation website.
275
- - Added `[name]` attribute support to accordion.
276
- - Support for stroke SVG icons in buttons.
1
+ # Changelog
2
+
3
+ ## 5.1.0 - 2026-05-28
4
+
5
+ ### Fixed
6
+
7
+ - [#351](https://github.com/felix-bohlin/ui/issues/351): (Attempted to) fix performance issue caused by palette being defined on `*` instead of `:root`. This was causing style recalculations on every element when the palette changed, oops. Hopefully now, recalculations will only happen on elements that use palette variables.
8
+
9
+ The heavy color math is now properly scoped down to `:root`, severity classes (ex `.ui-warning`), and invalid components (`[class*="ui-"]:has(:user-invalid)`).
10
+
11
+ - Palette no longer is included in the openprops layer, instead it's been placed in the `theme.palette` layer, so hopefully it will solve some potential specificity issues.
12
+
13
+ ### Changed
14
+
15
+ - Renamed the `critical` prop to `error` for validation in form components (`TextField`, `Checkbox`, `Radio`, `Switch`, `Select`, `ClassicSelect`, `Textarea`). While `critical` remains the standard for severity coloring (e.g. Buttons, Callouts, Badges), `error` makes more contextual sense for validation states.
16
+
17
+ ### Added
18
+
19
+ - Added a new `.ui-palette` util class. If you are building something where you want to make use of the palette you can just use that class and be able to use the palette right there.
20
+
21
+ ### Migration
22
+
23
+ The `opui-css/open-props` export no longer bundles OPUI's custom palette variables (`--color-*` and `--gray-*`). It now strictly represents the underlying Open Props tokens.
24
+
25
+ If you were relying on OPUI’s dynamic palette colors while importing the `open-props` subpath, you must now explicitly import the palette module alongside it:
26
+
27
+ ```diff
28
+ import 'opui-css/open-props';
29
+ + import 'opui-css/core/palette.css';
30
+ ```
31
+
32
+ Alternately, you can import the default full bundle (`import 'opui-css';`) which includes everything.
33
+
34
+ ### Thank you
35
+
36
+ - [yinhx3](https://github.com/yinhx3) for reporting [#351](https://github.com/felix-bohlin/ui/issues/351)!
37
+
38
+ ## 5.0.1 - 2026-05-26
39
+
40
+ ### Breaking
41
+
42
+ - **Progress**: the `.ui-progress` class is now placed on a wrapper `<div>` instead of directly on `<progress>`. Raw HTML users must change `<progress class="ui-progress">` → `<div class="ui-progress"><progress>…</progress></div>`. Variant modifiers (`ui-default`, `ui-filled`, `ui-tonal`) also move to the wrapper `<div>`. The Astro component handles this automatically.
43
+
44
+ ## 5.0.0 - 2026-05-21
45
+
46
+ ### Breaking
47
+
48
+ This is technically very breaking, but with a little prompting from you it's probably not a big deal for you. Hopefully you'll understand the reasoning behind this.
49
+
50
+ Every OPUI-owned class now has a `ui-` prefix. This eliminates collisions with consumer styles and makes library classes self-identifying in the DOM.
51
+
52
+ - Component prop API is **unchanged**: `<Button size="small" variant="outlined" color="primary">` works exactly as before.
53
+ - Raw HTML / CSS users **must** rename every library class. `<button class="button outlined">` → `<button class="ui-button ui-outlined">`. `.button { ... }` overrides → `.ui-button { ... }`.
54
+ - CSS custom properties (`--primary`, `--surface-default`, `--size-3`, …) are unchanged.
55
+ - The framework component renders prefixed classes (`<button class="ui-button ui-small ui-outlined ui-primary">`); only the rendered HTML changes, not the public prop API.
56
+ - **Divider**, **Progress**, **Table**, **Tabs**, and **Description List** now render and style prefixed classes end-to-end (`.ui-divider`, `.ui-progress`, `.ui-table`, `.ui-tab-label`, `.ui-tab-panel`, `.ui-term`). Plain `<hr>`, `<progress>`, and `<table>` elements no longer pick up library styles unless the class is present.
57
+ - **Toggle Button**: pressed state no longer adds an unprefixed `selected` class.
58
+ - **Avatar**: removed unused `spacing` prop and related group gap classes.
59
+
60
+ #### Migration
61
+
62
+ Run a project-wide find/replace per token, prompt or whatever. Below are all the classes that got a `ui-` prefix.
63
+
64
+ <details>
65
+ <summary>Migrated classes</summary>
66
+
67
+ `abbr`, `accordion`, `actions`, `align-end`, `anchor`, `anchor-floating`, `auto-fit`, `avatar`, `backdrop-transparent`, `badge`, `badge-indicator`, `block-end`, `block-start`, `blockquote`, `border-filled`, `border-primary`, `border-tonal`, `border-top`, `bordered`, `button`, `button-group`, `callout`, `caption`, `card`, `checkbox`, `chip`, `cite`, `close-button`, `code-block`, `content`, `critical`, `dark`, `default`, `del`, `dense`, `description`, `description-list`, `dfn`, `dialog`, `disabled`, `divider`, `dot`, `dotted`, `drawer`, `elevated`, `end`, `end-end`, `end-start`, `end-text`, `exiting`, `field`, `field-description`, `field-group`, `fieldset`, `fieldset-item`, `filled`, `footer`, `form`, `gutterless`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `header`, `hgroup`, `icon`, `icon-button`, `icon-checked`, `icon-only`, `icon-unchecked`, `info`, `inline-end`, `inline-start`, `ins`, `inset`, `invisible`, `item`, `kbd`, `label`, `large`, `legend`, `light`, `link`, `list`, `mark`, `multiline`, `neutral`, `not-rich-text`, `outlined`, `overline`, `p`, `prefix`, `primary`, `progress`, `radio`, `range`, `rich-text`, `rounded`, `row`, `s`, `samp`, `scroll-lock`, `select`, `small`, `spacious`, `spread`, `squared`, `squircle`, `sr-only`, `stack`, `start`, `start-start`, `start-text`, `sub`, `success`, `suffix`, `sup`, `switch`, `tab-input`, `tab-label`, `tab-panel`, `table`, `tabs`, `term`, `text`, `text-field`, `textarea`, `title`, `toast`, `toggle-button`, `toggle-group`, `tonal`, `tooltip`, `transparent`, `u`, `value`, `var`, `vertical`, `warning`, `with-arrow`, `x-small`.
68
+
69
+ </details>
70
+
71
+ After the search/replace, do a visual smoke test — there is no automated codemod for consumer projects.
72
+
73
+ ## 4.1.0 - 2026-05-18
74
+
75
+ ### Breaking
76
+
77
+ - **Card** and **Dialog** (Astro): the `actions` prop with an `align` field is removed. Use the `actionsAlign` prop instead (`"start"` | `"end"`).
78
+
79
+ ## 4.0.1 - 2026-05-13
80
+
81
+ ### Fixed
82
+
83
+ - Autosuggest arrow placement.
84
+
85
+ ## 4.0.0
86
+
87
+ Complete rewrite. The library now also ships as an installable npm package with Astro components.
88
+
89
+ Don't forget, I'm just a single person working on this in my free time. I'm doing this for fun. There will be bugs.
90
+
91
+ ### Breaking
92
+
93
+ - `theme-one` and `theme-two` are removed. I can't maintain a million themes. There is now a single theme in `css/theme.css`.
94
+ - The default package entry (`import "opui-css"`) now resolves to the single bundled stylesheet (`dist/opui.css`) instead of `dist/theme-two/theme-two.css`. The class names are the same, the file path is not.
95
+ - The `src/themes/` build pipeline is gone (vite + postcss + per-theme scripts). The package now builds with a small `postcss-import`-only pipeline that does not transform or lower any CSS syntax.
96
+ - Component CSS source moved from `src/components/` to `css/components/`. The pre-bundled output stays in `dist/`.
97
+ - Cascade layer order is now declared by the library in `css/imports.css`: `openprops, normalize, theme, components.root, components.extended, utils`.
98
+ - `astro` `^6` is required if you import from `opui-css/astro`. Pure-CSS consumers are unaffected (the peer is marked optional).
99
+
100
+ ### Added
101
+
102
+ - Anchor, Drawer, Form, Toast, Toggle, Tooltip and a lot of re-writes and improvements to existing components.
103
+ - Definition List -> Description List
104
+ - Tab buttons -> Tabs
105
+ - Toggle button group -> Toggle
106
+ - Astro component entry: `import { Button } from "opui-css/astro"`.
107
+ - Per-component CSS imports under `opui-css/css/components/*.css`.
108
+ - Pre-bundled stylesheets in `opui-css/dist/`: `opui.css` (everything), `opui.components.css` (components only), and `op.css` (Open Props tokens, unchanged subpath from v3) for CDN / no-bundler use.
109
+ - `sideEffects` correctly declared so bundlers don't tree-shake CSS.
110
+
111
+ ### Migration
112
+
113
+ See [`MIGRATING.md`](./MIGRATING.md).
114
+
115
+ ## 3.3.5 - 2026-02-19
116
+
117
+ ### Changed
118
+
119
+ - goof: forgot to leave open-props as a dependency
120
+
121
+ ## 3.3.4 - 2026-02-19
122
+
123
+ ### Changed
124
+
125
+ - Moved all dependencies to `devDependencies`.
126
+
127
+ ## 3.3.3 - 2026-01-07
128
+
129
+ ### Changed
130
+
131
+ - **Build Process**: Refactored `scripts/build-themes.js` to support organized theme exports. Files are now exported to theme-specific subdirectories in `dist/`.
132
+ - **Package Exports**: Updated `package.json` to use subpath exports:
133
+ - Default export `"."` now points to `theme-two.css`.
134
+ - Added `"./theme-one"` and `"./theme-two"` exports.
135
+ - Added `"./theme-one/components"` and `"./theme-two/components"` component imports.
136
+ - Added `"./open-props"` export for the base Open Props stuff.
137
+ - **Documentation**: Updated "Getting Started" guide with new usage examples and bundler configuration instructions (Vite vs. PostCSS).
138
+
139
+ ### Fixed
140
+
141
+ - Improved build script to automatically create subdirectories in `dist/` if they don't exist.
142
+ - Fixed watch mode in `build-themes.js` to correctly track and rebuild both theme and component files.
143
+
144
+ ## 3.3.1 - 2025-12-17
145
+
146
+ ### Fixed
147
+
148
+ - `switch.css` goof.
149
+
150
+ ## 3.3.0 - 2025-12-17
151
+
152
+ ### Added
153
+
154
+ - Internal updates and optimizations.
155
+
156
+ ## 3.2.0 - 2025-12-07
157
+
158
+ ### Added
159
+
160
+ - Add support for `kbd` element inside of `<button>`.
161
+
162
+ ## 3.1.2 - 2025-11-09
163
+
164
+ ### Added
165
+
166
+ - Added CSS variable to control list hover `background-color`.
167
+
168
+ ## 3.1.1 - 2025-10-23
169
+
170
+ ### Added
171
+
172
+ - Add support for icons in Switch component (e.g., dark mode toggle).
173
+
174
+ ### Fixed
175
+
176
+ - Bug fix for definition list where lists with lots of content weren't rendering correctly.
177
+
178
+ ## 3.1.0 - 2025-10-23
179
+
180
+ ### Changed
181
+
182
+ - Removed sticky header from `table` component to allow for custom implementations.
183
+
184
+ ## 3.0.0 - 2025-10-22
185
+
186
+ ### Added
187
+
188
+ - **Themes**: Introduced a formal theme system.
189
+ - Added `theme-two` as the new default theme (cleaner, more unified).
190
+ - Revised documentation and getting started guide for the new theme system.
191
+
192
+ ### Changed
193
+
194
+ - Refactored component structure to better support multiple themes.
195
+
196
+ ## 2.2.3 - 2025-09-21
197
+
198
+ ### Changed
199
+
200
+ - Reverted `box-sizing` change from previous release.
201
+
202
+ ## 2.2.2 - 2025-08-19
203
+
204
+ ### Changed
205
+
206
+ - Moved `theme.css` out of the main bundle.
207
+ - Made `box-sizing` declaration in normalize less intrusive.
208
+
209
+ ## 2.0.1 - 2025-08-19
210
+
211
+ ### Removed
212
+
213
+ - Removed redundant code and assets.
214
+
215
+ ## 2.0.0 - 2025-08-19
216
+
217
+ ### Changed
218
+
219
+ - **Folder Structure**: New and improved folder structure.
220
+ - **PostCSS**: Switched from `lightningcss` to `postcss` for better stability.
221
+ - **NPM**: Made the package installable via npm.
222
+ - **Layers**: Renamed component sub-layers to `components.root` and `components.extended`.
223
+ - **Bundles**: Added pre-bundled versions with and without Open Props.
224
+
225
+ ### Fixed
226
+
227
+ - Progress component wrapped in `@layer`.
228
+ - Theme color scheme fallback improvements.
229
+
230
+ ## 1.2.4 - 2025-04-23
231
+
232
+ ### Fixed
233
+
234
+ - Normalize custom-media improvements.
235
+
236
+ ## 1.2.3 - 2025-04-16
237
+
238
+ ### Fixed
239
+
240
+ - Button CSS updates.
241
+
242
+ ## 1.2.2 - 2025-03-18
243
+
244
+ ### Added
245
+
246
+ - Improved Select list animation and implementation of `::picker-icon`.
247
+ - Context-aware link colors in Alerts.
248
+
249
+ ## 1.2.1 - 2025-03-07
250
+
251
+ ### Fixed
252
+
253
+ - Removed unused border color in Switch component.
254
+
255
+ ## 1.2.0 - 2025-02-18
256
+
257
+ ### Added
258
+
259
+ - New component: `tab-buttons`.
260
+
261
+ ## 1.1.4 - 2025-02-18
262
+
263
+ ### Fixed
264
+
265
+ - Dialog component improvements when used with `.card` class.
266
+
267
+ ## 1.1.3 - 2025-02-11
268
+
269
+ ### Fixed
270
+
271
+ - Field component: Fixed issue where input was pushed down instead of label moving.
272
+
273
+ ## 1.1.2 - 2025-02-10
274
+
275
+ ### Changed
276
+
277
+ - Refactored pseudo-elements to use double colons (`::`).
278
+ - General package upgrades.
279
+
280
+ ### Fixed
281
+
282
+ - Normalize `::before` fix.
283
+ - Outline offset clipping.
284
+
285
+ ## 1.1.1 - 2025-01-26
286
+
287
+ ### Added
288
+
289
+ - `box-decoration-clone` for `mark` elements.
290
+
291
+ ## 1.1.0 - 2025-01-19
292
+
293
+ ### Added
294
+
295
+ - New component: `range` input.
296
+
297
+ ## 1.0.2 - 2025-01-17
298
+
299
+ ### Fixed
300
+
301
+ - Select and documentation fixes.
302
+
303
+ ## 1.0.1 - 2025-01-16
304
+
305
+ ### Changed
306
+
307
+ - Adjusted for Select API changes (`<selectedoption>` to `<selectedcontent>`).
308
+ - Checkmark pseudo-element changed from `::before` to `::check`.
309
+
310
+ ## 1.0.0 - 2025-01-14
311
+
312
+ ### Added
313
+
314
+ - Initial release with 25+ components.
315
+ - Full documentation website.
316
+ - Added `[name]` attribute support to accordion.
317
+ - Support for stroke SVG icons in buttons.
package/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2026 Felix Bohlin
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Felix Bohlin
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.