@viraui/react 2026.0.8 → 2026.0.10

package/dist/catalog.json

@@ -185,7 +185,7 @@
     {
       "id": "stack",
       "name": "Stack",
-      "summary": "Flex layout primitive for arranging children with token spacing, alignment, and padding; root is a named CSS container query context (`stack`).",
+      "summary": "Flex layout primitive for arranging children with token spacing, alignment, and padding; optionally enables a named CSS container query context (`stack`) via `enableContainer`.",
       "guidePath": "./components/stack/stack.guide.json"
     },
     {
@@ -197,7 +197,7 @@
     {
       "id": "surface",
       "name": "Surface",
-      "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners; root is a named CSS container query context (`surface`).",
+      "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners; optionally enables a named CSS container query context (`surface`) via `enableContainer`.",
       "guidePath": "./components/surface/surface.guide.json"
     },
     {

package/dist/components/accordion/accordion-item.d.ts

@@ -1,5 +1,6 @@
 import { AccordionItem } from '@base-ui/react/accordion';
 import { SurfaceProps } from '../surface';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
 import type * as React from 'react';
 /**
  * Public Accordion.Item props.
@@ -54,5 +55,11 @@ export type AccordionItemProps = AccordionItem.Props & {
      * @default 1
      */
     color?: SurfaceProps['color'];
+    /**
+     * Corner radius token for the wrapping `Surface` island edges when `useSurface` is `true`.
+     *
+     * @default medium
+     */
+    radius?: ThemeTypes['radius'];
 };
 export declare const AccordionItemComponent: React.FC<AccordionItemProps>;

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

@@ -1,4 +1,5 @@
 import { clsx } from "../../core/clsx.js";
+import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
 import { ChromeMinus, ChromePlus } from "../../internal/chrome-icons/chrome-icons.js";
 import accordion_module_default from "./accordion.module.js";
 import { Text } from "../text/text.js";
@@ -7,8 +8,12 @@ import { Surface } from "../surface/surface.js";
 import { Accordion } from "@base-ui/react/accordion";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/accordion/accordion-item.tsx
-var AccordionItemComponent = ({ children, className, color = 1, iconClosed = /* @__PURE__ */ jsx(ChromePlus, { size: 16 }), iconOpen = /* @__PURE__ */ jsx(ChromeMinus, { size: 16 }), iconPosition = "end", trigger, useSurface = true, ...otherProps }) => {
+var AccordionItemComponent = ({ children, className, color = 1, iconClosed = /* @__PURE__ */ jsx(ChromePlus, { size: 16 }), iconOpen = /* @__PURE__ */ jsx(ChromeMinus, { size: 16 }), iconPosition = "end", radius, style, trigger, useSurface = true, ...otherProps }) => {
 	const iconAtStart = iconPosition === "start";
+	const dynamicStyle = {
+		...radius != null && { "--vui-accordion-radius": resolveThemeValue(radius, "radius", "var(--radius-medium)") },
+		...style
+	};
 	const triggerIcon = /* @__PURE__ */ jsxs("span", {
 		"aria-hidden": true,
 		className: accordion_module_default.IconSlot,
@@ -23,6 +28,7 @@ var AccordionItemComponent = ({ children, className, color = 1, iconClosed = /*
 	return /* @__PURE__ */ jsxs(Accordion.Item, {
 		className: clsx(accordion_module_default.Item, className),
 		"data-use-surface": useSurface ? "true" : "false",
+		style: dynamicStyle,
 		...useSurface && { render: /* @__PURE__ */ jsx(Surface, {
 			border: "all",
 			color

package/dist/components/accordion/accordion.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-accordion-island-gap{syntax:"<length>";inherits:true;initial-value:0}@property --__accordion-trigger-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__accordion-module__Accordion_wFOlN{--vui-accordion-island-gap:var(--space-medium);--__accordion-trigger-radius:var(--radius-large);inline-size:100%;&:dir(rtl) .viraui__accordion-module__Trigger_4HzIb[data-stack-direction=row-reverse]{direction:ltr;flex-direction:row}}.viraui__accordion-module__Trigger_4HzIb{inline-size:100%;border:0;background:#0000;cursor:pointer;text-align:start;color:inherit;&:focus-visible{outline-offset:-4px}&[data-disabled]{cursor:not-allowed;opacity:.5}.viraui__accordion-module__Item_66o2x[data-use-surface=true] &{&:focus-visible{border-radius:var(--radius-large);outline-offset:-4px}}}.viraui__accordion-module__IconSlot_AVQq3{position:relative;flex-shrink:0;inline-size:1rem;block-size:1rem}.viraui__accordion-module__Icon_qdu2v{position:absolute;inset:0;display:grid;place-items:center;transition:opacity var(--duration-fast) var(--easing-standard),rotate var(--duration-fast) var(--easing-standard);&:first-of-type{opacity:1;rotate:0deg}&:last-of-type{opacity:0;rotate:-90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:first-of-type{opacity:0;rotate:90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:last-of-type{opacity:1;rotate:0deg}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__accordion-module__Panel_U1Ofk{block-size:var(--accordion-panel-height);overflow:hidden;transition:block-size var(--duration-fast) var(--easing-standard);&[data-ending-style],&[data-starting-style]{block-size:0}@media (prefers-reduced-motion:reduce){transition:none}}}@layer viraui.overrides{.viraui__accordion-module__Item_66o2x{inline-size:100%;transition:margin var(--duration-fast) var(--easing-standard),background var(--duration-fast) var(--easing-standard),border-radius var(--duration-fast) var(--easing-standard);&[data-use-surface=true]{--vui-surface-border-radius-top-left:0;--vui-surface-border-radius-top-right:0;--vui-surface-border-radius-bottom-right:0;--vui-surface-border-radius-bottom-left:0;&:not([data-open]){--vui-surface-background:#0000}&:not([data-open])+&:not([data-open]),&[data-open]+&[data-open]{border-top-width:0}&:first-child,&:not([data-open])+&[data-open],&[data-open]+&:not([data-open]){--vui-surface-border-radius-top-left:var(--__accordion-trigger-radius);--vui-surface-border-radius-top-right:var(--__accordion-trigger-radius)}&:last-child,&:not([data-open]):has(+&[data-open]),&[data-open]:has(+&:not([data-open])){--vui-surface-border-radius-bottom-left:var(--__accordion-trigger-radius);--vui-surface-border-radius-bottom-right:var(--__accordion-trigger-radius)}&:not(:last-child):not([data-open]):has(+&[data-open]),&:not(:last-child)[data-open]:has(+&:not([data-open])){margin-block-end:var(--vui-accordion-island-gap)}}.viraui__accordion-module__Accordion_wFOlN[data-islands=false] &[data-use-surface=true]{&:not(:first-child){border-top-width:0}&:not([data-open])+&[data-open],&[data-open]+&:not([data-open]){--vui-surface-border-radius-top-left:0;--vui-surface-border-radius-top-right:0}&:not([data-open]):has(+&[data-open]),&[data-open]:has(+&:not([data-open])){--vui-surface-border-radius-bottom-left:0;--vui-surface-border-radius-bottom-right:0}&:not(:last-child):not([data-open]):has(+&[data-open]),&:not(:last-child)[data-open]:has(+&:not([data-open])){margin-block-end:0}}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-accordion-island-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-accordion-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__accordion-module__Accordion_wFOlN{--vui-accordion-island-gap:var(--space-medium);--vui-accordion-radius:var(--radius-medium);inline-size:100%;&:dir(rtl) .viraui__accordion-module__Trigger_4HzIb[data-stack-direction=row-reverse]{direction:ltr;flex-direction:row}}.viraui__accordion-module__Trigger_4HzIb{inline-size:100%;border:0;background:#0000;cursor:pointer;text-align:start;color:inherit;&:focus-visible{outline-offset:-4px}&[data-disabled]{cursor:not-allowed;opacity:.5}.viraui__accordion-module__Item_66o2x[data-use-surface=true] &{&:focus-visible{border-radius:var(--radius-large);outline-offset:-4px}}}.viraui__accordion-module__IconSlot_AVQq3{position:relative;flex-shrink:0;inline-size:1rem;block-size:1rem}.viraui__accordion-module__Icon_qdu2v{position:absolute;inset:0;display:grid;place-items:center;transition:opacity var(--duration-fast) var(--easing-standard),rotate var(--duration-fast) var(--easing-standard);&:first-of-type{opacity:1;rotate:0deg}&:last-of-type{opacity:0;rotate:-90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:first-of-type{opacity:0;rotate:90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:last-of-type{opacity:1;rotate:0deg}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__accordion-module__Panel_U1Ofk{block-size:var(--accordion-panel-height);overflow:hidden;transition:block-size var(--duration-fast) var(--easing-standard);&[data-ending-style],&[data-starting-style]{block-size:0}@media (prefers-reduced-motion:reduce){transition:none}}}@layer viraui.overrides{.viraui__accordion-module__Item_66o2x{inline-size:100%;transition:margin var(--duration-fast) var(--easing-standard),background var(--duration-fast) var(--easing-standard),border-radius var(--duration-fast) var(--easing-standard);&[data-use-surface=true]{--vui-surface-border-radius-top-left:0;--vui-surface-border-radius-top-right:0;--vui-surface-border-radius-bottom-right:0;--vui-surface-border-radius-bottom-left:0;&:not([data-open]){--vui-surface-background:#0000}&:not([data-open])+&:not([data-open]),&[data-open]+&[data-open]{border-top-width:0}&:first-child,&:not([data-open])+&[data-open],&[data-open]+&:not([data-open]){--vui-surface-border-radius-top-left:var(--vui-accordion-radius);--vui-surface-border-radius-top-right:var(--vui-accordion-radius)}&:last-child,&:not([data-open]):has(+&[data-open]),&[data-open]:has(+&:not([data-open])){--vui-surface-border-radius-bottom-left:var(--vui-accordion-radius);--vui-surface-border-radius-bottom-right:var(--vui-accordion-radius)}&:not(:last-child):not([data-open]):has(+&[data-open]),&:not(:last-child)[data-open]:has(+&:not([data-open])){margin-block-end:var(--vui-accordion-island-gap)}}.viraui__accordion-module__Accordion_wFOlN[data-islands=false] &[data-use-surface=true]{&:not(:first-child){border-top-width:0}&:not([data-open])+&[data-open],&[data-open]+&:not([data-open]){--vui-surface-border-radius-top-left:0;--vui-surface-border-radius-top-right:0}&:not([data-open]):has(+&[data-open]),&[data-open]:has(+&:not([data-open])){--vui-surface-border-radius-bottom-left:0;--vui-surface-border-radius-bottom-right:0}&:not(:last-child):not([data-open]):has(+&[data-open]),&:not(:last-child)[data-open]:has(+&:not([data-open])){margin-block-end:0}}}}

package/dist/components/accordion/accordion.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Accordion",
+  "baseUIApi": "https://base-ui.com/react/components/accordion#api-reference",
   "structure": "<Accordion>\n  <Accordion.Item trigger=\"…\">…</Accordion.Item>\n</Accordion>",
   "summary": "Collapsible sections grouped into open/closed blocks with optional Surface wrapping, shared corner radius, and background on open items.",
   "whenToUse": [
@@ -41,6 +42,10 @@
       "Item.iconPosition": {
         "description": "Side of the trigger label where the expand/collapse icon is rendered."
       },
+      "Item.radius": {
+        "description": "Corner radius token for the wrapping Surface island edges when useSurface is true.",
+        "refCss": "radius"
+      },
       "Item.trigger": {
         "description": "Visible trigger label rendered inside the accordion header button."
       },
@@ -51,6 +56,10 @@
     "css": {
       "island-gap": {
         "description": "Gap between separated Surface islands when islands={true}."
+      },
+      "radius": {
+        "description": "Corner radius for Surface island block edges when useSurface is true.",
+        "refReact": "Item.radius"
       }
     }
   }

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

@@ -1,5 +1,6 @@
 {
   "name": "Autocomplete",
+  "baseUIApi": "https://base-ui.com/react/components/autocomplete#api-reference",
   "structure": "<Autocomplete>\n  <Autocomplete.Item value=\"…\">…</Autocomplete.Item>\n  <Autocomplete.Group label=\"…\" items={[…]}>\n    <Autocomplete.Collection>\n      {(item) => <Autocomplete.Item value={item}>…</Autocomplete.Item>}\n    </Autocomplete.Collection>\n  </Autocomplete.Group>\n</Autocomplete>",
   "summary": "Field-wrapped free-form suggest input with Textfield chrome and Select-like popup list.",
   "whenToUse": [

package/dist/components/avatar/avatar.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Avatar",
+  "baseUIApi": "https://base-ui.com/react/components/avatar#api-reference",
   "structure": "<Avatar fallback=\"AB\" />",
   "summary": "Circular identity image or fallback for users, entities, or profile chips.",
   "whenToUse": [

package/dist/components/button/button.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Button",
+  "baseUIApi": "https://base-ui.com/react/components/button#api-reference",
   "structure": "<Button>Save</Button>",
   "summary": "Primary action control with size, variant, optional addon, optional pill shape, and loading state.",
   "whenToUse": [

package/dist/components/checkbox/checkbox.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Checkbox",
+  "baseUIApi": "https://base-ui.com/react/components/checkbox#api-reference",
   "structure": "<Checkbox label=\"…\" />",
   "summary": "Field.Item checkbox option for standalone fields or CheckboxGroup children.",
   "whenToUse": [

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

@@ -1,5 +1,6 @@
 {
   "name": "Dialog",
+  "baseUIApi": "https://base-ui.com/react/components/drawer#api-reference",
   "structure": "<Dialog>\n  <Dialog.Trigger />\n  <Dialog.Sheet title=\"…\">…</Dialog.Sheet>\n</Dialog>",
   "summary": "Compound drawer sheet with `Dialog.Trigger`, `Dialog.Sheet`, `Dialog.Close`, and Base UI pass-through `Dialog.Provider`, `Dialog.Indent`, and `Dialog.IndentBackground` for app-shell indent effects.",
   "whenToUse": [

package/dist/components/fieldset/fieldset.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Fieldset",
+  "baseUIApi": "https://base-ui.com/react/components/fieldset#api-reference",
   "structure": "<Fieldset label=\"…\">…</Fieldset>",
   "summary": "Semantic field grouping with shared legend and optional group helper copy.",
   "whenToUse": [

package/dist/components/linear-progress/linear-progress.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "LinearProgress",
+  "baseUIApi": "https://base-ui.com/react/components/progress#api-reference",
   "structure": "<LinearProgress value={40} />",
   "summary": "Shows determinate or indeterminate progress for a task in a compact horizontal track.",
   "whenToUse": [

package/dist/components/menu/menu.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Menu",
+  "baseUIApi": "https://base-ui.com/react/components/menu#api-reference",
   "structure": "<Menu>\n  <Menu.Trigger />\n  <Menu.Popup>\n    <Menu.Item />\n    <Menu.LinkItem />\n    <Menu.CheckboxItem />\n    <Menu.Group label=\"…\">\n      <Menu.Item />\n    </Menu.Group>\n    <Menu.RadioGroup>\n      <Menu.RadioItem value=\"…\" />\n    </Menu.RadioGroup>\n    <Menu.Separator />\n    <Menu.Submenu>\n      <Menu.SubmenuTrigger />\n      <Menu.Popup>…</Menu.Popup>\n    </Menu.Submenu>\n  </Menu.Popup>\n</Menu>",
   "summary": "Compound menu built on Base UI Menu with `Menu.Trigger`, `Menu.Popup`, unified item rows, groups, checkbox/radio items, nested submenus, destructive sentiment, and `Menu.createHandle` for detached triggers; `Popup` owns Portal + Positioner + Elevator/Surface Select-like list chrome.",
   "whenToUse": [

package/dist/components/meter/meter.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Meter",
+  "baseUIApi": "https://base-ui.com/react/components/meter#api-reference",
   "structure": "<Meter value={40} />",
   "summary": "Shows a determinate metric in a compact horizontal track for static capacity, level, or score values.",
   "whenToUse": [

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

@@ -1,5 +1,6 @@
 {
   "name": "Popover",
+  "baseUIApi": "https://base-ui.com/react/components/popover#api-reference",
   "structure": "<Popover>\n  <Popover.Trigger />\n  <Popover.Sheet title=\"…\">…</Popover.Sheet>\n</Popover>",
   "summary": "Compound popover built on Base UI Popover with `Popover.Trigger`, `Popover.Sheet`, `Popover.Close`, `Popover.Title`, `Popover.Description`, and `Popover.createHandle` for detached and multiple triggers; `Sheet` encapsulates Portal + Positioner + Popup + Viewport + Title + Description and animates position, size, and content between triggers; `Sheet` with `unstyled` skips the built-in Surface and header so the consumer composes the popup chrome, including `Popover.Title` and `Popover.Description`.",
   "whenToUse": [

package/dist/components/radio/radio.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Radio",
+  "baseUIApi": "https://base-ui.com/react/components/radio#api-reference",
   "structure": "<RadioGroup>\n  <Radio value=\"…\" label=\"…\" />\n</RadioGroup>",
   "summary": "Mutually exclusive choice within a RadioGroup, with optional per-option label and helper text.",
   "whenToUse": [

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

@@ -1,5 +1,6 @@
 {
   "name": "Select",
+  "baseUIApi": "https://base-ui.com/react/components/select#api-reference",
   "structure": "<Select>\n  <Select.Option value=\"…\">…</Select.Option>\n  <Select.Group label=\"…\">\n    <Select.Option value=\"…\">…</Select.Option>\n  </Select.Group>\n  <Select.Separator />\n</Select>",
   "summary": "Field-wrapped single-select dropdown with grouped options and field copy.",
   "whenToUse": [
@@ -23,7 +24,9 @@
   "antiPatterns": [
     "Expecting multi-select or combobox behavior",
     "Leaving the trigger without label or aria-label",
-    "Never set the size prop (if present) of Buttons, IconButtons or other interactive elements passed as addon other than small"
+    "Never set the size prop (if present) of Buttons, IconButtons or other interactive elements passed as addon other than small",
+    "Using the Select component as a combobox, use Autocomplete instead.",
+    "Set alignItemWithTrigger false when options don't have a leading addon"
   ],
   "related": ["Autocomplete", "Fieldset", "Textfield", "Stack", "Surface", "Icon"],
   "properties": {

package/dist/components/slider/slider.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Slider",
+  "baseUIApi": "https://base-ui.com/react/components/slider#api-reference",
   "structure": "<Slider />",
   "summary": "Field-wrapped range input supporting single-thumb or two-thumb range selection.",
   "whenToUse": [

package/dist/components/stack/stack.css

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

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

@@ -97,6 +97,18 @@ export type StackProps = React.ComponentPropsWithoutRef<'div'> & {
      * @default No min width constraint.
      */
     minWidth?: string;
+    /**
+     * Opt-in named CSS container query context for this Stack.
+     *
+     * Enables `container: stack / size` on the rendered root (via `data-stack-container="true"`),
+     * so descendants can use `@container stack (min-width/min-height: ...)` against this Stack size.
+     *
+     * Warning: container size containment can affect nested layout (e.g. cards inside Masonry).
+     * Use only when you need container queries against this specific Stack.
+     *
+     * @default false
+     */
+    enableContainer?: boolean;
 };
 export declare const Stack: React.FC<StackProps>;
 export {};

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

@@ -1,16 +1,17 @@
 {
   "name": "Stack",
   "structure": "<Stack>…</Stack>",
-  "summary": "Flex layout primitive for arranging children with token spacing, alignment, and padding; root is a named CSS container query context (`stack`).",
+  "summary": "Flex layout primitive for arranging children with token spacing, alignment, and padding; optionally enables a named CSS container query context (`stack`) via `enableContainer`.",
   "whenToUse": [
     "Column or row layouts with token gap and alignment",
     "Composing screens and component internals without custom flex CSS",
     "Custom native root through render while keeping data-stack hooks",
-    "Style descendants with @container stack queries when layout, gap, or typography should respond to the Stack's own inline-size and block-size instead of the viewport"
+    "Style descendants with `@container stack` queries when layout, gap, or typography should respond to the Stack's own inline-size and block-size instead of the viewport (set `enableContainer` on the Stack you're querying)"
   ],
   "whenNotToUse": [
     "Cases where a single component already owns required flex chrome",
-    "Expecting the Stack root itself to grow via fillChildren"
+    "Expecting the Stack root itself to grow via fillChildren",
+    "Using `enableContainer` inside complex masonry-like layouts when you don't need container queries (size containment can change nested layout)"
   ],
   "accessibility": [
     "Stack is presentational — choose render roots that preserve correct semantics (button, list, heading)",
@@ -27,6 +28,9 @@
       "columnGap": {
         "description": "Sets the gap between flex columns using the Vira space token scale."
       },
+      "enableContainer": {
+        "description": "Opt-in named CSS container query context for this Stack (enables `container: stack / size` on the root via `data-stack-container`). Required for `@container stack (min-width/min-height: ...)` rules to react to this Stack size. Warning: container size containment can affect nested layout (e.g. cards inside Masonry). Use only when you need container queries against this specific Stack."
+      },
       "direction": {
         "description": "Renders children across rows or columns using the chosen flex direction."
       },

package/dist/components/stack/stack.js

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

package/dist/components/surface/surface.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-surface-background{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-background-hover{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --vui-surface-overflow{syntax:"<custom-ident>";inherits:false;initial-value:visible}@property --vui-surface-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}.viraui__surface-module__Surface_slEYq{--vui-surface-border-radius-top-left:var(--vui-surface-border-radius);--vui-surface-border-radius-top-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-left:var(--vui-surface-border-radius);--vui-surface-background-hover:var(--vui-surface-background);position:relative;overflow:var(--vui-surface-overflow);box-sizing:border-box;background:var(--vui-surface-background);border-radius:var(--vui-surface-border-radius-top-left) var(--vui-surface-border-radius-top-right) var(--vui-surface-border-radius-bottom-right) var(--vui-surface-border-radius-bottom-left);border:0;&[data-surface-color=primary]{--vui-surface-background:light-dark(oklab(from var(--global-primary) l a b/20%),oklab(from var(--global-primary) l a b/10%))}&[data-surface-hover-color=primary]{--vui-surface-background-hover:light-dark(oklab(from var(--global-primary) l a b/20%),oklab(from var(--global-primary) l a b/10%))}@container root not style(--vibrancy-enable: initial){&[data-vibrant]{background:light-dark(oklab(from var(--vui-surface-background) l a b/60%),oklab(from var(--vui-surface-background) l a b/80%))}}&[data-surface-has-padding=true]{padding:var(--vui-surface-padding-block-start) var(--vui-surface-padding-inline-end) var(--vui-surface-padding-block-end) var(--vui-surface-padding-inline-start)}&[data-surface-border]{border-style:var(--vui-surface-border-style);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--vui-surface-background-hover)}}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-surface-background{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-background-hover{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --vui-surface-overflow{syntax:"<custom-ident>";inherits:false;initial-value:visible}@property --vui-surface-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}.viraui__surface-module__Surface_slEYq{--vui-surface-border-radius-top-left:var(--vui-surface-border-radius);--vui-surface-border-radius-top-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-left:var(--vui-surface-border-radius);--vui-surface-background-hover:var(--vui-surface-background);position:relative;overflow:var(--vui-surface-overflow);box-sizing:border-box;background:var(--vui-surface-background);border-radius:var(--vui-surface-border-radius-top-left) var(--vui-surface-border-radius-top-right) var(--vui-surface-border-radius-bottom-right) var(--vui-surface-border-radius-bottom-left);border:0;&[data-surface-color=primary]{--vui-surface-background:light-dark(oklab(from var(--global-primary) l a b/20%),oklab(from var(--global-primary) l a b/10%))}&[data-surface-hover-color=primary]{--vui-surface-background-hover:light-dark(oklab(from var(--global-primary) l a b/20%),oklab(from var(--global-primary) l a b/10%))}@container root not style(--vibrancy-enable: initial){&[data-vibrant]{background:light-dark(oklab(from var(--vui-surface-background) l a b/60%),oklab(from var(--vui-surface-background) l a b/80%))}}&[data-surface-has-padding=true]{padding:var(--vui-surface-padding-block-start) var(--vui-surface-padding-inline-end) var(--vui-surface-padding-block-end) var(--vui-surface-padding-inline-start)}&[data-surface-border]{border-style:var(--vui-surface-border-style);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--vui-surface-background-hover)}}&[data-surface-container=true]{container:surface/size}}}

package/dist/components/surface/surface.d.ts

@@ -77,6 +77,18 @@ export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>
      * @default visible
      */
     overflow?: React.CSSProperties['overflow'];
+    /**
+     * Opt-in named CSS container query context for this Surface.
+     *
+     * Enables `container: surface / size` on the rendered root (via `data-surface-container="true"`),
+     * so descendants can use `@container surface (min-width/min-height: ...)` against this Surface size.
+     *
+     * Warning: container size containment can affect nested layout (e.g. cards inside Masonry).
+     * Use only when you need container queries against this specific Surface.
+     *
+     * @default false
+     */
+    enableContainer?: boolean;
 };
 export declare const Surface: React.FC<SurfaceProps>;
 export {};

package/dist/components/surface/surface.guide.json

@@ -1,7 +1,7 @@
 {
   "name": "Surface",
   "structure": "<Surface>…</Surface>",
-  "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners; root is a named CSS container query context (`surface`).",
+  "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners; optionally enables a named CSS container query context (`surface`) via `enableContainer`.",
   "whenToUse": [
     "Group content with base-level background and contrast border",
     "Popup or card chrome with optional hover background",
@@ -11,7 +11,7 @@
     "Set radius=\"auto\" on a nested Surface when its parent Surface has a radius so each corner subtracts the nearest ancestor padding and stays concentric",
     "Stack nested auto-radius Surfaces recursively; context still resolves through wrapper layout such as Stack",
     "Set overflow=\"hidden\" (or scroll/auto) when Surface must clip or scroll inner content with radius or padding",
-    "Style descendants with @container surface queries when layout or typography should respond to the Surface's own inline-size and block-size instead of the viewport"
+    "Style descendants with `@container surface` queries when layout or typography should respond to the Surface's own inline-size and block-size instead of the viewport (set `enableContainer` on the Surface you're querying)"
   ],
   "whenNotToUse": [
     "Interactive control semantics without an appropriate render root",
@@ -36,6 +36,9 @@
       "border": {
         "description": "Applies the shared contrast border on the chosen side or axis. Omit for no border."
       },
+      "enableContainer": {
+        "description": "Opt-in named CSS container query context for this Surface (enables `container: surface / size` on the root). Required for `@container surface (min-width/min-height: ...)` rules to react to this Surface size. Warning: container size containment can affect nested layout (e.g. cards inside Masonry). Use only when you need container queries against this specific Surface."
+      },
       "borderStyle": {
         "description": "Sets the CSS border style when `border` is set."
       },

package/dist/components/surface/surface.js

@@ -20,7 +20,7 @@ var surfaceDefaultRadiusProps = {
 	style: void 0,
 	vPadding: void 0
 };
-var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hoverColor, overflow, radius, ref, render, style, vPadding, ...otherProps }) => {
+var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hoverColor, overflow, radius, ref, render, style, vPadding, enableContainer, ...otherProps }) => {
 	const hasPadding = Boolean(hPadding || vPadding);
 	const hasHoverColor = hoverColor !== void 0;
 	const { contextValue, hasAutoRadius, radiusStyle } = useSurfaceRadius({
@@ -50,6 +50,7 @@ var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hove
 			...hasAutoRadius && { "data-surface-radius": "auto" },
 			...isSurfaceColorToken(color) && { "data-surface-color": color },
 			...isSurfaceColorToken(hoverColor) && { "data-surface-hover-color": hoverColor },
+			...enableContainer && { "data-surface-container": "true" },
 			"data-surface-has-hover-color": hasHoverColor ? "true" : "false",
 			"data-surface-has-padding": hasPadding ? "true" : "false",
 			className: clsx(surface_module_default.Surface, className),

package/dist/components/switch/switch.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Switch",
+  "baseUIApi": "https://base-ui.com/react/components/switch#api-reference",
   "structure": "<Switch label=\"…\" />",
   "summary": "Field-wrapped toggle control with regular or small track and optional field copy.",
   "whenToUse": [

package/dist/components/tabs/tabs.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Tabs",
+  "baseUIApi": "https://base-ui.com/react/components/tabs#api-reference",
   "structure": "<Tabs>\n  <Tabs.List>\n    <Tabs.Tab value=\"a\">…</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Viewport>\n    <Tabs.Panel value=\"a\">…</Tabs.Panel>\n  </Tabs.Viewport>\n</Tabs>",
   "summary": "Compound segmented tab control with Surface list chrome, moving indicator, and animated panels.",
   "whenToUse": [

package/dist/components/textarea/textarea.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Textarea",
+  "baseUIApi": "https://base-ui.com/react/components/field#api-reference",
   "structure": "<Textarea />",
   "summary": "Multi-line field control with shared field copy, optional resize, and optional content sizing.",
   "whenToUse": [

package/dist/components/textfield/textfield.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Textfield",
+  "baseUIApi": "https://base-ui.com/react/components/input#api-reference",
   "structure": "<Textfield />",
   "summary": "Single-line field input with control-group chrome and optional addons.",
   "whenToUse": [

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

@@ -1,5 +1,6 @@
 {
   "name": "Toast",
+  "baseUIApi": "https://base-ui.com/react/components/toast#api-reference",
   "structure": "<Toast.Provider>\n  <Toast.Portal>\n    <Toast.Viewport>\n      <Toast.Banner toast={…}>\n        <Toast.Action>…</Toast.Action>\n      </Toast.Banner>\n    </Toast.Viewport>\n  </Toast.Portal>\n</Toast.Provider>",
   "summary": "Transient notification surface with stacked or anchored placement, Banner high-level API, and optional action buttons.",
   "whenToUse": [

package/dist/components/toggle-button/toggle-button.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "ToggleButton",
+  "baseUIApi": "https://base-ui.com/react/components/toggle#api-reference",
   "structure": "<ToggleButton restingIcon={<Plus />} aria-label=\"Pin\" />",
   "summary": "Icon-only two-state toggle that swaps resting and optional pressed icons on Base UI Toggle state; `interpolateIcons` (default false) opt-in crossfade + light rotate between dual icons.",
   "whenToUse": [

package/dist/components/toggle-group/toggle-group.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "ToggleGroup",
+  "baseUIApi": "https://base-ui.com/react/components/toggle-group#api-reference",
   "structure": "<ToggleGroup>\n  <ToggleButton restingIcon={<Plus />} aria-label=\"List\" value=\"list\" />\n</ToggleGroup>",
   "summary": "Toolbar toggle set with shared selection state; Stack direction follows orientation with zero default gap.",
   "whenToUse": [

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

@@ -1,5 +1,6 @@
 {
   "name": "Tooltip",
+  "baseUIApi": "https://base-ui.com/react/components/tooltip#api-reference",
   "structure": "<Tooltip>\n  <Tooltip.Trigger />\n  <Tooltip.Content />\n</Tooltip>",
   "summary": "Compound tooltip built on Base UI Tooltip with `Tooltip.Provider`, `Tooltip.Trigger`, `Tooltip.Content`, and `Tooltip.createHandle` for detached and multiple triggers; `Content` encapsulates Portal + Positioner + Popup + Viewport and animates position, size, and content between triggers.",
   "whenToUse": [

package/package.json

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