@viraui/react 0.0.22 → 0.0.24

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

@@ -1,8 +1,8 @@
 var linear_progress_module_default = {
-	LinearProgress: "linear-progress-module_LinearProgress_-KN0j",
-	"linear-progress-indeterminate": "linear-progress-module_linear-progress-indeterminate_g0cSO",
-	Track: "linear-progress-module_Track_qUz8P",
-	Indicator: "linear-progress-module_Indicator_maaZF"
+	LinearProgress: "viraui__linear-progress-module__LinearProgress_-KN0j",
+	"linear-progress-indeterminate": "viraui__linear-progress-module__linear-progress-indeterminate_g0cSO",
+	Track: "viraui__linear-progress-module__Track_qUz8P",
+	Indicator: "viraui__linear-progress-module__Indicator_maaZF"
 };
 //#endregion
 export { linear_progress_module_default as default };

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

@@ -1,4 +1,3 @@
-"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";

package/dist/components/masonry/masonry.css

@@ -1 +1 @@
-.masonry-module_Masonry_l7c8U{--masonry-gap:var(--space-large);--masonry-column-fill:balance;--masonry-column-rule-color:var(--global-contrast);display:block;column-gap:var(--masonry-gap);column-fill:var(--masonry-column-fill);column-rule-color:var(--masonry-column-rule-color);columns:var(--masonry-column-width,auto) var(--masonry-column-count,auto);max-inline-size:100%}.masonry-module_Item_ywXwo{display:block;break-inside:avoid;margin:0;padding-block-end:var(--masonry-gap);&[data-masonry-item-span-all=true]{column-span:all}}
+.viraui__masonry-module__Masonry_l7c8U{--masonry-gap:var(--space-large);--masonry-column-fill:balance;--masonry-column-rule-color:var(--global-contrast);display:block;column-gap:var(--masonry-gap);column-fill:var(--masonry-column-fill);column-rule-color:var(--masonry-column-rule-color);columns:var(--masonry-column-width,auto) var(--masonry-column-count,auto)}.viraui__masonry-module__Item_ywXwo{display:block;break-inside:avoid;margin:0;padding-block-end:var(--masonry-gap);&[data-masonry-item-span-all=true]{column-span:all}}

package/dist/components/masonry/masonry.js

@@ -1,4 +1,3 @@
-"use client";
 import './masonry.css';
 import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
@@ -14,8 +13,8 @@ var MasonryRoot = ({ children, className, columnCount = 4, columnFill = "balance
 		"--masonry-gap": resolveThemeValue(gap, "space", "var(--space-large)"),
 		"--masonry-column-fill": columnFill,
 		...usesColumnWidth ? { "--masonry-column-width": columnWidth } : { "--masonry-column-count": `${columnCount}` },
-		...columnRuleWidth ? { columnRuleWidth } : {},
-		...columnRuleStyle ? { columnRuleStyle } : {},
+		columnRuleWidth,
+		columnRuleStyle,
 		...style
 	};
 	return useRender({

package/dist/components/masonry/masonry.module.js

@@ -1,6 +1,6 @@
 var masonry_module_default = {
-	Masonry: "masonry-module_Masonry_l7c8U",
-	Item: "masonry-module_Item_ywXwo"
+	Masonry: "viraui__masonry-module__Masonry_l7c8U",
+	Item: "viraui__masonry-module__Item_ywXwo"
 };
 //#endregion
 export { masonry_module_default as default };

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

@@ -1 +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))}}
+.viraui__progressive-blur-module__ProgressiveBlur_eIxTK{--progressive-blur:16px;pointer-events:none}.viraui__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);.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=top] &{--progressive-blur-mask-image:linear-gradient(to top,var(--progressive-blur-mask-gradient))}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=right] &{--progressive-blur-mask-image:linear-gradient(to right,var(--progressive-blur-mask-gradient))}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=bottom] &{--progressive-blur-mask-image:linear-gradient(to bottom,var(--progressive-blur-mask-gradient))}.viraui__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.module.js

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

