@viraui/react 2026.0.3 → 2026.0.5

package/dist/catalog.json

@@ -92,6 +92,12 @@
       "summary": "CSS-only fit-to-width wrapper that scales children to fill available inline space.",
       "guidePath": "./components/fit-text/fit-text.guide.json"
     },
+    {
+      "id": "glow",
+      "name": "Glow",
+      "summary": "Decorative pointer-driven border highlight on a transparent Surface shell (radius only). Put the visual card as children; a shared rAF tracker paints CSS variables without React re-renders.",
+      "guidePath": "./components/glow/glow.guide.json"
+    },
     {
       "id": "icon-button",
       "name": "IconButton",

package/dist/components/basic-input/basic-input.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-basic-input-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-basic-input-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-basic-input-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-basic-input-placeholder-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-field-label-padding-inline{syntax:"<length>";inherits:true;initial-value:0}.viraui__basic-input-module__BasicInput_5uE64{--vui-basic-input-background:var(--base-1);--vui-basic-input-color:var(--global-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);--vui-basic-input-padding-inline:var(--space-small);--vui-basic-input-font-size:var(--font-scale-body-small);--vui-basic-input-border-radius:var(--radius-medium);box-sizing:border-box;margin:0;inline-size:100%;min-inline-size:0;padding-inline:var(--vui-basic-input-padding-inline);font-family:inherit;font-size:var(--vui-basic-input-font-size);font-variation-settings:"wght" 400;color:var(--vui-basic-input-color);background:var(--vui-basic-input-background);border:none;border-radius:var(--vui-basic-input-border-radius);appearance:none;&::-webkit-contacts-auto-fill-button{background-color:var(--vui-basic-input-color)}&::placeholder{color:var(--vui-basic-input-placeholder-color)}&:disabled{--vui-basic-input-background:var(--global-disabled-background);--vui-basic-input-color:var(--global-disabled-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);cursor:not-allowed}&[data-invalid]{outline-color:oklab(from var(--highlight-red) l a b/.3)}&[data-sizing=content]{field-sizing:content}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-basic-input-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-basic-input-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-basic-input-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-basic-input-placeholder-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-field-label-padding-inline{syntax:"<length>";inherits:true;initial-value:0}.viraui__basic-input-module__BasicInput_5uE64{--vui-basic-input-background:var(--base-1);--vui-basic-input-color:var(--global-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);--vui-basic-input-padding-inline:calc(var(--space-small) + var(--space-x-small));--vui-basic-input-font-size:var(--font-scale-body-small);--vui-basic-input-border-radius:var(--radius-medium);box-sizing:border-box;margin:0;inline-size:100%;min-inline-size:0;padding-inline:var(--vui-basic-input-padding-inline);font-family:inherit;font-size:var(--vui-basic-input-font-size);font-variation-settings:"wght" 400;color:var(--vui-basic-input-color);background:var(--vui-basic-input-background);border:none;border-radius:var(--vui-basic-input-border-radius);appearance:none;&::-webkit-contacts-auto-fill-button{background-color:var(--vui-basic-input-color)}&::placeholder{color:var(--vui-basic-input-placeholder-color)}&:disabled{--vui-basic-input-background:var(--global-disabled-background);--vui-basic-input-color:var(--global-disabled-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);cursor:not-allowed}&[data-invalid]{outline-color:oklab(from var(--highlight-red) l a b/.3)}&[data-sizing=content]{field-sizing:content}}}

package/dist/components/dialog/dialog-sheet.js

@@ -2,8 +2,9 @@ import { ChromeXmark } from "../../internal/chrome-icons/chrome-icons.js";
 import { Text } from "../text/text.js";
 import { Stack } from "../stack/stack.js";
 import dialog_module_default from "./dialog.module.js";
-import { IconButton } from "../icon-button/icon-button.js";
+import { Elevator } from "../elevator/elevator.js";
 import { Surface } from "../surface/surface.js";
+import { IconButton } from "../icon-button/icon-button.js";
 import { Title } from "../title/title.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react";
@@ -17,63 +18,66 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 		hAlign: fitContent ? "center" : void 0
 	}),
 	className: dialog_module_default.Viewport,
-	children: /* @__PURE__ */ jsxs(Drawer.Popup, {
-		className: dialog_module_default.Popup,
-		style: { "--vui-dialog-max-block-size": maxHeight },
-		render: /* @__PURE__ */ jsx(Surface, {
-			border: "top",
-			render: /* @__PURE__ */ jsx(Stack, { hAlign: "center" }),
-			color: 1,
-			"data-vibrant": "",
-			radius: "large",
-			vPadding: ["medium", 0]
-		}),
-		children: [showHandle && /* @__PURE__ */ jsxs(Stack, {
-			inline: true,
-			direction: "row",
-			vPadding: [0, "medium"],
-			columnGap: "small",
-			children: [
-				/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape }),
-				/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape }),
-				/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape })
-			]
-		}), /* @__PURE__ */ jsxs(Stack, {
-			maxWidth: maxContentWidth,
-			rowGap: "large",
-			className: dialog_module_default.Body,
-			children: [/* @__PURE__ */ jsxs(Stack, {
-				className: dialog_module_default.Header,
-				"data-shrink": "false",
-				hAlign: headerAlign,
-				hPadding: "medium",
-				fillChildren: false,
-				children: [/* @__PURE__ */ jsx(Drawer.Title, {
-					render: /* @__PURE__ */ jsx(Title, { size: "4" }),
-					children: title
-				}), description && /* @__PURE__ */ jsx(Drawer.Description, {
-					render: /* @__PURE__ */ jsx(Text, {
-						tone: "muted",
-						render: /* @__PURE__ */ jsx("p", {})
+	children: /* @__PURE__ */ jsx(Elevator, {
+		resting: 4,
+		children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+			className: dialog_module_default.Popup,
+			style: { "--vui-dialog-max-block-size": maxHeight },
+			render: /* @__PURE__ */ jsx(Surface, {
+				border: "top",
+				render: /* @__PURE__ */ jsx(Stack, { hAlign: "center" }),
+				color: 1,
+				"data-vibrant": "",
+				radius: "large",
+				vPadding: ["medium", 0]
+			}),
+			children: [showHandle && /* @__PURE__ */ jsxs(Stack, {
+				inline: true,
+				direction: "row",
+				vPadding: [0, "medium"],
+				columnGap: "small",
+				children: [
+					/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape }),
+					/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape }),
+					/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape })
+				]
+			}), /* @__PURE__ */ jsxs(Stack, {
+				maxWidth: maxContentWidth,
+				rowGap: "large",
+				className: dialog_module_default.Body,
+				children: [/* @__PURE__ */ jsxs(Stack, {
+					className: dialog_module_default.Header,
+					"data-shrink": "false",
+					hAlign: headerAlign,
+					hPadding: "medium",
+					fillChildren: false,
+					children: [/* @__PURE__ */ jsx(Drawer.Title, {
+						render: /* @__PURE__ */ jsx(Title, { size: "4" }),
+						children: title
+					}), description && /* @__PURE__ */ jsx(Drawer.Description, {
+						render: /* @__PURE__ */ jsx(Text, {
+							tone: "muted",
+							render: /* @__PURE__ */ jsx("p", {})
+						}),
+						children: description
+					})]
+				}), /* @__PURE__ */ jsxs(Drawer.Content, {
+					render: /* @__PURE__ */ jsx(Stack, {
+						vAlign: "start",
+						fillChildren: false,
+						className: dialog_module_default.Content
 					}),
-					children: description
+					children: [showCloseButton && /* @__PURE__ */ jsx(Drawer.Close, {
+						className: dialog_module_default.CloseButton,
+						render: /* @__PURE__ */ jsx(IconButton, {
+							"aria-label": "Close dialog",
+							icon: /* @__PURE__ */ jsx(ChromeXmark, {}),
+							variant: "flat"
+						})
+					}), children]
 				})]
-			}), /* @__PURE__ */ jsxs(Drawer.Content, {
-				render: /* @__PURE__ */ jsx(Stack, {
-					vAlign: "start",
-					fillChildren: false,
-					className: dialog_module_default.Content
-				}),
-				children: [showCloseButton && /* @__PURE__ */ jsx(Drawer.Close, {
-					className: dialog_module_default.CloseButton,
-					render: /* @__PURE__ */ jsx(IconButton, {
-						"aria-label": "Close dialog",
-						icon: /* @__PURE__ */ jsx(ChromeXmark, {}),
-						variant: "flat"
-					})
-				}), children]
 			})]
-		})]
+		})
 	})
 })] });
 //#endregion

