@viraui/react 2026.0.13 → 2026.0.15

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

@@ -77,12 +77,20 @@ export type AutocompleteProps = Omit<AutocompleteRoot.Props<any>, 'children'> &
      * @default No ref is attached.
      */
     ref?: React.Ref<HTMLInputElement>;
+    /**
+     * 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 PrimitiveAutocomplete.Portal>['container'];
     /**
      * List content: static nodes (`Item` / `Group` / `Collection`) or a Base UI list render function.
      */
     children?: React.ReactNode | ((item: any, index: number) => React.ReactNode);
 };
-declare function AutocompleteRootComponent({ children, className, description, dirty, disabled, empty, endAddon, error, fitContent, invalid, label, name, placeholder, ref, startAddon, status, touched, validate, validationDebounceTime, validationMode, ...autocompleteRootProps }: AutocompleteProps): React.JSX.Element;
+declare function AutocompleteRootComponent({ children, className, container, description, dirty, disabled, empty, endAddon, error, fitContent, invalid, label, name, placeholder, ref, startAddon, status, touched, validate, validationDebounceTime, validationMode, ...autocompleteRootProps }: AutocompleteProps): React.JSX.Element;
 declare const AutocompleteCollection: typeof PrimitiveAutocomplete.Collection;
 type AutocompleteComponent = typeof AutocompleteRootComponent & {
     Item: typeof AutocompleteItemPart;

package/dist/components/autocomplete/autocomplete.guide.json

@@ -7,7 +7,8 @@
     "Suggest options while allowing free-form text in the input",
     "Filterable tag, movie, or docs search with optional empty and status copy",
     "Grouped suggestion lists via Autocomplete.Group and Collection",
-    "Async or limited result lists that need polite status announcements"
+    "Async or limited result lists that need polite status announcements",
+    "Custom portal host (iframe preview, shadow root, or app overlay root) via `container` on the portal-owning public part"
   ],
   "whenNotToUse": [
     "Remembered selection from a closed list — use Select (or Combobox when available)",
@@ -27,6 +28,9 @@
   "related": ["Textfield", "Select", "Fieldset", "Stack", "Surface", "Spinner"],
   "properties": {
     "react": {
+      "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/autocomplete/autocomplete.js

@@ -18,7 +18,7 @@ import { Autocomplete } from "@base-ui/react/autocomplete";
 import { useId } from "react";
 //#region src/components/autocomplete/autocomplete.tsx
 var AutocompletePrimitiveRoot = Autocomplete.Root;
-function AutocompleteRootComponent({ children, className, description, dirty, disabled, empty, endAddon, error, fitContent, invalid, label, name, placeholder, ref, startAddon, status, touched, validate, validationDebounceTime, validationMode, ...autocompleteRootProps }) {
+function AutocompleteRootComponent({ children, className, container, description, dirty, disabled, empty, endAddon, error, fitContent, invalid, label, name, placeholder, ref, startAddon, status, touched, validate, validationDebounceTime, validationMode, ...autocompleteRootProps }) {
 	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...restAutocompleteProps } = autocompleteRootProps;
 	const fieldLabelId = useId();
 	const listAccessibleNameProps = {};
@@ -36,6 +36,7 @@ function AutocompleteRootComponent({ children, className, description, dirty, di
 		validationDebounceTime,
 		validationMode,
 		render: /* @__PURE__ */ jsx(Stack, {
+			fillChildren: true,
 			direction: "column",
 			rowGap: "small"
 		}),
@@ -63,48 +64,51 @@ function AutocompleteRootComponent({ children, className, description, dirty, di
 						ref,
 						...fitContent && { "data-sizing": "content" }
 					})
-				}), /* @__PURE__ */ jsx(Autocomplete.Portal, { children: /* @__PURE__ */ jsx(Autocomplete.Positioner, {
-					sideOffset: 2,
-					children: /* @__PURE__ */ jsx(Autocomplete.Popup, {
-						className: autocomplete_module_default.AutocompletePopup,
-						children: /* @__PURE__ */ jsx(Elevator, {
-							resting: 1,
-							children: /* @__PURE__ */ jsxs(Surface, {
-								border: "all",
-								className: autocomplete_module_default.PopupChrome,
-								color: 1,
-								"data-vibrant": "",
-								hPadding: "x-small",
-								overflow: "auto",
-								radius: "medium",
-								vPadding: "x-small",
-								children: [
-									/* @__PURE__ */ jsx(Autocomplete.Status, {
-										className: autocomplete_module_default.Status,
-										children: typeof status === "string" ? /* @__PURE__ */ jsx(Text, {
-											size: "x-small",
-											tone: "muted",
-											children: status
-										}) : status
-									}),
-									/* @__PURE__ */ jsx(Autocomplete.Empty, {
-										className: autocomplete_module_default.Empty,
-										children: typeof empty === "string" ? /* @__PURE__ */ jsx(Text, {
-											size: "small",
-											tone: "muted",
-											children: empty
-										}) : empty
-									}),
-									/* @__PURE__ */ jsx(Autocomplete.List, {
-										...listAccessibleNameProps,
-										className: autocomplete_module_default.List,
-										children
-									})
-								]
+				}), /* @__PURE__ */ jsx(Autocomplete.Portal, {
+					container,
+					children: /* @__PURE__ */ jsx(Autocomplete.Positioner, {
+						sideOffset: 2,
+						children: /* @__PURE__ */ jsx(Autocomplete.Popup, {
+							className: autocomplete_module_default.AutocompletePopup,
+							children: /* @__PURE__ */ jsx(Elevator, {
+								resting: 1,
+								children: /* @__PURE__ */ jsxs(Surface, {
+									border: "all",
+									className: autocomplete_module_default.PopupChrome,
+									color: 1,
+									"data-vibrant": "",
+									hPadding: "x-small",
+									overflow: "auto",
+									radius: "medium",
+									vPadding: "x-small",
+									children: [
+										/* @__PURE__ */ jsx(Autocomplete.Status, {
+											className: autocomplete_module_default.Status,
+											children: typeof status === "string" ? /* @__PURE__ */ jsx(Text, {
+												size: "x-small",
+												tone: "muted",
+												children: status
+											}) : status
+										}),
+										/* @__PURE__ */ jsx(Autocomplete.Empty, {
+											className: autocomplete_module_default.Empty,
+											children: typeof empty === "string" ? /* @__PURE__ */ jsx(Text, {
+												size: "small",
+												tone: "muted",
+												children: empty
+											}) : empty
+										}),
+										/* @__PURE__ */ jsx(Autocomplete.List, {
+											...listAccessibleNameProps,
+											className: autocomplete_module_default.List,
+											children
+										})
+									]
+								})
 							})
 						})
 					})
-				}) })]
+				})]
 			}),
 			/* @__PURE__ */ jsx(FieldHelperCopy, {
 				className: autocomplete_module_default.Description,

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

@@ -1,3 +1,4 @@
+import { Drawer as PrimitiveDrawer } from '@base-ui/react';
 import { StackProps } from '..';
 import type * as React from 'react';
 /**
@@ -62,5 +63,13 @@ export type DialogSheetProps = {
      * @default `97dvh`
      */
     maxHeight?: string;
+    /**
+     * 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 PrimitiveDrawer.Portal>['container'];
 };
 export declare const DialogSheet: React.FC<DialogSheetProps>;

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

@@ -9,76 +9,81 @@ import { Title } from "../title/title.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react";
 //#region src/components/dialog/dialog-sheet.tsx
-var DialogSheet = ({ children, description, title, showCloseButton = false, fitContent = false, showHandle = true, headerAlign = "start", maxContentWidth = "50ch", maxHeight = "97dvh" }) => /* @__PURE__ */ jsxs(Drawer.Portal, { children: [/* @__PURE__ */ jsx(Drawer.Backdrop, { className: dialog_module_default.Backdrop }), /* @__PURE__ */ jsx(Drawer.Viewport, {
-	render: /* @__PURE__ */ jsx(Stack, {
-		vAlign: "end",
-		hPadding: "small",
-		vPadding: "small",
-		fillChildren: false,
-		hAlign: fitContent ? "center" : void 0
-	}),
-	className: dialog_module_default.Viewport,
-	children: /* @__PURE__ */ jsx(Elevator, {
-		resting: 4,
-		children: /* @__PURE__ */ jsxs(Drawer.Popup, {
-			className: dialog_module_default.Popup,
-			style: { "--vui-dialog-max-block-size": maxHeight },
-			render: /* @__PURE__ */ jsx(Surface, {
-				border: "top",
-				render: /* @__PURE__ */ jsx(Stack, { hAlign: "center" }),
-				color: 1,
-				"data-vibrant": "",
-				radius: "large",
-				vPadding: ["medium", 0]
-			}),
-			children: [showHandle && /* @__PURE__ */ jsxs(Stack, {
-				inline: true,
-				direction: "row",
-				vPadding: [0, "medium"],
-				columnGap: "small",
-				children: [
-					/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape }),
-					/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape }),
-					/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape })
-				]
-			}), /* @__PURE__ */ jsxs(Stack, {
-				maxWidth: maxContentWidth,
-				rowGap: "large",
-				className: dialog_module_default.Body,
-				children: [/* @__PURE__ */ jsxs(Stack, {
-					className: dialog_module_default.Header,
-					"data-shrink": "false",
-					hAlign: headerAlign,
-					hPadding: "medium",
-					fillChildren: false,
-					children: [/* @__PURE__ */ jsx(Drawer.Title, {
-						render: /* @__PURE__ */ jsx(Title, { size: "4" }),
-						children: title
-					}), description && /* @__PURE__ */ jsx(Drawer.Description, {
-						render: /* @__PURE__ */ jsx(Text, {
-							tone: "muted",
-							render: /* @__PURE__ */ jsx("p", {})
-						}),
-						children: description
-					})]
-				}), /* @__PURE__ */ jsxs(Drawer.Content, {
+var DialogSheet = ({ children, description, title, showCloseButton = false, fitContent = false, showHandle = true, headerAlign = "start", maxContentWidth = "50ch", maxHeight = "97dvh", container }) => /* @__PURE__ */ jsxs(Drawer.Portal, {
+	container,
+	children: [/* @__PURE__ */ jsx(Drawer.Backdrop, { className: dialog_module_default.Backdrop }), /* @__PURE__ */ jsx(Drawer.Viewport, {
+		render: /* @__PURE__ */ jsx(Stack, {
+			vAlign: "end",
+			hPadding: "small",
+			vPadding: "small",
+			hAlign: fitContent ? "center" : void 0
+		}),
+		className: dialog_module_default.Viewport,
+		children: /* @__PURE__ */ jsx(Elevator, {
+			resting: 4,
+			children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+				className: dialog_module_default.Popup,
+				style: { "--vui-dialog-max-block-size": maxHeight },
+				render: /* @__PURE__ */ jsx(Surface, {
+					border: "top",
 					render: /* @__PURE__ */ jsx(Stack, {
-						vAlign: "start",
-						fillChildren: false,
-						className: dialog_module_default.Content
+						fillChildren: true,
+						hAlign: "center"
 					}),
-					children: [showCloseButton && /* @__PURE__ */ jsx(Drawer.Close, {
-						className: dialog_module_default.CloseButton,
-						render: /* @__PURE__ */ jsx(IconButton, {
-							"aria-label": "Close dialog",
-							icon: /* @__PURE__ */ jsx(ChromeXmark, {}),
-							variant: "flat"
-						})
-					}), children]
+					color: 1,
+					"data-vibrant": "",
+					radius: "large",
+					vPadding: ["medium", 0]
+				}),
+				children: [showHandle && /* @__PURE__ */ jsxs(Stack, {
+					fillChildren: true,
+					inline: true,
+					direction: "row",
+					vPadding: [0, "medium"],
+					columnGap: "small",
+					children: [
+						/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape }),
+						/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape }),
+						/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape })
+					]
+				}), /* @__PURE__ */ jsxs(Stack, {
+					fillChildren: true,
+					maxWidth: maxContentWidth,
+					rowGap: "large",
+					className: dialog_module_default.Body,
+					children: [/* @__PURE__ */ jsxs(Stack, {
+						className: dialog_module_default.Header,
+						"data-shrink": "false",
+						hAlign: headerAlign,
+						hPadding: "medium",
+						children: [/* @__PURE__ */ jsx(Drawer.Title, {
+							render: /* @__PURE__ */ jsx(Title, { size: "4" }),
+							children: title
+						}), description && /* @__PURE__ */ jsx(Drawer.Description, {
+							render: /* @__PURE__ */ jsx(Text, {
+								tone: "muted",
+								render: /* @__PURE__ */ jsx("p", {})
+							}),
+							children: description
+						})]
+					}), /* @__PURE__ */ jsxs(Drawer.Content, {
+						render: /* @__PURE__ */ jsx(Stack, {
+							vAlign: "start",
+							className: dialog_module_default.Content
+						}),
+						children: [showCloseButton && /* @__PURE__ */ jsx(Drawer.Close, {
+							className: dialog_module_default.CloseButton,
+							render: /* @__PURE__ */ jsx(IconButton, {
+								"aria-label": "Close dialog",
+								icon: /* @__PURE__ */ jsx(ChromeXmark, {}),
+								variant: "flat"
+							})
+						}), children]
+					})]
 				})]
-			})]
+			})
 		})
-	})
-})] });
+	})]
+});
 //#endregion
 export { DialogSheet };

