@viraui/react 2026.0.12 → 2026.0.14

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 = {};
@@ -63,48 +63,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/button/button.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2x-large);--vui-button-padding-inline:calc(var(--space-small) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-medium);-webkit-user-select:none;user-select:none;margin:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:var(--vui-button-height);block-size:var(--vui-button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-medium);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{border-radius:var(--radius-infinite)}&[data-size=big]{--vui-button-height:calc(var(--space-2x-large) + var(--space-x-small));--vui-button-padding-inline:calc(var(--space-medium) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-radius:var(--radius-medium)}&[data-size=small]{--vui-button-height:var(--space-x-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-x-small);--vui-button-icon-size:1em;--vui-button-radius:var(--radius-small);gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-6);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b/calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b/0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--base-5);&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b/12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b/30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-loading=true][data-disabled]{pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:var(--vui-button-icon-size);inline-size:var(--vui-button-icon-size);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2x-large);--vui-button-padding-inline:calc(var(--space-small) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-medium);max-block-size:min-content;-webkit-user-select:none;user-select:none;margin:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:var(--vui-button-height);block-size:var(--vui-button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-medium);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{border-radius:var(--radius-infinite)}&[data-size=big]{--vui-button-height:calc(var(--space-2x-large) + var(--space-x-small));--vui-button-padding-inline:calc(var(--space-medium) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-radius:var(--radius-medium)}&[data-size=small]{--vui-button-height:var(--space-x-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-x-small);--vui-button-icon-size:1em;--vui-button-radius:var(--radius-small);gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-6);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b/calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b/0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--base-5);&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b/12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b/30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-loading=true][data-disabled]{pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:var(--vui-button-icon-size);inline-size:var(--vui-button-icon-size);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}

package/dist/components/checkbox/checkbox.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-checkbox-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-checkbox-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-checkbox-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__checkbox-module__Checkbox_3oGip{&:has([required]) .viraui__checkbox-module__Label_n9HL7:after{content:" ＊";color:var(--highlight-red)}}.viraui__checkbox-module__CheckboxRoot_PeyF5{--vui-checkbox-size:var(--space-medium);--vui-checkbox-radius:var(--radius-x-small);--vui-checkbox-background:var(--global-contrast);--vui-checkbox-indicator-color:contrast-color(var(--global-primary));position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--vui-checkbox-border-color);inline-size:var(--vui-checkbox-size);block-size:var(--vui-checkbox-size);background:var(--vui-checkbox-background);border-radius:var(--vui-checkbox-radius);&[data-size=regular]{--vui-checkbox-size:var(--space-large);--vui-checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-checkbox-background:var(--global-primary);--vui-checkbox-border-color:var(--global-primary);box-shadow:none}&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--vui-checkbox-indicator-color:var(--global-foreground)}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-checkbox-border-color:var(--highlight-red);--vui-checkbox-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--vui-checkbox-border-color);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--vui-checkbox-background:var(--global-disabled-background);--vui-checkbox-border-color:#0000;--vui-checkbox-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__checkbox-module__Indicator_C-k-l{display:inline-flex;align-items:center;justify-content:center;color:var(--vui-checkbox-indicator-color);inline-size:100%;block-size:100%}.viraui__checkbox-module__CheckIcon_XqUcs,.viraui__checkbox-module__MinusIcon_Q57pY{inline-size:75%;block-size:75%;stroke:currentcolor}.viraui__checkbox-module__CheckboxRoot_PeyF5:not([data-indeterminate]) .viraui__checkbox-module__MinusIcon_Q57pY,.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__CheckIcon_XqUcs{display:none}.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__MinusIcon_Q57pY{display:inline-flex}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-checkbox-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-checkbox-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-checkbox-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__checkbox-module__Checkbox_3oGip{max-block-size:min-content;&:has([required]) .viraui__checkbox-module__Label_n9HL7:after{content:" ＊";color:var(--highlight-red)}}.viraui__checkbox-module__CheckboxRoot_PeyF5{--vui-checkbox-size:var(--space-medium);--vui-checkbox-radius:var(--radius-x-small);--vui-checkbox-background:var(--global-contrast);--vui-checkbox-indicator-color:contrast-color(var(--global-primary));position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--vui-checkbox-border-color);inline-size:var(--vui-checkbox-size);block-size:var(--vui-checkbox-size);background:var(--vui-checkbox-background);border-radius:var(--vui-checkbox-radius);&[data-size=regular]{--vui-checkbox-size:var(--space-large);--vui-checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-checkbox-background:var(--global-primary);--vui-checkbox-border-color:var(--global-primary);box-shadow:none}&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--vui-checkbox-indicator-color:var(--global-foreground)}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-checkbox-border-color:var(--highlight-red);--vui-checkbox-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--vui-checkbox-border-color);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--vui-checkbox-background:var(--global-disabled-background);--vui-checkbox-border-color:#0000;--vui-checkbox-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__checkbox-module__Indicator_C-k-l{display:inline-flex;align-items:center;justify-content:center;color:var(--vui-checkbox-indicator-color);inline-size:100%;block-size:100%}.viraui__checkbox-module__CheckIcon_XqUcs,.viraui__checkbox-module__MinusIcon_Q57pY{inline-size:75%;block-size:75%;stroke:currentcolor}.viraui__checkbox-module__CheckboxRoot_PeyF5:not([data-indeterminate]) .viraui__checkbox-module__MinusIcon_Q57pY,.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__CheckIcon_XqUcs{display:none}.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__MinusIcon_Q57pY{display:inline-flex}}

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,79 @@ 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", {})
+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",
+			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, {
+						render: /* @__PURE__ */ jsx(Stack, {
+							vAlign: "start",
+							fillChildren: false,
+							className: dialog_module_default.Content
 						}),
-						children: description
+						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]
 					})]
