@viraui/react 2026.0.21 → 2026.0.23

package/dist/catalog.json

@@ -5,7 +5,7 @@
     {
       "id": "accordion",
       "name": "Accordion",
-      "summary": "Collapsible sections grouped into open/closed blocks with optional Surface wrapping, shared corner radius, and background on open items.",
+      "summary": "Collapsible sections grouped into open/closed blocks with optional Surface wrapping, shared corner radius, and optional Item color for open-block background.",
       "guidePath": "./components/accordion/accordion.guide.json"
     },
     {
@@ -98,6 +98,12 @@
       "summary": "Decorative pointer-driven border highlight on a transparent Surface shell (radius only). Put the visual card as children; a shared rAF tracker paints CSS variables without React re-renders.",
       "guidePath": "./components/glow/glow.guide.json"
     },
+    {
+      "id": "grid",
+      "name": "Grid",
+      "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).",
+      "guidePath": "./components/grid/grid.guide.json"
+    },
     {
       "id": "icon-button",
       "name": "IconButton",

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

@@ -24,7 +24,7 @@ export type AccordionItemProps = AccordionItem.Props & {
      */
     children?: React.ReactNode;
     /**
-     * When `true`, wraps the item in `Surface` with border and open-block background.
+     * When `true`, wraps the item in `Surface` (optional open-block background via `color`).
      * When `false`, renders without `Surface` so consumers can insert `Separator` between items;
      * island styling is skipped for that item.
      *
@@ -49,10 +49,18 @@ export type AccordionItemProps = AccordionItem.Props & {
      * @default Built-in Minus chrome SVG at size 16
      */
     iconOpen?: React.ReactNode;
+    /**
+     * Contrast border side or axis forwarded to the wrapping `Surface` when `useSurface` is `true`.
+     * Omit for no border.
+     *
+     * @default No border.
+     */
+    border?: SurfaceProps['border'];
     /**
      * Resting background for the item card, forwarded to the wrapping `Surface` when `useSurface` is `true`.
+     * Omit for no background (`Surface` leaves `--vui-surface-background` as `none`).
      *
-     * @default 1
+     * @default No background.
      */
     color?: SurfaceProps['color'];
     /**

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

@@ -8,7 +8,7 @@ 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", radius, style, trigger, useSurface = true, ...otherProps }) => {
+var AccordionItemComponent = ({ border, children, className, color, 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)") },
@@ -30,8 +30,8 @@ var AccordionItemComponent = ({ children, className, color = 1, iconClosed = /*
 		"data-use-surface": useSurface ? "true" : "false",
 		style: dynamicStyle,
 		...useSurface && { render: /* @__PURE__ */ jsx(Surface, {
-			border: "all",
-			color
+			border,
+			...color !== void 0 && { color }
 		}) },
 		...otherProps,
 		children: [/* @__PURE__ */ jsx(Accordion.Header, {

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

@@ -2,7 +2,7 @@
   "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.",
+  "summary": "Collapsible sections grouped into open/closed blocks with optional Surface wrapping, shared corner radius, and optional Item color for open-block background.",
   "whenToUse": [
     "Progressive disclosure for related content sections in one surface",
     "FAQ or settings groups where only one section may be open by default",
@@ -27,11 +27,14 @@
       "islands": {
         "description": "When `true`, open/closed blocks render as separated Surface islands with gap between them. When `false`, blocks stay attached with corner radius only on the first and last items. Applies only to items with `useSurface`."
       },
+      "Item.border": {
+        "description": "Contrast border side or axis forwarded to the wrapping `Surface` when `useSurface` is `true`. Omit for no border."
+      },
       "Item.children": {
         "description": "Panel content revealed when the item is open."
       },
       "Item.color": {
-        "description": "Resting background for the item card, forwarded to the wrapping `Surface` when `useSurface` is `true`."
+        "description": "Resting background for the item card, forwarded to the wrapping `Surface` when `useSurface` is `true`. Omit for no background."
       },
       "Item.iconClosed": {
         "description": "Decorative icon shown when the item is closed."
@@ -50,7 +53,7 @@
         "description": "Visible trigger label rendered inside the accordion header button."
       },
       "Item.useSurface": {
-        "description": "When `true`, wraps the item in `Surface` with border and open-block background. When `false`, renders without `Surface` so consumers can insert `Separator` between items; island styling is skipped for that item."
+        "description": "When `true`, wraps the item in `Surface` (optional open-block background via `color`). When `false`, renders without `Surface` so consumers can insert `Separator` between items; island styling is skipped for that item."
       }
     },
     "css": {

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

@@ -0,0 +1,62 @@
+import { useRender } from '@base-ui/react/use-render';
+import type * as React from 'react';
+type GridItemSubgrid = boolean | 'column' | 'row';
+/**
+ * Public Grid.Item props.
+ *
+ * Includes standard `div` attributes such as `id`, `role`, `title`, and event handlers,
+ * plus placement controls and Base UI `render` support for replacing the item root.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type GridItemProps = React.ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Replaces the default `div` root using Base UI render semantics.
+     *
+     * @default The item renders a `div` root.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Ref forwarded to the rendered item root element.
+     *
+     * @default No ref is attached.
+     */
+    ref?: React.Ref<HTMLElement>;
+    /**
+     * Spans the item across every column track (`grid-column: 1 / -1`).
+     * Wins over `column` when both are set.
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Spans the item across every row track (`grid-row: 1 / -1`).
+     * Wins over `row` when both are set.
+     *
+     * @default false
+     */
+    fullHeight?: boolean;
+    /**
+     * Sets explicit `grid-column` placement via `--vui-grid-item-column`.
+     *
+     * @default No explicit column placement.
+     */
+    column?: React.CSSProperties['gridColumn'];
+    /**
+     * Sets explicit `grid-row` placement via `--vui-grid-item-row`.
+     *
+     * @default No explicit row placement.
+     */
+    row?: React.CSSProperties['gridRow'];
+    /**
+     * Opts the item into a nested CSS grid that inherits parent tracks via `subgrid`.
+     * Sets `display: grid` and `grid-template-columns` and/or `grid-template-rows` to `subgrid`.
+     * Pass `true` for both axes, or `'column'` / `'row'` for one axis.
+     * Pair with `fullWidth` / `fullHeight` or a `column` / `row` span so the item covers the tracks to inherit.
+     *
+     * @default false
+     */
+    subgrid?: GridItemSubgrid;
+};
+export declare const GridItem: React.FC<GridItemProps>;
+export {};

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

@@ -0,0 +1,32 @@
+import { clsx } from "../../core/clsx.js";
+import grid_module_default from "./grid.module.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/grid/grid-item.tsx
+var resolveSubgridAttr = (subgrid) => {
+	if (!subgrid) return void 0;
+	if (subgrid === true) return "both";
+	return subgrid;
+};
+var GridItem = ({ className, column, fullHeight = false, fullWidth = false, ref, render, row, style, subgrid = false, ...otherProps }) => {
+	const subgridAttr = resolveSubgridAttr(subgrid);
+	const dynamicStyle = {
+		...column && { "--vui-grid-item-column": column },
+		...row && { "--vui-grid-item-row": row },
+		...style
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: {
+			...otherProps,
+			...fullWidth && { "data-grid-item-fullwidth": "true" },
+			...fullHeight && { "data-grid-item-fullheight": "true" },
+			...subgridAttr && { "data-grid-item-subgrid": subgridAttr },
+			className: clsx(grid_module_default.Item, className),
+			style: dynamicStyle
+		}
+	});
+};
+//#endregion
+export { GridItem };

package/dist/components/grid/grid.css

@@ -0,0 +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}}}

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

