@viraui/react 1.0.13 → 1.0.14

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

@@ -13,14 +13,15 @@
     "Cases where a single uniform backdrop blur is sufficient"
   ],
   "accessibility": [
-    "ProgressiveBlur is decorative — the root renders with aria-hidden by default",
+    "ProgressiveBlur is decorative — the root hardcodes `aria-hidden=\"true\"` (not overridable via props)",
     "Parent surface or region must expose any meaningful label or busy state",
-    "Consumer owns position, inset, z-index, and sizing for the overlay placement"
+    "Consumer must position the root non-static (for example `position: relative`/`absolute`/`fixed`) and own inset, z-index, and sizing — ProgressiveBlur does not create a containing block"
   ],
   "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"
+    "Embedding layout positioning rules inside the component stylesheet",
+    "Leaving the ProgressiveBlur root `position: static` so absolute layers escape the intended overlay box"
   ],
   "related": ["Surface", "StaticNoise"],
   "properties": {
@@ -28,11 +29,20 @@
       "blur": {
         "description": "Sets the maximum blur radius applied to the first layer at the selected edge.",
         "refCss": "amount"
+      },
+      "direction": {
+        "description": "Selects the edge where maximum blur starts and fades toward the opposite edge."
+      },
+      "easing": {
+        "description": "Selects the easing curve used to distribute blur factors across internal layers."
+      },
+      "steps": {
+        "description": "Sets the number of internal blur layers. Values are clamped to `2..16`."
       }
     },
     "css": {
       "amount": {
-        "description": "Maximum blur amount for progressive blur layers.",
+        "description": "Sets the maximum blur radius applied to the first layer at the selected edge.",
         "refReact": "blur"
       }
     }

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

@@ -17,8 +17,8 @@ var ProgressiveBlur = ({ blur = "16px", className, direction = "bottom", easing
 			"aria-hidden": "true",
 			className: progressive_blur_module_default.Layer,
 			style: {
-				"--progressive-blur-factor": factor,
-				"--progressive-blur-mask-gradient": maskGradient
+				"--__progressive-blur-factor": factor,
+				"--__progressive-blur-mask-gradient": maskGradient
 			}
 		}, layerIndex);
 	});

package/dist/components/radio/radio.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-radio-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__radio-module__RadioRoot_3uvvn{--vui-radio-size:var(--space-medium);--vui-radio-background:var(--global-contrast);--vui-radio-indicator-color:contrast-color(var(--global-primary));--radio-disk-size:calc(var(--vui-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(--vui-radio-border-color);inline-size:var(--vui-radio-size);block-size:var(--vui-radio-size);background:var(--vui-radio-background);border-radius:100000px;corner-shape:unset;&[data-size=regular]{--vui-radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-radio-background:var(--global-primary);--vui-radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-radio-border-color:var(--highlight-red);--vui-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] &{--vui-radio-background:var(--global-disabled-background);--vui-radio-border-color:#0000;--vui-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(--vui-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}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-radio-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --__radio-disk-size{syntax:"<length>";inherits:true;initial-value:0}.viraui__radio-module__RadioRoot_3uvvn{--vui-radio-size:var(--space-medium);--vui-radio-background:var(--global-contrast);--vui-radio-indicator-color:contrast-color(var(--global-primary));--__radio-disk-size:calc(var(--vui-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(--vui-radio-border-color);inline-size:var(--vui-radio-size);block-size:var(--vui-radio-size);background:var(--vui-radio-background);border-radius:100000px;corner-shape:unset;&[data-size=regular]{--vui-radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-radio-background:var(--global-primary);--vui-radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-radio-border-color:var(--highlight-red);--vui-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] &{--vui-radio-background:var(--global-disabled-background);--vui-radio-border-color:#0000;--vui-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(--vui-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.guide.json

@@ -27,5 +27,38 @@
     "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": ["Fieldset", "Checkbox", "Surface", "Stack"]
+  "related": ["Fieldset", "Checkbox", "Surface", "Stack"],
+  "properties": {
+    "react": {
+      "description": {
+        "description": "Helper copy rendered with `Field.Description` and `Text` for this option."
+      },
+      "hPadding": {
+        "description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."
+      },
+      "label": {
+        "description": "Visible label rendered with shared internal `FieldLabel`."
+      },
+      "size": {
+        "description": "Controls the visual radio size."
+      },
+      "vPadding": {
+        "description": "Sets block padding using one token for both sides or a `[start, end]` tuple."
+      }
+    },
+    "css": {
+      "background": {
+        "description": "Radio control background color."
+      },
+      "border-color": {
+        "description": "Radio control border color; resting default is transparent (same as Checkbox); checked, invalid, and disabled states override."
+      },
+      "indicator-color": {
+        "description": "Radio selected-disk indicator color."
+      },
+      "size": {
+        "description": "Radio control size; size presets adjust footprint."
+      }
+    }
+  }
 }

package/dist/components/radio/radio.js

@@ -10,38 +10,35 @@ 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, {
-		className: radio_module_default.Label,
-		children: /* @__PURE__ */ jsxs(Stack, {
-			direction: "row",
-			columnGap: size === "small" ? "small" : "medium",
+	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,
+		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,
-			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]
-		})
-	}) });
+			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/select/select-group.js

