@viraui/react 2026.6.3 → 2026.6.5

package/README.md

@@ -1,9 +1,7 @@
 <!-- PROJECT LOGO -->
 <br />
 <div align="center">
-  <h3 align="center" title="ViraUI">
-    <img alt="ViraUI" src="https://viraui.dev/viraui-logo-midgray.png" height="30" draggable="false" />
-  </h3>
+  <h1 align="center">ViraUI</h1>
   <br />
   <h2 align="center" style="font-weight: 500;">
     Ship real UI at the speed of thought.

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

@@ -17,6 +17,7 @@ var ButtonLink = ({ children, className, addon, addonPosition = "start", loading
 			...otherProps,
 			"aria-busy": loading || void 0,
 			className: clsx(button_module_default.Button, className),
+			"data-no-link-style": true,
 			"data-loading": loadingAttr,
 			"data-pill": pill ? "true" : "false",
 			"data-size": size,

package/dist/components/chip/chip.js

@@ -35,6 +35,7 @@ var Chip = ({ addon, addonPosition = "start", children, className, ref, render,
 			...otherProps,
 			"data-grow": "false",
 			"data-shrink": "false",
+			"data-no-link-style": true,
 			children: content,
 			className: clsx(chip_module_default.Chip, className),
 			"data-addon-position": addon ? addonPosition : void 0,

package/dist/components/dialog/dialog.css

@@ -11,4 +11,4 @@
   );--__dialog-translate-y:calc(
     var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px) - var(--__dialog-stack-peek-offset) -
       var(--__dialog-stack-shrink) * var(--__dialog-stack-height)
-  );max-block-size:var(--vui-dialog-max-block-size,97dvh);outline:none;pointer-events:auto;touch-action:none;height:var(--drawer-height,auto);transform-origin:50% calc(100% - var(--__dialog-bleed));transition:opacity var(--duration-slow) var(--easing-entrance),transform var(--duration-slow) var(--easing-entrance),height var(--duration-slow) var(--easing-entrance);transform:translateY(var(--__dialog-translate-y)) scale(var(--__dialog-stack-scale));&[data-nested-drawer-open]{height:calc(var(--__dialog-stack-height) + var(--__dialog-bleed))}&[data-starting-style]{opacity:0;transform:translateY(100%)}&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength, 1) * var(--duration-fast));transition-timing-function:var(--easing-exit)}&[data-ending-style][data-swipe-direction=down]{transform:translateY(100%)}&[data-nested-drawer-swiping]:not([data-ending-style]),&[data-swiping]:not([data-ending-style]){transition-duration:0s}@media (prefers-reduced-motion:reduce){&[data-ending-style][data-swipe-direction=down],&[data-starting-style]{opacity:1;transform:translateY(0)}}}.viraui__dialog-module__HandleShape_mEg8R{--__corner-shape:round;inline-size:var(--space-xs);block-size:var(--space-xs);background-color:oklab(from var(--global-contrast) l a b/.3);border-radius:var(--radius-full)}.viraui__dialog-module__Header_WnBly{touch-action:none;-webkit-user-select:none;user-select:none}.viraui__dialog-module__Body_9-UgN{min-block-size:0}.viraui__dialog-module__Content_r8lJc{min-block-size:0;overflow:auto;overscroll-behavior:contain;touch-action:auto;padding-block-end:calc(env(safe-area-inset-bottom) + var(--space-m));transition:opacity var(--duration-fast) var(--easing-standard),overflow 0s allow-discrete var(--duration-fast);.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open] &{opacity:0;overflow:hidden;transition:opacity var(--duration-fast) var(--easing-standard),overflow 0s allow-discrete}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open][data-nested-drawer-swiping] &{opacity:1;overflow:hidden}}.viraui__dialog-module__IndentBackground_OEfbh{position:absolute;inset:0}.viraui__dialog-module__Indent_qfiNW{--__dialog-indent-radius:calc(1rem * (1 - var(--drawer-swipe-progress)));--__dialog-indent-transition:calc(1 - clamp(0, calc(var(--drawer-swipe-progress) * 100000), 1));transition:transform var(--duration-normal) var(--easing-entrance),border-radius var(--duration-fast) var(--easing-entrance);transition-duration:calc(var(--duration-normal) * var(--__dialog-indent-transition)),calc(var(--duration-fast) * var(--__dialog-indent-transition));transform-origin:center top;will-change:transform;&[data-active]{transform:scale(calc(.98 + (.02 * var(--drawer-swipe-progress)))) translateY(calc(.5rem * (1 - var(--drawer-swipe-progress))));border-top-left-radius:var(--__dialog-indent-radius);border-top-right-radius:var(--__dialog-indent-radius)}}}@layer viraui.overrides{.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open]{overflow:hidden}.viraui__dialog-module__CloseButton_U-B1r.viraui__dialog-module__CloseButton_U-B1r{position:absolute;top:1rem;right:1rem}}
+  );max-block-size:var(--vui-dialog-max-block-size,97dvh);outline:none;pointer-events:auto;touch-action:none;height:var(--drawer-height,auto);transform-origin:50% calc(100% - var(--__dialog-bleed));transition:opacity var(--duration-slow) var(--easing-entrance),transform var(--duration-slow) var(--easing-entrance),height var(--duration-slow) var(--easing-entrance);transform:translateY(var(--__dialog-translate-y)) scale(var(--__dialog-stack-scale));&[data-nested-drawer-open]{height:calc(var(--__dialog-stack-height) + var(--__dialog-bleed))}&[data-starting-style]{opacity:0;transform:translateY(100%)}&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength, 1) * var(--duration-fast));transition-timing-function:var(--easing-exit)}&[data-ending-style][data-swipe-direction=down]{transform:translateY(100%)}&[data-nested-drawer-swiping]:not([data-ending-style]),&[data-swiping]:not([data-ending-style]){transition-duration:0s}@media (prefers-reduced-motion:reduce){&[data-ending-style][data-swipe-direction=down],&[data-starting-style]{opacity:1;transform:translateY(0)}}}.viraui__dialog-module__HandleShape_mEg8R{--__corner-shape:round;inline-size:var(--space-xs);block-size:var(--space-xs);background-color:oklab(from var(--global-contrast) l a b/.3);border-radius:var(--radius-full)}.viraui__dialog-module__Header_WnBly{touch-action:none;-webkit-user-select:none;user-select:none}.viraui__dialog-module__Body_9-UgN{min-block-size:0}.viraui__dialog-module__Content_r8lJc{min-block-size:0;overflow:auto;overscroll-behavior:contain;touch-action:auto;padding-block-end:calc(env(safe-area-inset-bottom) + var(--space-m));transition:opacity var(--duration-fast) var(--easing-standard),overflow 0s allow-discrete var(--duration-fast);.viraui__dialog-module__Popup_5qIyj[data-ending-style] &,.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open] &,.viraui__dialog-module__Popup_5qIyj[data-starting-style] &{overflow:hidden;transition:opacity var(--duration-fast) var(--easing-standard),overflow 0s allow-discrete}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open] &{opacity:0}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open][data-nested-drawer-swiping] &{opacity:1;overflow:hidden}}.viraui__dialog-module__IndentBackground_OEfbh{position:absolute;inset:0}.viraui__dialog-module__Indent_qfiNW{--__dialog-indent-radius:calc(1rem * (1 - var(--drawer-swipe-progress)));--__dialog-indent-transition:calc(1 - clamp(0, calc(var(--drawer-swipe-progress) * 100000), 1));transition:transform var(--duration-normal) var(--easing-entrance),border-radius var(--duration-fast) var(--easing-entrance);transition-duration:calc(var(--duration-normal) * var(--__dialog-indent-transition)),calc(var(--duration-fast) * var(--__dialog-indent-transition));transform-origin:center top;will-change:transform;&[data-active]{transform:scale(calc(.98 + (.02 * var(--drawer-swipe-progress)))) translateY(calc(.5rem * (1 - var(--drawer-swipe-progress))));border-top-left-radius:var(--__dialog-indent-radius);border-top-right-radius:var(--__dialog-indent-radius)}}}@layer viraui.overrides{.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open]{overflow:hidden}.viraui__dialog-module__CloseButton_U-B1r.viraui__dialog-module__CloseButton_U-B1r{position:absolute;top:1rem;right:1rem}}

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