@@ -0,0 +1,90 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
+import { GridItemProps } from './grid-item';
+import type * as React from 'react';
+type GridSpace = ThemeTypes['space'];
+type GridAxisPadding = GridSpace | [GridSpace | 0, GridSpace | 0];
+/**
+ * Public Grid props.
+ *
+ * Includes standard `div` attributes such as `id`, `role`, `title`, and event handlers,
+ * plus Vira-owned CSS Grid controls and Base UI `render` support for replacing the root element.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type GridProps = React.ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Replaces the default `div` root using Base UI render semantics.
+     *
+     * @default The grid renders a `div` root.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Ref forwarded to the rendered grid root element.
+     *
+     * @default No ref is attached.
+     */
+    ref?: React.Ref<HTMLElement>;
+    /**
+     * Fixes the number of column tracks. When set, `filling` is ignored and
+     * `data-grid-filling-type` is omitted.
+     *
+     * @default No fixed column count (uses `filling` auto tracks).
+     */
+    columns?: number;
+    /**
+     * Fixes the number of row tracks via `--vui-grid-rows`.
+     *
+     * @default No fixed row count.
+     */
+    rows?: number;
+    /**
+     * Sets the gap between grid rows using the Vira space token scale.
+     *
+     * @default No row gap (`0`).
+     */
+    rowGap?: GridSpace;
+    /**
+     * Sets the gap between grid columns using the Vira space token scale.
+     *
+     * @default No column gap (`0`).
+     */
+    columnGap?: GridSpace;
+    /**
+     * Controls `repeat(auto-fill|auto-fit, …)` when `columns` is unset.
+     * Pass `false` to skip the filling data attribute.
+     *
+     * @default 'fill'
+     */
+    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).
+     *
+     * @default '10rem'
+     */
+    colMinWidth?: string;
+    /**
+     * Minimum row track size used when `rows` is set.
+     *
+     * @default '1fr'
+     */
+    rowMinHeight?: string;
+    /**
+     * Sets inline padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No inline padding.
+     */
+    hPadding?: GridAxisPadding;
+    /**
+     * Sets block padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No block padding.
+     */
+    vPadding?: GridAxisPadding;
+};
+export type { GridItemProps } from './grid-item';
+type GridComponent = React.FC<GridProps> & {
+    Item: React.FC<GridItemProps>;
+};
+export declare const Grid: GridComponent;

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

