@viraui/react 2026.0.13 → 2026.0.15

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/menu/menu.guide.json

@@ -8,7 +8,8 @@
     "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`",
-    "Account / user widgets: `Menu.Trigger` as a Surface chip (avatar + name + email) opening a Popup with a static profile header plus action items"
+    "Account / user widgets: `Menu.Trigger` as a Surface chip (avatar + name + email) opening a Popup with a static profile header plus action items",
+    "Custom portal host (iframe preview, shadow root, or app overlay root) via `container` on the portal-owning public part"
   ],
   "whenNotToUse": [
     "Page-blocking modal flows (use Dialog)",
@@ -64,6 +65,9 @@
       "LinkItem.sentiment": {
         "description": "Visual sentiment. `destructive` uses highlight-red wash + text."
       },
+      "Popup.container": {
+        "description": "Portal mount node (iframe body, shadow root, or app overlay root). Omit for Base UI default (`document.body` from the module window — iframe hosts must pass the iframe document body explicitly)."
+      },
       "RadioGroup.label": {
         "description": "Optional accessible group label rendered with `Menu.GroupLabel`."
       },

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.d.ts

@@ -1,8 +1,18 @@
-import { PopoverPositioner } from '@base-ui/react/popover';
+import { Popover as PrimitivePopover, PopoverPositioner } from '@base-ui/react/popover';
 import { StackProps } from '..';
 import type * as React from 'react';
 type PopoverSheetPositionerProps = Omit<PopoverPositioner.Props, 'className' | 'style' | 'render'>;
-type PopoverSheetStyledProps = PopoverSheetPositionerProps & {
+type PopoverSheetContainerProps = {
+    /**
+     * Portal mount node (iframe body, shadow root, or app overlay root).
+     * Omit for Base UI default (`document.body` from the module window —
+     * iframe hosts must pass the iframe document body explicitly).
+     *
+     * @default Base UI FloatingPortal resolution
+     */
+    container?: React.ComponentProps<typeof PrimitivePopover.Portal>['container'];
+};
+type PopoverSheetStyledProps = PopoverSheetPositionerProps & PopoverSheetContainerProps & {
     /**
      * Whether to skip the built-in Surface, header, and close chrome and render
      * only the positioning/animation shell (Portal + Positioner + Popup + Viewport).
@@ -33,7 +43,7 @@ type PopoverSheetStyledProps = PopoverSheetPositionerProps & {
      */
     headerAlign?: Extract<StackProps['hAlign'], 'start' | 'center' | 'end'>;
 };
-type PopoverSheetUnstyledProps = PopoverSheetPositionerProps & {
+type PopoverSheetUnstyledProps = PopoverSheetPositionerProps & PopoverSheetContainerProps & {
     /**
      * Renders only the positioning/animation shell; compose `Popover.Title`,
      * `Popover.Description`, and any chrome inside `children`.

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

@@ -8,72 +8,72 @@ import { Title } from "../title/title.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
 //#region src/components/popover/popover-sheet.tsx
-var PopoverSheet = ({ unstyled, title, description, children, showCloseButton = false, headerAlign = "start", sideOffset = 8, ...positionerProps }) => /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
-	className: popover_module_default.Sheet,
-	sideOffset,
-	...positionerProps,
-	children: unstyled ? /* @__PURE__ */ jsx(Popover.Popup, {
-		className: popover_module_default.Popup,
-		children: /* @__PURE__ */ jsx(Popover.Viewport, {
-			className: popover_module_default.Viewport,
-			"data-unstyled": "",
-			children
-		})
-	}) : /* @__PURE__ */ jsx(Popover.Popup, {
-		className: popover_module_default.Popup,
-		render: /* @__PURE__ */ jsx(Surface, {
-			color: 1,
-			border: "all",
-			radius: "large",
-			"data-vibrant": "",
-			render: /* @__PURE__ */ jsx(Stack, {
-				rowGap: "medium",
-				fillChildren: false
+var PopoverSheet = ({ unstyled, title, description, children, showCloseButton = false, headerAlign = "start", sideOffset = 8, container, ...positionerProps }) => /* @__PURE__ */ jsx(Popover.Portal, {
+	container,
+	children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		className: popover_module_default.Sheet,
+		sideOffset,
+		...positionerProps,
+		children: unstyled ? /* @__PURE__ */ jsx(Popover.Popup, {
+			className: popover_module_default.Popup,
+			children: /* @__PURE__ */ jsx(Popover.Viewport, {
+				className: popover_module_default.Viewport,
+				"data-unstyled": "",
+				children
 			})
-		}),
-		children: /* @__PURE__ */ jsxs(Popover.Viewport, {
-			className: popover_module_default.Viewport,
-			render: /* @__PURE__ */ jsx(Stack, {
-				rowGap: "medium",
-				vPadding: "medium",
-				hPadding: "medium",
-				fillChildren: false
+		}) : /* @__PURE__ */ jsx(Popover.Popup, {
+			className: popover_module_default.Popup,
+			render: /* @__PURE__ */ jsx(Surface, {
+				color: 1,
+				border: "all",
+				radius: "large",
+				"data-vibrant": "",
+				render: /* @__PURE__ */ jsx(Stack, { rowGap: "medium" })
 			}),
-			children: [
-				/* @__PURE__ */ jsxs(Stack, {
-					hAlign: headerAlign,
-					rowGap: "small",
-					vAlign: "start",
-					vPadding: [0, children ? "medium" : 0],
-					children: [/* @__PURE__ */ jsx(Popover.Title, {
-						render: /* @__PURE__ */ jsx(Title, {
-							align: headerAlign,
-							size: "6",
-							lineHeight: "x-small"
-						}),
-						children: title
-					}), description && /* @__PURE__ */ jsx(Popover.Description, {
-						render: /* @__PURE__ */ jsx(Text, {
-							align: headerAlign,
-							tone: "muted",
-							render: /* @__PURE__ */ jsx("p", {})
-						}),
-						children: description
-					})]
-				}),
-				showCloseButton && /* @__PURE__ */ jsx(Popover.Close, {
-					className: popover_module_default.CloseButton,
-					render: /* @__PURE__ */ jsx(IconButton, {
-						"aria-label": "Close popover",
-						icon: /* @__PURE__ */ jsx(ChromeXmark, {}),
-						size: "small",
-						variant: "flat"
-					})
+			children: /* @__PURE__ */ jsxs(Popover.Viewport, {
+				className: popover_module_default.Viewport,
+				render: /* @__PURE__ */ jsx(Stack, {
+					rowGap: "medium",
+					vPadding: "medium",
+					hPadding: "medium"
 				}),
-				children
-			]
+				children: [
+					/* @__PURE__ */ jsxs(Stack, {
+						fillChildren: true,
+						hAlign: headerAlign,
+						rowGap: "small",
+						vAlign: "start",
+						vPadding: [0, children ? "medium" : 0],
+						children: [/* @__PURE__ */ jsx(Popover.Title, {
+							render: /* @__PURE__ */ jsx(Title, {
+								align: headerAlign,
+								size: "6",
+								lineHeight: "x-small"
+							}),
+							children: title
+						}), description && /* @__PURE__ */ jsx(Popover.Description, {
+							render: /* @__PURE__ */ jsx(Text, {
+								align: headerAlign,
+								tone: "muted",
+								render: /* @__PURE__ */ jsx("p", {})
+							}),
+							children: description
+						})]
+					}),
+					showCloseButton && /* @__PURE__ */ jsx(Popover.Close, {
+						className: popover_module_default.CloseButton,
+						render: /* @__PURE__ */ jsx(IconButton, {
+							"aria-label": "Close popover",
+							icon: /* @__PURE__ */ jsx(ChromeXmark, {}),
+							size: "small",
+							variant: "flat"
+						})
+					}),
+					children
+				]
+			})
 		})
 	})
-}) });
+});
 //#endregion
 export { PopoverSheet };

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

@@ -8,7 +8,8 @@
     "Lightweight forms or confirmations that float beside the trigger without blocking the page",
     "Multi-trigger panels that swap content with direction-aware animations using `Popover.createHandle` and trigger `payload`",
     "Hover-revealed hints via `openOnHover` with `delay` and `closeDelay`",
-    "Fully custom popup chrome via `Sheet` `unstyled` composed with `Popover.Title` and `Popover.Description`"
+    "Fully custom popup chrome via `Sheet` `unstyled` composed with `Popover.Title` and `Popover.Description`",
+    "Custom portal host (iframe preview, shadow root, or app overlay root) via `container` on the portal-owning public part"
   ],
   "whenNotToUse": [
     "Modal tasks that must block the page and demand focused attention (use Dialog)",
@@ -29,6 +30,9 @@
   "related": ["Surface", "Button", "IconButton", "Stack", "Dialog", "Tabs"],
   "properties": {
     "react": {
+      "Sheet.container": {
+        "description": "Portal mount node (iframe body, shadow root, or app overlay root). Omit for Base UI default (`document.body` from the module window — iframe hosts must pass the iframe document body explicitly)."
+      },
       "Sheet.description": {
         "description": "Supporting copy announced with the title."
       },

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.d.ts

@@ -1,5 +1,5 @@
 import { FieldRoot } from '@base-ui/react/field';
-import { SelectRoot } from '@base-ui/react/select';
+import { SelectRoot, Select as PrimitiveSelect } from '@base-ui/react/select';
 import { SelectGroup } from './select-group';
 import { SelectOption } from './select-option';
 import { SelectSeparator } from './select-separator';
@@ -59,8 +59,16 @@ export type SelectProps = SelectRoot.Props<string> & Omit<FieldRoot.Props, 'ref'
      * @default true
      */
     alignListWithTrigger?: boolean;
+    /**
+     * Portal mount node (iframe body, shadow root, or app overlay root).
+     * Omit for Base UI default (`document.body` from the module window —
+     * iframe hosts must pass the iframe document body explicitly).
+     *
+     * @default Base UI FloatingPortal resolution
+     */
+    container?: React.ComponentProps<typeof PrimitiveSelect.Portal>['container'];
 };
-declare function SelectRootComponent({ alignListWithTrigger, children, className, description, dirty, disabled, error, addon, invalid, label, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }: SelectProps): React.JSX.Element;
+declare function SelectRootComponent({ alignListWithTrigger, children, className, container, description, dirty, disabled, error, addon, invalid, label, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }: SelectProps): React.JSX.Element;
 export declare const Select: typeof SelectRootComponent & {
     Option: typeof SelectOption;
     Group: typeof SelectGroup;

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

@@ -8,7 +8,8 @@
     "Grouped or separated option lists",
     "Rich option rows with a leading decorative addon and multi-line label content",
     "Trigger chrome aligned with Textfield control shell",
-    "Select fields inside Fieldset when they share a section legend with other inputs"
+    "Select fields inside Fieldset when they share a section legend with other inputs",
+    "Custom portal host (iframe preview, shadow root, or app overlay root) via `container` on the portal-owning public part"
   ],
   "whenNotToUse": [
     "Multiple selection",
@@ -37,6 +38,9 @@
       "alignListWithTrigger": {
         "description": "When `true`, aligns the list popup width with the trigger via Base UI `alignItemWithTrigger`. Prefer `false` when options use a leading `addon`."
       },
+      "container": {
+        "description": "Portal mount node (iframe body, shadow root, or app overlay root). Omit for Base UI default (`document.body` from the module window — iframe hosts must pass the iframe document body explicitly)."
+      },
       "description": {
         "description": "Helper copy rendered with `Field.Description` and `Text` while the field is valid."
       },

package/dist/components/select/select.js

@@ -18,7 +18,7 @@ import { Field } from "@base-ui/react/field";
 import { useId } from "react";
 import { Select } from "@base-ui/react/select";
 //#region src/components/select/select.tsx
-function SelectRootComponent({ alignListWithTrigger = true, children, className, description, dirty, disabled, error, addon = /* @__PURE__ */ jsx(ChromeChevronExpandY, { size: 16 }), invalid, label, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }) {
+function SelectRootComponent({ alignListWithTrigger = true, children, className, container, description, dirty, disabled, error, addon = /* @__PURE__ */ jsx(ChromeChevronExpandY, { size: 16 }), invalid, label, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }) {
 	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...restSelectProps } = selectRootProps;
 	const fieldLabelId = useId();
 	const listAccessibleNameProps = {};
@@ -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,
@@ -80,66 +81,67 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 						}),
 						children: addon
 					})]
-				}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
-					alignItemWithTrigger: alignListWithTrigger,
-					sideOffset: 2,
-					children: /* @__PURE__ */ jsxs(Select.Popup, {
-						className: select_module_default.SelectPopup,
-						children: [
-							/* @__PURE__ */ jsx(Select.ScrollUpArrow, {
-								className: clsx(select_module_default.ScrollArrow, select_module_default.ScrollArrowUp),
-								"data-vibrant": "",
-								render: /* @__PURE__ */ jsx(Stack, {
-									fillChildren: false,
-									hAlign: "center",
-									vAlign: "center"
-								}),
-								children: /* @__PURE__ */ jsx(IconButton, {
-									"aria-label": "Scroll list up",
-									className: select_module_default.ScrollButton,
-									icon: /* @__PURE__ */ jsx(ChromeChevronUp, {}),
-									size: "small",
-									tabIndex: -1,
-									variant: "flat"
-								})
-							}),
-							/* @__PURE__ */ jsx(Elevator, {
-								resting: 1,
-								children: /* @__PURE__ */ jsx(Select.List, {
-									...listAccessibleNameProps,
-									className: select_module_default.List,
-									render: /* @__PURE__ */ jsx(Surface, {
-										border: "all",
-										color: 1,
-										hPadding: "x-small",
-										overflow: "auto",
-										radius: "medium",
-										vPadding: "x-small",
-										"data-vibrant": ""
+				}), /* @__PURE__ */ jsx(Select.Portal, {
+					container,
+					children: /* @__PURE__ */ jsx(Select.Positioner, {
+						alignItemWithTrigger: alignListWithTrigger,
+						sideOffset: 2,
+						children: /* @__PURE__ */ jsxs(Select.Popup, {
+							className: select_module_default.SelectPopup,
+							children: [
+								/* @__PURE__ */ jsx(Select.ScrollUpArrow, {
+									className: clsx(select_module_default.ScrollArrow, select_module_default.ScrollArrowUp),
+									"data-vibrant": "",
+									render: /* @__PURE__ */ jsx(Stack, {
+										hAlign: "center",
+										vAlign: "center"
 									}),
-									children
-								})
-							}),
-							/* @__PURE__ */ jsx(Select.ScrollDownArrow, {
-								className: clsx(select_module_default.ScrollArrow, select_module_default.ScrollArrowDown),
-								"data-vibrant": "",
-								render: /* @__PURE__ */ jsx(Stack, {
-									fillChildren: false,
-									hAlign: "center",
-									vAlign: "center"
+									children: /* @__PURE__ */ jsx(IconButton, {
+										"aria-label": "Scroll list up",
+										className: select_module_default.ScrollButton,
+										icon: /* @__PURE__ */ jsx(ChromeChevronUp, {}),
+										size: "small",
+										tabIndex: -1,
+										variant: "flat"
+									})
 								}),
-								children: /* @__PURE__ */ jsx(IconButton, {
-									"aria-label": "Scroll list down",
-									className: select_module_default.ScrollButton,
-									icon: /* @__PURE__ */ jsx(ChromeChevronDown, {}),
-									size: "small",
-									tabIndex: -1,
-									variant: "flat"
+								/* @__PURE__ */ jsx(Elevator, {
+									resting: 1,
+									children: /* @__PURE__ */ jsx(Select.List, {
+										...listAccessibleNameProps,
+										className: select_module_default.List,
+										render: /* @__PURE__ */ jsx(Surface, {
+											border: "all",
+											color: 1,
+											hPadding: "x-small",
+											overflow: "auto",
+											radius: "medium",
+											vPadding: "x-small",
+											"data-vibrant": ""
+										}),
+										children
+									})
+								}),
+								/* @__PURE__ */ jsx(Select.ScrollDownArrow, {
+									className: clsx(select_module_default.ScrollArrow, select_module_default.ScrollArrowDown),
+									"data-vibrant": "",
+									render: /* @__PURE__ */ jsx(Stack, {
+										hAlign: "center",
+										vAlign: "center"
+									}),
+									children: /* @__PURE__ */ jsx(IconButton, {
+										"aria-label": "Scroll list down",
+										className: select_module_default.ScrollButton,
+										icon: /* @__PURE__ */ jsx(ChromeChevronDown, {}),
+										size: "small",
+										tabIndex: -1,
+										variant: "flat"
+									})
 								})
-							})
-						]
+							]
+						})
 					})
-				}) })]
+				})]
 			}),
 			/* @__PURE__ */ jsx(FieldHelperCopy, {
 				className: select_module_default.Description,

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