package/dist/components/fit-text/fit-text.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__fit-text-captured-length{syntax:"<length>";inherits:true;initial-value:0}@property --vui-fit-text-max-font-size{syntax:"<length>";inherits:true;initial-value:calc(infinity * 1px)}@property --__fit-text-available-space{syntax:"<length>";inherits:true;initial-value:0}@property --__fit-text-ratio{syntax:"<number>";inherits:false;initial-value:1}.viraui__fit-text-module__FitText_CdAvq{--__fit-text-captured-length:initial;display:flex;container-type:inline-size;.viraui__fit-text-module__Container_bawpR{--__fit-text-captured-length:100cqi;--__fit-text-available-space:var(--__fit-text-captured-length);flex-grow:1;container-type:inline-size}.viraui__fit-text-module__Display_Hraif{--__fit-text-captured-length:100cqi;--__fit-text-ratio:tan(atan2(var(--__fit-text-available-space),var(--__fit-text-available-space) - var(--__fit-text-captured-length)));inline-size:var(--__fit-text-available-space);font-size:clamp(0px,1em * var(--__fit-text-ratio),var(--vui-fit-text-max-font-size));>*{font-size:1em;max-inline-size:none}}.viraui__fit-text-module__Reference_6wCx7{visibility:hidden;>*{font-size:inherit;max-inline-size:none}}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__fit-text-captured-length{syntax:"<length>";inherits:true;initial-value:0}@property --vui-fit-text-max-font-size{syntax:"<length>";inherits:true;initial-value:calc(infinity * 1px)}@property --__fit-text-available-space{syntax:"<length>";inherits:true;initial-value:0}@property --__fit-text-ratio{syntax:"<number>";inherits:false;initial-value:1}.viraui__fit-text-module__FitText_CdAvq{--__fit-text-captured-length:initial;display:flex;container-type:inline-size;.viraui__fit-text-module__Container_bawpR{--__fit-text-captured-length:100cqi;--__fit-text-available-space:var(--__fit-text-captured-length);flex-grow:1;container-type:inline-size}.viraui__fit-text-module__Display_Hraif{--__fit-text-captured-length:100cqi;--__fit-text-ratio:tan(atan2(var(--__fit-text-available-space),var(--__fit-text-available-space) - var(--__fit-text-captured-length)));inline-size:var(--__fit-text-available-space);font-size:clamp(0px,1em * var(--__fit-text-ratio),var(--vui-fit-text-max-font-size));overflow:clip;>*{font-size:1em;max-inline-size:none;display:block}}.viraui__fit-text-module__Reference_6wCx7{visibility:hidden;>*{font-size:inherit;max-inline-size:none}}}}

package/dist/components/glow/glow-tracker.d.ts

@@ -0,0 +1,19 @@
+export type GlowTrackerEntry = {
+    el: HTMLElement;
+    proximity: number;
+    restingOpacity: number;
+    /** Unwrapped continuous angle written to `--vui-glow-starting-angle`. */
+    lastAngle?: number;
+};
+/**
+ * Advance `lastAngle` toward `rawDegrees` along the shortest arc so CSS
+ * transitions never interpolate the long way across the 0° seam.
+ */
+export declare const unwrapGlowAngle: (lastAngle: number | undefined, rawDegrees: number) => number;
+export declare const registerGlow: (entry: GlowTrackerEntry) => void;
+export declare const updateGlow: (entry: GlowTrackerEntry) => void;
+export declare const unregisterGlow: (el: HTMLElement) => void;
+/** Story / test helper: current document listener attach count (`0` or `1`). */
+export declare const getGlowListenerCount: () => number;
+/** Story / test helper: registered glow root count. */
+export declare const getGlowRegistrySize: () => number;

package/dist/components/glow/glow-tracker.js

@@ -0,0 +1,87 @@
+//#region src/components/glow/glow-tracker.ts
+var entries = /* @__PURE__ */ new Map();
+var listenerCount = 0;
+var rafId = null;
+var pendingEvent = null;
+var POINTER_QUERY = "(hover: hover) and (pointer: fine)";
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+var canTrackPointer = () => {
+	if (typeof window === "undefined" || typeof matchMedia !== "function") return false;
+	return matchMedia(POINTER_QUERY).matches && !matchMedia(REDUCED_MOTION_QUERY).matches;
+};
+/** Normalize degrees into `[0, 360)`. */
+var normalizeAngle = (degrees) => (degrees % 360 + 360) % 360;
+/**
+* Advance `lastAngle` toward `rawDegrees` along the shortest arc so CSS
+* transitions never interpolate the long way across the 0° seam.
+*/
+var unwrapGlowAngle = (lastAngle, rawDegrees) => {
+	const target = normalizeAngle(rawDegrees);
+	if (lastAngle === void 0) return target;
+	let delta = target - normalizeAngle(lastAngle);
+	if (delta > 180) delta -= 360;
+	else if (delta < -180) delta += 360;
+	return lastAngle + delta;
+};
+var paintEntry = (entry, event) => {
+	const bounds = entry.el.getBoundingClientRect();
+	const pointerX = event.clientX;
+	const pointerY = event.clientY;
+	const activeOpacity = pointerX > bounds.left - entry.proximity && pointerX < bounds.left + bounds.width + entry.proximity && pointerY > bounds.top - entry.proximity && pointerY < bounds.top + bounds.height + entry.proximity ? 1 : entry.restingOpacity;
+	const centerX = bounds.left + bounds.width * .5;
+	const centerY = bounds.top + bounds.height * .5;
+	let angle = Math.atan2(pointerY - centerY, pointerX - centerX) * 180 / Math.PI;
+	if (angle < 0) angle += 360;
+	const lastAngle = unwrapGlowAngle(entry.lastAngle, angle + 90);
+	entries.set(entry.el, {
+		...entry,
+		lastAngle
+	});
+	entry.el.style.setProperty("--vui-glow-starting-angle", String(lastAngle));
+	entry.el.style.setProperty("--vui-glow-active-opacity", String(activeOpacity));
+};
+var flushPaint = () => {
+	rafId = null;
+	const event = pendingEvent;
+	pendingEvent = null;
+	if (!event) return;
+	for (const entry of entries.values()) paintEntry(entry, event);
+};
+var onPointerMove = (event) => {
+	pendingEvent = event;
+	if (rafId !== null) return;
+	rafId = requestAnimationFrame(flushPaint);
+};
+var attachListener = () => {
+	if (listenerCount > 0 || !canTrackPointer()) return;
+	document.addEventListener("pointermove", onPointerMove);
+	listenerCount = 1;
+};
+var detachListener = () => {
+	if (listenerCount === 0 || entries.size > 0) return;
+	document.removeEventListener("pointermove", onPointerMove);
+	listenerCount = 0;
+	if (rafId !== null) {
+		cancelAnimationFrame(rafId);
+		rafId = null;
+	}
+	pendingEvent = null;
+};
+var registerGlow = (entry) => {
+	const existing = entries.get(entry.el);
+	entries.set(entry.el, {
+		...entry,
+		...existing?.lastAngle !== void 0 && { lastAngle: existing.lastAngle }
+	});
+	attachListener();
+};
+var unregisterGlow = (el) => {
+	entries.delete(el);
+	detachListener();
+};
+/** Story / test helper: current document listener attach count (`0` or `1`). */
+var getGlowListenerCount = () => listenerCount;
+/** Story / test helper: registered glow root count. */
+var getGlowRegistrySize = () => entries.size;
+//#endregion
+export { getGlowListenerCount, getGlowRegistrySize, registerGlow, unregisterGlow, unwrapGlowAngle };

