@viraui/react 1.0.12 → 1.0.14

package/dist/components/title/title.guide.json

@@ -27,51 +27,54 @@
         "description": "Aligns text using logical alignment values.",
         "refCss": "align"
       },
-      "maxWidth": {
-        "description": "Constrains the maximum inline size of the rendered title block.",
-        "refCss": "max-width"
+      "balanced": {
+        "description": "Enables balanced wrapping for block-like titles."
       },
       "color": {
-        "description": "Applies a literal color escape hatch when semantic tone is not used.",
-        "refCss": "literal-color"
+        "description": "Applies a literal color escape hatch."
       },
-      "whiteSpace": {
-        "description": "Controls white-space preservation and wrapping behavior.",
-        "refCss": "white-space"
+      "fontWidth": {
+        "description": "Overrides font width as a percentage (100 = normal); maps to `font-stretch` and `wdth`."
       },
-      "weight": {
-        "description": "Numeric font weight; maps to font-weight and the wght variation axis.",
-        "refCss": "font-weight"
+      "hPadding": {
+        "description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."
       },
-      "fontWidth": {
-        "description": "Font width as a percentage (100 = normal); maps to font-stretch and the wdth variation axis.",
-        "refCss": "font-width"
+      "lineHeight": {
+        "description": "Controls line height through foundation leading tokens."
+      },
+      "maxWidth": {
+        "description": "Constrains the maximum inline size of the rendered text block."
       },
       "opticalSize": {
-        "description": "Optical size axis override (variable fonts); static fonts keep font-optical-sizing: auto.",
-        "refCss": "font-opsz"
+        "description": "Overrides the optical size (`opsz`) axis on variable fonts; static fonts keep `font-optical-sizing: auto`."
+      },
+      "ref": {
+        "description": "Ref forwarded to the rendered title root element."
+      },
+      "render": {
+        "description": "Replaces the default `span` root using Base UI render semantics. Pair this with `size` for most headings so DOM semantics and visual preset stay intentionally aligned."
+      },
+      "selection": {
+        "description": "Enables text selection on the rendered copy."
+      },
+      "size": {
+        "description": "Selects a heading or display typography preset from the active theme scale. This controls only the visual preset. Semantic heading choice remains owned by `render`, because `Title` keeps a `span` root unless `render` replaces it."
       },
       "trim": {
-        "description": "Trims text box whitespace at the chosen edge.",
+        "description": "Trims text box whitespace at the chosen edge when the browser supports `text-box`.",
         "refCss": "trim"
       },
       "trimType": {
-        "description": "Selects the text-box trim basis when trim is active.",
-        "refCss": "trim-type"
-      },
-      "hPadding": {
-        "description": "Sets inline padding using one token or a [start, end] tuple."
+        "description": "Selects the `text-box` trim basis when `trim` is active."
       },
       "vPadding": {
-        "description": "Sets block padding using one token or a [start, end] tuple."
+        "description": "Sets block padding using one token for both sides or a `[start, end]` tuple."
       },
-      "size": {
-        "description": "Selects the visual heading appearance preset; does not change semantic heading level.",
-        "refCss": "font-size"
+      "weight": {
+        "description": "Overrides the size preset weight (`font-weight` + `wght` axis)."
       },
-      "lineHeight": {
-        "description": "Controls line height through foundation leading tokens.",
-        "refCss": "line-height"
+      "whiteSpace": {
+        "description": "Controls white-space preservation and wrapping behavior."
       }
     },
     "css": {
@@ -79,67 +82,54 @@
         "description": "Title alignment on the root.",
         "refReact": "align"
       },
-      "max-width": {
-        "description": "Max inline size of the title root.",
-        "refReact": "maxWidth"
+      "font-family": {
+        "description": "Heading font family on the root."
       },
-      "literal-color": {
-        "description": "Literal color override on the root.",
-        "refReact": "color"
+      "font-opsz": {
+        "description": "Optical size axis on the root (variable fonts)."
       },
-      "white-space": {
-        "description": "White-space behavior on the root.",
-        "refReact": "whiteSpace"
+      "font-size": {
+        "description": "Heading font size; size prop presets via data attributes."
       },
       "font-weight": {
-        "description": "Font weight on the root.",
-        "refReact": "weight"
+        "description": "Font weight on the root."
       },
       "font-width": {
-        "description": "Font width percentage on the root (font-stretch + wdth).",
-        "refReact": "fontWidth"
+        "description": "Font width percentage on the root (font-stretch + wdth)."
       },
-      "font-opsz": {
-        "description": "Optical size axis on the root (variable fonts).",
-        "refReact": "opticalSize"
+      "letter-spacing": {
+        "description": "Heading letter spacing; size presets adjust this."
       },
-      "trim": {
-        "description": "Text-box trim mode on the root.",
-        "refReact": "trim"
+      "line-height": {
+        "description": "Line height; lineHeight prop presets via data attributes."
       },
-      "trim-type": {
-        "description": "Text-box trim basis on the root.",
-        "refReact": "trimType"
+      "literal-color": {
+        "description": "Literal color override on the root."
       },
-      "padding-inline-start": {
-        "description": "Inline-start padding when padding is enabled.",
-        "refReact": "hPadding"
+      "max-width": {
+        "description": "Max inline size of the title root."
       },
-      "padding-inline-end": {
-        "description": "Inline-end padding when padding is enabled.",
-        "refReact": "hPadding"
+      "padding-block-end": {
+        "description": "Block-end padding when padding is enabled."
       },
       "padding-block-start": {
-        "description": "Block-start padding when padding is enabled.",
-        "refReact": "vPadding"
+        "description": "Block-start padding when padding is enabled."
       },
-      "padding-block-end": {
-        "description": "Block-end padding when padding is enabled.",
-        "refReact": "vPadding"
+      "padding-inline-end": {
+        "description": "Inline-end padding when padding is enabled."
       },
-      "font-size": {
-        "description": "Heading font size; size prop presets via data attributes.",
-        "refReact": "size"
+      "padding-inline-start": {
+        "description": "Inline-start padding when padding is enabled."
       },
-      "line-height": {
-        "description": "Line height; lineHeight prop presets via data attributes.",
-        "refReact": "lineHeight"
+      "trim": {
+        "description": "Text-box trim mode on the root.",
+        "refReact": "trim"
       },
-      "letter-spacing": {
-        "description": "Heading letter spacing; size presets adjust this."
+      "trim-type": {
+        "description": "Text-box trim basis on the root."
       },
-      "font-family": {
-        "description": "Heading font family on the root."
+      "white-space": {
+        "description": "White-space behavior on the root."
       }
     }
   }

package/dist/components/title/title.js

@@ -27,7 +27,6 @@ var Title = ({ align = "start", balanced = false, selection = true, className, c
 		props: {
 			...otherProps,
 			"data-title-size": size,
-			"data-title-weight": weight !== void 0 ? "custom" : "preset",
 			"data-title-line-height": lineHeight,
 			"data-title-balanced": balanced ? "true" : "false",
 			"data-title-selection": selection ? "true" : "false",

package/dist/components/toast/toast.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{.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__Content_5ODZr{overflow:hidden;transition:opacity .25s ease;&[data-behind]{opacity:0}&[data-expanded]{opacity:1}@media (prefers-reduced-motion:reduce){transition:none}}}@layer viraui.overrides{.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:transform,opacity;block-size:var(--toast-frontmost-height,var(--toast-height,auto));transform-origin:bottom center;transform:scale(var(--scale)) translateX(var(--toast-swipe-movement-x,0)) translateY(calc(var(--toast-swipe-movement-y, 0px) - (var(--toast-index, 0) * var(--peek)) - (var(--shrink) * var(--stack-height))));transition:transform var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);-webkit-user-select:none;user-select:none;&[data-swiping]{transition:none}&[data-expanded]{transform:scale(1) translateX(var(--toast-swipe-movement-x,0)) translateY(var(--offset-y));block-size:var(--toast-height,auto)}&[data-starting-style]{transform:scale(1) translateY(150%)}&[data-ending-style]{opacity:0;transform:scale(1) translateY(150%);&[data-swipe-direction=up]{transform:scale(1) translateY(calc(var(--toast-swipe-movement-y, 0px) - 150%))}&[data-swipe-direction=down]{transform:scale(1) translateY(calc(var(--toast-swipe-movement-y, 0px) + 150%))}&[data-swipe-direction=left]{transform:scale(1) translateX(calc(var(--toast-swipe-movement-x, 0px) - 150%)) translateY(var(--offset-y))}&[data-swipe-direction=right]{transform:scale(1) translateX(calc(var(--toast-swipe-movement-x, 0px) + 150%)) translateY(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));transform:scale(var(--scale)) translateX(var(--toast-swipe-movement-x,0)) translateY(calc(var(--toast-swipe-movement-y, 0px) + (var(--toast-index, 0) * var(--peek)) + (var(--shrink) * var(--stack-height))));&:after{inset-block-start:auto;inset-block-end:100%}&[data-expanded]{transform:scale(1) translateX(var(--toast-swipe-movement-x,0)) translateY(var(--offset-y))}&[data-ending-style]:not([data-swipe-direction]),&[data-starting-style]{transform:scale(1) translateY(-150%)}}.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;transform:none;&:after{content:none}transition:transform var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);&[data-ending-style],&[data-starting-style]{opacity:0;transform:scale(1) translateY(var(--space-2x-small))}&[data-expanded]{transform:none}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__toast-gap{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-peek{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-scale{syntax:"<number>";inherits:false;initial-value:1}@property --__toast-shrink{syntax:"<number>";inherits:false;initial-value:0}@property --__toast-stack-height{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-offset-y{syntax:"<length>";inherits:false;initial-value:0}.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__Content_5ODZr{overflow:hidden;transition:opacity .25s ease;&[data-behind]{opacity:0}&[data-expanded]{opacity:1}@media (prefers-reduced-motion:reduce){transition:none}}}@layer viraui.overrides{.viraui__toast-module__Banner_QkOlo{--__toast-gap:var(--space-small);--__toast-peek:var(--space-small);--__toast-scale:calc(max(0, 1 - (var(--toast-index, 0) * 0.1)));--__toast-shrink:calc(1 - var(--__toast-scale));--__toast-stack-height:var(--toast-frontmost-height,var(--toast-height,0px));--__toast-offset-y:calc(var(--toast-offset-y, 0px) * -1 + (var(--toast-index, 0) * var(--__toast-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:transform,opacity;block-size:var(--toast-frontmost-height,var(--toast-height,auto));transform-origin:bottom center;transform:scale(var(--__toast-scale)) translateX(var(--toast-swipe-movement-x,0)) translateY(calc(var(--toast-swipe-movement-y, 0px) - (var(--toast-index, 0) * var(--__toast-peek)) - (var(--__toast-shrink) * var(--__toast-stack-height))));transition:transform var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);-webkit-user-select:none;user-select:none;&[data-swiping]{transition:none}&[data-expanded]{transform:scale(1) translateX(var(--toast-swipe-movement-x,0)) translateY(var(--__toast-offset-y));block-size:var(--toast-height,auto)}&[data-starting-style]{transform:scale(1) translateY(150%)}&[data-ending-style]{opacity:0;transform:scale(1) translateY(150%);&[data-swipe-direction=up]{transform:scale(1) translateY(calc(var(--toast-swipe-movement-y, 0px) - 150%))}&[data-swipe-direction=down]{transform:scale(1) translateY(calc(var(--toast-swipe-movement-y, 0px) + 150%))}&[data-swipe-direction=left]{transform:scale(1) translateX(calc(var(--toast-swipe-movement-x, 0px) - 150%)) translateY(var(--__toast-offset-y))}&[data-swipe-direction=right]{transform:scale(1) translateX(calc(var(--toast-swipe-movement-x, 0px) + 150%)) translateY(var(--__toast-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(--__toast-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;--__toast-offset-y:calc(var(--toast-offset-y, 0px) + (var(--toast-index, 0) * var(--__toast-gap)) + var(--toast-swipe-movement-y, 0px));transform:scale(var(--__toast-scale)) translateX(var(--toast-swipe-movement-x,0)) translateY(calc(var(--toast-swipe-movement-y, 0px) + (var(--toast-index, 0) * var(--__toast-peek)) + (var(--__toast-shrink) * var(--__toast-stack-height))));&:after{inset-block-start:auto;inset-block-end:100%}&[data-expanded]{transform:scale(1) translateX(var(--toast-swipe-movement-x,0)) translateY(var(--__toast-offset-y))}&[data-ending-style]:not([data-swipe-direction]),&[data-starting-style]{transform:scale(1) translateY(-150%)}}.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;transform:none;&:after{content:none}transition:transform var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);&[data-ending-style],&[data-starting-style]{opacity:0;transform:scale(1) translateY(var(--space-2x-small))}&[data-expanded]{transform:none}}}

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

@@ -23,5 +23,36 @@
     "Stacking many simultaneous toasts without a clear limit",
     "Using toasts for critical validation errors that block task completion"
   ],
-  "related": ["Button", "Surface", "Stack", "Dialog"]
+  "related": ["Button", "Surface", "Stack", "Dialog"],
+  "properties": {
+    "react": {
+      "Banner.children": {
+        "description": "Optional action buttons. Accepts a single `Toast.Action` or an array of them."
+      },
+      "Banner.className": {
+        "description": "Class name forwarded to the toast root."
+      },
+      "Banner.description": {
+        "description": "Supporting copy below the title."
+      },
+      "Banner.dismissable": {
+        "description": "Whether to render the dismiss control."
+      },
+      "Banner.dismissLabel": {
+        "description": "Label for the dismiss control."
+      },
+      "Banner.onDismiss": {
+        "description": "Called when the dismiss control is activated, before Base UI closes the toast."
+      },
+      "Banner.title": {
+        "description": "Heading above the description. Falls back to `toast.title` from `toastManager.add`."
+      },
+      "Banner.toast": {
+        "description": "Toast instance from `useToastManager().toasts` or `createToastManager()`."
+      },
+      "Viewport.position": {
+        "description": "Controls viewport placement and stacking layout hooks."
+      }
+    }
+  }
 }

package/dist/components/toggle-button/toggle-button.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{.viraui__toggle-button-module__IconSlot_8nRbU{position:relative;display:block;flex-shrink:0;inline-size:var(--vui-button-icon-size);block-size:var(--vui-button-icon-size);&[data-pressed]{.viraui__toggle-button-module__Icon_Y1ESH:first-of-type{opacity:0;rotate:30deg}.viraui__toggle-button-module__Icon_Y1ESH:last-of-type{opacity:1;rotate:0deg}}&[data-interpolate=true] .viraui__toggle-button-module__Icon_Y1ESH{transition:opacity var(--duration-fast) var(--easing-standard),rotate var(--duration-fast) var(--easing-standard);@media (prefers-reduced-motion:reduce){transition:none}}}.viraui__toggle-button-module__Icon_Y1ESH{position:absolute;inset:0;display:grid;place-items:center;&>svg{block-size:var(--vui-button-icon-size);inline-size:var(--vui-button-icon-size);flex-shrink:0}&:first-of-type{opacity:1;rotate:0deg}&:last-of-type{opacity:0;rotate:-30deg}}}

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

@@ -35,5 +35,12 @@ export type ToggleButtonProps = Omit<IconButtonProps, 'icon' | 'render' | 'varia
      * @default When omitted, `variant` is used in both states.
      */
     pressedVariant?: ButtonProps['variant'];
+    /**
+     * When `pressedIcon` is set, crossfade and rotate between resting and pressed icons
+     * (`data-interpolate="true"`). When `false`, swap instantly with no transition.
+     *
+     * @default false
+     */
+    interpolateIcons?: boolean;
 };
 export declare const ToggleButton: React.FC<ToggleButtonProps>;

package/dist/components/toggle-button/toggle-button.guide.json

@@ -1,7 +1,7 @@
 {
   "name": "ToggleButton",
   "structure": "<ToggleButton restingIcon={<Plus />} aria-label=\"Pin\" />",
-  "summary": "Icon-only two-state toggle that swaps resting and optional pressed icons on Base UI Toggle state.",
+  "summary": "Icon-only two-state toggle that swaps resting and optional pressed icons on Base UI Toggle state; `interpolateIcons` (default false) opt-in crossfade + light rotate between dual icons.",
   "whenToUse": [
     "Toolbar pin, favorite, or mute toggles identified only by icon",
     "Compact on/off controls that share IconButton size, variant, and loading model",
@@ -22,5 +22,32 @@
     "Passing icon or render — ToggleButton owns icon swap and Toggle render wiring"
   ],
   "related": ["IconButton", "Button", "Switch", "ToggleGroup"],
-  "properties": {}
+  "properties": {
+    "react": {
+      "interpolateIcons": {
+        "description": "When `pressedIcon` is set, crossfade and rotate between resting and pressed icons (`data-interpolate=\"true\"`). When `false`, swap instantly with no transition."
+      },
+      "loading": {
+        "description": "Shows a centered spinner overlay while preserving the original content width."
+      },
+      "pill": {
+        "description": "Applies a fully rounded pill shape to the button."
+      },
+      "pressedIcon": {
+        "description": "Icon shown while the toggle is pressed."
+      },
+      "pressedVariant": {
+        "description": "Visual variant while the toggle is pressed."
+      },
+      "restingIcon": {
+        "description": "Icon shown while the toggle is not pressed."
+      },
+      "size": {
+        "description": "Controls the visual button size."
+      },
+      "variant": {
+        "description": "Visual variant while the toggle is not pressed."
+      }
+    }
+  }
 }

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

@@ -1,8 +1,10 @@
+import './toggle-button.css';
 import { IconButton } from "../icon-button/icon-button.js";
-import { jsx } from "react/jsx-runtime";
+import toggle_button_module_default from "./toggle-button.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
 //#region src/components/toggle-button/toggle-button.tsx
-var ToggleButton = ({ restingIcon, pressedIcon, variant = "flat", pressedVariant, pressed, defaultPressed, onPressedChange, value, disabled, ref, ...otherProps }) => /* @__PURE__ */ jsx(Toggle, {
+var ToggleButton = ({ restingIcon, pressedIcon, variant = "flat", pressedVariant, interpolateIcons = false, pressed, defaultPressed, onPressedChange, value, disabled, ref, ...otherProps }) => /* @__PURE__ */ jsx(Toggle, {
 	ref,
 	value,
 	pressed,
@@ -12,12 +14,25 @@ var ToggleButton = ({ restingIcon, pressedIcon, variant = "flat", pressedVariant
 	nativeButton: true,
 	render: (toggleProps, state) => {
 		const { "aria-label": _toggleAriaLabel, "aria-labelledby": _toggleAriaLabelledBy, ...restToggleProps } = toggleProps;
+		const icon = pressedIcon != null ? /* @__PURE__ */ jsxs("span", {
+			"aria-hidden": true,
+			className: toggle_button_module_default.IconSlot,
+			"data-interpolate": interpolateIcons ? "true" : "false",
+			...state.pressed && { "data-pressed": "" },
+			children: [/* @__PURE__ */ jsx("span", {
+				className: toggle_button_module_default.Icon,
+				children: restingIcon
+			}), /* @__PURE__ */ jsx("span", {
+				className: toggle_button_module_default.Icon,
+				children: pressedIcon
+			})]
+		}) : restingIcon;
 		return /* @__PURE__ */ jsx(IconButton, {
 			...otherProps,
 			...restToggleProps,
 			disabled,
 			variant: state.pressed ? pressedVariant ?? variant : variant,
-			icon: state.pressed ? pressedIcon ?? restingIcon : restingIcon
+			icon
 		});
 	}
 });

package/dist/components/toggle-button/toggle-button.module.js

@@ -0,0 +1,9 @@
+//#region src/components/toggle-button/toggle-button.module.css
+var IconSlot = "viraui__toggle-button-module__IconSlot_8nRbU";
+var Icon = "viraui__toggle-button-module__Icon_Y1ESH";
+var toggle_button_module_default = {
+	IconSlot,
+	Icon
+};
+//#endregion
+export { Icon, IconSlot, toggle_button_module_default as default };

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

@@ -2,7 +2,8 @@ import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group
 /**
  * Public ToggleGroup props.
  *
- * Thin wrapper around Base UI `ToggleGroup` with default toolbar spacing.
+ * Thin wrapper around Base UI `ToggleGroup` with default `Stack` direction
+ * (`row` / `column` from `orientation`) and zero gap — consumers own spacing.
  * Compose `ToggleButton` children each with `value` and an accessible name.
  *
  * @default Base UI pass-through props keep upstream defaults.

package/dist/components/toggle-group/toggle-group.guide.json

@@ -1,7 +1,7 @@
 {
   "name": "ToggleGroup",
   "structure": "<ToggleGroup>\n  <ToggleButton restingIcon={<Plus />} aria-label=\"List\" value=\"list\" />\n</ToggleGroup>",
-  "summary": "Toolbar toggle set with shared selection state and default Stack spacing on Base UI ToggleGroup.",
+  "summary": "Toolbar toggle set with shared selection state; Stack direction follows orientation with zero default gap.",
   "whenToUse": [
     "Segmented icon toolbars such as text alignment or formatting controls",
     "Single- or multi-select pressed states across related ToggleButton items",
@@ -22,6 +22,5 @@
     "Using Switch for icon-only toolbar toggle sets",
     "Embedding Surface chrome in the component — wrap demos or app chrome at the consumer"
   ],
-  "related": ["ToggleButton", "IconButton", "Tabs"],
-  "properties": {}
+  "related": ["ToggleButton", "IconButton", "Tabs"]
 }

package/dist/components/tooltip/tooltip.guide.json

@@ -22,5 +22,12 @@
     "Expecting `Tooltip.Arrow` (it is intentionally not exported or rendered)",
     "Using tooltip for modal or focus-trapped tasks"
   ],
-  "related": ["Surface", "Button", "IconButton", "Stack", "Popover", "Icon"]
+  "related": ["Surface", "Button", "IconButton", "Stack", "Popover", "Icon"],
+  "properties": {
+    "css": {
+      "content-fade-duration": {
+        "description": "content fade duration custom property on the component root."
+      }
+    }
+  }
 }

package/dist/components/typewriter/typewriter.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-typewriter-caret-color{syntax:"<color>";inherits:true;initial-value:currentcolor}.viraui__typewriter-module__Typewriter_R3sbb{display:inline;position:relative;isolation:isolate}.viraui__typewriter-module__Display_-IGJh{display:inline;white-space:pre-wrap}.viraui__typewriter-module__Display_-IGJh[data-preserve-space]{display:inline-grid}.viraui__typewriter-module__Display_-IGJh[data-preserve-space]>:is(.viraui__typewriter-module__Ghost_R-Yy-,.viraui__typewriter-module__Typed_00NZ8){grid-area:1/1}.viraui__typewriter-module__Caret_96Yfs{display:inline-block;vertical-align:initial;color:var(--vui-typewriter-caret-color);animation:viraui__typewriter-module__typewriter-caret-blink_yLCpV 1.1s step-start infinite;@media (prefers-reduced-motion:reduce){animation:none}&[data-type=block]{inline-size:.55em;block-size:.95em;margin-inline-start:.04em;background-color:var(--vui-typewriter-caret-color);transform:translateY(.08em)}&[data-type=pipe]:before{content:"|"}&[data-type=underscore]:before{content:"_"}}.viraui__typewriter-module__Ghost_R-Yy-{visibility:hidden;-webkit-user-select:none;user-select:none}.viraui__typewriter-module__Typed_00NZ8{display:inline}.viraui__typewriter-module__A11y_B-rjF{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;pointer-events:none}@keyframes viraui__typewriter-module__typewriter-caret-blink_yLCpV{50%{opacity:0}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-typewriter-caret-color{syntax:"<color>";inherits:true;initial-value:currentcolor}.viraui__typewriter-module__Typewriter_R3sbb{position:relative;isolation:isolate}.viraui__typewriter-module__Display_-IGJh{white-space:pre-wrap;&[data-preserve-space]{display:inline-grid;&>.viraui__typewriter-module__Ghost_R-Yy-,&>.viraui__typewriter-module__Typed_00NZ8{grid-area:1/1}}}.viraui__typewriter-module__Caret_96Yfs{display:inline-block;vertical-align:initial;color:var(--vui-typewriter-caret-color);animation:viraui__typewriter-module__typewriter-caret-blink_yLCpV 1.1s step-start infinite;@media (prefers-reduced-motion:reduce){animation:none}&[data-type=block]{inline-size:.55em;block-size:.95em;margin-inline-start:.04em;background-color:var(--vui-typewriter-caret-color);transform:translateY(.08em)}&[data-type=pipe]:before{content:"|"}&[data-type=underscore]:before{content:"_"}}.viraui__typewriter-module__Ghost_R-Yy-{visibility:hidden;-webkit-user-select:none;user-select:none}.viraui__typewriter-module__Typed_00NZ8{display:inline}.viraui__typewriter-module__A11y_B-rjF{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;pointer-events:none}@keyframes viraui__typewriter-module__typewriter-caret-blink_yLCpV{50%{opacity:0}}}

package/dist/components/typewriter/typewriter.guide.json

@@ -14,7 +14,7 @@
   ],
   "accessibility": [
     "The visual display layer is aria-hidden; completed phrases announce through the polite live region",
-    "Reduced motion shows the current phrase immediately without cycling delays",
+    "Reduced motion shows the final phrase immediately without cycling delays",
     "Parent region owns loading or busy semantics when Typewriter is decorative"
   ],
   "antiPatterns": [
@@ -25,15 +25,37 @@
   "related": ["Text", "Title", "Shimmer"],
   "properties": {
     "react": {
+      "caret": {
+        "description": "Selects the caret style rendered after the typed text."
+      },
       "caretColor": {
-        "description": "Overrides the caret color.",
-        "refCss": "caret-color"
+        "description": "Overrides the caret color."
+      },
+      "delay": {
+        "description": "Sets the initial delay before typing starts, in milliseconds."
+      },
+      "deleteSpeed": {
+        "description": "Sets the delay between deleted characters in milliseconds."
+      },
+      "loop": {
+        "description": "Repeats the phrase cycle after the final phrase is deleted."
+      },
+      "pause": {
+        "description": "Sets the pause after a phrase completes before deletion starts, in milliseconds."
+      },
+      "preserveSpace": {
+        "description": "Reserves the full phrase width while characters are typed."
+      },
+      "speed": {
+        "description": "Sets the delay between typed characters in milliseconds."
+      },
+      "texts": {
+        "description": "Cycles through multiple phrases instead of a single `children` string."
       }
     },
     "css": {
       "caret-color": {
-        "description": "Typewriter caret color.",
-        "refReact": "caretColor"
+        "description": "Typewriter caret color."
       }
     }
   }

package/dist/index.js

@@ -2,6 +2,7 @@ import { Accordion } from "./components/accordion/accordion.js";
 import { Annotate } from "./components/annotate/annotate.js";
 import { Avatar } from "./components/avatar/avatar.js";
 import { AvatarGroup } from "./components/avatar-group/avatar-group.js";
+import { Badge } from "./components/badge/badge.js";
 import { Bleed } from "./components/bleed/bleed.js";
 import { Spinner } from "./components/spinner/spinner.js";
 import { Button } from "./components/button/button.js";
@@ -27,6 +28,17 @@ import { IconButton } from "./components/icon-button/icon-button.js";
 import { IconButtonLink } from "./components/icon-button/icon-button-link.js";
 import { LinearProgress } from "./components/linear-progress/linear-progress.js";
 import { Masonry } from "./components/masonry/masonry.js";
+import { Surface } from "./components/surface/surface.js";
+import { MenuCheckboxItem } from "./components/menu/menu-checkbox-item.js";
+import { MenuGroup } from "./components/menu/menu-group.js";
+import { MenuItem } from "./components/menu/menu-item.js";
+import { MenuLinkItem } from "./components/menu/menu-link-item.js";
+import { MenuPopup } from "./components/menu/menu-popup.js";
+import { MenuRadioGroup } from "./components/menu/menu-radio-group.js";
+import { MenuRadioItem } from "./components/menu/menu-radio-item.js";
+import { MenuSeparator } from "./components/menu/menu-separator.js";
+import { MenuSubmenuTrigger } from "./components/menu/menu-submenu-trigger.js";
+import { Menu, MenuSubmenu, MenuTrigger } from "./components/menu/menu.js";
 import { Meter } from "./components/meter/meter.js";
 import { PopoverSheet } from "./components/popover/popover-sheet.js";
 import { Popover, PopoverClose, PopoverDescription, PopoverTitle, PopoverTrigger } from "./components/popover/popover.js";
@@ -39,7 +51,6 @@ import { Shimmer } from "./components/shimmer/shimmer.js";
 import { Skeleton } from "./components/skeleton/skeleton.js";
 import { Slider } from "./components/slider/slider.js";
 import { StaticNoise } from "./components/static-noise/static-noise.js";
-import { Surface } from "./components/surface/surface.js";
 import { Switch } from "./components/switch/switch.js";
 import { Tabs } from "./components/tabs/tabs.js";
 import { Textarea } from "./components/textarea/textarea.js";
@@ -51,4 +62,4 @@ import { ToggleGroup } from "./components/toggle-group/toggle-group.js";
 import { Typewriter } from "./components/typewriter/typewriter.js";
 import { TooltipContent } from "./components/tooltip/tooltip-content.js";
 import { Tooltip, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
-export { Accordion, Annotate, Avatar, AvatarGroup, Bleed, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, IconButton, IconButtonLink, 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, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps };
+export { Accordion, Annotate, Avatar, AvatarGroup, Badge, Bleed, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, IconButton, IconButtonLink, LinearProgress, Masonry, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps };

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

@@ -15,4 +15,6 @@ export declare const ChromeCheck: React.FC<ChromeIconProps>;
 export declare const ChromeChevronExpandY: React.FC<ChromeIconProps>;
 export declare const ChromeChevronUp: React.FC<ChromeIconProps>;
 export declare const ChromeChevronDown: React.FC<ChromeIconProps>;
+/** End-edge chevron (submenu). Mirror in RTL via CSS `:dir(rtl)`, not JS. */
+export declare const ChromeChevronEnd: React.FC<ChromeIconProps>;
 export declare const ChromeXmark: React.FC<ChromeIconProps>;

package/dist/internal/chrome-icons/chrome-icons.js

@@ -40,10 +40,16 @@ var ChromeChevronDown = ({ className, size }) => /* @__PURE__ */ jsx(ChromeSvg,
 	size,
 	children: /* @__PURE__ */ jsx("path", { d: "M9 13.5a.74.74 0 0 1-.53-.22L2.22 7.03a.75.75 0 0 1 1.061-1.06l5.72 5.72 5.72-5.72a.75.75 0 1 1 1.061 1.061l-6.25 6.25a.75.75 0 0 1-.53.22z" })
 });
+/** End-edge chevron (submenu). Mirror in RTL via CSS `:dir(rtl)`, not JS. */
+var ChromeChevronEnd = ({ className, size }) => /* @__PURE__ */ jsx(ChromeSvg, {
+	className,
+	size,
+	children: /* @__PURE__ */ jsx("path", { d: "M13.28 8.47 7.03 2.22a.75.75 0 1 0-1.061 1.061l5.72 5.72-5.72 5.72a.75.75 0 0 0 1.06 1.061l6.25-6.25a.75.75 0 0 0 0-1.061z" })
+});
 var ChromeXmark = ({ className, size }) => /* @__PURE__ */ jsx(ChromeSvg, {
 	className,
 	size,
 	children: /* @__PURE__ */ jsx("path", { d: "M13.664 3.23a.783.783 0 1 1 1.107 1.106L10.107 9l4.664 4.664a.783.783 0 0 1-1.107 1.107L9 10.107 4.336 14.77a.783.783 0 1 1-1.107-1.107L7.893 9 3.23 4.336a.782.782 0 1 1 1.107-1.107L9 7.893z" })
 });
 //#endregion
-export { ChromeCheck, ChromeChevronDown, ChromeChevronExpandY, ChromeChevronUp, ChromeMinus, ChromePlus, ChromeXmark };
+export { ChromeCheck, ChromeChevronDown, ChromeChevronEnd, ChromeChevronExpandY, ChromeChevronUp, ChromeMinus, ChromePlus, ChromeXmark };

package/dist/preflight-surface.json

@@ -134,7 +134,7 @@
       "name": "--shadow-color",
       "module": "elevations",
       "setBy": "inline style or component elevation mapping",
-      "default": "oklch(0% 0 0deg)",
+      "default": "oklch(0% 0 0)",
       "purpose": "Shadow tint for data-elevation stacks."
     },
     {

package/dist/preflight.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.preflight{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-mode{syntax:"<color>";initial-value:#000;inherits:true}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b/0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-mode:contrast-color(var(--global-background));font-size: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{display:inline-flex;vertical-align:middle;&:not([fill]){fill:currentcolor}}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}[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=true]{--vira-flex-grow:1;flex-grow:1}[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=true]{--vira-flex-shrink:1;flex-shrink:1}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/12%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{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)}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-mode=dark]{color-scheme:dark}[data-mode=light]{color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{@container root style(--is-light-mode: black){color-scheme:dark}@container root style(--is-light-mode: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--vibrancy-enable: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-mode: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.preflight{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-mode{syntax:"<color>";initial-value:#000;inherits:true}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b/0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-mode:contrast-color(var(--global-background));font-size: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{display:inline-flex;vertical-align:middle;&:not([fill]){fill:currentcolor}}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklch(0% 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}}@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=true]{--vira-flex-grow:1;flex-grow:1}[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=true]{--vira-flex-shrink:1;flex-shrink:1}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/12%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{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)}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-mode=dark]{color-scheme:dark}[data-mode=light]{color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{@container root style(--is-light-mode: black){color-scheme:dark}@container root style(--is-light-mode: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--vibrancy-enable: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-mode: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}