package/dist/components/radio/radio-group.d.ts

@@ -1,44 +1,11 @@
-import { FieldRoot, RadioGroup as RadioGroupPrimitive } from '@base-ui/react';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
-import type * as React from 'react';
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react';
 /**
  * Public RadioGroup props.
  *
- * Thin wrapper around Base UI `RadioGroup` with group-level Field validation.
- * Layout and spacing between options are owned by the consumer.
+ * Thin wrapper around Base UI `RadioGroup` with default option spacing.
+ * Compose with `Field.Root` and `Fieldset` for group labels, validation, and copy.
  *
  * @default Base UI pass-through props keep upstream defaults.
  */
-export type RadioGroupProps = RadioGroupPrimitive.Props & Omit<FieldRoot.Props, 'ref'> & {
-    /**
-     * Adds `data-grow="false"` to the field root when false.
-     *
-     * @default The field root does not render a grow attribute.
-     */
-    grow?: IntrinsicViraProps['grow'];
-    /**
-     * Adds `data-shrink="false"` to the field root when false.
-     *
-     * @default The field root does not render a shrink attribute.
-     */
-    shrink?: IntrinsicViraProps['shrink'];
-    /**
-     * Visible group label rendered with shared internal `FieldLabel`.
-     *
-     * @default No label is rendered.
-     */
-    label?: React.ReactNode;
-    /**
-     * Group helper copy rendered below the options while valid.
-     *
-     * @default No description is rendered.
-     */
-    description?: React.ReactNode;
-    /**
-     * Group error copy rendered below the options when invalid.
-     *
-     * @default No static error copy is rendered.
-     */
-    error?: React.ReactNode;
-};
-export declare const RadioGroup: React.FC<RadioGroupProps>;
+export type RadioGroupProps<Value = string> = RadioGroupPrimitive.Props<Value>;
+export declare const RadioGroup: <Value>({ children, className, ...props }: RadioGroupProps<Value>) => import("react").JSX.Element;

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

@@ -1,54 +1,16 @@
-"use client";
-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 radio_module_default from "./radio.module.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Field, Fieldset, RadioGroup } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+import { RadioGroup } from "@base-ui/react";
 //#region src/components/radio/radio-group.tsx
