@viraui/react 0.0.24 → 0.0.25

package/dist/catalog.json

@@ -116,6 +116,12 @@
       "summary": "Thematic or content divider with horizontal or vertical orientation, token padding, and preset line thickness.",
       "guidePath": "./components/separator/separator.guide.json"
     },
+    {
+      "id": "shimmer",
+      "name": "Shimmer",
+      "summary": "Decorative inline text shimmer that inherits typography and color from a parent text primitive.",
+      "guidePath": "./components/shimmer/shimmer.guide.json"
+    },
     {
       "id": "icon",
       "name": "Icon",
@@ -131,13 +137,13 @@
     {
       "id": "stack",
       "name": "Stack",
-      "summary": "Flex layout primitive for arranging children with token spacing, alignment, and padding.",
+      "summary": "Flex layout primitive for arranging children with token spacing, alignment, and padding; root is a named CSS container query context (`stack`).",
       "guidePath": "./components/stack/stack.guide.json"
     },
     {
       "id": "surface",
       "name": "Surface",
-      "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners.",
+      "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners; root is a named CSS container query context (`surface`).",
       "guidePath": "./components/surface/surface.guide.json"
     },
     {
@@ -146,6 +152,12 @@
       "summary": "Compound segmented tab control with Surface list chrome, moving indicator, and animated panels.",
       "guidePath": "./components/tabs/tabs.guide.json"
     },
+    {
+      "id": "toast",
+      "name": "Toast",
+      "summary": "Transient notification surface with stacked or anchored placement, Banner high-level API, and optional action buttons.",
+      "guidePath": "./components/toast/toast.guide.json"
+    },
     {
       "id": "spinner",
       "name": "Spinner",

package/dist/components/avatar/avatar.css

@@ -1 +1 @@
-.viraui__avatar-module__Avatar_BRuS3{--avatar-size:var(--space-2x-large);--avatar-background:var(--global-contrast);--avatar-foreground:var(--global-foreground);--avatar-radius:var(--radius-infinite);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--avatar-size);block-size:var(--avatar-size);min-inline-size:var(--avatar-size);min-block-size:var(--avatar-size);overflow:hidden;border-radius:var(--avatar-radius);background:var(--avatar-background);color:var(--avatar-foreground);vertical-align:middle;-webkit-user-select:none;user-select:none;container-name:viraui-avatar;container-type:inline-size;&[data-size=x-small]{--avatar-size:var(--space-large)}&[data-size=small]{--avatar-size:var(--space-2x-large)}&[data-size=regular]{--avatar-size:var(--space-wide)}&[data-size=big]{--avatar-size:var(--space-2x-wide)}}.viraui__avatar-module__Image_Q7bHi{inline-size:100%;block-size:100%;display:block;object-fit:cover}.viraui__avatar-module__Label_QASTF{font-size:30cqw}
+.viraui__avatar-module__Avatar_BRuS3{--avatar-size:var(--space-2x-large);--avatar-background:var(--global-contrast);--avatar-foreground:var(--global-foreground);--avatar-radius:var(--radius-medium);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--avatar-size);block-size:var(--avatar-size);min-inline-size:var(--avatar-size);min-block-size:var(--avatar-size);overflow:hidden;border-radius:var(--avatar-radius);background:var(--avatar-background);color:var(--avatar-foreground);vertical-align:middle;-webkit-user-select:none;user-select:none;container-name:viraui-avatar;container-type:inline-size;&[data-size=x-small]{--avatar-size:var(--space-large)}&[data-size=small]{--avatar-size:var(--space-2x-large)}&[data-size=regular]{--avatar-size:var(--space-wide)}&[data-size=big]{--avatar-size:var(--space-2x-wide)}}.viraui__avatar-module__Image_Q7bHi{inline-size:100%;block-size:100%;display:block;object-fit:cover}.viraui__avatar-module__Label_QASTF{font-size:30cqw}

package/dist/components/avatar-group/avatar-group.css

@@ -1 +1,7 @@
-.viraui__avatar-group-module__AvatarGroup_zOrR-{--avatar-size:var(--space-2x-large);--avatar-overlap-distance:var(--space-medium);--avatar-group-gap-size:var(--space-x-small);--avatar-mask-anti-alias-size:0.5px;--avatar-mask-radius:calc((var(--avatar-size) / 2) + var(--avatar-group-gap-size));display:inline-flex;flex-wrap:nowrap;align-items:flex-start;min-inline-size:max-content;vertical-align:middle;&[data-direction=horizontal]{flex-direction:row}&[data-direction=vertical]{flex-direction:column}&[data-size=x-small]{--avatar-size:var(--space-large);--avatar-overlap-distance:var(--space-x-small)}&[data-size=small]{--avatar-size:var(--space-2x-large);--avatar-overlap-distance:var(--space-small)}&[data-size=regular]{--avatar-size:var(--space-wide);--avatar-overlap-distance:var(--space-medium)}&[data-size=big]{--avatar-size:var(--space-2x-wide);--avatar-overlap-distance:var(--space-large)}}.viraui__avatar-group-module__AvatarWrapper_0opqY{position:relative;display:inline-flex;flex:0 0 auto;inline-size:var(--avatar-size);block-size:var(--avatar-size);.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=horizontal] &:not(:first-child){margin-inline-start:calc(var(--avatar-overlap-distance) * -1)}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:first-child){margin-block-start:calc(var(--avatar-overlap-distance) * -1)}.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(ltr)[data-direction=horizontal] &:not(:last-child){mask-image:radial-gradient(circle var(--avatar-mask-radius) at calc(100% + (var(--avatar-size) / 2) - var(--avatar-overlap-distance)) 50%,transparent calc(var(--avatar-mask-radius) - var(--avatar-mask-anti-alias-size)),#000 calc(var(--avatar-mask-radius) + var(--avatar-mask-anti-alias-size)))}.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(rtl)[data-direction=horizontal] &:not(:last-child){mask-image:radial-gradient(circle var(--avatar-mask-radius) at calc((var(--avatar-size) / 2) - var(--avatar-overlap-distance)) 50%,transparent calc(var(--avatar-mask-radius) - var(--avatar-mask-anti-alias-size)),#000 calc(var(--avatar-mask-radius) + var(--avatar-mask-anti-alias-size)))}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:last-child){mask-image:radial-gradient(circle var(--avatar-mask-radius) at 50% calc(100% + (var(--avatar-size) / 2) - var(--avatar-overlap-distance)),transparent calc(var(--avatar-mask-radius) - var(--avatar-mask-anti-alias-size)),#000 calc(var(--avatar-mask-radius) + var(--avatar-mask-anti-alias-size)))}}.viraui__avatar-group-module__OverflowWrapper_bKv6I{inline-size:auto;min-inline-size:var(--avatar-size)}.viraui__avatar-group-module__AvatarGroupItem_Vvlyh{--avatar-radius:100%;corner-shape:unset}.viraui__avatar-group-module__OverflowPill_nMmTD{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--avatar-size);block-size:var(--avatar-size);min-block-size:var(--avatar-size);corner-shape:unset}
+.viraui__avatar-group-module__AvatarGroup_zOrR-{--avatar-size:var(--space-2x-large);--avatar-overlap-distance:var(--space-small);--avatar-group-gap-size:var(--space-x-small);--avatar-group-item-radius:var(--radius-medium);display:inline-flex;flex-wrap:nowrap;align-items:flex-start;min-inline-size:max-content;vertical-align:middle;&[data-direction=vertical]{flex-direction:column}&[data-size=x-small]{--avatar-size:var(--space-large);--avatar-overlap-distance:var(--space-x-small);--avatar-group-gap-size:var(--space-2x-small)}&[data-size=regular]{--avatar-size:var(--space-wide);--avatar-overlap-distance:var(--space-medium);--avatar-group-gap-size:var(--space-x-small)}&[data-size=big]{--avatar-size:var(--space-2x-wide);--avatar-overlap-distance:var(--space-large);--avatar-group-gap-size:var(--space-small)}}.viraui__avatar-group-module__AvatarWrapper_0opqY{position:relative;display:inline-flex;flex:0 0 auto;inline-size:var(--avatar-size);block-size:var(--avatar-size);.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=horizontal] &:not(:first-child){margin-inline-start:calc(var(--avatar-overlap-distance) * -1)}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:first-child){margin-block-start:calc(var(--avatar-overlap-distance) * -1)}--avatar-hole-half:calc((var(--avatar-size) / 2) + var(--avatar-group-gap-size));--avatar-hole-r:calc(min(var(--avatar-group-item-radius), var(--avatar-size) / 2) + var(--avatar-group-gap-size));.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(ltr)[data-direction=horizontal] &:not(:last-child){--avatar-hole-cx:calc(100% + (var(--avatar-size) / 2) - var(--avatar-overlap-distance));--avatar-hole-cy:50%}.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(rtl)[data-direction=horizontal] &:not(:last-child){--avatar-hole-cx:calc(var(--avatar-overlap-distance) - (var(--avatar-size) / 2));--avatar-hole-cy:50%}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:last-child){--avatar-hole-cx:50%;--avatar-hole-cy:calc(100% + (var(--avatar-size) / 2) - var(--avatar-overlap-distance))}.viraui__avatar-group-module__AvatarGroup_zOrR- &:not(:last-child){--avatar-hole-edge:calc((var(--avatar-hole-half) - var(--avatar-hole-r)) * 2);--avatar-hole-corner-inset:calc(var(--avatar-hole-r) * 0.85);@supports (corner-shape:squircle){@container root not style(--corner-shape-enable: initial){--avatar-hole-corner-tr:curve by var(--avatar-hole-r) var(--avatar-hole-r) with var(--avatar-hole-corner-inset) 0px /var(--avatar-hole-r) calc(var(--avatar-hole-r) * 0.15);--avatar-hole-corner-br:curve by calc(var(--avatar-hole-r) * -1) var(--avatar-hole-r) with 0px var(--avatar-hole-corner-inset) /calc(var(--avatar-hole-r) * -0.15) var(--avatar-hole-r);--avatar-hole-corner-bl:curve by calc(var(--avatar-hole-r) * -1) calc(var(--avatar-hole-r) * -1) with calc(var(--avatar-hole-corner-inset) * -1) 0px /calc(var(--avatar-hole-r) * -1) calc(var(--avatar-hole-r) * -0.15);--avatar-hole-corner-tl:curve by var(--avatar-hole-r) calc(var(--avatar-hole-r) * -1) with 0px calc(var(--avatar-hole-corner-inset) * -1) /calc(var(--avatar-hole-r) * 0.15) calc(var(--avatar-hole-r) * -1)}}clip-path:shape(evenodd from 0 0,line to 100% 0,line to 100% 100%,line to 0 100%,close,move to calc(var(--avatar-hole-cx) - var(--avatar-hole-half) + var(--avatar-hole-r)) calc(var(--avatar-hole-cy) - var(--avatar-hole-half)),line by var(--avatar-hole-edge) 0,var(--avatar-hole-corner-tr,arc by var(--avatar-hole-r) var(--avatar-hole-r) of var(--avatar-hole-r) cw),line by 0 var(--avatar-hole-edge),var(
+        --avatar-hole-corner-br,arc by calc(var(--avatar-hole-r) * -1) var(--avatar-hole-r) of var(--avatar-hole-r) cw
+      ),line by calc(var(--avatar-hole-edge) * -1) 0,var(
+        --avatar-hole-corner-bl,arc by calc(var(--avatar-hole-r) * -1) calc(var(--avatar-hole-r) * -1) of var(--avatar-hole-r) cw
+      ),line by 0 calc(var(--avatar-hole-edge) * -1),var(
+        --avatar-hole-corner-tl,arc by var(--avatar-hole-r) calc(var(--avatar-hole-r) * -1) of var(--avatar-hole-r) cw
+      ),close)}}.viraui__avatar-group-module__OverflowWrapper_bKv6I{inline-size:auto}.viraui__avatar-group-module__AvatarGroupItem_Vvlyh{--avatar-radius:var(--avatar-group-item-radius)}.viraui__avatar-group-module__OverflowPill_nMmTD{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--avatar-size);block-size:var(--avatar-size)}