package/dist/components/glow/glow.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-glow-starting-angle{syntax:"<number>";inherits:true;initial-value:0}@property --vui-glow-angle-lag{syntax:"<time>";inherits:true;initial-value:80ms}@property --vui-glow-auto-rotate-speed{syntax:"<time>";inherits:true;initial-value:4s}@property --vui-glow-active-opacity{syntax:"<number>";inherits:true;initial-value:0}@property --vui-glow-spread{syntax:"<number>";inherits:true;initial-value:250}@property --vui-glow-border-width{syntax:"<length>";inherits:true;initial-value:2px}@property --vui-glow-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-glow-border-offset{syntax:"<length>";inherits:true;initial-value:5px}@property --vui-glow-color{syntax:"*";inherits:true;initial-value:#0000}@property --__glow-radius-tl{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-tr{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-br{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-bl{syntax:"<length-percentage>";inherits:true;initial-value:0}@keyframes viraui__glow-module__vui-glow-auto-rotate_Zh-hL{0%{--vui-glow-starting-angle:0}to{--vui-glow-starting-angle:360}}.viraui__glow-module__Glow_7394e{--vui-glow-border-color:var(--global-contrast);--vui-glow-color:conic-gradient(from 180deg at 50% 70%,#0000,var(--global-primary),#0000);--__glow-radius-tl:var(--vui-surface-border-radius-top-left);--__glow-radius-tr:var(--vui-surface-border-radius-top-right);--__glow-radius-br:var(--vui-surface-border-radius-bottom-right);--__glow-radius-bl:var(--vui-surface-border-radius-bottom-left);position:relative;z-index:0;transition:--vui-glow-starting-angle var(--vui-glow-angle-lag) ease-out;&[data-glow-fit-content=true]{max-width:fit-content}&[data-glow-rainbow=true]{--vui-glow-color:conic-gradient(from 180deg at 50% 50%,var(--highlight-cyan),var(--highlight-blue),var(--highlight-green),var(--highlight-purple),var(--highlight-red),var(--highlight-indigo),var(--highlight-yellow),var(--highlight-salmon),var(--highlight-magenta),var(--highlight-cyan))}&[data-glow-auto-rotate=true]{--vui-glow-active-opacity:1;transition:none;animation:viraui__glow-module__vui-glow-auto-rotate_Zh-hL var(--vui-glow-auto-rotate-speed) linear infinite;@media (prefers-reduced-motion:reduce){animation:none}}&:after,&:before{content:"";position:absolute;z-index:1;pointer-events:none;inset:calc(var(--vui-glow-border-offset) * -1);opacity:var(--vui-glow-active-opacity);border:var(--vui-glow-border-width) solid #0000;border-radius:calc(var(--vui-glow-border-offset) + var(--__glow-radius-tl)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-tr)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-br)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-bl));transition:opacity 1s;@media (prefers-reduced-motion:reduce){display:none}}&:not([data-glow-auto-rotate=true]){&:after,&:before{@media (hover:none),(pointer:coarse){display:none}}}&:before{background:var(--vui-glow-border-color);mask:linear-gradient(#0000,#0000),conic-gradient(from calc(((var(--vui-glow-starting-angle) + (var(--vui-glow-spread) * .25)) - (var(--vui-glow-spread) * 1.5)) * 1deg),oklch(100% 0 0deg/15%) 0deg,#fff,oklch(100% 0 0deg/15%) calc(var(--vui-glow-spread) * 2.5deg));mask-clip:padding-box,border-box;mask-composite:intersect}&:after{background:var(--vui-glow-color);filter:brightness(1.5);mask:linear-gradient(#0000,#0000),conic-gradient(from calc(((var(--vui-glow-starting-angle) + (var(--vui-glow-spread) * .25)) - (var(--vui-glow-spread) * .5)) * 1deg),#0000 0deg,#fff,#0000 calc(var(--vui-glow-spread) * .5deg));mask-clip:padding-box,border-box;mask-composite:intersect;background-size:calc(100% + var(--vui-glow-border-width) * 2) calc(100% + var(--vui-glow-border-width) * 2);background-position:calc(var(--vui-glow-border-width) * -1) calc(var(--vui-glow-border-width) * -1)}&[data-glow-global=true]:after{background-attachment:fixed}}}

package/dist/components/glow/glow.d.ts

@@ -0,0 +1,97 @@
+import { SurfaceProps } from '../surface';
+import type * as React from 'react';
+/**
+ * Public Glow props.
+ *
+ * Glow root is a transparent Surface shell that exposes only `radius` (token, per-corner
+ * tuple, or `auto`). Put the visual card as children (typically `Surface` with `radius="auto"`).
+ *
+ * @default Glow-owned props use the defaults below; `radius` keeps Surface defaults when omitted.
+ */
+export type GlowProps = React.ComponentProps<'div'> & Pick<SurfaceProps, 'radius'> & {
+    /**
+     * Distance from the surface edge where the glow becomes fully active.
+     *
+     * @default 170
+     */
+    proximity?: number;
+    /**
+     * Angular width of the highlighted arc (degrees, used as a unitless CSS number).
+     *
+     * @default 250
+     */
+    spread?: number;
+    /**
+     * Resting opacity of the glow when the pointer is outside proximity.
+     *
+     * @default 0
+     */
+    opacity?: number;
+    /**
+     * Shrinks the root to fit its content (`max-width: fit-content`).
+     *
+     * @default false
+     */
+    fitContent?: boolean;
+    /**
+     * Width of the masked glow border ring.
+     *
+     * @default 2
+     */
+    borderWidth?: number;
+    /**
+     * Color of the masked border ring under the highlight.
+     *
+     * @default var(--global-contrast)
+     */
+    borderColor?: string;
+    /**
+     * Offset of the glow ring from the surface edge. Negative values place the ring outside.
+     *
+     * @default 5
+     */
+    borderOffset?: number;
+    /**
+     * Overrides the glow gradient with a solid color or custom background value.
+     * Ignored when `rainbowColors` is true.
+     *
+     * @default Theme highlight conic gradient
+     */
+    glowColor?: string;
+    /**
+     * Shares the highlight gradient across cards via `background-attachment: fixed`.
+     * Forced off when `rainbowColors` is true.
+     *
+     * @default true
+     */
+    globalHighlight?: boolean;
+    /**
+     * Uses the multi-stop rainbow highlight gradient and disables global highlight attachment.
+     *
+     * @default false
+     */
+    rainbowColors?: boolean;
+    /**
+     * CSS transition duration (ms) for `--vui-glow-starting-angle`. Soft follow by default;
+     * set `0` for instant snap. Tracker writes an unwrapped continuous angle so the
+     * transition does not take the long way across the 0° seam.
+     * Ignored when `autoRotate` is true.
+     *
+     * @default 80
+     */
+    angleLag?: number;
+    /**
+     * Continuously rotates the highlight with a linear CSS animation and ignores the pointer.
+     * Always visible (including coarse pointers); still hidden under `prefers-reduced-motion`.
+     *
+     * @default false
+     */
+    autoRotate?: boolean;
+    /**
+     * Full-turn duration in seconds when `autoRotate` is true.
+     *
+     * @default 2
+     */
+    autoRotateSpeed?: number;
+};
+export declare const Glow: React.FC<GlowProps>;

package/dist/components/glow/glow.guide.json

@@ -0,0 +1,117 @@
+{
+  "name": "Glow",
+  "structure": "<Glow>{children}</Glow>",
+  "summary": "Decorative pointer-driven border highlight on a transparent Surface shell (radius only). Put the visual card as children; a shared rAF tracker paints CSS variables without React re-renders.",
+  "whenToUse": [
+    "Wrap a Surface (or other content) that should highlight toward the pointer",
+    "Grid of glow shells that share one pointer highlight path",
+    "Nested glow inside a padded Surface using radius=\"auto\"",
+    "Decorative continuous spin with autoRotate (no pointer)"
+  ],
+  "whenNotToUse": [
+    "Static borders with no pointer interaction — use Surface border instead",
+    "Accessible status or focus indication — glow is decorative only",
+    "As a replacement for Surface color/padding — compose Surface as children"
+  ],
+  "accessibility": [
+    "Root stays in the accessibility tree; highlight is decorative CSS only",
+    "Glow is not a focus or status indicator — consumer owns accessible names and state",
+    "Pointer mode hides under coarse pointer / no-hover; autoRotate stays visible; both hide under prefers-reduced-motion"
+  ],
+  "antiPatterns": [
+    "Relying on Glow for keyboard focus visibility",
+    "Treating Glow as the visual card (color/padding) instead of composing Surface children",
+    "Setting overflow:hidden on an ancestor Surface when outer glow must remain visible",
+    "Expecting soft bloom Light layer — Glow is border-ring only"
+  ],
+  "related": ["Surface", "Shimmer", "ProgressiveBlur"],
+  "properties": {
+    "react": {
+      "radius": {
+        "description": "Sets corner radius from the Vira radius token scale, a per-corner [top-left, top-right, bottom-right, bottom-left] tuple (0 for square corners), or auto for concentric radii from the nearest ancestor Surface."
+      },
+      "proximity": {
+        "description": "Distance from the surface edge where the glow becomes fully active."
+      },
+      "spread": {
+        "description": "Angular width of the highlighted arc (degrees, used as a unitless CSS number).",
+        "refCss": "spread"
+      },
+      "opacity": {
+        "description": "Resting opacity of the glow when the pointer is outside proximity."
+      },
+      "fitContent": {
+        "description": "Shrinks the root to fit its content (`max-width: fit-content`)."
+      },
+      "borderWidth": {
+        "description": "Width of the masked glow border ring.",
+        "refCss": "border-width"
+      },
+      "borderColor": {
+        "description": "Color of the masked border ring under the highlight.",
+        "refCss": "border-color"
+      },
+      "borderOffset": {
+        "description": "Offset of the glow ring from the surface edge. Negative values place the ring outside.",
+        "refCss": "border-offset"
+      },
+      "glowColor": {
+        "description": "Overrides the glow gradient with a solid color or custom background value. Ignored when `rainbowColors` is true.",
+        "refCss": "color"
+      },
+      "globalHighlight": {
+        "description": "Shares the highlight gradient across cards via `background-attachment: fixed`. Forced off when `rainbowColors` is true."
+      },
+      "rainbowColors": {
+        "description": "Uses the multi-stop rainbow highlight gradient and disables global highlight attachment."
+      },
+      "angleLag": {
+        "description": "CSS transition duration in milliseconds for the pointer-driven starting angle. Soft follow by default; set 0 for instant snap. Ignored when autoRotate is true.",
+        "refCss": "angle-lag"
+      },
+      "autoRotate": {
+        "description": "Continuously rotates the highlight with a linear CSS animation and ignores the pointer. Always visible including on coarse pointers; still hidden under prefers-reduced-motion."
+      },
+      "autoRotateSpeed": {
+        "description": "Full-turn duration in seconds when autoRotate is true.",
+        "refCss": "auto-rotate-speed"
+      }
+    },
+    "css": {
+      "starting-angle": {
+        "description": "Conic gradient start angle in degrees (unitless number). Pointer tracker writes a continuous unwrapped value; autoRotate animates 0→360."
+      },
+      "angle-lag": {
+        "description": "Transition duration for `--vui-glow-starting-angle` (pointer mode).",
+        "refReact": "angleLag"
+      },
+      "auto-rotate-speed": {
+        "description": "Duration of one full auto-rotate turn.",
+        "refReact": "autoRotateSpeed"
+      },
+      "active-opacity": {
+        "description": "Current glow opacity from proximity tracking. Written by the shared tracker."
+      },
+      "spread": {
+        "description": "Angular width of the highlighted arc.",
+        "refReact": "spread"
+      },
+      "border-width": {
+        "description": "Masked glow border ring width.",
+        "refReact": "borderWidth"
+      },
+      "border-color": {
+        "description": "Masked border ring color under the highlight.",
+        "refReact": "borderColor"
+      },
+      "border-offset": {
+        "description": "Glow ring offset from the surface edge.",
+        "refReact": "borderOffset"
+      },
+      "color": {
+        "description": "Glow fill (solid color or gradient).",
+        "refReact": "glowColor"
+      }
+    }
+  }
+}

package/dist/components/glow/glow.js

@@ -0,0 +1,67 @@
+"use client";
+import './glow.css';
+import { clsx } from "../../core/clsx.js";
+import { Surface } from "../surface/surface.js";
+import { registerGlow, unregisterGlow } from "./glow-tracker.js";
+import glow_module_default from "./glow.module.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+//#region src/components/glow/glow.tsx
+var assignRef = (ref, value) => {
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	if (ref) Reflect.set(ref, "current", value);
+};
+var glowGlobalAttr = (rainbowColors, globalHighlight) => {
+	if (rainbowColors) return "false";
+	return globalHighlight ? "true" : "false";
+};
+var Glow = ({ angleLag = 80, autoRotate = false, autoRotateSpeed = 4, borderColor = "var(--global-contrast)", borderOffset = 5, borderWidth = 2, children, className, fitContent = false, globalHighlight = true, glowColor, opacity = 0, proximity = 170, rainbowColors = false, ref, spread = 250, style, radius, ...otherProps }) => {
+	const rootRef = useRef(null);
+	const setRootRef = (node) => {
+		rootRef.current = node;
+		assignRef(ref, node);
+	};
+	useEffect(() => {
+		const el = rootRef.current;
+		if (!el || autoRotate) return;
+		registerGlow({
+			el,
+			proximity,
+			restingOpacity: opacity
+		});
+		return () => {
+			unregisterGlow(el);
+		};
+	}, [
+		autoRotate,
+		proximity,
+		opacity
+	]);
+	const dynamicStyle = {
+		"--vui-glow-spread": spread,
+		"--vui-glow-border-width": `${borderWidth}px`,
+		"--vui-glow-border-color": borderColor,
+		"--vui-glow-border-offset": `${borderOffset}px`,
+		"--vui-glow-angle-lag": `${angleLag}ms`,
+		"--vui-glow-auto-rotate-speed": `${autoRotateSpeed}s`,
+		...glowColor && !rainbowColors && { "--vui-glow-color": glowColor },
+		...style
+	};
+	return /* @__PURE__ */ jsx(Surface, {
+		...otherProps,
+		ref: setRootRef,
+		className: clsx(glow_module_default.Glow, className),
+		style: dynamicStyle,
+		radius,
+		"data-glow-fit-content": fitContent ? "true" : "false",
+		"data-glow-global": glowGlobalAttr(rainbowColors, globalHighlight),
+		"data-glow-rainbow": rainbowColors ? "true" : "false",
+		"data-glow-auto-rotate": autoRotate ? "true" : "false",
+		children
+	});
+};
+//#endregion
+export { Glow };

package/dist/components/glow/glow.module.js

@@ -0,0 +1,8 @@
+//#region src/components/glow/glow.module.css
+var Glow = "viraui__glow-module__Glow_7394e";
+var glow_module_default = {
+	Glow,
+	"vui-glow-auto-rotate": "viraui__glow-module__vui-glow-auto-rotate_Zh-hL"
+};
+//#endregion
+export { Glow, glow_module_default as default };

package/dist/components/glow/index.d.ts

@@ -0,0 +1,3 @@
+export { Glow } from './glow';
+export type { GlowProps } from './glow';
+export { getGlowListenerCount, getGlowRegistrySize } from './glow-tracker';

package/dist/components/index.d.ts

@@ -13,6 +13,7 @@ export * from './dialog';
 export * from './elevator';
 export * from './fieldset';
 export * from './fit-text';
+export * from './glow';
 export * from './icon-button';
 export * from './linear-progress';
 export * from './masonry';

package/dist/components/popover/popover-sheet.js

@@ -1,8 +1,8 @@
 import { ChromeXmark } from "../../internal/chrome-icons/chrome-icons.js";
 import { Text } from "../text/text.js";
 import { Stack } from "../stack/stack.js";
-import { IconButton } from "../icon-button/icon-button.js";
 import { Surface } from "../surface/surface.js";
+import { IconButton } from "../icon-button/icon-button.js";
 import popover_module_default from "./popover.module.js";
 import { Title } from "../title/title.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/select/select.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-select-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-start{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-end{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-list-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-list-padding{syntax:"<length>";inherits:true;initial-value:0}@property --__select-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__select-module__Select_eXv4Y{--vui-select-input-height:var(--space-2x-large);--vui-select-control-group-background:var(--base-1);--vui-select-control-group-color:var(--global-foreground);--vui-select-control-group-border-color:var(--global-contrast);--vui-select-control-group-border-radius:var(--radius-medium);--vui-select-trigger-padding-inline-start:var(--space-small);--vui-select-trigger-padding-inline-end:var(--space-x-small);--vui-field-label-padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2);z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR{&:after{content:" ＊";color:var(--highlight-red)}&:dir(rtl){&:after{content:none}&:before{content:"＊ ";color:var(--highlight-red)}}}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--vui-select-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-select-input-height);padding-inline:var(--vui-select-trigger-padding-inline-start) var(--vui-select-trigger-padding-inline-end);border:1px solid var(--vui-select-control-group-border-color);border-radius:var(--vui-select-control-group-border-radius);background:var(--vui-select-control-group-background);color:var(--vui-select-control-group-color);font:inherit;text-align:start;cursor:pointer;&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--vui-select-control-group-background:var(--global-disabled-background);--vui-select-control-group-border-color:#0000;--vui-select-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2)}.viraui__select-module__SelectPopup_UzGXL{--vui-select-list-border-radius:var(--radius-medium);--vui-select-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__select-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__select-list-appear-offset)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__select-list-appear-offset) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__select-list-appear-offset) * -1) 0}&[data-side=none]{transition:none;scale:1;translate:0;opacity:1}}.viraui__select-module__ScrollArrow_kHlEi{position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--base-1);border:1px solid var(--global-contrast);@container root not style(--vibrancy-enable: initial){background:oklab(from var(--base-1) l a b/80%);backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px))}}.viraui__select-module__ScrollButton_sHBOa{pointer-events:none}.viraui__select-module__ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--vui-select-list-border-radius) var(--vui-select-list-border-radius) 0 0}.viraui__select-module__ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--vui-select-list-border-radius) var(--vui-select-list-border-radius)}.viraui__select-module__List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);scroll-padding-block:var(--vui-select-list-padding);overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.viraui__select-module__Indicator_YNUuz{min-inline-size:var(--space-medium);min-block-size:var(--space-medium);inline-size:fit-content;block-size:fit-content;color:var(--global-primary);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}}@layer viraui.overrides{.viraui__select-module__Value_uWHPX{flex:1 1 auto;min-inline-size:0;overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.viraui__select-module__Option_KgYqz{cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--vibrancy-enable: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-selected]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-select-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-start{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-end{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-list-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-list-padding{syntax:"<length>";inherits:true;initial-value:0}@property --__select-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__select-module__Select_eXv4Y{--vui-select-input-height:var(--space-2x-large);--vui-select-control-group-background:var(--base-1);--vui-select-control-group-color:var(--global-foreground);--vui-select-control-group-border-color:var(--global-contrast);--vui-select-control-group-border-radius:var(--radius-medium);--vui-select-trigger-padding-inline-start:calc(var(--space-small) + var(--space-x-small));--vui-select-trigger-padding-inline-end:var(--space-x-small);--vui-field-label-padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2);z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR{&:after{content:" ＊";color:var(--highlight-red)}&:dir(rtl){&:after{content:none}&:before{content:"＊ ";color:var(--highlight-red)}}}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--vui-select-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-select-input-height);padding-inline:var(--vui-select-trigger-padding-inline-start) var(--vui-select-trigger-padding-inline-end);border:1px solid var(--vui-select-control-group-border-color);border-radius:var(--vui-select-control-group-border-radius);background:var(--vui-select-control-group-background);color:var(--vui-select-control-group-color);font:inherit;text-align:start;cursor:pointer;&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--vui-select-control-group-background:var(--global-disabled-background);--vui-select-control-group-border-color:#0000;--vui-select-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2)}.viraui__select-module__SelectPopup_UzGXL{--vui-select-list-border-radius:var(--radius-medium);--vui-select-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__select-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__select-list-appear-offset)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__select-list-appear-offset) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__select-list-appear-offset) * -1) 0}&[data-side=none]{transition:none;scale:1;translate:0;opacity:1}}.viraui__select-module__ScrollArrow_kHlEi{position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--base-1);border:1px solid var(--global-contrast);@container root not style(--vibrancy-enable: initial){background:oklab(from var(--base-1) l a b/80%);backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px))}}.viraui__select-module__ScrollButton_sHBOa{pointer-events:none}.viraui__select-module__ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--vui-select-list-border-radius) var(--vui-select-list-border-radius) 0 0}.viraui__select-module__ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--vui-select-list-border-radius) var(--vui-select-list-border-radius)}.viraui__select-module__List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);scroll-padding-block:var(--vui-select-list-padding);overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.viraui__select-module__Indicator_YNUuz{min-inline-size:var(--space-medium);min-block-size:var(--space-medium);inline-size:fit-content;block-size:fit-content;color:var(--global-primary);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}}@layer viraui.overrides{.viraui__select-module__Value_uWHPX{flex:1 1 auto;min-inline-size:0;overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.viraui__select-module__Option_KgYqz{cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--vibrancy-enable: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-selected]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}}

package/dist/components/select/select.js

@@ -7,8 +7,8 @@ import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
 import { Stack } from "../stack/stack.js";
 import { Elevator } from "../elevator/elevator.js";
-import { IconButton } from "../icon-button/icon-button.js";
 import { Surface } from "../surface/surface.js";
+import { IconButton } from "../icon-button/icon-button.js";
 import select_module_default from "./select.module.js";
 import { SelectGroup } from "./select-group.js";
 import { SelectOption } from "./select-option.js";

package/dist/components/surface/surface.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-surface-background{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-background-hover{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --vui-surface-overflow{syntax:"<custom-ident>";inherits:false;initial-value:visible}@property --vui-surface-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}.viraui__surface-module__Surface_slEYq{--vui-surface-border-radius-top-left:var(--vui-surface-border-radius);--vui-surface-border-radius-top-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-left:var(--vui-surface-border-radius);--vui-surface-background-hover:var(--vui-surface-background);position:relative;overflow:var(--vui-surface-overflow);box-sizing:border-box;background:var(--vui-surface-background);border-radius:var(--vui-surface-border-radius-top-left) var(--vui-surface-border-radius-top-right) var(--vui-surface-border-radius-bottom-right) var(--vui-surface-border-radius-bottom-left);border:0;@container root not style(--vibrancy-enable: initial){&[data-vibrant]{background:light-dark(oklab(from var(--vui-surface-background) l a b/60%),oklab(from var(--vui-surface-background) l a b/80%))}}&[data-surface-has-padding=true]{padding:var(--vui-surface-padding-block-start) var(--vui-surface-padding-inline-end) var(--vui-surface-padding-block-end) var(--vui-surface-padding-inline-start)}&[data-surface-border]{border-style:var(--vui-surface-border-style);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--vui-surface-background-hover)}}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-surface-background{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-background-hover{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --vui-surface-overflow{syntax:"<custom-ident>";inherits:false;initial-value:visible}@property --vui-surface-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}.viraui__surface-module__Surface_slEYq{--vui-surface-border-radius-top-left:var(--vui-surface-border-radius);--vui-surface-border-radius-top-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-left:var(--vui-surface-border-radius);--vui-surface-background-hover:var(--vui-surface-background);position:relative;overflow:var(--vui-surface-overflow);box-sizing:border-box;background:var(--vui-surface-background);border-radius:var(--vui-surface-border-radius-top-left) var(--vui-surface-border-radius-top-right) var(--vui-surface-border-radius-bottom-right) var(--vui-surface-border-radius-bottom-left);border:0;&[data-surface-color=primary]{--vui-surface-background:light-dark(oklab(from var(--global-primary) l a b/20%),oklab(from var(--global-primary) l a b/10%))}&[data-surface-hover-color=primary]{--vui-surface-background-hover:light-dark(oklab(from var(--global-primary) l a b/20%),oklab(from var(--global-primary) l a b/10%))}@container root not style(--vibrancy-enable: initial){&[data-vibrant]{background:light-dark(oklab(from var(--vui-surface-background) l a b/60%),oklab(from var(--vui-surface-background) l a b/80%))}}&[data-surface-has-padding=true]{padding:var(--vui-surface-padding-block-start) var(--vui-surface-padding-inline-end) var(--vui-surface-padding-block-end) var(--vui-surface-padding-inline-start)}&[data-surface-border]{border-style:var(--vui-surface-border-style);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--vui-surface-background-hover)}}}}

