@viraui/react 2026.0.37 → 2026.0.39

package/dist/components/grid/grid.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-grid-row-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-column-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-columns{syntax:"<integer>";inherits:false;initial-value:1}@property --vui-grid-rows{syntax:"<integer>";inherits:false;initial-value:1}@property --vui-grid-column-min-w{syntax:"*";inherits:false;initial-value:10rem}@property --vui-grid-row-min-h{syntax:"*";inherits:false;initial-value:1fr}@property --vui-grid-column-size{syntax:"*";inherits:false;initial-value:auto}@property --vui-grid-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-item-column{syntax:"*";inherits:false;initial-value:auto}@property --vui-grid-item-row{syntax:"*";inherits:false;initial-value:auto}.viraui__grid-module__Grid_rTZor{--vui-grid-column-size:minmax(min(var(--vui-grid-column-min-w),100%),1fr);display:grid;inline-size:100%;max-inline-size:100%;box-sizing:border-box;gap:var(--vui-grid-row-gap) var(--vui-grid-column-gap);grid-template-columns:repeat(var(--vui-grid-columns),minmax(0,1fr));&[data-grid-filling-type=fill]{grid-template-columns:repeat(auto-fill,var(--vui-grid-column-size))}&[data-grid-filling-type=fit]{grid-template-columns:repeat(auto-fit,var(--vui-grid-column-size))}&[data-grid-has-rows=true]{grid-template-rows:repeat(var(--vui-grid-rows),var(--vui-grid-row-min-h))}&:where([data-grid-has-padding=true]){padding:var(--vui-grid-padding-block-start) var(--vui-grid-padding-inline-end) var(--vui-grid-padding-block-end) var(--vui-grid-padding-inline-start)}}.viraui__grid-module__Item_vNnv3{display:block;grid-column:var(--vui-grid-item-column);grid-row:var(--vui-grid-item-row);min-inline-size:0;&[data-grid-item-fullwidth=true]{grid-column:1/-1}&[data-grid-item-fullheight=true]{grid-row:1/-1}&[data-grid-item-subgrid]{display:grid}&[data-grid-item-subgrid=both],&[data-grid-item-subgrid=column]{grid-template-columns:subgrid}&[data-grid-item-subgrid=both],&[data-grid-item-subgrid=row]{grid-template-rows:subgrid}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-grid-row-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-column-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-columns{syntax:"<integer>";inherits:false;initial-value:1}@property --vui-grid-rows{syntax:"<integer>";inherits:false;initial-value:1}@property --vui-grid-column-min-w{syntax:"*";inherits:false;initial-value:10rem}@property --vui-grid-row-min-h{syntax:"*";inherits:false;initial-value:1fr}@property --vui-grid-column-size{syntax:"*";inherits:false;initial-value:auto}@property --vui-grid-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-grid-item-column{syntax:"*";inherits:false;initial-value:auto}@property --vui-grid-item-row{syntax:"*";inherits:false;initial-value:auto}.viraui__grid-module__Grid_rTZor{--vui-grid-column-size:minmax(min(var(--vui-grid-column-min-w),100%),1fr);display:grid;inline-size:100%;max-inline-size:100%;box-sizing:border-box;gap:var(--vui-grid-row-gap) var(--vui-grid-column-gap);grid-template-columns:repeat(var(--vui-grid-columns),minmax(0,1fr));&[data-grid-filling-type=fill]{grid-template-columns:repeat(auto-fill,var(--vui-grid-column-size))}&[data-grid-filling-type=fit]{grid-template-columns:repeat(auto-fit,var(--vui-grid-column-size))}&[data-grid-fixed-breadth=true]{inline-size:max-content;max-inline-size:none;grid-template-columns:repeat(var(--vui-grid-columns),var(--vui-grid-column-min-w))}&[data-grid-has-rows=true]{grid-template-rows:repeat(var(--vui-grid-rows),var(--vui-grid-row-min-h))}&:where([data-grid-has-padding=true]){padding:var(--vui-grid-padding-block-start) var(--vui-grid-padding-inline-end) var(--vui-grid-padding-block-end) var(--vui-grid-padding-inline-start)}}.viraui__grid-module__Item_vNnv3{display:block;grid-column:var(--vui-grid-item-column);grid-row:var(--vui-grid-item-row);&[data-grid-item-fullwidth=true]{grid-column:1/-1}&[data-grid-item-fullheight=true]{grid-row:1/-1}&[data-grid-item-subgrid]{display:grid}&[data-grid-item-subgrid=both],&[data-grid-item-subgrid=column]{grid-template-columns:subgrid}&[data-grid-item-subgrid=both],&[data-grid-item-subgrid=row]{grid-template-rows:subgrid}}}

