@viraui/react 1.0.12 → 1.0.14

package/dist/components/menu/menu.guide.json

@@ -0,0 +1,101 @@
+{
+  "name": "Menu",
+  "structure": "<Menu>\n  <Menu.Trigger />\n  <Menu.Popup>\n    <Menu.Item />\n    <Menu.LinkItem />\n    <Menu.CheckboxItem />\n    <Menu.Group label=\"…\">\n      <Menu.Item />\n    </Menu.Group>\n    <Menu.RadioGroup>\n      <Menu.RadioItem value=\"…\" />\n    </Menu.RadioGroup>\n    <Menu.Separator />\n    <Menu.Submenu>\n      <Menu.SubmenuTrigger />\n      <Menu.Popup>…</Menu.Popup>\n    </Menu.Submenu>\n  </Menu.Popup>\n</Menu>",
+  "summary": "Compound menu built on Base UI Menu with `Menu.Trigger`, `Menu.Popup`, unified item rows, groups, checkbox/radio items, nested submenus, destructive sentiment, and `Menu.createHandle` for detached triggers; `Popup` owns Portal + Positioner + Elevator/Surface Select-like list chrome.",
+  "whenToUse": [
+    "Action menus anchored to a button or icon button",
+    "Nested command lists with checkbox or radio options that stay open on toggle",
+    "Link rows mixed with actions in one menu surface",
+    "Detached or multi-trigger menus via `Menu.createHandle`"
+  ],
+  "whenNotToUse": [
+    "Page-blocking modal flows (use Dialog)",
+    "Form field single-select from a long list (use Select)",
+    "Context menu or menubar chrome (not in this surface)",
+    "System-wide transient alerts (use Toast)"
+  ],
+  "accessibility": [
+    "Give the trigger an accessible name (`Button` label or `aria-label` on IconButton)",
+    "Use `Menu.Group` `label` for grouped sections so assistive tech gets a group name",
+    "Prefer Base UI keyboard navigation; do not trap focus outside the menu pattern"
+  ],
+  "antiPatterns": [
+    "Expecting `Menu.Arrow`, `Menu.Backdrop`, or public Portal/Positioner/Viewport exports",
+    "Closing checkbox/radio items on click by default when the menu should stay open for multi-toggle",
+    "Using physical left/right CSS that breaks RTL submenu chevrons"
+  ],
+  "related": ["Button", "IconButton", "Select", "Popover", "Tooltip", "Surface", "Stack"],
+  "properties": {
+    "react": {
+      "CheckboxItem.addon": {
+        "description": "Decorative leading node rendered before the item label."
+      },
+      "CheckboxItem.addonAlign": {
+        "description": "Vertical alignment of the addon relative to the label row."
+      },
+      "CheckboxItem.indicator": {
+        "description": "Custom indicator node when checked."
+      },
+      "CheckboxItem.note": {
+        "description": "End-aligned secondary text (e.g. keyboard shortcut) before the check indicator. Rendered muted `x-small`."
+      },
+      "CheckboxItem.sentiment": {
+        "description": "Visual sentiment. `destructive` uses highlight-red wash + text."
+      },
+      "Group.label": {
+        "description": "Accessible group label rendered with `Menu.GroupLabel`."
+      },
+      "Item.addon": {
+        "description": "Decorative leading node rendered before the item label."
+      },
+      "Item.addonAlign": {
+        "description": "Vertical alignment of the addon relative to the label row."
+      },
+      "Item.note": {
+        "description": "End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `x-small` at the end of the row (replaces the empty indicator spacer when set)."
+      },
+      "Item.sentiment": {
+        "description": "Visual sentiment. `destructive` uses highlight-red wash + text."
+      },
+      "LinkItem.addon": {
+        "description": "Decorative leading node rendered before the item label."
+      },
+      "LinkItem.addonAlign": {
+        "description": "Vertical alignment of the addon relative to the label row."
+      },
+      "LinkItem.note": {
+        "description": "End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `x-small` at the end of the row (replaces the empty indicator spacer when set)."
+      },
+      "LinkItem.sentiment": {
+        "description": "Visual sentiment. `destructive` uses highlight-red wash + text."
+      },
+      "RadioGroup.label": {
+        "description": "Optional accessible group label rendered with `Menu.GroupLabel`."
+      },
+      "RadioItem.addon": {
+        "description": "Decorative leading node rendered before the item label."
+      },
+      "RadioItem.addonAlign": {
+        "description": "Vertical alignment of the addon relative to the label row."
+      },
+      "RadioItem.indicator": {
+        "description": "Custom indicator node when selected."
+      },
+      "RadioItem.note": {
+        "description": "End-aligned secondary text (e.g. keyboard shortcut) before the check indicator. Rendered muted `x-small`."
+      },
+      "RadioItem.sentiment": {
+        "description": "Visual sentiment. `destructive` uses highlight-red wash + text."
+      },
+      "SubmenuTrigger.addon": {
+        "description": "Decorative leading node rendered before the item label."
+      },
+      "SubmenuTrigger.addonAlign": {
+        "description": "Vertical alignment of the addon relative to the label row."
+      },
+      "SubmenuTrigger.sentiment": {
+        "description": "Visual sentiment. `destructive` uses highlight-red wash + text."
+      }
+    }
+  }
+}