package/dist/components/surface/surface.d.ts

@@ -3,7 +3,9 @@ import { SurfacePadding, SurfaceRadiusInput } from './surface-radius-context';
 import type * as React from 'react';
 /** Base ramp layer for nested surfaces; clamped to 1–3 at runtime. */
 type SurfaceBaseLevel = 1 | 2 | 3;
-type SurfaceColor = string | SurfaceBaseLevel;
+/** Named surface color tokens resolved via `data-surface-color` / `data-surface-hover-color` CSS hooks. */
+type SurfaceColorToken = 'primary';
+type SurfaceColor = string | SurfaceBaseLevel | SurfaceColorToken;
 /**
  * Public Surface props.
  *
@@ -26,13 +28,15 @@ export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>
      */
     ref?: React.Ref<HTMLElement>;
     /**
-     * Sets the resting background using a base ramp layer (`1`–`3`) or a literal CSS color value.
+     * Sets the resting background using a base ramp layer (`1`–`3`), a literal CSS color value, or the named token
+     * `primary` (`data-surface-color="primary"`; CSS owns light/dark opacity via `--global-primary`).
      *
      * @default No background.
      */
     color?: SurfaceColor;
     /**
-     * Sets the hover background on hover-capable pointers using a base ramp layer (`1`–`3`) or literal CSS value.
+     * Sets the hover background on hover-capable pointers using a base ramp layer (`1`–`3`), a literal CSS value, or the
+     * named token `primary` (`data-surface-hover-color="primary"`; CSS owns light/dark opacity via `--global-primary`).
      *
      * @default No hover color override.
      */