-				}), /* @__PURE__ */ jsxs(Drawer.Content, {
-					render: /* @__PURE__ */ jsx(Stack, {
-						vAlign: "start",
-						fillChildren: false,
-						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/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 };

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/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,75 @@ 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",
+					fillChildren: false
+				})
 			}),
-			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",
+					fillChildren: false
 				}),
-				children
-			]
+				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
+				]
+			})
 		})
 	})
-}) });
+});
 //#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.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-radio-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --__radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --__radio-disk-size{syntax:"<length>";inherits:true;initial-value:0}.viraui__radio-module__RadioRoot_3uvvn{--vui-radio-size:var(--space-medium);--vui-radio-background:var(--global-contrast);--vui-radio-indicator-color:contrast-color(var(--global-primary));--__radio-size:round(nearest,var(--vui-radio-size),2px);--__radio-disk-size:round(down,calc(var(--__radio-size) / 2),2px);position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--vui-radio-border-color);inline-size:var(--__radio-size);block-size:var(--__radio-size);background:var(--vui-radio-background);border-radius:100000px;corner-shape:unset;&[data-size=regular]{--vui-radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-radio-background:var(--global-primary);--vui-radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-radio-border-color:var(--highlight-red);--vui-radio-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--vui-radio-background:var(--global-disabled-background);--vui-radio-border-color:#0000;--vui-radio-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__radio-module__Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--vui-radio-indicator-color)}.viraui__radio-module__Disk_pV-Q1{inline-size:var(--__radio-disk-size);block-size:var(--__radio-disk-size);border-radius:100000px;corner-shape:unset;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-radio-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --__radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --__radio-disk-size{syntax:"<length>";inherits:true;initial-value:0}.viraui__radio-module__Radio_54m33{max-block-size:min-content}.viraui__radio-module__RadioRoot_3uvvn{--vui-radio-size:var(--space-medium);--vui-radio-background:var(--global-contrast);--vui-radio-indicator-color:contrast-color(var(--global-primary));--__radio-size:round(nearest,var(--vui-radio-size),2px);--__radio-disk-size:round(down,calc(var(--__radio-size) / 2),2px);position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--vui-radio-border-color);inline-size:var(--__radio-size);block-size:var(--__radio-size);background:var(--vui-radio-background);border-radius:100000px;corner-shape:unset;&[data-size=regular]{--vui-radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-radio-background:var(--global-primary);--vui-radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-radio-border-color:var(--highlight-red);--vui-radio-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--vui-radio-background:var(--global-disabled-background);--vui-radio-border-color:#0000;--vui-radio-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__radio-module__Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--vui-radio-indicator-color)}.viraui__radio-module__Disk_pV-Q1{inline-size:var(--__radio-disk-size);block-size:var(--__radio-disk-size);border-radius:100000px;corner-shape:unset;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}}

package/dist/components/radio/radio.js

@@ -10,35 +10,38 @@ import { Radio } from "@base-ui/react/radio";
 //#region src/components/radio/radio.tsx
 var Radio$1 = ({ className, description, disabled, id, label, ref, size = "small", vPadding, hPadding, value, ...radioRootProps }) => {
 	const hasTextDescription = Boolean(description);
-	return /* @__PURE__ */ jsx(Field.Item, { children: /* @__PURE__ */ jsx(Field.Label, { children: /* @__PURE__ */ jsxs(Stack, {
-		direction: "row",
-		columnGap: size === "small" ? "small" : "medium",
-		fillChildren: false,
-		vAlign: hasTextDescription ? "start" : "center",
-		hPadding,
-		vPadding,
-		children: [/* @__PURE__ */ jsx(Radio.Root, {
-			...radioRootProps,
-			className: clsx(radio_module_default.RadioRoot, className),
-			"data-size": size,
-			disabled,
-			id,
-			ref,
-			value,
-			children: /* @__PURE__ */ jsx(Radio.Indicator, {
-				className: radio_module_default.Indicator,
-				children: /* @__PURE__ */ jsx("span", { className: radio_module_default.Disk })
-			})
-		}), label || description ? /* @__PURE__ */ jsxs(Stack, {
-			direction: "column",
+	return /* @__PURE__ */ jsx(Field.Item, {
+		className: radio_module_default.Radio,
+		children: /* @__PURE__ */ jsx(Field.Label, { children: /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			columnGap: size === "small" ? "small" : "medium",
 			fillChildren: false,
-			rowGap: "small",
-			children: [label && /* @__PURE__ */ jsx(FieldLabel, {
-				size: size === "small" ? "small" : "medium",
-				children: label
-			}), /* @__PURE__ */ jsx(FieldHelperCopy, { description })]
-		}) : null]
-	}) }) });
+			vAlign: hasTextDescription ? "start" : "center",
+			hPadding,
+			vPadding,
+			children: [/* @__PURE__ */ jsx(Radio.Root, {
+				...radioRootProps,
+				className: clsx(radio_module_default.RadioRoot, className),
+				"data-size": size,
+				disabled,
+				id,
+				ref,
+				value,
+				children: /* @__PURE__ */ jsx(Radio.Indicator, {
+					className: radio_module_default.Indicator,
+					children: /* @__PURE__ */ jsx("span", { className: radio_module_default.Disk })
+				})
+			}), label || description ? /* @__PURE__ */ jsxs(Stack, {
+				direction: "column",
+				fillChildren: false,
+				rowGap: "small",
+				children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+					size: size === "small" ? "small" : "medium",
+					children: label
+				}), /* @__PURE__ */ jsx(FieldHelperCopy, { description })]
+			}) : null]
+		}) })
+	});
 };
 //#endregion
 export { Radio$1 as Radio };