@@ -9,6 +9,7 @@ import { Menu } from "@base-ui/react";
 var MenuLinkItem = ({ addon, children, className, note, sentiment, ...otherProps }) => /* @__PURE__ */ jsx(Menu.LinkItem, {
 	...otherProps,
 	className: clsx(menu_module_default.Item, className),
+	"data-no-link-style": true,
 	...sentiment && { "data-sentiment": sentiment },
 	render: /* @__PURE__ */ jsx(Surface, {
 		radius: "auto",

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

@@ -14,6 +14,7 @@ var TabsTab = ({ addon, addonPosition = "start", children, className, ...otherPr
 	}),
 	...otherProps,
 	children: /* @__PURE__ */ jsx(Text, {
+		fluid: false,
 		tone: "muted",
 		whiteSpace: "nowrap",
 		className: tabs_module_default.Label,

package/dist/components/text/text.css

@@ -2,4 +2,4 @@
     var(--__text-size-min),
     calc(var(--__text-size-min) + (var(--__text-size-max) - var(--__text-size-min)) * var(--__text-fluid)),
     var(--__text-size-max)
-  );--vui-text-font-family:var(--font-family-body);--vui-text-line-height:var(--font-leading-m);margin:0;max-inline-size:var(--vui-text-max-width);font-family:var(--vui-text-font-family);font-size:var(--vui-text-font-size);line-height:var(--vui-text-line-height);text-align:var(--vui-text-align);letter-spacing:var(--vui-text-letter-spacing);text-transform:var(--vui-text-text-transform);white-space:var(--vui-text-white-space);word-break:break-word;font-weight:var(--vui-text-font-weight);font-stretch:calc(var(--vui-text-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-text-font-weight),"wdth" var(--vui-text-font-width),"opsz" var(--vui-text-font-opsz);text-box:var(--vui-text-trim) var(--vui-text-trim-type);&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--vui-text-padding-block-start) var(--vui-text-padding-inline-end) var(--vui-text-padding-block-end) var(--vui-text-padding-inline-start)}&[data-text-family=mono]{--vui-text-font-family:var(--font-family-mono)}&[data-text-size="4xl"]{--__text-size-min:var(--font-scale-body-3xl);--__text-size-max:var(--font-scale-body-4xl)}&[data-text-size="3xl"]{--__text-size-min:var(--font-scale-body-2xl);--__text-size-max:var(--font-scale-body-3xl)}&[data-text-size="2xl"]{--__text-size-min:var(--font-scale-body-xl);--__text-size-max:var(--font-scale-body-2xl)}&[data-text-size=xl]{--__text-size-min:var(--font-scale-body-l);--__text-size-max:var(--font-scale-body-xl)}&[data-text-size=l]{--__text-size-min:var(--font-scale-body-m);--__text-size-max:var(--font-scale-body-l)}&[data-text-size=s]{--__text-size-max:var(--font-scale-body-s)}&[data-text-size=s],&[data-text-size=xs]{--__text-size-min:var(--font-scale-body-xs)}&[data-text-size=xs]{--__text-size-max:var(--font-scale-body-xs)}&[data-text-fluid=false]{--vui-text-font-size:var(--__text-size-max)}@container root style(--effect-fluid-typography: initial){--vui-text-font-size:var(--__text-size-max)}&[data-text-weight=light]{--vui-text-font-weight:200}&[data-text-weight=semibold]{--vui-text-font-weight:600}&[data-text-weight=bold]{--vui-text-font-weight:800}&[data-text-tone=primary]{color:var(--global-primary)}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--vui-text-literal-color)}&[data-text-line-height=none]{--vui-text-line-height:0}&[data-text-line-height=xs]{--vui-text-line-height:var(--font-leading-xs)}&[data-text-line-height=s]{--vui-text-line-height:var(--font-leading-s)}&[data-text-line-height=m]{--vui-text-line-height:var(--font-leading-m)}&[data-text-line-height=l]{--vui-text-line-height:var(--font-leading-l)}}}
+  );--vui-text-font-family:var(--font-family-body);--vui-text-line-height:var(--font-leading-m);margin:0;max-inline-size:var(--vui-text-max-width);font-family:var(--vui-text-font-family);font-size:var(--vui-text-font-size);line-height:var(--vui-text-line-height);text-align:var(--vui-text-align);letter-spacing:var(--vui-text-letter-spacing);text-transform:var(--vui-text-text-transform);white-space:var(--vui-text-white-space);word-break:break-word;font-weight:var(--vui-text-font-weight);font-stretch:calc(var(--vui-text-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-text-font-weight),"wdth" var(--vui-text-font-width),"opsz" var(--vui-text-font-opsz);text-box:var(--vui-text-trim) var(--vui-text-trim-type);&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--vui-text-padding-block-start) var(--vui-text-padding-inline-end) var(--vui-text-padding-block-end) var(--vui-text-padding-inline-start)}&[data-text-family=mono]{--vui-text-font-family:var(--font-family-mono)}&[data-text-size="4xl"]{--__text-size-min:var(--font-scale-body-3xl);--__text-size-max:var(--font-scale-body-4xl)}&[data-text-size="3xl"]{--__text-size-min:var(--font-scale-body-2xl);--__text-size-max:var(--font-scale-body-3xl)}&[data-text-size="2xl"]{--__text-size-min:var(--font-scale-body-xl);--__text-size-max:var(--font-scale-body-2xl)}&[data-text-size=xl]{--__text-size-min:var(--font-scale-body-l);--__text-size-max:var(--font-scale-body-xl)}&[data-text-size=l]{--__text-size-min:var(--font-scale-body-m);--__text-size-max:var(--font-scale-body-l)}&[data-text-size=s]{--__text-size-max:var(--font-scale-body-s)}&[data-text-size=s],&[data-text-size=xs]{--__text-size-min:var(--font-scale-body-xs)}&[data-text-size=xs]{--__text-size-max:var(--font-scale-body-xs)}& .viraui__text-module__Text_bS8kv:not([data-text-size]){font-size:inherit}& .viraui__text-module__Text_bS8kv:not([data-text-line-height]){line-height:inherit}&[data-text-fluid=false]{--vui-text-font-size:var(--__text-size-max)}@container root style(--effect-fluid-typography: initial){--vui-text-font-size:var(--__text-size-max)}&[data-text-weight=light]{--vui-text-font-weight:200}&[data-text-weight=semibold]{--vui-text-font-weight:600}&[data-text-weight=bold]{--vui-text-font-weight:800}&[data-text-tone=primary]{color:var(--global-primary)}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--vui-text-literal-color)}&[data-text-line-height=none]{--vui-text-line-height:0}&[data-text-line-height=xs]{--vui-text-line-height:var(--font-leading-xs)}&[data-text-line-height=s]{--vui-text-line-height:var(--font-leading-s)}&[data-text-line-height=m]{--vui-text-line-height:var(--font-leading-m)}&[data-text-line-height=l]{--vui-text-line-height:var(--font-leading-l)}}}