package/dist/components/surface/surface.guide.json

@@ -40,10 +40,10 @@
         "description": "Sets the CSS border style when `border` is set."
       },
       "color": {
-        "description": "Sets the resting background using a base ramp layer (`1`–`3`) or a literal CSS color value."
+        "description": "Sets the resting background using a base ramp layer (`1`–`3`), a literal CSS color value, or the named token `primary` (`data-surface-color=\"primary\"`; CSS owns light/dark opacity via `--global-primary`)."
       },
       "hoverColor": {
-        "description": "Sets the hover background on hover-capable pointers using a base ramp layer (`1`–`3`) or literal CSS value."
+        "description": "Sets the hover background on hover-capable pointers using a base ramp layer (`1`–`3`), a literal CSS value, or the named token `primary` (`data-surface-hover-color=\"primary\"`; CSS owns light/dark opacity via `--global-primary`)."
       },
       "hPadding": {
         "description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."

package/dist/components/surface/surface.js

@@ -7,6 +7,7 @@ import surface_module_default from "./surface.module.js";
 import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/surface/surface.tsx
+var isSurfaceColorToken = (value) => value === "primary";
 var clampSurfaceBaseLevel = (value) => {
 	if (value <= 1) return 1;
 	if (value >= 3) return 3;
@@ -30,8 +31,8 @@ var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hove
 		vPadding
 	});
 	const dynamicStyle = {
-		"--vui-surface-background": toSurfaceColor(color ?? "none"),
-		...hasHoverColor && { "--vui-surface-background-hover": toSurfaceColor(hoverColor) },
+		...!isSurfaceColorToken(color) && { "--vui-surface-background": toSurfaceColor(color ?? "none") },
+		...hasHoverColor && !isSurfaceColorToken(hoverColor) && { "--vui-surface-background-hover": toSurfaceColor(hoverColor) },
 		...border && { "--vui-surface-border-style": borderStyle },
 		...overflow && { "--vui-surface-overflow": overflow },
 		...radiusStyle,
@@ -47,6 +48,8 @@ var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hove
 			...otherProps,
 			...border && { "data-surface-border": border },
 			...hasAutoRadius && { "data-surface-radius": "auto" },
+			...isSurfaceColorToken(color) && { "data-surface-color": color },
+			...isSurfaceColorToken(hoverColor) && { "data-surface-hover-color": hoverColor },
 			"data-surface-has-hover-color": hasHoverColor ? "true" : "false",
 			"data-surface-has-padding": hasPadding ? "true" : "false",
 			className: clsx(surface_module_default.Surface, className),

package/dist/components/text/text.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-text-align{syntax:"*";inherits:false;initial-value:start}@property --vui-text-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-text-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-text-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-text-font-weight{syntax:"<number>";inherits:false;initial-value:400}@property --vui-text-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-text-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-text-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-text-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-text-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-text-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --vui-text-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --__text-medium{syntax:"*";inherits:false;initial-value:0}.viraui__text-module__Text_bS8kv{--__text-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--vui-text-font-family:var(--font-family-body);--vui-text-font-size:clamp(var(--font-scale-body-small),var(--__text-medium),var(--font-scale-body-medium));--vui-text-line-height:var(--font-leading-standard);margin:0;min-inline-size:0;max-inline-size:var(--vui-text-max-width);font-family:var(--vui-text-font-family);font-size:var(--vui-text-font-size);line-height:var(--vui-text-line-height);text-align:var(--vui-text-align);white-space:var(--vui-text-white-space);word-break:break-word;color:var(--global-foreground);font-weight:var(--vui-text-font-weight);font-stretch:calc(var(--vui-text-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-text-font-weight),"wdth" var(--vui-text-font-width),"opsz" var(--vui-text-font-opsz);text-box:var(--vui-text-trim) var(--vui-text-trim-type);&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--vui-text-padding-block-start) var(--vui-text-padding-inline-end) var(--vui-text-padding-block-end) var(--vui-text-padding-inline-start)}&[data-text-family=mono]{--vui-text-font-family:var(--font-family-mono)}&[data-text-size=x-large]{--vui-text-font-size:clamp(var(--font-scale-body-large),calc(var(--__text-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-body-x-large))}&[data-text-size=large]{--vui-text-font-size:clamp(var(--font-scale-body-medium),calc(var(--__text-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-body-large))}&[data-text-size=small]{--vui-text-font-size:clamp(var(--font-scale-body-x-small),calc(var(--__text-medium) * pow(var(--font-heading-typescale), -0.1)),var(--font-scale-body-small))}&[data-text-size=x-small]{--vui-text-font-size:var(--font-scale-body-x-small)}&[data-text-weight=light]{--vui-text-font-weight:200}&[data-text-weight=semibold]{--vui-text-font-weight:600}&[data-text-weight=bold]{--vui-text-font-weight:800}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--vui-text-literal-color)}&[data-text-line-height=none]{--vui-text-line-height:0}&[data-text-line-height=x-small]{--vui-text-line-height:var(--font-leading-x-small)}&[data-text-line-height=small]{--vui-text-line-height:var(--font-leading-small)}&[data-text-line-height=large]{--vui-text-line-height:var(--font-leading-large)}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-text-align{syntax:"*";inherits:false;initial-value:start}@property --vui-text-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-text-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-text-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-text-font-weight{syntax:"<number>";inherits:false;initial-value:400}@property --vui-text-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-text-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-text-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-text-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-text-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-text-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --vui-text-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --__text-medium{syntax:"*";inherits:false;initial-value:0}.viraui__text-module__Text_bS8kv{--__text-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--vui-text-font-family:var(--font-family-body);--vui-text-font-size:clamp(var(--font-scale-body-small),var(--__text-medium),var(--font-scale-body-medium));--vui-text-line-height:var(--font-leading-standard);margin:0;min-inline-size:0;max-inline-size:var(--vui-text-max-width);font-family:var(--vui-text-font-family);font-size:var(--vui-text-font-size);line-height:var(--vui-text-line-height);text-align:var(--vui-text-align);white-space:var(--vui-text-white-space);word-break:break-word;font-weight:var(--vui-text-font-weight);font-stretch:calc(var(--vui-text-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-text-font-weight),"wdth" var(--vui-text-font-width),"opsz" var(--vui-text-font-opsz);text-box:var(--vui-text-trim) var(--vui-text-trim-type);&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--vui-text-padding-block-start) var(--vui-text-padding-inline-end) var(--vui-text-padding-block-end) var(--vui-text-padding-inline-start)}&[data-text-family=mono]{--vui-text-font-family:var(--font-family-mono)}&[data-text-size=x-large]{--vui-text-font-size:clamp(var(--font-scale-body-large),calc(var(--__text-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-body-x-large))}&[data-text-size=large]{--vui-text-font-size:clamp(var(--font-scale-body-medium),calc(var(--__text-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-body-large))}&[data-text-size=small]{--vui-text-font-size:clamp(var(--font-scale-body-x-small),calc(var(--__text-medium) * pow(var(--font-heading-typescale), -0.1)),var(--font-scale-body-small))}&[data-text-size=x-small]{--vui-text-font-size:var(--font-scale-body-x-small)}&[data-text-weight=light]{--vui-text-font-weight:200}&[data-text-weight=semibold]{--vui-text-font-weight:600}&[data-text-weight=bold]{--vui-text-font-weight:800}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--vui-text-literal-color)}&[data-text-line-height=none]{--vui-text-line-height:0}&[data-text-line-height=x-small]{--vui-text-line-height:var(--font-leading-x-small)}&[data-text-line-height=small]{--vui-text-line-height:var(--font-leading-small)}&[data-text-line-height=large]{--vui-text-line-height:var(--font-leading-large)}}}

