@viraui/react 0.0.20 → 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",