-var RadioGroup$1 = ({ children, className, description, error, invalid, label, name, disabled, dirty, touched, validate, validationDebounceTime, validationMode, ...radioGroupProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(radioGroupProps);
-	return /* @__PURE__ */ jsx(Field.Root, {
-		...intrinsicAttributes,
-		className: radio_module_default.RadioGroup,
-		dirty,
-		disabled,
-		invalid,
-		name,
-		touched,
-		validate,
-		validationDebounceTime,
-		validationMode,
-		children: /* @__PURE__ */ jsxs(Stack, {
-			className: radio_module_default.RadioFieldset,
-			fillChildren: false,
-			render: /* @__PURE__ */ jsx(Fieldset.Root, { disabled }),
-			rowGap: "small",
-			children: [
-				label && /* @__PURE__ */ jsx(Fieldset.Legend, {
-					render: /* @__PURE__ */ jsx(FieldLabel, {}),
-					children: label
-				}),
-				(description || error) && /* @__PURE__ */ jsx(FieldHelperCopy, {
-					description,
-					error
-				}),
-				/* @__PURE__ */ jsx(RadioGroup, {
-					...componentProps,
-					className,
-					disabled,
-					render: /* @__PURE__ */ jsx(Stack, {
-						fillChildren: false,
-						vPadding: ["small", 0],
-						rowGap: "small"
-					}),
-					name,
-					children
-				})
-			]
-		})
-	});
-};
+var RadioGroup$1 = ({ children, className, ...props }) => /* @__PURE__ */ jsx(RadioGroup, {
+	...props,
+	className,
+	render: /* @__PURE__ */ jsx(Stack, {
+		"data-radiogroup": true,
+		fillChildren: false,
+		rowGap: "small"
+	}),
+	children
+});
 //#endregion
 export { RadioGroup$1 as RadioGroup };

package/dist/components/radio/radio.css

@@ -1 +1 @@
-.radio-module_RadioGroup_vnd3F{&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.radio-module_RadioFieldset_g50K8{min-inline-size:0;margin:0;padding:0}.radio-module_RadioRoot_3uvvn{--radio-size:var(--space-medium);--radio-background:var(--global-contrast);--radio-border-color:transparent;--radio-indicator-color:contrast-color(var(--global-primary));--radio-disk-size:calc(var(--radio-size) / 2);position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--radio-border-color);inline-size:var(--radio-size);block-size:var(--radio-size);background:var(--radio-background);border-radius:100000px;corner-shape:unset;&[data-size=regular]{--radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--radio-background:var(--global-primary);--radio-border-color:var(--global-primary);box-shadow:none;cursor:not-allowed}&[data-invalid]:not([data-disabled]),.radio-module_RadioGroup_vnd3F[data-invalid] &:not([data-disabled]){--radio-border-color:var(--highlight-red);--radio-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.radio-module_RadioGroup_vnd3F[data-disabled] &{--radio-background:var(--global-disabled-background);--radio-border-color:transparent;--radio-indicator-color:var(--global-disabled-foreground);box-shadow:none}}.radio-module_Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--radio-indicator-color)}.radio-module_Disk_pV-Q1{inline-size:var(--radio-disk-size);aspect-ratio:1/1;border-radius:100000px;corner-shape:unset;background:currentColor}.radio-module_RadioRoot_3uvvn:not([data-checked]) .radio-module_Disk_pV-Q1{display:none}
+.viraui__radio-module__RadioRoot_3uvvn{--radio-size:var(--space-medium);--radio-background:var(--global-contrast);--radio-border-color:transparent;--radio-indicator-color:contrast-color(var(--global-primary));--radio-disk-size:calc(var(--radio-size) / 2);position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--radio-border-color);inline-size:var(--radio-size);block-size:var(--radio-size);background:var(--radio-background);border-radius:100000px;corner-shape:unset;&[data-size=regular]{--radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--radio-background:var(--global-primary);--radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--radio-border-color:var(--highlight-red);--radio-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--radio-background:var(--global-disabled-background);--radio-border-color:transparent;--radio-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__radio-module__Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--radio-indicator-color)}.viraui__radio-module__Disk_pV-Q1{inline-size:var(--radio-disk-size);aspect-ratio:1/1;border-radius:100000px;corner-shape:unset;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}

package/dist/components/radio/radio.d.ts

@@ -5,7 +5,7 @@ import type * as React from 'react';
  * Public Radio props.
  *
  * Self-contained option row for use inside `RadioGroup`. Group-level `name`,
- * `invalid`, and `error` belong on `RadioGroup`, not on individual options.
+ * `invalid`, and `error` belong on an external `Field.Root` and `Fieldset`, not on individual options.
  *
  * @default Base UI pass-through props keep upstream defaults.
  */

package/dist/components/radio/radio.guide.json