@@ -0,0 +1,119 @@
+{
+  "name": "Grid",
+  "structure": "<Grid>\n  <Grid.Item>…</Grid.Item>\n</Grid>",
+  "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)",
+    "Layouts where items must span full row or full column tracks",
+    "Token-spaced grids with optional axis padding without custom grid CSS"
+  ],
+  "whenNotToUse": [
+    "Uneven-height presentational walls where reading order can follow columns — prefer Masonry",
+    "Simple one-axis flex spacing — prefer Stack",
+    "Expecting Masonry-style React column packing instead of CSS Grid tracks"
+  ],
+  "accessibility": [
+    "Grid is presentational — choose render roots that preserve correct semantics (section, list, article)",
+    "DOM order follows source order; keep reading and keyboard order aligned with visual placement",
+    "Prefer Grid.Item render when list or article semantics matter for children"
+  ],
+  "antiPatterns": [
+    "Using Masonry when you need explicit row/column placement or full-width/full-height spans",
+    "Re-declaring grid-template and gap in app CSS when Grid can own the layout",
+    "Setting both fullWidth and column (or fullHeight and row) and expecting the explicit placement to win — full-* data attrs override"
+  ],
+  "related": ["Stack", "Masonry", "Surface"],
+  "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)."
+      },
+      "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."
+      },
+      "filling": {
+        "description": "Controls `repeat(auto-fill|auto-fit, …)` when `columns` is unset. Pass `false` to skip the filling data attribute."
+      },
+      "hPadding": {
+        "description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."
+      },
+      "Item.column": {
+        "description": "Sets explicit `grid-column` placement via `--vui-grid-item-column`."
+      },
+      "Item.fullHeight": {
+        "description": "Spans the item across every row track (`grid-row: 1 / -1`). Wins over `row` when both are set."
+      },
+      "Item.fullWidth": {
+        "description": "Spans the item across every column track (`grid-column: 1 / -1`). Wins over `column` when both are set."
+      },
+      "Item.ref": {
+        "description": "Ref forwarded to the rendered item root element."
+      },
+      "Item.render": {
+        "description": "Replaces the default `div` item root using Base UI render semantics."
+      },
+      "Item.row": {
+        "description": "Sets explicit `grid-row` placement via `--vui-grid-item-row`."
+      },
+      "Item.subgrid": {
+        "description": "Opts the item into a nested CSS grid that inherits parent tracks via `subgrid`. Sets `display: grid` and `grid-template-columns` and/or `grid-template-rows` to `subgrid`. Pass `true` for both axes, or `'column'` / `'row'` for one axis. Pair with `fullWidth` / `fullHeight` or a `column` / `row` span so the item covers the tracks to inherit."
+      },
+      "ref": {
+        "description": "Ref forwarded to the rendered grid root element."
+      },
+      "render": {
+        "description": "Replaces the default `div` root using Base UI render semantics."
+      },
+      "rowGap": {
+        "description": "Sets the gap between grid rows using the Vira space token scale."
+      },
+      "rowMinHeight": {
+        "description": "Minimum row track size used when `rows` is set."
+      },
+      "rows": {
+        "description": "Fixes the number of row tracks via `--vui-grid-rows`."
+      },
+      "vPadding": {
+        "description": "Sets block padding using one token for both sides or a `[start, end]` tuple."
+      }
+    },
+    "css": {
+      "column-gap": {
+        "description": "Grid column gap on the root."
+      },
+      "column-min-w": {
+        "description": "Minimum column track width for auto-fill/auto-fit track sizing."
+      },
+      "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)`."
+      },
+      "padding-block-end": {
+        "description": "Block-end padding when padding is enabled."
+      },
+      "padding-block-start": {
+        "description": "Block-start padding when padding is enabled."
+      },
+      "padding-inline-end": {
+        "description": "Inline-end padding when padding is enabled."
+      },
+      "padding-inline-start": {
+        "description": "Inline-start padding when padding is enabled."
+      },
+      "row-gap": {
+        "description": "Grid row gap on the root."
+      },
+      "row-min-h": {
+        "description": "Minimum row track size when fixed rows are enabled."
+      },
+      "rows": {
+        "description": "Fixed row track count when `rows` is set."
+      }
+    }
+  }
+}