package/dist/components/menu/menu.js

@@ -0,0 +1,36 @@
+import './menu.css';
+import { MenuCheckboxItem } from "./menu-checkbox-item.js";
+import { MenuGroup } from "./menu-group.js";
+import { MenuItem } from "./menu-item.js";
+import { MenuLinkItem } from "./menu-link-item.js";
+import { MenuPopup } from "./menu-popup.js";
+import { MenuRadioGroup } from "./menu-radio-group.js";
+import { MenuRadioItem } from "./menu-radio-item.js";
+import { MenuSeparator } from "./menu-separator.js";
+import { MenuSubmenuTrigger } from "./menu-submenu-trigger.js";
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/menu/menu.tsx
+var MenuTrigger = Menu.Trigger;
+var MenuSubmenu = Menu.SubmenuRoot;
+var MenuRootComponent = ({ children, ...otherProps }) => /* @__PURE__ */ jsx(Menu.Root, {
+	...otherProps,
+	children
+});
+var { Arrow: _MenuArrow, Backdrop: _MenuBackdrop, Portal: _MenuPortal, Positioner: _MenuPositioner, Popup: _MenuPopup, Viewport: _MenuViewport, CheckboxItemIndicator: _MenuCheckboxItemIndicator, RadioItemIndicator: _MenuRadioItemIndicator, GroupLabel: _MenuGroupLabel } = Menu;
+var Menu$1 = Object.assign(MenuRootComponent, {
+	Trigger: Menu.Trigger,
+	Popup: MenuPopup,
+	Item: MenuItem,
+	LinkItem: MenuLinkItem,
+	CheckboxItem: MenuCheckboxItem,
+	RadioItem: MenuRadioItem,
+	RadioGroup: MenuRadioGroup,
+	Group: MenuGroup,
+	Separator: MenuSeparator,
+	Submenu: Menu.SubmenuRoot,
+	SubmenuTrigger: MenuSubmenuTrigger,
+	createHandle: Menu.createHandle
+});
+//#endregion
+export { Menu$1 as Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger };

package/dist/components/menu/menu.module.js

@@ -0,0 +1,13 @@
+//#region src/components/menu/menu.module.css
+var MenuPopup = "viraui__menu-module__MenuPopup_GkrGa";
+var Indicator = "viraui__menu-module__Indicator_btL99";
+var Group = "viraui__menu-module__Group_Orz5Y";
+var Item = "viraui__menu-module__Item_9zmEO";
+var menu_module_default = {
+	MenuPopup,
+	Indicator,
+	Group,
+	Item
+};
+//#endregion
+export { Group, Indicator, Item, MenuPopup, menu_module_default as default };

package/dist/components/meter/meter.guide.json

