@viraui/react 2026.2.17 → 2026.3.0

package/dist/catalog.json

@@ -50,6 +50,12 @@
       "summary": "Layout utility that pulls content past inline padding using negative margins or full viewport bleed.",
       "guidePath": "./components/bleed/bleed.guide.json"
     },
+    {
+      "id": "breakpoints",
+      "name": "BreakpointsProvider",
+      "summary": "Client provider plus `useBreakpoints` for mobile-first viewport min-width matches. Defaults are hardcoded em thresholds, not theme tokens.",
+      "guidePath": "./components/breakpoints/breakpoints.guide.json"
+    },
     {
       "id": "button",
       "name": "Button",

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

@@ -19,7 +19,7 @@ var AutocompleteItemPart = ({ addon, addonAlign = "center", children, className,
 		vAlign: addonAlign,
 		vPadding: "small",
 		children: [addon && /* @__PURE__ */ jsx(Stack, {
-			fillChildren: true,
+			expandChildren: true,
 			"aria-hidden": "true",
 			"data-grow": "false",
 			"data-shrink": "false",

package/dist/components/autocomplete/autocomplete.js

@@ -36,7 +36,7 @@ function AutocompleteRootComponent({ children, className, container, description
 		validationDebounceTime,
 		validationMode,
 		render: /* @__PURE__ */ jsx(Stack, {
-			fillChildren: true,
+			expandChildren: true,
 			rowGap: "small"
 		}),
 		children: [

package/dist/components/breakpoints/breakpoints-provider.d.ts

@@ -0,0 +1,28 @@
+import type * as React from 'react';
+export type DefaultBreakpointName = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
+/**
+ * Named min-width thresholds. Values are CSS lengths used in `(min-width: <value>)` queries.
+ */
+export type BreakpointMap = Record<string, string>;
+export type BreakpointsProviderProps = {
+    /**
+     * Replaces the entire default breakpoint map for this provider instance.
+     *
+     * @defaultValue Hardcoded extra-small 30em, small 48em, medium 60em, large 80em, extra-large 100em
+     */
+    breakpoints?: BreakpointMap;
+    /**
+     * Tree that may call `useBreakpoints`.
+     *
+     * @defaultValue No default. Consumers must provide children.
+     */
+    children: React.ReactNode;
+};
+export type BreakpointsStore = {
+    subscribe: (onStoreChange: () => void) => () => void;
+    getSnapshot: () => Record<string, boolean>;
+    getServerSnapshot: () => Record<string, boolean>;
+    dispose: () => void;
+};
+export declare const BreakpointsStoreContext: React.Context<BreakpointsStore | null>;
+export declare const BreakpointsProvider: React.FC<BreakpointsProviderProps>;

package/dist/components/breakpoints/breakpoints-provider.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useEffect, useMemo } from "react";
+//#region src/components/breakpoints/breakpoints-provider.tsx
+var defaultBreakpointMap = {
+	"extra-small": "30em",
+	small: "48em",
+	medium: "60em",
+	large: "80em",
+	"extra-large": "100em"
+};
+var BreakpointsStoreContext = createContext(null);
+var matchesFromMap = (map, matched) => {
+	const next = {};
+	for (const name of Object.keys(map)) next[name] = matched;
+	return next;
+};
+var assertBreakpointMap = (map) => {
+	const names = Object.keys(map);
+	if (names.length === 0) throw new Error("BreakpointsProvider: `breakpoints` must be a non-empty map of name → CSS length.");
+	for (const name of names) {
+		const value = map[name];
+		if (name.trim() === "" || typeof value !== "string" || value.trim() === "") throw new Error(`BreakpointsProvider: invalid breakpoint "${name}". Each name and length must be a non-empty string.`);
+	}
+};
+var snapshotsEqual = (left, right) => {
+	const keys = Object.keys(left);
+	if (keys.length !== Object.keys(right).length) return false;
+	return keys.every((key) => left[key] === right[key]);
+};
+var canUseMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+var readClientMatches = (map) => {
+	const next = {};
+	for (const name of Object.keys(map)) next[name] = window.matchMedia(`(min-width: ${map[name]})`).matches;
+	return next;
+};
+var createBreakpointsStore = (map) => {
+	assertBreakpointMap(map);
+	const serverSnapshot = matchesFromMap(map, false);
+	let snapshot = canUseMatchMedia() ? readClientMatches(map) : serverSnapshot;
+	const listeners = /* @__PURE__ */ new Set();
+	const mediaQueries = [];
+	const emitIfChanged = (next) => {
+		if (snapshotsEqual(snapshot, next)) return;
+		snapshot = next;
+		for (const listener of listeners) listener();
+	};
+	const startWatching = () => {
+		if (!canUseMatchMedia() || mediaQueries.length > 0) return;
+		snapshot = readClientMatches(map);
+		for (const name of Object.keys(map)) {
+			const mediaQueryList = window.matchMedia(`(min-width: ${map[name]})`);
+			const onChange = () => emitIfChanged(readClientMatches(map));
+			mediaQueryList.addEventListener("change", onChange);
+			mediaQueries.push({
+				mediaQueryList,
+				onChange
+			});
+		}
+	};
+	const stopWatching = () => {
+		for (const { mediaQueryList, onChange } of mediaQueries) mediaQueryList.removeEventListener("change", onChange);
+		mediaQueries.length = 0;
+	};
+	return {
+		subscribe: (onStoreChange) => {
+			listeners.add(onStoreChange);
+			if (listeners.size === 1) startWatching();
+			return () => {
+				listeners.delete(onStoreChange);
+				if (listeners.size === 0) stopWatching();
+			};
+		},
+		getSnapshot: () => snapshot,
+		getServerSnapshot: () => serverSnapshot,
+		dispose: () => {
+			stopWatching();
+			listeners.clear();
+		}
+	};
+};
+var BreakpointsProvider = ({ breakpoints = defaultBreakpointMap, children }) => {
+	const store = useMemo(() => createBreakpointsStore(breakpoints), [breakpoints]);
+	useEffect(() => () => {
+		store.dispose();
+	}, [store]);
+	return /* @__PURE__ */ jsx(BreakpointsStoreContext.Provider, {
+		value: store,
+		children
+	});
+};
+//#endregion
+export { BreakpointsProvider, BreakpointsStoreContext };

package/dist/components/breakpoints/breakpoints.guide.json

@@ -0,0 +1,40 @@
+{
+  "name": "BreakpointsProvider",
+  "structure": "<BreakpointsProvider>\n  {children}\n</BreakpointsProvider>",
+  "summary": "Client provider plus `useBreakpoints` for mobile-first viewport min-width matches. Defaults are hardcoded em thresholds, not theme tokens.",
+  "whenToUse": [
+    "Swap or hide React markup when the viewport crosses named breakpoints",
+    "Read one flag with `useBreakpoints('small')` so unrelated breakpoint flips skip work",
+    "Override the full map with the `breakpoints` prop for product-specific thresholds"
+  ],
+  "whenNotToUse": [
+    "Layout that CSS `@media` or container queries can own without branching markup",
+    "Calling `useBreakpoints` outside this provider",
+    "Reading design-token CSS variables for breakpoint widths"
+  ],
+  "accessibility": [
+    "Match state is not an APG widget. Keep the same accessible name and semantics when swapping chrome",
+    "Do not rely on breakpoint-only visibility as the only way to reach essential actions on small viewports"
+  ],
+  "antiPatterns": [
+    "Using `useBreakpoints` without wrapping the tree in `BreakpointsProvider`",
+    "Merging a sparse custom map onto defaults — the `breakpoints` prop replaces the whole map",
+    "Putting the provider in a Server Component module — wrap it in a Client Component (`'use client'`)"
+  ],
+  "related": ["Stack", "Grid"],
+  "usage": [
+    "Place `BreakpointsProvider` in a Client Component (Next.js: same client providers module as overlays, or a nested client wrapper). Server Components may compose around that boundary.",
+    "On the server and before measure, every named breakpoint is unmatched (mobile-first base). After hydration, flags follow the real viewport; first paint may differ on wide screens — prefer CSS for chrome that must not flash.",
+    "Nested providers isolate subtrees. The innermost map wins."
+  ],
+  "properties": {
+    "react": {
+      "breakpoints": {
+        "description": "Replaces the entire default map (extra-small 30em, small 48em, medium 60em, large 80em, extra-large 100em). Values are CSS lengths used as mobile-first min-width queries."
+      },
+      "children": {
+        "description": "Tree that may call `useBreakpoints`. The hook returns all match flags, or `useBreakpoints(name)` for one boolean."
+      }
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+export { BreakpointsProvider } from './breakpoints-provider';
+export type { BreakpointMap, BreakpointsProviderProps, DefaultBreakpointName } from './breakpoints-provider';
+export { useBreakpoints } from './use-breakpoints';

package/dist/components/breakpoints/use-breakpoints.d.ts

@@ -0,0 +1,2 @@
+export declare function useBreakpoints(): Record<string, boolean>;
+export declare function useBreakpoints(name: string): boolean;

package/dist/components/breakpoints/use-breakpoints.js

@@ -0,0 +1,33 @@
+"use client";
+import { BreakpointsStoreContext } from "./breakpoints-provider.js";
+import { useCallback, useContext, useSyncExternalStore } from "react";
+//#region src/components/breakpoints/use-breakpoints.ts
+var noop = () => void 0;
+var missingStore = {
+	subscribe: () => noop,
+	getSnapshot: () => {
+		throw new Error("useBreakpoints must be used within a BreakpointsProvider.");
+	},
+	getServerSnapshot: () => {
+		throw new Error("useBreakpoints must be used within a BreakpointsProvider.");
+	},
+	dispose: noop
+};
+function useBreakpoints(name) {
+	const store = useContext(BreakpointsStoreContext) ?? missingStore;
+	const getSnapshot = useCallback(() => {
+		const snapshot = store.getSnapshot();
+		if (name === void 0) return snapshot;
+		if (!(name in snapshot)) throw new Error(`useBreakpoints: unknown breakpoint "${name}".`);
+		return snapshot[name] === true;
+	}, [name, store]);
+	const getServerSnapshot = useCallback(() => {
+		const snapshot = store.getServerSnapshot();
+		if (name === void 0) return snapshot;
+		if (!(name in snapshot)) throw new Error(`useBreakpoints: unknown breakpoint "${name}".`);
+		return snapshot[name] === true;
+	}, [name, store]);
+	return useSyncExternalStore(store.subscribe, getSnapshot, getServerSnapshot);
+}
+//#endregion
+export { useBreakpoints };

package/dist/components/button/button-link.d.ts

@@ -1,5 +1,5 @@
 import { useRender } from '@base-ui/react/use-render';
-import { ButtonAddonPosition, ButtonSize, ButtonVariant } from './button-chrome';
+import { ButtonAddonPosition, ButtonSize, ButtonVariant } from './button';
 import { ReactNode } from 'react';
 import * as React from 'react';
 /**
@@ -14,49 +14,49 @@ export type ButtonLinkProps = Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
     /**
      * Replaces the default `a` root using Base UI render semantics (e.g. Next.js `Link`).
      *
-     * @default The link renders an `a` root.
+     * @defaultValue The link renders an `a` root.
      */
     render?: useRender.RenderProp;
     /**
      * Controls the visual button size.
      *
-     * @default 'medium'
+     * @defaultValue 'medium'
      */
     size?: ButtonSize;
     /**
      * Selects the visual treatment matching Button.
      *
-     * @default 'primary'
+     * @defaultValue 'primary'
      */
     variant?: ButtonVariant;
     /**
      * Decorative addon rendered alongside the link label.
      *
-     * @default No default; omit when the link has no addon.
+     * @defaultValue undefined
      */
     addon?: ReactNode;
     /**
      * Controls whether the addon appears before or after the label.
      *
-     * @default 'start'
+     * @defaultValue 'start'
      */
     addonPosition?: ButtonAddonPosition;
     /**
      * Shows a centered spinner overlay while preserving the original content width.
      *
-     * @default false
+     * @defaultValue false
      */
     loading?: boolean;
     /**
      * Applies a fully rounded pill shape.
      *
-     * @default false
+     * @defaultValue false
      */
     pill?: boolean;
     /**
      * Marks the link inert via `aria-disabled` and prevents activation.
      *
-     * @default false
+     * @defaultValue false
      */
     disabled?: boolean;
 };

package/dist/components/button/button-link.js

@@ -1,43 +1,60 @@
-import { ButtonChromeChildren, getButtonChromeRootAttrs } from "./button-chrome.js";
-import { jsx } from "react/jsx-runtime";
+import { clsx } from "../../core/clsx.js";
+import { Spinner } from "../spinner/spinner.js";
+import button_module_default from "./button.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/button/button-link.tsx
 var ButtonLink = ({ children, className, disabled = false, addon, addonPosition = "start", loading = false, pill = false, size = "medium", variant = "primary", render, ref, onClick, ...otherProps }) => {
-	const isDisabled = disabled || loading;
+	const isDisabled = Boolean(disabled || loading);
 	const isIconOnly = Boolean(addon) && (children == null || children === "");
+	const loadingAttr = loading ? "true" : "false";
+	const spinnerSize = size === "large" ? "medium" : "small";
+	const handleClick = (event) => {
+		if (isDisabled) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+	};
 	return useRender({
 		defaultTagName: "a",
 		render,
 		ref,
 		props: {
 			...otherProps,
-			...getButtonChromeRootAttrs({
-				addon,
-				addonPosition,
-				className,
-				isDisabled,
-				isIconOnly,
-				loading,
-				pill,
-				size,
-				variant
-			}),
-			children: /* @__PURE__ */ jsx(ButtonChromeChildren, {
-				addon,
-				isIconOnly,
-				loading,
-				size,
+			"aria-busy": loading || void 0,
+			className: clsx(button_module_default.Button, className),
+			"data-loading": loadingAttr,
+			"data-pill": pill ? "true" : "false",
+			"data-size": size,
+			"data-icon-only": isIconOnly ? "true" : "false",
+			"data-addon-position": addon && !isIconOnly ? addonPosition : void 0,
+			"data-variant": variant,
+			onClick: handleClick,
+			...isDisabled && { "aria-disabled": true },
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [isIconOnly ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: button_module_default.Content,
+				"data-loading": loadingAttr,
+				children: addon
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [addon && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: button_module_default.Content,
+				"data-loading": loadingAttr,
+				children: addon
+			}), /* @__PURE__ */ jsx("span", {
+				className: button_module_default.Content,
+				"data-loading": loadingAttr,
 				children
-			}),
-			onClick: (event) => {
-				if (isDisabled) {
-					event.preventDefault();
-					return;
-				}
-				onClick?.(event);
-			},
-			...isDisabled && { "aria-disabled": true }
+			})] }), loading && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: button_module_default.SpinnerOverlay,
+				children: /* @__PURE__ */ jsx(Spinner, {
+					variant: "dots",
+					size: spinnerSize
+				})
+			})] })
 		}
 	});
 };

package/dist/components/button/button.css

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

package/dist/components/button/button.d.ts

@@ -1,7 +1,9 @@
 import { Button as PrimitiveButton } from '@base-ui/react/button';
-import { ButtonAddonPosition, ButtonSize, ButtonVariant } from './button-chrome';
 import { ReactNode } from 'react';
 import * as React from 'react';
+export type ButtonSize = 'large' | 'medium' | 'small';
+export type ButtonVariant = 'primary' | 'secondary' | 'flat' | 'destructive';
+export type ButtonAddonPosition = 'start' | 'end';
 /**
  * Public Button props.
  *
@@ -14,38 +16,38 @@ export type ButtonProps = PrimitiveButton.Props & {
     /**
      * Controls the visual button size.
      *
-     * @default 'medium'
+     * @defaultValue 'medium'
      */
     size?: ButtonSize;
     /**
      * Selects the visual treatment for the button.
      *
-     * @default 'primary'
+     * @defaultValue 'primary'
      */
     variant?: ButtonVariant;
     /**
      * Decorative addon rendered alongside the button label.
      * Pass any React element; use a named icon from `@viraui/icons/react` or `<Chip />` for status chips.
      *
-     * @default No default; omit when the button has no addon.
+     * @defaultValue undefined
      */
     addon?: ReactNode;
     /**
      * Controls whether the addon appears before or after the label.
      *
-     * @default 'start'
+     * @defaultValue 'start'
      */
     addonPosition?: ButtonAddonPosition;
     /**
      * Shows a centered spinner overlay while preserving the original content width.
      *
-     * @default false
+     * @defaultValue false
      */
     loading?: boolean;
     /**
      * Applies a fully rounded pill shape to the button.
      *
-     * @default false
+     * @defaultValue false
      */
     pill?: boolean;
 };

package/dist/components/button/button.js

@@ -1,88 +1,51 @@
 import './button.css';
-import { ButtonChromeChildren, getButtonChromeRootAttrs } from "./button-chrome.js";
-import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { useRender } from "@base-ui/react/use-render";
+import { clsx } from "../../core/clsx.js";
+import { Spinner } from "../spinner/spinner.js";
+import button_module_default from "./button.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
 import { Button } from "@base-ui/react/button";
 //#region src/components/button/button.tsx
-function usesButtonPrimitiveRender(render) {
-	return render === void 0 || React.isValidElement(render) && render.type === "button";
-}
-var ButtonRenderRoot = ({ isDisabled, ref, render, rootProps }) => {
-	const { onClick, ...restRootProps } = rootProps;
-	return useRender({
-		defaultTagName: "button",
-		render,
-		ref,
-		state: { disabled: isDisabled },
-		props: {
-			...restRootProps,
-			onClick: (event) => {
-				if (isDisabled) {
-					event.preventDefault();
-					return;
-				}
-				onClick?.(event);
-			},
-			...isDisabled && { "aria-disabled": true }
-		}
-	});
-};
-var ButtonRoot = ({ children, className, isDisabled, isIconOnly, addon, addonPosition, loading, passThroughProps, pill, ref, render, size, variant }) => {
-	const chromeAttrs = getButtonChromeRootAttrs({
-		addon,
-		addonPosition,
-		className: typeof className === "string" ? className : void 0,
-		isDisabled,
-		isIconOnly,
-		loading,
-		pill,
-		size,
-		variant
-	});
-	const rootProps = {
-		...passThroughProps,
-		...chromeAttrs,
-		className: typeof className === "function" ? className : chromeAttrs.className,
-		children
-	};
-	if (usesButtonPrimitiveRender(render)) return /* @__PURE__ */ jsx(Button, {
-		...rootProps,
-		render,
-		ref,
-		disabled: isDisabled
-	});
-	return /* @__PURE__ */ jsx(ButtonRenderRoot, {
-		isDisabled,
-		ref,
-		render,
-		rootProps
-	});
-};
-var Button$1 = ({ children, className, disabled, addon, addonPosition = "start", loading = false, pill = false, size = "medium", variant = "primary", ...otherProps }) => {
-	const isDisabled = disabled || loading;
+var Button$1 = ({ children, className, disabled, addon, addonPosition = "start", loading = false, pill = false, size = "medium", variant = "primary", render, ref, ...otherProps }) => {
+	const isDisabled = Boolean(disabled || loading);
 	const isIconOnly = Boolean(addon) && (children == null || children === "");
-	const { render, ref, ...passThroughProps } = otherProps;
-	return /* @__PURE__ */ jsx(ButtonRoot, {
-		className,
-		isDisabled,
-		isIconOnly,
-		addon,
-		addonPosition,
-		loading,
-		passThroughProps,
-		pill,
+	const loadingAttr = loading ? "true" : "false";
+	const spinnerSize = size === "large" ? "medium" : "small";
+	return /* @__PURE__ */ jsxs(Button, {
+		...otherProps,
+		"aria-busy": loading || void 0,
+		className: typeof className === "function" ? className : clsx(button_module_default.Button, className),
+		"data-loading": loadingAttr,
+		"data-pill": pill ? "true" : "false",
+		"data-size": size,
+		"data-icon-only": isIconOnly ? "true" : "false",
+		"data-addon-position": addon && !isIconOnly ? addonPosition : void 0,
+		"data-variant": variant,
 		ref,
 		render,
-		size,
-		variant,
-		children: /* @__PURE__ */ jsx(ButtonChromeChildren, {
-			addon,
-			isIconOnly,
-			loading,
-			size,
+		disabled: isDisabled,
+		children: [isIconOnly ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: button_module_default.Content,
+			"data-loading": loadingAttr,
+			children: addon
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [addon && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: button_module_default.Content,
+			"data-loading": loadingAttr,
+			children: addon
+		}), /* @__PURE__ */ jsx("span", {
+			className: button_module_default.Content,
+			"data-loading": loadingAttr,
 			children
-		})
+		})] }), loading && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: button_module_default.SpinnerOverlay,
+			children: /* @__PURE__ */ jsx(Spinner, {
+				variant: "dots",
+				size: spinnerSize
+			})
+		})]
 	});
 };
 //#endregion

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

