@viraui/react 2026.0.14 → 2026.0.16

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

@@ -41,7 +41,6 @@ var AccordionItemComponent = ({ children, className, color = 1, iconClosed = /*
 				render: /* @__PURE__ */ jsx(Stack, {
 					columnGap: iconAtStart ? "small" : void 0,
 					direction: iconAtStart ? "row" : "row-reverse",
-					fillChildren: false,
 					hAlign: iconPosition === "end" ? "space-between" : "start",
 					hPadding: "medium",
 					render: /* @__PURE__ */ jsx("button", { type: "button" }),
@@ -56,7 +55,6 @@ var AccordionItemComponent = ({ children, className, color = 1, iconClosed = /*
 		}), /* @__PURE__ */ jsx(Accordion.Panel, {
 			className: accordion_module_default.Panel,
 			children: /* @__PURE__ */ jsx(Stack, {
-				fillChildren: false,
 				hPadding: "medium",
 				vPadding: ["2x-small", "medium"],
 				children

package/dist/components/accordion/accordion.js

@@ -11,8 +11,7 @@ var AccordionRootComponent = ({ children, className, islands = true, ...otherPro
 	render: /* @__PURE__ */ jsx(Stack, {
 		className: clsx(accordion_module_default.Accordion, className),
 		"data-islands": islands ? "true" : "false",
-		direction: "column",
-		fillChildren: false
+		direction: "column"
 	}),
 	hiddenUntilFound: true,
 	children

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

@@ -9,7 +9,6 @@ var AutocompleteGroup = ({ children, className, label, ...otherProps }) => /* @_
 	className,
 	render: /* @__PURE__ */ jsx(Stack, {
 		direction: "column",
-		fillChildren: false,
 		rowGap: "2x-small",
 		vPadding: "2x-small"
 	}),
@@ -17,7 +16,6 @@ var AutocompleteGroup = ({ children, className, label, ...otherProps }) => /* @_
 		render: /* @__PURE__ */ jsx(Stack, {
 			columnGap: "small",
 			direction: "row",
-			fillChildren: false,
 			hPadding: "small",
 			vAlign: "center",
 			vPadding: ["small", "x-small"]

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

@@ -15,11 +15,11 @@ var AutocompleteItemPart = ({ addon, addonAlign = "center", children, className,
 		className: autocomplete_module_default.ItemRow,
 		columnGap: "small",
 		direction: "row",
-		fillChildren: false,
 		hPadding: "small",
 		vAlign: addonAlign,
 		vPadding: "small",
 		children: [addon && /* @__PURE__ */ jsx(Stack, {
+			fillChildren: true,
 			"aria-hidden": "true",
 			"data-grow": "false",
 			"data-shrink": "false",

package/dist/components/autocomplete/autocomplete.js

@@ -36,6 +36,7 @@ function AutocompleteRootComponent({ children, className, container, description
 		validationDebounceTime,
 		validationMode,
 		render: /* @__PURE__ */ jsx(Stack, {
+			fillChildren: true,
 			direction: "column",
 			rowGap: "small"
 		}),

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

@@ -34,7 +34,6 @@ var AvatarGroup = ({ avatars, className, direction = "horizontal", maxVisible, o
 				render: /* @__PURE__ */ jsx(Stack, {
 					inline: true,
 					direction: "row",
-					fillChildren: false,
 					hAlign: "center",
 					vAlign: "center",
 					hPadding: "medium"

package/dist/components/basic-input/input-control-group.js

@@ -8,13 +8,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var InputControlGroup = ({ addonClassName, children, controlGroupClassName, endAddon, startAddon }) => /* @__PURE__ */ jsxs(Stack, {
 	className: controlGroupClassName,
 	direction: "row",
-	fillChildren: false,
 	vAlign: "stretch",
 	children: [
 		startAddon && /* @__PURE__ */ jsx(Stack, {
 			className: addonClassName,
 			"data-position": "start",
-			fillChildren: false,
 			hAlign: "center",
 			hPadding: ["small", "x-small"],
 			inline: true,
@@ -26,7 +24,6 @@ var InputControlGroup = ({ addonClassName, children, controlGroupClassName, endA
 		endAddon && /* @__PURE__ */ jsx(Stack, {
 			className: addonClassName,
 			"data-position": "end",
-			fillChildren: false,
 			hAlign: "center",
 			hPadding: "x-small",
 			inline: true,

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

@@ -5,10 +5,7 @@ import { CheckboxGroup } from "@base-ui/react";
 var CheckboxGroup$1 = ({ children, className, ...otherProps }) => /* @__PURE__ */ jsx(CheckboxGroup, {
 	...otherProps,
 	className,
-	render: /* @__PURE__ */ jsx(Stack, {
-		fillChildren: false,
-		rowGap: "small"
-	}),
+	render: /* @__PURE__ */ jsx(Stack, { rowGap: "small" }),
 	children
 });
 //#endregion

package/dist/components/checkbox/checkbox.js

@@ -19,7 +19,6 @@ var Checkbox$1 = ({ className, description, disabled, error, label, ref, size =
 			children: /* @__PURE__ */ jsxs(Stack, {
 				direction: "row",
 				columnGap: size === "small" ? "small" : "medium",
-				fillChildren: false,
 				vAlign: hasTextDescription ? "start" : "center",
 				hPadding,
 				vPadding,
@@ -42,7 +41,6 @@ var Checkbox$1 = ({ className, description, disabled, error, label, ref, size =
 					})
 				}), label || description || error ? /* @__PURE__ */ jsxs(Stack, {
 					direction: "column",
-					fillChildren: false,
 					rowGap: "small",
 					children: [label ? /* @__PURE__ */ jsx(FieldLabel, {
 						size: size === "small" ? "small" : "medium",

package/dist/components/chip/chip.js

@@ -11,7 +11,6 @@ var Chip = ({ addon, addonPosition = "start", children, className, ref, render,
 		inline: true,
 		direction: addonPosition === "start" ? "row" : "row-reverse",
 		vAlign: "center",
-		fillChildren: false,
 		hPadding: "small",
 		columnGap: "x-small",
 		className: chip_module_default.Content,

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

@@ -16,7 +16,6 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 			vAlign: "end",
 			hPadding: "small",
 			vPadding: "small",
-			fillChildren: false,
 			hAlign: fitContent ? "center" : void 0
 		}),
 		className: dialog_module_default.Viewport,
@@ -27,13 +26,17 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 				style: { "--vui-dialog-max-block-size": maxHeight },
 				render: /* @__PURE__ */ jsx(Surface, {
 					border: "top",
-					render: /* @__PURE__ */ jsx(Stack, { hAlign: "center" }),
+					render: /* @__PURE__ */ jsx(Stack, {
+						fillChildren: true,
+						hAlign: "center"
+					}),
 					color: 1,
 					"data-vibrant": "",
 					radius: "large",
 					vPadding: ["medium", 0]
 				}),
 				children: [showHandle && /* @__PURE__ */ jsxs(Stack, {
+					fillChildren: true,
 					inline: true,
 					direction: "row",
 					vPadding: [0, "medium"],
@@ -44,6 +47,7 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 						/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape })
 					]
 				}), /* @__PURE__ */ jsxs(Stack, {
+					fillChildren: true,
 					maxWidth: maxContentWidth,
 					rowGap: "large",
 					className: dialog_module_default.Body,
@@ -52,7 +56,6 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 						"data-shrink": "false",
 						hAlign: headerAlign,
 						hPadding: "medium",
-						fillChildren: false,
 						children: [/* @__PURE__ */ jsx(Drawer.Title, {
 							render: /* @__PURE__ */ jsx(Title, { size: "4" }),
 							children: title
@@ -66,7 +69,6 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 					}), /* @__PURE__ */ jsxs(Drawer.Content, {
 						render: /* @__PURE__ */ jsx(Stack, {
 							vAlign: "start",
-							fillChildren: false,
 							className: dialog_module_default.Content
 						}),
 						children: [showCloseButton && /* @__PURE__ */ jsx(Drawer.Close, {

package/dist/components/fieldset/fieldset.js

@@ -9,6 +9,7 @@ var Fieldset$1 = ({ children, className, description, disabled, error, label, ..
 	className,
 	disabled,
 	children: [(label || description || error) && /* @__PURE__ */ jsxs(Stack, {
+		fillChildren: true,
 		vPadding: [0, "small"],
 		rowGap: "small",
 		children: [label && /* @__PURE__ */ jsx(Fieldset.Legend, {

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

@@ -14,14 +14,12 @@ var LinearProgress = ({ className, description, label, showValue = false, value,
 	value,
 	render: /* @__PURE__ */ jsx(Stack, {
 		direction: "column",
-		fillChildren: false,
 		rowGap: "small",
 		columnGap: "x-small"
 	}),
 	children: [
 		(label || showValue) && /* @__PURE__ */ jsxs(Stack, {
 			direction: "row",
-			fillChildren: false,
 			columnGap: "small",
 			vAlign: "center",
 			hAlign: "space-between",

package/dist/components/masonry/masonry.js

@@ -70,7 +70,6 @@ var MasonryRoot = ({ children, className, breakpointCols = DEFAULT_BREAKPOINT_CO
 			style: dynamicStyle,
 			children: columns.map((column) => /* @__PURE__ */ jsx(Stack, {
 				direction: "column",
-				fillChildren: false,
 				rowGap: gap,
 				children: column.children
 			}, column.key))

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

@@ -8,7 +8,6 @@ var MenuGroup = ({ children, className, label, ...otherProps }) => /* @__PURE__
 	className,
 	render: /* @__PURE__ */ jsx(Stack, {
 		direction: "column",
-		fillChildren: false,
 		rowGap: "2x-small",
 		vPadding: "2x-small"
 	}),
@@ -16,7 +15,6 @@ var MenuGroup = ({ children, className, label, ...otherProps }) => /* @__PURE__
 		render: /* @__PURE__ */ jsx(Stack, {
 			columnGap: "small",
 			direction: "row",
-			fillChildren: false,
 			hPadding: "small",
 			vAlign: "center",
 			vPadding: ["small", "x-small"]

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

@@ -6,7 +6,6 @@ import { Menu } from "@base-ui/react/menu";
 //#region src/components/menu/menu-indicator-slot.tsx
 var indicatorStackRender = /* @__PURE__ */ jsx(Stack, {
 	"data-shrink": "false",
-	fillChildren: false,
 	hAlign: "center",
 	inline: true,
 	vAlign: "center"
@@ -35,7 +34,6 @@ var MenuIndicatorSlot = ({ kind }) => {
 		"aria-hidden": true,
 		"data-kind": "chevron",
 		"data-shrink": "false",
-		fillChildren: false,
 		hAlign: "center",
 		inline: true,
 		vAlign: "center",

package/dist/components/menu/menu-item-row.js

@@ -11,13 +11,13 @@ var MenuItemRow = ({ addon, children, note, trailing }) => /* @__PURE__ */ jsxs(
 	columnGap: "small",
 	"data-grow": "true",
 	direction: "row",
-	fillChildren: false,
 	hPadding: "small",
 	vPadding: "small",
 	vAlign: "center",
 	className: menu_module_default.ItemRow,
 	children: [
 		addon && /* @__PURE__ */ jsx(Stack, {
+			fillChildren: true,
 			"aria-hidden": "true",
 			"data-grow": "false",
 			"data-shrink": "false",

package/dist/components/menu/menu-link-item.js

@@ -12,7 +12,10 @@ var MenuLinkItem = ({ addon, children, className, note, sentiment, ...otherProps
 	...sentiment && { "data-sentiment": sentiment },
 	render: /* @__PURE__ */ jsx(Surface, {
 		radius: "auto",
-		render: /* @__PURE__ */ jsx(Stack, { render: /* @__PURE__ */ jsx("a", {}) })
+		render: /* @__PURE__ */ jsx(Stack, {
+			fillChildren: true,
+			render: /* @__PURE__ */ jsx("a", {})
+		})
 	}),
 	children: /* @__PURE__ */ jsx(MenuItemRow, {
 		addon,

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

@@ -8,7 +8,6 @@ var MenuRadioGroup = ({ children, className, label, ...otherProps }) => /* @__PU
 	className,
 	render: /* @__PURE__ */ jsx(Stack, {
 		direction: "column",
-		fillChildren: false,
 		rowGap: "2x-small",
 		vPadding: "2x-small"
 	}),
@@ -16,7 +15,6 @@ var MenuRadioGroup = ({ children, className, label, ...otherProps }) => /* @__PU
 		render: /* @__PURE__ */ jsx(Stack, {
 			columnGap: "small",
 			direction: "row",
-			fillChildren: false,
 			hPadding: "small",
 			vAlign: "center",
 			vPadding: ["small", "small"]

package/dist/components/meter/meter.js

@@ -13,14 +13,12 @@ var Meter$1 = ({ className, description, label, showValue = false, value, ...oth
 	value,
 	render: /* @__PURE__ */ jsx(Stack, {
 		direction: "column",
-		fillChildren: false,
 		rowGap: "small",
 		columnGap: "x-small"
 	}),
 	children: [
 		(label || showValue) && /* @__PURE__ */ jsxs(Stack, {
 			direction: "row",
-			fillChildren: false,
 			columnGap: "small",
 			vAlign: "center",
 			hAlign: "space-between",

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

@@ -28,21 +28,18 @@ var PopoverSheet = ({ unstyled, title, description, children, showCloseButton =
 				border: "all",
 				radius: "large",
 				"data-vibrant": "",
-				render: /* @__PURE__ */ jsx(Stack, {
-					rowGap: "medium",
-					fillChildren: false
-				})
+				render: /* @__PURE__ */ jsx(Stack, { rowGap: "medium" })
 			}),
 			children: /* @__PURE__ */ jsxs(Popover.Viewport, {
 				className: popover_module_default.Viewport,
 				render: /* @__PURE__ */ jsx(Stack, {
 					rowGap: "medium",
 					vPadding: "medium",
-					hPadding: "medium",
-					fillChildren: false
+					hPadding: "medium"
 				}),
 				children: [
 					/* @__PURE__ */ jsxs(Stack, {
+						fillChildren: true,
 						hAlign: headerAlign,
 						rowGap: "small",
 						vAlign: "start",

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

@@ -7,7 +7,6 @@ var RadioGroup$1 = ({ children, className, ...otherProps }) => /* @__PURE__ */ j
 	className,
 	render: /* @__PURE__ */ jsx(Stack, {
 		"data-radiogroup": true,
-		fillChildren: false,
 		rowGap: "small"
 	}),
 	children

package/dist/components/radio/radio.js

@@ -15,7 +15,6 @@ var Radio$1 = ({ className, description, disabled, id, label, ref, size = "small
 		children: /* @__PURE__ */ jsx(Field.Label, { children: /* @__PURE__ */ jsxs(Stack, {
 			direction: "row",
 			columnGap: size === "small" ? "small" : "medium",
-			fillChildren: false,
 			vAlign: hasTextDescription ? "start" : "center",
 			hPadding,
 			vPadding,
@@ -33,7 +32,6 @@ var Radio$1 = ({ className, description, disabled, id, label, ref, size = "small
 				})
 			}), label || description ? /* @__PURE__ */ jsxs(Stack, {
 				direction: "column",
-				fillChildren: false,
 				rowGap: "small",
 				children: [label && /* @__PURE__ */ jsx(FieldLabel, {
 					size: size === "small" ? "small" : "medium",

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

@@ -10,7 +10,6 @@ function SelectGroup({ children, className, label, ...groupProps }) {
 		className,
 		render: /* @__PURE__ */ jsx(Stack, {
 			direction: "column",
-			fillChildren: false,
 			rowGap: "2x-small",
 			vPadding: "2x-small"
 		}),
@@ -18,7 +17,6 @@ function SelectGroup({ children, className, label, ...groupProps }) {
 			render: /* @__PURE__ */ jsx(Stack, {
 				columnGap: "small",
 				direction: "row",
-				fillChildren: false,
 				hPadding: "small",
 				vPadding: ["small", "x-small"],
 				vAlign: "center"

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

@@ -4,7 +4,6 @@ import { jsx } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
 //#region src/components/select/select-indicator-slot.tsx
 var indicatorStackRender = /* @__PURE__ */ jsx(Stack, {
-	fillChildren: false,
 	hAlign: "center",
 	inline: true,
 	"data-shrink": "false",
@@ -22,7 +21,6 @@ function SelectIndicatorSlot({ children, interactive = false }) {
 		"aria-hidden": true,
 		className: select_module_default.Indicator,
 		"data-grow": "false",
-		fillChildren: false,
 		hAlign: "center",
 		inline: true,
 		"data-shrink": "false",

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

@@ -16,6 +16,7 @@ function SelectOption({ addon, addonAlign = "center", children, className, indic
 		className: clsx(select_module_default.Option, className),
 		render: /* @__PURE__ */ jsx(Surface, { radius: "auto" }),
 		children: /* @__PURE__ */ jsxs(Stack, {
+			fillChildren: true,
 			columnGap: "medium",
 			direction: "row",
 			hPadding: "small",
@@ -25,8 +26,8 @@ function SelectOption({ addon, addonAlign = "center", children, className, indic
 				direction: "row",
 				columnGap: "small",
 				vAlign: addonAlign,
-				fillChildren: false,
 				children: [addon && /* @__PURE__ */ jsx(Stack, {
+					fillChildren: true,
 					"aria-hidden": "true",
 					"data-grow": "false",
 					"data-shrink": "false",

package/dist/components/select/select.js

@@ -36,6 +36,7 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 		validationDebounceTime,
 		validationMode,
 		render: /* @__PURE__ */ jsx(Stack, {
+			fillChildren: true,
 			direction: "column",
 			rowGap: "small"
 		}),
@@ -56,6 +57,7 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 					disabled,
 					ref,
 					render: /* @__PURE__ */ jsx(Stack, {
+						fillChildren: true,
 						direction: "row",
 						render: /* @__PURE__ */ jsx("button", { type: "button" }),
 						columnGap: "x-small",
@@ -71,7 +73,6 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 						className: select_module_default.Icon,
 						"data-grow": "false",
 						render: /* @__PURE__ */ jsx(Stack, {
-							fillChildren: false,
 							hAlign: "center",
 							hPadding: "x-small",
 							inline: true,
@@ -92,7 +93,6 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 									className: clsx(select_module_default.ScrollArrow, select_module_default.ScrollArrowUp),
 									"data-vibrant": "",
 									render: /* @__PURE__ */ jsx(Stack, {
-										fillChildren: false,
 										hAlign: "center",
 										vAlign: "center"
 									}),
@@ -126,7 +126,6 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 									className: clsx(select_module_default.ScrollArrow, select_module_default.ScrollArrowDown),
 									"data-vibrant": "",
 									render: /* @__PURE__ */ jsx(Stack, {
-										fillChildren: false,
 										hAlign: "center",
 										vAlign: "center"
 									}),

package/dist/components/separator/separator.js

@@ -29,7 +29,6 @@ var Separator = ({ className, hPadding, orientation = "horizontal", ref, render,
 	});
 	return /* @__PURE__ */ jsx(Stack, {
 		direction: orientation === "vertical" ? "row" : "column",
-		fillChildren: false,
 		hPadding,
 		vAlign: orientation === "vertical" ? "stretch" : "initial",
 		vPadding,

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

@@ -20,7 +20,6 @@ function SliderControl({ isRange, orientation = "horizontal", thumbAriaLabel })
 		"data-orientation": orientation,
 		render: /* @__PURE__ */ jsx(Stack, {
 			direction: isVertical ? "column" : "row",
-			fillChildren: false,
 			hAlign: isVertical ? "center" : "initial",
 			vAlign: isVertical ? "initial" : "center"
 		}),

package/dist/components/slider/slider.js

@@ -26,7 +26,6 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
 		validationMode,
 		render: /* @__PURE__ */ jsx(Stack, {
 			direction: "column",
-			fillChildren: false,
 			rowGap: "small"
 		}),
 		children: [/* @__PURE__ */ jsxs(Slider.Root, {
@@ -40,13 +39,13 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
 			value,
 			render: /* @__PURE__ */ jsx(Stack, {
 				direction: "column",
-				fillChildren: false,
 				rowGap: "medium",
 				columnGap: "x-small",
 				vAlign: isVertical ? "stretch" : "center",
 				hAlign: isVertical ? "center" : "initial"
 			}),
 			children: [(label || showValue) && /* @__PURE__ */ jsxs(Stack, {
+				fillChildren: true,
 				className: slider_module_default.SliderHeader,
 				direction: isVertical ? "column" : "row",
 				columnGap: "small",

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

@@ -46,7 +46,7 @@ export type StackProps = React.ComponentPropsWithoutRef<'div'> & {
     /**
      * Makes direct children grow to fill the available space within the stack.
      *
-     * @default true
+     * @default false
      */
     fillChildren?: boolean;
     /**

package/dist/components/stack/stack.guide.json

@@ -10,7 +10,7 @@
   ],
   "whenNotToUse": [
     "Cases where a single component already owns required flex chrome",
-    "Expecting the Stack root itself to grow via fillChildren",
+    "Expecting direct children to stretch without setting `fillChildren`",
     "Using `enableContainer` inside complex masonry-like layouts when you don't need container queries (size containment can change nested layout)"
   ],
   "accessibility": [
@@ -19,6 +19,7 @@
     "Do not use Stack alone to imply grouping; use landmarks or headings where needed"
   ],
   "antiPatterns": [
+    "Assuming Stack stretches direct children by default — pass `fillChildren` when children should grow along the flex main axis",
     "Re-declaring primitive flex container rules in app CSS when Stack can own the layout",
     "Using viewport media queries when @container stack queries against the rendered Stack size would match the design intent"
   ],
@@ -35,7 +36,7 @@
         "description": "Renders children across rows or columns using the chosen flex direction."
       },
       "fillChildren": {
-        "description": "Makes direct children grow to fill the available space within the stack."
+        "description": "Makes direct children grow to fill the available space within the stack. Default `false`; opt in when layout needs equal flex growth on direct children."
       },
       "hAlign": {
         "description": "Aligns content on the horizontal axis from the consumer point of view."

package/dist/components/stack/stack.js

@@ -5,7 +5,7 @@ import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
 import stack_module_default from "./stack.module.js";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/stack/stack.tsx
-var Stack = ({ className, direction = "column", fillChildren = true, hAlign = "initial", hPadding, inline = false, maxWidth, minWidth, enableContainer, ref, render, rowGap, columnGap, style, vAlign = "initial", vPadding, wrap = false, ...otherProps }) => {
+var Stack = ({ className, direction = "column", fillChildren = false, hAlign = "initial", hPadding, inline = false, maxWidth, minWidth, enableContainer, ref, render, rowGap, columnGap, style, vAlign = "initial", vPadding, wrap = false, ...otherProps }) => {
 	const hasPadding = Boolean(hPadding || vPadding);
 	const dynamicStyle = {
 		"--vui-stack-row-gap": resolveThemeValue(rowGap, "space", 0),

package/dist/components/switch/switch.js

@@ -23,7 +23,6 @@ var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label
 		render: /* @__PURE__ */ jsx(Stack, {
 			direction: "row",
 			columnGap: size === "small" ? "small" : "medium",
-			fillChildren: false,
 			vAlign: hasTextDescription ? "start" : "center"
 		}),
 		children: /* @__PURE__ */ jsx(Field.Label, {
@@ -31,7 +30,6 @@ var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label
 			children: /* @__PURE__ */ jsxs(Stack, {
 				direction: "row",
 				columnGap: size === "small" ? "small" : "medium",
-				fillChildren: false,
 				vAlign: hasTextDescription ? "start" : "center",
 				hPadding,
 				vPadding,
@@ -46,7 +44,6 @@ var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label
 					children: /* @__PURE__ */ jsx(Switch.Thumb, { className: switch_module_default.Thumb })
 				}), label || description || error ? /* @__PURE__ */ jsxs(Stack, {
 					direction: "column",
-					fillChildren: false,
 					rowGap: "small",
 					children: [label && /* @__PURE__ */ jsx(FieldLabel, {
 						size: size === "small" ? "small" : "medium",

package/dist/components/tabs/tabs-list.js

@@ -22,6 +22,7 @@ var TabsList = ({ children, className, activateOnFocus = true, ref, ...otherProp
 		className: tabs_module_default.IndicatorLayer,
 		children: /* @__PURE__ */ jsx(TabsIndicator, {})
 	}), /* @__PURE__ */ jsx(Stack, {
+		fillChildren: true,
 		direction: "row",
 		columnGap: "small",
 		hAlign: "start",

package/dist/components/tabs/tabs.js

@@ -14,7 +14,6 @@ var TabsRootComponent = ({ children, className, listAlignment = "start", ...othe
 	render: /* @__PURE__ */ jsx(Stack, {
 		hAlign: listAlignment,
 		vAlign: "start",
-		fillChildren: false,
 		className: clsx(tabs_module_default.Tabs, className)
 	}),
 	...otherProps,

package/dist/components/textarea/textarea.js

@@ -19,6 +19,7 @@ var Textarea = ({ className, description, dirty, disabled, error, fitContent, in
 	validationDebounceTime,
 	validationMode,
 	render: /* @__PURE__ */ jsx(Stack, {
+		fillChildren: true,
 		direction: "column",
 		rowGap: "small"
 	}),

package/dist/components/textfield/textfield.js

@@ -21,6 +21,7 @@ var Textfield = ({ className, description, dirty, disabled, endAddon, error, fit
 	validationDebounceTime,
 	validationMode,
 	render: /* @__PURE__ */ jsx(Stack, {
+		fillChildren: true,
 		direction: "column",
 		rowGap: "small"
 	}),

package/dist/components/toast/toast-banner.js

@@ -27,14 +27,12 @@ var ToastBanner = ({ children, className, description, dismissable = true, dismi
 				className: toast_module_default.Content,
 				columnGap: "medium",
 				direction: "row",
-				fillChildren: false,
 				hAlign: "space-between",
 				vAlign: "center",
 				hPadding: "large",
 				vPadding: "large"
 			}),
 			children: [/* @__PURE__ */ jsxs(Stack, {
-				fillChildren: false,
 				rowGap: "small",
 				children: [resolvedTitle && /* @__PURE__ */ jsx(Toast.Title, {
 					render: /* @__PURE__ */ jsx(Text, { size: "medium" }),
@@ -50,7 +48,6 @@ var ToastBanner = ({ children, className, description, dismissable = true, dismi
 			}), (dismissable || Boolean(actions.length)) && /* @__PURE__ */ jsxs(Stack, {
 				columnGap: "small",
 				direction: "row",
-				fillChildren: false,
 				children: [dismissable && /* @__PURE__ */ jsx(Toast.Close, {
 					render: /* @__PURE__ */ jsx(Button, { variant: "secondary" }),
 					onClick: () => {

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

@@ -5,10 +5,7 @@ import { ToggleGroup } from "@base-ui/react/toggle-group";
 var ToggleGroup$1 = ({ children, orientation = "horizontal", ...otherProps }) => /* @__PURE__ */ jsx(ToggleGroup, {
 	...otherProps,
 	orientation,
-	render: /* @__PURE__ */ jsx(Stack, {
-		direction: orientation === "vertical" ? "column" : "row",
-		fillChildren: false
-	}),
+	render: /* @__PURE__ */ jsx(Stack, { direction: orientation === "vertical" ? "column" : "row" }),
 	children
 });
 //#endregion

package/dist/components/tooltip/tooltip-content.js

@@ -23,8 +23,7 @@ var TooltipContent = ({ children, sideOffset = 8, container, ...positionerProps
 				className: tooltip_module_default.Viewport,
 				render: /* @__PURE__ */ jsx(Stack, {
 					vPadding: "small",
-					hPadding: "small",
-					fillChildren: false
+					hPadding: "small"
 				}),
 				children
 			})

package/dist/preflight-surface.json

@@ -26,6 +26,11 @@
       "id": "layout",
       "file": "layout.css",
       "purpose": "Flex growth and shrink utilities via data-grow / data-shrink for Stack and component children."
+    },
+    {
+      "id": "vibrancy",
+      "file": "vibrancy.css",
+      "purpose": "Theme-gated backdrop-filter vibrancy on elements that opt in with data-vibrant."
     }
   ],
   "attributes": [
@@ -120,6 +125,22 @@
       ],
       "whenNotToUse": ["When default flex shrink is already correct"],
       "related": ["Stack"]
+    },
+    {
+      "name": "data-vibrant",
+      "module": "vibrancy",
+      "values": ["(boolean presence)"],
+      "presence": "boolean attribute; value ignored",
+      "effect": "When the active theme sets --effect-vibrancy, applies vibrancy backdrop-filter (brightness/blur/saturate). Surface with data-vibrant may also translucify its background via component CSS.",
+      "whenToUse": [
+        "Glass / frosted panels on Surface or other hosts over busy backgrounds",
+        "Match overlay chrome (Dialog/Popover/Menu/Toast) that ships with data-vibrant"
+      ],
+      "whenNotToUse": [
+        "When the theme does not expose --effect-vibrancy (attr is a no-op for filters)",
+        "Hand-rolling backdrop-filter CSS instead of the documented attr"
+      ],
+      "related": ["Surface", "--effect-vibrancy", "--vibrancy-blur", "--vibrancy-brightness"]
     }
   ],
   "customProperties": [
@@ -176,7 +197,9 @@
   "antiPatterns": [
     "Using data-elevation without importing @viraui/react/preflight.css",
     "Fighting data-mode color-scheme rules without documenting a deliberate override",
-    "Applying data-no-link-style to prose links that should use the default interactive underline treatment"
+    "Applying data-no-link-style to prose links that should use the default interactive underline treatment",
+    "Inventing backdrop-filter CSS instead of data-vibrant when vibrancy is desired",
+    "Shipping a new consumer-facing data-* without updating preflight-surface.json and viraui-design/custom-attributes.md"
   ],
   "discovery": {
     "consumption": "@viraui/react/consumption.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.0.14",
+  "version": "2026.0.16",
   "private": false,
   "files": [
     "dist"
@@ -35,7 +35,7 @@
     "unplugin-dts": "1.0.3",
     "vite": "8.1.4",
     "vite-plugin-static-copy": "4.1.1",
-    "@viraui/foundation": "2026.0.14",
+    "@viraui/foundation": "2026.0.16",
     "@viraui/icons": "2026.0.0",
     "@viraui/postcss-config": "2026.0.0",
     "@viraui/tsconfig": "2026.0.0"