@@ -25,15 +25,26 @@
   ],
   "related": ["LinearProgress", "Slider", "Text"],
   "properties": {
+    "react": {
+      "description": {
+        "description": "Static helper copy rendered with `Text` below the meter track."
+      },
+      "label": {
+        "description": "Visible label rendered through `Meter.Label` with shared internal `FieldLabel`."
+      },
+      "showValue": {
+        "description": "Renders the formatted current value via `Meter.Value` and `Text`."
+      }
+    },
     "css": {
-      "track-size": {
-        "description": "Meter track thickness on the root."
+      "indicator-color": {
+        "description": "Determinate meter indicator color."
       },
       "track-background": {
         "description": "Meter track background color."
       },
-      "indicator-color": {
-        "description": "Determinate meter indicator color."
+      "track-size": {
+        "description": "Meter track thickness on the root."
       }
     }
   }

package/dist/components/meter/meter.js

@@ -43,7 +43,6 @@ var Meter$1 = ({ className, description, label, showValue = false, value, ...oth
 			children: /* @__PURE__ */ jsx(Meter.Indicator, { className: meter_module_default.Indicator })
 		}),
 		description && /* @__PURE__ */ jsx(Text, {
-			className: meter_module_default.Description,
 			size: "small",
 			tone: "muted",
 			children: description

package/dist/components/popover/popover-sheet.js

@@ -2,8 +2,8 @@ import { ChromeXmark } from "../../internal/chrome-icons/chrome-icons.js";
 import { Text } from "../text/text.js";
 import { Stack } from "../stack/stack.js";
 import { IconButton } from "../icon-button/icon-button.js";
-import popover_module_default from "./popover.module.js";
 import { Surface } from "../surface/surface.js";
+import popover_module_default from "./popover.module.js";
 import { Title } from "../title/title.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";

package/dist/components/popover/popover.guide.json

@@ -25,5 +25,29 @@
     "Rendering heavy or scroll-bound content that belongs in a Dialog",
     "Expecting `Popover.Arrow` (it is intentionally not exported or rendered)"
   ],
-  "related": ["Surface", "Button", "IconButton", "Stack", "Dialog", "Tabs"]
+  "related": ["Surface", "Button", "IconButton", "Stack", "Dialog", "Tabs"],
+  "properties": {
+    "react": {
+      "Sheet.description": {
+        "description": "Supporting copy announced with the title."
+      },
+      "Sheet.headerAlign": {
+        "description": "Aligns the header content."
+      },
+      "Sheet.showCloseButton": {
+        "description": "Whether to show the built-in flat IconButton close control."
+      },
+      "Sheet.title": {
+        "description": "Accessible popover title rendered as the popup heading."
+      },
+      "Sheet.unstyled": {
+        "description": "Whether to skip the built-in Surface, header, and close chrome and render only the positioning/animation shell (Portal + Positioner + Popup + Viewport)."
+      }
+    },
+    "css": {
+      "content-fade-duration": {
+        "description": "content fade duration custom property on the component root."
+      }
+    }
+  }
 }

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

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-progressive-blur-amount{syntax:"<length>";inherits:true;initial-value:16px}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK{pointer-events:none}.viraui__progressive-blur-module__Layer_zbzMS{position:absolute;inset:0;backdrop-filter:blur(calc(var(--vui-progressive-blur-amount) * 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))}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-progressive-blur-amount{syntax:"<length>";inherits:true;initial-value:16px}@property --__progressive-blur-factor{syntax:"<number>";inherits:false;initial-value:1}@property --__progressive-blur-mask-image{syntax:"<image>";inherits:false;initial-value:linear-gradient(#0000,#0000)}@property --__progressive-blur-mask-gradient{syntax:"*";inherits:false;initial-value:#0000}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK{pointer-events:none;&[data-direction=top]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to top,var(--__progressive-blur-mask-gradient))}}&[data-direction=right]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to right,var(--__progressive-blur-mask-gradient))}}&[data-direction=bottom]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to bottom,var(--__progressive-blur-mask-gradient))}}&[data-direction=left]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to left,var(--__progressive-blur-mask-gradient))}}}.viraui__progressive-blur-module__Layer_zbzMS{position:absolute;inset:0;backdrop-filter:blur(calc(var(--vui-progressive-blur-amount) * var(--__progressive-blur-factor)));mask-image:var(--__progressive-blur-mask-image)}}

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";