package/dist/components/title/title.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --__title-medium{syntax:"*";inherits:false;initial-value:0}.viraui__title-module__Title_CXMUX{--__title-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--vui-title-font-size:clamp(var(--font-scale-h2),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1));--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-standard);--vui-title-letter-spacing:-0.03em;margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--vui-title-letter-spacing);text-align:var(--vui-title-align);white-space:var(--vui-title-white-space);word-break:break-word;color:var(--global-foreground);font-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-title-font-weight),"wdth" var(--vui-title-font-width),"opsz" var(--vui-title-font-opsz);text-box:var(--vui-title-trim) var(--vui-title-trim-type);display:inline-flex;&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--vui-title-padding-block-start) var(--vui-title-padding-inline-end) var(--vui-title-padding-block-end) var(--vui-title-padding-inline-start)}&[data-title-size=display]{--vui-title-font-size:clamp(var(--font-scale-h1),calc(var(--font-scale-h1) + 4.643cqi - 0.9286rem),var(--font-scale-display))}&[data-title-size="2"]{--vui-title-font-size:clamp(var(--font-scale-h3),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 4)),var(--font-scale-h2))}&[data-title-size="3"]{--vui-title-font-size:clamp(var(--font-scale-h4),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 3)),var(--font-scale-h3))}&[data-title-size="4"]{--vui-title-font-size:clamp(var(--font-scale-h5),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-h4))}&[data-title-size="5"]{--vui-title-font-size:clamp(var(--font-scale-h6),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-h5));--vui-title-letter-spacing:-0.02em}&[data-title-size="6"]{--vui-title-font-size:clamp(var(--font-scale-body-medium),var(--__title-medium),var(--font-scale-h6));--vui-title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--vui-title-literal-color)}&[data-title-line-height=none]{--vui-title-line-height:0}&[data-title-line-height=x-small]{--vui-title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--vui-title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--vui-title-line-height:var(--font-leading-large)}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --__title-medium{syntax:"*";inherits:false;initial-value:0}.viraui__title-module__Title_CXMUX{--__title-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--vui-title-font-size:clamp(var(--font-scale-h2),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1));--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-standard);--vui-title-letter-spacing:-0.03em;margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--vui-title-letter-spacing);text-align:var(--vui-title-align);white-space:var(--vui-title-white-space);word-break:break-word;font-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-title-font-weight),"wdth" var(--vui-title-font-width),"opsz" var(--vui-title-font-opsz);text-box:var(--vui-title-trim) var(--vui-title-trim-type);display:inline-flex;&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--vui-title-padding-block-start) var(--vui-title-padding-inline-end) var(--vui-title-padding-block-end) var(--vui-title-padding-inline-start)}&[data-title-size=display]{--vui-title-font-size:clamp(var(--font-scale-h1),calc(var(--font-scale-h1) + 4.643cqi - 0.9286rem),var(--font-scale-display))}&[data-title-size="2"]{--vui-title-font-size:clamp(var(--font-scale-h3),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 4)),var(--font-scale-h2))}&[data-title-size="3"]{--vui-title-font-size:clamp(var(--font-scale-h4),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 3)),var(--font-scale-h3))}&[data-title-size="4"]{--vui-title-font-size:clamp(var(--font-scale-h5),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-h4))}&[data-title-size="5"]{--vui-title-font-size:clamp(var(--font-scale-h6),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-h5));--vui-title-letter-spacing:-0.02em}&[data-title-size="6"]{--vui-title-font-size:clamp(var(--font-scale-body-medium),var(--__title-medium),var(--font-scale-h6));--vui-title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--vui-title-literal-color)}&[data-title-line-height=none]{--vui-title-line-height:0}&[data-title-line-height=x-small]{--vui-title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--vui-title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--vui-title-line-height:var(--font-leading-large)}}}