package/dist/components/dialog/dialog.guide.json

@@ -8,7 +8,8 @@
     "Short forms or read-only content that needs a modal layer above the app",
     "Bottom sheets where swipe dismissal or snap points are useful (pass `snapPoints`, `snapPoint`/`onSnapPointChange`, or `defaultSnapPoint` directly on `Dialog`)",
     "Drill-down sheet flows (for example settings sub-pages) by nesting a `Dialog` inside `Dialog.Sheet` children",
-    "App-shell indent effects by wrapping page content in `Dialog.Provider`, `Dialog.IndentBackground`, and `Dialog.Indent`"
+    "App-shell indent effects by wrapping page content in `Dialog.Provider`, `Dialog.IndentBackground`, and `Dialog.Indent`",
+    "Custom portal host (iframe preview, shadow root, or app overlay root) via `container` on the portal-owning public part"
   ],
   "whenNotToUse": [
     "Small anchored hints or quick actions that should use Popover or Menu",
@@ -31,6 +32,9 @@
       "Sheet.children": {
         "description": "Optional body content rendered below the description."
       },
+      "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/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-popup.d.ts

@@ -1,4 +1,4 @@
-import { MenuPositioner } from '@base-ui/react/menu';
+import { Menu as PrimitiveMenu, MenuPositioner } from '@base-ui/react/menu';
 import type * as React from 'react';
 type MenuPopupPositionerProps = Omit<MenuPositioner.Props, 'className' | 'style' | 'render'>;
 /**
@@ -13,6 +13,14 @@ type MenuPopupPositionerProps = Omit<MenuPositioner.Props, 'className' | 'style'
  */
 export type MenuPopupProps = MenuPopupPositionerProps & {
     children?: React.ReactNode;
+    /**
+     * 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 PrimitiveMenu.Portal>['container'];
 };
 export declare const MenuPopup: React.FC<MenuPopupProps>;
 export {};

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

@@ -4,25 +4,28 @@ import menu_module_default from "./menu.module.js";
 import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 //#region src/components/menu/menu-popup.tsx
-var MenuPopup = ({ children, sideOffset = 2, ...positionerProps }) => /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
-	sideOffset,
-	...positionerProps,
-	children: /* @__PURE__ */ jsx(Elevator, {
-		resting: 1,
-		children: /* @__PURE__ */ jsx(Menu.Popup, {
-			className: menu_module_default.MenuPopup,
-			render: /* @__PURE__ */ jsx(Surface, {
-				border: "all",
-				color: 1,
-				"data-vibrant": true,
-				hPadding: "x-small",
-				overflow: "auto",
-				radius: "medium",
-				vPadding: "x-small"
-			}),
-			children
+var MenuPopup = ({ children, sideOffset = 2, container, ...positionerProps }) => /* @__PURE__ */ jsx(Menu.Portal, {
+	container,
+	children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		sideOffset,
+		...positionerProps,
+		children: /* @__PURE__ */ jsx(Elevator, {
+			resting: 1,
+			children: /* @__PURE__ */ jsx(Menu.Popup, {
+				className: menu_module_default.MenuPopup,
+				render: /* @__PURE__ */ jsx(Surface, {
+					border: "all",
+					color: 1,
+					"data-vibrant": true,
+					hPadding: "x-small",
+					overflow: "auto",
+					radius: "medium",
+					vPadding: "x-small"
+				}),
+				children
+			})
 		})
 	})
-}) });
+});
 //#endregion
 export { MenuPopup };