@orz/ui 0.1.1 → 0.1.2-master.20261030020651.g906eefa

package/README.md

@@ -46,8 +46,12 @@ shares a document with someone else's UI, and must not restyle it, imports
 `@orz/ui/theme.css` instead: the tokens, `.dark`, `tw-animate-css` and shadcn's variants, nothing
 global. `theme.css` carries no `@source`, so that surface names the files Tailwind scans itself.
 
-`styles.css` does not load a font. `--font-sans` names `'Geist Variable'` first and falls back to
-the system UI font, so install `@fontsource-variable/geist` (or define `--font-sans`) if you want it.
+`theme.css` also declares the style tokens every component draws its shape from: control and row
+heights (`--spacing-control`), corners (`--radius-control`, `--radius-surface`), shadows, text
+sizes, fonts, the focus ring and overlay motion. Their values are the default style's.
+
+`styles.css` does not load a font. `--font-ui` names `'Geist Variable'` first and falls back to
+the system UI font, so install `@fontsource-variable/geist` (or define `--font-ui`) if you want it.
 `useOverlayScrollbars` needs the library's own stylesheet, which you import yourself:
 `@import "overlayscrollbars/overlayscrollbars.css";`.
 
@@ -106,9 +110,22 @@ store.setPref({
 - `setThemes(list)` and `setTerminalThemes(list)` replace those lists at runtime. A pick whose theme
   leaves the list comes back when the theme returns.
 
+A **style** draws the components (radii, edges, type, density, focus, motion) and is picked beside
+the theme. `createThemeStore({ styles, defaultStyle })` takes the styles the app offers, each a
+`Style` from `@orz/themes` whose stylesheet the app imports; without `styles` it offers the default
+style alone. A theme belongs to the styles it lists in `styles` (the default style when it lists
+none), and the UI pick is always one of the current style's themes.
+
+- `pref.style` is the picked style, absent for the store's default one.
+- `store.setStyle(id)` switches it, remembering the UI pick under the style it leaves
+  (`pref.uiByStyle`) and returning to the one remembered under `id`, or to that style's first
+  theme. The terminal pick is not tied to a style.
+- A custom theme belongs to its base theme's styles; a fully custom one records the style it was
+  made under (`CustomTheme.style`).
+
 The store paints through one `<style data-orz-theme>` element in `<head>`, holding a single
-`:root { … }` rule rendered from the data. It also toggles `.dark` and sets `data-theme`,
-`data-variant` and `data-terminal-theme` on the root. Given a `root` other than `<html>`, the store
+`:root { … }` rule rendered from the data, the palette's own `styleTokens` included. It also toggles
+`.dark` and sets `data-theme`, `data-variant`, `data-style` and `data-terminal-theme` on the root. Given a `root` other than `<html>`, the store
 keeps an element of its own, sets `data-orz-theme-root` on that root to an id unique to the store,
 and scopes the rule to it, so stores on different roots never repaint each other. The rule has
 plain `:root` specificity, so a stylesheet loaded later, or a `:root:root` selector, can still
@@ -123,6 +140,9 @@ retune a token for every theme.
   list is empty and the two calls are ignored.
 - `useThemeSlots()` returns `{ ui, terminal }`: which slots the store has. The two hooks fall back
   where theirs is missing, so they cannot tell you.
+- `useStyle()` returns `{ style, committed, styles, setStyle }`: the style on screen (a hovered one
+  included), the picked one, the styles offered, and the switch. Outside a provider it reports the
+  default style alone.
 
 ### Theme menu
 
@@ -138,6 +158,8 @@ Whatever is highlighted previews on the whole page after resting 80 ms, and a pi
 
 - `slot` is `"ui"` (default) or `"terminal"`. A picker whose slot the store lacks renders nothing.
   The terminal picker adds a "Same as UI" row and a Terminal only group.
+- With more than one style offered, the UI picker adds a Style row above the modes, previewing a
+  style while it is hovered or focused, and lists only the picked style's themes.
 - `onCustomize` adds a "Custom themes…" row, which calls it with no id, and an edit button on each
   custom theme's row, which calls it with that theme's id. The second argument is the menu's slot,
   so a new theme opened from the terminal menu is a terminal theme; a callback that takes only the
@@ -341,12 +363,17 @@ side it can show to that cookie (path `/`, one year, `SameSite=Lax`). `themePain
 turns the cookie's value, URL-encoded or not, into CSS for a `<style>` in `<head>`: the background
 and `color-scheme` on `html`, with the dark side under `@media (prefers-color-scheme: dark)` when
 both are stored. A side whose colour could break out of the rule is dropped, and a missing or
-malformed value gives `""`.
+malformed value gives `""`. The cookie holds the committed style too, and
+`themePaintCookieRootAttributes(value)` returns `{ "data-style": id }` for `<html>`, or `{}`, so
+the page has the style's shapes before any script runs. The guard script sets `data-style` from
+its cache the same way.
 
 ```ts
 // a server template
-const css = themePaintCookieStyle(request.cookies["app-theme-paint"]);
-html`<head><style>${css}</style>…</head>`;
+const value = request.cookies["app-theme-paint"];
+const css = themePaintCookieStyle(value);
+const { "data-style": style } = themePaintCookieRootAttributes(value);
+html`<html${style ? ` data-style="${style}"` : ""}><head><style>${css}</style>…</head>`;
 ```
 
 ## Query input
@@ -538,7 +565,7 @@ import { MediaControls } from "@orz/ui/components/media-controls";
 | `@orz/ui/components/<name>` | `avatar`, `badge`, `button`, `card`, `checkbox`, `color-picker`, `confirm-dialog`, `dialog`, `dropdown-menu`, `filter-menu`, `highlighted-input`, `hover-card`, `input`, `label`, `link-chip`, `load-failure`, `load-more`, `media-controls`, `popover`, `query-box`, `query-highlight`, `radio-group`, `select`, `separator`, `sheet`, `skeleton`, `slider`, `sonner`, `switch`, `table`, `tabs`, `textarea`, `theme-editor`, `theme-menu`, `tooltip`, `unsaved-changes-dialog` |
 | `@orz/ui/hooks/<name>` | `scroll-insets`, `use-element-height`, `use-media-query`, `use-overlay-scrollbars`, `use-paged-append`, `use-query-completion`, `use-slash-shortcut`, `viewport-chrome` |
 | `@orz/ui/lib/<name>` | `cell-width`, `cell-width-table`, `clipboard`, `color`, `scroll-map`, `text-metrics`, `theme-file`, `unsaved-guard`, `utils` |
-| `@orz/ui/theme` | `createThemeStore`, `ThemeProvider`, `useTheme`, `useTerminalTheme`, `useThemeSlots`, `themePaintGuardScript`, `normalizePref`, `parseStoredPref`, types (the theme data types re-exported from `@orz/themes`) |
+| `@orz/ui/theme` | `createThemeStore`, `ThemeProvider`, `useTheme`, `useTerminalTheme`, `useThemeSlots`, `useStyle`, `themePaintGuardScript`, `themePaintCookieStyle`, `themePaintCookieRootAttributes`, `normalizePref`, `parseStoredPref`, types (the theme data types re-exported from `@orz/themes`) |
 | `@orz/ui/styles.css` | baseline tokens (the `default` theme), base layer |
 | `@orz/ui/theme.css` | baseline tokens and custom variants, without the base layer or @source |
 

package/dist/components/avatar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Avatar as AvatarPrimitive } from "radix-ui";
 import { cn } from "../lib/utils.js";
 function Avatar({ className, size = "default", shape = "circle", ...props }) {
-    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, "data-shape": shape, className: cn("group/avatar relative flex size-8 shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", "data-[shape=circle]:rounded-full data-[shape=circle]:after:rounded-full data-[shape=square]:rounded-md data-[shape=square]:after:rounded-md", className), ...props }));
+    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, "data-shape": shape, className: cn("group/avatar relative flex size-8 shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", "data-[shape=circle]:rounded-full data-[shape=circle]:after:rounded-full data-[shape=square]:rounded-item data-[shape=square]:after:rounded-item", className), ...props }));
 }
 function AvatarImage({ className, ...props }) {
     return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn("aspect-square size-full rounded-[inherit] object-cover", className), ...props }));

package/dist/components/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAGrD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,SAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAI,GAAG,SAAS,EAChB,KAAK,GAAG,QAAQ,EAChB,GAAG,KAAK,EAKT;IACC,OAAO,CACL,KAAC,eAAe,CAAC,IAAI,iBACT,QAAQ,eACP,IAAI,gBACH,KAAK,EACjB,SAAS,EAAE,EAAE,CACX,uNAAuN,EACvN,6IAA6I,EAC7I,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EAC2C;IACnD,OAAO,CACL,KAAC,eAAe,CAAC,KAAK,iBACV,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,wDAAwD,EACxD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EAC8C;IACtD,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,iBACb,iBAAiB,EAC3B,SAAS,EAAE,EAAE,CACX,yIAAyI,EACzI,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgC;IACxE,OAAO,CACL,4BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,0KAA0K,EAC1K,+EAA+E,EAC/E,2FAA2F,EAC3F,+EAA+E,EAC/E,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACvE,OAAO,CACL,2BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,qGAAqG,EACrG,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACoB;IAC5B,OAAO,CACL,2BACY,oBAAoB,EAC9B,SAAS,EAAE,EAAE,CACX,0VAA0V,EAC1V,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,WAAW,GACZ,CAAC"}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAGrD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,SAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAI,GAAG,SAAS,EAChB,KAAK,GAAG,QAAQ,EAChB,GAAG,KAAK,EAKT;IACC,OAAO,CACL,KAAC,eAAe,CAAC,IAAI,iBACT,QAAQ,eACP,IAAI,gBACH,KAAK,EACjB,SAAS,EAAE,EAAE,CACX,uNAAuN,EACvN,iJAAiJ,EACjJ,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EAC2C;IACnD,OAAO,CACL,KAAC,eAAe,CAAC,KAAK,iBACV,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,wDAAwD,EACxD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EAC8C;IACtD,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,iBACb,iBAAiB,EAC3B,SAAS,EAAE,EAAE,CACX,yIAAyI,EACzI,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgC;IACxE,OAAO,CACL,4BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,0KAA0K,EAC1K,+EAA+E,EAC/E,2FAA2F,EAC3F,+EAA+E,EAC/E,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACvE,OAAO,CACL,2BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,qGAAqG,EACrG,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACoB;IAC5B,OAAO,CACL,2BACY,oBAAoB,EAC9B,SAAS,EAAE,EAAE,CACX,0VAA0V,EAC1V,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,WAAW,GACZ,CAAC"}

package/dist/components/badge.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import { cn } from "../lib/utils.js";
-const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:outline-solid has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
+const badgeVariants = cva("group/badge inline-flex h-chip w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-chip border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:focus-ring has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
     variants: {
         variant: {
             default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",

package/dist/components/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,MAAM,aAAa,GAAG,GAAG,CACvB,4gBAA4gB,EAC5gB;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,4DAA4D;YACrE,SAAS,EACP,kEAAkE;YACpE,0EAA0E;YAC1E,WAAW,EACT,4KAA4K;YAC9K,OAAO,EACL,wJAAwJ;YAC1J,OAAO,EACL,wJAAwJ;YAC1J,OAAO,EACL,kFAAkF;YACpF,KAAK,EACH,mEAAmE;YACrE,IAAI,EAAE,iDAAiD;SACxD;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAC;AAEF,SAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,KAAK,EACf,GAAG,KAAK,EAEkD;IAC1D,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAE1C,OAAO,CACL,KAAC,IAAI,iBACO,OAAO,kBACH,OAAO,EACrB,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KAChD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,MAAM,aAAa,GAAG,GAAG,CACvB,2bAA2b,EAC3b;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,4DAA4D;YACrE,SAAS,EACP,kEAAkE;YACpE,0EAA0E;YAC1E,WAAW,EACT,4KAA4K;YAC9K,OAAO,EACL,wJAAwJ;YAC1J,OAAO,EACL,wJAAwJ;YAC1J,OAAO,EACL,kFAAkF;YACpF,KAAK,EACH,mEAAmE;YACrE,IAAI,EAAE,iDAAiD;SACxD;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAC;AAEF,SAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,KAAK,EACf,GAAG,KAAK,EAEkD;IAC1D,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAE1C,OAAO,CACL,KAAC,IAAI,iBACO,OAAO,kBACH,OAAO,EACrB,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KAChD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/button.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import { cn } from "../lib/utils.js";
-const buttonVariants = cva("group/button relative inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:outline-solid active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 touch:hit-area", {
+const buttonVariants = cva("group/button relative inline-flex shrink-0 items-center justify-center rounded-control border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:focus-ring active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 touch:hit-area", {
     variants: {
         variant: {
             default: "bg-primary text-primary-foreground hover:bg-primary/80",
@@ -17,14 +17,14 @@ const buttonVariants = cva("group/button relative inline-flex shrink-0 items-cen
             link: "text-primary underline-offset-4 hover:underline",
         },
         size: {
-            default: "h-8 gap-1.5 px-2.5 touch:h-10 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-            xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-            lg: "h-9 gap-1.5 px-2.5 touch:h-11 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-            icon: "size-8",
-            "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-            "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-            "icon-lg": "size-9",
+            default: "h-control gap-1.5 px-2.5 touch:h-10 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            xs: "h-control-xs gap-1 rounded-[min(var(--radius-control),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-control has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-control-sm gap-1 rounded-[min(var(--radius-control),8px)] px-2.5 text-ui-sm in-data-[slot=button-group]:rounded-control has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+            lg: "h-control-lg gap-1.5 px-2.5 touch:h-11 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            icon: "size-control",
+            "icon-xs": "size-control-xs rounded-[min(var(--radius-control),8px)] in-data-[slot=button-group]:rounded-control [&_svg:not([class*='size-'])]:size-3",
+            "icon-sm": "size-control-sm rounded-[min(var(--radius-control),8px)] in-data-[slot=button-group]:rounded-control",
+            "icon-lg": "size-control-lg",
         },
     },
     defaultVariants: {

package/dist/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,MAAM,cAAc,GAAG,GAAG,CACxB,wpBAAwpB,EACxpB;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,wDAAwD;YACjE,OAAO,EACL,iLAAiL;YACnL,SAAS,EACP,gLAAgL;YAClL,KAAK,EACH,kHAAkH;YACpH,kEAAkE;YAClE,kEAAkE;YAClE,uEAAuE;YACvE,kDAAkD;YAClD,WAAW,EACT,qMAAqM;YACvM,IAAI,EAAE,iDAAiD;SACxD;QACD,IAAI,EAAE;YACJ,OAAO,EACL,iGAAiG;YACnG,EAAE,EAAE,+MAA+M;YACnN,EAAE,EAAE,yNAAyN;YAC7N,EAAE,EAAE,iGAAiG;YACrG,IAAI,EAAE,QAAQ;YACd,SAAS,EACP,yHAAyH;YAC3H,SAAS,EACP,oFAAoF;YACtF,SAAS,EAAE,QAAQ;SACpB;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;CACF,CACF,CAAC;AAEF,SAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,KAAK,EACf,GAAG,KAAK,EAIP;IACD,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE5C,OAAO,CACL,KAAC,IAAI,iBACO,QAAQ,kBACJ,OAAO,eACV,IAAI,EACf,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,KACvD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,MAAM,cAAc,GAAG,GAAG,CACxB,wkBAAwkB,EACxkB;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,wDAAwD;YACjE,OAAO,EACL,iLAAiL;YACnL,SAAS,EACP,gLAAgL;YAClL,KAAK,EACH,kHAAkH;YACpH,kEAAkE;YAClE,kEAAkE;YAClE,uEAAuE;YACvE,kDAAkD;YAClD,WAAW,EACT,qMAAqM;YACvM,IAAI,EAAE,iDAAiD;SACxD;QACD,IAAI,EAAE;YACJ,OAAO,EACL,uGAAuG;YACzG,EAAE,EAAE,iOAAiO;YACrO,EAAE,EAAE,wOAAwO;YAC5O,EAAE,EAAE,0GAA0G;YAC9G,IAAI,EAAE,cAAc;YACpB,SAAS,EACP,2IAA2I;YAC7I,SAAS,EACP,sGAAsG;YACxG,SAAS,EAAE,iBAAiB;SAC7B;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;CACF,CACF,CAAC;AAEF,SAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,KAAK,EACf,GAAG,KAAK,EAIP;IACD,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE5C,OAAO,CACL,KAAC,IAAI,iBACO,QAAQ,kBACJ,OAAO,eACV,IAAI,EACf,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,KACvD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/card.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 function Card({ className, size = "default", ...props }) {
-    return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className), ...props }));
+    return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-surface bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-surface *:[img:last-child]:rounded-b-surface", className), ...props }));
 }
 function CardHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-surface px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className), ...props }));
 }
 function CardTitle({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-title", className: cn("font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-title", className: cn("font-heading text-title leading-snug font-medium group-data-[size=sm]/card:text-sm", className), ...props }));
 }
 function CardDescription({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-description", className: cn("text-sm text-muted-foreground", className), ...props }));
@@ -19,7 +19,7 @@ function CardContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-content", className: cn("px-(--card-spacing)", className), ...props }));
 }
 function CardFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center rounded-b-surface border-t bg-muted/50 p-(--card-spacing)", className), ...props }));
 }
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, };
 //# sourceMappingURL=card.js.map

package/dist/components/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,SAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,GAAG,SAAS,EAChB,GAAG,KAAK,EACkD;IAC1D,OAAO,CACL,2BACY,MAAM,eACL,IAAI,EACf,SAAS,EAAE,EAAE,CACX,sZAAsZ,EACtZ,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACtE,OAAO,CACL,2BACY,aAAa,EACvB,SAAS,EAAE,EAAE,CACX,wPAAwP,EACxP,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACrE,OAAO,CACL,2BACY,YAAY,EACtB,SAAS,EAAE,EAAE,CACX,mFAAmF,EACnF,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IAC3E,OAAO,CACL,2BACY,kBAAkB,EAC5B,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACtE,OAAO,CACL,2BACY,aAAa,EACvB,SAAS,EAAE,EAAE,CACX,gEAAgE,EAChE,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACvE,OAAO,CACL,2BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAC3C,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACtE,OAAO,CACL,2BACY,aAAa,EACvB,SAAS,EAAE,EAAE,CACX,wEAAwE,EACxE,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,GACV,CAAC"}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,SAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,GAAG,SAAS,EAChB,GAAG,KAAK,EACkD;IAC1D,OAAO,CACL,2BACY,MAAM,eACL,IAAI,EACf,SAAS,EAAE,EAAE,CACX,qaAAqa,EACra,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACtE,OAAO,CACL,2BACY,aAAa,EACvB,SAAS,EAAE,EAAE,CACX,6PAA6P,EAC7P,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACrE,OAAO,CACL,2BACY,YAAY,EACtB,SAAS,EAAE,EAAE,CACX,oFAAoF,EACpF,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IAC3E,OAAO,CACL,2BACY,kBAAkB,EAC5B,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACtE,OAAO,CACL,2BACY,aAAa,EACvB,SAAS,EAAE,EAAE,CACX,gEAAgE,EAChE,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACvE,OAAO,CACL,2BACY,cAAc,EACxB,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAC3C,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACtE,OAAO,CACL,2BACY,aAAa,EACvB,SAAS,EAAE,EAAE,CACX,6EAA6E,EAC7E,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,GACV,CAAC"}

package/dist/components/checkbox.js

@@ -7,7 +7,7 @@ import { cn } from "../lib/utils.js";
  * `checked="indeterminate"` marks the parent of a partly checked list.
  */
 function Checkbox({ className, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[4px] border border-input shadow-xs transition-colors outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:outline-solid disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:bg-input/15 dark:aria-invalid:ring-destructive/40 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground touch:hit-area", className), ...props, children: _jsxs(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "group grid place-content-center text-current [&>svg]:size-3.5", children: [_jsx(CheckIcon, { className: "group-data-[state=indeterminate]:hidden" }), _jsx(MinusIcon, { className: "hidden group-data-[state=indeterminate]:block" })] }) }));
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[min(var(--radius-control),4px)] border border-input shadow-raised transition-colors outline-none focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:bg-input/15 dark:aria-invalid:ring-destructive/40 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground touch:hit-area", className), ...props, children: _jsxs(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "group grid place-content-center text-current [&>svg]:size-3.5", children: [_jsx(CheckIcon, { className: "group-data-[state=indeterminate]:hidden" }), _jsx(MinusIcon, { className: "hidden group-data-[state=indeterminate]:block" })] }) }));
 }
 export { Checkbox };
 //# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAGzD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC;;;GAGG;AACH,SAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EAC4C;IACpD,OAAO,CACL,KAAC,iBAAiB,CAAC,IAAI,iBACX,UAAU,EACpB,SAAS,EAAE,EAAE,CACX,2sBAA2sB,EAC3sB,SAAS,CACV,KACG,KAAK,YAET,MAAC,iBAAiB,CAAC,SAAS,iBAChB,oBAAoB,EAC9B,SAAS,EAAC,+DAA+D,aAEzE,KAAC,SAAS,IAAC,SAAS,EAAC,yCAAyC,GAAG,EACjE,KAAC,SAAS,IAAC,SAAS,EAAC,+CAA+C,GAAG,IAC3C,GACP,CAC1B,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAGzD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC;;;GAGG;AACH,SAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EAC4C;IACpD,OAAO,CACL,KAAC,iBAAiB,CAAC,IAAI,iBACX,UAAU,EACpB,SAAS,EAAE,EAAE,CACX,qpBAAqpB,EACrpB,SAAS,CACV,KACG,KAAK,YAET,MAAC,iBAAiB,CAAC,SAAS,iBAChB,oBAAoB,EAC9B,SAAS,EAAC,+DAA+D,aAEzE,KAAC,SAAS,IAAC,SAAS,EAAC,yCAAyC,GAAG,EACjE,KAAC,SAAS,IAAC,SAAS,EAAC,+CAA+C,GAAG,IAC3C,GACP,CAC1B,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/color-picker.js

@@ -730,15 +730,15 @@ export function ColorPicker({ value, onValueChange, onValueCommit, format, alpha
             h: parsed.color.c < ACHROMATIC ? cur.color.h : parsed.color.h,
         }, true, { draft: null });
     };
-    return (_jsxs("div", { "data-slot": "color-picker", className: cn("grid w-64 gap-2 text-xs", className), children: [offered.length > 1 && (_jsx("fieldset", { "aria-label": "Picking surface", className: "grid gap-0.5 rounded-md bg-muted p-0.5", style: {
+    return (_jsxs("div", { "data-slot": "color-picker", className: cn("grid w-64 gap-2 text-xs", className), children: [offered.length > 1 && (_jsx("fieldset", { "aria-label": "Picking surface", className: "grid gap-0.5 rounded-[min(var(--radius-control),8px)] bg-muted p-0.5", style: {
                     gridTemplateColumns: `repeat(${offered.length}, minmax(0, 1fr))`,
-                }, children: offered.map((s) => (_jsx("button", { type: "button", "aria-pressed": shown === s, disabled: disabled, onClick: () => pickSurface(s), className: "h-6 rounded-[5px] text-[0.7rem] font-medium text-muted-foreground outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:outline-solid disabled:opacity-50 aria-pressed:bg-background aria-pressed:text-foreground aria-pressed:shadow-xs", children: SURFACE_LABELS[s] }, s))) })), _jsxs("div", { ref: areaRef, role: "slider", tabIndex: disabled ? -1 : 0, "aria-label": "Colour", "aria-roledescription": "2D slider", "aria-disabled": disabled || undefined, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round((1 - areaY) * 100), "aria-valuetext": shown === "hsv"
+                }, children: offered.map((s) => (_jsx("button", { type: "button", "aria-pressed": shown === s, disabled: disabled, onClick: () => pickSurface(s), className: "h-control-xs rounded-[min(var(--radius-control),5px)] text-ui-xs font-medium text-muted-foreground outline-none focus-visible:focus-ring disabled:opacity-50 aria-pressed:bg-background aria-pressed:text-foreground aria-pressed:shadow-raised", children: SURFACE_LABELS[s] }, s))) })), _jsxs("div", { ref: areaRef, role: "slider", tabIndex: disabled ? -1 : 0, "aria-label": "Colour", "aria-roledescription": "2D slider", "aria-disabled": disabled || undefined, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round((1 - areaY) * 100), "aria-valuetext": shown === "hsv"
                     ? `saturation ${round(hsv.s * 100, 1)}%, value ${round(hsv.v * 100, 1)}%`
                     : shown === "absolute"
                         ? `lightness ${round(color.l * 100, 1)}%, chroma ${round(color.c, 3)}`
                         : pinned
                             ? `lightness ${round(color.l * 100, 1)}%, chroma ${round(color.c, 3)}, beyond the ${gamutName} edge`
-                            : `lightness ${round(color.l * 100, 1)}%, chroma ${round(color.c, 3)} (${Math.round(rel * 100)}% of ${gamutName} max)`, className: cn("relative h-42 cursor-crosshair touch-none overflow-hidden rounded-md outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:outline-solid", disabled && "pointer-events-none opacity-50"), style: shown === "hsv"
+                            : `lightness ${round(color.l * 100, 1)}%, chroma ${round(color.c, 3)} (${Math.round(rel * 100)}% of ${gamutName} max)`, className: cn("relative h-42 cursor-crosshair touch-none overflow-hidden rounded-item outline-none focus-visible:focus-ring", disabled && "pointer-events-none opacity-50"), style: shown === "hsv"
                     ? {
                         background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${hsv.h} 100% 50%))`,
                     }
@@ -767,7 +767,7 @@ export function ColorPicker({ value, onValueChange, onValueCommit, format, alpha
                     update(latest.current, true);
                 }, onKeyDown: disabled ? undefined : onAreaKey, children: [shown !== "hsv" && (_jsx("canvas", { ref: areaCanvas, className: "block size-full" })), edges.length > 0 && (_jsx("svg", { "aria-hidden": true, "data-gamut-edges": true, width: areaSize.w, height: areaSize.h, className: "pointer-events-none absolute inset-0", children: edges.map((edge) => (_jsx("polyline", { "data-edge": edge.gamut, points: edge.points
                                 .map(([x, y]) => `${round(x * areaSize.w, 2)},${round(y * areaSize.h, 2)}`)
-                                .join(" "), fill: "none", stroke: "rgb(255 255 255 / 0.9)", strokeWidth: 1, strokeLinejoin: "round", strokeDasharray: edge.dashed ? "6 4" : undefined }, edge.gamut))) })), _jsx("span", { "aria-hidden": true, "data-thumb": true, "data-pinned": pinned || undefined, className: "pointer-events-none absolute -mt-[7px] -ml-[7px] size-3.5 rounded-full border-2 border-white shadow-[0_0_0_1px_rgb(0_0_0/0.5),inset_0_0_0_1px_rgb(0_0_0/0.3)] data-pinned:outline-[1.5px] data-pinned:outline-offset-2 data-pinned:outline-destructive/70 data-pinned:outline-dashed", style: { left: `${areaX * 100}%`, top: `${areaY * 100}%` } }), _jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute top-1 left-1 rounded-sm bg-black/45 px-1 text-[10px] text-white", children: shown === "hsv" ? "V ↑" : "L ↑" }), _jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute right-1 bottom-1 rounded-sm bg-black/45 px-1 text-[10px] text-white", children: shown === "oklch" ? "C/max →" : shown === "absolute" ? "C →" : "S →" })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(TrackSlider, { label: "Hue", value: hueValue, max: 360, disabled: disabled, onChange: (v) => setHue(v, false), onCommit: (v) => setHue(v, true), trackStyle: shown === "hsv"
+                                .join(" "), fill: "none", stroke: "rgb(255 255 255 / 0.9)", strokeWidth: 1, strokeLinejoin: "round", strokeDasharray: edge.dashed ? "6 4" : undefined }, edge.gamut))) })), _jsx("span", { "aria-hidden": true, "data-thumb": true, "data-pinned": pinned || undefined, className: "pointer-events-none absolute -mt-[7px] -ml-[7px] size-3.5 rounded-full border-2 border-white shadow-[0_0_0_1px_rgb(0_0_0/0.5),inset_0_0_0_1px_rgb(0_0_0/0.3)] data-pinned:outline-[1.5px] data-pinned:outline-offset-2 data-pinned:outline-destructive/70 data-pinned:outline-dashed", style: { left: `${areaX * 100}%`, top: `${areaY * 100}%` } }), _jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute top-1 left-1 rounded-[min(var(--radius-item),6px)] bg-black/45 px-1 text-ui-3xs text-white", children: shown === "hsv" ? "V ↑" : "L ↑" }), _jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute right-1 bottom-1 rounded-[min(var(--radius-item),6px)] bg-black/45 px-1 text-ui-3xs text-white", children: shown === "oklch" ? "C/max →" : shown === "absolute" ? "C →" : "S →" })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(TrackSlider, { label: "Hue", value: hueValue, max: 360, disabled: disabled, onChange: (v) => setHue(v, false), onCommit: (v) => setHue(v, true), trackStyle: shown === "hsv"
                             ? {
                                 background: "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)",
                             }
@@ -775,7 +775,7 @@ export function ColorPicker({ value, onValueChange, onValueCommit, format, alpha
                             ? `Hue and lightness keep the share of the ${gamutName} maximum chroma`
                             : `Keep the share of the ${gamutName} maximum chroma when hue or lightness changes`, disabled: disabled, onClick: toggleLock, children: locked ? _jsx(LockIcon, {}) : _jsx(LockOpenIcon, {}) }))] }), alpha && (_jsx(TrackSlider, { label: "Alpha", value: color.alpha * 100, max: 100, disabled: disabled, onChange: (v) => setAlpha(v, false), onCommit: (v) => setAlpha(v, true), trackStyle: CHECKERBOARD, children: _jsx("span", { className: "absolute inset-0", style: {
                         background: `linear-gradient(to right, ${css(color, 0)}, ${css(color, 1)})`,
-                    } }) })), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("div", { role: "img", "aria-label": "Before and after", title: "Before / after", className: "grid h-7 w-9 shrink-0 grid-cols-2 overflow-hidden rounded-md border", style: CHECKERBOARD, children: [_jsx("span", { style: {
+                    } }) })), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("div", { role: "img", "aria-label": "Before and after", title: "Before / after", className: "grid h-control-sm w-9 shrink-0 grid-cols-2 overflow-hidden rounded-[min(var(--radius-control),8px)] border", style: CHECKERBOARD, children: [_jsx("span", { style: {
                                     background: initial === null
                                         ? "transparent"
                                         : css(initial, alpha ? initial.alpha : 1),
@@ -791,9 +791,9 @@ export function ColorPicker({ value, onValueChange, onValueCommit, format, alpha
                         }, onBlur: () => {
                             endText();
                             commitPending();
-                        }, className: "h-7 flex-1 px-1.5 font-mono text-base md:text-xs" }), showEyeDropper && (_jsx(Button, { type: "button", variant: "outline", size: "icon-sm", "aria-label": "Pick from screen", title: "Pick from screen", onClick: pickFromScreen, children: _jsx(PipetteIcon, {}) })), reset !== null && (_jsx(Button, { type: "button", variant: "outline", size: "icon-sm", "aria-label": "Reset", title: `Reset to ${resetValue}`, disabled: disabled || atReset, onClick: resetTo, children: _jsx(RotateCcwIcon, {}) }))] }), _jsx(ChannelFields, { color: color, format: outFormat, alpha: alpha, disabled: disabled, idPrefix: id, onSet: setChannel }), _jsxs("div", { className: "grid gap-1 text-[11px]", children: [_jsxs("div", { className: "flex h-5 items-center gap-1.5", children: [_jsx("span", { "data-gamut": colorGamut, title: colorGamut !== "srgb" && outFormat !== "oklch"
+                        }, className: "h-control-sm flex-1 px-1.5 font-mono text-base md:text-xs" }), showEyeDropper && (_jsx(Button, { type: "button", variant: "outline", size: "icon-sm", "aria-label": "Pick from screen", title: "Pick from screen", onClick: pickFromScreen, children: _jsx(PipetteIcon, {}) })), reset !== null && (_jsx(Button, { type: "button", variant: "outline", size: "icon-sm", "aria-label": "Reset", title: `Reset to ${resetValue}`, disabled: disabled || atReset, onClick: resetTo, children: _jsx(RotateCcwIcon, {}) }))] }), _jsx(ChannelFields, { color: color, format: outFormat, alpha: alpha, disabled: disabled, idPrefix: id, onSet: setChannel }), _jsxs("div", { className: "grid gap-1 text-ui-2xs", children: [_jsxs("div", { className: "flex h-5 items-center gap-1.5", children: [_jsx("span", { "data-gamut": colorGamut, title: colorGamut !== "srgb" && outFormat !== "oklch"
                                     ? `Mapped to sRGB in ${outFormat}`
-                                    : undefined, className: cn("min-w-0 truncate rounded-full border px-1.5 py-px", colorGamut === "srgb"
+                                    : undefined, className: cn("min-w-0 truncate rounded-chip border px-1.5 py-px", colorGamut === "srgb"
                                     ? "border-success/60 text-success"
                                     : colorGamut === "p3"
                                         ? "border-warning/70 text-warning"
@@ -806,7 +806,7 @@ export function ColorPicker({ value, onValueChange, onValueCommit, format, alpha
                                 }), className: "ml-auto shrink-0 underline underline-offset-2 disabled:opacity-50", 
                                 // visibility rather than unmounting, for the space; inline rather than a class, so
                                 // jsdom sees it too and the button leaves the accessibility tree there as well.
-                                style: colorGamut === "srgb" ? { visibility: "hidden" } : undefined, children: "map to sRGB" })] }), ratio !== null && (_jsx("div", { className: "flex h-5 items-center", children: _jsx("span", { "data-contrast": true, title: `WCAG 2 contrast against ${contrastWith}`, className: cn("min-w-0 truncate rounded-full border px-1.5 py-px", ratio >= 4.5
+                                style: colorGamut === "srgb" ? { visibility: "hidden" } : undefined, children: "map to sRGB" })] }), ratio !== null && (_jsx("div", { className: "flex h-5 items-center", children: _jsx("span", { "data-contrast": true, title: `WCAG 2 contrast against ${contrastWith}`, className: cn("min-w-0 truncate rounded-chip border px-1.5 py-px", ratio >= 4.5
                                 ? "border-success/60 text-success"
                                 : ratio >= 3
                                     ? "border-warning/70 text-warning"
@@ -817,9 +817,9 @@ export function ColorPicker({ value, onValueChange, onValueCommit, format, alpha
                 });
                 if (usable.length === 0)
                     return null;
-                return (_jsxs("div", { className: "grid gap-1", children: [_jsx("div", { className: "text-[10px] tracking-wide text-muted-foreground uppercase", children: group.label }), _jsx("div", { className: "grid grid-cols-10 gap-1", children: usable.map(({ text, parsed }) => {
+                return (_jsxs("div", { className: "grid gap-1", children: [_jsx("div", { className: "text-ui-3xs tracking-wide text-muted-foreground uppercase", children: group.label }), _jsx("div", { className: "grid grid-cols-10 gap-1", children: usable.map(({ text, parsed }) => {
                                 const pressed = isCurrent(parsed.color);
-                                return (_jsx("button", { type: "button", "aria-label": text, title: text, "aria-pressed": pressed, disabled: disabled, onClick: () => pickSwatch(text), className: "aspect-square rounded-full border border-black/15 outline-none focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-ring focus-visible:outline-solid disabled:opacity-50 aria-pressed:ring-2 aria-pressed:ring-foreground aria-pressed:ring-offset-2 aria-pressed:ring-offset-popover", style: {
+                                return (_jsx("button", { type: "button", "aria-label": text, title: text, "aria-pressed": pressed, disabled: disabled, onClick: () => pickSwatch(text), className: "aspect-square rounded-full border border-black/15 outline-none focus-visible:focus-ring focus-visible:outline-offset-0 disabled:opacity-50 aria-pressed:ring-2 aria-pressed:ring-foreground aria-pressed:ring-offset-2 aria-pressed:ring-offset-popover", style: {
                                         ...CHECKERBOARD,
                                         backgroundImage: `linear-gradient(${css(parsed.color)}, ${css(parsed.color)}), ${CHECKERBOARD.backgroundImage}`,
                                         backgroundSize: `auto, ${CHECKERBOARD.backgroundSize}`,
@@ -828,7 +828,7 @@ export function ColorPicker({ value, onValueChange, onValueCommit, format, alpha
             }), extra] }));
 }
 function TrackSlider({ label, value, max, disabled, onChange, onCommit, trackStyle, children, }) {
-    return (_jsxs(SliderPrimitive.Root, { value: [value], min: 0, max: max, step: 1, disabled: disabled, onValueChange: ([v]) => onChange(v), onValueCommit: ([v]) => onCommit(v), className: "relative flex h-3 w-full touch-none items-center select-none data-disabled:opacity-50", children: [_jsx(SliderPrimitive.Track, { className: "relative h-3 grow overflow-hidden rounded-full", style: trackStyle, children: children }), _jsx(SliderPrimitive.Thumb, { "aria-label": label, className: "block size-3.5 rounded-full border-2 border-white shadow-[0_0_0_1px_rgb(0_0_0/0.5),inset_0_0_0_1px_rgb(0_0_0/0.3)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:outline-solid" })] }));
+    return (_jsxs(SliderPrimitive.Root, { value: [value], min: 0, max: max, step: 1, disabled: disabled, onValueChange: ([v]) => onChange(v), onValueCommit: ([v]) => onCommit(v), className: "relative flex h-3 w-full touch-none items-center select-none data-disabled:opacity-50", children: [_jsx(SliderPrimitive.Track, { className: "relative h-3 grow overflow-hidden rounded-full", style: trackStyle, children: children }), _jsx(SliderPrimitive.Thumb, { "aria-label": label, className: "block size-3.5 rounded-full border-2 border-white shadow-[0_0_0_1px_rgb(0_0_0/0.5),inset_0_0_0_1px_rgb(0_0_0/0.3)] outline-none focus-visible:focus-ring" })] }));
 }
 function channelSpecs(color, format, alpha) {
     const specs = [];
@@ -933,17 +933,17 @@ function ChannelField({ id, spec, disabled, onSet, }) {
             return;
         onSet(spec.apply(n), spec.key);
     };
-    return (_jsxs("div", { className: "grid gap-px text-center", children: [_jsx("label", { htmlFor: id, className: "text-[10px] text-muted-foreground", children: spec.label }), _jsx(Input, { id: id, "aria-label": spec.name, inputMode: "decimal", spellCheck: false, autoComplete: "off", disabled: disabled, value: draft ?? spec.text, onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
+    return (_jsxs("div", { className: "grid gap-px text-center", children: [_jsx("label", { htmlFor: id, className: "text-ui-3xs text-muted-foreground", children: spec.label }), _jsx(Input, { id: id, "aria-label": spec.name, inputMode: "decimal", spellCheck: false, autoComplete: "off", disabled: disabled, value: draft ?? spec.text, onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
                     if (event.key === "Enter")
                         settle();
                     else if (event.key === "Escape")
                         setDraft(null);
-                }, onBlur: settle, className: "h-6 px-1 text-center font-mono text-base md:text-[11px]" })] }));
+                }, onBlur: settle, className: "h-control-xs px-1 text-center font-mono text-base md:text-ui-2xs" })] }));
 }
 /** The panel in a popover, behind a trigger showing the value. */
 export function ColorPickerPopover({ open, defaultOpen, onOpenChange, align, side, children, "aria-label": ariaLabel = "Pick colour", ...picker }) {
     const parsed = parseColor(picker.value);
-    return (_jsxs(Popover, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, "aria-label": ariaLabel, disabled: picker.disabled, children: children ?? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "pl-1 font-mono text-xs", children: [_jsx("span", { "aria-hidden": true, className: "size-5 shrink-0 overflow-hidden rounded-sm border border-black/15", style: CHECKERBOARD, children: _jsx("span", { className: "block size-full", style: {
+    return (_jsxs(Popover, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, "aria-label": ariaLabel, disabled: picker.disabled, children: children ?? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "pl-1 font-mono text-xs", children: [_jsx("span", { "aria-hidden": true, className: "size-5 shrink-0 overflow-hidden rounded-[min(var(--radius-item),6px)] border border-black/15", style: CHECKERBOARD, children: _jsx("span", { className: "block size-full", style: {
                                     background: parsed === null ? "transparent" : css(parsed.color),
                                 } }) }), picker.value] })) }), _jsx(PopoverContent, { align: align, side: side, className: "w-auto p-2", children: _jsx(ColorPicker, { ...picker }) })] }));
 }