opui-css 3.3.5 → 4.0.1

package/CHANGELOG.md

@@ -0,0 +1,241 @@
+# Changelog
+
+## 4.0.1 - 2026-05-13
+
+### Fixed
+
+- Autosuggest arrow placement.
+
+## 4.0.0
+
+Complete rewrite. The library now also ships as an installable npm package with Astro components.
+
+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.
+
+### Breaking
+
+- `theme-one` and `theme-two` are removed. I can't maintain a million themes. There is now a single theme in `css/theme.css`.
+- 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.
+- 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.
+- Component CSS source moved from `src/components/` to `css/components/`. The pre-bundled output stays in `dist/`.
+- Cascade layer order is now declared by the library in `css/imports.css`: `openprops, normalize, theme, components.root, components.extended, utils`.
+- `astro` `^6` is required if you import from `opui-css/astro`. Pure-CSS consumers are unaffected (the peer is marked optional).
+
+### Added
+
+- Anchor, Drawer, Form, Toast, Toggle, Tooltip and a lot of re-writes and improvements to existing components.
+- Definition List -> Description List
+- Tab buttons -> Tabs
+- Toggle button group -> Toggle
+- Astro component entry: `import { Button } from "opui-css/astro"`.
+- Per-component CSS imports under `opui-css/css/components/*.css`.
+- 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.
+- `sideEffects` correctly declared so bundlers don't tree-shake CSS.
+
+### Migration
+
+See [`MIGRATING.md`](./MIGRATING.md).
+
+## 3.3.5 - 2026-02-19
+
+### Changed
+
+- goof: forgot to leave open-props as a dependency
+
+## 3.3.4 - 2026-02-19
+
+### Changed
+
+- Moved all dependencies to `devDependencies`.
+
+## 3.3.3 - 2026-01-07
+
+### Changed
+
+- **Build Process**: Refactored `scripts/build-themes.js` to support organized theme exports. Files are now exported to theme-specific subdirectories in `dist/`.
+- **Package Exports**: Updated `package.json` to use subpath exports:
+  - Default export `"."` now points to `theme-two.css`.
+  - Added `"./theme-one"` and `"./theme-two"` exports.
+  - Added `"./theme-one/components"` and `"./theme-two/components"` component imports.
+  - Added `"./open-props"` export for the base Open Props stuff.
+- **Documentation**: Updated "Getting Started" guide with new usage examples and bundler configuration instructions (Vite vs. PostCSS).
+
+### Fixed
+
+- Improved build script to automatically create subdirectories in `dist/` if they don't exist.
+- Fixed watch mode in `build-themes.js` to correctly track and rebuild both theme and component files.
+
+## 3.3.1 - 2025-12-17
+
+### Fixed
+
+- `switch.css` goof.
+
+## 3.3.0 - 2025-12-17
+
+### Added
+
+- Internal updates and optimizations.
+
+## 3.2.0 - 2025-12-07
+
+### Added
+
+- Add support for `kbd` element inside of `<button>`.
+
+## 3.1.2 - 2025-11-09
+
+### Added
+
+- Added CSS variable to control list hover `background-color`.
+
+## 3.1.1 - 2025-10-23
+
+### Added
+
+- Add support for icons in Switch component (e.g., dark mode toggle).
+
+### Fixed
+
+- Bug fix for definition list where lists with lots of content weren't rendering correctly.
+
+## 3.1.0 - 2025-10-23
+
+### Changed
+
+- Removed sticky header from `table` component to allow for custom implementations.
+
+## 3.0.0 - 2025-10-22
+
+### Added
+
+- **Themes**: Introduced a formal theme system.
+- Added `theme-two` as the new default theme (cleaner, more unified).
+- Revised documentation and getting started guide for the new theme system.
+
+### Changed
+
+- Refactored component structure to better support multiple themes.
+
+## 2.2.3 - 2025-09-21
+
+### Changed
+
+- Reverted `box-sizing` change from previous release.
+
+## 2.2.2 - 2025-08-19
+
+### Changed
+
+- Moved `theme.css` out of the main bundle.
+- Made `box-sizing` declaration in normalize less intrusive.
+
+## 2.0.1 - 2025-08-19
+
+### Removed
+
+- Removed redundant code and assets.
+
+## 2.0.0 - 2025-08-19
+
+### Changed
+
+- **Folder Structure**: New and improved folder structure.
+- **PostCSS**: Switched from `lightningcss` to `postcss` for better stability.
+- **NPM**: Made the package installable via npm.
+- **Layers**: Renamed component sub-layers to `components.root` and `components.extended`.
+- **Bundles**: Added pre-bundled versions with and without Open Props.
+
+### Fixed
+
+- Progress component wrapped in `@layer`.
+- Theme color scheme fallback improvements.
+
+## 1.2.4 - 2025-04-23
+
+### Fixed
+
+- Normalize custom-media improvements.
+
+## 1.2.3 - 2025-04-16
+
+### Fixed
+
+- Button CSS updates.
+
+## 1.2.2 - 2025-03-18
+
+### Added
+
+- Improved Select list animation and implementation of `::picker-icon`.
+- Context-aware link colors in Alerts.
+
+## 1.2.1 - 2025-03-07
+
+### Fixed
+
+- Removed unused border color in Switch component.
+
+## 1.2.0 - 2025-02-18
+
+### Added
+
+- New component: `tab-buttons`.
+
+## 1.1.4 - 2025-02-18
+
+### Fixed
+
+- Dialog component improvements when used with `.card` class.
+
+## 1.1.3 - 2025-02-11
+
+### Fixed
+
+- Field component: Fixed issue where input was pushed down instead of label moving.
+
+## 1.1.2 - 2025-02-10
+
+### Changed
+
+- Refactored pseudo-elements to use double colons (`::`).
+- General package upgrades.
+
+### Fixed
+
+- Normalize `::before` fix.
+- Outline offset clipping.
+
+## 1.1.1 - 2025-01-26
+
+### Added
+
+- `box-decoration-clone` for `mark` elements.
+
+## 1.1.0 - 2025-01-19
+
+### Added
+
+- New component: `range` input.
+
+## 1.0.2 - 2025-01-17
+
+### Fixed
+
+- Select and documentation fixes.
+
+## 1.0.1 - 2025-01-16
+
+### Changed
+
+- Adjusted for Select API changes (`<selectedoption>` to `<selectedcontent>`).
+- Checkmark pseudo-element changed from `::before` to `::check`.
+
+## 1.0.0 - 2025-01-14
+
+### Added
+
+- Initial release with 25+ components.
+- Full documentation website.
+- Added `[name]` attribute support to accordion.
+- Support for stroke SVG icons in buttons.

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 Felix Bohlin
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Felix Bohlin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/MIGRATING.md