package/dist/components/radio/radio.module.js

@@ -1,11 +1,13 @@
 //#region src/components/radio/radio.module.css
+var Radio = "viraui__radio-module__Radio_54m33";
 var RadioRoot = "viraui__radio-module__RadioRoot_3uvvn";
 var Indicator = "viraui__radio-module__Indicator_Ecavw";
 var Disk = "viraui__radio-module__Disk_pV-Q1";
 var radio_module_default = {
+	Radio,
 	RadioRoot,
 	Indicator,
 	Disk
 };
 //#endregion
-export { Disk, Indicator, RadioRoot, radio_module_default as default };
+export { Disk, Indicator, Radio, RadioRoot, radio_module_default as default };

package/dist/components/select/select.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-select-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-start{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-end{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-list-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-list-padding{syntax:"<length>";inherits:true;initial-value:0}@property --__select-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__select-module__Select_eXv4Y{--vui-select-input-height:var(--space-2x-large);--vui-select-control-group-background:var(--base-1);--vui-select-control-group-color:var(--global-foreground);--vui-select-control-group-border-color:var(--global-contrast);--vui-select-control-group-border-radius:var(--radius-medium);--vui-select-trigger-padding-inline-start:calc(var(--space-small) + var(--space-x-small));--vui-select-trigger-padding-inline-end:var(--space-x-small);--vui-field-label-padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2);z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR{&:after{content:" ＊";color:var(--highlight-red)}&:dir(rtl){&:after{content:none}&:before{content:"＊ ";color:var(--highlight-red)}}}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--vui-select-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-select-input-height);padding-inline:var(--vui-select-trigger-padding-inline-start) var(--vui-select-trigger-padding-inline-end);border:1px solid var(--vui-select-control-group-border-color);border-radius:var(--vui-select-control-group-border-radius);background:var(--vui-select-control-group-background);color:var(--vui-select-control-group-color);font:inherit;text-align:start;cursor:pointer;&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--vui-select-control-group-background:var(--global-disabled-background);--vui-select-control-group-border-color:#0000;--vui-select-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2)}.viraui__select-module__SelectPopup_UzGXL{--vui-select-list-border-radius:var(--radius-medium);--vui-select-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__select-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__select-list-appear-offset)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__select-list-appear-offset) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__select-list-appear-offset) * -1) 0}&[data-side=none]{transition:none;scale:1;translate:0;opacity:1}}.viraui__select-module__ScrollArrow_kHlEi{position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--base-1);border:1px solid var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--base-1) l a b/80%);backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px))}}.viraui__select-module__ScrollButton_sHBOa{pointer-events:none}.viraui__select-module__ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--vui-select-list-border-radius) var(--vui-select-list-border-radius) 0 0}.viraui__select-module__ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--vui-select-list-border-radius) var(--vui-select-list-border-radius)}.viraui__select-module__List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);scroll-padding-block:var(--vui-select-list-padding);overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.viraui__select-module__Indicator_YNUuz{min-inline-size:var(--space-medium);min-block-size:var(--space-medium);inline-size:fit-content;block-size:fit-content;color:var(--global-primary);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}}@layer viraui.overrides{.viraui__select-module__Value_uWHPX{flex:1 1 auto;min-inline-size:0;overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.viraui__select-module__Option_KgYqz{cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-selected]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-select-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-start{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-end{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-list-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-list-padding{syntax:"<length>";inherits:true;initial-value:0}@property --__select-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__select-module__Select_eXv4Y{--vui-select-input-height:var(--space-2x-large);--vui-select-control-group-background:var(--base-1);--vui-select-control-group-color:var(--global-foreground);--vui-select-control-group-border-color:var(--global-contrast);--vui-select-control-group-border-radius:var(--radius-medium);--vui-select-trigger-padding-inline-start:calc(var(--space-small) + var(--space-x-small));--vui-select-trigger-padding-inline-end:var(--space-x-small);--vui-field-label-padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2);max-block-size:min-content;z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR{&:after{content:" ＊";color:var(--highlight-red)}&:dir(rtl){&:after{content:none}&:before{content:"＊ ";color:var(--highlight-red)}}}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--vui-select-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-select-input-height);padding-inline:var(--vui-select-trigger-padding-inline-start) var(--vui-select-trigger-padding-inline-end);border:1px solid var(--vui-select-control-group-border-color);border-radius:var(--vui-select-control-group-border-radius);background:var(--vui-select-control-group-background);color:var(--vui-select-control-group-color);font:inherit;text-align:start;cursor:pointer;&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--vui-select-control-group-background:var(--global-disabled-background);--vui-select-control-group-border-color:#0000;--vui-select-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2)}.viraui__select-module__SelectPopup_UzGXL{--vui-select-list-border-radius:var(--radius-medium);--vui-select-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__select-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__select-list-appear-offset)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__select-list-appear-offset) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__select-list-appear-offset) * -1) 0}&[data-side=none]{transition:none;scale:1;translate:0;opacity:1}}.viraui__select-module__ScrollArrow_kHlEi{position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--base-1);border:1px solid var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--base-1) l a b/80%);backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px))}}.viraui__select-module__ScrollButton_sHBOa{pointer-events:none}.viraui__select-module__ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--vui-select-list-border-radius) var(--vui-select-list-border-radius) 0 0}.viraui__select-module__ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--vui-select-list-border-radius) var(--vui-select-list-border-radius)}.viraui__select-module__List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);scroll-padding-block:var(--vui-select-list-padding);overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.viraui__select-module__Indicator_YNUuz{min-inline-size:var(--space-medium);min-block-size:var(--space-medium);inline-size:fit-content;block-size:fit-content;color:var(--global-primary);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}}@layer viraui.overrides{.viraui__select-module__Value_uWHPX{flex:1 1 auto;min-inline-size:0;overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.viraui__select-module__Option_KgYqz{cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-selected]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}}

package/dist/components/select/select.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 = {};
@@ -80,66 +80,69 @@ 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, {
+										fillChildren: false,
+										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, {
+										fillChildren: false,
+										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/slider/slider.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-slider-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-progress-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__slider-module__Slider_vDNlm{--vui-slider-track-size:var(--space-x-small);--vui-slider-thumb-size:var(--space-medium);--vui-slider-track-background:var(--global-contrast);--vui-slider-progress-background:var(--global-foreground);--vui-slider-thumb-background:var(--base-2);inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0;&:has([required]) .viraui__slider-module__Label_eQQHf:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]{--vui-slider-progress-background:var(--highlight-red)}&:has(.viraui__slider-module__SliderRoot_4JScw[data-disabled]),&[data-disabled]{--vui-slider-track-background:var(--global-disabled-background);--vui-slider-progress-background:var(--global-disabled-foreground);--vui-slider-thumb-background:var(--global-disabled-foreground);cursor:not-allowed}}.viraui__slider-module__SliderRoot_4JScw{inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0}.viraui__slider-module__SliderHeader_gOy9k{inline-size:100%;min-inline-size:0}.viraui__slider-module__Value_FaY9i{flex-shrink:0}.viraui__slider-module__SliderControl_FQd5-{position:relative;flex:1 1 auto;-webkit-user-select:none;user-select:none;touch-action:none;inline-size:100%;block-size:var(--vui-slider-track-size);min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{inline-size:var(--vui-slider-track-size);block-size:100%;>.viraui__slider-module__Track_wvLEH{inline-size:var(--vui-slider-track-size);block-size:100%}}}.viraui__slider-module__Track_wvLEH{position:relative;overflow:visible;inline-size:100%;block-size:var(--vui-slider-track-size);background:var(--vui-slider-track-background);border-radius:var(--radius-infinite)}.viraui__slider-module__Indicator_y3JyJ{background:var(--vui-slider-progress-background);border-radius:inherit}.viraui__slider-module__Thumb_S-uLF{box-sizing:border-box;inline-size:var(--vui-slider-thumb-size);block-size:calc(var(--vui-slider-thumb-size) - 2px);background:var(--vui-slider-thumb-background);border:2px solid var(--vui-slider-progress-background);border-radius:var(--radius-x-small);appearance:none;transition:scale var(--duration-instant) var(--easing-standard);&:not(:disabled,[data-disabled]){cursor:grab}&:not(:disabled,[data-disabled]):active,&:not(:disabled,[data-disabled]):has(>input:active),&:not(:disabled,[data-disabled])[data-dragging]:has(>input:focus){cursor:grabbing;scale:1.2}&:has(>input:focus-visible){outline:var(--outline);outline-offset:var(--outline-offset)}>input:focus-visible{outline:none}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-slider-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-progress-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__slider-module__Slider_vDNlm{--vui-slider-track-size:var(--space-x-small);--vui-slider-thumb-size:var(--space-medium);--vui-slider-track-background:var(--global-contrast);--vui-slider-progress-background:var(--global-foreground);--vui-slider-thumb-background:var(--base-2);inline-size:100%;block-size:100%;max-block-size:min-content;min-inline-size:0;min-block-size:0;&:has([required]) .viraui__slider-module__Label_eQQHf:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]{--vui-slider-progress-background:var(--highlight-red)}&:has(.viraui__slider-module__SliderRoot_4JScw[data-disabled]),&[data-disabled]{--vui-slider-track-background:var(--global-disabled-background);--vui-slider-progress-background:var(--global-disabled-foreground);--vui-slider-thumb-background:var(--global-disabled-foreground);cursor:not-allowed}}.viraui__slider-module__SliderRoot_4JScw{inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0}.viraui__slider-module__SliderHeader_gOy9k{inline-size:100%;min-inline-size:0}.viraui__slider-module__Value_FaY9i{flex-shrink:0}.viraui__slider-module__SliderControl_FQd5-{position:relative;flex:1 1 auto;-webkit-user-select:none;user-select:none;touch-action:none;inline-size:100%;block-size:var(--vui-slider-track-size);min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{inline-size:var(--vui-slider-track-size);block-size:100%;>.viraui__slider-module__Track_wvLEH{inline-size:var(--vui-slider-track-size);block-size:100%}}}.viraui__slider-module__Track_wvLEH{position:relative;overflow:visible;inline-size:100%;block-size:var(--vui-slider-track-size);background:var(--vui-slider-track-background);border-radius:var(--radius-infinite)}.viraui__slider-module__Indicator_y3JyJ{background:var(--vui-slider-progress-background);border-radius:inherit}.viraui__slider-module__Thumb_S-uLF{box-sizing:border-box;inline-size:var(--vui-slider-thumb-size);block-size:calc(var(--vui-slider-thumb-size) - 2px);background:var(--vui-slider-thumb-background);border:2px solid var(--vui-slider-progress-background);border-radius:var(--radius-x-small);appearance:none;transition:scale var(--duration-instant) var(--easing-standard);&:not(:disabled,[data-disabled]){cursor:grab}&:not(:disabled,[data-disabled]):active,&:not(:disabled,[data-disabled]):has(>input:active),&:not(:disabled,[data-disabled])[data-dragging]:has(>input:focus){cursor:grabbing;scale:1.2}&:has(>input:focus-visible){outline:var(--outline);outline-offset:var(--outline-offset)}>input:focus-visible{outline:none}}}

package/dist/components/switch/switch.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-switch-track-block-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-switch-track-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-switch-track-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-switch-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-switch-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-switch-thumb-inset{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-track-block-size{syntax:"<length>";inherits:false;initial-value:0}@property --__switch-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-thumb-inset{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-thumb-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__switch-module__Switch_L86y7{&:has([required]) .viraui__switch-module__Label_9R-rv:after{content:" ＊";color:var(--highlight-red)}}.viraui__switch-module__SwitchRoot_Zv9An{--vui-switch-track-block-size:var(--space-large);--vui-switch-track-radius:var(--radius-small);--vui-switch-track-background:var(--global-contrast);--vui-switch-thumb-background:var(--base-1);--vui-switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--vui-switch-thumb-inset:var(--space-2x-small);--__switch-thumb-inset:round(nearest,var(--vui-switch-thumb-inset),1px);--__switch-thumb-size:round(nearest,var(--vui-switch-thumb-size),2px);--__switch-track-block-size:calc(var(--__switch-thumb-size) + 2 * var(--__switch-thumb-inset));position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--__switch-thumb-size) * 2) + var(--__switch-thumb-inset) * 2);block-size:var(--__switch-track-block-size);background:var(--vui-switch-track-background);border-radius:var(--vui-switch-track-radius);&[data-size=small]{--vui-switch-track-radius:var(--radius-x-small);--vui-switch-track-block-size:var(--space-medium);--vui-switch-thumb-size:calc(var(--space-medium) - var(--space-x-small))}&[data-checked]:not([data-disabled]){--vui-switch-track-background:var(--global-primary);--vui-switch-thumb-background:contrast-color(var(--global-primary))}&[data-invalid]:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled]{--vui-switch-track-background:var(--global-disabled-background);--vui-switch-thumb-background:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__switch-module__Thumb_ldwJw{--__switch-thumb-radius:calc(var(--vui-switch-track-radius) - var(--__switch-thumb-inset));position:absolute;inset-block:var(--__switch-thumb-inset);inset-inline-start:var(--__switch-thumb-inset);background:var(--vui-switch-thumb-background);inline-size:var(--__switch-thumb-size);block-size:var(--__switch-thumb-size);border-radius:var(--__switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);box-shadow:0 0 1px 1px var(--global-contrast);.viraui__switch-module__SwitchRoot_Zv9An[data-checked]>&{translate:100% 0;box-shadow:none}.viraui__switch-module__SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-switch-track-block-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-switch-track-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-switch-track-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-switch-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-switch-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-switch-thumb-inset{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-track-block-size{syntax:"<length>";inherits:false;initial-value:0}@property --__switch-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-thumb-inset{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-thumb-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__switch-module__Switch_L86y7{max-block-size:min-content;&:has([required]) .viraui__switch-module__Label_9R-rv:after{content:" ＊";color:var(--highlight-red)}}.viraui__switch-module__SwitchRoot_Zv9An{--vui-switch-track-block-size:var(--space-large);--vui-switch-track-radius:var(--radius-small);--vui-switch-track-background:var(--global-contrast);--vui-switch-thumb-background:var(--base-1);--vui-switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--vui-switch-thumb-inset:var(--space-2x-small);--__switch-thumb-inset:round(nearest,var(--vui-switch-thumb-inset),1px);--__switch-thumb-size:round(nearest,var(--vui-switch-thumb-size),2px);--__switch-track-block-size:calc(var(--__switch-thumb-size) + 2 * var(--__switch-thumb-inset));position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--__switch-thumb-size) * 2) + var(--__switch-thumb-inset) * 2);block-size:var(--__switch-track-block-size);background:var(--vui-switch-track-background);border-radius:var(--vui-switch-track-radius);&[data-size=small]{--vui-switch-track-radius:var(--radius-x-small);--vui-switch-track-block-size:var(--space-medium);--vui-switch-thumb-size:calc(var(--space-medium) - var(--space-x-small))}&[data-checked]:not([data-disabled]){--vui-switch-track-background:var(--global-primary);--vui-switch-thumb-background:contrast-color(var(--global-primary))}&[data-invalid]:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled]{--vui-switch-track-background:var(--global-disabled-background);--vui-switch-thumb-background:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__switch-module__Thumb_ldwJw{--__switch-thumb-radius:calc(var(--vui-switch-track-radius) - var(--__switch-thumb-inset));position:absolute;inset-block:var(--__switch-thumb-inset);inset-inline-start:var(--__switch-thumb-inset);background:var(--vui-switch-thumb-background);inline-size:var(--__switch-thumb-size);block-size:var(--__switch-thumb-size);border-radius:var(--__switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);box-shadow:0 0 1px 1px var(--global-contrast);.viraui__switch-module__SwitchRoot_Zv9An[data-checked]>&{translate:100% 0;box-shadow:none}.viraui__switch-module__SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}}

package/dist/components/textarea/textarea.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textarea-min-block-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textarea-padding-block{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textarea-input-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textarea-module__Textarea_mtOUG{--vui-textarea-min-block-size:calc(var(--space-x-large) * 2);--vui-textarea-padding-block:var(--space-small);--vui-textarea-input-border-radius:var(--radius-small);--vui-field-label-padding-inline:calc(var(--vui-textarea-input-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textarea-module__Label_5dOso:after{content:" ＊";color:var(--highlight-red)}}.viraui__textarea-module__Description_er3zI{padding-inline:var(--vui-field-label-padding-inline)}}@layer viraui.overrides{.viraui__textarea-module__CustomBasicInput_Ce7yA{--vui-basic-input-border-radius:var(--vui-textarea-input-border-radius);border:1px solid var(--global-contrast);min-block-size:var(--vui-textarea-min-block-size);padding-block:var(--vui-textarea-padding-block);line-height:1.4;resize:none;&[data-resize=vertical]{resize:vertical}&[data-resize=horizontal]{resize:horizontal}&[data-resize=both]{resize:both}&[data-resize=block]{resize:block}&[data-resize=inline]{resize:inline}&[data-invalid]{border-color:var(--highlight-red)}&:disabled,&[data-disabled]{border-color:#0000}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textarea-min-block-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textarea-padding-block{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textarea-input-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textarea-module__Textarea_mtOUG{--vui-textarea-min-block-size:calc(var(--space-x-large) * 2);--vui-textarea-padding-block:var(--space-small);--vui-textarea-input-border-radius:var(--radius-small);--vui-field-label-padding-inline:calc(var(--vui-textarea-input-border-radius) / 2);inline-size:100%;&:not(:has([data-sizing=content])){max-block-size:min-content}&:has([required]) .viraui__textarea-module__Label_5dOso:after{content:" ＊";color:var(--highlight-red)}}.viraui__textarea-module__Description_er3zI{padding-inline:var(--vui-field-label-padding-inline)}}@layer viraui.overrides{.viraui__textarea-module__CustomBasicInput_Ce7yA{--vui-basic-input-border-radius:var(--vui-textarea-input-border-radius);border:1px solid var(--global-contrast);min-block-size:var(--vui-textarea-min-block-size);padding-block:var(--vui-textarea-padding-block);line-height:1.4;resize:none;&[data-resize=vertical]{resize:vertical}&[data-resize=horizontal]{resize:horizontal}&[data-resize=both]{resize:both}&[data-resize=block]{resize:block}&[data-resize=inline]{resize:inline}&[data-invalid]{border-color:var(--highlight-red)}&:disabled,&[data-disabled]{border-color:#0000}}}

package/dist/components/textfield/textfield.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textfield-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textfield-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textfield-module__Textfield_o-70A{--vui-textfield-input-height:var(--space-2x-large);--vui-textfield-control-group-background:var(--base-1);--vui-textfield-control-group-color:var(--global-foreground);--vui-textfield-control-group-border-color:var(--global-contrast);--vui-textfield-control-group-border-radius:var(--radius-medium);--vui-field-label-padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textfield-module__Label_5rjr0:after{content:" ＊";color:var(--highlight-red)}}.viraui__textfield-module__ControlGroup_2W-OC{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-textfield-input-height);background:var(--vui-textfield-control-group-background);color:var(--vui-textfield-control-group-color);border:1px solid var(--vui-textfield-control-group-border-color);border-radius:var(--vui-textfield-control-group-border-radius);&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:focus-visible),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-invalid]){--vui-textfield-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:disabled),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-disabled]){--vui-textfield-control-group-background:var(--global-disabled-background);--vui-textfield-control-group-border-color:#0000;--vui-textfield-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=start])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-start:var(--space-x-small)}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=end])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-end:var(--space-x-small)}}.viraui__textfield-module__Addon_kK1ef{min-inline-size:var(--space-x-large)}.viraui__textfield-module__Description_8Qxot{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}}@layer viraui.overrides{.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;block-size:100%;line-height:1.2;background:#0000;box-shadow:none;border-radius:inherit;&:focus-visible{outline:none}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textfield-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textfield-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textfield-module__Textfield_o-70A{--vui-textfield-input-height:var(--space-2x-large);--vui-textfield-control-group-background:var(--base-1);--vui-textfield-control-group-color:var(--global-foreground);--vui-textfield-control-group-border-color:var(--global-contrast);--vui-textfield-control-group-border-radius:var(--radius-medium);--vui-field-label-padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2);inline-size:100%;max-block-size:min-content;&:has([required]) .viraui__textfield-module__Label_5rjr0:after{content:" ＊";color:var(--highlight-red)}}.viraui__textfield-module__ControlGroup_2W-OC{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-textfield-input-height);background:var(--vui-textfield-control-group-background);color:var(--vui-textfield-control-group-color);border:1px solid var(--vui-textfield-control-group-border-color);border-radius:var(--vui-textfield-control-group-border-radius);&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:focus-visible),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-invalid]){--vui-textfield-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:disabled),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-disabled]){--vui-textfield-control-group-background:var(--global-disabled-background);--vui-textfield-control-group-border-color:#0000;--vui-textfield-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=start])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-start:var(--space-x-small)}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=end])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-end:var(--space-x-small)}}.viraui__textfield-module__Addon_kK1ef{min-inline-size:var(--space-x-large)}.viraui__textfield-module__Description_8Qxot{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}}@layer viraui.overrides{.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;block-size:100%;line-height:1.2;background:#0000;box-shadow:none;border-radius:inherit;&:focus-visible{outline:none}}}

package/dist/components/title/title.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --__title-medium{syntax:"*";inherits:false;initial-value:0}.viraui__title-module__Title_CXMUX{--__title-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--vui-title-font-size:clamp(var(--font-scale-h2),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1));--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-standard);--vui-title-letter-spacing:-0.03em;margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--vui-title-letter-spacing);text-align:var(--vui-title-align);white-space:var(--vui-title-white-space);word-break:break-word;font-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-title-font-weight),"wdth" var(--vui-title-font-width),"opsz" var(--vui-title-font-opsz);text-box:var(--vui-title-trim) var(--vui-title-trim-type);display:inline-flex;&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--vui-title-padding-block-start) var(--vui-title-padding-inline-end) var(--vui-title-padding-block-end) var(--vui-title-padding-inline-start)}&[data-title-size=display]{--vui-title-font-size:clamp(var(--font-scale-h1),calc(var(--font-scale-h1) + 4.643cqi - 0.9286rem),var(--font-scale-display))}&[data-title-size="2"]{--vui-title-font-size:clamp(var(--font-scale-h3),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 4)),var(--font-scale-h2))}&[data-title-size="3"]{--vui-title-font-size:clamp(var(--font-scale-h4),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 3)),var(--font-scale-h3))}&[data-title-size="4"]{--vui-title-font-size:clamp(var(--font-scale-h5),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-h4))}&[data-title-size="5"]{--vui-title-font-size:clamp(var(--font-scale-h6),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-h5));--vui-title-letter-spacing:-0.02em}&[data-title-size="6"]{--vui-title-font-size:clamp(var(--font-scale-body-medium),var(--__title-medium),var(--font-scale-h6));--vui-title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--vui-title-literal-color)}&[data-title-line-height=none]{--vui-title-line-height:0}&[data-title-line-height=x-small]{--vui-title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--vui-title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--vui-title-line-height:var(--font-leading-large)}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --__title-medium{syntax:"*";inherits:false;initial-value:0}.viraui__title-module__Title_CXMUX{--__title-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--vui-title-font-size:clamp(calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 5)),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 5)),calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6)));--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-standard);--vui-title-letter-spacing:-0.03em;margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--vui-title-letter-spacing);text-align:var(--vui-title-align);white-space:var(--vui-title-white-space);word-break:break-word;font-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-title-font-weight),"wdth" var(--vui-title-font-width),"opsz" var(--vui-title-font-opsz);text-box:var(--vui-title-trim) var(--vui-title-trim-type);display:inline-flex;&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--vui-title-padding-block-start) var(--vui-title-padding-inline-end) var(--vui-title-padding-block-end) var(--vui-title-padding-inline-start)}&[data-title-size=display]{--vui-title-font-size:clamp(calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6)),calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6) + 4.643cqi - 0.9286rem),var(--font-scale-display))}&[data-title-size="2"]{--vui-title-font-size:clamp(calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 4)),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 4)),calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 5)))}&[data-title-size="3"]{--vui-title-font-size:clamp(calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 3)),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 3)),calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 4)))}&[data-title-size="4"]{--vui-title-font-size:clamp(calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 2)),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 2)),calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 3)))}&[data-title-size="5"]{--vui-title-font-size:clamp(calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 1)),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 1)),calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 2)));--vui-title-letter-spacing:-0.02em}&[data-title-size="6"]{--vui-title-font-size:clamp(var(--font-scale-body-medium),var(--__title-medium),calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 1)));--vui-title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--vui-title-literal-color)}&[data-title-line-height=none]{--vui-title-line-height:0}&[data-title-line-height=x-small]{--vui-title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--vui-title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--vui-title-line-height:var(--font-leading-large)}}}

