@viraui/react 0.0.21 → 0.0.22

package/dist/catalog.json

@@ -119,7 +119,7 @@
     {
       "id": "surface",
       "name": "Surface",
-      "summary": "Presentational container with token background, optional border, radius, and padding.",
+      "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners.",
       "guidePath": "./components/surface/surface.guide.json"
     },
     {
@@ -128,6 +128,18 @@
       "summary": "Decorative SVG pulsing loading indicator used inside interactive components.",
       "guidePath": "./components/spinner/spinner.guide.json"
     },
+    {
+      "id": "static-noise",
+      "name": "StaticNoise",
+      "summary": "Decorative SVG turbulence noise overlay for textured surfaces and hero sections.",
+      "guidePath": "./components/static-noise/static-noise.guide.json"
+    },
+    {
+      "id": "progressive-blur",
+      "name": "ProgressiveBlur",
+      "summary": "Decorative stacked backdrop-filter overlay that ramps blur from one edge toward the opposite edge.",
+      "guidePath": "./components/progressive-blur/progressive-blur.guide.json"
+    },
     {
       "id": "text",
       "name": "Text",

package/dist/components/avatar/avatar.js

@@ -1,10 +1,10 @@
 import './avatar.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import avatar_module_default from "./avatar.module.js";
 import { Text } from "../text/text.js";
 import { Skeleton } from "../skeleton/skeleton.js";
 import { Avatar } from "@base-ui/react/avatar";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/avatar/avatar.tsx
 var fallbackTextSizeByAvatarSize = {

package/dist/components/avatar-group/avatar-group.js

@@ -1,4 +1,5 @@
 import './avatar-group.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Avatar } from "../avatar/avatar.js";
 import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
@@ -6,11 +7,10 @@ import avatar_group_module_default from "./avatar-group.module.js";
 import { Stack } from "../stack/stack.js";
 import { Text } from "../text/text.js";
 import { Surface } from "../surface/surface.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/avatar-group/avatar-group.tsx
 var getAvatarKey = (avatar, index) => `${avatar.src ?? "fallback"}-${typeof avatar.fallback === "string" ? avatar.fallback : "node"}-${index}`;
-var AvatarGroup = ({ avatars, className, direction = "horizontal", gap = "x-small", maxVisible, overflowText, size = "small", style, ...otherProps }) => {
+var AvatarGroup = ({ avatars, className, direction = "horizontal", gap = "x-small", maxVisible, overflowText, ref, size = "small", style, ...otherProps }) => {
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const isOverflowing = typeof maxVisible === "number" && maxVisible > 0 && avatars.length > maxVisible;
 	const hasOverflow = isOverflowing && overflowText !== void 0 && overflowText !== null;
@@ -22,6 +22,7 @@ var AvatarGroup = ({ avatars, className, direction = "horizontal", gap = "x-smal
 	return /* @__PURE__ */ jsxs("div", {
 		...componentProps,
 		...intrinsicAttributes,
+		ref,
 		className: clsx(avatar_group_module_default.AvatarGroup, className),
 		"data-direction": direction,
 		"data-gap": gap,

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

@@ -1,7 +1,7 @@
 "use client";
 import './basic-input.css';
+import { clsx } from "../../core/clsx.js";
 import basic_input_module_default from "./basic-input.module.js";
-import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Field } from "@base-ui/react/field";

package/dist/components/basic-input/field-label.js

@@ -1,8 +1,8 @@
 "use client";
 import './field-label.css';
+import { clsx } from "../../core/clsx.js";
 import { Text } from "../text/text.js";
 import field_label_module_default from "./field-label.module.js";
-import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/basic-input/field-label.tsx
 /**

package/dist/components/button/button.js

@@ -1,9 +1,9 @@
 "use client";
 import './button.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Spinner } from "../spinner/spinner.js";
 import button_module_default from "./button.module.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 import * as React from "react";

package/dist/components/checkbox/checkbox.js

@@ -1,12 +1,12 @@
 "use client";
 import './checkbox.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Stack } from "../stack/stack.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
 import checkbox_module_default from "./checkbox.module.js";
 import { Icon } from "../icon/icon.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox, Field } from "@base-ui/react";
 //#region src/components/checkbox/checkbox.tsx

package/dist/components/chip/chip.js

@@ -1,9 +1,9 @@
 "use client";
 import './chip.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Stack } from "../stack/stack.js";
 import chip_module_default from "./chip.module.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 import "react";

package/dist/components/clamp-text/clamp-text.js

@@ -1,8 +1,8 @@
 "use client";
 import './clamp-text.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import clamp_text_module_default from "./clamp-text.module.js";
-import { clsx } from "clsx";
 import { useRender } from "@base-ui/react/use-render";
 import { useMemo } from "react";
 //#region src/components/clamp-text/clamp-text.tsx

package/dist/components/icon/icon.js

@@ -1,7 +1,7 @@
 import './icon.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import icon_module_default from "./icon.module.js";
-import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 import { generatedDefaultIconVariant, generatedIconRegistry } from "#internal-icons/icon-registry";
 //#region src/components/icon/icon.tsx

package/dist/components/index.d.ts

@@ -19,5 +19,7 @@ export * from './skeleton';
 export * from './stack';
 export * from './surface';
 export * from './spinner';
+export * from './static-noise';
+export * from './progressive-blur';
 export * from './text';
 export * from './title';

package/dist/components/linear-progress/linear-progress.js

@@ -1,11 +1,11 @@
 "use client";
 import './linear-progress.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Stack } from "../stack/stack.js";
 import { Text } from "../text/text.js";
 import { FieldLabel } from "../basic-input/field-label.js";
 import linear_progress_module_default from "./linear-progress.module.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Progress } from "@base-ui/react/progress";
 //#region src/components/linear-progress/linear-progress.tsx

package/dist/components/masonry/masonry-item.js

@@ -1,7 +1,7 @@
 "use client";
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import masonry_module_default from "./masonry.module.js";
-import { clsx } from "clsx";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/masonry/masonry-item.tsx
 var MasonryItem = ({ className, ref, render, spanAll = false, ...otherProps }) => {

package/dist/components/masonry/masonry.js

@@ -1,10 +1,10 @@
 "use client";
 import './masonry.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
 import masonry_module_default from "./masonry.module.js";
 import { MasonryItem } from "./masonry-item.js";
-import { clsx } from "clsx";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/masonry/masonry.tsx
 var MasonryRoot = ({ children, className, columnCount = 4, columnFill = "balance", columnRuleStyle, columnRuleWidth, columnWidth, gap = "large", ref, render, style, ...otherProps }) => {

package/dist/components/progressive-blur/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressiveBlur } from './progressive-blur';
+export type { ProgressiveBlurProps } from './progressive-blur';

package/dist/components/progressive-blur/progressive-blur.css

@@ -0,0 +1 @@
+.progressive-blur-module_ProgressiveBlur_eIxTK{--progressive-blur:16px;pointer-events:none}.progressive-blur-module_Layer_zbzMS{position:absolute;inset:0;backdrop-filter:blur(calc(var(--progressive-blur) * var(--progressive-blur-factor)));mask-image:var(--progressive-blur-mask-image);.progressive-blur-module_ProgressiveBlur_eIxTK[data-direction=top] &{--progressive-blur-mask-image:linear-gradient(to top,var(--progressive-blur-mask-gradient))}.progressive-blur-module_ProgressiveBlur_eIxTK[data-direction=right] &{--progressive-blur-mask-image:linear-gradient(to right,var(--progressive-blur-mask-gradient))}.progressive-blur-module_ProgressiveBlur_eIxTK[data-direction=bottom] &{--progressive-blur-mask-image:linear-gradient(to bottom,var(--progressive-blur-mask-gradient))}.progressive-blur-module_ProgressiveBlur_eIxTK[data-direction=left] &{--progressive-blur-mask-image:linear-gradient(to left,var(--progressive-blur-mask-gradient))}}

package/dist/components/progressive-blur/progressive-blur.d.ts

@@ -0,0 +1,38 @@
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { ProgressiveBlurDirection, ProgressiveBlurEasing } from './progressive-blur.utils';
+import type * as React from 'react';
+/**
+ * Public ProgressiveBlur props.
+ *
+ * Includes standard `div` attributes such as `id`, `className`, and event handlers,
+ * plus Vira-owned progressive backdrop blur controls.
+ *
+ * @default Native div pass-through props keep React defaults.
+ */
+export type ProgressiveBlurProps = React.ComponentPropsWithRef<'div'> & IntrinsicViraProps & {
+    /**
+     * Sets the maximum blur radius applied to the first layer at the selected edge.
+     *
+     * @default '16px'
+     */
+    blur?: string;
+    /**
+     * Selects the edge where maximum blur starts and fades toward the opposite edge.
+     *
+     * @default 'bottom'
+     */
+    direction?: ProgressiveBlurDirection;
+    /**
+     * Selects the easing curve used to distribute blur factors across internal layers.
+     *
+     * @default 'exponential'
+     */
+    easing?: ProgressiveBlurEasing;
+    /**
+     * Sets the number of internal blur layers. Values are clamped to `2..16`.
+     *
+     * @default Varies by easing: linear `6`, ease-in/out `8`, ease-in-out `10`, exponential `8`.
+     */
+    steps?: number;
+};
+export declare const ProgressiveBlur: React.FC<ProgressiveBlurProps>;

package/dist/components/progressive-blur/progressive-blur.guide.json

@@ -0,0 +1,25 @@
+{
+  "name": "ProgressiveBlur",
+  "summary": "Decorative stacked backdrop-filter overlay that ramps blur from one edge toward the opposite edge.",
+  "whenToUse": [
+    "Edge scrims on cards, sheets, heroes, or scroll regions where content should fade into blur",
+    "Glass or vibrant surfaces that need directional legibility without a hard blur cutoff",
+    "Decorative atmosphere where the parent owns semantics and layout positioning"
+  ],
+  "whenNotToUse": [
+    "Standalone loading or status feedback without a labeled parent region",
+    "Large full-viewport stacks with many simultaneous high-radius blur layers",
+    "Cases where a single uniform backdrop blur is sufficient"
+  ],
+  "accessibility": [
+    "ProgressiveBlur is decorative — the root renders with aria-hidden by default",
+    "Parent surface or region must expose any meaningful label or busy state",
+    "Consumer owns position, inset, z-index, and sizing for the overlay placement"
+  ],
+  "antiPatterns": [
+    "Stacking many full-viewport ProgressiveBlur instances on one screen",
+    "Driving layout size or scroll behavior from inside the overlay component",
+    "Embedding layout positioning rules inside the component stylesheet"
+  ],
+  "related": ["Surface", "StaticNoise"]
+}

package/dist/components/progressive-blur/progressive-blur.js

@@ -0,0 +1,39 @@
+import './progressive-blur.css';
+import { clsx } from "../../core/clsx.js";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import progressive_blur_module_default from "./progressive-blur.module.js";
+import { formatProgressiveBlurMaskGradient, getProgressiveBlurFactor, getProgressiveBlurMaskStops, resolveProgressiveBlurSteps } from "./progressive-blur.utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/progressive-blur/progressive-blur.tsx
+var ProgressiveBlur = ({ blur = "16px", className, direction = "bottom", easing = "exponential", ref, steps, style, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const resolvedSteps = resolveProgressiveBlurSteps(steps, easing);
+	const dynamicStyle = {
+		"--progressive-blur": blur,
+		...style
+	};
+	const layers = Array.from({ length: resolvedSteps }, (_, layerIndex) => {
+		const factor = getProgressiveBlurFactor(easing, layerIndex, resolvedSteps);
+		const maskGradient = formatProgressiveBlurMaskGradient(getProgressiveBlurMaskStops(layerIndex, resolvedSteps));
+		return /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: progressive_blur_module_default.Layer,
+			style: {
+				"--progressive-blur-factor": factor,
+				"--progressive-blur-mask-gradient": maskGradient
+			}
+		}, layerIndex);
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...componentProps,
+		...intrinsicAttributes,
+		ref,
+		"aria-hidden": "true",
+		className: clsx(progressive_blur_module_default.ProgressiveBlur, className),
+		"data-direction": direction,
+		style: dynamicStyle,
+		children: layers
+	});
+};
+//#endregion
+export { ProgressiveBlur };

package/dist/components/progressive-blur/progressive-blur.module.js

@@ -0,0 +1,6 @@
+var progressive_blur_module_default = {
+	ProgressiveBlur: "progressive-blur-module_ProgressiveBlur_eIxTK",
+	Layer: "progressive-blur-module_Layer_zbzMS"
+};
+//#endregion
+export { progressive_blur_module_default as default };

package/dist/components/progressive-blur/progressive-blur.utils.d.ts

@@ -0,0 +1,14 @@
+export type ProgressiveBlurDirection = 'top' | 'right' | 'bottom' | 'left';
+export type ProgressiveBlurEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'exponential';
+export declare const PROGRESSIVE_BLUR_MIN_STEPS = 2;
+export declare const PROGRESSIVE_BLUR_MAX_STEPS = 16;
+export declare const resolveProgressiveBlurSteps: (steps: number | undefined, easing: ProgressiveBlurEasing) => number;
+export declare const getProgressiveBlurFactor: (easing: ProgressiveBlurEasing, layerIndex: number, totalSteps: number) => number;
+export type ProgressiveBlurMaskStops = {
+    p1: number;
+    p2: number;
+    p3: number;
+    p4: number;
+};
+export declare const getProgressiveBlurMaskStops: (layerIndex: number, totalSteps: number) => ProgressiveBlurMaskStops;
+export declare const formatProgressiveBlurMaskGradient: (stops: ProgressiveBlurMaskStops) => string;

package/dist/components/progressive-blur/progressive-blur.utils.js

@@ -0,0 +1,40 @@
+var DEFAULT_STEPS_BY_EASING = {
+	linear: 6,
+	"ease-in": 8,
+	"ease-out": 8,
+	"ease-in-out": 10,
+	exponential: 8
+};
+var resolveProgressiveBlurSteps = (steps, easing) => {
+	const resolved = steps ?? DEFAULT_STEPS_BY_EASING[easing];
+	return Math.min(16, Math.max(2, resolved));
+};
+var getProgressiveBlurFactor = (easing, layerIndex, totalSteps) => {
+	if (easing === "exponential") return .5 ** layerIndex;
+	const progress = layerIndex / (totalSteps - 1);
+	switch (easing) {
+		case "linear": return 1 - progress;
+		case "ease-in": return 1 - progress * progress;
+		case "ease-out": return 1 - (1 - (1 - progress) ** 2);
+		case "ease-in-out": return 1 - (progress < .5 ? 2 * progress * progress : 1 - (-2 * progress + 2) ** 2 / 2);
+		default: return 1 - progress;
+	}
+};
+var getProgressiveBlurMaskStops = (layerIndex, totalSteps) => {
+	const increment = 100 / totalSteps;
+	const maskIndex = totalSteps - layerIndex;
+	return {
+		p1: Math.round((increment * maskIndex - increment) * 10) / 10,
+		p2: Math.round(increment * maskIndex * 10) / 10,
+		p3: Math.round((increment * maskIndex + increment) * 10) / 10,
+		p4: Math.round((increment * maskIndex + increment * 2) * 10) / 10
+	};
+};
+var formatProgressiveBlurMaskGradient = (stops) => {
+	let gradient = `transparent ${stops.p1}%, black ${stops.p2}%`;
+	if (stops.p3 <= 100) gradient += `, black ${stops.p3}%`;
+	if (stops.p4 <= 100) gradient += `, transparent ${stops.p4}%`;
+	return gradient;
+};
+//#endregion
+export { formatProgressiveBlurMaskGradient, getProgressiveBlurFactor, getProgressiveBlurMaskStops, resolveProgressiveBlurSteps };

package/dist/components/radio/radio.js

@@ -1,10 +1,10 @@
 "use client";
 import './radio.css';
+import { clsx } from "../../core/clsx.js";
 import { Stack } from "../stack/stack.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
 import radio_module_default from "./radio.module.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Radio } from "@base-ui/react/radio";

package/dist/components/select/select-group.js

@@ -1,9 +1,9 @@
 "use client";
+import { clsx } from "../../core/clsx.js";
 import { Stack } from "../stack/stack.js";
 import { Text } from "../text/text.js";
 import select_module_default from "./select.module.js";
 import { SelectIndicatorSlot } from "./select-indicator-slot.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
 //#region src/components/select/select-group.tsx

package/dist/components/select/select-option.d.ts

@@ -6,6 +6,12 @@ import type * as React from 'react';
  * @default Base UI pass-through props keep upstream defaults.
  */
 export type SelectOptionProps = SelectItem.Props & {
+    /**
+     * Decorative leading node rendered before the option label.
+     *
+     * @default No addon is rendered.
+     */
+    addon?: React.ReactNode;
     /**
      * Custom indicator node rendered when the option is selected.
      *
@@ -13,4 +19,4 @@ export type SelectOptionProps = SelectItem.Props & {
      */
     indicator?: React.ReactNode;
 };
-export declare function SelectOption({ children, className, disabled, indicator, label, value, ...itemProps }: SelectOptionProps): React.JSX.Element;
+export declare function SelectOption({ addon, children, className, disabled, indicator, label, value, ...itemProps }: SelectOptionProps): React.JSX.Element;

package/dist/components/select/select-option.js

@@ -1,14 +1,14 @@
 "use client";
+import { clsx } from "../../core/clsx.js";
 import { Stack } from "../stack/stack.js";
 import { Text } from "../text/text.js";
 import select_module_default from "./select.module.js";
 import { SelectIndicatorSlot } from "./select-indicator-slot.js";
 import { Icon } from "../icon/icon.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
 //#region src/components/select/select-option.tsx
-function SelectOption({ children, className, disabled, indicator, label, value, ...itemProps }) {
+function SelectOption({ addon, children, className, disabled, indicator, label, value, ...itemProps }) {
 	return /* @__PURE__ */ jsxs(Select.Item, {
 		...itemProps,
 		"aria-label": label,
@@ -23,11 +23,23 @@ function SelectOption({ children, className, disabled, indicator, label, value,
 			vAlign: "center"
 		}),
 		value,
-		children: [/* @__PURE__ */ jsx(Text, {
-			lineHeight: "small",
-			render: /* @__PURE__ */ jsx(Select.ItemText, {}),
-			size: "small",
-			children
+		children: [/* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			columnGap: "small",
+			vAlign: "start",
+			children: [addon && /* @__PURE__ */ jsx(Stack, {
+				vPadding: "2x-small",
+				"aria-hidden": "true",
+				grow: false,
+				shrink: false,
+				children: addon
+			}), /* @__PURE__ */ jsx(Text, {
+				className: select_module_default.OptionText,
+				lineHeight: "small",
+				render: /* @__PURE__ */ jsx(Select.ItemText, {}),
+				size: "small",
+				children
+			})]
 		}), /* @__PURE__ */ jsx(SelectIndicatorSlot, {
 			interactive: true,
 			children: indicator ?? /* @__PURE__ */ jsx(Icon, {

package/dist/components/select/select-separator.js

@@ -1,6 +1,6 @@
 "use client";
+import { clsx } from "../../core/clsx.js";
 import select_module_default from "./select.module.js";
-import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
 //#region src/components/select/select-separator.tsx

package/dist/components/select/select.css

@@ -1 +1 @@
-.select-module_Select_eXv4Y{--input-height:var(--space-x-large);--control-group-background:var(--base-1);--control-group-color:var(--global-foreground);--control-group-border-color:var(--global-contrast);--control-group-border-radius:var(--radius-small);--select-trigger-padding-inline-start:var(--space-small);--select-trigger-padding-inline-end:var(--space-x-small);--field-label-padding-inline:calc((var(--control-group-border-radius) + 0px) / 2);z-index:0;&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]>.select-module_Trigger_-wBsg:not(:disabled):not([data-disabled]){--control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.select-module_Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--input-height);padding-inline:calc(var(--select-trigger-padding-inline-start) + ((var(--control-group-border-radius) + 0px) / 4)) var(--select-trigger-padding-inline-end);border:1px solid var(--control-group-border-color);border-radius:var(--control-group-border-radius);background:var(--control-group-background);color:var(--control-group-color);font:inherit;text-align:start;cursor:pointer;&:focus-visible{outline:2px solid var(--global-foreground);outline-offset:2px}&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--control-group-background:var(--global-disabled-background);--control-group-border-color:transparent;--control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.select-module_Value_uWHPX{--text-fluid-factor:0;--text-font-size:var(--font-scale-body-small);flex:1 1 auto;min-inline-size:0;overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.select-module_Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.select-module_Description_OmwmV{padding-inline:calc((var(--control-group-border-radius) + 0px) / 2)}.select-module_SelectPopup_UzGXL{--select-list-border-radius:var(--radius-medium);--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}.select-module_ScrollArrow_kHlEi{--scroll-arrow-background:var(--is-vibrancy-active) oklab(from var(--base-1) l a b/80%);position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--scroll-arrow-background,var(--base-1));backdrop-filter:var(--vibrancy-filter,none);border:1px solid var(--global-contrast)}.select-module_ScrollButton_sHBOa{pointer-events:none}.select-module_ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--select-list-border-radius) var(--select-list-border-radius) 0 0}.select-module_ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--select-list-border-radius) var(--select-list-border-radius)}.select-module_List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);overflow-y:auto;scroll-padding-block:var(--select-list-padding);list-style:none;overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.select-module_Option_KgYqz{border-radius:calc((var(--select-list-border-radius) + 0px) - var(--select-list-padding));cursor:pointer;&:focus{outline:none}&:focus-visible{outline:2px solid var(--global-foreground);outline-offset:0}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{--option-hover-background:var(--is-vibrancy-active) oklab(from var(--global-contrast) l a b/14%);background:var(--option-hover-background,var(--global-contrast))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}.select-module_Indicator_YNUuz{inline-size:var(--space-medium);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}}.select-module_Group_xzkuA+.select-module_Group_xzkuA{margin-block-start:var(--space-medium)}.select-module_Separator_Q-ri9{block-size:1px;margin-block:var(--space-small);margin-inline:var(--space-small);background:var(--base-3)}
+.select-module_Select_eXv4Y{--input-height:var(--space-x-large);--control-group-background:var(--base-1);--control-group-color:var(--global-foreground);--control-group-border-color:var(--global-contrast);--control-group-border-radius:var(--radius-small);--select-trigger-padding-inline-start:var(--space-small);--select-trigger-padding-inline-end:var(--space-x-small);--field-label-padding-inline:calc((var(--control-group-border-radius) + 0px) / 2);z-index:0;&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]>.select-module_Trigger_-wBsg:not(:disabled):not([data-disabled]){--control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.select-module_Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--input-height);padding-inline:calc(var(--select-trigger-padding-inline-start) + ((var(--control-group-border-radius) + 0px) / 4)) var(--select-trigger-padding-inline-end);border:1px solid var(--control-group-border-color);border-radius:var(--control-group-border-radius);background:var(--control-group-background);color:var(--control-group-color);font:inherit;text-align:start;cursor:pointer;&:focus-visible{outline:2px solid var(--global-foreground);outline-offset:2px}&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--control-group-background:var(--global-disabled-background);--control-group-border-color:transparent;--control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.select-module_Value_uWHPX{--text-fluid-factor:0;--text-font-size:var(--font-scale-body-small);flex:1 1 auto;min-inline-size:0;overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.select-module_Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.select-module_Description_OmwmV{padding-inline:calc((var(--control-group-border-radius) + 0px) / 2)}.select-module_SelectPopup_UzGXL{--select-list-border-radius:var(--radius-medium);--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}.select-module_ScrollArrow_kHlEi{--scroll-arrow-background:var(--is-vibrancy-active) oklab(from var(--base-1) l a b/80%);position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--scroll-arrow-background,var(--base-1));backdrop-filter:var(--vibrancy-filter,none);border:1px solid var(--global-contrast)}.select-module_ScrollButton_sHBOa{pointer-events:none}.select-module_ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--select-list-border-radius) var(--select-list-border-radius) 0 0}.select-module_ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--select-list-border-radius) var(--select-list-border-radius)}.select-module_List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);overflow-y:auto;scroll-padding-block:var(--select-list-padding);list-style:none;overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.select-module_OptionText_UynBD{flex:1 1 auto;min-inline-size:0}.select-module_Option_KgYqz{border-radius:calc((var(--select-list-border-radius) + 0px) - var(--select-list-padding));cursor:pointer;&:focus{outline:none}&:focus-visible{outline:2px solid var(--global-foreground);outline-offset:0}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{--option-hover-background:var(--is-vibrancy-active) oklab(from var(--global-contrast) l a b/14%);background:var(--option-hover-background,var(--global-contrast))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}.select-module_Indicator_YNUuz{inline-size:var(--space-medium);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}}.select-module_Group_xzkuA+.select-module_Group_xzkuA{margin-block-start:var(--space-medium)}.select-module_Separator_Q-ri9{block-size:1px;margin-block:var(--space-small);margin-inline:var(--space-small);background:var(--base-3)}

package/dist/components/select/select.d.ts

@@ -53,8 +53,14 @@ export type SelectProps = SelectRoot.Props<string> & Omit<FieldRoot.Props, 'ref'
      * @default No ref is attached.
      */
     ref?: React.Ref<HTMLButtonElement>;
+    /**
+     * When `true`, aligns the list popup width with the trigger via Base UI `alignItemWithTrigger`.
+     *
+     * @default false
+     */
+    alignListWithTrigger?: boolean;
 };
-declare function SelectRootComponent({ children, className, description, dirty, disabled, error, icon, invalid, label, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }: SelectProps): React.JSX.Element;
+declare function SelectRootComponent({ alignListWithTrigger, children, className, description, dirty, disabled, error, icon, invalid, label, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }: SelectProps): React.JSX.Element;
 export declare const Select: typeof SelectRootComponent & {
     Option: typeof SelectOption;
     Group: typeof SelectGroup;

package/dist/components/select/select.guide.json

@@ -4,6 +4,7 @@
   "whenToUse": [
     "Choose one value from a predefined list with label and helper copy",
     "Grouped or separated option lists",
+    "Rich option rows with a leading decorative addon and multi-line label content",
     "Trigger chrome aligned with Textfield control shell"
   ],
   "whenNotToUse": ["Multiple selection", "Combobox, filterable search, or custom anchor positioning"],

package/dist/components/select/select.js

@@ -1,5 +1,6 @@
 "use client";
 import './select.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Stack } from "../stack/stack.js";
 import { Elevator } from "../elevator/elevator.js";
@@ -13,13 +14,12 @@ import { SelectOption } from "./select-option.js";
 import { SelectSeparator } from "./select-separator.js";
 import { Icon } from "../icon/icon.js";
 import { Surface } from "../surface/surface.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { Field } from "@base-ui/react/field";
 import { Select } from "@base-ui/react/select";
 //#region src/components/select/select.tsx
-function SelectRootComponent({ children, className, description, dirty, disabled, error, icon = /* @__PURE__ */ jsx(Icon, {
+function SelectRootComponent({ alignListWithTrigger = false, children, className, description, dirty, disabled, error, icon = /* @__PURE__ */ jsx(Icon, {
 	name: "ChevronExpandY",
 	size: 16
 }), invalid, label, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }) {
@@ -87,7 +87,7 @@ function SelectRootComponent({ children, className, description, dirty, disabled
 						children: icon
 					})]
 				}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
-					alignItemWithTrigger: true,
+					alignItemWithTrigger: alignListWithTrigger,
 					children: /* @__PURE__ */ jsxs(Select.Popup, {
 						className: select_module_default.SelectPopup,
 						children: [

package/dist/components/select/select.module.js

@@ -10,6 +10,7 @@ var select_module_default = {
 	ScrollArrowUp: "select-module_ScrollArrowUp_DGXS-",
 	ScrollArrowDown: "select-module_ScrollArrowDown_vhJy0",
 	List: "select-module_List_jdUWx",
+	OptionText: "select-module_OptionText_UynBD",
 	Option: "select-module_Option_KgYqz",
 	Indicator: "select-module_Indicator_YNUuz",
 	Group: "select-module_Group_xzkuA",

package/dist/components/skeleton/skeleton.js

@@ -1,8 +1,8 @@
 import './skeleton.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
 import skeleton_module_default from "./skeleton.module.js";
-import clsx$1 from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/skeleton/skeleton.tsx
 var Skeleton = ({ className, height, minHeight, minWidth, radius, ref, style, width, ...otherProps }) => {
@@ -20,7 +20,7 @@ var Skeleton = ({ className, height, minHeight, minWidth, radius, ref, style, wi
 		...intrinsicAttributes,
 		ref,
 		"aria-hidden": "true",
-		className: clsx$1(skeleton_module_default.Skeleton, className),
+		className: clsx(skeleton_module_default.Skeleton, className),
 		style: dynamicStyle
 	});
 };

package/dist/components/slider/slider.js

@@ -1,5 +1,6 @@
 "use client";
 import './slider.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Stack } from "../stack/stack.js";
 import { Text } from "../text/text.js";
@@ -8,7 +9,6 @@ import { FieldLabel } from "../basic-input/field-label.js";
 import slider_module_default from "./slider.module.js";
 import { SliderControl } from "./slider-control.js";
 import { isRangeSlider } from "./slider-utils.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Slider } from "@base-ui/react/slider";

package/dist/components/spinner/spinner.js

@@ -1,7 +1,7 @@
 import './spinner.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import spinner_module_default from "./spinner.module.js";
-import clsx$1 from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/spinner/spinner.tsx
 var Spinner = ({ className, color, size = "big", ref, style, ...otherProps }) => {
@@ -10,7 +10,7 @@ var Spinner = ({ className, color, size = "big", ref, style, ...otherProps }) =>
 		...componentProps,
 		...intrinsicAttributes,
 		ref,
-		className: clsx$1(spinner_module_default.Spinner, className),
+		className: clsx(spinner_module_default.Spinner, className),
 		"data-dimension": size,
 		viewBox: "0 0 16 16",
 		xmlns: "http://www.w3.org/2000/svg",

package/dist/components/stack/stack.js

@@ -1,10 +1,10 @@
 "use client";
 import './stack.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
 import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
 import stack_module_default from "./stack.module.js";
-import { clsx } from "clsx";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/stack/stack.tsx
 var Stack = ({ className, direction = "column", fillChildren = true, hAlign = "initial", hPadding, inline = false, maxWidth, minWidth, ref, render, rowGap, columnGap, style, vAlign = "initial", vPadding, wrap = false, ...otherProps }) => {

package/dist/components/static-noise/index.d.ts

@@ -0,0 +1,2 @@
+export { StaticNoise } from './static-noise';
+export type { StaticNoiseProps } from './static-noise';

package/dist/components/static-noise/static-noise.css

@@ -0,0 +1 @@
+.static-noise-module_StaticNoise_ZhNxO{pointer-events:none;margin:0}.static-noise-module_FilterSvg_0CP2y{display:block}

package/dist/components/static-noise/static-noise.d.ts

@@ -0,0 +1,37 @@
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type * as React from 'react';
+/**
+ * Public StaticNoise props.
+ *
+ * Includes standard `figure` attributes such as `id`, `className`, and event handlers,
+ * plus Vira-owned turbulence tuning controls.
+ *
+ * @default Native figure pass-through props keep React defaults.
+ */
+export type StaticNoiseProps = React.ComponentPropsWithRef<'figure'> & IntrinsicViraProps & {
+    /**
+     * Sets the SVG turbulence `baseFrequency` for the internal noise filter.
+     *
+     * @default 0.5
+     */
+    baseFrequency?: number | string;
+    /**
+     * Sets the rendered overlay opacity.
+     *
+     * @default 0.1
+     */
+    opacity?: number;
+    /**
+     * Sets the rendered overlay mix blend mode.
+     *
+     * @default 'difference'
+     */
+    mixBlendMode?: React.CSSProperties['mixBlendMode'];
+    /**
+     * Animates the internal turbulence filter by cycling `feTurbulence` seed values.
+     *
+     * @default false
+     */
+    animate?: boolean;
+};
+export declare const StaticNoise: React.FC<StaticNoiseProps>;

package/dist/components/static-noise/static-noise.guide.json

@@ -0,0 +1,25 @@
+{
+  "name": "StaticNoise",
+  "summary": "Decorative SVG turbulence noise overlay for textured surfaces and hero sections.",
+  "whenToUse": [
+    "Subtle grain or texture overlay on cards, panels, or hero sections",
+    "Glass or vibrant surfaces that need visual depth without extra content",
+    "Decorative atmosphere where the parent owns semantics and layout positioning"
+  ],
+  "whenNotToUse": [
+    "Standalone loading or status feedback without a labeled parent region",
+    "Critical readable content where contrast has not been verified",
+    "Large numbers of simultaneous full-viewport overlays on the same page"
+  ],
+  "accessibility": [
+    "StaticNoise is decorative — the root renders with aria-hidden by default",
+    "Parent surface or region must expose any meaningful label or busy state",
+    "Consumer owns position, inset, z-index, and sizing for the overlay placement"
+  ],
+  "antiPatterns": [
+    "Stacking many full-viewport StaticNoise instances on one screen",
+    "Using StaticNoise as the only loading announcement for a page",
+    "Embedding layout positioning rules inside the component stylesheet"
+  ],
+  "related": ["Surface", "Skeleton"]
+}

package/dist/components/static-noise/static-noise.js

@@ -0,0 +1,45 @@
+import './static-noise.css';
+import { clsx } from "../../core/clsx.js";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import static_noise_module_default from "./static-noise.module.js";
+import { jsx } from "react/jsx-runtime";
+import { useId } from "react";
+//#region src/components/static-noise/static-noise.tsx
+var STATIC_NOISE_SEED_FRAMES = "1;5;2;9;3;7;4;11;6;13;8;15;10;17;12;19;14;16;18;20;3;8;1;13";
+var StaticNoise = ({ animate = false, baseFrequency = .5, className, mixBlendMode = "multiply", opacity = .15, ref, style, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const reactId = useId();
+	const dynamicStyle = {
+		filter: `url(#${reactId}) grayscale(100%)`,
+		opacity,
+		mixBlendMode,
+		...style
+	};
+	return /* @__PURE__ */ jsx("figure", {
+		...componentProps,
+		...intrinsicAttributes,
+		ref,
+		"aria-hidden": "true",
+		className: clsx(static_noise_module_default.StaticNoise, className),
+		style: dynamicStyle,
+		children: /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			className: static_noise_module_default.FilterSvg,
+			children: /* @__PURE__ */ jsx("filter", {
+				id: reactId,
+				children: /* @__PURE__ */ jsx("feTurbulence", {
+					baseFrequency: String(baseFrequency),
+					children: animate ? /* @__PURE__ */ jsx("animate", {
+						attributeName: "seed",
+						calcMode: "discrete",
+						dur: "1s",
+						repeatCount: "indefinite",
+						values: STATIC_NOISE_SEED_FRAMES
+					}) : null
+				})
+			})
+		})
+	});
+};
+//#endregion
+export { StaticNoise };

package/dist/components/static-noise/static-noise.module.js

@@ -0,0 +1,6 @@
+var static_noise_module_default = {
+	StaticNoise: "static-noise-module_StaticNoise_ZhNxO",
+	FilterSvg: "static-noise-module_FilterSvg_0CP2y"
+};
+//#endregion
+export { static_noise_module_default as default };

package/dist/components/surface/surface-radius-context.d.ts

@@ -0,0 +1,37 @@
+import { ThemeTypes } from '@viraui/foundation/vira/types';
+import type * as React from 'react';
+export type SurfaceRadius = ThemeTypes['radius'] | 'auto';
+export type SurfacePadding = ThemeTypes['space'] | [ThemeTypes['space'] | 0, ThemeTypes['space'] | 0];
+export type SurfaceRadiusCorners = {
+    topLeft: string;
+    topRight: string;
+    bottomRight: string;
+    bottomLeft: string;
+};
+export type SurfacePaddingEdges = {
+    inlineStart: string;
+    inlineEnd: string;
+    blockStart: string;
+    blockEnd: string;
+};
+export type SurfaceRadiusContextValue = {
+    radius: SurfaceRadiusCorners;
+    padding: SurfacePaddingEdges;
+};
+export type SurfaceRadiusDefaults = {
+    hPadding?: SurfacePadding | undefined;
+    radius?: SurfaceRadius | undefined;
+    style?: React.CSSProperties | undefined;
+    vPadding?: SurfacePadding | undefined;
+};
+type SurfaceRadiusConfig = SurfaceRadiusDefaults & {
+    defaults: SurfaceRadiusDefaults;
+};
+export declare const SurfaceRadiusContext: React.Context<SurfaceRadiusContextValue | null>;
+export declare const useSurfaceRadiusContext: () => SurfaceRadiusContextValue | null;
+export declare const useSurfaceRadius: ({ defaults, hPadding, radius, style, vPadding }: SurfaceRadiusConfig) => {
+    contextValue: SurfaceRadiusContextValue;
+    hasAutoRadius: boolean;
+    radiusStyle: React.CSSProperties;
+};
+export {};

package/dist/components/surface/surface-radius-context.js

@@ -0,0 +1,70 @@
+"use client";
+import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
+import { createContext, useContext } from "react";
+//#region src/components/surface/surface-radius-context.ts
+var SurfaceRadiusContext = createContext(null);
+var useSurfaceRadiusContext = () => useContext(SurfaceRadiusContext);
+var toCssLength = (value) => value === void 0 || value === 0 ? "0px" : String(value);
+var resolveAxisPaddingValues = (value) => {
+	if (!value) return ["0px", "0px"];
+	if (Array.isArray(value)) return [toCssLength(resolveThemeValue(value[0], "space", 0)), toCssLength(resolveThemeValue(value[1], "space", 0))];
+	const resolvedValue = toCssLength(resolveThemeValue(value, "space", 0));
+	return [resolvedValue, resolvedValue];
+};
+var resolveAutoRadiusCorners = ({ padding, radius }) => ({
+	topLeft: `max(0px, calc(${radius.topLeft} - max(${padding.blockStart}, ${padding.inlineStart})))`,
+	topRight: `max(0px, calc(${radius.topRight} - max(${padding.blockStart}, ${padding.inlineEnd})))`,
+	bottomRight: `max(0px, calc(${radius.bottomRight} - max(${padding.blockEnd}, ${padding.inlineEnd})))`,
+	bottomLeft: `max(0px, calc(${radius.bottomLeft} - max(${padding.blockEnd}, ${padding.inlineStart})))`
+});
+var resolveTokenRadiusCorners = (radius) => ({
+	topLeft: radius,
+	topRight: radius,
+	bottomRight: radius,
+	bottomLeft: radius
+});
+var getSurfaceStyleRadius = (style) => style?.["--surface-border-radius"];
+var getSurfaceRadiusStyle = (radius) => ({
+	"--surface-border-radius-top-left": radius.topLeft,
+	"--surface-border-radius-top-right": radius.topRight,
+	"--surface-border-radius-bottom-right": radius.bottomRight,
+	"--surface-border-radius-bottom-left": radius.bottomLeft
+});
+var resolveDefaultContext = ({ hPadding, radius, style, vPadding }) => {
+	const resolvedRadius = toCssLength(resolveThemeValue(radius, "radius", 0));
+	const [paddingInlineStart, paddingInlineEnd] = resolveAxisPaddingValues(hPadding);
+	const [paddingBlockStart, paddingBlockEnd] = resolveAxisPaddingValues(vPadding);
+	return {
+		radius: resolveTokenRadiusCorners(toCssLength(getSurfaceStyleRadius(style) ?? resolvedRadius)),
+		padding: {
+			inlineStart: paddingInlineStart,
+			inlineEnd: paddingInlineEnd,
+			blockStart: paddingBlockStart,
+			blockEnd: paddingBlockEnd
+		}
+	};
+};
+var useSurfaceRadius = ({ defaults, hPadding, radius, style, vPadding }) => {
+	const parentContext = useSurfaceRadiusContext() ?? resolveDefaultContext(defaults);
+	const hasAutoRadius = radius === "auto";
+	const resolvedRadius = toCssLength(hasAutoRadius ? void 0 : resolveThemeValue(radius, "radius", 0));
+	const tokenRadius = toCssLength(getSurfaceStyleRadius(style) ?? resolvedRadius);
+	const ownRadius = hasAutoRadius ? resolveAutoRadiusCorners(parentContext) : resolveTokenRadiusCorners(tokenRadius);
+	const [paddingInlineStart, paddingInlineEnd] = resolveAxisPaddingValues(hPadding);
+	const [paddingBlockStart, paddingBlockEnd] = resolveAxisPaddingValues(vPadding);
+	return {
+		contextValue: {
+			radius: ownRadius,
+			padding: {
+				inlineStart: paddingInlineStart,
+				inlineEnd: paddingInlineEnd,
+				blockStart: paddingBlockStart,
+				blockEnd: paddingBlockEnd
+			}
+		},
+		hasAutoRadius,
+		radiusStyle: hasAutoRadius ? getSurfaceRadiusStyle(ownRadius) : { "--surface-border-radius": tokenRadius }
+	};
+};
+//#endregion
+export { SurfaceRadiusContext, useSurfaceRadius };

package/dist/components/surface/surface.css

@@ -1 +1 @@
-.surface-module_Surface_slEYq{--surface-background-hover:var(--surface-background);--surface-border-radius:var(--radius-medium);--surface-padding-inline-start:0;--surface-padding-inline-end:0;--surface-padding-block-start:0;--surface-padding-block-end:0;--surface-vibrancy-background:var(--is-vibrancy-active) oklab(from var(--surface-background) l a b/80%);position:relative;box-sizing:border-box;background:var(--surface-vibrancy-background,var(--surface-background,transparent));border-radius:var(--surface-border-radius);border:0;&[data-surface-has-padding=true]{padding:var(--surface-padding-block-start) var(--surface-padding-inline-end) var(--surface-padding-block-end) var(--surface-padding-inline-start)}&[data-surface-border]{border-style:var(--surface-border-style,solid);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{animation:surface-module_surface-background-hover_HwH9- var(--duration-fast) var(--easing-standard);animation-fill-mode:both}}}@keyframes surface-module_surface-background-hover_HwH9-{to{background:var(--surface-background-hover)}}
+.surface-module_Surface_slEYq{--surface-background-hover:var(--surface-background);--surface-border-radius:0;--surface-border-radius-top-left:var(--surface-border-radius);--surface-border-radius-top-right:var(--surface-border-radius);--surface-border-radius-bottom-right:var(--surface-border-radius);--surface-border-radius-bottom-left:var(--surface-border-radius);--surface-padding-inline-start:0;--surface-padding-inline-end:0;--surface-padding-block-start:0;--surface-padding-block-end:0;--surface-vibrancy-background:var(--is-vibrancy-active) oklab(from var(--surface-background) l a b/80%);position:relative;box-sizing:border-box;background:var(--surface-vibrancy-background,var(--surface-background,transparent));border-radius:var(--surface-border-radius-top-left) var(--surface-border-radius-top-right) var(--surface-border-radius-bottom-right) var(--surface-border-radius-bottom-left);border:0;&[data-surface-radius=auto]{--surface-border-radius-top-left:0;--surface-border-radius-top-right:0;--surface-border-radius-bottom-right:0;--surface-border-radius-bottom-left:0}&[data-surface-has-padding=true]{padding:var(--surface-padding-block-start) var(--surface-padding-inline-end) var(--surface-padding-block-end) var(--surface-padding-inline-start)}&[data-surface-border]{border-style:var(--surface-border-style,solid);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{animation:surface-module_surface-background-hover_HwH9- var(--duration-fast) var(--easing-standard);animation-fill-mode:both}}}@keyframes surface-module_surface-background-hover_HwH9-{to{background:var(--surface-background-hover)}}

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

@@ -1,6 +1,6 @@
 import { useRender } from '@base-ui/react/use-render';
 import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
-import { ThemeTypes } from '@viraui/foundation/vira/types';
+import { SurfacePadding, SurfaceRadius } 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;
@@ -51,23 +51,23 @@ export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>
      */
     borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double';
     /**
-     * Sets the corner radius from the Vira radius token scale.
+     * Sets the corner radius from the Vira radius token scale, or derives concentric radii from the nearest ancestor Surface.
      *
      * @default No radius.
      */
-    radius?: ThemeTypes['radius'];
+    radius?: SurfaceRadius;
     /**
      * Sets inline padding using one token for both sides or a `[start, end]` tuple.
      *
      * @default No inline padding.
      */
-    hPadding?: ThemeTypes['space'] | [ThemeTypes['space'] | 0, ThemeTypes['space'] | 0];
+    hPadding?: SurfacePadding;
     /**
      * Sets block padding using one token for both sides or a `[start, end]` tuple.
      *
      * @default No block padding.
      */
-    vPadding?: ThemeTypes['space'] | [ThemeTypes['space'] | 0, ThemeTypes['space'] | 0];
+    vPadding?: SurfacePadding;
 };
 export declare const Surface: React.FC<SurfaceProps>;
 export {};

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

@@ -1,14 +1,18 @@
 {
   "name": "Surface",
-  "summary": "Presentational container with token background, optional border, radius, and padding.",
+  "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners.",
   "whenToUse": [
     "Group content with base-level background and contrast border",
     "Popup or card chrome with optional hover background",
-    "Compose with Elevator for animated elevation transitions"
+    "Compose with Elevator for animated elevation transitions",
+    "Set radius to a token on the outermost Surface that needs rounded corners",
+    "Set radius=\"auto\" on a nested Surface when its parent Surface has a radius so each corner subtracts the nearest ancestor padding and stays concentric",
+    "Stack nested auto-radius Surfaces recursively; context still resolves through wrapper layout such as Stack"
   ],
   "whenNotToUse": [
     "Interactive control semantics without an appropriate render root",
-    "Expecting hover background on touch-primary devices"
+    "Expecting hover background on touch-primary devices",
+    "Using radius=\"auto\" on the outermost Surface when no ancestor Surface provides a radius context"
   ],
   "accessibility": [
     "Surface is presentational — pair with headings or labels so grouped content is discoverable",
@@ -17,7 +21,9 @@
   ],
   "antiPatterns": [
     "Overwriting transition shorthand without composing box-shadow when data-elevation is present",
-    "Assuming hoverColor applies on touch devices"
+    "Assuming hoverColor applies on touch devices",
+    "Reusing the parent token radius on nested Surfaces instead of radius=\"auto\" when concentric corners are required",
+    "Expecting radius=\"auto\" to inherit a token when the nearest ancestor Surface has no radius set"
   ],
   "related": ["Elevator", "Stack"]
 }

package/dist/components/surface/surface.js

@@ -1,10 +1,11 @@
 "use client";
 import './surface.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
-import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
 import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
+import { SurfaceRadiusContext, useSurfaceRadius } from "./surface-radius-context.js";
 import surface_module_default from "./surface.module.js";
-import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/surface/surface.tsx
 var clampSurfaceBaseLevel = (value) => {
@@ -13,21 +14,34 @@ var clampSurfaceBaseLevel = (value) => {
 	return value;
 };
 var toSurfaceColor = (value) => typeof value === "string" ? value : `var(--base-${clampSurfaceBaseLevel(value)})`;
+var surfaceDefaultRadiusProps = {
+	hPadding: void 0,
+	radius: void 0,
+	style: void 0,
+	vPadding: void 0
+};
 var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hoverColor, radius, ref, render, style, vPadding, ...otherProps }) => {
 	const hasColor = color !== void 0;
 	const hasPadding = Boolean(hPadding || vPadding);
 	const hasHoverColor = hoverColor !== void 0;
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const { contextValue, hasAutoRadius, radiusStyle } = useSurfaceRadius({
+		defaults: surfaceDefaultRadiusProps,
+		hPadding,
+		radius,
+		style,
+		vPadding
+	});
 	const dynamicStyle = {
 		...hasColor ? { "--surface-background": toSurfaceColor(color) } : {},
 		...hasHoverColor ? { "--surface-background-hover": toSurfaceColor(hoverColor) } : {},
 		...border ? { "--surface-border-style": borderStyle } : {},
-		"--surface-border-radius": resolveThemeValue(radius, "radius", 0),
+		...radiusStyle,
 		...resolveAxisPadding(hPadding, "--surface-padding-inline-start", "--surface-padding-inline-end"),
 		...resolveAxisPadding(vPadding, "--surface-padding-block-start", "--surface-padding-block-end"),
 		...style
 	};
-	return useRender({
+	const surface = useRender({
 		defaultTagName: "div",
 		render,
 		ref,
@@ -35,12 +49,17 @@ var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hove
 			...componentProps,
 			...intrinsicAttributes,
 			...border ? { "data-surface-border": border } : {},
+			...hasAutoRadius ? { "data-surface-radius": "auto" } : {},
 			"data-surface-has-hover-color": hasHoverColor ? "true" : "false",
 			"data-surface-has-padding": hasPadding ? "true" : "false",
 			className: clsx(surface_module_default.Surface, className),
 			style: dynamicStyle
 		}
 	});
+	return /* @__PURE__ */ jsx(SurfaceRadiusContext.Provider, {
+		value: contextValue,
+		children: surface
+	});
 };
 //#endregion
 export { Surface };

package/dist/components/switch/switch.js

@@ -1,11 +1,11 @@
 "use client";
 import './switch.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Stack } from "../stack/stack.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
 import switch_module_default from "./switch.module.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Switch } from "@base-ui/react/switch";

package/dist/components/text/text.js

@@ -1,9 +1,9 @@
 "use client";
 import './text.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
 import text_module_default from "./text.module.js";
-import { clsx } from "clsx";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/text/text.tsx
 var Text = ({ align = "start", balanced = false, selection = true, className, color, family = "body", fontWidth, hPadding, lineHeight = "standard", maxWidth, opticalSize, ref, render, size = "medium", style, tone, trim = "both", trimType = "cap alphabetic", vPadding, weight = "regular", whiteSpace = "normal", ...otherProps }) => {

package/dist/components/textarea/textarea.js

@@ -1,12 +1,12 @@
 "use client";
 import './textarea.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Stack } from "../stack/stack.js";
 import { BasicInput } from "../basic-input/basic-input.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
 import textarea_module_default from "./textarea.module.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 //#region src/components/textarea/textarea.tsx

package/dist/components/textfield/textfield.js

@@ -1,5 +1,6 @@
 "use client";
 import './textfield.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Stack } from "../stack/stack.js";
 import { BasicInput } from "../basic-input/basic-input.js";
@@ -7,7 +8,6 @@ import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
 import { InputControlGroup } from "../basic-input/input-control-group.js";
 import textfield_module_default from "./textfield.module.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Input } from "@base-ui/react/input";

package/dist/components/title/title.js

@@ -1,9 +1,9 @@
 "use client";
 import './title.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
 import title_module_default from "./title.module.js";
-import { clsx } from "clsx";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/title/title.tsx
 var Title = ({ align = "start", balanced = false, selection = true, className, color, fontWidth, hPadding, level = "h1", lineHeight = "standard", maxWidth, opticalSize, ref, render, style, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", ...otherProps }) => {

package/dist/core/clsx.d.ts

@@ -0,0 +1 @@
+export declare const clsx: (...inputs: any[]) => string;

package/dist/core/clsx.js

@@ -0,0 +1,36 @@
+//#region src/core/clsx.ts
+var toVal = (mix) => {
+	let str = "";
+	if (typeof mix === "string" || typeof mix === "number") str += mix;
+	else if (typeof mix === "object" && mix !== null) {
+		if (Array.isArray(mix)) {
+			for (let index = 0; index < mix.length; index += 1) if (mix[index]) {
+				const value = toVal(mix[index]);
+				if (value) {
+					if (str) str += " ";
+					str += value;
+				}
+			}
+		} else for (const key in mix) if (mix[key]) {
+			if (str) str += " ";
+			str += key;
+		}
+	}
+	return str;
+};
+var clsx = (...inputs) => {
+	let str = "";
+	for (let index = 0; index < inputs.length; index += 1) {
+		const input = inputs[index];
+		if (input) {
+			const value = toVal(input);
+			if (value) {
+				if (str) str += " ";
+				str += value;
+			}
+		}
+	}
+	return str;
+};
+//#endregion
+export { clsx };

package/dist/index.js

@@ -23,5 +23,7 @@ import { Select } from "./components/select/select.js";
 import { Icon } from "./components/icon/icon.js";
 import { Skeleton } from "./components/skeleton/skeleton.js";
 import { Surface } from "./components/surface/surface.js";
+import { StaticNoise } from "./components/static-noise/static-noise.js";
+import { ProgressiveBlur } from "./components/progressive-blur/progressive-blur.js";
 import { Title } from "./components/title/title.js";
-export { Avatar, AvatarGroup, Button, Checkbox, Chip, ClampText, ELEVATION_DEFAULTS, Elevator, Icon, IconButton, LinearProgress, Masonry, Radio, RadioGroup, Select, Skeleton, Slider, Spinner, Stack, Surface, Switch, Text, Textarea, Textfield, Title, getElevationProps };
+export { Avatar, AvatarGroup, Button, Checkbox, Chip, ClampText, ELEVATION_DEFAULTS, Elevator, Icon, IconButton, LinearProgress, Masonry, ProgressiveBlur, Radio, RadioGroup, Select, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Text, Textarea, Textfield, Title, getElevationProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "private": false,
   "files": [
     "dist"
@@ -32,9 +32,6 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "dependencies": {
-    "clsx": "2.1.1"
-  },
   "devDependencies": {
     "@base-ui/react": "1.5.0",
     "postcss": "8.5.6",
@@ -45,10 +42,10 @@
     "vite": "8.0.16",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-static-copy": "2.3.0",
-    "@viraui/foundation": "0.0.21",
+    "@viraui/foundation": "0.0.22",
     "@viraui/icons": "0.0.15",
-    "@viraui/tsconfig": "0.0.16",
-    "@viraui/postcss-config": "0.0.16"
+    "@viraui/postcss-config": "0.0.16",
+    "@viraui/tsconfig": "0.0.16"
   },
   "peerDependencies": {
     "@base-ui/react": ">=1.5.0",