@viraui/react 0.0.24 → 0.0.26

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", ...otherProps }) => /* @__PURE__ */ jsx(Toast.Viewport, {
+	className: clsx(toast_module_default.Viewport, className),
+	"data-position": position,
+	...otherProps
+});
+//#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

@@ -1,5 +1,7 @@
+import { Accordion } from "./components/accordion/accordion.js";
 import { Avatar } from "./components/avatar/avatar.js";
 import { AvatarGroup } from "./components/avatar-group/avatar-group.js";
+import { Bleed } from "./components/bleed/bleed.js";
 import { Stack } from "./components/stack/stack.js";
 import { Chip } from "./components/chip/chip.js";
 import { DialogClose } from "./components/dialog/dialog-close.js";
@@ -17,7 +19,10 @@ import { Button } from "./components/button/button.js";
 import { IconButton } from "./components/icon-button/icon-button.js";
 import { Text } from "./components/text/text.js";
 import { LinearProgress } from "./components/linear-progress/linear-progress.js";
+import { Meter } from "./components/meter/meter.js";
 import { Masonry } from "./components/masonry/masonry.js";
+import { PopoverSheet } from "./components/popover/popover-sheet.js";
+import { Popover, PopoverClose, PopoverDescription, PopoverTitle, PopoverTrigger } from "./components/popover/popover.js";
 import { Textfield } from "./components/textfield/textfield.js";
 import { Textarea } from "./components/textarea/textarea.js";
 import { Slider } from "./components/slider/slider.js";
@@ -29,11 +34,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 { Accordion, Avatar, AvatarGroup, Bleed, Button, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, Icon, IconButton, LinearProgress, Masonry, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, getElevationProps };

package/dist/preflight-surface.json

@@ -5,7 +5,12 @@
     {
       "id": "themes",
       "file": "themes.css",
-      "purpose": "Runtime color-scheme hints for light and dark mode."
+      "purpose": "Runtime color-scheme hints for light, dark, and inverted mode."
+    },
+    {
+      "id": "core",
+      "file": "core.css",
+      "purpose": "Root baseline, --is-light-theme registration, and global element defaults."
     },
     {
       "id": "typography",
@@ -27,12 +32,13 @@
     {
       "name": "data-theme",
       "module": "themes",
-      "values": ["light", "dark"],
+      "values": ["light", "dark", "inverted"],
       "presence": "value required",
-      "effect": "Narrows color-scheme on the element subtree: light forces light, dark forces dark.",
+      "effect": "Narrows color-scheme on the element subtree: light forces light, dark forces dark, inverted flips color-scheme relative to the active theme using --is-light-theme on the root container.",
       "whenToUse": [
         "Toggle runtime light or dark mode on html, body, or a layout wrapper",
-        "Scope a subtree to one mode while the rest of the page stays unchanged"
+        "Scope a subtree to one mode while the rest of the page stays unchanged",
+        "Invert color-scheme on a nested surface that must contrast the active theme, for example a primary Chip addon inside a primary Button"
       ],
       "whenNotToUse": [
         "As a substitute for loading compatible theme CSS",
@@ -117,6 +123,13 @@
     }
   ],
   "customProperties": [
+    {
+      "name": "--is-light-theme",
+      "module": "themes",
+      "setBy": "html root in core.css from contrast-color(var(--global-background))",
+      "default": "black",
+      "purpose": "Registers the active theme polarity for @container root queries; data-theme=\"inverted\" flips color-scheme against this value."
+    },
     {
       "name": "--shadow-color",
       "module": "elevations",

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{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-theme{syntax:"<color>";initial-value:#000;inherits:true}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b/0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-theme:contrast-color(var(--global-background));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),system-ui,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{[data-theme=inverted]{@container root style(--is-light-theme: black){color-scheme:dark}@container root style(--is-light-theme: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--vibrancy-enable: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-theme: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "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.26",
     "@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",