@@ -22,7 +22,7 @@ function SelectGroup({ children, className, label, ...groupProps }) {
 				direction: "row",
 				fillChildren: false,
 				hPadding: "small",
-				vPadding: ["small", "small"],
+				vPadding: ["small", "x-small"],
 				vAlign: "center"
 			}),
 			children: [/* @__PURE__ */ jsx(Text, {

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

@@ -26,4 +26,4 @@ export type SelectOptionProps = SelectItem.Props & {
      */
     indicator?: React.ReactNode;
 };
-export declare function SelectOption({ addon, addonAlign, children, className, disabled, indicator, label, value, ...itemProps }: SelectOptionProps): React.JSX.Element;
+export declare function SelectOption({ addon, addonAlign, children, className, indicator, label, ...itemProps }: SelectOptionProps): React.JSX.Element;

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

@@ -2,21 +2,19 @@ import { clsx } from "../../core/clsx.js";
 import { ChromeCheck } from "../../internal/chrome-icons/chrome-icons.js";
 import { Text } from "../text/text.js";
 import { Stack } from "../stack/stack.js";
+import { Surface } from "../surface/surface.js";
 import select_module_default from "./select.module.js";
 import { SelectIndicatorSlot } from "./select-indicator-slot.js";
-import { Surface } from "../surface/surface.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react";
 //#region src/components/select/select-option.tsx
-function SelectOption({ addon, addonAlign = "center", children, className, disabled, indicator, label, value, ...itemProps }) {
+function SelectOption({ addon, addonAlign = "center", children, className, indicator, label, ...itemProps }) {
 	return /* @__PURE__ */ jsx(Select.Item, {
 		...itemProps,
 		"aria-label": label,
 		label,
 		className: clsx(select_module_default.Option, className),
-		disabled,
 		render: /* @__PURE__ */ jsx(Surface, { radius: "auto" }),
-		value,
 		children: /* @__PURE__ */ jsxs(Stack, {
 			columnGap: "medium",
 			direction: "row",
@@ -29,7 +27,6 @@ function SelectOption({ addon, addonAlign = "center", children, className, disab
 				vAlign: addonAlign,
 				fillChildren: false,
 				children: [addon && /* @__PURE__ */ jsx(Stack, {
-					vPadding: "2x-small",
 					"aria-hidden": "true",
 					"data-grow": "false",
 					"data-shrink": "false",

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

@@ -1,13 +1,16 @@
-import { clsx } from "../../core/clsx.js";
-import select_module_default from "./select.module.js";
+import { Separator } from "../separator/separator.js";
 import { jsx } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
 //#region src/components/select/select-separator.tsx
 function SelectSeparator({ className, orientation = "horizontal", ...separatorProps }) {
 	return /* @__PURE__ */ jsx(Select.Separator, {
 		...separatorProps,
-		className: clsx(select_module_default.Separator, className),
-		orientation
+		className,
+		orientation,
+		render: /* @__PURE__ */ jsx(Separator, {
+			vPadding: "x-small",
+			hPadding: "x-small"
+		})
 	});
 }
 //#endregion

package/dist/components/select/select.css

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

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

@@ -26,27 +26,68 @@
   ],
   "related": ["Fieldset", "Textfield", "Stack", "Surface", "Icon"],
   "properties": {
-    "css": {
-      "input-height": {
-        "description": "Select trigger block size."
+    "react": {
+      "addon": {
+        "description": "Trigger addon rendered inside `Select.Icon`. Pass any React node; use a named icon from `@viraui/icons/react` for content icons."
+      },
+      "alignListWithTrigger": {
+        "description": "When `true`, aligns the list popup width with the trigger via Base UI `alignItemWithTrigger`. Prefer `false` when options use a leading `addon`."
+      },
+      "description": {
+        "description": "Helper copy rendered with `Field.Description` and `Text` while the field is valid."
+      },
+      "error": {
+        "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while the field is invalid."
+      },
+      "Group.label": {
+        "description": "Accessible group label rendered with `Select.GroupLabel`."
+      },
+      "label": {
+        "description": "Visible label rendered with shared internal `FieldLabel`."
       },
+      "Option.addon": {
+        "description": "Decorative leading node rendered before the option label."
+      },
+      "Option.addonAlign": {
+        "description": "Vertical alignment of the addon relative to the option label row."
+      },
+      "Option.indicator": {
+        "description": "Custom indicator node rendered when the option is selected."
+      },
+      "placeholder": {
+        "description": "Placeholder text shown in the trigger when no value is selected."
+      },
+      "ref": {
+        "description": "Ref forwarded to the select trigger button."
+      }
+    },
+    "css": {
       "control-group-background": {
         "description": "Trigger background fill."
       },
-      "control-group-color": {
-        "description": "Trigger text and icon color."
-      },
       "control-group-border-color": {
         "description": "Trigger border color; invalid state overrides."
       },
       "control-group-border-radius": {
         "description": "Trigger corner radius."
       },
-      "trigger-padding-inline-start": {
-        "description": "Trigger inline-start padding."
+      "control-group-color": {
+        "description": "Trigger text and icon color."
+      },
+      "input-height": {
+        "description": "Select trigger block size."
+      },
+      "list-border-radius": {
+        "description": "list border radius custom property on the component root."
+      },
+      "list-padding": {
+        "description": "list padding custom property on the component root."
       },
       "trigger-padding-inline-end": {
         "description": "Trigger inline-end padding."
+      },
+      "trigger-padding-inline-start": {
+        "description": "Trigger inline-start padding."
       }
     }
   }

package/dist/components/select/select.js

@@ -8,11 +8,11 @@ import { FieldLabel } from "../basic-input/field-label.js";
 import { Stack } from "../stack/stack.js";
 import { Elevator } from "../elevator/elevator.js";
 import { IconButton } from "../icon-button/icon-button.js";
+import { Surface } from "../surface/surface.js";
 import select_module_default from "./select.module.js";
 import { SelectGroup } from "./select-group.js";
 import { SelectOption } from "./select-option.js";
 import { SelectSeparator } from "./select-separator.js";
-import { Surface } from "../surface/surface.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { Field } from "@base-ui/react/field";

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

@@ -10,10 +10,8 @@ var ScrollButton = "viraui__select-module__ScrollButton_sHBOa";
 var ScrollArrowUp = "viraui__select-module__ScrollArrowUp_DGXS-";
 var ScrollArrowDown = "viraui__select-module__ScrollArrowDown_vhJy0";
 var List = "viraui__select-module__List_jdUWx";
-var OptionText = "viraui__select-module__OptionText_UynBD";
 var Indicator = "viraui__select-module__Indicator_YNUuz";
 var Group = "viraui__select-module__Group_xzkuA";
-var Separator = "viraui__select-module__Separator_Q-ri9";
 var Value = "viraui__select-module__Value_uWHPX";
 var Option = "viraui__select-module__Option_KgYqz";
 var select_module_default = {
@@ -28,12 +26,10 @@ var select_module_default = {
 	ScrollArrowUp,
 	ScrollArrowDown,
 	List,
-	OptionText,
 	Indicator,
 	Group,
-	Separator,
 	Value,
 	Option
 };
 //#endregion
-export { Description, Group, Icon, Indicator, Label, List, Option, OptionText, ScrollArrow, ScrollArrowDown, ScrollArrowUp, ScrollButton, Select, SelectPopup, Separator, Trigger, Value, select_module_default as default };
+export { Description, Group, Icon, Indicator, Label, List, Option, ScrollArrow, ScrollArrowDown, ScrollArrowUp, ScrollButton, Select, SelectPopup, Trigger, Value, select_module_default as default };

package/dist/components/separator/separator.guide.json

@@ -21,5 +21,32 @@
     "Using Select.Separator for general layout dividers",
     "Replacing Surface borders with Separator for container chrome"
   ],
-  "related": ["Stack", "Surface", "Select"]
+  "related": ["Stack", "Surface", "Select"],
+  "properties": {
+    "react": {
+      "hPadding": {
+        "description": "Sets inline padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple."
+      },
+      "orientation": {
+        "description": "Sets the separator line direction."
+      },
+      "ref": {
+        "description": "Ref forwarded to the rendered line root element."
+      },
+      "render": {
+        "description": "Replaces the default `hr` line root using Base UI render semantics."
+      },
+      "size": {
+        "description": "Sets the line thickness preset."
+      },
+      "vPadding": {
+        "description": "Sets block padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple."
+      }
+    },
+    "css": {
+      "size": {
+        "description": "Separator line thickness."
+      }
+    }
+  }
 }

package/dist/components/shimmer/shimmer.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-shimmer-duration{syntax:"<time>";inherits:false;initial-value:0s}@property --vui-shimmer-spread{syntax:"<length>";inherits:false;initial-value:0}@property --vui-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@property --vui-shimmer-highlight{syntax:"<color>";inherits:false;initial-value:#0000}.viraui__shimmer-module__Shimmer_1k-ZM{--vui-shimmer-duration:var(--duration-slowest);--vui-shimmer-spread:calc(3ch + var(--space-2x-large));--shimmer-base:currentcolor;--vui-shimmer-highlight:oklch(from var(--shimmer-base) min(calc(l + 0.35),1) c h);background-image:linear-gradient(calc(90deg + var(--vui-shimmer-angle)),var(--shimmer-base) calc(50% - var(--vui-shimmer-spread)),color-mix(in oklch,var(--vui-shimmer-highlight),var(--shimmer-base) 50%) calc(50% - var(--vui-shimmer-spread) * .5),var(--vui-shimmer-highlight) 50%,color-mix(in oklch,var(--vui-shimmer-highlight),var(--shimmer-base) 50%) calc(50% + var(--vui-shimmer-spread) * .5),var(--shimmer-base) calc(50% + var(--vui-shimmer-spread)));background-repeat:no-repeat;background-size:calc(200% + var(--vui-shimmer-spread) * 2) 100%;background-position:0 0;background-clip:text;-webkit-text-fill-color:#0000;animation:viraui__shimmer-module__shimmer-slide_V1znC var(--vui-shimmer-duration) linear infinite;&::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));-webkit-text-fill-color:contrast-color(var(--global-primary));background-image:none;background-clip:initial;text-shadow:none}@media (prefers-reduced-motion:reduce){animation:none;background-image:none;-webkit-text-fill-color:currentcolor}}@keyframes viraui__shimmer-module__shimmer-slide_V1znC{0%{background-position:0 0}to{background-position:100% 0}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-shimmer-duration{syntax:"<time>";inherits:false;initial-value:0s}@property --vui-shimmer-spread{syntax:"<length>";inherits:false;initial-value:0}@property --vui-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@property --vui-shimmer-highlight{syntax:"<color>";inherits:false;initial-value:#0000}@property --__shimmer-base{syntax:"<color>";inherits:false;initial-value:currentcolor}.viraui__shimmer-module__Shimmer_1k-ZM{--vui-shimmer-duration:var(--duration-slowest);--vui-shimmer-spread:calc(3ch + var(--space-2x-large));--vui-shimmer-highlight:oklch(from var(--__shimmer-base) min(calc(l + 0.35),1) c h);background-image:linear-gradient(calc(90deg + var(--vui-shimmer-angle)),var(--__shimmer-base) calc(50% - var(--vui-shimmer-spread)),color-mix(in oklch,var(--vui-shimmer-highlight),var(--__shimmer-base) 50%) calc(50% - var(--vui-shimmer-spread) * .5),var(--vui-shimmer-highlight) 50%,color-mix(in oklch,var(--vui-shimmer-highlight),var(--__shimmer-base) 50%) calc(50% + var(--vui-shimmer-spread) * .5),var(--__shimmer-base) calc(50% + var(--vui-shimmer-spread)));background-repeat:no-repeat;background-size:calc(200% + var(--vui-shimmer-spread) * 2) 100%;background-position:0 0;background-clip:text;-webkit-text-fill-color:#0000;animation:viraui__shimmer-module__shimmer-slide_V1znC var(--vui-shimmer-duration) linear infinite;&::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));-webkit-text-fill-color:contrast-color(var(--global-primary));background-image:none;background-clip:initial;text-shadow:none}@media (prefers-reduced-motion:reduce){animation:none;background-image:none;-webkit-text-fill-color:currentcolor}}@keyframes viraui__shimmer-module__shimmer-slide_V1znC{0%{background-position:0 0}to{background-position:100% 0}}}

package/dist/components/shimmer/shimmer.guide.json

@@ -25,39 +25,42 @@
   "related": ["Text", "Title", "Skeleton"],
   "properties": {
     "react": {
+      "angle": {
+        "description": "Sets the shimmer gradient angle offset using any valid CSS angle string.",
+        "refCss": "angle"
+      },
       "duration": {
         "description": "Sets the shimmer sweep duration using any valid CSS time string.",
         "refCss": "duration"
       },
+      "highlightColor": {
+        "description": "Overrides the shimmer highlight color when relative base lightness tuning is not used.",
+        "refCss": "highlight"
+      },
+      "ref": {
+        "description": "Ref forwarded to the rendered shimmer root element."
+      },
       "spread": {
         "description": "Sets the shimmer highlight spread using any valid CSS length string.",
         "refCss": "spread"
-      },
-      "angle": {
-        "description": "Sets the shimmer gradient angle offset using any valid CSS angle string.",
-        "refCss": "angle"
-      },
-      "highlightColor": {
-        "description": "Overrides the shimmer highlight color.",
-        "refCss": "highlight"
       }
     },
     "css": {
-      "duration": {
-        "description": "Shimmer animation duration.",
-        "refReact": "duration"
-      },
-      "spread": {
-        "description": "Shimmer highlight spread width.",
-        "refReact": "spread"
-      },
       "angle": {
         "description": "Shimmer gradient angle offset.",
         "refReact": "angle"
       },
+      "duration": {
+        "description": "Shimmer animation duration.",
+        "refReact": "duration"
+      },
       "highlight": {
         "description": "Shimmer highlight color.",
         "refReact": "highlightColor"
+      },
+      "spread": {
+        "description": "Shimmer highlight spread width.",
+        "refReact": "spread"
       }
     }
   }

package/dist/components/skeleton/skeleton.guide.json

@@ -23,50 +23,43 @@
   "related": ["Avatar"],
   "properties": {
     "react": {
-      "radius": {
-        "description": "Sets the corner radius from the Vira radius token scale.",
-        "refCss": "border-radius"
-      },
-      "width": {
-        "description": "Sets the skeleton inline size.",
-        "refCss": "inline-size"
-      },
       "height": {
-        "description": "Sets the skeleton block size.",
-        "refCss": "block-size"
+        "description": "Sets the skeleton block size using any valid CSS size string."
+      },
+      "minHeight": {
+        "description": "Sets the skeleton minimum block size using any valid CSS size string."
       },
       "minWidth": {
-        "description": "Sets the skeleton minimum inline size.",
-        "refCss": "min-inline-size"
+        "description": "Sets the skeleton minimum inline size using any valid CSS size string."
       },
-      "minHeight": {
-        "description": "Sets the skeleton minimum block size.",
-        "refCss": "min-block-size"
+      "radius": {
+        "description": "Sets the corner radius from the Vira radius token scale."
+      },
+      "ref": {
+        "description": "Ref forwarded to the rendered skeleton root element."
+      },
+      "width": {
+        "description": "Sets the skeleton inline size using any valid CSS size string."
       }
     },
     "css": {
-      "border-radius": {
-        "description": "Skeleton corner radius.",
-        "refReact": "radius"
-      },
-      "inline-size": {
-        "description": "Skeleton inline size.",
-        "refReact": "width"
+      "background": {
+        "description": "Skeleton placeholder background color."
       },
       "block-size": {
-        "description": "Skeleton block size.",
-        "refReact": "height"
+        "description": "Skeleton block size."
       },
-      "min-inline-size": {
-        "description": "Skeleton minimum inline size.",
-        "refReact": "minWidth"
+      "border-radius": {
+        "description": "Skeleton corner radius."
+      },
+      "inline-size": {
+        "description": "Skeleton inline size."
       },
       "min-block-size": {
-        "description": "Skeleton minimum block size.",
-        "refReact": "minHeight"
+        "description": "Skeleton minimum block size."
       },
-      "background": {
-        "description": "Skeleton placeholder background color."
+      "min-inline-size": {
+        "description": "Skeleton minimum inline size."
       }
     }
   }

package/dist/components/slider/slider.guide.json

@@ -22,21 +22,41 @@
   ],
   "related": ["Textfield", "Stack", "Text"],
   "properties": {
-    "css": {
-      "track-size": {
-        "description": "Slider track thickness."
+    "react": {
+      "description": {
+        "description": "Helper copy rendered with `Field.Description` and `Text` while the field is valid."
       },
-      "thumb-size": {
-        "description": "Slider thumb size."
+      "error": {
+        "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`."
       },
-      "track-background": {
-        "description": "Slider track background color."
+      "label": {
+        "description": "Visible label rendered with shared internal `FieldLabel`."
+      },
+      "required": {
+        "description": "Marks the slider as required and shows a required indicator on the label."
       },
+      "showValue": {
+        "description": "Renders the formatted current value via `Slider.Value` and `Text`."
+      },
+      "thumbAriaLabel": {
+        "description": "Accessible name for the thumb when `label` is omitted. Pass a string to name the first thumb (single-thumb slider, or the minimum thumb on a range). Pass a two-element tuple to name each range thumb in order; on a single-thumb slider only the first tuple value is applied."
+      }
+    },
+    "css": {
       "progress-background": {
         "description": "Slider filled progress color."
       },
       "thumb-background": {
         "description": "Slider thumb fill color."
+      },
+      "thumb-size": {
+        "description": "Slider thumb size."
+      },
+      "track-background": {
+        "description": "Slider track background color."
+      },
+      "track-size": {
+        "description": "Slider track thickness."
       }
     }
   }