@viraui/react 0.0.21 → 0.0.23

package/dist/components/select/select-indicator-slot.js

@@ -1,4 +1,3 @@
-"use client";
 import { Stack } from "../stack/stack.js";
 import select_module_default from "./select.module.js";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,4 +1,5 @@
 import { SelectItem } from '@base-ui/react/select';
+import { StackProps } from '..';
 import type * as React from 'react';
 /**
  * Public Select.Option props.
@@ -6,11 +7,23 @@ 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;
+    /**
+     * Vertical alignment of the addon relative to the option label row.
+     *
+     * @default 'center'
+     */
+    addonAlign?: StackProps['vAlign'];
     /**
      * Custom indicator node rendered when the option is selected.
      *
-     * @default `CheckBoxArrow` icon.
+     * @default `<Icon name="Check" size={16} />`
      */
     indicator?: React.ReactNode;
 };
-export declare function SelectOption({ children, className, disabled, indicator, label, value, ...itemProps }: SelectOptionProps): React.JSX.Element;
+export declare function SelectOption({ addon, addonAlign, children, className, disabled, indicator, label, value, ...itemProps }: SelectOptionProps): React.JSX.Element;

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

@@ -1,40 +1,53 @@
-"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 { Surface } from "../surface/surface.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Select } from "@base-ui/react/select";
+import { Select } from "@base-ui/react";
 //#region src/components/select/select-option.tsx
-function SelectOption({ children, className, disabled, indicator, label, value, ...itemProps }) {
-	return /* @__PURE__ */ jsxs(Select.Item, {
+function SelectOption({ addon, addonAlign = "center", children, className, disabled, indicator, label, value, ...itemProps }) {
+	return /* @__PURE__ */ jsx(Select.Item, {
 		...itemProps,
 		"aria-label": label,
 		label,
 		className: clsx(select_module_default.Option, className),
 		disabled,
-		render: /* @__PURE__ */ jsx(Stack, {
+		render: /* @__PURE__ */ jsx(Surface, { radius: "auto" }),
+		value,
+		children: /* @__PURE__ */ jsxs(Stack, {
 			columnGap: "small",
 			direction: "row",
 			hPadding: "small",
 			vPadding: "small",
-			vAlign: "center"
-		}),
-		value,
-		children: [/* @__PURE__ */ jsx(Text, {
-			lineHeight: "small",
-			render: /* @__PURE__ */ jsx(Select.ItemText, {}),
-			size: "small",
-			children
-		}), /* @__PURE__ */ jsx(SelectIndicatorSlot, {
-			interactive: true,
-			children: indicator ?? /* @__PURE__ */ jsx(Icon, {
-				name: "Check",
-				size: 16
-			})
-		})]
+			vAlign: "center",
+			children: [/* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				columnGap: "small",
+				vAlign: addonAlign,
+				fillChildren: false,
+				children: [addon && /* @__PURE__ */ jsx(Stack, {
+					vPadding: "2x-small",
+					"aria-hidden": "true",
+					grow: false,
+					shrink: false,
+					children: addon
+				}), /* @__PURE__ */ jsx(Text, {
+					lineHeight: "small",
+					render: /* @__PURE__ */ jsx(Select.ItemText, {}),
+					size: "small",
+					children
+				})]
+			}), /* @__PURE__ */ jsx(SelectIndicatorSlot, {
+				interactive: true,
+				children: indicator ?? /* @__PURE__ */ jsx(Icon, {
+					name: "Check",
+					size: 16
+				})
+			})]
+		})
 	});
 }
 //#endregion

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