@@ -30,7 +30,7 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 					render: /* @__PURE__ */ jsx(Surface, {
 						border: "top",
 						render: /* @__PURE__ */ jsx(Stack, {
-							fillChildren: true,
+							expandChildren: true,
 							hAlign: "center"
 						}),
 						color: 1,
@@ -39,7 +39,7 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 						vPadding: ["medium", 0]
 					}),
 					children: [showHandle && /* @__PURE__ */ jsxs(Stack, {
-						fillChildren: true,
+						expandChildren: true,
 						inline: true,
 						direction: "row",
 						vPadding: [0, "medium"],
@@ -50,7 +50,7 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 							/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape })
 						]
 					}), /* @__PURE__ */ jsxs(Stack, {
-						fillChildren: true,
+						expandChildren: true,
 						maxWidth: maxContentWidth,
 						rowGap: "large",
 						className: dialog_module_default.Body,

package/dist/components/fieldset/fieldset.js

@@ -9,7 +9,7 @@ var Fieldset$1 = ({ children, className, description, disabled, error, label, ..
 	className,
 	disabled,
 	children: [(label || description || error) && /* @__PURE__ */ jsxs(Stack, {
-		fillChildren: true,
+		expandChildren: true,
 		vPadding: [0, "small"],
 		rowGap: "small",
 		children: [label && /* @__PURE__ */ jsx(Fieldset.Legend, {

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './avatar-group';
 export * from './badge';
 export * from './beam';
 export * from './bleed';
+export * from './breakpoints';
 export * from './button';
 export * from './checkbox';
 export * from './chip';

package/dist/components/menu/menu-item-row.js

@@ -17,7 +17,7 @@ var MenuItemRow = ({ addon, children, note, trailing }) => /* @__PURE__ */ jsxs(
 	className: menu_module_default.ItemRow,
 	children: [
 		addon && /* @__PURE__ */ jsx(Stack, {
-			fillChildren: true,
+			expandChildren: true,
 			"aria-hidden": "true",
 			"data-grow": "false",
 			"data-shrink": "false",

package/dist/components/menu/menu-link-item.js

@@ -13,7 +13,7 @@ var MenuLinkItem = ({ addon, children, className, note, sentiment, ...otherProps
 	render: /* @__PURE__ */ jsx(Surface, {
 		radius: "auto",
 		render: /* @__PURE__ */ jsx(Stack, {
-			fillChildren: true,
+			expandChildren: true,
 			render: /* @__PURE__ */ jsx("a", {})
 		})
 	}),

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

@@ -39,7 +39,7 @@ var PopoverSheet = ({ unstyled, title, description, children, showCloseButton =
 				}),
 				children: [
 					/* @__PURE__ */ jsxs(Stack, {
-						fillChildren: true,
+						expandChildren: true,
 						hAlign: headerAlign,
 						rowGap: "small",
 						vAlign: "start",

package/dist/components/select/select-option.js

@@ -16,7 +16,7 @@ function SelectOption({ addon, addonAlign = "center", children, className, indic
 		className: clsx(select_module_default.Option, className),
 		render: /* @__PURE__ */ jsx(Surface, { radius: "auto" }),
 		children: /* @__PURE__ */ jsxs(Stack, {
-			fillChildren: true,
+			expandChildren: true,
 			columnGap: "medium",
 			direction: "row",
 			hPadding: "small",
@@ -27,7 +27,7 @@ function SelectOption({ addon, addonAlign = "center", children, className, indic
 				columnGap: "small",
 				vAlign: addonAlign,
 				children: [addon && /* @__PURE__ */ jsx(Stack, {
-					fillChildren: true,
+					expandChildren: true,
 					"aria-hidden": "true",
 					"data-grow": "false",
 					"data-shrink": "false",

package/dist/components/select/select.js

@@ -36,7 +36,7 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 		validationDebounceTime,
 		validationMode,
 		render: /* @__PURE__ */ jsx(Stack, {
-			fillChildren: true,
+			expandChildren: true,
 			rowGap: "small"
 		}),
 		children: [
@@ -56,7 +56,7 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 					disabled,
 					ref,
 					children: /* @__PURE__ */ jsxs(Stack, {
-						fillChildren: true,
+						expandChildren: true,
 						className: select_module_default.Trigger,
 						direction: "row",
 						columnGap: "x-small",

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/inline-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-expand-children=true]>*){flex-grow:var(--vira-flex-grow,1)}&[data-stack-full-width=true]{inline-size:100%}&[data-stack-container=true]{container:stack/inline-size}}}

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

@@ -44,11 +44,23 @@ export type StackProps = React.ComponentPropsWithoutRef<'div'> & {
      */
     wrap?: boolean;
     /**
-     * Makes direct children grow to fill the available space within the stack.
+     * Makes direct children grow along the flex main axis (`flex-grow`).
+     *
+     * Does not set the stack root's own inline size — use `fullWidth` when this stack must
+     * fill its parent width (e.g. centered shell with `maxWidth`).
+     *
+     * @default false
+     */
+    expandChildren?: boolean;
+    /**
+     * Sets `inline-size: 100%` on the stack root so it fills the parent's inline size.
+     *
+     * Use with `maxWidth` under a parent `hAlign="center"` for a fluid, capped, centered shell.
+     * Orthogonal to `expandChildren` (self size vs children grow).
      *
      * @default false
      */
-    fillChildren?: boolean;
+    fullWidth?: boolean;
     /**
      * Sets the gap between flex rows using the Vira space token scale.
      *
@@ -94,7 +106,7 @@ export type StackProps = React.ComponentPropsWithoutRef<'div'> & {
     /**
      * Applies a minimum width value to the stack root.
      *
-     * @default No min width constraint.
+     * @default No minimum width constraint.
      */
     minWidth?: string;
     /**

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

@@ -6,11 +6,13 @@
     "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 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)",
+    "Centered max-width shells: parent `hAlign=\"center\"` + child `fullWidth` + `maxWidth`"
   ],
   "whenNotToUse": [
     "Cases where a single component already owns required flex chrome",
-    "Expecting direct children to stretch without setting `fillChildren`",
+    "Expecting direct children to grow on the main axis without setting `expandChildren`",
+    "Expecting this stack to fill parent inline size under non-stretch alignment without `fullWidth` (or an explicit `inlineSize`)",
     "Using `enableContainer` inside complex masonry-like layouts when you don't need container queries (inline-size containment can change nested layout)"
   ],
   "accessibility": [
@@ -19,10 +21,12 @@
     "Do not use Stack alone to imply grouping; use landmarks or headings where needed"
   ],
   "antiPatterns": [
-    "Assuming Stack stretches direct children by default — pass `fillChildren` when children should grow along the flex main axis",
-    "Putting `data-grow=\"false\"` on an ancestor to control nested fillChildren — set it on the child that should not grow",
+    "Assuming Stack expands direct children by default — pass `expandChildren` when children should grow along the flex main axis",
+    "Using `expandChildren` to fill parent width under `hAlign=\"center\"` — that is `fullWidth` on the child stack (self `inline-size`), not child flex-grow",
+    "Putting `data-grow=\"false\"` on an ancestor to control nested expandChildren — set it on the child that should not grow",
     "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 inline-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",
+    "Combining `fullWidth` with `inline` — prefer block flex when the root must fill parent inline size"
   ],
   "related": ["Surface", "Text", "Button"],
   "properties": {
@@ -36,8 +40,11 @@
       "direction": {
         "description": "Renders children across rows or columns using the chosen flex direction."
       },
-      "fillChildren": {
-        "description": "Makes direct children grow to fill the available space within the stack. Default `false`; opt in when layout needs equal flex growth on direct children. A child opts out with its own `data-grow=\"false\"`; ancestor `data-grow` does not inherit into nested stacks."
+      "expandChildren": {
+        "description": "Makes direct children grow along the flex main axis (`flex-grow`). Default `false`. Orthogonal to `fullWidth` (children grow vs this root's inline size). A child opts out with its own `data-grow=\"false\"`; ancestor `data-grow` does not inherit into nested stacks."
+      },
+      "fullWidth": {
+        "description": "Sets `inline-size: 100%` on the stack root so it fills the parent's inline size. Default `false`. Use with `maxWidth` under a parent `hAlign=\"center\"` for a fluid capped centered shell. Does not grow children — use `expandChildren` for that."
       },
       "hAlign": {
         "description": "Aligns content on the horizontal axis from the consumer point of view."

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 = false, hAlign = "initial", hPadding, inline = false, maxWidth, minWidth, enableContainer, ref, render, rowGap, columnGap, style, vAlign = "initial", vPadding, wrap = false, ...otherProps }) => {
+var Stack = ({ className, direction = "column", expandChildren = false, fullWidth = false, 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),
@@ -28,7 +28,8 @@ var Stack = ({ className, direction = "column", fillChildren = false, hAlign = "
 			...enableContainer && { "data-stack-container": "true" },
 			"data-stack-inline": inline ? "true" : "false",
 			"data-stack-wrap": wrap ? "true" : "false",
-			"data-stack-fill-children": fillChildren ? "true" : "false",
+			"data-stack-expand-children": expandChildren ? "true" : "false",
+			"data-stack-full-width": fullWidth ? "true" : "false",
 			"data-stack-has-padding": hasPadding ? "true" : "false",
 			className: clsx(stack_module_default.Stack, className),
 			style: dynamicStyle

package/dist/components/switch/switch.js

@@ -22,7 +22,7 @@ var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label
 		validationMode,
 		render: /* @__PURE__ */ jsx(Stack, {
 			direction: "row",
-			fillChildren: true,
+			expandChildren: true,
 			columnGap: size === "small" ? "small" : "medium",
 			vAlign: hasTextDescription ? "start" : "center"
 		}),

package/dist/components/tabs/tabs-list.js

@@ -12,21 +12,20 @@ var TabsList = ({ children, className, activateOnFocus = true, ref, ...otherProp
 	render: /* @__PURE__ */ jsx(Surface, {
 		color: 1,
 		border: "all",
-		hPadding: "2x-small",
 		radius: "medium",
 		vPadding: "2x-small"
 	}),
 	ref,
 	...otherProps,
-	children: [/* @__PURE__ */ jsx("div", {
-		className: tabs_module_default.IndicatorLayer,
-		children: /* @__PURE__ */ jsx(TabsIndicator, {})
-	}), /* @__PURE__ */ jsx(Stack, {
-		fillChildren: true,
-		direction: "row",
-		hAlign: "start",
-		vAlign: "center",
-		children
+	children: [/* @__PURE__ */ jsx(TabsIndicator, {}), /* @__PURE__ */ jsx("div", {
+		className: tabs_module_default.Track,
+		children: /* @__PURE__ */ jsx(Stack, {
+			expandChildren: true,
+			direction: "row",
+			hAlign: "start",
+			vAlign: "center",
+			children
+		})
 	})]
 });
 //#endregion

package/dist/components/tabs/tabs.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-tabs-translate-amount{syntax:"<length>";inherits:true;initial-value:10px}.viraui__tabs-module__Tabs_AwbZZ{min-block-size:10rem}.viraui__tabs-module__Viewport_15X1I{display:grid;grid-template-columns:minmax(0,1fr);inline-size:100%}.viraui__tabs-module__Panel_vkCFI{grid-area:1/1;inline-size:100%;opacity:1;translate:0 0;transition:opacity var(--duration-fast) var(--easing-entrance),translate var(--duration-fast) var(--easing-entrance);&[data-ending-style]{pointer-events:none}&[data-ending-style],&[data-starting-style]{opacity:0}&[data-activation-direction=right][data-starting-style]{translate:var(--vui-tabs-translate-amount) 0}&[data-activation-direction=left][data-starting-style],&[data-activation-direction=right][data-ending-style]{translate:calc(var(--vui-tabs-translate-amount) * -1) 0}&[data-activation-direction=left][data-ending-style]{translate:var(--vui-tabs-translate-amount) 0}&[data-activation-direction=none][data-ending-style],&[data-activation-direction=none][data-starting-style]{translate:0 var(--vui-tabs-translate-amount)}&[hidden]{display:none}@media (prefers-reduced-motion:reduce){&[data-ending-style],&[data-starting-style]{opacity:1;translate:0 0}}}}@layer viraui.overrides{.viraui__tabs-module__List_XJorr{position:relative;max-inline-size:100%;min-inline-size:0;overflow-x:auto;overflow-y:clip}.viraui__tabs-module__IndicatorLayer_Ek8o3{position:absolute;inset:0;overflow:clip;pointer-events:none}.viraui__tabs-module__Indicator_UyNUn{position:absolute;pointer-events:none;inset-block-start:var(--active-tab-top);inset-inline-start:var(--active-tab-left);inline-size:var(--active-tab-width);block-size:var(--active-tab-height);transition:inset-inline-start var(--duration-fast) var(--easing-standard),inset-block-start var(--duration-fast) var(--easing-standard),inline-size var(--duration-fast) var(--easing-standard),block-size var(--duration-fast) var(--easing-standard)}.viraui__tabs-module__Item_XZ86Z{position:relative;flex-shrink:0;cursor:pointer;flex-basis:0;transition:none;will-change:auto;&[data-variant]:not(:disabled):active{translate:0 0}&:hover{background:#0000}&[data-disabled]{opacity:.5;background:#0000}&[data-active]{color:var(--global-foreground)}&:focus-visible{border-radius:var(--radius-small);outline-offset:0}}.viraui__tabs-module__Item_XZ86Z[data-active] .viraui__tabs-module__Label_5-8-Y{color:var(--global-foreground)}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-tabs-translate-amount{syntax:"<length>";inherits:true;initial-value:10px}.viraui__tabs-module__Tabs_AwbZZ{min-block-size:10rem}.viraui__tabs-module__Viewport_15X1I{display:grid;grid-template-columns:minmax(0,1fr);inline-size:100%}.viraui__tabs-module__Panel_vkCFI{grid-area:1/1;inline-size:100%;opacity:1;translate:0 0;transition:opacity var(--duration-fast) var(--easing-entrance),translate var(--duration-fast) var(--easing-entrance);&[data-ending-style]{pointer-events:none}&[data-ending-style],&[data-starting-style]{opacity:0}&[data-activation-direction=right][data-starting-style]{translate:var(--vui-tabs-translate-amount) 0}&[data-activation-direction=left][data-starting-style],&[data-activation-direction=right][data-ending-style]{translate:calc(var(--vui-tabs-translate-amount) * -1) 0}&[data-activation-direction=left][data-ending-style]{translate:var(--vui-tabs-translate-amount) 0}&[data-activation-direction=none][data-ending-style],&[data-activation-direction=none][data-starting-style]{translate:0 var(--vui-tabs-translate-amount)}&[hidden]{display:none}@media (prefers-reduced-motion:reduce){&[data-ending-style],&[data-starting-style]{opacity:1;translate:0 0}}}}@layer viraui.overrides{.viraui__tabs-module__List_XJorr{position:relative;max-inline-size:100%;overflow-x:auto;overflow-y:clip}.viraui__tabs-module__Track_Fet4f{display:inline-flex;min-inline-size:100%;box-sizing:border-box;padding-inline:var(--space-2x-small)}.viraui__tabs-module__Indicator_UyNUn{position:absolute;pointer-events:none;inset-block-start:0;inset-inline-start:0;inline-size:var(--active-tab-width);block-size:round(nearest,var(--active-tab-height),2px);translate:var(--active-tab-left) calc(var(--active-tab-top) + (var(--active-tab-height) - round(nearest, var(--active-tab-height), 2px)) / 2);transition:translate var(--duration-fast) var(--easing-standard),inline-size var(--duration-fast) var(--easing-standard),block-size var(--duration-fast) var(--easing-standard)}.viraui__tabs-module__Item_XZ86Z{position:relative;flex-shrink:0;cursor:pointer;flex-basis:0;transition:none;will-change:auto;&[data-variant]:not(:disabled):active{translate:0 0}&:hover{background:#0000}&[data-disabled]{opacity:.5;background:#0000}&[data-active] .viraui__tabs-module__Label_5-8-Y{color:var(--global-foreground)}&:focus-visible{border-radius:var(--radius-small);outline-offset:-2px}}}

package/dist/components/tabs/tabs.module.js

@@ -3,7 +3,7 @@ var Tabs = "viraui__tabs-module__Tabs_AwbZZ";
 var Viewport = "viraui__tabs-module__Viewport_15X1I";
 var Panel = "viraui__tabs-module__Panel_vkCFI";
 var List = "viraui__tabs-module__List_XJorr";
-var IndicatorLayer = "viraui__tabs-module__IndicatorLayer_Ek8o3";
+var Track = "viraui__tabs-module__Track_Fet4f";
 var Indicator = "viraui__tabs-module__Indicator_UyNUn";
 var Item = "viraui__tabs-module__Item_XZ86Z";
 var Label = "viraui__tabs-module__Label_5-8-Y";
@@ -12,10 +12,10 @@ var tabs_module_default = {
 	Viewport,
 	Panel,
 	List,
-	IndicatorLayer,
+	Track,
 	Indicator,
 	Item,
 	Label
 };
 //#endregion
-export { Indicator, IndicatorLayer, Item, Label, List, Panel, Tabs, Viewport, tabs_module_default as default };
+export { Indicator, Item, Label, List, Panel, Tabs, Track, Viewport, tabs_module_default as default };

package/dist/components/textarea/textarea.js

@@ -19,7 +19,7 @@ var Textarea = ({ className, description, dirty, disabled, error, fitContent, in
 	validationDebounceTime,
 	validationMode,
 	render: /* @__PURE__ */ jsx(Stack, {
-		fillChildren: true,
+		expandChildren: true,
 		rowGap: "small"
 	}),
 	children: [

package/dist/components/textfield/textfield.js

@@ -22,7 +22,7 @@ var Textfield = ({ className, description, dirty, disabled, endAddon, error, fit
 	validationMode,
 	"data-fullwidth": fullWidth,
 	render: /* @__PURE__ */ jsx(Stack, {
-		fillChildren: true,
+		expandChildren: true,
 		rowGap: "small"
 	}),
 	children: [

package/dist/index.js

@@ -8,6 +8,8 @@ import { AvatarGroup } from "./components/avatar-group/avatar-group.js";
 import { Badge } from "./components/badge/badge.js";
 import { Beam } from "./components/beam/beam.js";
 import { Bleed } from "./components/bleed/bleed.js";
+import { BreakpointsProvider } from "./components/breakpoints/breakpoints-provider.js";
+import { useBreakpoints } from "./components/breakpoints/use-breakpoints.js";
 import { Spinner } from "./components/spinner/spinner.js";
 import { Button } from "./components/button/button.js";
 import { ButtonLink } from "./components/button/button-link.js";
@@ -66,4 +68,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, Beam, 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 };
+export { Accordion, Annotate, Autocomplete, Avatar, AvatarGroup, Badge, Beam, Bleed, BreakpointsProvider, 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, useBreakpoints };

package/dist/preflight-surface.json

@@ -114,14 +114,14 @@
       "module": "layout",
       "values": ["true", "false"],
       "presence": "optional; omit for default flex growth",
-      "effect": "Affects only the element: true sets --vira-flex-grow: 1 and flex-grow: 1; false sets --vira-flex-grow: 0 and flex-grow: 0. Custom props are registered inherits: false so ancestors do not poison nested Stack fillChildren.",
+      "effect": "Affects only the element: true sets --vira-flex-grow: 1 and flex-grow: 1; false sets --vira-flex-grow: 0 and flex-grow: 0. Custom props are registered inherits: false so ancestors do not poison nested Stack expandChildren.",
       "whenToUse": [
-        "Force grow or opt out on a fillChildren direct child",
+        "Force grow or opt out on an expandChildren direct child",
         "Fixed-width icons, indicators, or trailing slots (false)"
       ],
       "whenNotToUse": [
         "When default flex growth is already correct",
-        "Expecting ancestor data-grow to change nested fillChildren children"
+        "Expecting ancestor data-grow to change nested expandChildren children"
       ],
       "related": ["Stack", "--vira-flex-grow"]
     },
@@ -198,8 +198,8 @@
       "name": "--vira-flex-grow",
       "module": "layout",
       "setBy": "data-grow=\"true\" or data-grow=\"false\"; registered in global-properties.css",
-      "default": "1 (initial-value); inherits: false; Stack fillChildren uses var(--vira-flex-grow, 1)",
-      "purpose": "Local grow signal for Stack fillChildren / child flex defaults; does not inherit so ancestor data-grow cannot poison nested stacks."
+      "default": "1 (initial-value); inherits: false; Stack expandChildren uses var(--vira-flex-grow, 1)",
+      "purpose": "Local grow signal for Stack expandChildren / child flex defaults; does not inherit so ancestor data-grow cannot poison nested stacks."
     },
     {
       "name": "--vira-flex-shrink",
@@ -216,7 +216,7 @@
     "Inventing backdrop-filter CSS instead of data-vibrant when vibrancy is desired",
     "Inventing box-shadow CSS instead of data-elevation when theme-gated shadows are desired",
     "Shipping a new consumer-facing data-* without updating preflight-surface.json and viraui-design/custom-attributes.md",
-    "Relying on ancestor data-grow / data-shrink to control nested Stack fillChildren (props do not inherit)"
+    "Relying on ancestor data-grow / data-shrink to control nested Stack expandChildren (props do not inherit)"
   ],
   "discovery": {
     "consumption": "@viraui/react/consumption.json",

package/dist/preflight.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.preflight{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-mode{syntax:"<color>";initial-value:#000;inherits:true}@property --vira-flex-grow{syntax:"<number>";initial-value:1;inherits:false}@property --vira-flex-shrink{syntax:"<number>";initial-value:1;inherits:false}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b / 0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-mode:contrast-color(var(--global-background));font-size:var(--font-root-size);box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);@container root not style(--effect-corner-shape: initial){corner-shape:var(--corner-shape)}@media (prefers-reduced-motion:reduce){animation:none!important;transition:none!important}}:focus-visible{outline:var(--outline);outline-offset:var(--outline-offset)}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),system-ui,sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums;@container root not style(--effect-holofoil: initial){&:after{content:"";position:fixed;inset:0;z-index:999;background-color:#99ffd8;pointer-events:none;mix-blend-mode:multiply;contain:strict;isolation:isolate;opacity:25%;background-image:radial-gradient(at 79% 56%,#70ade6 0,#0000 50%),radial-gradient(at 61% 80%,#ee909e 0,#0000 50%),radial-gradient(at 0 63%,#fdbc68 0,#0000 50%),radial-gradient(at 6% 50%,#e5cb8a 0,#0000 50%),radial-gradient(at 23% 10%,#e5db8f 0,#0000 50%),radial-gradient(at 36% 91%,#a0eea8 0,#0000 50%),radial-gradient(at 2% 80%,#e3a47d 0,#0000 50%);@container root style(--is-light-mode: white){mix-blend-mode:color;opacity:15%}}}}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg{display:inline-flex;vertical-align:middle;&:not([fill]){fill:currentcolor}}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}}@layer viraui.preflight{@container root not style(--effect-shadows: initial){[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklch(0% 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),#0000 calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation-hover="2"]:hover,[data-elevation-hover="3"]:hover,[data-elevation-hover="4"]:hover,[data-elevation="1"],[data-elevation="2"],[data-elevation="3"],[data-elevation="4"]{box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) var(--shadow-blur-1) oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) var(--shadow-blur-2) oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) var(--shadow-blur-3) oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) var(--shadow-blur-4) oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:2px;--y3:4px;--y4:7px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:1px;--shadow-blur-2:2px;--shadow-blur-3:2px;--shadow-blur-4:3px}[data-elevation-hover="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:0px;--x2:2px;--x3:4px;--x4:7px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:1px;--y2:5px;--y3:11px;--y4:19px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:3px;--shadow-blur-2:5px;--shadow-blur-3:6px;--shadow-blur-4:8px}[data-elevation-hover="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]):hover,[data-elevation="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-blur-3:7px}[data-elevation-hover="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:1px;--x2:5px;--x3:11px;--x4:19px}[data-elevation-hover="2"]:where([data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=right]){--shadow-blur-3:6px}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:4px;--shadow-blur-2:7px;--shadow-blur-3:10px;--shadow-blur-4:12px}[data-elevation-hover="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:2px;--x2:7px;--x3:16px;--x4:29px}[data-elevation-hover="3"]:where([data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=right]){--x2:10px;--x3:22px;--x4:39px;--shadow-blur-1:5px;--shadow-blur-2:10px;--shadow-blur-3:13px;--shadow-blur-4:15px}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:8px;--shadow-blur-2:14px;--shadow-blur-3:20px;--shadow-blur-4:23px}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=left]):hover,[data-elevation="4"]:where([data-elevation-direction=left]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:15px;--x3:33px;--x4:58px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:14px;--x3:33px;--x4:58px}}}@layer viraui.preflight{[data-grow=true]{--vira-flex-grow:1;flex-grow:1}[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=true]{--vira-flex-shrink:1;flex-shrink:1}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/12%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{font-size:1em;font-family:var(--font-family-mono);&:not(:where(pre &)){background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em}}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-mode=dark]{color:var(--global-foreground);color-scheme:dark}[data-mode=light]{color:var(--global-foreground);color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{color:var(--global-foreground);@container root style(--is-light-mode: black){color-scheme:dark}@container root style(--is-light-mode: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--effect-vibrancy: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-mode: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.preflight{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-mode{syntax:"<color>";initial-value:#000;inherits:true}@property --vira-flex-grow{syntax:"<number>";initial-value:1;inherits:false}@property --vira-flex-shrink{syntax:"<number>";initial-value:1;inherits:false}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b / 0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-mode:contrast-color(var(--global-background));font-size:var(--font-root-size);box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);@container root not style(--effect-corner-shape: initial){corner-shape:var(--corner-shape)}@media (prefers-reduced-motion:reduce){animation:none!important;transition:none!important}}:focus-visible{outline:var(--outline);outline-offset:var(--outline-offset)}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),system-ui,sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums;@container root not style(--effect-holofoil: initial){&:after{content:"";position:fixed;inset:0;z-index:999;background-color:#99ffd8;pointer-events:none;mix-blend-mode:multiply;contain:strict;isolation:isolate;opacity:25%;background-image:radial-gradient(at 79% 56%,#70ade6 0,#0000 50%),radial-gradient(at 61% 80%,#ee909e 0,#0000 50%),radial-gradient(at 0 63%,#fdbc68 0,#0000 50%),radial-gradient(at 6% 50%,#e5cb8a 0,#0000 50%),radial-gradient(at 23% 10%,#e5db8f 0,#0000 50%),radial-gradient(at 36% 91%,#a0eea8 0,#0000 50%),radial-gradient(at 2% 80%,#e3a47d 0,#0000 50%);@container root style(--is-light-mode: white){mix-blend-mode:color;opacity:15%}}}}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg{display:inline-flex;vertical-align:middle;&:not([fill]){fill:currentcolor}}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}}@layer viraui.preflight{@container root not style(--effect-shadows: initial){[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklch(0% 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),#0000 calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation-hover="2"]:hover,[data-elevation-hover="3"]:hover,[data-elevation-hover="4"]:hover,[data-elevation="1"],[data-elevation="2"],[data-elevation="3"],[data-elevation="4"]{box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) var(--shadow-blur-1) oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) var(--shadow-blur-2) oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) var(--shadow-blur-3) oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) var(--shadow-blur-4) oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:2px;--y3:4px;--y4:7px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:1px;--shadow-blur-2:2px;--shadow-blur-3:2px;--shadow-blur-4:3px}[data-elevation-hover="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:0px;--x2:2px;--x3:4px;--x4:7px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:1px;--y2:5px;--y3:11px;--y4:19px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:3px;--shadow-blur-2:5px;--shadow-blur-3:6px;--shadow-blur-4:8px}[data-elevation-hover="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]):hover,[data-elevation="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-blur-3:7px}[data-elevation-hover="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:1px;--x2:5px;--x3:11px;--x4:19px}[data-elevation-hover="2"]:where([data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=right]){--shadow-blur-3:6px}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:4px;--shadow-blur-2:7px;--shadow-blur-3:10px;--shadow-blur-4:12px}[data-elevation-hover="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:2px;--x2:7px;--x3:16px;--x4:29px}[data-elevation-hover="3"]:where([data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=right]){--x2:10px;--x3:22px;--x4:39px;--shadow-blur-1:5px;--shadow-blur-2:10px;--shadow-blur-3:13px;--shadow-blur-4:15px}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:8px;--shadow-blur-2:14px;--shadow-blur-3:20px;--shadow-blur-4:23px}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=left]):hover,[data-elevation="4"]:where([data-elevation-direction=left]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:15px;--x3:33px;--x4:58px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:14px;--x3:33px;--x4:58px}}}@layer viraui.preflight{[data-grow=true]{--vira-flex-grow:1;flex-grow:1}[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=true]{--vira-flex-shrink:1;flex-shrink:1}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/12%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{font-size:1em;font-family:var(--font-family-mono);&:not(:where(pre &)){background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em}}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-mode=dark]{--is-light-mode:#fff;color:var(--global-foreground);color-scheme:dark}[data-mode=light]{--is-light-mode:#000;color:var(--global-foreground);color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{color:var(--global-foreground);@container root style(--is-light-mode: black){color-scheme:dark}@container root style(--is-light-mode: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--effect-vibrancy: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-mode: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.2.17",
+  "version": "2026.3.0",
   "private": false,
   "files": [
     "dist"
@@ -28,8 +28,8 @@
   },
   "devDependencies": {
     "@base-ui/react": ">=1.7.0",
-    "@viraui/foundation": "2026.2.17",
-    "@viraui/icons": "2026.0.2",
+    "@viraui/foundation": "2026.3.0",
+    "@viraui/icons": "2026.0.3",
     "@viraui/postcss-config": "2026.0.0",
     "@viraui/tsconfig": "2026.0.0",
     "postcss": "8.5.26",

package/dist/components/button/button-chrome.d.ts

@@ -1,37 +0,0 @@
-import { ReactNode } from 'react';
-import * as React from 'react';
-export type ButtonSize = 'large' | 'medium' | 'small';
-export type ButtonVariant = 'primary' | 'secondary' | 'flat' | 'destructive';
-export type ButtonAddonPosition = 'start' | 'end';
-export declare const spinnerDimensionsBySize: Record<ButtonSize, 'small' | 'medium'>;
-type ButtonChromeRootAttrsParams = {
-    addon?: ReactNode;
-    addonPosition: ButtonAddonPosition;
-    className?: string;
-    isDisabled: boolean;
-    isIconOnly: boolean;
-    loading: boolean;
-    pill: boolean;
-    size: ButtonSize;
-    variant: ButtonVariant;
-};
-export declare function getButtonChromeRootAttrs({ addon, addonPosition, className, isDisabled, isIconOnly, loading, pill, size, variant, }: ButtonChromeRootAttrsParams): {
-    'data-disabled'?: "" | undefined;
-    'aria-busy': true | undefined;
-    className: string;
-    'data-loading': string;
-    'data-pill': string | undefined;
-    'data-size': ButtonSize;
-    'data-icon-only': string | undefined;
-    'data-addon-position': ButtonAddonPosition | undefined;
-    'data-variant': ButtonVariant;
-};
-type ButtonChromeChildrenProps = {
-    addon?: ReactNode;
-    children?: ReactNode;
-    isIconOnly: boolean;
-    loading: boolean;
-    size: ButtonSize;
-};
-export declare const ButtonChromeChildren: React.FC<ButtonChromeChildrenProps>;
-export {};

package/dist/components/button/button-chrome.js

@@ -1,48 +0,0 @@
-import { clsx } from "../../core/clsx.js";
-import { Spinner } from "../spinner/spinner.js";
-import button_module_default from "./button.module.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import "react";
-//#region src/components/button/button-chrome.tsx
-var spinnerDimensionsBySize = {
-	small: "small",
-	medium: "small",
-	large: "medium"
-};
-function getButtonChromeRootAttrs({ addon, addonPosition, className, isDisabled, isIconOnly, loading, pill, size, variant }) {
-	return {
-		"aria-busy": loading || void 0,
-		className: clsx(button_module_default.Button, className),
-		"data-loading": loading ? "true" : "false",
-		"data-pill": pill ? "true" : void 0,
-		"data-size": size,
-		"data-icon-only": isIconOnly ? "true" : void 0,
-		"data-addon-position": addon && !isIconOnly ? addonPosition : void 0,
-		"data-variant": variant,
-		...isDisabled && { "data-disabled": "" }
-	};
-}
-var ButtonChromeChildren = ({ addon, children, isIconOnly, loading, size }) => /* @__PURE__ */ jsxs(Fragment, { children: [isIconOnly ? /* @__PURE__ */ jsx("span", {
-	"aria-hidden": "true",
-	className: button_module_default.Content,
-	"data-loading": loading ? "true" : "false",
-	children: addon
-}) : /* @__PURE__ */ jsxs(Fragment, { children: [addon && /* @__PURE__ */ jsx("span", {
-	"aria-hidden": "true",
-	className: button_module_default.Content,
-	"data-loading": loading ? "true" : "false",
-	children: addon
-}), /* @__PURE__ */ jsx("span", {
-	className: button_module_default.Content,
-	"data-loading": loading ? "true" : "false",
-	children
-})] }), loading && /* @__PURE__ */ jsx("span", {
-	"aria-hidden": "true",
-	className: button_module_default.SpinnerOverlay,
-	children: /* @__PURE__ */ jsx(Spinner, {
-		variant: "dots",
-		size: spinnerDimensionsBySize[size]
-	})
-})] });
-//#endregion
-export { ButtonChromeChildren, getButtonChromeRootAttrs, spinnerDimensionsBySize };

package/dist/internal/chrome-icons/chrome-icons.self-check.d.ts

@@ -1 +0,0 @@
-export {};