@@ -2,25 +2,29 @@
   "name": "Radio",
   "summary": "Mutually exclusive choice within a RadioGroup, with optional per-option label and helper text.",
   "whenToUse": [
-    "Single selection from a small set of related options",
+    "Single selection from a small set of related options inside RadioGroup",
+    "RadioGroup alone inside Field.Root when each Radio has its own label and no shared group legend is needed",
+    "Field.Root > Fieldset render={<RadioGroup<Value> />} when the group needs a shared legend, description, or error",
     "Card-style or custom layouts where each option is wrapped in Surface or consumer markup",
-    "Form fields that require one answer from a named group"
+    "Typed option unions with RadioGroup<'ssd' | 'hdd'> for value, defaultValue, and onValueChange safety"
   ],
   "whenNotToUse": [
     "Independent boolean toggles (use Checkbox or Switch)",
-    "Multi-select sets (use Checkbox)",
-    "Options rendered outside a RadioGroup wrapper"
+    "Multi-select sets (use CheckboxGroup)",
+    "Options rendered outside a RadioGroup wrapper",
+    "Assuming Fieldset is mandatory for every RadioGroup — add Fieldset only for shared legend or group copy",
+    "Group legend, description, or validation on RadioGroup props — use Field.Root and Fieldset instead"
   ],
   "accessibility": [
     "Wrap options in RadioGroup so the group exposes a shared name",
     "Provide visible label or aria-label on each option so radios have accessible names",
-    "Surface group invalid state and error copy through RadioGroup, not individual Radio options"
+    "Surface group invalid state and error copy through Field.Root and Fieldset, not individual Radio options"
   ],
   "antiPatterns": [
     "Rendering Radio outside RadioGroup",
-    "Putting invalid or error on a single Radio instead of RadioGroup",
-    "Expecting RadioGroup to add spacing or grid layout between options",
+    "Putting invalid or error on a single Radio instead of the enclosing Field.Root and Fieldset",
+    "Omitting the RadioGroup generic when option value props form a restricted union",
     "Importing @viraui/react/radio/radio.css or other component CSS subpaths in consumer bootstrap"
   ],
-  "related": ["Checkbox", "Surface", "Stack"]
+  "related": ["Fieldset", "Checkbox", "Surface", "Stack"]
 }

package/dist/components/radio/radio.js

@@ -1,4 +1,3 @@
-"use client";
 import './radio.css';
 import { clsx } from "../../core/clsx.js";
 import { Stack } from "../stack/stack.js";
@@ -11,35 +10,38 @@ import { Radio } from "@base-ui/react/radio";
 //#region src/components/radio/radio.tsx
 var Radio$1 = ({ className, description, disabled, id, label, ref, size = "small", vPadding, hPadding, value, ...radioRootProps }) => {
 	const hasTextDescription = Boolean(description);
-	return /* @__PURE__ */ jsx(Field.Item, { children: /* @__PURE__ */ jsx(Field.Label, { children: /* @__PURE__ */ jsxs(Stack, {
-		direction: "row",
-		columnGap: size === "small" ? "small" : "medium",
-		fillChildren: false,
-		vAlign: hasTextDescription ? "start" : "center",
-		...hPadding !== void 0 ? { hPadding } : {},
-		...vPadding !== void 0 ? { vPadding } : {},
-		children: [/* @__PURE__ */ jsx(Radio.Root, {
-			...radioRootProps,
-			className: clsx(radio_module_default.RadioRoot, className),
-			"data-size": size,
-			disabled,
-			id,
-			ref,
-			value,
-			children: /* @__PURE__ */ jsx(Radio.Indicator, {
-				className: radio_module_default.Indicator,
-				children: /* @__PURE__ */ jsx("span", { className: radio_module_default.Disk })
-			})
-		}), label || description ? /* @__PURE__ */ jsxs(Stack, {
-			direction: "column",
+	return /* @__PURE__ */ jsx(Field.Item, { children: /* @__PURE__ */ jsx(Field.Label, {
+		className: radio_module_default.Label,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			columnGap: size === "small" ? "small" : "medium",
 			fillChildren: false,
-			rowGap: size === "small" ? "2x-small" : "x-small",
-			children: [label && /* @__PURE__ */ jsx(FieldLabel, {
-				size: size === "small" ? "small" : "medium",
-				children: label
-			}), /* @__PURE__ */ jsx(FieldHelperCopy, { description })]
-		}) : null]
-	}) }) });
+			vAlign: hasTextDescription ? "start" : "center",
+			hPadding,
+			vPadding,
+			children: [/* @__PURE__ */ jsx(Radio.Root, {
+				...radioRootProps,
+				className: clsx(radio_module_default.RadioRoot, className),
+				"data-size": size,
+				disabled,
+				id,
+				ref,
+				value,
+				children: /* @__PURE__ */ jsx(Radio.Indicator, {
+					className: radio_module_default.Indicator,
+					children: /* @__PURE__ */ jsx("span", { className: radio_module_default.Disk })
+				})
+			}), label || description ? /* @__PURE__ */ jsxs(Stack, {
+				direction: "column",
+				fillChildren: false,
+				rowGap: "small",
+				children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+					size: size === "small" ? "small" : "medium",
+					children: label
+				}), /* @__PURE__ */ jsx(FieldHelperCopy, { description })]
+			}) : null]
+		})
+	}) });
 };
 //#endregion
 export { Radio$1 as Radio };