package/dist/components/toast/toast.guide.json

@@ -6,7 +6,8 @@
   "whenToUse": [
     "Confirming a completed action such as save or delete",
     "Offering a short undo window after a reversible change",
-    "Showing contextual feedback anchored to the control that triggered it"
+    "Showing contextual feedback anchored to the control that triggered it",
+    "Custom portal host (iframe preview, shadow root, or app overlay root) via `container` on the portal-owning public part"
   ],
   "whenNotToUse": [
     "Blocking errors that need immediate correction — use inline field errors or a dialog",
@@ -51,6 +52,9 @@
       "Banner.toast": {
         "description": "Toast instance from `useToastManager().toasts` or `createToastManager()`."
       },
+      "Portal.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)."
+      },
       "Viewport.position": {
         "description": "Controls viewport placement and stacking layout hooks."
       }

package/dist/components/tooltip/tooltip-content.d.ts

@@ -1,4 +1,4 @@
-import { TooltipPositioner } from '@base-ui/react/tooltip';
+import { Tooltip as PrimitiveTooltip, TooltipPositioner } from '@base-ui/react/tooltip';
 import type * as React from 'react';
 type TooltipContentPositionerProps = Omit<TooltipPositioner.Props, 'className' | 'style' | 'render'>;
 /**
@@ -10,6 +10,15 @@ type TooltipContentPositionerProps = Omit<TooltipPositioner.Props, 'className' |
  *
  * @default `sideOffset` is `8`.
  */