@@ -0,0 +1,105 @@
+# 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.
+
+The components emit the same class names the v3 docs documented, so existing styles keep working.
+
+## 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,51 +1,88 @@
 # Open Props UI
 
-A CSS UI library exploring how next-gen HTML & CSS features can change the way we create components. Designed to be used by professional teams as well as tinkering hobbyists. Everything is made with **ease-of-use** and **scalability** in mind. Last but not least - you **copy and paste** the components into your repo. It's the best way to have a complete **understanding** and **ownership** over your stuff.
+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.
 
-https://open-props-ui.netlify.app/
+- Docs: [open-props-ui.netlify.app](https://open-props-ui.netlify.app/)
+- Source: [github.com/felix-bohlin/ui](https://github.com/felix-bohlin/ui)
 
-## Getting started
+## Install
 
-Check out the [getting started guide](https://open-props-ui.netlify.app/guide/getting-started.html).
+```bash
+pnpm add opui-css open-props
+```
 
-## Backstory
+Peer dependencies:
 
-Practically all established UI libraries need to take older browser versions into account. Some have only just dropped Internet Explorer. Some have barely discovered the power of CSS grid. Open Props UI starts from a blank slate and re-imagines how a component library could be built if you used the most modern features.
+- `astro` `^6` (only required if you use the Astro components)
+- `open-props` `^1`
 
-## The goal of the component library
+## Usage
 
-> "If you only use the latest features, that means this is can never enter production"
+### Astro components
 
-Yes and no. Right now that's true for most components. The point is to let the spec and the components mature alongside each other and in time the library will be ready for production.
+```astro
+---
+import { Button, Card } from "opui-css/astro"
+---
 
-- Have sensible defaults without sacrificing flexibility and control
-- Use modern HTML & CSS features
-- Follow accessibility guidelines
-- Serve as an inspiration
-- Be scalable
+<link rel="stylesheet" href="opui-css/css/imports.css" />
 
-## Development
+<Card>
+  <Button variant="primary">Click me</Button>
+</Card>
+```
 
-```bash
-# Install dependencies
-pnpm i
+### Plain HTML + CSS (no build step)
 
-# Build all themes (outputs to dist/)
-pnpm build
+Drop a pre-bundled stylesheet into any page and use the documented class names:
 
-# Build themes in watch mode (rebuilds on file changes)
-pnpm dev
+```html
+<link rel="stylesheet" href="https://unpkg.com/opui-css/dist/opui.css" />
 
-# Clean the dist folder
-pnpm clean
+<button class="button primary">Click me</button>
 ```
 
-### Theme Building
+`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.
 
-The build system automatically processes all themes in the `src/themes/` folder out to `/dist`.
-
-## Documentation
+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 */
 ```
-pnpm docs:dev
+
+### 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

package/astro/index.ts

@@ -0,0 +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"