package/dist/components/grid/grid.js

@@ -0,0 +1,38 @@
+import './grid.css';
+import { clsx } from "../../core/clsx.js";
+import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
+import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
+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 }) => {
+	const hasPadding = Boolean(hPadding || vPadding);
+	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-row-min-h": rowMinHeight,
+		...columns != null && { "--vui-grid-columns": columns },
+		...rows != null && { "--vui-grid-rows": rows },
+		...resolveAxisPadding(hPadding, "--vui-grid-padding-inline-start", "--vui-grid-padding-inline-end"),
+		...resolveAxisPadding(vPadding, "--vui-grid-padding-block-start", "--vui-grid-padding-block-end"),
+		...style
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: {
+			...otherProps,
+			...columns == null && filling && { "data-grid-filling-type": filling },
+			...rows != null && { "data-grid-has-rows": "true" },
+			"data-grid-has-padding": hasPadding ? "true" : "false",
+			className: clsx(grid_module_default.Grid, className),
+			style: dynamicStyle
+		}
+	});
+};
+var Grid = Object.assign(GridRoot, { Item: GridItem });
+//#endregion
+export { Grid };

package/dist/components/grid/grid.module.js

@@ -0,0 +1,9 @@
+//#region src/components/grid/grid.module.css
+var Grid = "viraui__grid-module__Grid_rTZor";
+var Item = "viraui__grid-module__Item_vNnv3";
+var grid_module_default = {
+	Grid,
+	Item
+};
+//#endregion
+export { Grid, Item, grid_module_default as default };

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

@@ -0,0 +1,2 @@
+export { Grid } from './grid';
+export type { GridItemProps, GridProps } from './grid';

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ export * from './elevator';
 export * from './fieldset';
 export * from './fit-text';
 export * from './glow';
+export * from './grid';
 export * from './icon-button';
 export * from './linear-progress';
 export * from './masonry';

package/dist/components/slider/slider.js

@@ -11,7 +11,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Slider } from "@base-ui/react/slider";
 //#region src/components/slider/slider.tsx
-var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error, invalid, label, name, orientation = "horizontal", renderValue, thumbAriaLabel, touched, validate, validationDebounceTime, validationMode, value, ref, ...sliderRootProps }) => {
+var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error, invalid, label, name, orientation = "horizontal", renderValue, thumbAlignment = "edge", thumbAriaLabel, touched, validate, validationDebounceTime, validationMode, value, ref, ...sliderRootProps }) => {
 	const isRange = isRangeSlider(value, defaultValue);
 	const isVertical = orientation === "vertical";
 	const showRenderedValue = renderValue === true || typeof renderValue === "function";
@@ -38,6 +38,7 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
 			name,
 			orientation,
 			value,
+			thumbAlignment,
 			render: /* @__PURE__ */ jsx(Stack, {
 				direction: "column",
 				rowGap: "medium",

package/dist/index.js

@@ -28,6 +28,7 @@ import { FitText } from "./components/fit-text/fit-text.js";
 import { Surface } from "./components/surface/surface.js";
 import { getGlowListenerCount, getGlowRegistrySize } from "./components/glow/glow-tracker.js";
 import { Glow } from "./components/glow/glow.js";
+import { Grid } from "./components/grid/grid.js";
 import { IconButton } from "./components/icon-button/icon-button.js";
 import { IconButtonLink } from "./components/icon-button/icon-button-link.js";
 import { LinearProgress } from "./components/linear-progress/linear-progress.js";
@@ -65,4 +66,4 @@ import { ToggleGroup } from "./components/toggle-group/toggle-group.js";
 import { Typewriter } from "./components/typewriter/typewriter.js";
 import { TooltipContent } from "./components/tooltip/tooltip-content.js";
 import { Tooltip, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
-export { Accordion, Annotate, Autocomplete, Avatar, AvatarGroup, Badge, Bleed, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, Glow, IconButton, IconButtonLink, LinearProgress, Masonry, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps, getGlowListenerCount, getGlowRegistrySize };
+export { Accordion, Annotate, Autocomplete, Avatar, AvatarGroup, Badge, Bleed, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, Glow, Grid, IconButton, IconButtonLink, LinearProgress, Masonry, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps, getGlowListenerCount, getGlowRegistrySize };

package/dist/theme-surface.json

@@ -59,7 +59,7 @@
     {
       "id": "color-primitives",
       "pattern": "--color-{palette}-{step}",
-      "purpose": "Raw palette steps referenced by semantic aliases; not the primary consumer override API."
+      "purpose": "Raw palette steps 0–70 by tens referenced by semantic aliases; not the primary consumer override API."
     },
     {
       "id": "motion",

package/package.json

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