package/dist/components/text/text.d.ts

@@ -27,8 +27,9 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
     /**
      * Selects a semantic body typography size from the active theme scale
      * (`4xl` | `3xl` | `2xl` | `xl` | `l` | `m` | `s` | `xs`).
+     * Omit when nested in Text so font-size inherits the outer Text size.
      *
-     * @default 'm'
+     * @default 'm' on root Text (CSS); inherit when nested and omitted
      */
     size?: '4xl' | '3xl' | '2xl' | 'xl' | 'l' | 'm' | 's' | 'xs';
     /**
@@ -60,8 +61,9 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
     color?: string;
     /**
      * Controls line height through foundation leading tokens.
+     * Omit when nested in Text so line-height inherits the outer Text.
      *
-     * @default 'm'
+     * @default 'm' on root Text (CSS); inherit when nested and omitted
      */
     lineHeight?: 'none' | 'xs' | 's' | 'm' | 'l';
     /**

package/dist/components/text/text.js

@@ -4,7 +4,7 @@ import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
 import text_module_default from "./text.module.js";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/text/text.tsx
-var Text = ({ align = "start", balanced = false, selection = true, className, color, family = "body", fluid = false, fontWidth, hPadding, lineHeight = "m", maxWidth, opticalSize, ref, render, size = "m", style, tone, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight = "regular", whiteSpace = "normal", ...otherProps }) => {
+var Text = ({ align = "start", balanced = false, selection = true, className, color, family = "body", fluid = false, fontWidth, hPadding, lineHeight, maxWidth, opticalSize, ref, render, size, style, tone, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight = "regular", whiteSpace = "normal", ...otherProps }) => {
 	const hasPadding = Boolean(hPadding || vPadding);
 	const dynamicStyle = {
 		"--vui-text-align": align,

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{position:relative;isolation:isolate}.viraui__typewriter-module__Ghost_R-Yy-{visibility:hidden;white-space:pre-wrap}.viraui__typewriter-module__Typed_00NZ8{white-space:pre-wrap}.viraui__typewriter-module__Typewriter_R3sbb[data-preserve-space]>.viraui__typewriter-module__Typed_00NZ8{position:absolute;inset-inline-start:0;inset-block-start:0}.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;&[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__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__Typewriter_R3sbb[data-preserve-space]{display:flex}.viraui__typewriter-module__Ghost_R-Yy-{visibility:hidden;white-space:pre-wrap}.viraui__typewriter-module__Typed_00NZ8{white-space:pre-wrap}.viraui__typewriter-module__Typewriter_R3sbb[data-preserve-space]>.viraui__typewriter-module__Typed_00NZ8{position:absolute;inset-inline:0;inset-block-start:0}.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;&[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__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/preflight.css

@@ -1,4 +1,4 @@
 @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.preflight{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-mode{syntax:"<color>";initial-value:#000;inherits:true}@property --vira-flex-grow{syntax:"<number>";initial-value:1;inherits:false}@property --vira-flex-shrink{syntax:"<number>";initial-value:1;inherits:false}@property --__corner-shape{syntax:"*";inherits:false}}@layer viraui.preflight{:root{--font-scale-body-m:1rem;--font-scale-body-s:min(1rem, max(0.875rem, round(down, calc(1rem / pow(var(--font-body-typescale), 1)), 1px)));--font-scale-body-xs:min(
       var(--font-scale-body-s),
       max(0.75rem, round(down, calc(1rem / pow(var(--font-body-typescale), 2)), 1px))
-    );--font-scale-body-l:round(down, calc(1rem * pow(var(--font-body-typescale), 1)), 1px);--font-scale-body-xl:round(down, calc(1rem * pow(var(--font-body-typescale), 2)), 1px);--font-scale-body-2xl:round(down, calc(1rem * pow(var(--font-body-typescale), 3)), 1px);--font-scale-body-3xl:round(down, calc(1rem * pow(var(--font-body-typescale), 4)), 1px);--font-scale-body-4xl:round(down, calc(1rem * pow(var(--font-body-typescale), 5)), 1px);--font-scale-h6:round(down, calc(1rem * pow(var(--font-heading-typescale), 1)), 1px);--font-scale-h5:round(down, calc(1rem * pow(var(--font-heading-typescale), 2)), 1px);--font-scale-h4:round(down, calc(1rem * pow(var(--font-heading-typescale), 3)), 1px);--font-scale-h3:round(down, calc(1rem * pow(var(--font-heading-typescale), 4)), 1px);--font-scale-h2:round(down, calc(1rem * pow(var(--font-heading-typescale), 5)), 1px);--font-scale-h1:round(down, calc(1rem * pow(var(--font-heading-typescale), 6)), 1px);--font-scale-display:round(down, calc(1rem * pow(var(--font-heading-typescale), 8)), 1px)}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b / 0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-mode:contrast-color(var(--global-background));font-size:var(--font-root-size);box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal;scroll-behavior:smooth;@media (prefers-reduced-motion:reduce){scroll-behavior:auto}}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);@container root not style(--effect-corner-shape: initial){corner-shape:var(--__corner-shape,var(--corner-shape))}@media (prefers-reduced-motion:reduce){animation:none!important;transition:none!important}}:focus-visible{outline:var(--outline);outline-offset:var(--outline-offset)}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-m);font-optical-sizing:auto;font-family:var(--font-family-body),system-ui,sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums;@container root not style(--effect-holofoil: initial){&:after{content:"";position:fixed;inset:0;z-index:999;background-color:#99ffd8;pointer-events:none;mix-blend-mode:multiply;contain:strict;isolation:isolate;opacity:25%;background-image:radial-gradient(at 79% 56%,#70ade6 0,#0000 50%),radial-gradient(at 61% 80%,#ee909e 0,#0000 50%),radial-gradient(at 0 63%,#fdbc68 0,#0000 50%),radial-gradient(at 6% 50%,#e5cb8a 0,#0000 50%),radial-gradient(at 23% 10%,#e5db8f 0,#0000 50%),radial-gradient(at 36% 91%,#a0eea8 0,#0000 50%),radial-gradient(at 2% 80%,#e3a47d 0,#0000 50%);@container root style(--is-light-mode: white){mix-blend-mode:color;opacity:15%}}}}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg{display:inline-flex;vertical-align:middle;&:not([fill]){fill:currentcolor}}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-xs) + var(--space-2xs)) var(--space-s)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}}@layer viraui.preflight{@container root not style(--effect-shadows: initial){[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklch(0% 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),#0000 calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation-hover="2"]:hover,[data-elevation-hover="3"]:hover,[data-elevation-hover="4"]:hover,[data-elevation="1"],[data-elevation="2"],[data-elevation="3"],[data-elevation="4"]{box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) var(--shadow-blur-1) oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) var(--shadow-blur-2) oklab(from var(--shadow-color) l a b/.08),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) var(--shadow-blur-3) oklab(from var(--shadow-color) l a b/.06),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) var(--shadow-blur-4) oklab(from var(--shadow-color) l a b/.04),calc(var(--x5) * var(--shadow-direction)) calc(var(--y5) * var(--shadow-direction)) var(--shadow-blur-5) oklab(from var(--shadow-color) l a b/.02),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:1px;--y3:1px;--y4:3px;--y5:4px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--x5:0px;--shadow-blur-1:0px;--shadow-blur-2:1px;--shadow-blur-3:1px;--shadow-blur-4:3px;--shadow-blur-5:4px}[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;--y5:0px;--x1:0px;--x2:1px;--x3:1px;--x4:3px;--x5:4px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:0px;--y2:1px;--y3:3px;--y4:5px;--y5:8px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--x5:0px;--shadow-blur-1:0px;--shadow-blur-2:1px;--shadow-blur-3:3px;--shadow-blur-4:5px;--shadow-blur-5:8px}[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;--y5:0px;--x1:0px;--x2:1px;--x3:3px;--x4:5px;--x5:8px}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:1px;--y2:3px;--y3:6px;--y4:10px;--y5:16px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--x5:0px;--shadow-blur-1:1px;--shadow-blur-2:3px;--shadow-blur-3:6px;--shadow-blur-4:10px;--shadow-blur-5:16px}[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;--y5:0px;--x1:1px;--x2:3px;--x3:6px;--x4:10px;--x5:16px}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:1px;--y2:5px;--y3:12px;--y4:20px;--y5:32px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--x5:0px;--shadow-blur-1:1px;--shadow-blur-2:5px;--shadow-blur-3:12px;--shadow-blur-4:20px;--shadow-blur-5:32px}[data-elevation-hover="4"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--y5:0px;--x1:1px;--x2:5px;--x3:12px;--x4:20px;--x5:32px}}}@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-m)}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-s)}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-s)}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-xl);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-xl);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-s);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{font-size:1em;font-family:var(--font-family-mono);&:not(:where(pre &)){background-color:var(--global-contrast);border-radius:var(--radius-s);box-shadow:var(--global-contrast);padding:.2em .4em}}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-mode=dark]{--is-light-mode:#fff;color:var(--global-foreground);color-scheme:dark}[data-mode=light]{--is-light-mode:#000;color:var(--global-foreground);color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{color:var(--global-foreground);@container root style(--is-light-mode: black){color-scheme:dark}@container root style(--is-light-mode: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--effect-vibrancy: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-mode: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}
+    );--font-scale-body-l:round(down, calc(1rem * pow(var(--font-body-typescale), 1)), 1px);--font-scale-body-xl:round(down, calc(1rem * pow(var(--font-body-typescale), 2)), 1px);--font-scale-body-2xl:round(down, calc(1rem * pow(var(--font-body-typescale), 3)), 1px);--font-scale-body-3xl:round(down, calc(1rem * pow(var(--font-body-typescale), 4)), 1px);--font-scale-body-4xl:round(down, calc(1rem * pow(var(--font-body-typescale), 5)), 1px);--font-scale-h6:round(down, calc(1rem * pow(var(--font-heading-typescale), 1)), 1px);--font-scale-h5:round(down, calc(1rem * pow(var(--font-heading-typescale), 2)), 1px);--font-scale-h4:round(down, calc(1rem * pow(var(--font-heading-typescale), 3)), 1px);--font-scale-h3:round(down, calc(1rem * pow(var(--font-heading-typescale), 4)), 1px);--font-scale-h2:round(down, calc(1rem * pow(var(--font-heading-typescale), 5)), 1px);--font-scale-h1:round(down, calc(1rem * pow(var(--font-heading-typescale), 6)), 1px);--font-scale-display:round(down, calc(1rem * pow(var(--font-heading-typescale), 8)), 1px)}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b / 0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-mode:contrast-color(var(--global-background));font-size:var(--font-root-size);box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal;scroll-behavior:smooth;@media (prefers-reduced-motion:reduce){scroll-behavior:auto}}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);@container root not style(--effect-corner-shape: initial){corner-shape:var(--__corner-shape,var(--corner-shape))}@media (prefers-reduced-motion:reduce){animation:none!important;transition:none!important}}:focus-visible{outline:var(--outline);outline-offset:var(--outline-offset)}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-m);font-optical-sizing:auto;font-family:var(--font-family-body),system-ui,sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums;@container root not style(--effect-holofoil: initial){&:after{content:"";position:fixed;inset:0;z-index:999;background-color:#99ffd8;pointer-events:none;mix-blend-mode:multiply;contain:strict;isolation:isolate;opacity:25%;background-image:radial-gradient(at 79% 56%,#70ade6 0,#0000 50%),radial-gradient(at 61% 80%,#ee909e 0,#0000 50%),radial-gradient(at 0 63%,#fdbc68 0,#0000 50%),radial-gradient(at 6% 50%,#e5cb8a 0,#0000 50%),radial-gradient(at 23% 10%,#e5db8f 0,#0000 50%),radial-gradient(at 36% 91%,#a0eea8 0,#0000 50%),radial-gradient(at 2% 80%,#e3a47d 0,#0000 50%);@container root style(--is-light-mode: white){mix-blend-mode:color;opacity:15%}}}}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg{display:inline-flex;vertical-align:middle;&:not([fill]){fill:currentcolor}}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-xs) + var(--space-2xs)) var(--space-s)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}}@layer viraui.preflight{@container root not style(--effect-shadows: initial){[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklch(0% 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),#0000 calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation-hover="2"]:hover,[data-elevation-hover="3"]:hover,[data-elevation-hover="4"]:hover,[data-elevation="1"],[data-elevation="2"],[data-elevation="3"],[data-elevation="4"]{box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) var(--shadow-blur-1) oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) var(--shadow-blur-2) oklab(from var(--shadow-color) l a b/.08),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) var(--shadow-blur-3) oklab(from var(--shadow-color) l a b/.06),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) var(--shadow-blur-4) oklab(from var(--shadow-color) l a b/.04),calc(var(--x5) * var(--shadow-direction)) calc(var(--y5) * var(--shadow-direction)) var(--shadow-blur-5) oklab(from var(--shadow-color) l a b/.02),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:1px;--y3:1px;--y4:3px;--y5:4px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--x5:0px;--shadow-blur-1:0px;--shadow-blur-2:1px;--shadow-blur-3:1px;--shadow-blur-4:3px;--shadow-blur-5:4px}[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;--y5:0px;--x1:0px;--x2:1px;--x3:1px;--x4:3px;--x5:4px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:0px;--y2:1px;--y3:3px;--y4:5px;--y5:8px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--x5:0px;--shadow-blur-1:0px;--shadow-blur-2:1px;--shadow-blur-3:3px;--shadow-blur-4:5px;--shadow-blur-5:8px}[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;--y5:0px;--x1:0px;--x2:1px;--x3:3px;--x4:5px;--x5:8px}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:1px;--y2:3px;--y3:6px;--y4:10px;--y5:16px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--x5:0px;--shadow-blur-1:1px;--shadow-blur-2:3px;--shadow-blur-3:6px;--shadow-blur-4:10px;--shadow-blur-5:16px}[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;--y5:0px;--x1:1px;--x2:3px;--x3:6px;--x4:10px;--x5:16px}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:1px;--y2:5px;--y3:12px;--y4:20px;--y5:32px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--x5:0px;--shadow-blur-1:1px;--shadow-blur-2:5px;--shadow-blur-3:12px;--shadow-blur-4:20px;--shadow-blur-5:32px}[data-elevation-hover="4"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--y5:0px;--x1:1px;--x2:5px;--x3:12px;--x4:20px;--x5:32px}}}@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-m)}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;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-s)}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-s)}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-xl);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-xl);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-s);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{font-size:1em;font-family:var(--font-family-mono);&:not(:where(pre &)){background-color:var(--global-contrast);border-radius:var(--radius-s);box-shadow:var(--global-contrast);padding:.2em .4em}}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-mode=dark]{--is-light-mode:#fff;color:var(--global-foreground);color-scheme:dark}[data-mode=light]{--is-light-mode:#000;color:var(--global-foreground);color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{color:var(--global-foreground);@container root style(--is-light-mode: black){color-scheme:dark}@container root style(--is-light-mode: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--effect-vibrancy: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-mode: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}

package/dist/specs/PROTOCOL.md

@@ -44,9 +44,10 @@ Prefer opening via package export / that `dist/specs/` tree. The `version` attri
 Consumer agents build screens **with** ViraUI — public parts, compounds, and props from the units — not **around** it with immediate CSS overrides.
 
 1. Index → activity load → open `meta` / `props` / `usage` for every Vira surface you touch **before** JSX that invents classNames or a CSS module targeting those roots.
-2. Prefer another Vira part or public prop over custom CSS (layout → `Stack`/`Grid`/`Masonry`/`Bleed`/`Surface`; fill → `fullWidth` / `expandChildren`; type → `Text`/`Title` props; chrome → `Surface` / `Elevator`).
-3. Custom CSS defaults to **app chrome the system does not own** (page backdrop image, document scrollport, one-off marketing layout). It is **not** a license to reshape Vira control geometry, reinvent owned props, or “fix” controls that already look correct under theme + preflight — **unless the consumer expressly requests** that override / personalization. A future override layer will own formal customization hooks; until then, still open `props`/`usage` first and apply only the asked CSS.
-4. If `usage.xml` lists a **dont** against the CSS you are about to write and the consumer did **not** expressly override that guidance — stop. Do not ship it.
+2. Prefer another Vira part or public prop over custom CSS (layout → `Stack`/`Grid`/`Masonry`/`Bleed`/`Surface`; fill → `fullWidth` / `expandChildren`; one-sided inset → `hPadding`/`vPadding` `[start, end]` tuples — not `paddingBlock*`/`paddingInline*` style; type → `Text`/`Title` props; chrome → `Surface` / `Elevator`).
+3. **Omit `render` when it restates the component’s default root.** Confirm the default in that surface’s `props`/`usage` (e.g. Stack → `div`). Do **not** write `render={<div />}` on Stack, or any other `render={<SameDefault />}` noop. Use `render` only to change the host (semantic tag, `Surface`, another component).
+4. Custom CSS defaults to **app chrome the system does not own** (page backdrop image, document scrollport, one-off marketing layout). It is **not** a license to reshape Vira control geometry, reinvent owned props, or “fix” controls that already look correct under theme + preflight — **unless the consumer expressly requests** that override / personalization. A future override layer will own formal customization hooks; until then, still open `props`/`usage` first and apply only the asked CSS.
+5. If `usage.xml` lists a **dont** against the CSS you are about to write and the consumer did **not** expressly override that guidance — stop. Do not ship it.
 
 Opening a CSS module on a Vira root without having opened that surface’s `props.xml` + `usage.xml` is a protocol defect. Unsolicited reshape CSS (no consumer ask) is the same defect.
 

package/dist/specs/activity-hints.xml

@@ -20,6 +20,7 @@
     <forbid>Opening every component props.xml in the package</forbid>
     <forbid>Writing unsolicited className / CSS module / utility styles on a Vira root before opening that surface props.xml and usage.xml</forbid>
     <forbid>Treating Vira controls as raw HTML to reshape without an express consumer request for override / personalization — compose with public parts and props first</forbid>
+    <forbid>Passing render that restates the component default root (e.g. Stack render={&lt;div /&gt;}; confirm default in props/usage) — omit render unless the host changes</forbid>
   </activity>
   <activity id="foundation-attrs">
     <description>Mode, vibrancy, elevation, grow/shrink hooks.</description>
@@ -63,6 +64,7 @@
       <step unit="usage" note="confirm stack/surface/grid (etc.) do/dont after pattern" />
       <step unit="props" note="verify spacing / render / fullWidth names" />
     </load>
-    <forbid>Inventing display:flex / display:grid / CSS gap/padding/border chrome when Stack, Grid, Masonry, Bleed, or Surface cover it</forbid>
+    <forbid>Inventing display:flex / display:grid / CSS gap/padding/paddingBlock*/paddingInline*/border chrome when Stack, Grid, Masonry, Bleed, or Surface cover it — one-sided inset → hPadding/vPadding [start, end] tuples</forbid>
+    <forbid>Passing render={&lt;div /&gt;} (or any render that matches the component default root) — omit render; use it only for a different host</forbid>
   </activity>
 </activity_hints>