package/dist/index.js

@@ -25,11 +25,13 @@ import { getElevationProps } from "./core/elevation/get-elevation-props.js";
 import { Elevator } from "./components/elevator/elevator.js";
 import { Fieldset } from "./components/fieldset/fieldset.js";
 import { FitText } from "./components/fit-text/fit-text.js";
+import { Surface } from "./components/surface/surface.js";
+import { getGlowListenerCount, getGlowRegistrySize } from "./components/glow/glow-tracker.js";
+import { Glow } from "./components/glow/glow.js";
 import { IconButton } from "./components/icon-button/icon-button.js";
 import { IconButtonLink } from "./components/icon-button/icon-button-link.js";
 import { LinearProgress } from "./components/linear-progress/linear-progress.js";
 import { Masonry } from "./components/masonry/masonry.js";
-import { Surface } from "./components/surface/surface.js";
 import { MenuCheckboxItem } from "./components/menu/menu-checkbox-item.js";
 import { MenuGroup } from "./components/menu/menu-group.js";
 import { MenuItem } from "./components/menu/menu-item.js";
@@ -63,4 +65,4 @@ import { ToggleGroup } from "./components/toggle-group/toggle-group.js";
 import { Typewriter } from "./components/typewriter/typewriter.js";
 import { TooltipContent } from "./components/tooltip/tooltip-content.js";
 import { Tooltip, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
-export { Accordion, Annotate, Autocomplete, Avatar, AvatarGroup, Badge, Bleed, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, IconButton, IconButtonLink, LinearProgress, Masonry, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps };
+export { Accordion, Annotate, Autocomplete, Avatar, AvatarGroup, Badge, Bleed, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, Glow, IconButton, IconButtonLink, LinearProgress, Masonry, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps, getGlowListenerCount, getGlowRegistrySize };

package/dist/preflight.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.preflight{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-mode{syntax:"<color>";initial-value:#000;inherits:true}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b/0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-mode:contrast-color(var(--global-background));font-size:var(--font-root-size);box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal}*{@container root not style(--corner-shape-enable: initial){corner-shape:var(--corner-shape-squircle)}}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}:focus-visible{outline:var(--outline);outline-offset:var(--outline-offset)}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),system-ui,sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg{display:inline-flex;vertical-align:middle;&:not([fill]){fill:currentcolor}}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklch(0% 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}}@layer viraui.preflight{[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),#0000 calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation-hover="2"]:hover,[data-elevation-hover="3"]:hover,[data-elevation-hover="4"]:hover,[data-elevation="1"],[data-elevation="2"],[data-elevation="3"],[data-elevation="4"]{box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) var(--shadow-blur-1) oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) var(--shadow-blur-2) oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) var(--shadow-blur-3) oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) var(--shadow-blur-4) oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:2px;--y3:4px;--y4:7px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:1px;--shadow-blur-2:2px;--shadow-blur-3:2px;--shadow-blur-4:3px}[data-elevation-hover="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:0px;--x2:2px;--x3:4px;--x4:7px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:1px;--y2:5px;--y3:11px;--y4:19px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:3px;--shadow-blur-2:5px;--shadow-blur-3:6px;--shadow-blur-4:8px}[data-elevation-hover="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]):hover,[data-elevation="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-blur-3:7px}[data-elevation-hover="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:1px;--x2:5px;--x3:11px;--x4:19px}[data-elevation-hover="2"]:where([data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=right]){--shadow-blur-3:6px}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:4px;--shadow-blur-2:7px;--shadow-blur-3:10px;--shadow-blur-4:12px}[data-elevation-hover="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:2px;--x2:7px;--x3:16px;--x4:29px}[data-elevation-hover="3"]:where([data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=right]){--x2:10px;--x3:22px;--x4:39px;--shadow-blur-1:5px;--shadow-blur-2:10px;--shadow-blur-3:13px;--shadow-blur-4:15px}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:8px;--shadow-blur-2:14px;--shadow-blur-3:20px;--shadow-blur-4:23px}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=left]):hover,[data-elevation="4"]:where([data-elevation-direction=left]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:15px;--x3:33px;--x4:58px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:14px;--x3:33px;--x4:58px}}@layer viraui.preflight{[data-grow=true]{--vira-flex-grow:1;flex-grow:1}[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=true]{--vira-flex-shrink:1;flex-shrink:1}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/12%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em;font-size:1em;font-family:var(--font-family-mono)}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-mode=dark]{color-scheme:dark}[data-mode=light]{color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{@container root style(--is-light-mode: black){color-scheme:dark}@container root style(--is-light-mode: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--vibrancy-enable: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-mode: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.preflight{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-mode{syntax:"<color>";initial-value:#000;inherits:true}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b/0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-mode:contrast-color(var(--global-background));font-size:var(--font-root-size);box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal}*{@container root not style(--corner-shape-enable: initial){corner-shape:var(--corner-shape-squircle)}}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}:focus-visible{outline:var(--outline);outline-offset:var(--outline-offset)}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),system-ui,sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg{display:inline-flex;vertical-align:middle;&:not([fill]){fill:currentcolor}}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklch(0% 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}}@layer viraui.preflight{[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),#0000 calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation-hover="2"]:hover,[data-elevation-hover="3"]:hover,[data-elevation-hover="4"]:hover,[data-elevation="1"],[data-elevation="2"],[data-elevation="3"],[data-elevation="4"]{box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) var(--shadow-blur-1) oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) var(--shadow-blur-2) oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) var(--shadow-blur-3) oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) var(--shadow-blur-4) oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:2px;--y3:4px;--y4:7px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:1px;--shadow-blur-2:2px;--shadow-blur-3:2px;--shadow-blur-4:3px}[data-elevation-hover="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:0px;--x2:2px;--x3:4px;--x4:7px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:1px;--y2:5px;--y3:11px;--y4:19px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:3px;--shadow-blur-2:5px;--shadow-blur-3:6px;--shadow-blur-4:8px}[data-elevation-hover="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]):hover,[data-elevation="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-blur-3:7px}[data-elevation-hover="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:1px;--x2:5px;--x3:11px;--x4:19px}[data-elevation-hover="2"]:where([data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=right]){--shadow-blur-3:6px}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:4px;--shadow-blur-2:7px;--shadow-blur-3:10px;--shadow-blur-4:12px}[data-elevation-hover="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:2px;--x2:7px;--x3:16px;--x4:29px}[data-elevation-hover="3"]:where([data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=right]){--x2:10px;--x3:22px;--x4:39px;--shadow-blur-1:5px;--shadow-blur-2:10px;--shadow-blur-3:13px;--shadow-blur-4:15px}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:8px;--shadow-blur-2:14px;--shadow-blur-3:20px;--shadow-blur-4:23px}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=left]):hover,[data-elevation="4"]:where([data-elevation-direction=left]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:15px;--x3:33px;--x4:58px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:14px;--x3:33px;--x4:58px}}@layer viraui.preflight{[data-grow=true]{--vira-flex-grow:1;flex-grow:1}[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=true]{--vira-flex-shrink:1;flex-shrink:1}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/12%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em;font-size:1em;font-family:var(--font-family-mono)}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-mode=dark]{color:var(--global-foreground);color-scheme:dark}[data-mode=light]{color:var(--global-foreground);color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{color:var(--global-foreground);@container root style(--is-light-mode: black){color-scheme:dark}@container root style(--is-light-mode: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--vibrancy-enable: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-mode: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.0.3",
+  "version": "2026.0.5",
   "private": false,
   "files": [
     "dist"
@@ -35,7 +35,7 @@
     "unplugin-dts": "1.0.3",
     "vite": "8.1.4",
     "vite-plugin-static-copy": "4.1.1",
-    "@viraui/foundation": "2026.0.3",
+    "@viraui/foundation": "2026.0.5",
     "@viraui/icons": "2026.0.0",
     "@viraui/postcss-config": "2026.0.0",
     "@viraui/tsconfig": "2026.0.0"