@@ -1,6 +1,5 @@
-"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)}
+.viraui__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-medium);--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);--select-list-appear-offest:8px;z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]>.viraui__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)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--input-height);padding-inline:var(--select-trigger-padding-inline-start) 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;&[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}}.viraui__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)}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--control-group-border-radius) + 0px) / 2)}.viraui__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;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{scale:.96;translate:0 calc(var(--select-list-appear-offest) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{scale:.96;translate:0 var(--select-list-appear-offest)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{scale:.96;translate:var(--select-list-appear-offest) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{scale:.96;translate:calc(var(--select-list-appear-offest) * -1) 0}&[data-side=none]{transition:none;scale:1;translate:0;opacity:1}}.viraui__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)}.viraui__select-module__ScrollButton_sHBOa{pointer-events:none}.viraui__select-module__ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--select-list-border-radius) var(--select-list-border-radius) 0 0}.viraui__select-module__ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--select-list-border-radius) var(--select-list-border-radius)}.viraui__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}}.viraui__select-module__OptionText_UynBD{flex:1 1 auto;min-inline-size:0}.viraui__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:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{--option-hover-background:var(--is-vibrancy-active) oklab(from var(--global-contrast) l a b/12%);background:var(--option-hover-background,var(--global-contrast))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}.viraui__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}}.viraui__select-module__Group_xzkuA+.viraui__select-module__Group_xzkuA{margin-block-start:var(--space-medium)}.viraui__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,9 +4,15 @@
   "whenToUse": [
     "Choose one value from a predefined list with label and helper copy",
     "Grouped or separated option lists",
-    "Trigger chrome aligned with Textfield control shell"
+    "Rich option rows with a leading decorative addon and multi-line label content",
+    "Trigger chrome aligned with Textfield control shell",
+    "Select fields inside Fieldset when they share a section legend with other inputs"
+  ],
+  "whenNotToUse": [
+    "Multiple selection",
+    "Combobox, filterable search, or custom anchor positioning",
+    "Wrapping a lone Select in Fieldset when its own label is sufficient"
   ],
-  "whenNotToUse": ["Multiple selection", "Combobox, filterable search, or custom anchor positioning"],
   "accessibility": [
     "Provide label or aria-label on the trigger so the field has an accessible name",
     "Wire description and error copy through the field pattern so assistive tech gets helper text",
@@ -17,5 +23,5 @@
     "Leaving the trigger without label or aria-label",
     "Never set the size prop (if present) of Buttons, IconButtons or other interactive elements passed as addon other than small"
   ],
