@waveso/ui 0.17.0 → 0.19.0

package/README.md

@@ -47,11 +47,12 @@ Wave builds around an intuitive, intentional **3-tier hierarchy** — for almost
 - 3 offset amounts for transforms
 - …and more
 
-It also builds around 3 semantic intents:
+It builds around semantic intents:
 
 - **Background** colors focus on elevation — how deep a surface sits
 - **Content** colors focus on emphasis — how strongly something reads
 - **Border** colors focus on structure — how functional a boundary is
+- **Control** colors focus on state — whether a control is at rest, pointed at or chosen
 
 This is the right shape for a system centered on an emphasis ladder: clean and minimal, but flexible.
 
@@ -71,43 +72,53 @@ A pinned class always beats the OS — put `.paper`, `.graphite`, or `.ink` on y
 
 ## Taxonomy
 
-Wave pays close attention to token taxonomy. Surfaces encode elevation; borders act as _light interference rather than geometry_.
+Wave pays close attention to token taxonomy. Surfaces encode elevation; borders act as _light interference rather than geometry_. Each of the five families below has three members, each with one job.
 
-### Background
+**Surfaces are solid: they contain. Borders and control fills are see-through:** `line`, `edge`, `contour`, `neutral` and `highlighted` are the theme's text colour made translucent, so they blend into whatever is underneath, for depth and integration. An input inside a primary-coloured banner, or on an accent card, only works if its fill is see-through; a solid control colour can't follow every background. And because controls don't borrow `secondary`, it's free to be a real brand colour.
+
+### Surfaces — solid, to contain
 
 - `--foundation` — the deepest layer, the base where elevation starts
 - `--surface` — the middle layer: cards, sidebars, content boxes
 - `--elevated` — the highest layer: floating windows, modals, dropdowns, dialogs
 
-### Foreground
+### Text — contrast
 
 - `--contrast` — titles, primary text
 - `--muted` — body text, icons, any mark
-- `--soft` — placeholders, hints
+- `--subtle` — placeholders, hints
 
-### Form
+### Brand — colour
 
-The theme's foreground made translucent, at three strengths — the way a draughtsman renders a form. Each is translucent, so it reads the same on any surface, and each keeps one job on a border or a background.
+- `--primary` — wired to the Wave ramp
+- `--secondary` — the second brand colour, a quiet neutral by default
+- `--accent` — alternative emphasis
 
-- `--contour` — where a shape ends: hairline borders, separators, dividers
-- `--highlight` — where attention lands: hovered, keyboard-highlighted and open items
-- `--shade` — what gives a control its body: field and track fills, and the intense border (control outlines, layout regions)
+### Borders — boundary
 
-### Ring
+The theme's text colour at three strengths, one job each:
 
-- `--focus` — active / focus states
+- `--line` (5%) — what divides: separators, dividers, hairlines
+- `--edge` (10%) — what bounds a surface: cards, dialogs, popups, toasts
+- `--contour` (15%) — what outlines a control or a region: outline buttons, badges, toggles, layout regions
 
-### Brand
+### Controls — depth
 
-- `--primary` — wired to the Wave ramp
-- `--secondary` — neutral fill
-- `--accent` — alternative emphasis
+A control's state, from resting to chosen:
+
+- `--neutral` (10%) — the look before anything is chosen or pointed at: field and track fills, unchecked boxes, table footers, muted items. Not Tailwind's `neutral-*` grey palette, which Wave doesn't use
+- `--highlighted` (15%) — where attention lands: hovered, keyboard-highlighted and open items, a step stronger than `neutral`
+- `--selected` — chosen, current or on: the current tab, a pressed toggle, a checked box, a selected row. `--primary` by default; set it to restyle every chosen state at once. Chosen items keep white text, so pick a colour it reads on, such as a darker shade of your brand colour
+
+### Ring
+
+- `--focus` — active / focus states
 
 ### Border strategy
 
 This is the sophisticated move most libraries skip.
 
-Wave uses **transparent (alpha) borders only**: `contour` by default, and `shade` where a boundary has to be intense.
+Wave uses **transparent (alpha) borders only**: `line` and `edge` by default, and `contour` where a boundary has to be intense. Rings are halos, kept for focus and invalid states, never a surface's edge: a ring is drawn outside the surface (past a menu's glass, so it flickers where it crosses text) and disappears in Windows high contrast mode, while a border is part of the surface.
 
 Wave's palette behaves like a layered _material system_, not a flat UI. Dark surfaces, a soft text hierarchy, and subtle elevation shifts (low-contrast steps) mean borders should not introduce a new "color layer" — that would break the illusion of depth — yet structure still needs an intense option.
 
@@ -115,13 +126,12 @@ Alpha borders **inherit the surface beneath them**, take the **content color as
 
 Intense borders compete with the surface ladder and create visual "grid noise" if overused, so use them sparingly. Overusing them flattens everything into "outlined boxes" with reduced perceived elevation — the "Bootstrap feel."
 
-The default **`contour`** borders are ideal for:
+The default **`edge`** and **`line`** borders are ideal for:
 
-- Cards
-- Panels
-- Subtle separators
+- Cards, panels and popups (`edge`)
+- Subtle separators (`line`)
 
-The intense **`shade`** borders are ideal for:
+The intense **`contour`** borders are ideal for:
 
 - Layout definition (sidebar vs. content)
 - Component grouping