package/dist/specs/components/button/usage.xml

@@ -7,7 +7,7 @@
   <do>Full-bleed or equal-width Buttons: wrap in Stack with `fullWidth` and/or `expandChildren` — never per-Button width CSS</do>
   <do>Dialog / sheet action strips: Stack row of Button + ButtonLink; Cancel via `Dialog.Close render={&lt;Button variant=&quot;secondary&quot; /&gt;}`</do>
   <do>Primary Chip addons inside a primary Button — set `data-mode=&quot;inverted&quot;` on the Chip so its fill contrasts</do>
-  <do>Navigation that should look like Button — use ButtonLink (framework Link via `render`)</do>
+  <do>Navigation that should look like Button — use ButtonLink (framework Link via `render`; sets `data-no-link-style` so preflight underline does not fight button paint)</do>
   <dont>Using Button without children as icon-only — prefer IconButton</dont>
   <dont>Using Button with `render={&lt;a /&gt;}` for links — Base UI enforces button semantics; use ButtonLink</dont>
   <dont>Inventing `width: 100%` / `inline-size: 100%` / `w-full` / `.fullWidth` / size-fill `className` (e.g. `.Submit`) on Button when a parent Stack can own the fill</dont>

package/dist/specs/components/chip/usage.xml

@@ -5,7 +5,7 @@
   <do>Color-coded status via highlight `variant` values (`green`, `red`, `yellow`, …) or `primary` / `secondary` / `outline`</do>
   <do>Primary Chip as Button `addon` — set `data-mode=&quot;inverted&quot;` on the Chip when the Button is primary so fills contrast</do>
   <do>Equal-width Chip clusters: wrap in Stack with `fullWidth` and/or `expandChildren` — never per-Chip width CSS</do>