-  "related": ["Textfield", "Stack", "Surface", "Icon"]
+  "related": ["Fieldset", "Textfield", "Stack", "Surface", "Icon"]
 }

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 }) {
@@ -43,12 +43,11 @@ function SelectRootComponent({ children, className, description, dirty, disabled
 		validationMode,
 		render: /* @__PURE__ */ jsx(Stack, {
 			direction: "column",
-			fillChildren: false,
 			rowGap: "small"
 		}),
 		children: [
 			label && /* @__PURE__ */ jsx(Field.Label, {
-				"data-field-label": "",
+				className: select_module_default.Label,
 				id: fieldLabelId,
 				children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
 			}),
@@ -65,6 +64,7 @@ function SelectRootComponent({ children, className, description, dirty, disabled
 					render: /* @__PURE__ */ jsx(Stack, {
 						direction: "row",
 						render: /* @__PURE__ */ jsx("button", { type: "button" }),
+						columnGap: "x-small",
 						vAlign: "center"
 					}),
 					children: [/* @__PURE__ */ jsx(Text, {
@@ -87,7 +87,8 @@ function SelectRootComponent({ children, className, description, dirty, disabled
 						children: icon
 					})]
 				}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
-					alignItemWithTrigger: true,
+					alignItemWithTrigger: alignListWithTrigger,
+					sideOffset: 2,
 					children: /* @__PURE__ */ jsxs(Select.Popup, {
 						className: select_module_default.SelectPopup,
 						children: [

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

@@ -1,19 +1,21 @@
 var select_module_default = {
-	Select: "select-module_Select_eXv4Y",
-	Trigger: "select-module_Trigger_-wBsg",
-	Value: "select-module_Value_uWHPX",
-	Icon: "select-module_Icon_EOwki",
-	Description: "select-module_Description_OmwmV",
-	SelectPopup: "select-module_SelectPopup_UzGXL",
-	ScrollArrow: "select-module_ScrollArrow_kHlEi",
-	ScrollButton: "select-module_ScrollButton_sHBOa",
-	ScrollArrowUp: "select-module_ScrollArrowUp_DGXS-",
-	ScrollArrowDown: "select-module_ScrollArrowDown_vhJy0",
-	List: "select-module_List_jdUWx",
-	Option: "select-module_Option_KgYqz",
-	Indicator: "select-module_Indicator_YNUuz",
-	Group: "select-module_Group_xzkuA",
-	Separator: "select-module_Separator_Q-ri9"
+	Select: "viraui__select-module__Select_eXv4Y",
+	Label: "viraui__select-module__Label_-Y1fR",
+	Trigger: "viraui__select-module__Trigger_-wBsg",
+	Value: "viraui__select-module__Value_uWHPX",
+	Icon: "viraui__select-module__Icon_EOwki",
+	Description: "viraui__select-module__Description_OmwmV",
+	SelectPopup: "viraui__select-module__SelectPopup_UzGXL",
+	ScrollArrow: "viraui__select-module__ScrollArrow_kHlEi",
+	ScrollButton: "viraui__select-module__ScrollButton_sHBOa",
+	ScrollArrowUp: "viraui__select-module__ScrollArrowUp_DGXS-",
+	ScrollArrowDown: "viraui__select-module__ScrollArrowDown_vhJy0",
+	List: "viraui__select-module__List_jdUWx",
+	OptionText: "viraui__select-module__OptionText_UynBD",
+	Option: "viraui__select-module__Option_KgYqz",
+	Indicator: "viraui__select-module__Indicator_YNUuz",
+	Group: "viraui__select-module__Group_xzkuA",
+	Separator: "viraui__select-module__Separator_Q-ri9"
 };
 //#endregion
 export { select_module_default as default };

package/dist/components/skeleton/skeleton.css

@@ -1 +1 @@
-.skeleton-module_Skeleton_pn7Xk{--skeleton-background:var(--global-contrast);--skeleton-border-radius:var(--radius-small);--skeleton-inline-size:auto;--skeleton-block-size:auto;--skeleton-min-inline-size:var(--space-x-large);--skeleton-min-block-size:var(--space-medium);display:inline-block;box-sizing:border-box;inline-size:var(--skeleton-inline-size);block-size:var(--skeleton-block-size);min-inline-size:var(--skeleton-min-inline-size);min-block-size:var(--skeleton-min-block-size);max-inline-size:100%;background:var(--skeleton-background);border-radius:var(--skeleton-border-radius);vertical-align:middle;animation:skeleton-module_skeleton-fade_XHkG4 var(--duration-slow) var(--easing-standard) infinite alternate;@media (prefers-reduced-motion:reduce){animation:none}}@keyframes skeleton-module_skeleton-fade_XHkG4{0%{opacity:.52}to{opacity:1}}
+.viraui__skeleton-module__Skeleton_pn7Xk{--skeleton-background:var(--global-contrast);--skeleton-border-radius:var(--radius-small);--skeleton-inline-size:auto;--skeleton-block-size:auto;--skeleton-min-inline-size:var(--space-x-large);--skeleton-min-block-size:var(--space-medium);display:inline-block;box-sizing:border-box;inline-size:var(--skeleton-inline-size);block-size:var(--skeleton-block-size);min-inline-size:var(--skeleton-min-inline-size);min-block-size:var(--skeleton-min-block-size);max-inline-size:100%;background:var(--skeleton-background);border-radius:var(--skeleton-border-radius);vertical-align:middle;animation:viraui__skeleton-module__skeleton-fade_XHkG4 var(--duration-slow) var(--easing-standard) infinite alternate;@media (prefers-reduced-motion:reduce){animation:none}}@keyframes viraui__skeleton-module__skeleton-fade_XHkG4{0%{opacity:.52}to{opacity:1}}

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/skeleton/skeleton.module.js

@@ -1,6 +1,6 @@
 var skeleton_module_default = {
-	Skeleton: "skeleton-module_Skeleton_pn7Xk",
-	"skeleton-fade": "skeleton-module_skeleton-fade_XHkG4"
+	Skeleton: "viraui__skeleton-module__Skeleton_pn7Xk",
+	"skeleton-fade": "viraui__skeleton-module__skeleton-fade_XHkG4"
 };
 //#endregion
 export { skeleton_module_default as default };

package/dist/components/slider/slider-control.js

@@ -1,4 +1,3 @@
-"use client";
 import { Stack } from "../stack/stack.js";
 import slider_module_default from "./slider.module.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/slider/slider.css

@@ -1 +1 @@
-.slider-module_Slider_vDNlm{--slider-track-size:var(--space-x-small);--slider-thumb-size:var(--space-medium);--slider-track-background:var(--global-contrast);--slider-progress-background:var(--global-primary);--slider-thumb-background:var(--base-1);inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0;&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]{--slider-progress-background:var(--highlight-red)}&:has(.slider-module_SliderRoot_4JScw[data-disabled]),&[data-disabled]{--slider-track-background:var(--global-disabled-background);--slider-progress-background:var(--global-disabled-foreground);--slider-thumb-background:var(--global-disabled-foreground);cursor:not-allowed}}.slider-module_SliderRoot_4JScw{block-size:100%;min-block-size:0}.slider-module_SliderHeader_gOy9k,.slider-module_SliderRoot_4JScw{inline-size:100%;min-inline-size:0}.slider-module_Value_FaY9i{flex-shrink:0}.slider-module_SliderControl_FQd5-{position:relative;flex:1 1 auto;user-select:none;touch-action:none;inline-size:100%;block-size:var(--slider-track-size);min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{inline-size:var(--slider-track-size);block-size:100%;>.slider-module_Track_wvLEH{inline-size:var(--slider-track-size);block-size:100%}}}.slider-module_Track_wvLEH{position:relative;overflow:visible;inline-size:100%;block-size:var(--slider-track-size);background:var(--slider-track-background);border-radius:var(--radius-infinite)}.slider-module_Indicator_y3JyJ{background:var(--slider-progress-background);border-radius:inherit}.slider-module_Thumb_S-uLF{box-sizing:border-box;inline-size:var(--slider-thumb-size);block-size:calc(var(--slider-thumb-size) / 1.5);background:var(--slider-thumb-background);border:2px solid var(--slider-progress-background);border-radius:var(--radius-x-small);appearance:none;transition:scale var(--easing-elastic) var(--duration-slow);&:not(:disabled,[data-disabled]){cursor:grab}&:not(:disabled,[data-disabled]):active,&:not(:disabled,[data-disabled]):has(>input:active),&:not(:disabled,[data-disabled])[data-dragging]:has(>input:focus){cursor:grabbing;scale:1.2}&:has(>input:focus-visible){outline:2px solid var(--global-foreground);outline-offset:2px;z-index:1}>input:focus-visible{outline:none}}
+.viraui__slider-module__Slider_vDNlm{--slider-track-size:var(--space-x-small);--slider-thumb-size:var(--space-medium);--slider-track-background:var(--global-contrast);--slider-progress-background:var(--global-primary);--slider-thumb-background:contrast-color(var(--global-primary));inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0;&:has([required]) .viraui__slider-module__Label_eQQHf:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]{--slider-progress-background:var(--highlight-red)}&:has(.viraui__slider-module__SliderRoot_4JScw[data-disabled]),&[data-disabled]{--slider-track-background:var(--global-disabled-background);--slider-progress-background:var(--global-disabled-foreground);--slider-thumb-background:var(--global-disabled-foreground);cursor:not-allowed}}.viraui__slider-module__SliderRoot_4JScw{inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0}.viraui__slider-module__SliderHeader_gOy9k{inline-size:100%;min-inline-size:0}.viraui__slider-module__Value_FaY9i{flex-shrink:0}.viraui__slider-module__SliderControl_FQd5-{position:relative;flex:1 1 auto;user-select:none;touch-action:none;inline-size:100%;block-size:var(--slider-track-size);min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{inline-size:var(--slider-track-size);block-size:100%;>.viraui__slider-module__Track_wvLEH{inline-size:var(--slider-track-size);block-size:100%}}}.viraui__slider-module__Track_wvLEH{position:relative;overflow:visible;inline-size:100%;block-size:var(--slider-track-size);background:var(--slider-track-background);border-radius:var(--radius-infinite)}.viraui__slider-module__Indicator_y3JyJ{background:var(--slider-progress-background);border-radius:inherit}.viraui__slider-module__Thumb_S-uLF{box-sizing:border-box;inline-size:var(--slider-thumb-size);block-size:calc(var(--slider-thumb-size) - 2px);background:var(--slider-thumb-background);border:2px solid var(--slider-progress-background);border-radius:var(--radius-x-small);appearance:none;transition:scale var(--easing-elastic) var(--duration-slow);&:not(:disabled,[data-disabled]){cursor:grab}&:not(:disabled,[data-disabled]):active,&:not(:disabled,[data-disabled]):has(>input:active),&:not(:disabled,[data-disabled])[data-dragging]:has(>input:focus){cursor:grabbing;scale:1.2}&:has(>input:focus-visible){outline:var(--outline);outline-offset:var(--outline-offset)}>input:focus-visible{outline:none}}

package/dist/components/slider/slider.js

@@ -1,5 +1,5 @@
-"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 +8,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";
@@ -53,12 +52,11 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
 			children: [(label || showValue) && /* @__PURE__ */ jsxs(Stack, {
 				className: slider_module_default.SliderHeader,
 				direction: isVertical ? "column" : "row",
-				fillChildren: false,
 				columnGap: "small",
 				vAlign: "end",
 				hAlign: isVertical ? "center" : "space-between",
 				children: [label && /* @__PURE__ */ jsx(Field.Label, {
-					"data-field-label": "",
+					className: slider_module_default.Label,
 					children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
 				}), showValue && /* @__PURE__ */ jsx(Text, {
 					className: slider_module_default.Value,

package/dist/components/slider/slider.module.js

@@ -1,12 +1,13 @@
 var slider_module_default = {
-	Slider: "slider-module_Slider_vDNlm",
-	SliderRoot: "slider-module_SliderRoot_4JScw",
-	SliderHeader: "slider-module_SliderHeader_gOy9k",
-	Value: "slider-module_Value_FaY9i",
-	SliderControl: "slider-module_SliderControl_FQd5-",
-	Track: "slider-module_Track_wvLEH",
-	Indicator: "slider-module_Indicator_y3JyJ",
-	Thumb: "slider-module_Thumb_S-uLF"
+	Slider: "viraui__slider-module__Slider_vDNlm",
+	Label: "viraui__slider-module__Label_eQQHf",
+	SliderRoot: "viraui__slider-module__SliderRoot_4JScw",
+	SliderHeader: "viraui__slider-module__SliderHeader_gOy9k",
+	Value: "viraui__slider-module__Value_FaY9i",
+	SliderControl: "viraui__slider-module__SliderControl_FQd5-",
+	Track: "viraui__slider-module__Track_wvLEH",
+	Indicator: "viraui__slider-module__Indicator_y3JyJ",
+	Thumb: "viraui__slider-module__Thumb_S-uLF"
 };
 //#endregion
 export { slider_module_default as default };

package/dist/components/spinner/spinner.css

@@ -1 +1 @@
-.spinner-module_Spinner_qCQzj{--spinner-size:var(--space-x-large);display:inline-block;inline-size:var(--spinner-size);block-size:var(--spinner-size);flex:none;vertical-align:middle;color:currentColor;&[data-dimension=small]{--spinner-size:var(--space-medium)}&[data-dimension=regular]{--spinner-size:var(--space-large)}}.spinner-module_Glyph_OV-cy>path{transform-origin:8px 8px;animation:spinner-module_spinner-bars_jDmaB var(--duration-slowest) infinite}.spinner-module_Glyph_OV-cy>path:first-child,.spinner-module_Glyph_OV-cy>path:nth-child(3){opacity:.3;transform:scaleY(.5);animation-delay:calc(var(--duration-slowest) / -2)}@keyframes spinner-module_spinner-bars_jDmaB{0%,to{opacity:1;transform:scaleY(1)}50%{opacity:.3;transform:scaleY(.5)}}
+.viraui__spinner-module__Spinner_qCQzj{--spinner-size:var(--space-x-large);display:inline-block;inline-size:var(--spinner-size);block-size:var(--spinner-size);flex:none;vertical-align:middle;color:currentColor;&[data-dimension=small]{--spinner-size:var(--space-medium)}&[data-dimension=regular]{--spinner-size:var(--space-large)}}.viraui__spinner-module__Glyph_OV-cy>path{transform-origin:8px 8px;animation:viraui__spinner-module__spinner-bars_jDmaB var(--duration-slowest) infinite}.viraui__spinner-module__Glyph_OV-cy>path:first-child,.viraui__spinner-module__Glyph_OV-cy>path:nth-child(3){opacity:.3;transform:scaleY(.5);animation-delay:calc(var(--duration-slowest) / -2)}@keyframes viraui__spinner-module__spinner-bars_jDmaB{0%,to{opacity:1;transform:scaleY(1)}50%{opacity:.3;transform:scaleY(.5)}}

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,12 +10,12 @@ 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",
-		...color ? { color } : {},
-		...style ? { style } : {},
+		color,
+		style,
 		children: /* @__PURE__ */ jsxs("g", {
 			className: spinner_module_default.Glyph,
 			fill: "currentColor",

package/dist/components/spinner/spinner.module.js

@@ -1,7 +1,7 @@
 var spinner_module_default = {
-	Spinner: "spinner-module_Spinner_qCQzj",
-	Glyph: "spinner-module_Glyph_OV-cy",
-	"spinner-bars": "spinner-module_spinner-bars_jDmaB"
+	Spinner: "viraui__spinner-module__Spinner_qCQzj",
+	Glyph: "viraui__spinner-module__Glyph_OV-cy",
+	"spinner-bars": "viraui__spinner-module__spinner-bars_jDmaB"
 };
 //#endregion
 export { spinner_module_default as default };

package/dist/components/stack/stack.css

@@ -1 +1 @@
-.stack-module_Stack_NR-Ey{--stack-row-gap:0;--stack-column-gap:0;--stack-h-align:initial;--stack-v-align:initial;--stack-padding-inline-start:0;--stack-padding-inline-end:0;--stack-padding-block-start:0;--stack-padding-block-end:0;display:flex;gap:var(--stack-row-gap) var(--stack-column-gap);flex-direction:column;align-items:var(--stack-h-align);justify-content:var(--stack-v-align);max-inline-size:var(--stack-max-width,none);min-inline-size:var(--stack-min-width,none);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--stack-v-align);justify-content:var(--stack-h-align)}&[data-stack-direction=row]{flex-direction:row}&[data-stack-direction=row-reverse]{flex-direction:row-reverse}&[data-stack-inline=true]{display:inline-flex;flex-grow:0}:where(&[data-stack-wrap=true]){flex-wrap:wrap}:where(&[data-stack-has-padding=true]){padding:var(--stack-padding-block-start) var(--stack-padding-inline-end) var(--stack-padding-block-end) var(--stack-padding-inline-start)}:where(&[data-stack-fill-children=true]>*){flex-grow:var(--vira-flex-grow,1)}}
+.viraui__stack-module__Stack_NR-Ey{--stack-row-gap:0;--stack-column-gap:0;--stack-h-align:initial;--stack-v-align:initial;--stack-padding-inline-start:0;--stack-padding-inline-end:0;--stack-padding-block-start:0;--stack-padding-block-end:0;display:flex;gap:var(--stack-row-gap) var(--stack-column-gap);flex-direction:column;align-items:var(--stack-h-align);justify-content:var(--stack-v-align);max-inline-size:var(--stack-max-width,none);min-inline-size:var(--stack-min-width,none);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--stack-v-align);justify-content:var(--stack-h-align)}&[data-stack-direction=row]{flex-direction:row}&[data-stack-direction=row-reverse]{flex-direction:row-reverse}&[data-stack-inline=true]{display:inline-flex;flex-grow:0}:where(&[data-stack-wrap=true]){flex-wrap:wrap}:where(&[data-stack-has-padding=true]){padding:var(--stack-padding-block-start) var(--stack-padding-inline-end) var(--stack-padding-block-end) var(--stack-padding-inline-start)}:where(&[data-stack-fill-children=true]>*){flex-grow:var(--vira-flex-grow,1)}}

package/dist/components/stack/stack.d.ts

@@ -53,13 +53,13 @@ export type StackProps = React.ComponentPropsWithoutRef<'div'> & IntrinsicViraPr
     /**
      * Sets the gap between flex rows using the Vira space token scale.
      *
-     * @default 'medium'
+     * @default No row gap.
      */
     rowGap?: StackSpace;
     /**
      * Sets the gap between flex columns using the Vira space token scale.
      *
-     * @default 'medium'
+     * @default No column gap.
      */
     columnGap?: StackSpace;
     /**

package/dist/components/stack/stack.js

@@ -1,10 +1,9 @@
-"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/stack/stack.module.js

@@ -1,3 +1,3 @@
-var stack_module_default = { Stack: "stack-module_Stack_NR-Ey" };
+var stack_module_default = { Stack: "viraui__stack-module__Stack_NR-Ey" };
 //#endregion
 export { stack_module_default as default };

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 @@
+.viraui__static-noise-module__StaticNoise_ZhNxO{pointer-events:none;margin:0}.viraui__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.2
+     */
+    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,46 @@
+"use client";
+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 = "difference", opacity = .2, 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: "viraui__static-noise-module__StaticNoise_ZhNxO",
+	FilterSvg: "viraui__static-noise-module__FilterSvg_0CP2y"
+};
+//#endregion
+export { static_noise_module_default as default };