package/dist/components/grid/grid.d.ts

@@ -29,6 +29,10 @@ export type GridProps = React.ComponentPropsWithoutRef<'div'> & {
      * Fixes the number of column tracks. When set, `filling` is ignored and
      * `data-grid-filling-type` is omitted.
      *
+     * Bare `columns={N}` uses fluid `repeat(N, minmax(0, 1fr))` tracks. Pass an
+     * explicit `colMinWidth` as well for fixed-breadth tracks and
+     * `data-grid-fixed-breadth="true"` (`inline-size: max-content`).
+     *
      * @default No fixed column count (uses `filling` auto tracks).
      */
     columns?: number;
@@ -59,7 +63,9 @@ export type GridProps = React.ComponentPropsWithoutRef<'div'> & {
     filling?: 'fit' | 'fill' | false;
     /**
      * Minimum column track width for `filling` auto-fill/auto-fit tracks.
-     * Ignored when `columns` is set (fixed tracks use `minmax(0, 1fr)` so gaps fit).
+     * When `columns` is also set, an explicit value opts into fixed-breadth
+     * tracks (`repeat(N, var(--vui-grid-column-min-w))`) and sets
+     * `data-grid-fixed-breadth`; omit this prop to keep fluid `1fr` tracks.
      *
      * @default '10rem'
      */

package/dist/components/grid/grid.guide.json

@@ -4,6 +4,7 @@
   "summary": "CSS Grid layout primitive for auto-fill/fit or fixed track layouts with token gaps, Stack-aligned padding, and item placement (`fullWidth` / `fullHeight` / column / row).",
   "whenToUse": [
     "Responsive card or tile walls that need true CSS Grid tracks (auto-fill/fit or fixed columns)",
+    "Fixed-count columns that keep a given track breadth — pair `columns` with an explicit `colMinWidth` so a parent with `overflow: auto` can scroll",
     "Layouts where items must span full row or full column tracks",
     "Token-spaced grids with optional axis padding without custom grid CSS"
   ],
@@ -26,13 +27,13 @@
   "properties": {
     "react": {
       "colMinWidth": {
-        "description": "Minimum column track width for `filling` auto-fill/auto-fit tracks. Ignored when `columns` is set (fixed tracks use `minmax(0, 1fr)` so gaps fit)."
+        "description": "Minimum column track width for `filling` auto-fill/auto-fit tracks. When `columns` is also set, an explicit value opts into fixed-breadth tracks (`repeat(N, var(--vui-grid-column-min-w))`) and sets `data-grid-fixed-breadth`; omit this prop to keep fluid `1fr` tracks."
       },
       "columnGap": {
         "description": "Sets the gap between grid columns using the Vira space token scale."
       },
       "columns": {
-        "description": "Fixes the number of column tracks. When set, `filling` is ignored and `data-grid-filling-type` is omitted."
+        "description": "Fixes the number of column tracks. When set, `filling` is ignored and `data-grid-filling-type` is omitted. Bare `columns={N}` uses fluid `repeat(N, minmax(0, 1fr))` tracks. Pass an explicit `colMinWidth` as well for fixed-breadth tracks and `data-grid-fixed-breadth=\"true\"` (`inline-size: max-content`)."
       },
       "filling": {
         "description": "Controls `repeat(auto-fill|auto-fit, …)` when `columns` is unset. Pass `false` to skip the filling data attribute."
@@ -85,13 +86,13 @@
         "description": "Grid column gap on the root."
       },
       "column-min-w": {
-        "description": "Minimum column track width for auto-fill/auto-fit track sizing."
+        "description": "Minimum column track width for auto-fill/auto-fit track sizing, and the fixed track breadth when `columns` is set with an explicit `colMinWidth`."
       },
       "column-size": {
         "description": "Resolved column track size (`minmax` formula) used by auto-fill/fit."
       },
       "columns": {
-        "description": "Fixed column track count when `columns` is set and filling is inactive; tracks size as `minmax(0, 1fr)`."
+        "description": "Fixed column track count when `columns` is set and filling is inactive; bare `columns` sizes tracks as `minmax(0, 1fr)`; with explicit `colMinWidth`, tracks use `var(--vui-grid-column-min-w)` under `data-grid-fixed-breadth`."
       },
       "padding-block-end": {
         "description": "Block-end padding when padding is enabled."

package/dist/components/grid/grid.js

@@ -6,12 +6,13 @@ import grid_module_default from "./grid.module.js";
 import { GridItem } from "./grid-item.js";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/grid/grid.tsx
-var GridRoot = ({ className, colMinWidth = "10rem", columnGap, columns, filling = "fill", hPadding, ref, render, rowGap, rowMinHeight = "1fr", rows, style, vPadding, ...otherProps }) => {
+var GridRoot = ({ className, colMinWidth, columnGap, columns, filling = "fill", hPadding, ref, render, rowGap, rowMinHeight = "1fr", rows, style, vPadding, ...otherProps }) => {
 	const hasPadding = Boolean(hPadding || vPadding);
+	const hasFixedColumnBreadth = columns != null && colMinWidth != null;
 	const dynamicStyle = {
 		"--vui-grid-row-gap": resolveThemeValue(rowGap, "space", 0),
 		"--vui-grid-column-gap": resolveThemeValue(columnGap, "space", 0),
-		"--vui-grid-column-min-w": colMinWidth,
+		"--vui-grid-column-min-w": colMinWidth ?? "10rem",
 		"--vui-grid-row-min-h": rowMinHeight,
 		...columns != null && { "--vui-grid-columns": columns },
 		...rows != null && { "--vui-grid-rows": rows },
@@ -26,6 +27,7 @@ var GridRoot = ({ className, colMinWidth = "10rem", columnGap, columns, filling
 		props: {
 			...otherProps,
 			...columns == null && filling && { "data-grid-filling-type": filling },
+			...hasFixedColumnBreadth && { "data-grid-fixed-breadth": "true" },
 			...rows != null && { "data-grid-has-rows": "true" },
 			"data-grid-has-padding": hasPadding ? "true" : "false",
 			className: clsx(grid_module_default.Grid, className),

package/dist/components/separator/separator.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-separator-size{syntax:"<length>";inherits:false;initial-value:1px}.viraui__separator-module__Line_xXOe9{border:0;margin:0;background:oklab(from var(--global-contrast) l a b/20%);&[data-separator-orientation=horizontal]{inline-size:100%;block-size:var(--vui-separator-size)}&[data-separator-orientation=vertical]{inline-size:var(--vui-separator-size);block-size:100%}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-separator-size{syntax:"<length>";inherits:false;initial-value:1px}.viraui__separator-module__Line_xXOe9{border:0;margin:0;background:var(--global-contrast);&[data-separator-orientation=horizontal]{inline-size:100%;block-size:var(--vui-separator-size)}&[data-separator-orientation=vertical]{inline-size:var(--vui-separator-size);block-size:100%}}}

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 --__slider-thumb-spacer{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-indicator-gap{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-medium);--vui-slider-thumb-size:var(--space-2x-small);--vui-slider-track-background:var(--global-contrast);--vui-slider-progress-background:var(--global-primary);--vui-slider-thumb-background:contrast-color(var(--global-primary));--__slider-thumb-spacer:0.75rem;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-background);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:hidden;inline-size:100%;block-size:var(--vui-slider-track-size);background:var(--vui-slider-track-background);border-radius:var(--radius-x-small)}.viraui__slider-module__Indicator_y3JyJ{--__slider-indicator-gap:calc(var(--__slider-thumb-spacer) / 2);background:var(--vui-slider-progress-background);box-sizing:initial;position:relative;padding-inline-end:var(--__slider-indicator-gap);&[data-orientation=vertical]{padding-inline-end:0;padding-block-start:var(--__slider-indicator-gap)}.viraui__slider-module__Track_wvLEH:has(.viraui__slider-module__Thumb_S-uLF~.viraui__slider-module__Thumb_S-uLF) &{margin-inline-start:calc(var(--__slider-indicator-gap) * -1);padding-inline-end:calc(var(--__slider-indicator-gap) * 2);&[data-orientation=vertical]{margin-inline-start:0;padding-inline-end:0;margin-block-end:calc(var(--__slider-indicator-gap) * -1);padding-block-start:calc(var(--__slider-indicator-gap) * 2)}}}.viraui__slider-module__Thumb_S-uLF{box-sizing:border-box;inline-size:var(--__slider-thumb-spacer);block-size:calc(100% - max(8px, var(--radius-small)));appearance:none;&:after{content:"";position:absolute;inset-block:0;inset-inline-start:50%;translate:-50% 0;box-sizing:border-box;inline-size:.125rem;block-size:100%;background:var(--vui-slider-thumb-background);border-radius:var(--radius-infinite)}&[data-orientation=vertical]{inline-size:calc(100% - 8px);block-size:var(--__slider-thumb-spacer);&:after{inset-inline:0;inset-block-start:50%;inset-block-end:auto;translate:0 -50%;inline-size:100%;block-size:var(--vui-slider-thumb-size)}}&: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}&:has(>input:focus-visible):after{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 --__slider-thumb-spacer{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-indicator-gap{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-medium);--vui-slider-thumb-size:var(--space-2x-small);--vui-slider-track-background:var(--global-contrast);--vui-slider-progress-background:var(--global-primary);--vui-slider-thumb-background:contrast-color(var(--global-primary));--__slider-thumb-spacer:0.75rem;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-background);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:hidden;inline-size:100%;block-size:var(--vui-slider-track-size);background:var(--vui-slider-track-background);border-radius:var(--radius-x-small)}.viraui__slider-module__Indicator_y3JyJ{--__slider-indicator-gap:calc(var(--__slider-thumb-spacer) / 2);background:var(--vui-slider-progress-background);box-sizing:initial;position:relative;padding-inline-end:var(--__slider-indicator-gap);&[data-orientation=vertical]{padding-inline-end:0;padding-block-start:var(--__slider-indicator-gap)}.viraui__slider-module__Track_wvLEH:has(.viraui__slider-module__Thumb_S-uLF~.viraui__slider-module__Thumb_S-uLF) &{margin-inline-start:calc(var(--__slider-indicator-gap) * -1);padding-inline-end:calc(var(--__slider-indicator-gap) * 2);&[data-orientation=vertical]{margin-inline-start:0;padding-inline-end:0;margin-block-end:calc(var(--__slider-indicator-gap) * -1);padding-block-start:calc(var(--__slider-indicator-gap) * 2)}}}.viraui__slider-module__Thumb_S-uLF{box-sizing:border-box;inline-size:var(--__slider-thumb-spacer);block-size:50%;appearance:none;&:after{content:"";position:absolute;inset-block:0;inset-inline-start:50%;translate:-50% 0;box-sizing:border-box;inline-size:.125rem;block-size:100%;background:var(--vui-slider-thumb-background);border-radius:var(--radius-infinite)}&[data-orientation=vertical]{inline-size:calc(100% - 8px);block-size:var(--__slider-thumb-spacer);&:after{inset-inline:0;inset-block-start:50%;inset-block-end:auto;translate:0 -50%;inline-size:100%;block-size:var(--vui-slider-thumb-size)}}&: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}&:has(>input:focus-visible):after{outline:var(--outline);outline-offset:var(--outline-offset)}>input:focus-visible{outline:none}}}

package/dist/components/stack/stack.css

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

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

@@ -100,10 +100,10 @@ export type StackProps = React.ComponentPropsWithoutRef<'div'> & {
     /**
      * 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.
+     * Enables `container: stack / inline-size` on the rendered root (via `data-stack-container="true"`),
+     * so descendants can use `@container stack (min-width: ...)` against this Stack inline-size.
      *
-     * Warning: container size containment can affect nested layout (e.g. cards inside Masonry).
+     * Warning: inline-size containment can affect nested layout (e.g. cards inside Masonry).
      * Use only when you need container queries against this specific Stack.
      *
      * @default false

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

@@ -6,12 +6,12 @@
     "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 (set `enableContainer` on the Stack you're querying)"
+    "Style descendants with `@container stack` queries when layout, gap, or typography should respond to the Stack's own inline-size instead of the viewport (set `enableContainer` on the Stack you're querying)"
   ],
   "whenNotToUse": [
     "Cases where a single component already owns required flex chrome",
     "Expecting direct children to stretch without setting `fillChildren`",
-    "Using `enableContainer` inside complex masonry-like layouts when you don't need container queries (size containment can change nested layout)"
+    "Using `enableContainer` inside complex masonry-like layouts when you don't need container queries (inline-size containment can change nested layout)"
   ],
   "accessibility": [
     "Stack is presentational — choose render roots that preserve correct semantics (button, list, heading)",
@@ -21,7 +21,7 @@
   "antiPatterns": [
     "Assuming Stack stretches direct children by default — pass `fillChildren` when children should grow along the flex main axis",
     "Re-declaring primitive flex container rules in app CSS when Stack can own the layout",
-    "Using viewport media queries when @container stack queries against the rendered Stack size would match the design intent"
+    "Using viewport media queries when @container stack queries against the rendered Stack inline-size would match the design intent"
   ],
   "related": ["Surface", "Text", "Button"],
   "properties": {
@@ -30,7 +30,7 @@
         "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."
+        "description": "Opt-in named CSS container query context for this Stack (enables `container: stack / inline-size` on the root via `data-stack-container`). Required for `@container stack (min-width: ...)` rules to react to this Stack inline-size. Warning: inline-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/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(--effect-vibrancy: 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}}}
+@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(--effect-vibrancy: 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/inline-size}}}

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

@@ -80,10 +80,10 @@ export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>
     /**
      * 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.
+     * Enables `container: surface / inline-size` on the rendered root (via `data-surface-container="true"`),
+     * so descendants can use `@container surface (min-width: ...)` against this Surface inline-size.
      *
-     * Warning: container size containment can affect nested layout (e.g. cards inside Masonry).
+     * Warning: inline-size containment can affect nested layout (e.g. cards inside Masonry).
      * Use only when you need container queries against this specific Surface.
      *
      * @default false

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

@@ -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 (set `enableContainer` on the Surface you're querying)"
+    "Style descendants with `@container surface` queries when layout or typography should respond to the Surface's own inline-size instead of the viewport (set `enableContainer` on the Surface you're querying)"
   ],
   "whenNotToUse": [
     "Interactive control semantics without an appropriate render root",
@@ -28,7 +28,7 @@
     "Assuming hoverColor applies on touch devices",
     "Reusing the parent token radius on nested Surfaces instead of radius=\"auto\" when concentric corners are required",
     "Expecting radius=\"auto\" to inherit a token when the nearest ancestor Surface has no radius set",
-    "Using viewport media queries when @container surface queries against the rendered Surface size would match the design intent"
+    "Using viewport media queries when @container surface queries against the rendered Surface inline-size would match the design intent"
   ],
   "related": ["Elevator", "Stack"],
   "properties": {
@@ -37,7 +37,7 @@
         "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."
+        "description": "Opt-in named CSS container query context for this Surface (enables `container: surface / inline-size` on the root). Required for `@container surface (min-width: ...)` rules to react to this Surface inline-size. Warning: inline-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.0.37",
+  "version": "2026.0.39",
   "private": false,
   "files": [
     "dist"
@@ -35,10 +35,10 @@
     "unplugin-dts": "1.0.3",
     "vite": "8.1.4",
     "vite-plugin-static-copy": "4.1.1",
-    "@viraui/foundation": "2026.0.37",
+    "@viraui/foundation": "2026.0.39",
     "@viraui/icons": "2026.0.1",
-    "@viraui/tsconfig": "2026.0.0",
-    "@viraui/postcss-config": "2026.0.0"
+    "@viraui/postcss-config": "2026.0.0",
+    "@viraui/tsconfig": "2026.0.0"
   },
   "peerDependencies": {
     "@base-ui/react": ">=1.6.0",