@@ -130,8 +140,9 @@ The intense **`shade`** borders are ideal for:
 
 **Rule of thumb:**
 
-- If it separates **surface from surface** → `contour`
-- If it separates **layout regions** → `shade`
+- If it bounds **a surface** → `edge`
+- If it divides **content within a surface** → `line`
+- If it separates **layout regions** or outlines a control → `contour`
 - If it indicates **interaction / state** → colored alpha border
 
 ---

package/dist/accordion.js

@@ -14,7 +14,7 @@ function Accordion({ className, ...props }) {
 function AccordionItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Item, {
 		"data-slot": "accordion-item",
-		className: cn("not-last:border-b border-shade", className),
+		className: cn("not-last:border-b border-contour", className),
 		...props
 	});
 }
@@ -24,7 +24,7 @@ function AccordionTrigger({ className, children, ...props }) {
 		className: "flex",
 		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
 			"data-slot": "accordion-trigger",
-			className: cn("cursor-clickable focus-visible:ring-focus/50 focus-visible:border-focus focus-visible:after:border-focus **:data-[slot=accordion-trigger-icon]:text-muted group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-2.5 text-left text-sm font-medium motion-color outline-hidden hover:underline focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4", className),
+			className: cn("cursor-clickable focus-visible:ring-focus/50 focus-visible:border-focus focus-visible:after:border-focus **:data-[slot=accordion-trigger-icon]:text-muted group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-2.5 text-left text-sm font-medium motion-color focus-visible:outline-hidden hover:underline focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4", className),
 			...props,
 			children: [
 				children,

package/dist/action-bar.js

@@ -209,7 +209,7 @@ function ActionBarProvider({ children, message = "You have unsaved changes", plu
 				className: "fixed bottom-6 left-1/2 z-50",
 				children: /* @__PURE__ */ jsxs("div", {
 					"data-slot": "action-bar-content",
-					className: cn("flex items-center gap-6 rounded-lg border border-contour/60 bg-surface px-5 py-2.5 shadow-lg ring-1 ring-contour", className),
+					className: cn("flex items-center gap-6 rounded-lg bg-surface px-5 py-2.5 shadow-lg border border-edge", className),
 					children: [/* @__PURE__ */ jsx("span", {
 						"data-slot": "action-bar-message",
 						className: cn("whitespace-nowrap text-sm font-medium", saveError ? "text-danger" : "text-contrast"),

package/dist/alert-dialog.js

@@ -33,7 +33,7 @@ function AlertDialogContent({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
 		"data-slot": "alert-dialog-content",
 		"data-size": size,
-		className: cn("motion-scale-lg bg-foundation ring-contrast/10 group/alert-dialog-content fixed top-1/2 start-1/2 z-50 grid w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 gap-6 rounded-lg p-6 ring-1 outline-hidden data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=lg]:max-w-lg data-[size=xl]:max-w-xl data-[size=default]:sm:max-w-sm data-[size=lg]:sm:max-w-lg data-[size=xl]:sm:max-w-xl shadow-lg", className),
+		className: cn("motion-scale-lg bg-foundation border-edge group/alert-dialog-content fixed top-1/2 start-1/2 z-50 grid w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 gap-6 rounded-lg p-6 border focus-visible:outline-hidden data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=lg]:max-w-lg data-[size=xl]:max-w-xl data-[size=default]:sm:max-w-sm data-[size=lg]:sm:max-w-lg data-[size=xl]:sm:max-w-xl shadow-lg", className),
 		...props
 	})] });
 }

package/dist/alert.js

@@ -2,7 +2,7 @@ import { cn } from "./lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/alert.tsx
-const alertVariants = cva("grid gap-0.5 rounded-md border border-shade px-4 py-3 text-start text-sm has-data-[slot=alert-action]:pe-18 has-data-[icon]:grid-cols-[auto_1fr] has-data-[icon]:gap-x-2.5 *:data-[icon]:col-start-1 *:data-[icon]:row-span-2 *:data-[icon]:translate-y-0.5 *:data-[icon]:text-current *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert", {
+const alertVariants = cva("grid gap-0.5 rounded-md border border-contour px-4 py-3 text-start text-sm has-data-[slot=alert-action]:pe-18 has-data-[icon]:grid-cols-[auto_1fr] has-data-[icon]:gap-x-2.5 *:data-[icon]:col-start-1 *:data-[icon]:row-span-2 *:data-[icon]:translate-y-0.5 *:data-[icon]:text-current *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert", {
 	variants: { variant: {
 		default: "bg-surface text-contrast",
 		info: "bg-surface text-contrast *:data-[icon]:text-info *:[svg]:text-info",

package/dist/autocomplete.js

@@ -69,7 +69,7 @@ function AutocompletePositioner({ className, ...props }) {
 function AutocompletePopup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Autocomplete$1.Popup, {
 		"data-slot": "autocomplete-popup",
-		className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 group/autocomplete-content relative max-h-(--available-height) min-w-(--anchor-width) max-w-(--available-width) overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1", className),
+		className: cn("motion-pop-md bg-elevated text-contrast border-edge group/autocomplete-content relative flex max-h-(--available-height) min-w-(--anchor-width) max-w-(--available-width) flex-col overflow-hidden rounded-md shadow-md border", className),
 		...props
 	});
 }
@@ -97,7 +97,7 @@ function AutocompleteEmpty({ className, ...props }) {
 function AutocompleteList({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Autocomplete$1.List, {
 		"data-slot": "autocomplete-list",
-		className: cn("scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", className),
+		className: cn("scroll-fade supports-[animation-timeline:scroll()]:scrollbar-none min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain p-1 data-empty:p-0", className),
 		...props
 	});
 }
@@ -111,14 +111,14 @@ function AutocompleteRow({ className, ...props }) {
 function AutocompleteItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Autocomplete$1.Item, {
 		"data-slot": "autocomplete-item",
-		className: cn("data-highlighted:bg-highlight relative flex w-full cursor-clickable items-center gap-2 rounded-sm py-1 pl-1.5 pr-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("data-highlighted:bg-highlighted relative flex w-full cursor-clickable items-center gap-2 rounded-sm py-1 pl-1.5 pr-1.5 text-sm data-highlighted:outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }
 function AutocompleteSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Autocomplete$1.Separator, {
 		"data-slot": "autocomplete-separator",
-		className: cn("bg-contour -mx-1 my-1 h-px", className),
+		className: cn("bg-line -mx-1 my-1 h-px", className),
 		...props
 	});
 }

package/dist/avatar.js

@@ -7,42 +7,42 @@ function Avatar({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
 		"data-slot": "avatar",
 		"data-size": size,
-		className: cn("after:border-contour group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border data-[size=lg]:size-10 data-[size=sm]:size-6 data-[size=xs]:size-5", className),
+		className: cn("after:border-line group/avatar relative flex size-(--avatar-size) shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border", "[--avatar-size:calc(var(--spacing)*8)] data-[size=lg]:[--avatar-size:calc(var(--spacing)*10)] data-[size=sm]:[--avatar-size:calc(var(--spacing)*6)] data-[size=xs]:[--avatar-size:calc(var(--spacing)*5)]", "[--avatar-badge-size:calc(var(--spacing)*2.5)] data-[size=lg]:[--avatar-badge-size:calc(var(--spacing)*3)] data-[size=sm]:[--avatar-badge-size:calc(var(--spacing)*2)] data-[size=xs]:[--avatar-badge-size:calc(var(--spacing)*1.5)]", "has-data-[slot=avatar-badge]:[--avatar-cutout:radial-gradient(circle_calc(var(--avatar-badge-size)/2_+_2px)_at_calc(100%_-_var(--avatar-badge-size)/2)_calc(100%_-_var(--avatar-badge-size)/2),transparent_calc(var(--avatar-badge-size)/2_+_1.5px),#000_calc(var(--avatar-badge-size)/2_+_2px))]", "rtl:has-data-[slot=avatar-badge]:[--avatar-cutout:radial-gradient(circle_calc(var(--avatar-badge-size)/2_+_2px)_at_calc(var(--avatar-badge-size)/2)_calc(100%_-_var(--avatar-badge-size)/2),transparent_calc(var(--avatar-badge-size)/2_+_1.5px),#000_calc(var(--avatar-badge-size)/2_+_2px))]", "after:[mask-image:var(--avatar-cutout,none)]", className),
 		...props
 	});
 }
 function AvatarImage({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Avatar$1.Image, {
 		"data-slot": "avatar-image",
-		className: cn("aspect-square size-full rounded-full object-cover", className),
+		className: cn("aspect-square size-full rounded-full object-cover [mask-image:var(--avatar-cutout,none)]", className),
 		...props
 	});
 }
 function AvatarFallback({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
 		"data-slot": "avatar-fallback",
-		className: cn("bg-secondary text-contrast flex size-full items-center justify-center rounded-full text-sm group-data-[size=xs]/avatar:text-[10px] group-data-[size=sm]/avatar:text-xs group-data-[size=lg]/avatar:text-base", className),
+		className: cn("bg-secondary text-contrast flex size-full items-center justify-center rounded-full text-sm group-data-[size=xs]/avatar:text-[10px] group-data-[size=sm]/avatar:text-xs group-data-[size=lg]/avatar:text-base [mask-image:var(--avatar-cutout,none)]", className),
 		...props
 	});
 }
 function AvatarBadge({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "avatar-badge",
-		className: cn("bg-primary text-white ring-foundation absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none", "group-data-[size=xs]/avatar:size-1.5 group-data-[size=xs]/avatar:[&>svg]:hidden", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
+		className: cn("bg-primary text-white absolute end-0 bottom-0 z-10 inline-flex size-(--avatar-badge-size) items-center justify-center rounded-full select-none", "group-data-[size=xs]/avatar:[&>svg]:hidden group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:[&>svg]:size-2 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
 		...props
 	});
 }
 function AvatarGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "avatar-group",
-		className: cn("*:data-[slot=avatar]:ring-foundation group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2", className),
+		className: cn("group/avatar-group flex -space-x-2", "*:data-[slot=avatar]:not-last:[mask-image:radial-gradient(circle_calc(var(--avatar-size)/2_+_2px)_at_calc(150%_-_var(--spacing)*2)_50%,transparent_calc(var(--avatar-size)/2_+_1.5px),#000_calc(var(--avatar-size)/2_+_2px))]", "rtl:*:data-[slot=avatar]:not-last:[mask-image:radial-gradient(circle_calc(var(--avatar-size)/2_+_2px)_at_calc(-50%_+_var(--spacing)*2)_50%,transparent_calc(var(--avatar-size)/2_+_1.5px),#000_calc(var(--avatar-size)/2_+_2px))]", className),
 		...props
 	});
 }
 function AvatarGroupCount({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "avatar-group-count",
-		className: cn("bg-secondary text-contrast ring-foundation relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=xs]/avatar-group:size-5 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=xs]/avatar-group:[&>svg]:size-3 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className),
+		className: cn("bg-secondary text-contrast relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm group-has-data-[size=xs]/avatar-group:size-5 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=xs]/avatar-group:[&>svg]:size-3 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className),
 		...props
 	});
 }

package/dist/badge.js

@@ -11,8 +11,8 @@ const badgeVariants = cva("h-5 gap-1 rounded-full border border-transparent px-2
 		danger: "bg-danger text-white [a]:hover:bg-danger/80 [a]:focus-visible:ring-danger/50",
 		warning: "bg-warning text-white [a]:hover:bg-warning/80",
 		secondary: "bg-secondary text-contrast [a]:hover:bg-secondary/80",
-		outline: "border-shade bg-foundation [a]:hover:bg-highlight [a]:hover:text-contrast",
-		ghost: "text-muted [a]:hover:bg-highlight",
+		outline: "border-contour bg-foundation [a]:hover:bg-highlighted [a]:hover:text-contrast",
+		ghost: "text-muted [a]:hover:bg-highlighted",
 		link: "text-primary [a]:underline-offset-4 [a]:hover:underline"
 	} },
 	defaultVariants: { variant: "default" }

package/dist/button-group.js

@@ -6,7 +6,7 @@ import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/button-group.tsx
-const buttonGroupVariants = cva("group/button-group has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-shade has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-shade has-[>[data-variant=outline]]:[&>input]:border-shade has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-focus has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-focus has-[>[data-variant=outline]]:[&>input:focus-visible]:border-focus [&>[data-variant=default]]:border-primary [&>[data-variant=secondary]]:border-secondary [&>[data-variant=danger]]:border-danger", {
+const buttonGroupVariants = cva("group/button-group has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-contour has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-contour has-[>[data-variant=outline]]:[&>input]:border-contour has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-focus has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-focus has-[>[data-variant=outline]]:[&>input:focus-visible]:border-focus [&>[data-variant=default]]:border-primary [&>[data-variant=secondary]]:border-secondary [&>[data-variant=danger]]:border-danger", {
 	variants: { orientation: {
 		horizontal: "[&>[data-slot]:has(~[data-slot])]:rounded-r-none [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
 		vertical: "flex-col [&>[data-slot]:has(~[data-slot])]:rounded-b-none [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0"
@@ -26,7 +26,7 @@ function ButtonGroup({ className, orientation, size = "default", ...props }) {
 function ButtonGroupText({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "div",
-		props: mergeProps({ className: cn("bg-secondary gap-2 rounded-md border border-shade px-3 text-base font-medium group-data-[size=xs]/button-group:px-2 group-data-[size=xs]/button-group:text-xs group-data-[size=sm]/button-group:text-sm group-data-[size=lg]/button-group:px-4 group-data-[size=lg]/button-group:text-lg [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", className) }, props),
+		props: mergeProps({ className: cn("bg-secondary gap-2 rounded-md border border-contour px-3 text-base font-medium group-data-[size=xs]/button-group:px-2 group-data-[size=xs]/button-group:text-xs group-data-[size=sm]/button-group:text-sm group-data-[size=lg]/button-group:px-4 group-data-[size=lg]/button-group:text-lg [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", className) }, props),
 		render,
 		state: { slot: "button-group-text" }
 	});
@@ -35,7 +35,7 @@ function ButtonGroupSeparator({ className, orientation = "vertical", ...props })
 	return /* @__PURE__ */ jsx(Separator, {
 		"data-slot": "button-group-separator",
 		orientation,
-		className: cn("bg-contour relative self-stretch data-[orientation=horizontal]:w-auto data-[orientation=vertical]:h-auto", className),
+		className: cn("bg-line relative self-stretch data-[orientation=horizontal]:w-auto data-[orientation=vertical]:h-auto", className),
 		...props
 	});
 }

package/dist/button.js

@@ -4,13 +4,13 @@ import { jsx } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
 //#region src/button.tsx
-const buttonVariants = cva("cursor-clickable focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger rounded-md border border-transparent bg-clip-padding font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap motion-color data-disabled:pointer-events-none data-disabled:opacity-30 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-hidden group/button select-none active:not-aria-[haspopup]:scale-[0.97]", {
+const buttonVariants = cva("cursor-clickable focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger rounded-md border border-transparent bg-clip-padding font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap motion-color data-disabled:pointer-events-none data-disabled:opacity-30 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 focus-visible:outline-hidden group/button select-none active:not-aria-[haspopup]:scale-[0.97]", {
 	variants: {
 		variant: {
 			default: "bg-primary text-white hover:bg-primary/80 not-supports-backdrop-filter:hover:bg-primary/90 hover:backdrop-blur-xl hover:backdrop-saturate-150",
-			outline: "border-shade bg-foundation hover:bg-highlight hover:text-contrast aria-expanded:bg-highlight aria-expanded:text-contrast",
+			outline: "border-contour bg-foundation hover:bg-highlighted hover:text-contrast aria-expanded:bg-highlighted aria-expanded:text-contrast",
 			secondary: "bg-secondary text-contrast hover:bg-secondary/80 not-supports-backdrop-filter:hover:bg-secondary/90 hover:backdrop-blur-xl hover:backdrop-saturate-150 aria-expanded:bg-secondary aria-expanded:text-contrast",
-			ghost: "text-contrast hover:bg-highlight aria-expanded:bg-highlight aria-expanded:text-contrast",
+			ghost: "text-contrast hover:bg-highlighted aria-expanded:bg-highlighted aria-expanded:text-contrast",
 			danger: "bg-danger text-white hover:bg-danger/80 not-supports-backdrop-filter:hover:bg-danger/90 hover:backdrop-blur-xl hover:backdrop-saturate-150 focus-visible:ring-danger/50",
 			link: "text-primary underline-offset-4 hover:underline"
 		},

package/dist/card.js

@@ -12,7 +12,7 @@ import { useRender } from "@base-ui/react/use-render";
 function Card({ className, size = "default", render, ...props }) {
 	return useRender({
 		defaultTagName: "div",
-		props: mergeProps({ className: cn("ring-contrast/10 bg-surface text-contrast group/card flex flex-col gap-6 overflow-hidden rounded-lg py-6 text-sm ring-1 has-[>img:first-child]:pt-0 has-[>img:last-child]:pb-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg", "[a,button]:cursor-clickable [a,button]:hover:bg-elevated [button]:text-start motion-color outline-hidden focus-visible:ring-3 focus-visible:ring-focus/50 disabled:pointer-events-none disabled:opacity-30 aria-disabled:pointer-events-none aria-disabled:opacity-30", className) }, props),
+		props: mergeProps({ className: cn("border-edge bg-surface text-contrast group/card flex flex-col gap-6 overflow-hidden rounded-lg py-6 text-sm border has-[>img:first-child]:pt-0 has-[>img:last-child]:pb-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg", "[a,button]:cursor-clickable [a,button]:hover:bg-elevated [button]:text-start motion-color focus-visible:outline-hidden focus-visible:ring-3 focus-visible:ring-focus/50 disabled:pointer-events-none disabled:opacity-30 aria-disabled:pointer-events-none aria-disabled:opacity-30", className) }, props),
 		render,
 		state: {
 			slot: "card",

package/dist/checkbox.js

@@ -7,7 +7,7 @@ import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 function Checkbox({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
 		"data-slot": "checkbox",
-		className: cn("cursor-clickable bg-shade border-transparent not-data-disabled:data-unchecked:hover:border-focus not-data-disabled:data-unchecked:group-hover/field:border-focus data-checked:bg-primary data-indeterminate:bg-primary data-checked:text-white data-indeterminate:text-white data-checked:border-primary data-indeterminate:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-danger focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 peer relative flex size-6 shrink-0 items-center justify-center rounded-sm border motion-color outline-hidden group-has-disabled/field:opacity-30 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3", className),
+		className: cn("cursor-clickable bg-neutral border-transparent not-data-disabled:data-unchecked:hover:border-focus not-data-disabled:data-unchecked:group-hover/field:border-focus data-checked:bg-selected data-indeterminate:bg-selected data-checked:text-white data-indeterminate:text-white data-checked:border-selected data-indeterminate:border-selected aria-invalid:aria-checked:border-selected aria-invalid:border-danger focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 peer relative flex size-6 shrink-0 items-center justify-center rounded-sm border motion-color focus-visible:outline-hidden group-has-disabled/field:opacity-30 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3", className),
 		...props,
 		children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, {
 			"data-slot": "checkbox-indicator",

package/dist/combobox.js

@@ -94,7 +94,7 @@ function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "
 		className: "isolate z-50",
 		children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
 			"data-slot": "combobox-content",
-			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 *:data-[slot=input-group]:bg-shade/30 *:data-[slot=input-group]:border-shade/30 group/combobox-content relative max-h-(--available-height) max-w-(--available-width) min-w-(--anchor-width) overflow-hidden rounded-md shadow-md ring-1 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none", className),
+			className: cn("motion-pop-md bg-elevated text-contrast border-edge group/combobox-content relative max-h-(--available-height) max-w-(--available-width) min-w-(--anchor-width) overflow-hidden rounded-md border shadow-md", "*:data-[slot=input-group]:h-8 *:data-[slot=input-group]:rounded-none *:data-[slot=input-group]:bg-transparent *:data-[slot=input-group]:shadow-none", "*:data-[slot=input-group]:border-transparent *:data-[slot=input-group]:border-b-line", "*:data-[slot=input-group]:hover:border-transparent *:data-[slot=input-group]:hover:border-b-line", "*:data-[slot=input-group]:has-[[data-slot=input-group-control]:focus-visible]:border-transparent *:data-[slot=input-group]:has-[[data-slot=input-group-control]:focus-visible]:border-b-line *:data-[slot=input-group]:has-[[data-slot=input-group-control]:focus-visible]:ring-0", className),
 			...props
 		})
 	}) });
@@ -102,14 +102,14 @@ function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "
 function ComboboxList({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox$1.List, {
 		"data-slot": "combobox-list",
-		className: cn("[scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", className),
+		className: cn("scroll-fade supports-[animation-timeline:scroll()]:scrollbar-none max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] overflow-x-hidden overflow-y-auto overscroll-contain p-1 data-empty:p-0", className),
 		...props
 	});
 }
 function ComboboxItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Combobox$1.Item, {
 		"data-slot": "combobox-item",
-		className: cn("data-highlighted:bg-highlight relative flex w-full cursor-clickable items-center gap-2 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("data-highlighted:bg-highlighted relative flex w-full cursor-clickable items-center gap-2 rounded-sm py-1 pr-8 pl-1.5 text-sm data-highlighted:outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
 			render: /* @__PURE__ */ jsx("span", {
@@ -150,11 +150,11 @@ function ComboboxEmpty({ className, ...props }) {
 function ComboboxSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox$1.Separator, {
 		"data-slot": "combobox-separator",
-		className: cn("bg-contour -mx-1 my-1 h-px", className),
+		className: cn("bg-line -mx-1 my-1 h-px", className),
 		...props
 	});
 }
-const comboboxChipsVariants = cva("bg-shade hover:border-focus focus-within:border-focus focus-within:ring-focus/50 has-aria-invalid:ring-danger/30 has-aria-invalid:border-danger flex flex-wrap items-center gap-1 rounded-md border border-transparent motion-color focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1", {
+const comboboxChipsVariants = cva("bg-neutral hover:border-focus focus-within:border-focus focus-within:ring-focus/50 has-aria-invalid:ring-danger/30 has-aria-invalid:border-danger flex flex-wrap items-center gap-1 rounded-md border border-transparent motion-color focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1", {
 	variants: { size: {
 		xs: "min-h-6 rounded-sm px-2 py-0.5 text-xs",
 		sm: "min-h-8 px-3 py-1 text-sm",
@@ -191,7 +191,7 @@ function ComboboxChip({ className, children, showRemove = true, ...props }) {
 function ComboboxChipsInput({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox$1.Input, {
 		"data-slot": "combobox-chip-input",
-		className: cn("min-w-16 flex-1 outline-hidden", className),
+		className: cn("min-w-16 flex-1 focus-visible:outline-hidden", className),
 		...props
 	});
 }

package/dist/context-menu.d.ts

@@ -40,7 +40,7 @@ type ContextMenuShortcutProps = React.ComponentProps<"span">;
 declare function ContextMenu(props: ContextMenuProps): React.JSX.Element;
 declare function ContextMenuPortal(props: ContextMenuPortalProps): React.JSX.Element;
 declare function ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps): React.JSX.Element;
-declare function ContextMenuContent({ className, align, alignOffset, side, sideOffset, restoreFocusOnClose, finalFocus, ...props }: ContextMenuContentProps): React.JSX.Element;
+declare function ContextMenuContent({ className, align, alignOffset, side, sideOffset, restoreFocusOnClose, finalFocus, onKeyDown, children, ...props }: ContextMenuContentProps): React.JSX.Element;
 declare function ContextMenuGroup(props: ContextMenuGroupProps): React.JSX.Element;
 declare function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps): React.JSX.Element;
 declare function ContextMenuItem({ className, inset, variant, ...props }: ContextMenuItemProps): React.JSX.Element;

package/dist/context-menu.js

@@ -3,6 +3,7 @@ import { cn } from "./lib/utils.js";
 import { CheckIcon, ChevronRightIcon } from "./lib/internal-icons.js";
 import { resolveFinalFocus } from "./lib/focus.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
 //#region src/context-menu.tsx
 function ContextMenu(props) {
@@ -24,19 +25,35 @@ function ContextMenuTrigger({ className, ...props }) {
 		...props
 	});
 }
-function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "inline-end", sideOffset = 0, restoreFocusOnClose, finalFocus, ...props }) {
+function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "inline-end", sideOffset = 0, restoreFocusOnClose, finalFocus, onKeyDown, children, ...props }) {
+	const listRef = React.useRef(null);
 	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
 		"data-slot": "context-menu-positioner",
-		className: "isolate z-50 outline-hidden",
+		className: "isolate z-50",
 		align,
 		alignOffset,
 		side,
 		sideOffset,
 		children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
 			"data-slot": "context-menu-content",
-			className: cn("motion-pop-md bg-elevated/80 not-supports-backdrop-filter:bg-elevated/90 text-contrast ring-contrast/10 z-50 max-h-(--available-height) min-w-48 overflow-x-hidden overflow-y-auto rounded-lg p-1.5 shadow-md ring-1 backdrop-blur-xl backdrop-saturate-150 outline-hidden", className),
+			className: cn("motion-pop-md bg-elevated/80 not-supports-backdrop-filter:bg-elevated/90 text-contrast border-edge z-50 flex max-h-(--available-height) min-w-48 flex-col overflow-hidden rounded-lg shadow-md border backdrop-blur-xl backdrop-saturate-150 focus-visible:outline-hidden", className),
 			finalFocus: resolveFinalFocus(restoreFocusOnClose, finalFocus),
-			...props
+			onKeyDown: (event) => {
+				onKeyDown?.(event);
+				const list = listRef.current;
+				if (list && !event.defaultPrevented && event.target === event.currentTarget && (event.key === "PageDown" || event.key === "PageUp")) {
+					event.preventDefault();
+					const direction = event.key === "PageDown" ? 1 : -1;
+					list.scrollBy({ top: direction * list.clientHeight * .875 });
+				}
+			},
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				ref: listRef,
+				"data-slot": "context-menu-list",
+				className: "scroll-fade supports-[animation-timeline:scroll()]:scrollbar-none min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain p-1.5",
+				children
+			})
 		})
 	}) });
 }
@@ -59,7 +76,7 @@ function ContextMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "context-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("focus:bg-highlight data-[variant=danger]:text-danger data-[variant=danger]:*:[svg]:text-danger data-[variant=danger]:focus:bg-danger data-[variant=danger]:focus:text-white data-[variant=danger]:focus:**:text-white group/context-menu-item relative flex cursor-clickable items-center gap-2.5 rounded-[calc(var(--radius)+var(--spacing)-var(--spacing)*1.5)] px-3 py-2 text-sm font-medium outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:ps-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlighted data-[variant=danger]:text-danger data-[variant=danger]:*:[svg]:text-danger data-[variant=danger]:focus:bg-danger data-[variant=danger]:focus:text-white data-[variant=danger]:focus:**:text-white group/context-menu-item relative flex cursor-clickable items-center gap-2.5 rounded-[calc(var(--radius)+var(--spacing)-var(--spacing)*1.5)] px-3 py-2 text-sm font-medium focus:outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:ps-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }
@@ -73,12 +90,12 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(ContextMenu$1.SubmenuTrigger, {
 		"data-slot": "context-menu-sub-trigger",
 		"data-inset": inset,
-		className: cn("focus:bg-highlight data-popup-open:bg-highlight flex cursor-clickable items-center gap-2.5 rounded-[calc(var(--radius)+var(--spacing)-var(--spacing)*1.5)] px-3 py-2 text-sm font-medium outline-hidden select-none data-inset:ps-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlighted data-popup-open:bg-highlighted flex cursor-clickable items-center gap-2.5 rounded-[calc(var(--radius)+var(--spacing)-var(--spacing)*1.5)] px-3 py-2 text-sm font-medium focus:outline-hidden select-none data-inset:ps-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ms-auto rtl:rotate-180" })]
 	});
 }
-function ContextMenuSubContent({ align = "start", alignOffset = -6, side = "inline-end", sideOffset = 0, className, ...props }) {
+function ContextMenuSubContent({ align = "start", alignOffset = -7, side = "inline-end", sideOffset = 0, className, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenuContent, {
 		"data-slot": "context-menu-sub-content",
 		className: cn("w-auto min-w-24", className),
@@ -93,7 +110,7 @@ function ContextMenuCheckboxItem({ className, children, checked, inset, ...props
 	return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
 		"data-slot": "context-menu-checkbox-item",
 		"data-inset": inset,
-		className: cn("focus:bg-highlight relative flex cursor-clickable items-center gap-2.5 rounded-[calc(var(--radius)+var(--spacing)-var(--spacing)*1.5)] py-2 pe-8 ps-3 text-sm font-medium outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:ps-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlighted relative flex cursor-clickable items-center gap-2.5 rounded-[calc(var(--radius)+var(--spacing)-var(--spacing)*1.5)] py-2 pe-8 ps-3 text-sm font-medium focus:outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:ps-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		checked,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
@@ -113,7 +130,7 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
 		"data-slot": "context-menu-radio-item",
 		"data-inset": inset,
-		className: cn("focus:bg-highlight relative flex cursor-clickable items-center gap-2.5 rounded-[calc(var(--radius)+var(--spacing)-var(--spacing)*1.5)] py-2 pe-8 ps-3 text-sm font-medium outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:ps-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlighted relative flex cursor-clickable items-center gap-2.5 rounded-[calc(var(--radius)+var(--spacing)-var(--spacing)*1.5)] py-2 pe-8 ps-3 text-sm font-medium focus:outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:ps-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			"data-slot": "context-menu-radio-item-indicator",
@@ -125,7 +142,7 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
 function ContextMenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
 		"data-slot": "context-menu-separator",
-		className: cn("bg-contour -mx-1.5 my-1.5 h-px", className),
+		className: cn("bg-line -mx-1.5 my-1.5 h-px", className),
 		...props
 	});
 }

package/dist/dialog.js

@@ -40,7 +40,7 @@ function DialogOverlay({ className, ...props }) {
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
 		"data-slot": "dialog-content",
-		className: cn("motion-scale-lg bg-foundation ring-contrast/10 fixed top-1/2 start-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 gap-6 rounded-lg p-6 text-sm ring-1 outline-hidden sm:max-w-sm shadow-lg", className),
+		className: cn("motion-scale-lg bg-foundation border-edge fixed top-1/2 start-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 gap-6 rounded-lg p-6 text-sm border focus-visible:outline-hidden sm:max-w-sm shadow-lg", className),
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog$1.Close, {
 			"data-slot": "dialog-close",

package/dist/drawer.js

@@ -39,14 +39,14 @@ function DrawerOverlay({ className, ...props }) {
 function DrawerViewport({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Drawer$1.Viewport, {
 		"data-slot": "drawer-viewport",
-		className: cn("fixed inset-0 z-50 outline-hidden", className),
+		className: cn("fixed inset-0 z-50 focus-visible:outline-hidden", className),
 		...props
 	});
 }
 function DrawerContent({ className, children, showCloseButton = false, ...props }) {
 	return /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsx(DrawerViewport, { children: /* @__PURE__ */ jsxs(Drawer$1.Popup, {
 		"data-slot": "drawer-content",
-		className: cn("group/drawer-content bg-foundation fixed z-50 flex flex-col overflow-y-auto border-shade text-sm shadow-lg outline-hidden", "transition-[translate] duration-(--duration-lg) ease-(--ease) data-[swiping]:duration-0", "data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-lg data-[swipe-direction=down]:border-t", "data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-lg data-[swipe-direction=up]:border-b", "data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-lg data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm", "data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-lg data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm", "data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full", "data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full", "data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full", "data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full", className),
+		className: cn("group/drawer-content bg-foundation fixed z-50 flex flex-col overflow-y-auto border-contour text-sm shadow-lg focus-visible:outline-hidden", "transition-[translate] duration-(--duration-lg) ease-(--ease) data-[swiping]:duration-0", "data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-lg data-[swipe-direction=down]:border-t", "data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-lg data-[swipe-direction=up]:border-b", "data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-lg data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm", "data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-lg data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm", "data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full", "data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full", "data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full", "data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("div", {

package/dist/gradient-reveal-text.js

@@ -236,7 +236,7 @@ function GradientRevealText({ text, duration = 0, colors = DEFAULT_COLORS, baseO
 				y: "50%",
 				textAnchor: "middle",
 				dominantBaseline: "central",
-				className: baseColor ? "font-bold" : "font-bold stroke-contour",
+				className: baseColor ? "font-bold" : "font-bold stroke-line",
 				style: {
 					...textStyle,
 					...baseColor ? { stroke: baseColor } : {},

package/dist/input-group.js

@@ -6,7 +6,7 @@ import { Textarea } from "./textarea.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/input-group.tsx
-const inputGroupVariants = cva("bg-shade hover:border-focus has-[[data-slot=input-group-control]:focus-visible]:border-focus has-[[data-slot=input-group-control]:focus-visible]:ring-focus/50 has-[[data-slot][aria-invalid=true]]:ring-danger/30 has-[[data-slot][aria-invalid=true]]:border-danger group/input-group relative flex w-full min-w-0 items-center rounded-md border border-transparent motion-color outline-hidden in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:pointer-events-none has-disabled:opacity-30 not-has-disabled:has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3", {
+const inputGroupVariants = cva("bg-neutral hover:border-focus has-[[data-slot=input-group-control]:focus-visible]:border-focus has-[[data-slot=input-group-control]:focus-visible]:ring-focus/50 has-[[data-slot][aria-invalid=true]]:ring-danger/30 has-[[data-slot][aria-invalid=true]]:border-danger group/input-group relative flex w-full min-w-0 items-center rounded-md border border-transparent motion-color has-disabled:pointer-events-none has-disabled:opacity-30 not-has-disabled:has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3", {
 	variants: { size: {
 		xs: "h-6 rounded-sm",
 		sm: "h-8",

package/dist/input-otp.js

@@ -26,7 +26,7 @@ function InputOTPSlot({ index, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "input-otp-slot",
 		"data-active": isActive || void 0,
-		className: cn("border-shade relative flex size-9 items-center justify-center border-y border-r text-sm motion-color outline-hidden first:rounded-l-md first:border-l last:rounded-r-md", "data-active:border-focus data-active:ring-3 data-active:ring-focus/50 data-active:z-10", "group-has-aria-invalid/input-otp:border-danger group-has-aria-invalid/input-otp:data-active:ring-3 group-has-aria-invalid/input-otp:data-active:ring-danger/30", className),
+		className: cn("border-contour relative flex size-9 items-center justify-center border-y border-r text-sm motion-color data-active:outline-hidden first:rounded-l-md first:border-l last:rounded-r-md", "data-active:border-focus data-active:ring-3 data-active:ring-focus/50 data-active:z-10", "group-has-aria-invalid/input-otp:border-danger group-has-aria-invalid/input-otp:data-active:ring-3 group-has-aria-invalid/input-otp:data-active:ring-danger/30", className),
 		...props,
 		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
 			className: "pointer-events-none absolute inset-0 flex items-center justify-center",

package/dist/input.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Input as Input$1 } from "@base-ui/react/input";
 //#region src/input.tsx
-const inputVariants = cva("bg-shade hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger placeholder:text-soft flex w-full min-w-0 items-center overflow-hidden rounded-md border border-transparent motion-color outline-hidden file:inline-flex file:my-[3px] file:items-center file:me-3 file:cursor-clickable file:rounded-md file:border-0 file:bg-primary file:px-2.5 file:leading-none file:font-medium file:text-white file:motion-color file:hover:bg-primary/80 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3", {
+const inputVariants = cva("bg-neutral hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger placeholder:text-subtle flex w-full min-w-0 items-center overflow-hidden rounded-md border border-transparent motion-color focus-visible:outline-hidden file:inline-flex file:my-[3px] file:items-center file:me-3 file:cursor-clickable file:rounded-md file:border-0 file:bg-primary file:px-2.5 file:leading-none file:font-medium file:text-white file:motion-color file:hover:bg-primary/80 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3", {
 	variants: { size: {
 		xs: "h-6 rounded-sm px-2 text-xs file:-ms-[5px] file:h-4",
 		sm: "h-8 px-3 text-sm file:-ms-[9px] file:h-6",