-  <do>Polymorphic label root via `render` (default `div`)</do>
+  <do>Polymorphic label root via `render` (default `div`; Chip sets `data-no-link-style` so Chip-as-`&lt;a&gt;` keeps chip chrome)</do>
   <dont>Using Chip as a button replacement for clickable actions — use Button or IconButton</dont>
   <dont>Expecting `addonPosition` to have any effect when `addon` is omitted</dont>
   <dont>Introducing custom size variants instead of the fixed compact height</dont>

package/dist/specs/components/grid/props.xml

@@ -24,7 +24,7 @@
     <description>Controls `repeat(auto-fill|auto-fit, …)` when `columns` is unset. Pass `false` to skip the filling data attribute.</description>
   </prop>
   <prop name="hPadding" kind="react">
-    <description>Sets inline padding using one token for both sides or a `[start, end]` tuple.</description>
+    <description>Sets inline padding using one token for both sides or a `[start, end]` tuple (`0` allowed). Prefer the tuple for one-sided inset — never `style`/`paddingInline*` CSS when this prop covers it.</description>
   </prop>
   <prop name="Item.column" kind="react">
     <description>Sets explicit `grid-column` placement via `--vui-grid-item-column`.</description>
@@ -63,7 +63,7 @@
     <description>Fixes the number of row tracks via `--vui-grid-rows`.</description>
   </prop>
   <prop name="vPadding" kind="react">
-    <description>Sets block padding using one token for both sides or a `[start, end]` tuple.</description>
+    <description>Sets block padding using one token for both sides or a `[start, end]` tuple (`0` allowed). Prefer the tuple for one-sided inset (e.g. bottom only `vPadding={[0, &apos;l&apos;]}`) — never `style`/`paddingBlock*` CSS when this prop covers it.</description>
   </prop>
   <prop name="column-gap" kind="css">
     <description>Grid column gap on the root.</description>

