opui-css 5.4.0 → 5.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 5.4.2 - 2026-06-29
+
+### Fixed
+
+- Make overline in `Card` header smaller.
+
+## 5.4.1 - 2026-06-11
+
+### Fixed
+
+- Fixed a `@vue/compiler-sfc` compilation crash in `Avatar`.
+
 ## 5.4.0 - 2026-06-09
 
 - Added global control for motion that lets you enable or disable all motion with a single class `.ui-motion-on`, `.ui-motion-off`, `.ui-motion-debug`. By default it will listen to `prefers-reduced-motion`. Locally each component individually has `--_motion` variable that can be changed as well.
@@ -106,7 +118,7 @@ Run a project-wide find/replace per token, prompt or whatever. Below are all the
 
 </details>
 
-After the search/replace, do a visual smoke test — there is no automated codemod for consumer projects.
+After the search/replace, do a visual smoke test - there is no automated codemod for consumer projects.
 
 ## 4.1.0 - 2026-05-18
 

package/MIGRATING.md

@@ -13,7 +13,7 @@ Note: Components that use `critical` for severity styling (such as `Button`, `Ca
 
 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 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:
 
@@ -37,7 +37,7 @@ 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.
+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
@@ -79,7 +79,7 @@ If you were importing from `src/`:
 
 The component CSS now lives under `css/`. The pre-bundled output stays in `dist/`.
 
-## 5. Pick a theme — there's only one
+## 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:
 
@@ -109,7 +109,7 @@ 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` 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.
 
@@ -125,7 +125,7 @@ Put your overrides in a later layer or unlayered. If your app already declared `
 
 ## 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).
+The source files under `components/` and `css/components/` are unminified and free to vendor in - the license is unchanged (MIT).
 
 ## 10. Pinning v3
 

package/README.md

@@ -1,6 +1,6 @@
 # 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.
+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.
 
 - Docs: [open-props-ui.netlify.app](https://open-props-ui.netlify.app/)
 - Source: [github.com/felix-bohlin/ui](https://github.com/felix-bohlin/ui)
@@ -14,6 +14,7 @@ pnpm add opui-css open-props
 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`
 
 ## Usage
@@ -69,9 +70,9 @@ Wrap your own styles in a layer above `utils` (or unlayered) to override.
 | ----------------------------------- | --------------------------------------------- |
 | `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.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/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                       |

package/components/AGENTS.md

@@ -22,9 +22,9 @@ When implementing or updating a component, ensure:
 
 Every component uses layered type files:
 
-- `types.ts` — shared, framework-agnostic props (component-specific only; no `HTMLAttributes`)
-- `types.astro.ts` — Astro props = base + `HTMLAttributes<element>`
-- `types.d.vue.ts` / `types.svelte.ts` / `types.solid.ts` — framework-specific extensions (for merge parity)
+- `types.ts` - shared, framework-agnostic props (component-specific only; no `HTMLAttributes`)
+- `types.astro.ts` - Astro props = base + `HTMLAttributes<element>`
+- `types.d.vue.ts` / `types.svelte.ts` / `types.solid.ts` - framework-specific extensions (for merge parity)
 
 Every component must follow this exact frontmatter layout:
 
@@ -47,7 +47,7 @@ const {
 
 ### Key Rules:
 - **Alphabetical Sorting**: Sort property definitions in `types.ts` and variables in the destructuring statement.
-- **REST Support**: Use `HTMLAttributes` in `types.astro.ts` and `...rest` in destructuring. Do not add `[key: string]: any` to `types.ts` — native attributes belong in the framework type files.
+- **REST Support**: Use `HTMLAttributes` in `types.astro.ts` and `...rest` in destructuring. Do not add `[key: string]: any` to `types.ts` - native attributes belong in the framework type files.
 - **Title Export**: This is mandatory for documentation generation.
 
 ---

package/components/Avatar/types.d.vue.ts

@@ -1,10 +1,11 @@
-import type { HTMLAttributes, ImgHTMLAttributes, Slot } from "vue"
+import type { Slot } from "vue"
 import type { Props as BaseProps } from "./types"
 
-export type Props = BaseProps &
-  Pick<ImgHTMLAttributes, "alt" | "src"> & {
-    class?: HTMLAttributes["class"]
-  }
+export type Props = BaseProps & {
+  alt?: string
+  src?: string
+  class?: string
+}
 
 export type Slots = {
   default?: Slot

package/components/Badge/Badge.vue

@@ -31,9 +31,10 @@ const positionArea =
   >
     <slot></slot>
     <template #anchored>
-      <span class="ui-badge-indicator" :aria-label="label?.toString()">{{
-        dot ? "" : label
-      }}</span>
+      <span class="ui-badge-indicator" :aria-label="label?.toString()">
+        {{ dot ? "" : label }}
+        <slot v-if="!dot" name="indicator"></slot>
+      </span>
     </template>
   </Anchor>
 </template>

package/components/Badge/types.d.vue.ts

@@ -1,10 +1,10 @@
 import type { HTMLAttributes, Slot } from "vue"
-import type { Props as BaseProps } from "./types"
+import type { Props as BaseProps, Slots as BaseSlots } from "./types"
 
 export type Props = BaseProps & {
   class?: HTMLAttributes["class"]
 }
 
-export type Slots = {
+export type Slots = BaseSlots<Slot> & {
   default?: Slot
 }

package/components/Badge/types.ts

@@ -6,3 +6,7 @@ export type Props = {
   invisible?: boolean
   label?: string | number
 }
+
+export type Slots<S> = {
+  indicator?: S
+}

package/core/utils.css

@@ -1,7 +1,7 @@
 @layer utils {
+
   /*
 Screen-reader only
-When you visibly want to hide an element but make it accessible for screen readers.
 */
   .ui-sr-only {
     block-size: 1px;
@@ -58,8 +58,7 @@ Add `.ui-scroll-lock` to any element that uses the [open] attribute (native <dia
         inset-inline-start: 50%;
         position: absolute;
         transform-origin: center center;
-        transform: translateX(calc(var(--isRTL) * 50%)) translateY(-50%)
-          translateZ(-1px) scale(var(--thumb-scale));
+        transform: translateX(calc(var(--isRTL) * 50%)) translateY(-50%) translateZ(-1px) scale(var(--thumb-scale));
         will-change: transform;
 
         transition: transform calc(0.2s * var(--motion, 1)) ease;

package/css/components/accordion.css

@@ -68,7 +68,7 @@
     }
 
     /* Layout */
-    & > summary {
+    &>summary {
       background-color: inherit;
       cursor: pointer;
       font-weight: 700;
@@ -93,17 +93,17 @@
       }
     }
 
-    &[open] > summary svg {
+    &[open]>summary svg {
       rotate: 180deg;
     }
 
-    & > .ui-content {
+    &>.ui-content {
       margin-block-start: 0;
       padding-block: var(--_content-padding-block);
       padding-inline: var(--_content-padding-inline);
     }
 
-    & > .ui-actions {
+    &>.ui-actions {
       display: flex;
       gap: var(--_actions-gap);
       justify-content: end;
@@ -128,12 +128,12 @@
       }
     }
 
-    & > .ui-content {
+    &>.ui-content {
       margin-block: 0;
       padding: 0;
     }
 
-    & > details.ui-accordion {
+    &>details.ui-accordion {
       --_border-color: transparent;
       --_border-width: 0;
       --_margin-inline: 0;
@@ -142,7 +142,7 @@
       --_summary-padding-inline: var(--_item-summary-padding-inline);
 
       /* Border between accordion items */
-      & + & {
+      &+& {
         border-block-start: 1px solid var(--_gutter-color);
         border-radius: 0;
       }

package/css/components/badge.css

@@ -15,21 +15,21 @@
 
     /* Floating wrapper: traditional inset-based positioning so this works
        in browsers without position-area support (Firefox, older Safari). */
-    & > .ui-anchor-floating:not([popover]) {
+    &>.ui-anchor-floating:not([popover]) {
       inset: var(--_badge-inset);
       position-anchor: auto;
       position-area: none;
     }
 
     /* Indicator */
-    & > .ui-anchor-floating > .ui-badge-indicator {
+    &>.ui-anchor-floating>.ui-badge-indicator {
       background-color: var(--_bg-color);
       block-size: var(--_size);
       border: 2px solid var(--_border-color);
       border-radius: var(--radius-round);
       color: var(--_text-color);
       display: grid;
-      font-size: 12px;
+      font-size: var(--font-size-0);
       font-weight: 500;
       inline-size: max-content;
       line-height: normal;
@@ -91,7 +91,7 @@
       --_anchor-ty: var(--_dot-size);
     }
 
-    &.ui-dot > .ui-anchor-floating > .ui-badge-indicator {
+    &.ui-dot>.ui-anchor-floating>.ui-badge-indicator {
       block-size: var(--_dot-size);
       inline-size: var(--_dot-size);
       min-inline-size: var(--_dot-size);
@@ -99,7 +99,7 @@
     }
 
     /* Visibility */
-    &.ui-invisible > .ui-anchor-floating > .ui-badge-indicator {
+    &.ui-invisible>.ui-anchor-floating>.ui-badge-indicator {
       opacity: 0;
       pointer-events: none;
     }

package/css/components/button-group.css

@@ -11,10 +11,8 @@
       border-radius: 0;
 
       /* button.css > --_accent-tonal */
-      --_divider-color: light-dark(
-        oklch(from var(--_accent-tonal) calc(l - 0.1) c h),
-        oklch(from var(--_accent-tonal) calc(l + 0.1) c h)
-      );
+      --_divider-color: light-dark(oklch(from var(--_accent-tonal) calc(l - 0.1) c h),
+          oklch(from var(--_accent-tonal) calc(l + 0.1) c h));
 
       &.ui-outlined {
         --_divider-color: var(--_border-color);
@@ -28,9 +26,7 @@
         outline-offset: -4px;
       }
 
-      /* Color inheritance from Button Group — shared interaction model.
-         The .critical scope class in theme.css redirects --palette-source so
-         --color-6 below becomes a tint of the active color. */
+      /* Color inherited from Button Group. */
       :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
         --_color-contrast: var(--gray-1);
         --_color-tonal: var(--color-6);
@@ -38,12 +34,8 @@
         --_default-hover-bg-color: oklch(from var(--_accent) l c h / 15%);
         --_default-active-bg-color: oklch(from var(--_accent) l c h / 25%);
         --_filled-hover-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
-        --_filled-active-bg-color: oklch(
-          from var(--_accent) calc(l - 0.15) c h
-        );
-        --_outlined-active-bg-color: oklch(
-          from var(--_accent) calc(l - 0.1) c h
-        );
+        --_filled-active-bg-color: oklch(from var(--_accent) calc(l - 0.15) c h);
+        --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
       }
 
       :where(.ui-button-group.ui-critical) & {
@@ -107,10 +99,8 @@
         --_divider-color: currentColor;
 
         :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
-          --_divider-color: light-dark(
-            oklch(from var(--_accent) calc(l - 0.1) c h),
-            oklch(from var(--_accent) calc(l + 0.1) c h)
-          );
+          --_divider-color: light-dark(oklch(from var(--_accent) calc(l - 0.1) c h),
+              oklch(from var(--_accent) calc(l + 0.1) c h));
         }
 
         &:where(:not([disabled])) {
@@ -138,17 +128,15 @@
         }
 
         /* Siblings */
-        & + & {
+        &+& {
           border-inline-start-color: var(--_divider-color);
           border-inline-width: 1px;
           margin-inline-start: -1px;
 
           &[disabled] {
-            border-inline-start-color: color-mix(
-              in oklch,
-              var(--_divider-color) 40%,
-              transparent
-            );
+            border-inline-start-color: color-mix(in oklch,
+                var(--_divider-color) 40%,
+                transparent);
           }
         }
       }
@@ -175,16 +163,14 @@
           border-end-end-radius: var(--_border-radius);
         }
 
-        & + & {
+        &+& {
           border-block-start: 1px solid var(--_divider-color);
           margin-block-start: -1px;
 
           &[disabled] {
-            border-block-start-color: color-mix(
-              in oklch,
-              var(--_divider-color) 40%,
-              transparent
-            );
+            border-block-start-color: color-mix(in oklch,
+                var(--_divider-color) 40%,
+                transparent);
           }
         }
       }

package/css/components/button.css

@@ -10,23 +10,15 @@
     --_accent-tonal: var(--_color-tonal);
     --_accent-tonal-contrast: var(--_color);
 
-    --_default-hover-bg-color: light-dark(
-      oklch(from var(--_accent) l 0.01 h / 10%),
-      oklch(from var(--_accent) l 0.01 h / 20%)
-    );
-    --_default-active-bg-color: light-dark(
-      oklch(from var(--_accent) l 0.06 h / 20%),
-      oklch(from var(--_accent) l 0.06 h / 30%)
-    );
-
-    --_filled-hover-bg-color: light-dark(
-      oklch(from var(--_accent) calc(l + 0.2) c h),
-      oklch(from var(--_accent) calc(l - 0.1) c h)
-    );
-    --_filled-active-bg-color: light-dark(
-      oklch(from var(--_accent) calc(l + 0.3) c h),
-      oklch(from var(--_accent) calc(l - 0.15) c h)
-    );
+    --_default-hover-bg-color: light-dark(oklch(from var(--_accent) l 0.01 h / 10%),
+        oklch(from var(--_accent) l 0.01 h / 20%));
+    --_default-active-bg-color: light-dark(oklch(from var(--_accent) l 0.06 h / 20%),
+        oklch(from var(--_accent) l 0.06 h / 30%));
+
+    --_filled-hover-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.2) c h),
+        oklch(from var(--_accent) calc(l - 0.1) c h));
+    --_filled-active-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.3) c h),
+        oklch(from var(--_accent) calc(l - 0.15) c h));
     --_outlined-active-bg-color: var(--_filled-active-bg-color);
 
     --_bg-color: transparent;
@@ -61,11 +53,6 @@
       box-shadow calc(0.1s * var(--_motion)) ease;
     user-select: none;
 
-    /* Colors — shared interaction model for critical and primary.
-       Each color modifier below only swaps --_color; the tonal surface,
-       contrast text, and hover/active strategy are identical.
-       The .critical scope class in theme.css redirects --palette-source so
-       --color-6 below becomes a tint of the active color. */
     &.ui-critical,
     &.ui-primary {
       --_color-contrast: var(--gray-1);
@@ -91,11 +78,9 @@
 
     /* Disabled */
     &:where([disabled]) {
-      --_text-color: color-mix(
-        in oklch,
-        var(--text-muted) 50%,
-        var(--surface-default)
-      );
+      --_text-color: color-mix(in oklch,
+          var(--text-muted) 50%,
+          var(--surface-default));
 
       cursor: not-allowed;
       opacity: 0.64;
@@ -133,8 +118,7 @@
       line-height: 1.2;
     }
 
-    /* Sizes — heights aliased from the shared --control-size scale.
-       Override --button-size-* in a parent scope to resize an entire region. */
+    /* Sizes */
     &.ui-x-small {
       --_min-height: var(--button-size-x-small);
       --_font-size: var(--font-size-0);
@@ -208,7 +192,7 @@
     }
   }
 
-  /* file input */
+  /* File input */
   :where(input[type="file"]) {
     align-self: flex-start;
     border: var(--border-size-1) solid var(--surface-filled);

package/css/components/card.css

@@ -54,7 +54,7 @@
       --_card-border-width: 1px;
     }
 
-    & > :where(hgroup, .ui-content) {
+    &> :where(hgroup, .ui-content) {
       padding-inline: var(--size-3);
 
       &:last-child {
@@ -63,11 +63,12 @@
     }
 
     /* Header */
-    & > hgroup {
+    &>hgroup {
       padding-block: var(--size-3) 0;
 
       /* Top paragraph */
-      & > p:first-of-type:first-child {
+      &>p:first-of-type:first-child {
+        font-size: var(--font-size-0);
         line-height: 1.3;
       }
 
@@ -76,18 +77,18 @@
       }
 
       /* Bottom paragraph */
-      & > p:last-of-type:last-child:not(:first-child) {
+      &>p:last-of-type:last-child:not(:first-child) {
         font-size: var(--font-size-1);
       }
     }
 
     /* Content */
-    & > .ui-content:where(:only-child, :first-child) {
+    &>.ui-content:where(:only-child, :first-child) {
       padding-block: var(--size-3) var(--size-4);
     }
 
     /* Actions */
-    & > .ui-actions {
+    &>.ui-actions {
       display: flex;
       gap: var(--size-2);
       margin-block: var(--size-2) 0;

package/css/components/drawer.css

@@ -157,9 +157,7 @@
     }
   }
 
-  /* Scroll-lock is provided by the shared `.ui-scroll-lock` utility in core/utils.css.
-	   This carve-out re-enables page scrolling when a transparent-backdrop drawer is
-	   open on wide viewports (where the drawer doesn't visually cover the page). */
+  /* Scroll-lock is provided by the shared `.ui-scroll-lock` utility in core/utils.css. */
   html:has(dialog.ui-drawer.ui-scroll-lock[open].ui-backdrop-transparent) {
     overflow: unset;
     overscroll-behavior: auto;

package/css/components/form.css

@@ -1,4 +1,5 @@
 @layer components.extended {
+
   /* Form */
   :where(.ui-form) {
     display: grid;
@@ -112,9 +113,7 @@
     gap: var(--size-4);
 
     /* If it only has checkboxes, radios, or switches */
-    &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)):not(
-        :has(> :not(.ui-checkbox, .ui-radio, .ui-switch))
-      ) {
+    &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)):not( :has(> :not(.ui-checkbox, .ui-radio, .ui-switch))) {
       gap: var(--size-2);
     }
 
@@ -124,13 +123,13 @@
       flex-direction: row;
       gap: var(--size-2);
 
-      /* If it's not preceeded by an hr */
+      /* If it's not preceded by an hr */
       &:not(hr + &) {
         margin-block-start: var(--size-4);
       }
     }
 
-    & + & {
+    &+& {
       margin-block-start: var(--size-5);
     }
 

package/css/components/icon-button.css

@@ -9,22 +9,14 @@
     --_accent-contrast: var(--_color-contrast);
     --_accent-tonal: var(--_color-tonal);
     --_accent-tonal-contrast: var(--_color);
-    --_default-hover-bg-color: light-dark(
-      oklch(from var(--_accent) l 0.01 h / 10%),
-      oklch(from var(--_accent) l 0.01 h / 20%)
-    );
-    --_default-active-bg-color: light-dark(
-      oklch(from var(--_accent) l 0.06 h / 20%),
-      oklch(from var(--_accent) l 0.06 h / 30%)
-    );
-    --_filled-hover-bg-color: light-dark(
-      oklch(from var(--_accent) calc(l + 0.2) c h),
-      oklch(from var(--_accent) calc(l - 0.1) c h)
-    );
-    --_filled-active-bg-color: light-dark(
-      oklch(from var(--_accent) calc(l + 0.3) c h),
-      oklch(from var(--_accent) calc(l - 0.15) c h)
-    );
+    --_default-hover-bg-color: light-dark(oklch(from var(--_accent) l 0.01 h / 10%),
+        oklch(from var(--_accent) l 0.01 h / 20%));
+    --_default-active-bg-color: light-dark(oklch(from var(--_accent) l 0.06 h / 20%),
+        oklch(from var(--_accent) l 0.06 h / 30%));
+    --_filled-hover-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.2) c h),
+        oklch(from var(--_accent) calc(l - 0.1) c h));
+    --_filled-active-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.3) c h),
+        oklch(from var(--_accent) calc(l - 0.15) c h));
     --_outlined-active-bg-color: var(--_filled-active-bg-color);
 
     --_bg-color: transparent;
@@ -73,11 +65,6 @@
         background-color calc(0.1s * var(--_motion)) ease;
     }
 
-    /* Colors — shared interaction model for critical and primary.
-       Each color modifier below only swaps --_color; the tonal surface,
-       contrast text, and hover/active strategy are identical.
-       The .critical scope class in theme.css redirects --palette-source so
-       --color-6 below becomes a tint of the active color. */
     &.ui-critical,
     &.ui-primary {
       --_color-contrast: var(--gray-1);
@@ -105,20 +92,16 @@
     &:where(:not([disabled])) {
       &:where(:not(:active):hover) {
         &::before {
-          background-color: var(
-            --_interaction-hover-color,
-            var(--_default-hover-bg-color)
-          );
+          background-color: var(--_interaction-hover-color,
+              var(--_default-hover-bg-color));
         }
       }
 
       &:where(:hover:active),
       &[aria-current="page"] {
         &::before {
-          background-color: var(
-            --_interaction-active-color,
-            var(--_default-active-bg-color)
-          );
+          background-color: var(--_interaction-active-color,
+              var(--_default-active-bg-color));
         }
       }
     }