@waveso/ui 0.15.1 → 0.17.0

package/README.md

@@ -85,11 +85,13 @@ Wave pays close attention to token taxonomy. Surfaces encode elevation; borders
 - `--muted` — body text, icons, any mark
 - `--soft` — placeholders, hints
 
-### Borders
+### Form
 
-- `--line` — subtle separators
-- `--edge` — component boundary
-- `--solid` — structural definition
+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.
+
+- `--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)
 
 ### Ring
 
@@ -105,22 +107,21 @@ Wave pays close attention to token taxonomy. Surfaces encode elevation; borders
 
 This is the sophisticated move most libraries skip.
 
-Wave biases heavily toward **transparent (alpha) borders as the default**, with a **solid token reserved for functional states**.
+Wave uses **transparent (alpha) borders only**: `contour` by default, and `shade` where a boundary has to be intense.
 
-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 a solid option.
+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.
 
 Alpha borders **inherit the surface beneath them**, take the **content color as their luminance source**, keep hue consistent across surfaces, and scale naturally.
 
-Solid 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."
+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 **alpha** borders are ideal for:
+The default **`contour`** borders are ideal for:
 
 - Cards
 - Panels
-- Inputs
 - Subtle separators
 
-The **solid** borders are ideal for:
+The intense **`shade`** borders are ideal for:
 
 - Layout definition (sidebar vs. content)
 - Component grouping
@@ -129,8 +130,8 @@ The **solid** borders are ideal for:
 
 **Rule of thumb:**
 
-- If it separates **surface from surface** → alpha border
-- If it separates **layout regions** → solid border
+- If it separates **surface from surface** → `contour`
+- If it separates **layout regions** → `shade`
 - 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-edge", className),
+		className: cn("not-last:border-b border-shade", 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 **: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 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,10 +209,10 @@ 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-line/60 bg-surface px-5 py-2.5 shadow-lg ring-1 ring-line", className),
+					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),
 					children: [/* @__PURE__ */ jsx("span", {
 						"data-slot": "action-bar-message",
-						className: cn("whitespace-nowrap text-sm font-medium", saveError ? "text-destructive" : "text-contrast"),
+						className: cn("whitespace-nowrap text-sm font-medium", saveError ? "text-danger" : "text-contrast"),
 						children: saveError ? text.saveError : displayMessage
 					}), /* @__PURE__ */ jsxs("div", {
 						"data-slot": "action-bar-actions",
@@ -222,7 +222,7 @@ function ActionBarProvider({ children, message = "You have unsaved changes", plu
 							variant: "ghost",
 							disabled: anySaving,
 							onClick: handleResetAll,
-							className: "h-9 px-3 text-sm hover:text-destructive",
+							className: "h-9 px-3 text-sm",
 							children: text.reset
 						}), /* @__PURE__ */ jsx(Button, {
 							type: "button",
@@ -231,7 +231,7 @@ function ActionBarProvider({ children, message = "You have unsaved changes", plu
 							onClick: handleSaveAll,
 							className: "h-9 px-4 text-sm",
 							children: anySaving ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-1.5 h-3.5 w-3.5" }), text.saving] }) : /* @__PURE__ */ jsxs(Fragment, { children: [text.save, /* @__PURE__ */ jsx(Kbd, {
-								className: "ml-1.5",
+								className: "ms-1.5 bg-transparent text-current",
 								children: isMac ? "⌘S" : "Ctrl+S"
 							})] })
 						})]

package/dist/alert-dialog.js

@@ -33,35 +33,35 @@ 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 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-4 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", className),
+		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),
 		...props
 	})] });
 }
 function AlertDialogHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-dialog-header",
-		className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr] group-data-[size=lg]/alert-dialog-content:place-items-start group-data-[size=lg]/alert-dialog-content:text-left group-data-[size=xl]/alert-dialog-content:place-items-start group-data-[size=xl]/alert-dialog-content:text-left", className),
+		className: cn("grid grid-rows-[auto_1fr] place-items-center gap-3 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr] group-data-[size=lg]/alert-dialog-content:place-items-start group-data-[size=lg]/alert-dialog-content:text-start group-data-[size=xl]/alert-dialog-content:place-items-start group-data-[size=xl]/alert-dialog-content:text-start", className),
 		...props
 	});
 }
 function AlertDialogFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-dialog-footer",
-		className: cn("bg-secondary/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-lg border-t border-line p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
+		className: cn("flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
 		...props
 	});
 }
 function AlertDialogMedia({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-dialog-media",
-		className: cn("bg-secondary mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className),
+		className: cn("bg-secondary mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8", className),
 		...props
 	});
 }
 function AlertDialogTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
 		"data-slot": "alert-dialog-title",
-		className: cn("text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
+		className: cn("text-lg font-medium leading-none sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
 		...props
 	});
 }

package/dist/alert.d.ts

@@ -2,12 +2,19 @@ import * as React from "react";
 import { VariantProps } from "class-variance-authority";
 //#region src/alert.d.ts
 declare const alertVariants: (props?: ({
-  variant?: "default" | "destructive" | null | undefined;
+  variant?: "danger" | "default" | "info" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type AlertProps = React.ComponentProps<"div"> & VariantProps<typeof alertVariants>;
 type AlertTitleProps = React.ComponentProps<"div">;
 type AlertDescriptionProps = React.ComponentProps<"div">;
 type AlertActionProps = React.ComponentProps<"div">;
+/**
+ * A callout for information the reader should notice. It has no live role
+ * by default: pass `role="alert"` for an urgent message that appears while
+ * someone is using the page (an error after an action), which screen readers
+ * announce at once, or `role="status"` for a polite update. A static callout
+ * needs neither.
+ */
 declare function Alert({ className, variant, ...props }: AlertProps): React.JSX.Element;
 declare function AlertTitle({ className, ...props }: AlertTitleProps): React.JSX.Element;
 declare function AlertDescription({ className, ...props }: AlertDescriptionProps): React.JSX.Element;

package/dist/alert.js

@@ -2,17 +2,26 @@ 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-edge px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-data-[icon]:grid-cols-[auto_1fr] has-data-[icon]:gap-x-2 *: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-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", {
 	variants: { variant: {
 		default: "bg-surface text-contrast",
-		destructive: "text-destructive bg-surface *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
+		info: "bg-surface text-contrast *:data-[icon]:text-info *:[svg]:text-info",
+		success: "bg-surface text-contrast *:data-[icon]:text-success *:[svg]:text-success",
+		warning: "bg-surface text-contrast *:data-[icon]:text-warning *:[svg]:text-warning",
+		danger: "bg-surface text-contrast *:data-[icon]:text-danger *:[svg]:text-danger"
 	} },
 	defaultVariants: { variant: "default" }
 });
+/**
+* A callout for information the reader should notice. It has no live role
+* by default: pass `role="alert"` for an urgent message that appears while
+* someone is using the page (an error after an action), which screen readers
+* announce at once, or `role="status"` for a polite update. A static callout
+* needs neither.
+*/
 function Alert({ className, variant, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert",
-		role: "alert",
 		className: cn(alertVariants({ variant }), className),
 		...props
 	});
@@ -34,7 +43,7 @@ function AlertDescription({ className, ...props }) {
 function AlertAction({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-action",
-		className: cn("absolute top-2 right-2", className),
+		className: cn("absolute top-2.5 end-3", className),
 		...props
 	});
 }

package/dist/animate.d.ts

@@ -138,7 +138,7 @@ declare function Stagger({ children, interval, baseDelay }: StaggerProps): impor
  * @example
  * ```tsx
  * <Pulse>