package/dist/specs/components/grid/usage.xml

@@ -8,7 +8,7 @@
   <do>Token-spaced grids with optional axis padding without custom grid CSS</do>
   <dont>Using Masonry when you need explicit row/column placement or full-width/full-height spans</dont>
   <dont>Re-declaring `grid-template` and `gap` in app CSS when Grid can own the layout</dont>
-  <dont>Inventing CSS `gap` / `padding` on this root when public spacing props cover it</dont>
+  <dont>Inventing CSS `gap` / `padding` / `paddingBlock*` / `paddingInline*` / side paddings (`style` or className) when public spacing props cover it — one-sided inset uses `hPadding`/`vPadding` `[start, end]` tuples</dont>
   <dont>Setting both `fullWidth` and `column` (or `fullHeight` and `row`) and expecting the explicit placement to win — full-* data attrs override</dont>
   <dont>Using Grid for simple one-axis flex spacing — prefer Stack</dont>
 </usage>

package/dist/specs/components/menu/usage.xml

@@ -2,7 +2,7 @@
 <usage surface="menu">
   <do>Action menus anchored to Button or IconButton — not page-blocking flows (Dialog) or rich free-layout panels (Popover)</do>
   <do>Nested command lists with `Menu.CheckboxItem` / `Menu.RadioGroup`+`Menu.RadioItem` (stay open on toggle by default) and `Menu.Submenu` + nested `Menu.Popup`</do>
-  <do>Mix `Menu.LinkItem` with action `Menu.Item` rows; group with `Menu.Group` / `Menu.Separator`</do>
+  <do>Mix `Menu.LinkItem` with action `Menu.Item` rows; group with `Menu.Group` / `Menu.Separator` (`LinkItem` sets `data-no-link-style`)</do>
   <do>Account / user chip: `Menu.Trigger` as Surface/Stack (Avatar + Text) opening `Menu.Popup` with static profile header plus Items</do>
   <do>Detached or multi-trigger menus via `Menu.createHandle`</do>
   <do>Custom portal host (iframe preview, shadow root, or app overlay root) via `container` on `Menu.Popup`</do>

package/dist/specs/components/stack/props.xml

@@ -34,7 +34,7 @@
     <description>Aligns content on the horizontal axis from the consumer point of view.</description>
   </prop>
   <prop name="hPadding" kind="react">
-    <description>Sets inline padding using one token for both sides or a `[start, end]` tuple.</description>
+    <description>Sets inline padding using one token for both sides or a `[start, end]` tuple (`0` allowed). Prefer the tuple for one-sided inset — never `style`/`paddingInline*` CSS when this prop covers it.</description>
   </prop>
   <prop name="inline" kind="react">
     <description>Displays the stack as `inline-flex` instead of `flex`.</description>
@@ -58,7 +58,7 @@
     <description>Aligns content on the vertical axis from the consumer point of view.</description>
   </prop>
   <prop name="vPadding" kind="react">
-    <description>Sets block padding using one token for both sides or a `[start, end]` tuple.</description>
+    <description>Sets block padding using one token for both sides or a `[start, end]` tuple (`0` allowed). Prefer the tuple for one-sided inset (e.g. bottom only `vPadding={[0, &apos;l&apos;]}`) — never `style`/`paddingBlock*` CSS when this prop covers it.</description>
   </prop>
   <prop name="wrap" kind="react">
     <description>Allows direct children to wrap onto additional lines when space is constrained.</description>

package/dist/specs/components/stack/usage.xml

@@ -9,10 +9,11 @@
   <do>Semantic/native roots via `render` (`header`, `main`, `nav`, `section`, …) while keeping Stack as the layout engine</do>
   <do>Opt into `@container stack` with `enableContainer` when layout should follow this Stack&apos;s inline-size, not the viewport</do>
   <dont>Reaching for a plain wrapper `div` when Stack (optionally with `render` for a semantic tag) can own the box</dont>
+  <dont>Passing `render={&lt;div /&gt;}` (or any host that matches Stack&apos;s default root) — omit `render`; use it only for a different host (`header`, `Surface`, …)</dont>
   <dont>Assuming Stack expands direct children by default — pass `expandChildren` when children should grow on the flex main axis</dont>
   <dont>Using `expandChildren` to fill parent width under `hAlign=&quot;center&quot;` — that is `fullWidth` on the child Stack (self `inline-size`), not child flex-grow</dont>
   <dont>Inventing `width: 100%` / `inline-size: 100%` / `w-full` / `.fullWidth` / size-fill `className` on content-sized children when this Stack can own the fill — or when children are intentionally fixed-size (e.g. IconButton)</dont>
-  <dont>Inventing CSS `gap` / `padding` on this root when public spacing props cover it</dont>
+  <dont>Inventing CSS `gap` / `padding` / `paddingBlock*` / `paddingInline*` / side paddings (`style` or className) when public spacing props cover it — one-sided inset uses `hPadding`/`vPadding` `[start, end]` tuples (e.g. `vPadding={[0, &apos;l&apos;]}`), not `paddingBlockEnd: &apos;1rem&apos;`</dont>
   <dont>Putting `data-grow=&quot;false&quot;` on an ancestor to control nested `expandChildren` — set it on the child that should not grow</dont>
   <dont>Combining `fullWidth` with `inline` — prefer block flex when the root must fill parent inline size</dont>
   <dont>Using viewport media queries when `@container stack` against this Stack&apos;s inline-size matches the design intent</dont>

package/dist/specs/components/surface/props.xml

@@ -33,7 +33,7 @@
     <description>Sets the hover background on hover-capable pointers using a base ramp layer (`1`–`3`), a literal CSS value, or the named token `primary` (`data-surface-hover-color=&quot;primary&quot;`; CSS owns light/dark opacity via `--global-primary`).</description>
   </prop>
   <prop name="hPadding" kind="react">
-    <description>Sets inline padding using one token for both sides or a `[start, end]` tuple.</description>
+    <description>Sets inline padding using one token for both sides or a `[start, end]` tuple (`0` allowed). Prefer the tuple for one-sided inset — never `style`/`paddingInline*` CSS when this prop covers it.</description>
   </prop>
   <prop name="overflow" kind="react">
     <description>Sets root overflow through the `--vui-surface-overflow` custom property.</description>
@@ -48,7 +48,7 @@
     <description>Replaces the default `div` root using Base UI render semantics.</description>
   </prop>
   <prop name="vPadding" kind="react">
-    <description>Sets block padding using one token for both sides or a `[start, end]` tuple.</description>
+    <description>Sets block padding using one token for both sides or a `[start, end]` tuple (`0` allowed). Prefer the tuple for one-sided inset (e.g. bottom only `vPadding={[0, &apos;l&apos;]}`) — never `style`/`paddingBlock*` CSS when this prop covers it.</description>
   </prop>
   <prop name="background" kind="css">
     <description>Resting surface background on the root.</description>

package/dist/specs/components/surface/usage.xml

@@ -9,7 +9,7 @@
   <do>Inset content with `hPadding` / `vPadding` — nest Stack/Grid for child gaps</do>
   <do>Set `radius` to a token (or four-value tuple) on the outermost Surface that needs rounded corners; `radius=&quot;auto&quot;` on nested Surfaces for concentric corners</do>
   <dont>Passing `elevation={…}` on Surface — wrap with Elevator / `getElevationProps`</dont>