package/dist/components/avatar-group/avatar-group.d.ts

@@ -1,6 +1,5 @@
 import { AvatarProps } from '..';
 import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
-import { ThemeTypes } from '@viraui/foundation/vira/types';
 import type * as React from 'react';
 type AvatarGroupAvatarProps = Omit<AvatarProps, 'size' | 'ref'>;
 /**
@@ -30,12 +29,6 @@ export type AvatarGroupProps = React.ComponentPropsWithRef<'div'> & IntrinsicVir
      * @default 'horizontal'
      */
     direction?: 'horizontal' | 'vertical';
-    /**
-     * Sets the empty visual separation preserved inside the overlap cutout.
-     *
-     * @default 'x-small'
-     */
-    gap?: Extract<ThemeTypes['space'], '2x-small' | 'x-small' | 'small'>;
     /**
      * Limits how many real avatars render before the optional overflow pill is appended.
      *

package/dist/components/avatar-group/avatar-group.js

@@ -2,7 +2,6 @@ import './avatar-group.css';
 import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Avatar } from "../avatar/avatar.js";
-import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
 import avatar_group_module_default from "./avatar-group.module.js";
 import { Stack } from "../stack/stack.js";
 import { Text } from "../text/text.js";
@@ -10,25 +9,19 @@ import { Surface } from "../surface/surface.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/avatar-group/avatar-group.tsx
 var getAvatarKey = (avatar, index) => `${avatar.src ?? "fallback"}-${typeof avatar.fallback === "string" ? avatar.fallback : "node"}-${index}`;
-var AvatarGroup = ({ avatars, className, direction = "horizontal", gap = "x-small", maxVisible, overflowText, ref, size = "small", style, ...otherProps }) => {
+var AvatarGroup = ({ avatars, className, direction = "horizontal", maxVisible, overflowText, ref, size = "small", style, ...otherProps }) => {
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const isOverflowing = typeof maxVisible === "number" && maxVisible > 0 && avatars.length > maxVisible;
 	const hasOverflow = isOverflowing && overflowText !== void 0 && overflowText !== null;
 	const truncatedAvatars = isOverflowing ? avatars.slice(0, maxVisible) : avatars;
-	const dynamicStyle = {
-		"--avatar-group-gap-size": resolveThemeValue(gap, "space", "var(--space-x-small)"),
-		...style
-	};
 	return /* @__PURE__ */ jsxs("div", {
 		...componentProps,
 		...intrinsicAttributes,
 		ref,
 		className: clsx(avatar_group_module_default.AvatarGroup, className),
 		"data-direction": direction,
-		"data-gap": gap,
-		"data-has-overflow": hasOverflow ? "true" : "false",
 		"data-size": size,
-		style: dynamicStyle,
+		style,
 		children: [truncatedAvatars.map((avatar, index) => /* @__PURE__ */ jsx("div", {
 			className: avatar_group_module_default.AvatarWrapper,
 			children: /* @__PURE__ */ jsx(Avatar, {

package/dist/components/button/button.css

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

package/dist/components/button/button.js

@@ -32,7 +32,7 @@ var ButtonRenderRoot = ({ isDisabled, ref, render, rootProps }) => {
 				}
 				onClick?.(event);
 			},
-			...isDisabled ? { "aria-disabled": true } : {}
+			...isDisabled && { "aria-disabled": true }
 		}
 	});
 };

package/dist/components/checkbox/checkbox.css

@@ -1 +1 @@
-.viraui__checkbox-module__Checkbox_3oGip{&:has([required]) .viraui__checkbox-module__Label_n9HL7:after{content:" ＊";color:var(--highlight-red)}}.viraui__checkbox-module__CheckboxRoot_PeyF5{--checkbox-size:var(--space-medium);--checkbox-radius:var(--radius-x-small);--checkbox-background:var(--global-contrast);--checkbox-border-color:transparent;--checkbox-indicator-color:contrast-color(var(--global-primary));position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--checkbox-border-color);inline-size:var(--checkbox-size);block-size:var(--checkbox-size);background:var(--checkbox-background);border-radius:var(--checkbox-radius);&[data-size=regular]{--checkbox-size:var(--space-large);--checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]),&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--checkbox-background:var(--global-primary);--checkbox-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--checkbox-border-color:var(--highlight-red);--checkbox-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--checkbox-background:var(--global-disabled-background);--checkbox-border-color:transparent;--checkbox-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__checkbox-module__Indicator_C-k-l{display:inline-flex;align-items:center;justify-content:center;color:var(--checkbox-indicator-color)}.viraui__checkbox-module__Icon_926Sa{stroke:currentColor}.viraui__checkbox-module__CheckboxRoot_PeyF5:not([data-indeterminate]) .viraui__checkbox-module__MinusIcon_Q57pY,.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__CheckIcon_XqUcs{display:none}.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__MinusIcon_Q57pY{display:inline-flex}
+.viraui__checkbox-module__Checkbox_3oGip{&:has([required]) .viraui__checkbox-module__Label_n9HL7:after{content:" ＊";color:var(--highlight-red)}}.viraui__checkbox-module__CheckboxRoot_PeyF5{--checkbox-size:var(--space-medium);--checkbox-radius:var(--radius-x-small);--checkbox-background:var(--global-contrast);--checkbox-border-color:#0000;--checkbox-indicator-color:contrast-color(var(--global-primary));position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--checkbox-border-color);inline-size:var(--checkbox-size);block-size:var(--checkbox-size);background:var(--checkbox-background);border-radius:var(--checkbox-radius);&[data-size=regular]{--checkbox-size:var(--space-large);--checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]),&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--checkbox-background:var(--global-primary);--checkbox-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--checkbox-border-color:var(--highlight-red);--checkbox-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--checkbox-background:var(--global-disabled-background);--checkbox-border-color:#0000;--checkbox-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__checkbox-module__Indicator_C-k-l{display:inline-flex;align-items:center;justify-content:center;color:var(--checkbox-indicator-color)}.viraui__checkbox-module__Icon_926Sa{stroke:currentColor}.viraui__checkbox-module__CheckboxRoot_PeyF5:not([data-indeterminate]) .viraui__checkbox-module__MinusIcon_Q57pY,.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__CheckIcon_XqUcs{display:none}.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__MinusIcon_Q57pY{display:inline-flex}

package/dist/components/chip/chip.css

@@ -1 +1 @@
-.viraui__chip-module__Chip_2D18T{--chip-background:var(--global-primary);--chip-border-color:transparent;--chip-color:contrast-color(var(--global-primary));--chip-height:var(--space-large);--chip-icon-size:0.9em;--chip-color-bg-opacity:13%;--chip-color-border-opacity:0%;min-block-size:var(--chip-height);block-size:var(--chip-height);border:1px solid var(--chip-border-color);border-radius:var(--radius-infinite);background:var(--chip-background);color:var(--chip-color);font-size:var(--font-scale-body-small);font-variation-settings:"wght" 400;text-decoration:none;white-space:nowrap;overflow:hidden;&[data-variant=primary]{--chip-background:var(--global-primary);--chip-color:contrast-color(var(--global-primary))}&[data-variant=secondary]{--chip-background:var(--global-contrast);--chip-color:var(--base-6)}&[data-variant=outline]{--chip-background:transparent;--chip-border-color:oklab(from var(--global-contrast) l a b/0.2);--chip-color:var(--base-6)}&[data-variant=gray]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-gray)}&[data-variant=slate]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-slate)}&[data-variant=yellow]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-yellow)}&[data-variant=green]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-green)}&[data-variant=blue]{--chip-color:var(--highlight-blue)}&[data-variant=blue],&[data-variant=red]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity))}&[data-variant=red]{--chip-color:var(--highlight-red)}&[data-variant=cyan]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-cyan)}&[data-variant=purple]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-purple)}&[data-variant=indigo]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-indigo)}&[data-variant=acid]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-acid)}&[data-variant=salmon]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-salmon)}&[data-variant=magenta]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-magenta)}}.viraui__chip-module__Content_7mLuL{min-inline-size:0;min-block-size:100%}.viraui__chip-module__IconSlot_9N5vD{display:inline-grid;place-items:center;flex-shrink:0;>svg{inline-size:var(--chip-icon-size);block-size:var(--chip-icon-size)}}.viraui__chip-module__Label_Hdx7l{display:inline-block;min-inline-size:0;overflow:hidden;text-overflow:ellipsis}
+.viraui__chip-module__Chip_2D18T{--chip-background:var(--global-primary);--chip-border-color:#0000;--chip-color:contrast-color(var(--global-primary));--chip-height:var(--space-large);--chip-icon-size:0.9em;--chip-color-bg-opacity:13%;--chip-color-border-opacity:0%;min-block-size:var(--chip-height);block-size:var(--chip-height);border:1px solid var(--chip-border-color);border-radius:var(--radius-infinite);background:var(--chip-background);color:var(--chip-color);font-size:var(--font-scale-body-small);font-variation-settings:"wght" 400;text-decoration:none;white-space:nowrap;overflow:hidden;&[data-variant=primary]{--chip-background:var(--global-primary);--chip-color:contrast-color(var(--global-primary))}&[data-variant=secondary]{--chip-background:var(--global-contrast);--chip-color:var(--base-6)}&[data-variant=outline]{--chip-background:#0000;--chip-border-color:oklab(from var(--global-contrast) l a b/0.2);--chip-color:var(--base-6)}&[data-variant=gray]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-gray)}&[data-variant=slate]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-slate)}&[data-variant=yellow]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-yellow)}&[data-variant=green]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-green)}&[data-variant=blue]{--chip-color:var(--highlight-blue)}&[data-variant=blue],&[data-variant=red]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity))}&[data-variant=red]{--chip-color:var(--highlight-red)}&[data-variant=cyan]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-cyan)}&[data-variant=purple]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-purple)}&[data-variant=indigo]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-indigo)}&[data-variant=acid]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-acid)}&[data-variant=salmon]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-salmon)}&[data-variant=magenta]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-magenta)}}.viraui__chip-module__Content_7mLuL{min-inline-size:0;min-block-size:100%}.viraui__chip-module__IconSlot_9N5vD{display:inline-grid;place-items:center;flex-shrink:0;>svg{inline-size:var(--chip-icon-size);block-size:var(--chip-icon-size)}}.viraui__chip-module__Label_Hdx7l{display:inline-block;min-inline-size:0;overflow:hidden;text-overflow:ellipsis}

package/dist/components/fieldset/fieldset.js

@@ -5,14 +5,13 @@ import { FieldLabel } from "../basic-input/field-label.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fieldset } from "@base-ui/react";
 //#region src/components/fieldset/fieldset.tsx
-var Fieldset$1 = ({ children, className, description, disabled, error, label, render, ...fieldsetRootProps }) => {
+var Fieldset$1 = ({ children, className, description, disabled, error, label, ...fieldsetRootProps }) => {
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(fieldsetRootProps);
 	return /* @__PURE__ */ jsxs(Fieldset.Root, {
 		...intrinsicAttributes,
 		...componentProps,
 		className,
 		disabled,
-		render,
 		children: [/* @__PURE__ */ jsxs(Stack, {
 			vPadding: [0, "small"],
 			rowGap: "small",

package/dist/components/index.d.ts

@@ -17,11 +17,13 @@ export * from './fieldset';
 export * from './radio';
 export * from './select';
 export * from './separator';
+export * from './shimmer';
 export * from './icon';
 export * from './skeleton';
 export * from './stack';
 export * from './surface';
 export * from './tabs';
+export * from './toast';
 export * from './spinner';
 export * from './static-noise';
 export * from './progressive-blur';

package/dist/components/linear-progress/linear-progress.css

@@ -1 +1 @@
-.viraui__linear-progress-module__LinearProgress_-KN0j{--linear-progress-track-size:var(--space-x-small);--linear-progress-track-background:var(--global-contrast);--linear-progress-indicator-color:var(--global-primary);& .viraui__linear-progress-module__Track_qUz8P{position:relative;overflow:hidden;block-size:var(--linear-progress-track-size);background:var(--linear-progress-track-background);border-radius:var(--radius-infinite)}& .viraui__linear-progress-module__Indicator_maaZF{block-size:100%;background:var(--linear-progress-indicator-color);border-radius:inherit;&[data-indeterminate]{position:absolute;inset:0;inline-size:100%;background:transparent;&:before{position:absolute;inset-block:0;inline-size:40%;background:var(--linear-progress-indicator-color);border-radius:inherit;animation:viraui__linear-progress-module__linear-progress-indeterminate_g0cSO 1.4s var(--easing-standard) infinite;content:""}}}}@keyframes viraui__linear-progress-module__linear-progress-indeterminate_g0cSO{0%{transform:translateX(-120%)}to{transform:translateX(260%)}}
+.viraui__linear-progress-module__LinearProgress_-KN0j{--linear-progress-track-size:var(--space-x-small);--linear-progress-track-background:var(--global-contrast);--linear-progress-indicator-color:var(--global-primary);& .viraui__linear-progress-module__Track_qUz8P{position:relative;overflow:hidden;block-size:var(--linear-progress-track-size);background:var(--linear-progress-track-background);border-radius:var(--radius-infinite)}& .viraui__linear-progress-module__Indicator_maaZF{block-size:100%;background:var(--linear-progress-indicator-color);border-radius:inherit;&[data-indeterminate]{position:absolute;inset:0;inline-size:100%;background:#0000;&:before{position:absolute;inset-block:0;inline-size:40%;background:var(--linear-progress-indicator-color);border-radius:inherit;animation:viraui__linear-progress-module__linear-progress-indeterminate_g0cSO 1.4s var(--easing-standard) infinite;content:""}}}}@keyframes viraui__linear-progress-module__linear-progress-indeterminate_g0cSO{0%{transform:translateX(-120%)}to{transform:translateX(260%)}}

package/dist/components/radio/radio.css

@@ -1 +1 @@
-.viraui__radio-module__RadioRoot_3uvvn{--radio-size:var(--space-medium);--radio-background:var(--global-contrast);--radio-border-color:transparent;--radio-indicator-color:contrast-color(var(--global-primary));--radio-disk-size:calc(var(--radio-size) / 2);position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--radio-border-color);inline-size:var(--radio-size);block-size:var(--radio-size);background:var(--radio-background);border-radius:100000px;corner-shape:unset;&[data-size=regular]{--radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--radio-background:var(--global-primary);--radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--radio-border-color:var(--highlight-red);--radio-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--radio-background:var(--global-disabled-background);--radio-border-color:transparent;--radio-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__radio-module__Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--radio-indicator-color)}.viraui__radio-module__Disk_pV-Q1{inline-size:var(--radio-disk-size);aspect-ratio:1/1;border-radius:100000px;corner-shape:unset;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}
+.viraui__radio-module__RadioRoot_3uvvn{--radio-size:var(--space-medium);--radio-background:var(--global-contrast);--radio-border-color:#0000;--radio-indicator-color:contrast-color(var(--global-primary));--radio-disk-size:calc(var(--radio-size) / 2);position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--radio-border-color);inline-size:var(--radio-size);block-size:var(--radio-size);background:var(--radio-background);border-radius:100000px;corner-shape:unset;&[data-size=regular]{--radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--radio-background:var(--global-primary);--radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--radio-border-color:var(--highlight-red);--radio-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--radio-background:var(--global-disabled-background);--radio-border-color:#0000;--radio-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__radio-module__Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--radio-indicator-color)}.viraui__radio-module__Disk_pV-Q1{inline-size:var(--radio-disk-size);aspect-ratio:1/1;border-radius:100000px;corner-shape:unset;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}

package/dist/components/select/select.css

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

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

@@ -0,0 +1,2 @@
+export { Shimmer } from './shimmer';
+export type { ShimmerProps } from './shimmer';

package/dist/components/shimmer/shimmer.css

@@ -0,0 +1 @@
+.viraui__shimmer-module__Shimmer_1k-ZM{--shimmer-duration:var(--duration-slowest);--shimmer-spread:calc(3ch + var(--space-2x-large));--shimmer-angle:0deg;--shimmer-base:currentcolor;--shimmer-highlight:oklch(from var(--shimmer-base) min(calc(l + 0.35),1) c h);background-image:linear-gradient(calc(90deg + var(--shimmer-angle)),var(--shimmer-base) calc(50% - var(--shimmer-spread)),color-mix(in oklch,var(--shimmer-highlight),var(--shimmer-base) 50%) calc(50% - var(--shimmer-spread) * .5),var(--shimmer-highlight) 50%,color-mix(in oklch,var(--shimmer-highlight),var(--shimmer-base) 50%) calc(50% + var(--shimmer-spread) * .5),var(--shimmer-base) calc(50% + var(--shimmer-spread)));background-repeat:no-repeat;background-size:calc(200% + var(--shimmer-spread) * 2) 100%;background-position:0 0;background-clip:text;-webkit-text-fill-color:#0000;animation:viraui__shimmer-module__shimmer-slide_V1znC var(--shimmer-duration) linear infinite;&::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));-webkit-text-fill-color:contrast-color(var(--global-primary));background-image:none;background-clip:initial;text-shadow:none}@media (prefers-reduced-motion:reduce){animation:none;background-image:none;-webkit-text-fill-color:currentcolor}}@keyframes viraui__shimmer-module__shimmer-slide_V1znC{0%{background-position:0 0}to{background-position:100% 0}}

package/dist/components/shimmer/shimmer.d.ts

@@ -0,0 +1,43 @@
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type * as React from 'react';
+/**
+ * Public Shimmer props.
+ *
+ * Includes standard `span` attributes such as `children`, `id`, `title`, and event handlers,
+ * plus Vira-owned shimmer tuning controls.
+ *
+ * @default Native span pass-through props keep React defaults.
+ */
+export type ShimmerProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraProps & {
+    /**
+     * Sets the shimmer sweep duration using any valid CSS time string.
+     *
+     * @default The CSS duration is `var(--duration-slowest)`.
+     */
+    duration?: string;
+    /**
+     * Sets the shimmer highlight spread using any valid CSS length string.
+     *
+     * @default The CSS spread is `calc(3ch + var(--space-2x-large))`.
+     */
+    spread?: string;
+    /**
+     * Sets the shimmer gradient angle offset using any valid CSS angle string.
+     *
+     * @default The CSS angle offset is `0deg`.
+     */
+    angle?: string;
+    /**
+     * Overrides the shimmer highlight color when relative base lightness tuning is not used.
+     *
+     * @default The highlight increases base `currentColor` lightness.
+     */
+    highlightColor?: string;
+    /**
+     * Ref forwarded to the rendered shimmer root element.
+     *
+     * @default No ref is attached.
+     */
+    ref?: React.Ref<HTMLSpanElement>;
+};
+export declare const Shimmer: React.FC<ShimmerProps>;

package/dist/components/shimmer/shimmer.guide.json

@@ -0,0 +1,25 @@
+{
+  "name": "Shimmer",
+  "summary": "Decorative inline text shimmer that inherits typography and color from a parent text primitive.",
+  "whenToUse": [
+    "Loading placeholder copy inside Text or Title",
+    "Animated text shimmer while awaiting async content",
+    "Muted loading labels that keep the final text dimensions"
+  ],
+  "whenNotToUse": [
+    "Block or fixed-dimension placeholders without text content",
+    "Standalone accessible loading status without a surrounding aria-busy region",
+    "Replacing Skeleton for non-text layout placeholders"
+  ],
+  "accessibility": [
+    "Shimmer renders real text content — do not mark it aria-hidden",
+    "Announce loading on the surrounding region with aria-busy or live text",
+    "Reduced motion disables the sweep and restores normal text rendering"
+  ],
+  "antiPatterns": [
+    "Putting aria-busy on Shimmer instead of the surrounding loading region",
+    "Using Shimmer without children text content",
+    "Using Shimmer for block placeholders better served by Skeleton"
+  ],
+  "related": ["Text", "Title", "Skeleton"]
+}

package/dist/components/shimmer/shimmer.js

@@ -0,0 +1,25 @@
+import './shimmer.css';
+import { clsx } from "../../core/clsx.js";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import shimmer_module_default from "./shimmer.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/shimmer/shimmer.tsx
+var Shimmer = ({ angle, className, duration, highlightColor, ref, spread, style, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const dynamicStyle = {
+		...duration && { "--shimmer-duration": duration },
+		...spread && { "--shimmer-spread": spread },
+		...angle && { "--shimmer-angle": angle },
+		...highlightColor && { "--shimmer-highlight": highlightColor },
+		...style
+	};
+	return /* @__PURE__ */ jsx("span", {
+		...componentProps,
+		...intrinsicAttributes,
+		ref,
+		className: clsx(shimmer_module_default.Shimmer, className),
+		style: dynamicStyle
+	});
+};
+//#endregion
+export { Shimmer };

package/dist/components/shimmer/shimmer.module.js

@@ -0,0 +1,6 @@
+var shimmer_module_default = {
+	Shimmer: "viraui__shimmer-module__Shimmer_1k-ZM",
+	"shimmer-slide": "viraui__shimmer-module__shimmer-slide_V1znC"
+};
+//#endregion
+export { shimmer_module_default as default };

package/dist/components/skeleton/skeleton.js

@@ -9,10 +9,10 @@ var Skeleton = ({ className, height, minHeight, minWidth, radius, ref, style, wi
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
 		"--skeleton-border-radius": resolveThemeValue(radius, "radius", "var(--radius-small)"),
-		...width ? { "--skeleton-inline-size": width } : {},
-		...height ? { "--skeleton-block-size": height } : {},
-		...minWidth ? { "--skeleton-min-inline-size": minWidth } : {},
-		...minHeight ? { "--skeleton-min-block-size": minHeight } : {},
+		...width && { "--skeleton-inline-size": width },
+		...height && { "--skeleton-block-size": height },
+		...minWidth && { "--skeleton-min-inline-size": minWidth },
+		...minHeight && { "--skeleton-min-block-size": minHeight },
 		...style
 	};
 	return /* @__PURE__ */ jsx("span", {

package/dist/components/slider/slider.css

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

package/dist/components/slider/slider.js

@@ -44,7 +44,7 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
 			render: /* @__PURE__ */ jsx(Stack, {
 				direction: "column",
 				fillChildren: false,
-				rowGap: "small",
+				rowGap: "medium",
 				columnGap: "x-small",
 				vAlign: isVertical ? "stretch" : "center",
 				hAlign: isVertical ? "center" : "initial"

package/dist/components/stack/stack.css

@@ -1 +1 @@
-.viraui__stack-module__Stack_NR-Ey{--stack-row-gap:0;--stack-column-gap:0;--stack-h-align:initial;--stack-v-align:initial;--stack-padding-inline-start:0;--stack-padding-inline-end:0;--stack-padding-block-start:0;--stack-padding-block-end:0;display:flex;gap:var(--stack-row-gap) var(--stack-column-gap);flex-direction:column;align-items:var(--stack-h-align);justify-content:var(--stack-v-align);max-inline-size:var(--stack-max-width,none);min-inline-size:var(--stack-min-width,none);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--stack-v-align);justify-content:var(--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(--stack-padding-block-start) var(--stack-padding-inline-end) var(--stack-padding-block-end) var(--stack-padding-inline-start)}:where(&[data-stack-fill-children=true]>*){flex-grow:var(--vira-flex-grow,1)}}
+.viraui__stack-module__Stack_NR-Ey{--stack-row-gap:0;--stack-column-gap:0;--stack-h-align:initial;--stack-v-align:initial;--stack-padding-inline-start:0;--stack-padding-inline-end:0;--stack-padding-block-start:0;--stack-padding-block-end:0;container:stack/inline-size block-size;display:flex;gap:var(--stack-row-gap) var(--stack-column-gap);flex-direction:column;align-items:var(--stack-h-align);justify-content:var(--stack-v-align);max-inline-size:var(--stack-max-width,none);min-inline-size:var(--stack-min-width,none);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--stack-v-align);justify-content:var(--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(--stack-padding-block-start) var(--stack-padding-inline-end) var(--stack-padding-block-end) var(--stack-padding-inline-start)}:where(&[data-stack-fill-children=true]>*){flex-grow:var(--vira-flex-grow,1)}}

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

@@ -1,6 +1,6 @@
 import { useRender } from '@base-ui/react/use-render';
-import { ThemeTypes } from '@viraui/foundation/vira/types';
 import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
 import type * as React from 'react';
 type StackAlignment = 'start' | 'center' | 'end' | 'stretch' | 'initial' | 'space-between' | 'space-around' | 'space-evenly';
 type StackSpace = ThemeTypes['space'];

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

@@ -1,10 +1,11 @@
 {
   "name": "Stack",
-  "summary": "Flex layout primitive for arranging children with token spacing, alignment, and padding.",
+  "summary": "Flex layout primitive for arranging children with token spacing, alignment, and padding; root is a named CSS container query context (`stack`).",
   "whenToUse": [
     "Column or row layouts with token gap and alignment",
     "Composing screens and component internals without custom flex CSS",
-    "Custom native root through render while keeping data-stack hooks"
+    "Custom native root through render while keeping data-stack hooks",
+    "Style descendants with @container stack queries when layout, gap, or typography should respond to the Stack's own inline-size and block-size instead of the viewport"
   ],
   "whenNotToUse": [
     "Cases where a single component already owns required flex chrome",
@@ -15,6 +16,9 @@
     "Keep reading order aligned with visual order when using direction and wrap",
     "Do not use Stack alone to imply grouping; use landmarks or headings where needed"
   ],
-  "antiPatterns": ["Re-declaring primitive flex container rules in app CSS when Stack can own the layout"],
+  "antiPatterns": [
+    "Re-declaring primitive flex container rules in app CSS when Stack can own the layout",
+    "Using viewport media queries when @container stack queries against the rendered Stack size would match the design intent"
+  ],
   "related": ["Surface", "Text", "Button"]
 }

package/dist/components/stack/stack.js

@@ -14,8 +14,8 @@ var Stack = ({ className, direction = "column", fillChildren = true, hAlign = "i
 		"--stack-column-gap": resolveThemeValue(columnGap, "space", 0),
 		"--stack-h-align": hAlign,
 		"--stack-v-align": vAlign,
-		...maxWidth ? { "--stack-max-width": maxWidth } : {},
-		...minWidth ? { "--stack-min-width": minWidth } : {},
+		...maxWidth && { "--stack-max-width": maxWidth },
+		...minWidth && { "--stack-min-width": minWidth },
 		...resolveAxisPadding(hPadding, "--stack-padding-inline-start", "--stack-padding-inline-end"),
 		...resolveAxisPadding(vPadding, "--stack-padding-block-start", "--stack-padding-block-end"),
 		...style

package/dist/components/surface/surface.css

@@ -1 +1 @@
-.viraui__surface-module__Surface_slEYq{--surface-border-radius:0;--surface-border-radius-top-left:var(--surface-border-radius);--surface-border-radius-top-right:var(--surface-border-radius);--surface-border-radius-bottom-right:var(--surface-border-radius);--surface-border-radius-bottom-left:var(--surface-border-radius);--surface-padding-inline-start:0;--surface-padding-inline-end:0;--surface-padding-block-start:0;--surface-padding-block-end:0;--surface-background-hover:var(--surface-background);--surface-overflow:visible;--surface-vibrancy-background:var(--is-vibrancy-active) oklab(from var(--surface-background) l a b/80%);position:relative;overflow:var(--surface-overflow);box-sizing:border-box;background:var(--surface-vibrancy-background,var(--surface-background,transparent));border-radius:var(--surface-border-radius-top-left) var(--surface-border-radius-top-right) var(--surface-border-radius-bottom-right) var(--surface-border-radius-bottom-left);border:0;&[data-surface-radius=auto]{--surface-border-radius-top-left:0;--surface-border-radius-top-right:0;--surface-border-radius-bottom-right:0;--surface-border-radius-bottom-left:0}&[data-surface-has-padding=true]{padding:var(--surface-padding-block-start) var(--surface-padding-inline-end) var(--surface-padding-block-end) var(--surface-padding-inline-start)}&[data-surface-border]{border-style:var(--surface-border-style,solid);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--surface-background-hover)}}}
+.viraui__surface-module__Surface_slEYq{--surface-border-radius:0;--surface-border-radius-top-left:var(--surface-border-radius);--surface-border-radius-top-right:var(--surface-border-radius);--surface-border-radius-bottom-right:var(--surface-border-radius);--surface-border-radius-bottom-left:var(--surface-border-radius);--surface-padding-inline-start:0;--surface-padding-inline-end:0;--surface-padding-block-start:0;--surface-padding-block-end:0;--surface-background-hover:var(--surface-background);--surface-overflow:visible;container:surface/inline-size block-size;position:relative;overflow:var(--surface-overflow);box-sizing:border-box;background:var(--surface-background,#0000);border-radius:var(--surface-border-radius-top-left) var(--surface-border-radius-top-right) var(--surface-border-radius-bottom-right) var(--surface-border-radius-bottom-left);border:0;@container root not style(--vibrancy-enable: initial){&[data-vibrant]{background:oklab(from var(--surface-background) l a b/80%)}}&[data-surface-radius=auto]{--surface-border-radius-top-left:0;--surface-border-radius-top-right:0;--surface-border-radius-bottom-right:0;--surface-border-radius-bottom-left:0}&[data-surface-has-padding=true]{padding:var(--surface-padding-block-start) var(--surface-padding-inline-end) var(--surface-padding-block-end) var(--surface-padding-inline-start)}&[data-surface-border]{border-style:var(--surface-border-style,solid);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--surface-background-hover)}}}

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

@@ -1,6 +1,6 @@
 {
   "name": "Surface",
-  "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners.",
+  "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners; root is a named CSS container query context (`surface`).",
   "whenToUse": [
     "Group content with base-level background and contrast border",
     "Popup or card chrome with optional hover background",
@@ -9,7 +9,8 @@
     "Set radius to a four-value tuple [top-left, top-right, bottom-right, bottom-left] when corners need different token radii",
     "Set radius=\"auto\" on a nested Surface when its parent Surface has a radius so each corner subtracts the nearest ancestor padding and stays concentric",
     "Stack nested auto-radius Surfaces recursively; context still resolves through wrapper layout such as Stack",
-    "Set overflow=\"hidden\" (or scroll/auto) when Surface must clip or scroll inner content with radius or padding"
+    "Set overflow=\"hidden\" (or scroll/auto) when Surface must clip or scroll inner content with radius or padding",
+    "Style descendants with @container surface queries when layout or typography should respond to the Surface's own inline-size and block-size instead of the viewport"
   ],
   "whenNotToUse": [
     "Interactive control semantics without an appropriate render root",
@@ -25,7 +26,8 @@
     "Overwriting transition shorthand without composing box-shadow when data-elevation is present",
     "Assuming hoverColor applies on touch devices",
     "Reusing the parent token radius on nested Surfaces instead of radius=\"auto\" when concentric corners are required",
-    "Expecting radius=\"auto\" to inherit a token when the nearest ancestor Surface has no radius set"
+    "Expecting radius=\"auto\" to inherit a token when the nearest ancestor Surface has no radius set",
+    "Using viewport media queries when @container surface queries against the rendered Surface size would match the design intent"
   ],
   "related": ["Elevator", "Stack"]
 }

package/dist/components/surface/surface.js

@@ -33,8 +33,8 @@ var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hove
 	});
 	const dynamicStyle = {
 		"--surface-background": toSurfaceColor(color ?? "none"),
-		...hasHoverColor ? { "--surface-background-hover": toSurfaceColor(hoverColor) } : {},
-		...border ? { "--surface-border-style": borderStyle } : {},
+		...hasHoverColor && { "--surface-background-hover": toSurfaceColor(hoverColor) },
+		...border && { "--surface-border-style": borderStyle },
 		"--surface-overflow": overflow,
 		...radiusStyle,
 		...resolveAxisPadding(hPadding, "--surface-padding-inline-start", "--surface-padding-inline-end"),
@@ -48,8 +48,8 @@ var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hove
 		props: {
 			...componentProps,
 			...intrinsicAttributes,
-			...border ? { "data-surface-border": border } : {},
-			...hasAutoRadius ? { "data-surface-radius": "auto" } : {},
+			...border && { "data-surface-border": border },
+			...hasAutoRadius && { "data-surface-radius": "auto" },
 			"data-surface-has-hover-color": hasHoverColor ? "true" : "false",
 			"data-surface-has-padding": hasPadding ? "true" : "false",
 			className: clsx(surface_module_default.Surface, className),

package/dist/components/tabs/tabs.css

@@ -1 +1 @@
-.viraui__tabs-module__Tabs_AwbZZ{--tabs-translate-amount:10px;min-block-size:10rem}.viraui__tabs-module__Viewport_15X1I{display:grid;grid-template-columns:minmax(0,1fr);inline-size:100%}.viraui__tabs-module__List_XJorr{position:relative;overflow-x:auto}.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,&[data-disabled]{background:transparent}&[data-disabled]{opacity:.5}&[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)}.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(--tabs-translate-amount) 0}&[data-activation-direction=left][data-starting-style],&[data-activation-direction=right][data-ending-style]{translate:calc(var(--tabs-translate-amount) * -1) 0}&[data-activation-direction=left][data-ending-style]{translate:var(--tabs-translate-amount) 0}&[data-activation-direction=none][data-ending-style],&[data-activation-direction=none][data-starting-style]{translate:0 var(--tabs-translate-amount)}&[hidden]{display:none}@media (prefers-reduced-motion:reduce){transition:none;&[data-ending-style],&[data-starting-style]{opacity:1;translate:0 0}}}
+.viraui__tabs-module__Tabs_AwbZZ{--tabs-translate-amount:10px;min-block-size:10rem}.viraui__tabs-module__Viewport_15X1I{display:grid;grid-template-columns:minmax(0,1fr);inline-size:100%}.viraui__tabs-module__List_XJorr{position:relative;overflow-x:auto}.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)}.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(--tabs-translate-amount) 0}&[data-activation-direction=left][data-starting-style],&[data-activation-direction=right][data-ending-style]{translate:calc(var(--tabs-translate-amount) * -1) 0}&[data-activation-direction=left][data-ending-style]{translate:var(--tabs-translate-amount) 0}&[data-activation-direction=none][data-ending-style],&[data-activation-direction=none][data-starting-style]{translate:0 var(--tabs-translate-amount)}&[hidden]{display:none}@media (prefers-reduced-motion:reduce){transition:none;&[data-ending-style],&[data-starting-style]{opacity:1;translate:0 0}}}

package/dist/components/text/text.js

@@ -15,7 +15,7 @@ var Text = ({ align = "start", balanced = false, selection = true, className, co
 		"--text-white-space": whiteSpace,
 		"--text-trim": trim ? `trim-${trim}` : "initial",
 		"--text-trim-type": trim ? trimType : "initial",
-		...typeof weight === "number" ? { "--text-font-weight": weight } : {},
+		...typeof weight === "number" && { "--text-font-weight": weight },
 		"--text-font-width": fontWidth,
 		"--text-font-opsz": opticalSize,
 		...resolveAxisPadding(hPadding, "--text-padding-inline-start", "--text-padding-inline-end"),

package/dist/components/textarea/textarea.css

@@ -1 +1 @@
-.viraui__textarea-module__Textarea_mtOUG{--textarea-min-block-size:calc(var(--space-x-large) * 2);--textarea-padding-block:var(--space-small);--textarea-input-border-radius:var(--radius-small);--field-label-padding-inline:calc(var(--textarea-input-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textarea-module__Label_5dOso:after{content:" ＊";color:var(--highlight-red)}}.viraui__textarea-module__CustomBasicInput_Ce7yA{--basic-input-border-radius:var(--textarea-input-border-radius);border:1px solid var(--global-contrast);min-block-size:var(--textarea-min-block-size);padding-block:var(--textarea-padding-block);line-height:1.4;resize:none;&[data-resize=vertical]{resize:vertical}&[data-resize=both]{resize:both}&[data-invalid]{border-color:var(--highlight-red)}&:disabled,&[data-disabled]{border-color:transparent}}.viraui__textarea-module__Description_er3zI{padding-inline:calc(var(--textarea-input-border-radius) / 2)}
+.viraui__textarea-module__Textarea_mtOUG{--textarea-min-block-size:calc(var(--space-x-large) * 2);--textarea-padding-block:var(--space-small);--textarea-input-border-radius:var(--radius-small);--field-label-padding-inline:calc(var(--textarea-input-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textarea-module__Label_5dOso:after{content:" ＊";color:var(--highlight-red)}}.viraui__textarea-module__CustomBasicInput_Ce7yA{--basic-input-border-radius:var(--textarea-input-border-radius);border:1px solid var(--global-contrast);min-block-size:var(--textarea-min-block-size);padding-block:var(--textarea-padding-block);line-height:1.4;resize:none;&[data-resize=vertical]{resize:vertical}&[data-resize=both]{resize:both}&[data-invalid]{border-color:var(--highlight-red)}&:disabled,&[data-disabled]{border-color:#0000}}.viraui__textarea-module__Description_er3zI{padding-inline:calc(var(--textarea-input-border-radius) / 2)}

package/dist/components/textfield/textfield.css

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

package/dist/components/title/title.js

@@ -15,7 +15,7 @@ var Title = ({ align = "start", balanced = false, selection = true, className, c
 		"--title-white-space": whiteSpace,
 		"--title-trim": trim ? `trim-${trim}` : "initial",
 		"--title-trim-type": trim ? trimType : "initial",
-		...typeof weight === "number" ? { "--title-font-weight": weight } : {},
+		...typeof weight === "number" && { "--title-font-weight": weight },
 		"--title-font-width": fontWidth,
 		"--title-font-opsz": opticalSize,
 		...resolveAxisPadding(hPadding, "--title-padding-inline-start", "--title-padding-inline-end"),

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

@@ -0,0 +1,2 @@
+export { Toast } from './toast';
+export type { ToastActionProps, ToastBannerProps, ToastObject, ToastViewportProps } from './toast';

package/dist/components/toast/toast-action.d.ts

@@ -0,0 +1,9 @@
+import { ToastAction as ToastActionNamespace } from '@base-ui/react/toast';
+import type * as React from 'react';
+/**
+ * Public Toast.Action props.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type ToastActionProps = ToastActionNamespace.Props;
+export declare const ToastAction: React.FC<ToastActionProps>;

package/dist/components/toast/toast-action.js

@@ -0,0 +1,10 @@
+import { Button } from "../button/button.js";
+import { jsx } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/toast/toast-action.tsx
+var ToastAction = ({ render, ...props }) => /* @__PURE__ */ jsx(Toast.Action, {
+	render: render ?? /* @__PURE__ */ jsx(Button, { variant: "secondary" }),
+	...props
+});
+//#endregion
+export { ToastAction };

package/dist/components/toast/toast-banner.d.ts

@@ -0,0 +1,59 @@
+import { ToastRoot as ToastRootNamespace } from '@base-ui/react/toast';
+import { ToastActionProps } from './toast-action';
+import type * as React from 'react';
+type ToastBannerChildren = React.ReactElement<ToastActionProps> | React.ReactElement<ToastActionProps>[];
+/**
+ * Public Toast.Banner props.
+ *
+ * High-level toast API with heading from `title`, optional `description`, and Toast.Action children.
+ */
+export type ToastBannerProps = ToastRootNamespace.Props & {
+    /**
+     * Toast instance from `useToastManager().toasts` or `createToastManager()`.
+     */
+    toast: ToastRootNamespace.ToastObject;
+    /**
+     * Heading above the description. Falls back to `toast.title` from `toastManager.add`.
+     *
+     * @default `toast.title` when set on the toast instance.
+     */
+    title?: React.ReactNode;
+    /**
+     * Supporting copy below the title.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Whether to render the dismiss control.
+     *
+     * @default true
+     */
+    dismissable?: boolean;
+    /**
+     * Label for the dismiss control.
+     *
+     * @default 'Dismiss'
+     */
+    dismissLabel?: React.ReactNode;
+    /**
+     * Called when the dismiss control is activated, before Base UI closes the toast.
+     *
+     * @default No callback is invoked.
+     */
+    onDismiss?: () => void;
+    /**
+     * Optional action buttons. Accepts a single `Toast.Action` or an array of them.
+     *
+     * @default No actions are rendered.
+     */
+    children?: ToastBannerChildren;
+    /**
+     * Class name forwarded to the toast root.
+     *
+     * @default No extra class name.
+     */
+    className?: string;
+};
+export declare const ToastBanner: React.FC<ToastBannerProps>;
+export {};

package/dist/components/toast/toast-banner.js

@@ -0,0 +1,66 @@
+import { clsx } from "../../core/clsx.js";
+import { Stack } from "../stack/stack.js";
+import { Button } from "../button/button.js";
+import { Text } from "../text/text.js";
+import { Surface } from "../surface/surface.js";
+import toast_module_default from "./toast.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/toast/toast-banner.tsx
+var ToastBanner = ({ children, className, description, dismissable = true, dismissLabel = "Dismiss", onDismiss, toast, title, ...otherProps }) => {
+	const actions = children ? [children].flat() : [];
+	const resolvedTitle = title ?? toast.title;
+	const resolvedDescription = description ?? toast.description;
+	return /* @__PURE__ */ jsx(Toast.Root, {
+		...otherProps,
+		toast,
+		className: clsx(toast_module_default.Banner, className),
+		render: /* @__PURE__ */ jsx(Surface, {
+			color: 1,
+			border: "all",
+			radius: "large",
+			vibrant: true
+		}),
+		...!resolvedTitle && resolvedDescription && { "aria-label": typeof resolvedDescription === "string" ? resolvedDescription : void 0 },
+		children: /* @__PURE__ */ jsxs(Toast.Content, {
+			render: /* @__PURE__ */ jsx(Stack, {
+				className: toast_module_default.Content,
+				columnGap: "medium",
+				direction: "row",
+				fillChildren: false,
+				hAlign: "space-between",
+				vAlign: "center",
+				hPadding: "large",
+				vPadding: "large"
+			}),
+			children: [/* @__PURE__ */ jsxs(Stack, {
+				fillChildren: false,
+				rowGap: "small",
+				children: [resolvedTitle && /* @__PURE__ */ jsx(Toast.Title, {
+					render: /* @__PURE__ */ jsx(Text, { size: "medium" }),
+					children: resolvedTitle
+				}), resolvedDescription && /* @__PURE__ */ jsx(Toast.Description, {
+					render: /* @__PURE__ */ jsx(Text, {
+						size: "small",
+						tone: "muted",
+						render: /* @__PURE__ */ jsx("p", {})
+					}),
+					children: resolvedDescription
+				})]
+			}), (dismissable || Boolean(actions.length)) && /* @__PURE__ */ jsxs(Stack, {
+				columnGap: "small",
+				direction: "row",
+				fillChildren: false,
+				children: [dismissable && /* @__PURE__ */ jsx(Toast.Close, {
+					render: /* @__PURE__ */ jsx(Button, { variant: "secondary" }),
+					onClick: () => {
+						onDismiss?.();
+					},
+					children: dismissLabel
+				}), Boolean(actions.length) && actions]
+			})]
+		})
+	});
+};
+//#endregion
+export { ToastBanner };

package/dist/components/toast/toast-viewport.d.ts

@@ -0,0 +1,17 @@
+import { ToastViewport as ToastViewportNamespace } from '@base-ui/react/toast';
+import type * as React from 'react';
+export type ToastViewportPosition = 'bottom-right' | 'bottom-left' | 'bottom-center' | 'top-right' | 'top-left' | 'top-center' | 'anchored';
+/**
+ * Public Toast.Viewport props.
+ *
+ * @default `position` is `bottom-right`.
+ */
+export type ToastViewportProps = ToastViewportNamespace.Props & {
+    /**
+     * Controls viewport placement and stacking layout hooks.
+     *
+     * @default 'bottom-right'
+     */
+    position?: ToastViewportPosition;
+};
+export declare const ToastViewport: React.FC<ToastViewportProps>;

package/dist/components/toast/toast-viewport.js

@@ -0,0 +1,12 @@
+import { clsx } from "../../core/clsx.js";
+import toast_module_default from "./toast.module.js";
+import { jsx } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/toast/toast-viewport.tsx
+var ToastViewport = ({ className, position = "bottom-right", ...props }) => /* @__PURE__ */ jsx(Toast.Viewport, {
+	className: clsx(toast_module_default.Viewport, className),
+	"data-position": position,
+	...props
+});
+//#endregion
+export { ToastViewport };

package/dist/components/toast/toast.css

@@ -0,0 +1 @@
+.viraui__toast-module__Viewport_oSF5e{position:fixed;z-index:4;pointer-events:none;outline:0;inline-size:min(24rem,calc(100vw - 2 * var(--space-medium)));&[data-position=bottom-right]{inset-block-end:var(--space-medium);inset-inline-end:var(--space-medium)}&[data-position=bottom-left]{inset-block-end:var(--space-medium);inset-inline-start:var(--space-medium)}&[data-position=bottom-center]{inset-block-end:var(--space-medium);inset-inline:0;margin-inline:auto}&[data-position=top-right]{inset-block-start:var(--space-medium);inset-inline-end:var(--space-medium)}&[data-position=top-left]{inset-block-start:var(--space-medium);inset-inline-start:var(--space-medium)}&[data-position=top-center]{inset-block-start:var(--space-medium);inset-inline:0;margin-inline:auto}&[data-position=anchored]{inset:0;inline-size:auto}&>*{pointer-events:auto}}.viraui__toast-module__Banner_QkOlo{--gap:var(--space-small);--peek:var(--space-small);--scale:calc(max(0, 1 - (var(--toast-index, 0) * 0.1)));--shrink:calc(1 - var(--scale));--stack-height:var(--toast-frontmost-height,var(--toast-height,0px));--offset-y:calc(var(--toast-offset-y, 0px) * -1 + (var(--toast-index, 0) * var(--gap) * -1) + var(--toast-swipe-movement-y, 0px));position:absolute;inset-inline-end:0;inset-block-end:0;z-index:calc(1000 - var(--toast-index, 0));inline-size:100%;min-inline-size:16rem;will-change:translate,scale,opacity;block-size:var(--toast-frontmost-height,var(--toast-height,auto));transform-origin:bottom center;translate:var(--toast-swipe-movement-x,0) calc(var(--toast-swipe-movement-y, 0px) - (var(--toast-index, 0) * var(--peek)) - (var(--shrink) * var(--stack-height)));scale:var(--scale);transition:translate var(--duration-slow) var(--easing-elastic),scale var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);-webkit-user-select:none;user-select:none;&[data-expanded]{translate:var(--toast-swipe-movement-x,0) var(--offset-y);scale:1;block-size:var(--toast-height,auto)}&[data-starting-style]{translate:0 150%;scale:1}&[data-ending-style]{opacity:0;translate:0 150%;scale:1;&[data-swipe-direction=up]{translate:0 calc(var(--toast-swipe-movement-y, 0px) - 150%)}&[data-swipe-direction=down]{translate:0 calc(var(--toast-swipe-movement-y, 0px) + 150%)}&[data-swipe-direction=left]{translate:calc(var(--toast-swipe-movement-x, 0px) - 150%) var(--offset-y)}&[data-swipe-direction=right]{translate:calc(var(--toast-swipe-movement-x, 0px) + 150%) var(--offset-y)}}&[data-limited]{opacity:0}&:after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:0;inline-size:100%;block-size:calc(var(--gap) + 1px)}@media (prefers-reduced-motion:reduce){transition:none}}:is(.viraui__toast-module__Viewport_oSF5e[data-position=bottom-left],.viraui__toast-module__Viewport_oSF5e[data-position=top-left]) .viraui__toast-module__Banner_QkOlo{inset-inline-end:auto;inset-inline-start:0}:is(.viraui__toast-module__Viewport_oSF5e[data-position=bottom-center],.viraui__toast-module__Viewport_oSF5e[data-position=top-center]) .viraui__toast-module__Banner_QkOlo{inset-inline:0;margin-inline:auto}.viraui__toast-module__Viewport_oSF5e[data-position^=top-] .viraui__toast-module__Banner_QkOlo{inset-block-end:auto;inset-block-start:0;transform-origin:top center;--offset-y:calc(var(--toast-offset-y, 0px) + (var(--toast-index, 0) * var(--gap)) + var(--toast-swipe-movement-y, 0px));translate:var(--toast-swipe-movement-x,0) calc(var(--toast-swipe-movement-y, 0px) + (var(--toast-index, 0) * var(--peek)) + (var(--shrink) * var(--stack-height)));scale:var(--scale);&:after{inset-block-start:auto;inset-block-end:100%}&[data-expanded]{translate:var(--toast-swipe-movement-x,0) var(--offset-y);scale:1}&[data-ending-style]:not([data-swipe-direction]),&[data-starting-style]{translate:0 -150%;scale:1}}.viraui__toast-module__Viewport_oSF5e[data-position=anchored] .viraui__toast-module__Banner_QkOlo{position:static;z-index:auto;min-inline-size:auto;block-size:auto;translate:0;scale:1;&:after{content:none}transition:translate var(--duration-slow) var(--easing-elastic),scale var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);&[data-ending-style],&[data-starting-style]{opacity:0;translate:0 var(--space-2x-small);scale:1}&[data-expanded]{translate:0;scale:1}}.viraui__toast-module__Content_5ODZr{overflow:hidden;transition:opacity .25s ease;&[data-behind]{opacity:0}&[data-expanded]{opacity:1}@media (prefers-reduced-motion:reduce){transition:none}}

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,18 @@
+import { ToastObject, Toast as PrimitiveToast } from '@base-ui/react/toast';
+import { ToastActionProps } from './toast-action';
+import { ToastBannerProps } from './toast-banner';
+import { ToastViewportProps } from './toast-viewport';
+import type * as React from 'react';
+export type { ToastActionProps, ToastBannerProps, ToastObject, ToastViewportProps };
+type ToastComponent = Omit<typeof PrimitiveToast, 'Viewport' | 'Action' | 'Arrow'> & {
+    Viewport: React.FC<ToastViewportProps>;
+    Banner: React.FC<ToastBannerProps>;
+    Action: React.FC<ToastActionProps>;
+};
+/**
+ * Compound toast namespace built on Base UI Toast primitives.
+ *
+ * Compose `Toast.Provider`, `Toast.Portal`, and `Toast.Viewport` with `Toast.Banner`
+ * for stacked notifications, or wrap anchored toasts in `Toast.Positioner`.
+ */
+export declare const Toast: ToastComponent;

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

@@ -0,0 +1,26 @@
+{
+  "name": "Toast",
+  "summary": "Transient notification surface with stacked or anchored placement, Banner high-level API, and optional action buttons.",
+  "whenToUse": [
+    "Confirming a completed action such as save or delete",
+    "Offering a short undo window after a reversible change",
+    "Showing contextual feedback anchored to the control that triggered it"
+  ],
+  "whenNotToUse": [
+    "Blocking errors that need immediate correction — use inline field errors or a dialog",
+    "Persistent status that should stay visible — use inline status text or a banner pattern",
+    "Long-form content that needs reading time — use a dialog or dedicated panel"
+  ],
+  "accessibility": [
+    "Pass title and description strings to toastManager.add for screen reader announcements on high-priority toasts",
+    "Keep toast copy concise; users can navigate the toast viewport landmark with F6",
+    "Ensure action and dismiss controls have visible labels",
+    "Use anchored toasts for contextual feedback tied to a specific trigger"
+  ],
+  "antiPatterns": [
+    "Nesting arbitrary components inside Toast.Banner — children must be Toast.Action only",
+    "Stacking many simultaneous toasts without a clear limit",
+    "Using toasts for critical validation errors that block task completion"
+  ],
+  "related": ["Button", "Surface", "Stack", "Dialog"]
+}

package/dist/components/toast/toast.js

@@ -0,0 +1,22 @@
+"use client";
+import './toast.css';
+import { ToastAction } from "./toast-action.js";
+import { ToastBanner } from "./toast-banner.js";
+import { ToastViewport } from "./toast-viewport.js";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/toast/toast.tsx
+var { Arrow: _PrimitiveToastArrow, Viewport: _PrimitiveToastViewport, Action: _PrimitiveToastAction, ...primitiveToast } = Toast;
+/**
+* Compound toast namespace built on Base UI Toast primitives.
+*
+* Compose `Toast.Provider`, `Toast.Portal`, and `Toast.Viewport` with `Toast.Banner`
+* for stacked notifications, or wrap anchored toasts in `Toast.Positioner`.
+*/
+var Toast$1 = {
+	...primitiveToast,
+	Viewport: ToastViewport,
+	Banner: ToastBanner,
+	Action: ToastAction
+};
+//#endregion
+export { Toast$1 as Toast };

package/dist/components/toast/toast.module.js

@@ -0,0 +1,7 @@
+var toast_module_default = {
+	Viewport: "viraui__toast-module__Viewport_oSF5e",
+	Banner: "viraui__toast-module__Banner_QkOlo",
+	Content: "viraui__toast-module__Content_5ODZr"
+};
+//#endregion
+export { toast_module_default as default };

package/dist/core/props/intrinsic-vira-props.js

@@ -4,9 +4,9 @@ var extractIntrinsicViraProps = (props) => {
 	return {
 		componentProps,
 		intrinsicAttributes: {
-			...grow === false ? { "data-grow": "false" } : {},
-			...shrink === false ? { "data-shrink": "false" } : {},
-			...vibrant === true ? { "data-vibrant": "" } : {}
+			...grow === false && { "data-grow": "false" },
+			...shrink === false && { "data-shrink": "false" },
+			...vibrant && { "data-vibrant": "" }
 		}
 	};
 };

package/dist/index.js

@@ -29,11 +29,13 @@ import { Radio } from "./components/radio/radio.js";
 import { RadioGroup } from "./components/radio/radio-group.js";
 import { Select } from "./components/select/select.js";
 import { Separator } from "./components/separator/separator.js";
+import { Shimmer } from "./components/shimmer/shimmer.js";
 import { Icon } from "./components/icon/icon.js";
 import { Skeleton } from "./components/skeleton/skeleton.js";
 import { Surface } from "./components/surface/surface.js";
 import { Tabs } from "./components/tabs/tabs.js";
+import { Toast } from "./components/toast/toast.js";
 import { StaticNoise } from "./components/static-noise/static-noise.js";
 import { ProgressiveBlur } from "./components/progressive-blur/progressive-blur.js";
 import { Title } from "./components/title/title.js";
-export { Avatar, AvatarGroup, Button, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, Icon, IconButton, LinearProgress, Masonry, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, getElevationProps };
+export { Avatar, AvatarGroup, Button, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, Icon, IconButton, LinearProgress, Masonry, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, getElevationProps };

package/dist/preflight.css

@@ -1 +1 @@
-@layer viraui.preflight;@layer viraui.preflight{html{--scrollbar-thumb:light-dark(var(--base-4),var(--base-3));--scrollbar-track:transparent;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);font-size:100%;box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground)}*{--is-corner-shape-enabled:var(--corner-shape-enable);--corner-shape-value:var(--is-corner-shape-enabled) var(--corner-shape-squircle);corner-shape:var(--corner-shape-value,unset)}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}: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),sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums}::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: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 td,table th{border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}fieldset{padding:0;margin:0;border:0}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px transparent;--shadow-color:oklab(0 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}}@layer viraui.preflight{[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),transparent 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=false]{--vira-flex-grow:0;flex-grow:0}[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{background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em;font-size:1em;font-family:var(--font-family-mono);vertical-align:top}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-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}[data-vibrant]{--is-vibrancy-active:var(--vibrancy-enable);--vibrancy-filter:var(--vibrancy-enable) brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px));backdrop-filter:var(--vibrancy-filter,none)}}@layer viraui.preflight{}@layer viraui.preflight{}
+@layer viraui.preflight;@layer viraui.preflight{html{--scrollbar-thumb:light-dark(var(--base-4),var(--base-3));--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);font-size:100%;box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal}*{@container root not style(--corner-shape-enable: initial){corner-shape:var(--corner-shape-squircle)}}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}: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),sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums}::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: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)}fieldset{padding:0;margin:0;border:0}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklab(0 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}}@layer viraui.preflight{[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=false]{--vira-flex-grow:0;flex-grow:0}[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{background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em;font-size:1em;font-family:var(--font-family-mono);vertical-align:top}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-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}}@layer viraui.preflight{}@layer viraui.preflight{@container root not style(--vibrancy-enable: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px))}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "private": false,
   "files": [
     "dist"
@@ -33,7 +33,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@base-ui/react": "1.5.0",
+    "@base-ui/react": "1.6.0",
     "postcss": "8.5.6",
     "postcss-cli": "11.0.1",
     "react": ">=19.2.7",
@@ -42,16 +42,24 @@
     "vite": "8.0.16",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-static-copy": "2.3.0",
-    "@viraui/foundation": "0.0.24",
-    "@viraui/postcss-config": "0.0.16",
+    "@viraui/foundation": "0.0.25",
     "@viraui/icons": "0.0.15",
+    "@viraui/postcss-config": "0.0.17",
     "@viraui/tsconfig": "0.0.17"
   },
   "peerDependencies": {
-    "@base-ui/react": ">=1.5.0",
+    "@base-ui/react": ">=1.6.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
+  "browserslist": [
+    "last 2 Chrome versions",
+    "last 2 Firefox versions",
+    "last 2 Safari versions",
+    "last 2 Edge versions",
+    "not dead",
+    "not op_mini all"
+  ],
   "scripts": {
     "clean": "rimraf dist",
     "build": "run-s clean build:icons build:lib build:preflight build:catalog",