- *   <span className="size-3 rounded-full bg-green-500" />
+ *   <span className="size-3 rounded-full bg-success" />
  * </Pulse>
  * ```
  */

package/dist/animate.js

@@ -1,4 +1,5 @@
 "use client";
+import { mergeRefs } from "./lib/merge-refs.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { useInView, useReducedMotion } from "motion/react";
@@ -76,14 +77,6 @@ function buildStyles(opts) {
 		hasFilter: blurPx > 0
 	};
 }
-function mergeRefs(...refs) {
-	return (el) => {
-		refs.forEach((ref) => {
-			if (typeof ref === "function") ref(el);
-			else if (ref && typeof ref === "object") ref.current = el;
-		});
-	};
-}
 function getTransitionParams(transition, useSpring, fallbackDuration = .15) {
 	return {
 		duration: transition?.duration ?? fallbackDuration,
@@ -256,7 +249,7 @@ function Stagger({ children, interval = .08, baseDelay = 0 }) {
 * @example
 * ```tsx
 * <Pulse>
-*   <span className="size-3 rounded-full bg-green-500" />
+*   <span className="size-3 rounded-full bg-success" />
 * </Pulse>
 * ```
 */

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) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1", className),
+		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),
 		...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-primary data-highlighted:text-white 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-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		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),
 		...props
 	});
 }
 function AutocompleteSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Autocomplete$1.Separator, {
 		"data-slot": "autocomplete-separator",
-		className: cn("bg-line -mx-1 my-1 h-px", className),
+		className: cn("bg-contour -mx-1 my-1 h-px", className),
 		...props
 	});
 }

package/dist/avatar.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
 //#region src/avatar.d.ts
 type AvatarProps = Avatar$1.Root.Props & {
-  size?: "default" | "sm" | "lg";
+  size?: "xs" | "sm" | "default" | "lg";
 };
 type AvatarImageProps = Avatar$1.Image.Props;
 type AvatarFallbackProps = Avatar$1.Fallback.Props;

package/dist/avatar.js

@@ -7,7 +7,7 @@ function Avatar({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
 		"data-slot": "avatar",
 		"data-size": size,
-		className: cn("after:border-line group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className),
+		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),
 		...props
 	});
 }
@@ -21,14 +21,14 @@ function AvatarImage({ className, ...props }) {
 function AvatarFallback({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
 		"data-slot": "avatar-fallback",
-		className: cn("bg-secondary text-muted flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs", 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", className),
 		...props
 	});
 }
 function AvatarBadge({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "avatar-badge",
-		className: cn("bg-primary text-white ring-foundation absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none", "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 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),
 		...props
 	});
 }
@@ -42,7 +42,7 @@ function AvatarGroup({ className, ...props }) {
 function AvatarGroupCount({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "avatar-group-count",
-		className: cn("bg-secondary text-muted ring-foundation relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 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=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className),
+		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),
 		...props
 	});
 }

package/dist/badge.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | "success" | "warning" | null | undefined;
+  variant?: "danger" | "default" | "ghost" | "link" | "outline" | "secondary" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>;
 declare function Badge({ className, variant, render, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/badge.js

@@ -4,15 +4,15 @@ import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/badge.tsx
-const badgeVariants = cva("h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium motion-color has-data-[icon=inline-start]:ps-1.5 has-data-[icon=inline-end]:pe-1.5 [&_svg:not([class*='size-'])]:size-3 inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&_svg]:shrink-0 [&_svg]:pointer-events-none focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3 aria-invalid:ring-destructive/30 aria-invalid:border-destructive overflow-hidden group/badge", {
+const badgeVariants = cva("h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium motion-color has-data-[icon=inline-start]:ps-1.5 has-data-[icon=inline-end]:pe-1.5 [&_svg:not([class*='size-'])]:size-3 inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&_svg]:shrink-0 [&_svg]:pointer-events-none focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3 aria-invalid:ring-danger/30 aria-invalid:border-danger overflow-hidden group/badge", {
 	variants: { variant: {
 		default: "bg-primary text-white [a]:hover:bg-primary/80",
-		success: "bg-success text-contrast dark:text-foundation [a]:hover:bg-success/80",
-		destructive: "bg-destructive text-white [a]:hover:bg-destructive/80 [a]:focus-visible:ring-destructive/50",
-		warning: "bg-warning text-contrast dark:text-foundation [a]:hover:bg-warning/80",
+		success: "bg-success text-white [a]:hover:bg-success/80",
+		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-edge bg-foundation [a]:hover:bg-secondary/80 [a]:hover:text-contrast dark:bg-edge/30",
-		ghost: "text-muted [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",
 		link: "text-primary [a]:underline-offset-4 [a]:hover:underline"
 	} },
 	defaultVariants: { variant: "default" }

package/dist/button-group.d.ts

@@ -6,10 +6,12 @@ import { useRender } from "@base-ui/react/use-render";
 declare const buttonGroupVariants: (props?: ({
   orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type ButtonGroupProps = React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>;
+type ButtonGroupProps = React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants> & {
+  size?: "xs" | "sm" | "default" | "lg";
+};
 type ButtonGroupTextProps = useRender.ComponentProps<"div">;
 type ButtonGroupSeparatorProps = React.ComponentProps<typeof Separator>;
-declare function ButtonGroup({ className, orientation, ...props }: ButtonGroupProps): React.JSX.Element;
+declare function ButtonGroup({ className, orientation, size, ...props }: ButtonGroupProps): React.JSX.Element;
 declare function ButtonGroupText({ className, render, ...props }: ButtonGroupTextProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function ButtonGroupSeparator({ className, orientation, ...props }: ButtonGroupSeparatorProps): React.JSX.Element;
 //#endregion

package/dist/button-group.js

@@ -6,18 +6,19 @@ 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("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", {
+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", {
 	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"
 	} },
 	defaultVariants: { orientation: "horizontal" }
 });
-function ButtonGroup({ className, orientation, ...props }) {
+function ButtonGroup({ className, orientation, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		role: "group",
 		"data-slot": "button-group",
 		"data-orientation": orientation,
+		"data-size": size,
 		className: cn(buttonGroupVariants({ orientation }), className),
 		...props
 	});
@@ -25,7 +26,7 @@ function ButtonGroup({ className, orientation, ...props }) {
 function ButtonGroupText({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "div",
-		props: mergeProps({ className: cn("bg-secondary gap-2 rounded-md border border-edge px-2.5 text-sm font-medium [&_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-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),
 		render,
 		state: { slot: "button-group-text" }
 	});
@@ -34,7 +35,7 @@ function ButtonGroupSeparator({ className, orientation = "vertical", ...props })
 	return /* @__PURE__ */ jsx(Separator, {
 		"data-slot": "button-group-separator",
 		orientation,
-		className: cn("bg-edge relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto", className),
+		className: cn("bg-contour relative self-stretch data-[orientation=horizontal]:w-auto data-[orientation=vertical]:h-auto", className),
 		...props
 	});
 }

package/dist/button.d.ts

@@ -3,7 +3,7 @@ import { Button as Button$1 } from "@base-ui/react/button";
 import { VariantProps } from "class-variance-authority";
 //#region src/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+  variant?: "danger" | "default" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
   size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = React.ComponentProps<typeof Button$1> & VariantProps<typeof buttonVariants>;

package/dist/button.js

@@ -4,14 +4,14 @@ 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-destructive/30 aria-invalid:border-destructive 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 disabled:pointer-events-none 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 outline-hidden group/button select-none active:not-aria-[haspopup]:scale-[0.97]", {
 	variants: {
 		variant: {
-			default: "bg-primary text-white hover:bg-primary/80",
-			outline: "border-edge bg-foundation hover:bg-secondary/80 hover:text-contrast dark:bg-edge/30 aria-expanded:bg-secondary aria-expanded:text-contrast",
-			secondary: "bg-secondary text-contrast hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-contrast",
-			ghost: "text-contrast hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-contrast",
-			destructive: "bg-destructive text-white hover:bg-destructive/80 focus-visible:ring-destructive/50",
+			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",
+			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",
+			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"
 		},
 		size: {

package/dist/card.d.ts

@@ -1,17 +1,24 @@
 import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/card.d.ts
-type CardProps = React.ComponentProps<"div"> & {
+type CardProps = useRender.ComponentProps<"div"> & {
   size?: "default" | "sm";
 };
 type CardHeaderProps = React.ComponentProps<"div">;
-type CardTitleProps = React.ComponentProps<"div">;
+type CardTitleProps = useRender.ComponentProps<"div">;
 type CardDescriptionProps = React.ComponentProps<"div">;
 type CardActionProps = React.ComponentProps<"div">;
 type CardContentProps = React.ComponentProps<"div">;
 type CardFooterProps = React.ComponentProps<"div">;
-declare function Card({ className, size, ...props }: CardProps): React.JSX.Element;
+/**
+ * A surface that groups related content. `render` changes the element: an
+ * `article` or `section` for semantics, or a link or button to make the whole
+ * card interactive, which adds a hover, a clickable cursor and a focus ring.
+ */
+declare function Card({ className, size, render, ...props }: CardProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function CardHeader({ className, ...props }: CardHeaderProps): React.JSX.Element;
-declare function CardTitle({ className, ...props }: CardTitleProps): React.JSX.Element;
+/** `render={<h3 />}` makes the title a real heading for screen readers. */
+declare function CardTitle({ className, render, ...props }: CardTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function CardDescription({ className, ...props }: CardDescriptionProps): React.JSX.Element;
 declare function CardAction({ className, ...props }: CardActionProps): React.JSX.Element;
 declare function CardContent({ className, ...props }: CardContentProps): React.JSX.Element;

package/dist/card.js

@@ -1,26 +1,39 @@
+"use client";
 import { cn } from "./lib/utils.js";
 import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/card.tsx
-function Card({ className, size = "default", ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "card",
-		"data-size": size,
-		className: cn("ring-contrast/10 bg-surface text-contrast group/card flex flex-col gap-4 overflow-hidden rounded-lg py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg", className),
-		...props
+/**
+* A surface that groups related content. `render` changes the element: an
+* `article` or `section` for semantics, or a link or button to make the whole
+* card interactive, which adds a hover, a clickable cursor and a focus ring.
+*/
+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),
+		render,
+		state: {
+			slot: "card",
+			size
+		}
 	});
 }
 function CardHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-header",
-		className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3", className),
+		className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4", className),
 		...props
 	});
 }
-function CardTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "card-title",
-		className: cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className),
-		...props
+/** `render={<h3 />}` makes the title a real heading for screen readers. */
+function CardTitle({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className) }, props),
+		render,
+		state: { slot: "card-title" }
 	});
 }
 function CardDescription({ className, ...props }) {
@@ -40,14 +53,14 @@ function CardAction({ className, ...props }) {
 function CardContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-content",
-		className: cn("px-4 group-data-[size=sm]/card:px-3", className),
+		className: cn("px-6 group-data-[size=sm]/card:px-4", className),
 		...props
 	});
 }
 function CardFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-footer",
-		className: cn("bg-secondary/50 flex items-center rounded-b-lg border-t border-line p-4 group-data-[size=sm]/card:p-3", className),
+		className: cn("flex items-center px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4", className),
 		...props
 	});
 }

package/dist/checkbox.js

@@ -7,11 +7,11 @@ 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 border-edge dark:bg-edge/30 data-checked:bg-primary data-indeterminate:bg-primary data-checked:text-white data-indeterminate:text-white dark:data-checked:bg-primary dark:data-indeterminate:bg-primary data-checked:border-primary data-indeterminate:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-hidden group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3", className),
+		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),
 		...props,
 		children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, {
 			"data-slot": "checkbox-indicator",
-			className: "group/indicator grid place-content-center text-current transition-none [&>svg]:size-3.5",
+			className: "group/indicator grid place-content-center text-current transition-none [&>svg]:size-5",
 			children: [/* @__PURE__ */ jsx(CheckIcon, { className: "col-start-1 row-start-1 group-data-indeterminate/indicator:hidden" }), /* @__PURE__ */ jsx(MinusIcon, { className: "col-start-1 row-start-1 hidden group-data-indeterminate/indicator:block" })]
 		})
 	});