-export type TooltipContentProps = TooltipContentPositionerProps;
+export type TooltipContentProps = TooltipContentPositionerProps & {
+    /**
+     * 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 PrimitiveTooltip.Portal>['container'];
+};
 export declare const TooltipContent: React.FC<TooltipContentProps>;
 export {};

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

@@ -4,29 +4,32 @@ import tooltip_module_default from "./tooltip.module.js";
 import { jsx } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react/tooltip";
 //#region src/components/tooltip/tooltip-content.tsx
-var TooltipContent = ({ children, sideOffset = 8, ...positionerProps }) => /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
-	className: tooltip_module_default.Positioner,
-	sideOffset,
-	...positionerProps,
-	children: /* @__PURE__ */ jsx(Tooltip.Popup, {
-		className: tooltip_module_default.Popup,
-		role: "tooltip",
-		render: /* @__PURE__ */ jsx(Surface, {
-			color: 1,
-			border: "all",
-			radius: "medium",
-			"data-vibrant": ""
-		}),
-		children: /* @__PURE__ */ jsx(Tooltip.Viewport, {
-			className: tooltip_module_default.Viewport,
-			render: /* @__PURE__ */ jsx(Stack, {
-				vPadding: "small",
-				hPadding: "small",
-				fillChildren: false
+var TooltipContent = ({ children, sideOffset = 8, container, ...positionerProps }) => /* @__PURE__ */ jsx(Tooltip.Portal, {
+	container,
+	children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		className: tooltip_module_default.Positioner,
+		sideOffset,
+		...positionerProps,
+		children: /* @__PURE__ */ jsx(Tooltip.Popup, {
+			className: tooltip_module_default.Popup,
+			role: "tooltip",
+			render: /* @__PURE__ */ jsx(Surface, {
+				color: 1,
+				border: "all",
+				radius: "medium",
+				"data-vibrant": ""
 			}),
-			children
+			children: /* @__PURE__ */ jsx(Tooltip.Viewport, {
+				className: tooltip_module_default.Viewport,
+				render: /* @__PURE__ */ jsx(Stack, {
+					vPadding: "small",
+					hPadding: "small",
+					fillChildren: false
+				}),
+				children
+			})
 		})
 	})
-}) });
+});
 //#endregion
 export { TooltipContent };

package/dist/components/tooltip/tooltip.guide.json

@@ -6,7 +6,8 @@
   "whenToUse": [
     "Short hints on hover or focus for toolbar controls and icon buttons",
     "Per-trigger labels on shared tooltip roots using `payload` and Root render-function children",
-    "Adjacent controls that benefit from shared open/close delay via `Tooltip.Provider`"
+    "Adjacent controls that benefit from shared open/close delay via `Tooltip.Provider`",
+    "Custom portal host (iframe preview, shadow root, or app overlay root) via `container` on the portal-owning public part"
   ],
   "whenNotToUse": [
     "Rich interactive panels or forms (use Popover or Dialog)",
@@ -29,6 +30,11 @@
       "content-fade-duration": {
         "description": "content fade duration custom property on the component root."
       }
+    },
+    "react": {
+      "Content.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)."
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.0.12",
+  "version": "2026.0.14",
   "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.12",
+    "@viraui/foundation": "2026.0.14",
     "@viraui/icons": "2026.0.0",
     "@viraui/postcss-config": "2026.0.0",
     "@viraui/tsconfig": "2026.0.0"