package/dist/components/radio/radio.module.js

@@ -1,9 +1,7 @@
 var radio_module_default = {
-	RadioGroup: "radio-module_RadioGroup_vnd3F",
-	RadioFieldset: "radio-module_RadioFieldset_g50K8",
-	RadioRoot: "radio-module_RadioRoot_3uvvn",
-	Indicator: "radio-module_Indicator_Ecavw",
-	Disk: "radio-module_Disk_pV-Q1"
+	RadioRoot: "viraui__radio-module__RadioRoot_3uvvn",
+	Indicator: "viraui__radio-module__Indicator_Ecavw",
+	Disk: "viraui__radio-module__Disk_pV-Q1"
 };
 //#endregion
 export { radio_module_default as default };

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

@@ -1,4 +1,3 @@
-"use client";
 import { clsx } from "../../core/clsx.js";
 import { Stack } from "../stack/stack.js";
 import { Text } from "../text/text.js";
@@ -23,6 +22,7 @@ function SelectGroup({ children, className, label, ...groupProps }) {
 				direction: "row",
 				fillChildren: false,
 				hPadding: "small",
+				vPadding: ["small", "small"],
 				vAlign: "center"
 			}),
 			children: [/* @__PURE__ */ jsx(Text, {

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.
@@ -12,11 +13,17 @@ export type SelectOptionProps = SelectItem.Props & {
      * @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({ addon, 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,52 +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 { 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({ addon, 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__ */ 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
+			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
+				})
 			})]
-		}), /* @__PURE__ */ jsx(SelectIndicatorSlot, {
-			interactive: true,
-			children: indicator ?? /* @__PURE__ */ jsx(Icon, {
-				name: "Check",
-				size: 16
-			})
-		})]
+		})
 	});
 }
 //#endregion

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

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

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_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)}
+.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.guide.json

@@ -5,9 +5,14 @@
     "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"
+    "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",
@@ -18,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

@@ -43,12 +43,11 @@ function SelectRootComponent({ alignListWithTrigger = false, children, className
 		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({ alignListWithTrigger = false, children, className
 					render: /* @__PURE__ */ jsx(Stack, {
 						direction: "row",
 						render: /* @__PURE__ */ jsx("button", { type: "button" }),
+						columnGap: "x-small",
 						vAlign: "center"
 					}),
 					children: [/* @__PURE__ */ jsx(Text, {
@@ -88,6 +88,7 @@ function SelectRootComponent({ alignListWithTrigger = false, children, className
 					})]
 				}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
 					alignItemWithTrigger: alignListWithTrigger,
+					sideOffset: 2,
 					children: /* @__PURE__ */ jsxs(Select.Popup, {
 						className: select_module_default.SelectPopup,
 						children: [

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

@@ -1,20 +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",
-	OptionText: "select-module_OptionText_UynBD",
-	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/separator/index.d.ts

@@ -0,0 +1,2 @@
+export { Separator } from './separator';
+export type { SeparatorProps } from './separator';

package/dist/components/separator/separator.css

@@ -0,0 +1 @@
+.viraui__separator-module__Line_xXOe9{--separator-size:1px;border:0;margin:0;background:oklab(from var(--global-contrast) l a b/20%);&[data-separator-orientation=horizontal]{inline-size:100%;block-size:var(--separator-size)}&[data-separator-orientation=vertical]{inline-size:var(--separator-size);block-size:100%}}