@viraui/react 2026.2.18 → 2026.3.0

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

@@ -19,7 +19,7 @@ var AutocompleteItemPart = ({ addon, addonAlign = "center", children, className,
 		vAlign: addonAlign,
 		vPadding: "small",
 		children: [addon && /* @__PURE__ */ jsx(Stack, {
-			fillChildren: true,
+			expandChildren: true,
 			"aria-hidden": "true",
 			"data-grow": "false",
 			"data-shrink": "false",

package/dist/components/autocomplete/autocomplete.js

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

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

@@ -30,7 +30,7 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 					render: /* @__PURE__ */ jsx(Surface, {
 						border: "top",
 						render: /* @__PURE__ */ jsx(Stack, {
-							fillChildren: true,
+							expandChildren: true,
 							hAlign: "center"
 						}),
 						color: 1,
@@ -39,7 +39,7 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 						vPadding: ["medium", 0]
 					}),
 					children: [showHandle && /* @__PURE__ */ jsxs(Stack, {
-						fillChildren: true,
+						expandChildren: true,
 						inline: true,
 						direction: "row",
 						vPadding: [0, "medium"],
@@ -50,7 +50,7 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 							/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape })
 						]
 					}), /* @__PURE__ */ jsxs(Stack, {
-						fillChildren: true,
+						expandChildren: true,
 						maxWidth: maxContentWidth,
 						rowGap: "large",
 						className: dialog_module_default.Body,

package/dist/components/fieldset/fieldset.js

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

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

@@ -17,7 +17,7 @@ var MenuItemRow = ({ addon, children, note, trailing }) => /* @__PURE__ */ jsxs(
 	className: menu_module_default.ItemRow,
 	children: [
 		addon && /* @__PURE__ */ jsx(Stack, {
-			fillChildren: true,
+			expandChildren: true,
 			"aria-hidden": "true",
 			"data-grow": "false",
 			"data-shrink": "false",

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

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

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

@@ -39,7 +39,7 @@ var PopoverSheet = ({ unstyled, title, description, children, showCloseButton =
 				}),
 				children: [
 					/* @__PURE__ */ jsxs(Stack, {
-						fillChildren: true,
+						expandChildren: true,
 						hAlign: headerAlign,
 						rowGap: "small",
 						vAlign: "start",

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

@@ -16,7 +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,
+			expandChildren: true,
 			columnGap: "medium",
 			direction: "row",
 			hPadding: "small",
@@ -27,7 +27,7 @@ function SelectOption({ addon, addonAlign = "center", children, className, indic
 				columnGap: "small",
 				vAlign: addonAlign,
 				children: [addon && /* @__PURE__ */ jsx(Stack, {
-					fillChildren: true,
+					expandChildren: true,
 					"aria-hidden": "true",
 					"data-grow": "false",
 					"data-shrink": "false",

package/dist/components/select/select.js

@@ -36,7 +36,7 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 		validationDebounceTime,
 		validationMode,
 		render: /* @__PURE__ */ jsx(Stack, {
-			fillChildren: true,
+			expandChildren: true,
 			rowGap: "small"
 		}),
 		children: [
@@ -56,7 +56,7 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 					disabled,
 					ref,
 					children: /* @__PURE__ */ jsxs(Stack, {
-						fillChildren: true,
+						expandChildren: true,
 						className: select_module_default.Trigger,
 						direction: "row",
 						columnGap: "x-small",

package/dist/components/stack/stack.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-stack-row-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-column-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-h-align{syntax:"*";inherits:false;initial-value:initial}@property --vui-stack-v-align{syntax:"*";inherits:false;initial-value:initial}@property --vui-stack-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-stack-min-width{syntax:"*";inherits:false;initial-value:none}.viraui__stack-module__Stack_NR-Ey{display:flex;gap:var(--vui-stack-row-gap) var(--vui-stack-column-gap);flex-direction:column;align-items:var(--vui-stack-h-align);justify-content:var(--vui-stack-v-align);max-inline-size:var(--vui-stack-max-width);min-inline-size:var(--vui-stack-min-width);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--vui-stack-v-align);justify-content:var(--vui-stack-h-align)}&[data-stack-direction=row]{flex-direction:row}&[data-stack-direction=row-reverse]{flex-direction:row-reverse}&[data-stack-inline=true]{display:inline-flex;flex-grow:0}:where(&[data-stack-wrap=true]){flex-wrap:wrap}:where(&[data-stack-has-padding=true]){padding:var(--vui-stack-padding-block-start) var(--vui-stack-padding-inline-end) var(--vui-stack-padding-block-end) var(--vui-stack-padding-inline-start)}:where(&[data-stack-fill-children=true]>*){flex-grow:var(--vira-flex-grow,1)}&[data-stack-container=true]{container:stack/inline-size}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-stack-row-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-column-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-h-align{syntax:"*";inherits:false;initial-value:initial}@property --vui-stack-v-align{syntax:"*";inherits:false;initial-value:initial}@property --vui-stack-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-stack-min-width{syntax:"*";inherits:false;initial-value:none}.viraui__stack-module__Stack_NR-Ey{display:flex;gap:var(--vui-stack-row-gap) var(--vui-stack-column-gap);flex-direction:column;align-items:var(--vui-stack-h-align);justify-content:var(--vui-stack-v-align);max-inline-size:var(--vui-stack-max-width);min-inline-size:var(--vui-stack-min-width);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--vui-stack-v-align);justify-content:var(--vui-stack-h-align)}&[data-stack-direction=row]{flex-direction:row}&[data-stack-direction=row-reverse]{flex-direction:row-reverse}&[data-stack-inline=true]{display:inline-flex;flex-grow:0}:where(&[data-stack-wrap=true]){flex-wrap:wrap}:where(&[data-stack-has-padding=true]){padding:var(--vui-stack-padding-block-start) var(--vui-stack-padding-inline-end) var(--vui-stack-padding-block-end) var(--vui-stack-padding-inline-start)}:where(&[data-stack-expand-children=true]>*){flex-grow:var(--vira-flex-grow,1)}&[data-stack-full-width=true]{inline-size:100%}&[data-stack-container=true]{container:stack/inline-size}}}

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

@@ -44,11 +44,23 @@ export type StackProps = React.ComponentPropsWithoutRef<'div'> & {
      */
     wrap?: boolean;
     /**
-     * Makes direct children grow to fill the available space within the stack.
+     * Makes direct children grow along the flex main axis (`flex-grow`).
+     *
+     * Does not set the stack root's own inline size — use `fullWidth` when this stack must
+     * fill its parent width (e.g. centered shell with `maxWidth`).
+     *
+     * @default false
+     */
+    expandChildren?: boolean;
+    /**
+     * Sets `inline-size: 100%` on the stack root so it fills the parent's inline size.
+     *
+     * Use with `maxWidth` under a parent `hAlign="center"` for a fluid, capped, centered shell.
+     * Orthogonal to `expandChildren` (self size vs children grow).
      *
      * @default false
      */
-    fillChildren?: boolean;
+    fullWidth?: boolean;
     /**
      * Sets the gap between flex rows using the Vira space token scale.
      *
@@ -94,7 +106,7 @@ export type StackProps = React.ComponentPropsWithoutRef<'div'> & {
     /**
      * Applies a minimum width value to the stack root.
      *
-     * @default No min width constraint.
+     * @default No minimum width constraint.
      */
     minWidth?: string;
     /**

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

@@ -6,11 +6,13 @@
     "Column or row layouts with token gap and alignment",
     "Composing screens and component internals without custom flex CSS",
     "Custom native root through render while keeping data-stack hooks",
-    "Style descendants with `@container stack` queries when layout, gap, or typography should respond to the Stack's own inline-size instead of the viewport (set `enableContainer` on the Stack you're querying)"
+    "Style descendants with `@container stack` queries when layout, gap, or typography should respond to the Stack's own inline-size instead of the viewport (set `enableContainer` on the Stack you're querying)",
+    "Centered max-width shells: parent `hAlign=\"center\"` + child `fullWidth` + `maxWidth`"
   ],
   "whenNotToUse": [
     "Cases where a single component already owns required flex chrome",
-    "Expecting direct children to stretch without setting `fillChildren`",
+    "Expecting direct children to grow on the main axis without setting `expandChildren`",
+    "Expecting this stack to fill parent inline size under non-stretch alignment without `fullWidth` (or an explicit `inlineSize`)",
     "Using `enableContainer` inside complex masonry-like layouts when you don't need container queries (inline-size containment can change nested layout)"
   ],
   "accessibility": [
@@ -19,10 +21,12 @@
     "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",
-    "Putting `data-grow=\"false\"` on an ancestor to control nested fillChildren — set it on the child that should not grow",
+    "Assuming Stack expands direct children by default — pass `expandChildren` when children should grow along the flex main axis",
+    "Using `expandChildren` to fill parent width under `hAlign=\"center\"` — that is `fullWidth` on the child stack (self `inline-size`), not child flex-grow",
+    "Putting `data-grow=\"false\"` on an ancestor to control nested expandChildren — set it on the child that should not grow",
     "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 inline-size would match the design intent"
+    "Using viewport media queries when @container stack queries against the rendered Stack inline-size would match the design intent",
+    "Combining `fullWidth` with `inline` — prefer block flex when the root must fill parent inline size"
   ],
   "related": ["Surface", "Text", "Button"],
   "properties": {
@@ -36,8 +40,11 @@
       "direction": {
         "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. Default `false`; opt in when layout needs equal flex growth on direct children. A child opts out with its own `data-grow=\"false\"`; ancestor `data-grow` does not inherit into nested stacks."
+      "expandChildren": {
+        "description": "Makes direct children grow along the flex main axis (`flex-grow`). Default `false`. Orthogonal to `fullWidth` (children grow vs this root's inline size). A child opts out with its own `data-grow=\"false\"`; ancestor `data-grow` does not inherit into nested stacks."
+      },
+      "fullWidth": {
+        "description": "Sets `inline-size: 100%` on the stack root so it fills the parent's inline size. Default `false`. Use with `maxWidth` under a parent `hAlign=\"center\"` for a fluid capped centered shell. Does not grow children — use `expandChildren` for that."
       },
       "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 = false, hAlign = "initial", hPadding, inline = false, maxWidth, minWidth, enableContainer, ref, render, rowGap, columnGap, style, vAlign = "initial", vPadding, wrap = false, ...otherProps }) => {
+var Stack = ({ className, direction = "column", expandChildren = false, fullWidth = 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),
@@ -28,7 +28,8 @@ var Stack = ({ className, direction = "column", fillChildren = false, hAlign = "
 			...enableContainer && { "data-stack-container": "true" },
 			"data-stack-inline": inline ? "true" : "false",
 			"data-stack-wrap": wrap ? "true" : "false",
-			"data-stack-fill-children": fillChildren ? "true" : "false",
+			"data-stack-expand-children": expandChildren ? "true" : "false",
+			"data-stack-full-width": fullWidth ? "true" : "false",
 			"data-stack-has-padding": hasPadding ? "true" : "false",
 			className: clsx(stack_module_default.Stack, className),
 			style: dynamicStyle

package/dist/components/switch/switch.js

@@ -22,7 +22,7 @@ var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label
 		validationMode,
 		render: /* @__PURE__ */ jsx(Stack, {
 			direction: "row",
-			fillChildren: true,
+			expandChildren: true,
 			columnGap: size === "small" ? "small" : "medium",
 			vAlign: hasTextDescription ? "start" : "center"
 		}),

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

@@ -20,7 +20,7 @@ var TabsList = ({ children, className, activateOnFocus = true, ref, ...otherProp
 	children: [/* @__PURE__ */ jsx(TabsIndicator, {}), /* @__PURE__ */ jsx("div", {
 		className: tabs_module_default.Track,
 		children: /* @__PURE__ */ jsx(Stack, {
-			fillChildren: true,
+			expandChildren: true,
 			direction: "row",
 			hAlign: "start",
 			vAlign: "center",

package/dist/components/textarea/textarea.js

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

package/dist/components/textfield/textfield.js

@@ -22,7 +22,7 @@ var Textfield = ({ className, description, dirty, disabled, endAddon, error, fit
 	validationMode,
 	"data-fullwidth": fullWidth,
 	render: /* @__PURE__ */ jsx(Stack, {
-		fillChildren: true,
+		expandChildren: true,
 		rowGap: "small"
 	}),
 	children: [

package/dist/preflight-surface.json

@@ -114,14 +114,14 @@
       "module": "layout",
       "values": ["true", "false"],
       "presence": "optional; omit for default flex growth",
-      "effect": "Affects only the element: true sets --vira-flex-grow: 1 and flex-grow: 1; false sets --vira-flex-grow: 0 and flex-grow: 0. Custom props are registered inherits: false so ancestors do not poison nested Stack fillChildren.",
+      "effect": "Affects only the element: true sets --vira-flex-grow: 1 and flex-grow: 1; false sets --vira-flex-grow: 0 and flex-grow: 0. Custom props are registered inherits: false so ancestors do not poison nested Stack expandChildren.",
       "whenToUse": [
-        "Force grow or opt out on a fillChildren direct child",
+        "Force grow or opt out on an expandChildren direct child",
         "Fixed-width icons, indicators, or trailing slots (false)"
       ],
       "whenNotToUse": [
         "When default flex growth is already correct",
-        "Expecting ancestor data-grow to change nested fillChildren children"
+        "Expecting ancestor data-grow to change nested expandChildren children"
       ],
       "related": ["Stack", "--vira-flex-grow"]
     },
@@ -198,8 +198,8 @@
       "name": "--vira-flex-grow",
       "module": "layout",
       "setBy": "data-grow=\"true\" or data-grow=\"false\"; registered in global-properties.css",
-      "default": "1 (initial-value); inherits: false; Stack fillChildren uses var(--vira-flex-grow, 1)",
-      "purpose": "Local grow signal for Stack fillChildren / child flex defaults; does not inherit so ancestor data-grow cannot poison nested stacks."
+      "default": "1 (initial-value); inherits: false; Stack expandChildren uses var(--vira-flex-grow, 1)",
+      "purpose": "Local grow signal for Stack expandChildren / child flex defaults; does not inherit so ancestor data-grow cannot poison nested stacks."
     },
     {
       "name": "--vira-flex-shrink",
@@ -216,7 +216,7 @@
     "Inventing backdrop-filter CSS instead of data-vibrant when vibrancy is desired",
     "Inventing box-shadow CSS instead of data-elevation when theme-gated shadows are desired",
     "Shipping a new consumer-facing data-* without updating preflight-surface.json and viraui-design/custom-attributes.md",
-    "Relying on ancestor data-grow / data-shrink to control nested Stack fillChildren (props do not inherit)"
+    "Relying on ancestor data-grow / data-shrink to control nested Stack expandChildren (props do not inherit)"
   ],
   "discovery": {
     "consumption": "@viraui/react/consumption.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.2.18",
+  "version": "2026.3.0",
   "private": false,
   "files": [
     "dist"
@@ -28,8 +28,8 @@
   },
   "devDependencies": {
     "@base-ui/react": ">=1.7.0",
-    "@viraui/foundation": "2026.2.18",
-    "@viraui/icons": "2026.0.2",
+    "@viraui/foundation": "2026.3.0",
+    "@viraui/icons": "2026.0.3",
     "@viraui/postcss-config": "2026.0.0",
     "@viraui/tsconfig": "2026.0.0",
     "postcss": "8.5.26",