-  <dont>Inventing CSS `padding` / `gap` on this root when public padding props (and nested Stack) cover it</dont>
+  <dont>Inventing CSS `padding` / `paddingBlock*` / `paddingInline*` / `gap` (`style` or className) when public padding props (and nested Stack) cover it — one-sided inset uses `hPadding`/`vPadding` `[start, end]` tuples (e.g. `vPadding={[0, &apos;l&apos;]}`), not `paddingBlockEnd`</dont>
   <dont>Inventing `width: 100%` on Surface when a parent Stack `fullWidth` can own the fill</dont>
   <dont>Overwriting transition shorthand without composing box-shadow when `data-elevation` is present</dont>
   <dont>Assuming `hoverColor` applies on touch devices</dont>

package/dist/specs/components/text/patterns.xml

@@ -61,6 +61,15 @@
     <notes>From `auth/login-form` acknowledged state. `render={<p />}` for block semantics; default body size/tone.</notes>
   </example>
 
+  <example title="Prose link">
+    <tsx><![CDATA[
+<Text render={<a href="#" />} size="xs">
+  Forgot password?
+</Text>
+]]></tsx>
+    <notes>Text-as-a keeps preflight link chrome (animated underline). Do not set `data-no-link-style` — that attr is for painted chrome links only.</notes>
+  </example>
+
   <example title="Empty-state centered">
     <tsx><![CDATA[
 <Stack hAlign="center" rowGap="m">

package/dist/specs/components/text/props.xml

@@ -30,10 +30,10 @@
     <description>Overrides font width as a percentage (100 = normal); maps to `font-stretch` and `wdth`.</description>
   </prop>
   <prop name="hPadding" kind="react">
-    <description>Sets inline padding using one token for both sides or a `[start, end]` tuple.</description>
+    <description>Sets inline padding using one token for both sides or a `[start, end]` tuple (`0` allowed). Prefer the tuple for one-sided inset — never `style`/`paddingInline*` CSS when this prop covers it.</description>
   </prop>
   <prop name="lineHeight" kind="react">
-    <description>Controls line height through foundation leading tokens.</description>
+    <description>Controls line height through foundation leading tokens. Root Text without lineHeight uses leading `m`; omit on nested Text so line-height inherits the outer Text.</description>
   </prop>
   <prop name="maxWidth" kind="react">
     <description>Constrains the maximum inline size of the rendered text block.</description>
@@ -51,7 +51,7 @@
     <description>Enables text selection on the rendered copy.</description>
   </prop>
   <prop name="size" kind="react">
-    <description>Selects a semantic body typography size from the active theme scale (`4xl` \| `3xl` \| `2xl` \| `xl` \| `l` \| `m` \| `s` \| `xs`). Default locks at that size’s --font-scale-body-* token; fluid clamp (prev step→token) applies when `fluid` is true and --effect-fluid-typography is empty. Theme effect initial still locks all Text. size xs is always fixed (min=max).</description>
+    <description>Selects a semantic body typography size from the active theme scale (`4xl` \| `3xl` \| `2xl` \| `xl` \| `l` \| `m` \| `s` \| `xs`). Root Text without size locks at body `m`; omit size on nested Text so font-size inherits the outer Text. Fluid clamp (prev step→token) applies when `fluid` is true and --effect-fluid-typography is empty. Theme effect initial still locks all Text. size xs is always fixed (min=max).</description>
   </prop>
   <prop name="tone" kind="react">
     <description>Sets the semantic text color role when no literal `color` override is used. `default` inherits; `primary` → `--global-primary`; `muted` → `--global-muted`; `interactive` → `--global-interactive-text`; `positive` / `informative` / `danger` / `warning` → `--highlight-green` / `--highlight-blue` / `--highlight-red` / `--highlight-yellow`.</description>
@@ -69,7 +69,7 @@
     <description>Selects the `text-box` trim basis when `trim` is active.</description>
   </prop>
   <prop name="vPadding" kind="react">
-    <description>Sets block padding using one token for both sides or a `[start, end]` tuple.</description>
+    <description>Sets block padding using one token for both sides or a `[start, end]` tuple (`0` allowed). Prefer the tuple for one-sided inset — never `style`/`paddingBlock*` CSS when this prop covers it.</description>
   </prop>
   <prop name="weight" kind="react">
     <description>Selects a semantic weight keyword or a numeric weight (`font-weight` + `wght` axis).</description>
@@ -87,7 +87,7 @@
     <description>Optical size axis on the root (variable fonts).</description>
   </prop>
   <prop name="font-size" kind="css">
-    <description>Body font size; size prop presets via data attributes. Defaults to the theme body scale token for that size; clamp (prev step→token) applies only when --effect-fluid-typography is on and `fluid` is true (Text defaults fluid false).</description>
+    <description>Body font size; size prop presets via data attributes. Root without size uses body `m`; nested Text without `data-text-size` inherits the outer Text font-size. Clamp (prev step→token) applies only when --effect-fluid-typography is on and `fluid` is true (Text defaults fluid false).</description>
   </prop>
   <prop name="font-weight" kind="css">
     <description>Font weight on the root; keyword presets or numeric via weight prop.</description>
@@ -96,7 +96,7 @@
     <description>Font width percentage on the root (font-stretch + wdth).</description>
   </prop>
   <prop name="line-height" kind="css">
-    <description>Line height; lineHeight prop presets via data attributes.</description>
+    <description>Line height; lineHeight prop presets via data attributes. Nested Text without `data-text-line-height` inherits the outer Text line-height.</description>
   </prop>
   <prop name="letter-spacing" kind="css">
     <description>Letter spacing on the root. Prefer the `tracking` React prop; set this hook only when theming beyond the prop.</description>

package/dist/specs/components/text/usage.xml

@@ -8,7 +8,9 @@
   <do>Hero / status motion: nest Typewriter inside Text when body tone/size should drive the typed line</do>
   <do>Ellipsis: ClampText `render={&lt;Text … /&gt;}` — FitText when copy must scale to fill width instead of truncate</do>
   <do>Letter-spacing via `tracking`; text-transform via `transform`; width via `maxWidth` or parent Stack `fullWidth`</do>
+  <do>Inline prose link: `Text render={&lt;a href=… /&gt;}` — keeps preflight link chrome (no `data-no-link-style`)</do>
   <dont>Using Text for headings — use Title (`render` for h1–h6)</dont>
-  <dont>Inventing CSS `letter-spacing` / `text-transform` / `width: 100%` when `tracking` / `transform` / Stack `fullWidth` cover it</dont>
+  <dont>Putting `data-no-link-style` on Text-as-a when the default underline hover is wanted</dont>
+  <dont>Inventing CSS `letter-spacing` / `text-transform` / `width: 100%` / `paddingBlock*` / `paddingInline*` when `tracking` / `transform` / Stack `fullWidth` / `hPadding`/`vPadding` tuples cover it</dont>
   <dont>Setting body color with raw `--global-*` when `tone` covers the role</dont>
 </usage>

package/dist/specs/components/title/props.xml

@@ -28,7 +28,7 @@
     <description>Overrides font width as a percentage (100 = normal); maps to `font-stretch` and `wdth`.</description>
   </prop>
   <prop name="hPadding" kind="react">
-    <description>Sets inline padding using one token for both sides or a `[start, end]` tuple.</description>
+    <description>Sets inline padding using one token for both sides or a `[start, end]` tuple (`0` allowed). Prefer the tuple for one-sided inset — never `style`/`paddingInline*` CSS when this prop covers it.</description>
   </prop>
   <prop name="lineHeight" kind="react">
     <description>Controls line height through foundation leading tokens.</description>
@@ -64,7 +64,7 @@
     <description>Selects the `text-box` trim basis when `trim` is active.</description>
   </prop>
   <prop name="vPadding" kind="react">
-    <description>Sets block padding using one token for both sides or a `[start, end]` tuple.</description>
+    <description>Sets block padding using one token for both sides or a `[start, end]` tuple (`0` allowed). Prefer the tuple for one-sided inset — never `style`/`paddingBlock*` CSS when this prop covers it.</description>
   </prop>
   <prop name="weight" kind="react">
     <description>Overrides the size preset weight (`font-weight` + `wght` axis).</description>

package/dist/specs/components/title/usage.xml

@@ -7,7 +7,8 @@
   <do>Truncation: ClampText `render={&lt;Title size=… render={&lt;h* /&gt;} /&gt;}` — FitText wraps Title when short headlines must fill a constrained width</do>
   <do>Fluid clamp across presets (`fluid` / theme `--effect-fluid-typography`); pass `fluid={false}` inside chrome or dense UI</do>
   <do>Letter-spacing via `tracking`; text-transform via `transform`; width via `maxWidth` or parent Stack `fullWidth`</do>
+  <do>Title-as-prose-link (`render={&lt;a /&gt;}`) keeps preflight link chrome — omit `data-no-link-style`</do>
   <dont>Assuming `size` changes the HTML tag — choose `render` explicitly</dont>
   <dont>Using Title for long body paragraphs — use Text</dont>
-  <dont>Inventing CSS `letter-spacing` / `text-transform` / `width: 100%` when props / Stack cover it</dont>
+  <dont>Inventing CSS `letter-spacing` / `text-transform` / `width: 100%` / `paddingBlock*` / `paddingInline*` when props / Stack / `hPadding`/`vPadding` tuples cover it</dont>
 </usage>

package/dist/specs/foundation/attributes.xml

@@ -19,14 +19,14 @@
   </attr>
   <attr name="data-no-link-style">
     <presence>boolean attribute on anchor elements</presence>
-    <effect>Excludes the anchor from preflight default link styling (interactive color, no underline, animated underline on unclassed links).</effect>
+    <effect>Excludes the anchor from all preflight default link styling (interactive color, text-decoration reset, animated underline on hover/focus). Every a:any-link without this attribute gets that chrome — class presence alone does not opt out.</effect>
     <values>
       <value>(boolean presence)</value>
     </values>
-      <when>Links that must keep component-owned or custom link chrome like linked Surfaces or other components</when>
-      <when>Anchors with their own link styling</when>
-      <when_not>Standard inline prose links that should inherit preflight link styling</when_not>
-
+    <when>Component-owned or custom link chrome (ButtonLink, Chip-as-link, Menu.LinkItem, Surface-as-link, app anchors with their own paint)</when>
+    <when>Any anchor whose background must not receive the preflight underline gradient</when>
+    <when_not>Standard inline prose links (bare a, Text/Title render as a) that should keep preflight link styling</when_not>
+    <gotcha>A class on the anchor no longer suppresses link styles — only data-no-link-style does. Chrome components set it; prose Text/Title-as-a keep the underline with no extra markup.</gotcha>
   </attr>
   <attr name="data-elevation">
     <presence>value required</presence>

package/dist/specs/foundation/modules.xml

@@ -51,8 +51,8 @@
   <module id="typography">
     <purpose>Semantic HTML element typography defaults and link chrome opt-out.</purpose>
     <provides>element type defaults; data-no-link-style</provides>
-    <use>Leave default prose links alone. Add data-no-link-style when component or custom link chrome must win (attributes.xml).</use>
-    <do_not>Fight preflight link styles without the opt-out attr.</do_not>
+    <use>Every a:any-link gets preflight link chrome (interactive color + animated underline) unless data-no-link-style is set. Prose links — including Text/Title render as a — keep it. Chrome components set the attr (attributes.xml).</use>
+    <do_not>Rely on class presence to suppress link styles — use data-no-link-style only.</do_not>
   </module>
   <module id="vibrancy">
     <purpose>Theme-gated backdrop-filter glass on opt-in hosts.</purpose>

package/dist/specs/index.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<index package="@viraui/react" version="2026.6.3" generated="2026-09-25T13:06:12.744Z">
+<index package="@viraui/react" version="2026.6.5" generated="2026-10-05T13:29:05.981Z">
   <categories>
     <category id="layout" />
     <category id="action" />

package/dist/specs/patterns/compose-layout-first.xml

@@ -10,7 +10,7 @@
     <ref id="bleed" units="meta,usage" />
   </uses>
   <do>Prefer Vira layout roots (`Stack`, `Grid`, `Masonry`, `Bleed`, `Surface`) and their public props for every consumer layout. Treat `Stack` as the default box: an enriched `div` (flex + gap/padding/align/`fullWidth`/`render`/…) — prefer it over bare wrapper `div`s even for simple nesting. Compose **with** these parts; default custom CSS = **app chrome** the system does not own. Prefer another Vira component (e.g. `Surface` for border/fill/radius) or `render` merge over a CSS class for chrome the library already owns. Do not open a CSS module to reshape a Vira control unless the consumer **expressly asked** for that override (still read `props`/`usage` first; a future override layer will formalize hooks).</do>
-  <dont>Do not invent bare wrapper `div`s (or `display:flex` / `display:grid` / CSS `gap` / `padding` / `width` / `inline-size` / border/radius chrome on raw tags or Vira control roots) when `Stack` or another layout primitive / `Surface` / a public `fullWidth` prop covers it. Do not skip composition to reach for a one-off stylesheet — including size-fill classNames that would do nothing on fixed-size controls.</dont>
+  <dont>Do not invent bare wrapper `div`s (or `display:flex` / `display:grid` / CSS `gap` / `padding` / `paddingBlock*` / `paddingInline*` / `width` / `inline-size` / border/radius chrome on raw tags or Vira control roots) when `Stack` or another layout primitive / `Surface` / a public `fullWidth` or `hPadding`/`vPadding` tuple covers it. Do not skip composition to reach for a one-off stylesheet — including size-fill classNames that would do nothing on fixed-size controls. Do not pass `render` that restates a component&apos;s default root (e.g. Stack `render={&lt;div /&gt;}`) — omit `render` unless the host changes.</dont>
   <tsx><![CDATA[
 {/* Flex row + panel chrome: one DOM node via Stack render={<Surface />} */}
 <Stack

package/dist/specs/patterns/page-chrome.xml

@@ -6,7 +6,7 @@
     <ref id="button" units="meta" />
   </uses>
   <do>Own page/section flex with Stack. Pick semantic tags (`header`, `main`, `nav`, `section`, …) via `render={&lt;tag /&gt;}` — keep Stack as the layout engine. CSS modules may set min-block-size / scroll; never `display:flex`.</do>
-  <dont>Do not use raw `header`/`main`/`nav` + `display:flex` / CSS gap for jobs Stack owns. Tag choice ≠ layout engine.</dont>
+  <dont>Do not use raw `header`/`main`/`nav` + `display:flex` / CSS gap for jobs Stack owns. Tag choice ≠ layout engine. Do not pass `render={&lt;div /&gt;}` — Stack already defaults to `div`; omit `render` unless the host changes.</dont>
   <tsx><![CDATA[
 <Stack rowGap="m" expandChildren>
   <Stack

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.6.3",
+  "version": "2026.6.5",
   "private": false,
   "files": [
     "dist"
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@base-ui/react": ">=1.8.0",
-    "@viraui/foundation": "2026.6.3",
+    "@viraui/foundation": "2026.6.5",
     "@viraui/icons": "2026.1.0",
     "@viraui/postcss-config": "2026.0.0",
     "@viraui/tsconfig": "2026.0.0",