@viraui/react 2026.6.4 → 2026.7.0-next.0

package/dist/components/title/title.css

@@ -2,4 +2,4 @@
     var(--__title-size-min),
     calc(var(--__title-size-min) + (var(--__title-size-max) - var(--__title-size-min)) * var(--__title-fluid)),
     var(--__title-size-max)
-  );--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-m);--__title-letter-spacing:-0.03em;margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--__title-letter-spacing);text-transform:var(--vui-title-text-transform);text-align:var(--vui-title-align);white-space:var(--vui-title-white-space);word-break:break-word;font-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-title-font-weight),"wdth" var(--vui-title-font-width),"opsz" var(--vui-title-font-opsz);text-box:var(--vui-title-trim) var(--vui-title-trim-type);display:inline-flex;&[data-title-has-tracking=true]{letter-spacing:var(--vui-title-letter-spacing)}&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--vui-title-padding-block-start) var(--vui-title-padding-inline-end) var(--vui-title-padding-block-end) var(--vui-title-padding-inline-start)}&[data-title-size=display]{--__title-size-min:var(--font-scale-h1);--__title-size-max:var(--font-scale-display)}&[data-title-size="2"]{--__title-size-min:var(--font-scale-h3);--__title-size-max:var(--font-scale-h2)}&[data-title-size="3"]{--__title-size-min:var(--font-scale-h4);--__title-size-max:var(--font-scale-h3)}&[data-title-size="4"]{--__title-size-min:var(--font-scale-h5);--__title-size-max:var(--font-scale-h4)}&[data-title-size="5"]{--__title-size-min:var(--font-scale-h6);--__title-size-max:var(--font-scale-h5);--__title-letter-spacing:-0.02em}&[data-title-size="6"]{--__title-size-min:var(--font-scale-body-m);--__title-size-max:var(--font-scale-h6);--__title-letter-spacing:-0.02em}&[data-title-fluid=false]{--vui-title-font-size:var(--__title-size-max)}@container root style(--effect-fluid-typography: initial){--vui-title-font-size:var(--__title-size-max)}&[data-title-has-literal-color=true]{color:var(--vui-title-literal-color)}&[data-title-line-height=none]{--vui-title-line-height:0}&[data-title-line-height=xs]{--vui-title-line-height:var(--font-leading-xs)}&[data-title-line-height=s]{--vui-title-line-height:var(--font-leading-s)}&[data-title-line-height=m]{--vui-title-line-height:var(--font-leading-m)}&[data-title-line-height=l]{--vui-title-line-height:var(--font-leading-l)}}}
+  );--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-m);--__title-letter-spacing:-0.03em;margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--__title-letter-spacing);text-transform:var(--vui-title-text-transform);white-space:var(--vui-title-white-space);word-break:break-word;font-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-title-font-weight),"wdth" var(--vui-title-font-width),"opsz" var(--vui-title-font-opsz);text-box:var(--vui-title-trim) var(--vui-title-trim-type);display:inline-flex;&[data-title-has-align=true]{text-align:var(--vui-title-align)}&[data-title-has-tracking=true]{letter-spacing:var(--vui-title-letter-spacing)}&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--vui-title-padding-block-start) var(--vui-title-padding-inline-end) var(--vui-title-padding-block-end) var(--vui-title-padding-inline-start)}&[data-title-size=display]{--__title-size-min:var(--font-scale-h1);--__title-size-max:var(--font-scale-display)}&[data-title-size="2"]{--__title-size-min:var(--font-scale-h3);--__title-size-max:var(--font-scale-h2)}&[data-title-size="3"]{--__title-size-min:var(--font-scale-h4);--__title-size-max:var(--font-scale-h3)}&[data-title-size="4"]{--__title-size-min:var(--font-scale-h5);--__title-size-max:var(--font-scale-h4)}&[data-title-size="5"]{--__title-size-min:var(--font-scale-h6);--__title-size-max:var(--font-scale-h5);--__title-letter-spacing:-0.02em}&[data-title-size="6"]{--__title-size-min:var(--font-scale-body-m);--__title-size-max:var(--font-scale-h6);--__title-letter-spacing:-0.02em}&[data-title-fluid=false]{--vui-title-font-size:var(--__title-size-max)}@container root style(--effect-fluid-typography: initial){--vui-title-font-size:var(--__title-size-max)}&[data-title-has-literal-color=true]{color:var(--vui-title-literal-color)}&[data-title-line-height=none]{--vui-title-line-height:0}&[data-title-line-height=xs]{--vui-title-line-height:var(--font-leading-xs)}&[data-title-line-height=s]{--vui-title-line-height:var(--font-leading-s)}&[data-title-line-height=m]{--vui-title-line-height:var(--font-leading-m)}&[data-title-line-height=l]{--vui-title-line-height:var(--font-leading-l)}}}

package/dist/components/title/title.d.ts

@@ -55,8 +55,9 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
     lineHeight?: 'none' | 'xs' | 's' | 'm' | 'l';
     /**
      * Aligns text using logical alignment values.
+     * Omit so `text-align` inherits from the parent.
      *
-     * @default 'start'
+     * @default Inherits parent `text-align`.
      */
     align?: React.CSSProperties['textAlign'];
     /**

package/dist/components/title/title.js

@@ -4,11 +4,12 @@ import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
 import title_module_default from "./title.module.js";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/title/title.tsx
-var Title = ({ align = "start", balanced = false, selection = true, className, color, fluid = true, fontWidth, hPadding, size = "1", lineHeight = "m", maxWidth, opticalSize, ref, render, style, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", ...otherProps }) => {
+var Title = ({ align, balanced = false, selection = true, className, color, fluid = true, fontWidth, hPadding, size = "1", lineHeight = "m", maxWidth, opticalSize, ref, render, style, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", ...otherProps }) => {
+	const hasAlign = align !== void 0;
 	const hasPadding = Boolean(hPadding || vPadding);
 	const hasTracking = tracking !== void 0;
 	const dynamicStyle = {
-		"--vui-title-align": align,
+		...hasAlign && { "--vui-title-align": align },
 		"--vui-title-max-width": maxWidth ?? "none",
 		"--vui-title-literal-color": color,
 		"--vui-title-white-space": whiteSpace,
@@ -34,6 +35,7 @@ var Title = ({ align = "start", balanced = false, selection = true, className, c
 			"data-title-balanced": balanced ? "true" : "false",
 			"data-title-selection": selection ? "true" : "false",
 			"data-title-fluid": fluid ? "true" : "false",
+			"data-title-has-align": hasAlign ? "true" : "false",
 			"data-title-has-padding": hasPadding ? "true" : "false",
 			"data-title-has-literal-color": color ? "true" : "false",
 			"data-title-has-tracking": hasTracking ? "true" : "false",

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

@@ -1,8 +1,8 @@
 import { clsx } from "../../core/clsx.js";
 import { Text } from "../text/text.js";
 import { Stack } from "../stack/stack.js";
-import { Button } from "../button/button.js";
 import { Surface } from "../surface/surface.js";
+import { Button } from "../button/button.js";
 import toast_module_default from "./toast.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toast } from "@base-ui/react/toast";

package/dist/index.js

@@ -6,6 +6,7 @@ import { Autocomplete } from "./components/autocomplete/autocomplete.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 { Surface } from "./components/surface/surface.js";
 import { Beam } from "./components/beam/beam.js";
 import { Bleed } from "./components/bleed/bleed.js";
 import { BreakpointsProvider } from "./components/breakpoints/breakpoints-provider.js";
@@ -28,7 +29,6 @@ import { getElevationProps } from "./core/elevation/get-elevation-props.js";
 import { Elevator } from "./components/elevator/elevator.js";
 import { Fieldset } from "./components/fieldset/fieldset.js";
 import { FitText } from "./components/fit-text/fit-text.js";
-import { Surface } from "./components/surface/surface.js";
 import { Glow } from "./components/glow/glow.js";
 import { Grid } from "./components/grid/grid.js";
 import { IconButton } from "./components/icon-button/icon-button.js";
@@ -46,9 +46,12 @@ 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 { Textfield } from "./components/textfield/textfield.js";
+import { OTPField } from "./components/otp-field/otp-field.js";
 import { PopoverSheet } from "./components/popover/popover-sheet.js";
 import { Popover, PopoverClose, PopoverDescription, PopoverTitle, PopoverTrigger } from "./components/popover/popover.js";
 import { ProgressiveBlur } from "./components/progressive-blur/progressive-blur.js";
+import { Prose } from "./components/prose/prose.js";
 import { Radio } from "./components/radio/radio.js";
 import { RadioGroup } from "./components/radio/radio-group.js";
 import { Select } from "./components/select/select.js";
@@ -60,7 +63,6 @@ import { StaticNoise } from "./components/static-noise/static-noise.js";
 import { Switch } from "./components/switch/switch.js";
 import { Tabs } from "./components/tabs/tabs.js";
 import { Textarea } from "./components/textarea/textarea.js";
-import { Textfield } from "./components/textfield/textfield.js";
 import { Title } from "./components/title/title.js";
 import { Toast } from "./components/toast/toast.js";
 import { ToggleButton } from "./components/toggle-button/toggle-button.js";
@@ -68,4 +70,4 @@ import { ToggleGroup } from "./components/toggle-group/toggle-group.js";
 import { Typewriter } from "./components/typewriter/typewriter.js";
 import { TooltipContent } from "./components/tooltip/tooltip-content.js";
 import { Tooltip, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
-export { Accordion, Annotate, Autocomplete, Avatar, AvatarGroup, Badge, Beam, Bleed, BreakpointsProvider, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, Glow, Grid, IconButton, IconButtonLink, LinearProgress, Masonry, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps, useBreakpoints };
+export { Accordion, Annotate, Autocomplete, Avatar, AvatarGroup, Badge, Beam, Bleed, BreakpointsProvider, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, Glow, Grid, IconButton, IconButtonLink, LinearProgress, Masonry, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, OTPField, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Prose, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps, useBreakpoints };

package/dist/preflight.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/components/beam/a11y.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <a11y surface="beam">
-  <rule>Root stays in the accessibility tree; bloom layer is empty div</rule>
+  <rule>Root stays in the accessibility tree; bloom layer is an empty decorative div with aria-hidden</rule>
   <rule>Beam is not a focus or status indicator — consumer owns accessible names and state</rule>
-  <rule>Offscreen instances pause animations without firing activate/deactivate</rule>
-  <rule>prefers-reduced-motion disables motion and leaves a static resting look</rule>
+  <rule>Offscreen instances set data-paused="true" and pause motion without firing activate/deactivate</rule>
+  <rule>prefers-reduced-motion keeps a static visible rest (no looping motion); animate=false still fades the effect away</rule>
 </a11y>

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

@@ -19,7 +19,7 @@
     <description>Effect family: rotating border, bottom line travel, or pulse breathe (outside/inside).</description>
   </prop>
   <prop name="size" kind="react">
-    <description>Border-only size preset (small compact / medium card). Ignored for other variants.</description>
+    <description>Size preset for border geometry and pulse-inside inner glow band (small compact / medium card). Ignored for line and pulse-outside.</description>
   </prop>
   <prop name="color" kind="react">
     <description>Beam color: primary → --global-primary, highlight token name → --highlight-*, colorful → upstream neon multi-stop RGB palette.</description>
@@ -81,10 +81,31 @@
   <prop name="hue" kind="css">
     <description>Pulse hue drift angle written by the shared pulse driver.</description>
   </prop>
+  <prop name="hue-base" kind="css">
+    <description>Base hue for hue-rotate filters on glow layers.</description>
+  </prop>
+  <prop name="stroke-opacity" kind="css">
+    <description>Opacity of the stroke/conic layer; variant CSS may override.</description>
+  </prop>
+  <prop name="inner-opacity" kind="css">
+    <description>Opacity of the inner glow layer; variant CSS may override.</description>
+  </prop>
+  <prop name="bloom-opacity" kind="css">
+    <description>Opacity of the bloom layer; variant CSS may override.</description>
+  </prop>
   <prop name="pulse-glow-sx" kind="css">
     <description>Per-axis X scale for pulse-outside glow geometry relative to a 350×140 reference.</description>
   </prop>
   <prop name="pulse-glow-sy" kind="css">
     <description>Per-axis Y scale for pulse-outside glow geometry relative to a 350×140 reference.</description>
   </prop>
+  <prop name="pulse-glow-boost" kind="css">
+    <description>Extra pulse-outside glow intensity multiplier (internal default 1; not a React prop).</description>
+  </prop>
+  <prop name="core-blur" kind="css">
+    <description>Core glow blur radius (BorderBeam glowSize=1 default).</description>
+  </prop>
+  <prop name="bloom-blur" kind="css">
+    <description>Bloom layer blur radius (BorderBeam glowSize=1 default).</description>
+  </prop>
 </props>

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

@@ -5,6 +5,7 @@
   <do>Pick `variant` for the job: `border` spin, `line` travel, `pulse-outside` / `pulse-inside` breathe — use Glow instead when the highlight should follow the pointer</do>
   <do>Use sparingly as a focal accent — shared pulse rAF still paints per instance; prefer one Beam per view</do>
   <dont>Treating Beam as Surface color/padding/border chrome — nest Surface/Stack children for the real card</dont>
+  <dont>Confusing prefers-reduced-motion (static rest stays visible) with `animate={false}` (effect fades away)</dont>
   <dont>Relying on Beam for keyboard focus or status — decorative only</dont>
   <dont>Expecting theme light/dark auto-tuning — colors are token-driven and theme-agnostic</dont>
   <dont>Scattering many Beam instances on one page</dont>

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/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/meter/patterns.xml

@@ -50,4 +50,16 @@
 ]]></tsx>
     <notes>From preview-grid `daily-activity-goal` nested tips sheet. Meter for score-within-range; LinearProgress stays on the live activity track outside the dialog.</notes>
   </example>
+
+  <example title="Highlight variants">
+    <tsx><![CDATA[
+<Stack rowGap="m">
+  <Meter label="Health" renderValue value={92} variant="green" />
+  <Meter label="Latency" renderValue value={38} variant="yellow" />
+  <Meter label="Errors" renderValue value={12} variant="red" />
+  <Meter label="Quota" renderValue value={64} variant="blue" />
+</Stack>
+]]></tsx>
+    <notes>`variant` highlight tokens tint track wash + indicator together (Chip-aligned). Default `primary` keeps brand indicator + contrast track.</notes>
+  </example>
 </patterns>

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

@@ -4,6 +4,7 @@
     <item>Use for storage usage, battery level, capacity, or score within a known range.</item>
     <item>Use with a label when the metric needs a visible name.</item>
     <item>Use with `renderValue` when the formatted value should appear beside the label.</item>
+    <item>Use highlight `variant` values when the track and indicator should share a semantic color.</item>
   </when_to_use>
   <when_not_to_use>
     <item>Use LinearProgress for in-progress tasks or indeterminate work.</item>
@@ -19,12 +20,18 @@
   <prop name="renderValue" kind="react">
     <description>Shows the current value beside the label. Pass `true` for Base UI default formatting, or a function matching `Meter.Value` `children` to customize the printed label.</description>
   </prop>
+  <prop name="variant" kind="react">
+    <description>Selects track and indicator colors. `primary` uses brand primary on the indicator; highlight token names tint both track (wash) and indicator via `--highlight-*`, matching Chip highlight variants.</description>
+  </prop>
   <prop name="indicator-color" kind="css">
     <description>Determinate meter indicator color.</description>
   </prop>
   <prop name="track-background" kind="css">
     <description>Meter track background color.</description>
   </prop>
+  <prop name="track-opacity" kind="css">
+    <description>Highlight variant track wash opacity mix against the indicator color.</description>
+  </prop>
   <prop name="track-size" kind="css">
     <description>Meter track thickness on the root.</description>
   </prop>

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

@@ -4,10 +4,12 @@
   <do>Labeled metrics: `label` + `renderValue` + optional `description`; tune print with Base UI `format` / `locale`</do>
   <do>Workspace stacks: Stack `rowGap` of Meters — or nest one Meter inside Surface for sheet / tip chrome</do>
   <do>Rich labels: pass a Stack row (icon + text) as `label` when needed — no custom label CSS</do>
+  <do>Color-coded metrics via highlight `variant` (`green`, `red`, `yellow`, …) or default `primary` — tints track wash + indicator like Chip</do>
   <do>Prefer LinearProgress for in-progress or indeterminate tasks (`value={null}`) — Meter has no indeterminate mode</do>
   <dont>Using Meter as an interactive value control — use Slider</dont>
   <dont>Using Meter for indeterminate or in-progress work — use LinearProgress</dont>
   <dont>Modeling invalid or disabled meter state — Base UI Meter exposes neither</dont>
   <dont>Hiding the metric name when multiple meters share a view</dont>
   <dont>Passing `value={null}` — Meter `value` is required `number`</dont>
+  <dont>Reinventing highlight track/indicator colors with raw `--highlight-*` CSS when `variant` covers the token</dont>
 </usage>

package/dist/specs/components/otp-field/a11y.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<a11y surface="otp-field">
+  <rule>One Field: visible `label` names the first slot via Field.Label / htmlFor. Do not put aria-label on the first Input.</rule>
+  <rule>Slots after the first get `aria-label` `Character N of {length}` in English when the consumer omits `aria-label`. Consumer `aria-label` wins when passed.</rule>
+  <rule>Description and error copy live on the OTPField root helper slot (dirty+invalid), not per slot.</rule>
+  <rule>`OTPField.Separator` is a separator, not an input, and is not counted in `length`.</rule>
+  <rule>Slot host is always a native `input`. Chrome is Textfield `controlOnly` (no second Field).</rule>
+  <rule>Focus ring is per active slot (`:focus`). Input `data-focused` means any slot is focused — do not paint chrome from it.</rule>
+  <rule>Invalid wiggle is one-shot chrome only. Error copy / `aria-invalid` still name the error. Reduced motion skips the animation.</rule>
+</a11y>

package/dist/specs/components/otp-field/meta.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<meta id="otp-field" title="OTPField" category="form" shared_contract="otp-field">
+  <summary>Field-wrapped one-time code slots. Default slots compose Textfield controlOnly; one label/helper on Root.</summary>
+  <exports>
+    <export name="OTPField" />
+    <export name="OTPField.Root" />
+    <export name="OTPField.Input" />
+    <export name="OTPField.Separator" />
+  </exports>
+  <related>
+    <ref id="textfield" />
+    <ref id="fieldset" />
+    <ref id="text" />
+    <ref id="stack" />
+  </related>
+  <units>
+    <unit kind="a11y" href="a11y.xml" />
+    <unit kind="props" href="props.xml" />
+    <unit kind="usage" href="usage.xml" />
+    <unit kind="patterns" href="patterns.xml" />
+  </units>
+  <base_ui href="https://base-ui.com/react/components/otp-field#api-reference" />
+</meta>

package/dist/specs/components/otp-field/patterns.xml

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<patterns surface="otp-field">
+  <example title="Labeled six-slot code">
+    <tsx><![CDATA[
+<OTPField.Root
+  length={6}
+  label="Verification code"
+  description="Enter the 6-character code we sent to your device."
+>
+  {Array.from({ length: 6 }, (_, slotIndex) => (
+    <OTPField.Input key={`character-${slotIndex + 1}`} />
+  ))}
+</OTPField.Root>
+]]></tsx>
+    <notes>Explicit Inputs. First slot uses the field label; later slots get generated names.</notes>
+  </example>
+
+  <example title="Form name + autoSubmit">
+    <tsx><![CDATA[
+<Form>
+  <OTPField.Root length={6} name="verificationCode" label="Verification code" autoSubmit>
+    <OTPField.Input />
+    <OTPField.Input />
+    <OTPField.Input />
+    <OTPField.Input />
+    <OTPField.Input />
+    <OTPField.Input />
+  </OTPField.Root>
+</Form>
+]]></tsx>
+    <notes>One concatenated form value. `autoSubmit` submits when complete. `Form` is `@base-ui/react/form`.</notes>
+  </example>
+
+  <example title="Grouped slots with Separator">
+    <tsx><![CDATA[
+<OTPField.Root length={6} label="Verification code">
+  <Stack columnGap="s" direction="row">
+    <OTPField.Input />
+    <OTPField.Input />
+    <OTPField.Input />
+  </Stack>
+  <OTPField.Separator />
+  <Stack columnGap="s" direction="row">
+    <OTPField.Input />
+    <OTPField.Input />
+    <OTPField.Input />
+  </Stack>
+</OTPField.Root>
+]]></tsx>
+    <notes>Separator is not an input and is not counted in `length`. Stack owns group gaps.</notes>
+  </example>
+
+  <example title="Equal-grow in a form column">
+    <tsx><![CDATA[
+<OTPField.Root length={6} label="Verification code" fullWidth>
+  <OTPField.Input />
+  <OTPField.Input />
+  <OTPField.Input />
+  <OTPField.Input />
+  <OTPField.Input />
+  <OTPField.Input />
+</OTPField.Root>
+]]></tsx>
+    <notes>Default hugs. `fullWidth` fills the column and grows slots equally.</notes>
+  </example>
+</patterns>

package/dist/specs/components/otp-field/props.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<props surface="otp-field">
+  <when_to_use>
+    <item>One-time codes, verification codes, and recovery codes as a single labeled field</item>
+    <item>Numeric, alphanumeric, or masked slot entry with form `name` submit of the concatenated value</item>
+    <item>Grouped slot rows with `OTPField.Separator` and Stack, not a `groups` prop</item>
+  </when_to_use>
+  <when_not_to_use>
+    <item>Auto-generating Inputs from `length` — always list one `OTPField.Input` per slot</item>
+    <item>Per-slot label, description, or error — Field chrome is on Root only</item>
+    <item>Swapping the slot host via `render` — host is always a native `input`; chrome is Textfield `controlOnly`</item>
+    <item>Inventing CSS `width: 100%` on slots when Root `fullWidth` covers equal-grow</item>
+  </when_not_to_use>
+  <prop name="description" kind="react">
+    <description>Helper copy rendered with `Field.Description` and `Text` while the field is valid.</description>
+  </prop>
+  <prop name="error" kind="react">
+    <description>Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while the field is invalid and dirty.</description>
+  </prop>
+  <prop name="fullWidth" kind="react">
+    <description>When `true`, the field is `inline-size: 100%` and the inner slot Stack uses `fullWidth` + `expandChildren` so slots grow equally. Prefer this over CSS `width: 100%` on slots.</description>
+  </prop>
+  <prop name="label" kind="react">
+    <description>Visible label rendered with shared internal `FieldLabel`. Names the first slot.</description>
+  </prop>
+  <prop name="length" kind="react">
+    <description>Required slot count for clamp, complete, and hidden validation markup. Does not spawn Inputs — list exactly this many `OTPField.Input` children.</description>
+  </prop>
+</props>

package/dist/specs/components/otp-field/usage.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<usage surface="otp-field">
+  <do>List exactly `length` `OTPField.Input` children (Array.from or explicit)</do>
+  <do>Put `label` / `description` / `error` on `OTPField.Root` (or `OTPField`)</do>
+  <do>Let the first slot take the field label; later slots get generated `Character N of {length}` unless you pass `aria-label`</do>
+  <do>Group slots with Stack + `OTPField.Separator` when the code is shown as chunks</do>
+  <do>Span the form column with Root `fullWidth` so slots grow equally</do>
+  <do>Keep error copy on Root — invalid wiggle is extra chrome, not the only signal</do>
+  <dont>Pass `render` on Input — slot is always a native `input`; chrome is Textfield `controlOnly`</dont>
+  <dont>Put label/description/error on each slot</dont>
+  <dont>Expect Root to auto-generate Inputs from `length`</dont>
+  <dont>Invent a `groups` prop or width CSS on slots when Stack / `fullWidth` cover layout</dont>
+</usage>

package/dist/specs/components/prose/a11y.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<a11y surface="prose">
+  <rule>Prose is grouping, not a widget — do not set a role on the root</rule>
+  <rule>Default root is a generic `div`; it does not require an accessible name</rule>
+  <rule>Landmark semantics only when the consumer replaces the root (`render={&lt;article /&gt;}` or similar) and names the landmark if needed</rule>
+  <rule>Children keep their own roles (headings, lists, links); Prose does not restyle or re-role them</rule>
+</a11y>

package/dist/specs/components/prose/meta.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<meta id="prose" title="Prose" category="typography" shared_contract="prose">
+  <summary>Grouping region that applies heading-aware em rhythm to direct document blocks.</summary>
+  <exports>
+    <export name="Prose" />
+  </exports>
+  <related>
+    <ref id="text" />
+    <ref id="title" />
+    <ref id="stack" />
+  </related>
+  <units>
+    <unit kind="a11y" href="a11y.xml" />
+    <unit kind="props" href="props.xml" />
+    <unit kind="usage" href="usage.xml" />
+    <unit kind="patterns" href="patterns.xml" />
+  </units>
+</meta>

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

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<patterns surface="prose">
+  <example title="Article with Title and Text">
+    <tsx><![CDATA[
+<Prose render={<article />}>
+  <Title size="2" lineHeight="s" render={<h2 />}>
+    Heading-aware document rhythm
+  </Title>
+  <Text render={<p />}>
+    Direct heading and paragraph children pick up Prose gaps. Type stays on Title and Text.
+  </Text>
+  <Text render={<p />}>A second paragraph uses the block gap, not the heading-end gap.</Text>
+</Prose>
+]]></tsx>
+    <notes>Default `gap="l"`. Landmark via `render={<article />}`. Title in Prose uses `lineHeight="s"`. Do not wrap these blocks in Stack for rhythm.</notes>
+  </example>
+
+  <example title="Density and region align">
+    <tsx><![CDATA[
+<Prose gap="s" align="center">
+  <Title size="3" lineHeight="s" render={<h3 />}>
+    Compact notes
+  </Title>
+  <Text render={<p />}>One Prose `align` sets the region. Omit Title/Text `align` so they inherit.</Text>
+</Prose>
+]]></tsx>
+    <notes>`s` &lt; `m` &lt; `l`. `align` maps to `--vui-prose-align` + `text-align` on the root. Title `lineHeight="s"`.</notes>
+  </example>
+
+  <example title="Line height on body">
+    <tsx><![CDATA[
+<Prose>
+  <Title size="2" lineHeight="s" render={<h2 />}>
+    Tight heading, chosen body leading
+  </Title>
+  <Text render={<p />} lineHeight="l">
+    Headings in Prose stay on Title `lineHeight="s"`. Body leading is a Text prop — this paragraph uses `l`.
+  </Text>
+  <Text render={<p />} lineHeight="s">
+    A following paragraph can use `lineHeight="s"` when the article should sit denser.
+  </Text>
+</Prose>
+]]></tsx>
+    <notes>Prose does not own leading. Title inside Prose → `lineHeight="s"`. Text `lineHeight` per block.</notes>
+  </example>
+
+  <example title="Span hosts stay out">
+    <tsx><![CDATA[
+<Prose>
+  <Title size="4" lineHeight="s">
+    This Title is a span — no Prose heading gap
+  </Title>
+  <Text>This Text is a span — no Prose block gap.</Text>
+  <Text render={<p />}>This paragraph is a matching block.</Text>
+</Prose>
+]]></tsx>
+    <notes>Default Title/Text hosts are `span`. Use `render` for h1–h6 / `p` when they should join rhythm. Title still `lineHeight="s"`.</notes>
+  </example>
+</patterns>

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

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<props surface="prose">
+  <when_to_use>
+    <item>Long-form copy whose direct children are headings and blocks that need heading-aware vertical rhythm</item>
+    <item>Article, docs, or changelog regions where Stack `rowGap` would make heading→body and body→body the same</item>
+    <item>Optional `gap` density (`s` / `m` / `l`) and region `align` (Title/Text that omit `align` inherit it)</item>
+  </when_to_use>
+  <when_not_to_use>
+    <item>UI chrome spacing (cards, toolbars, form rows) — use Stack `rowGap` / `columnGap`</item>
+    <item>Restyling type, lists, links, or tables — stay on Title / Text / consumer CSS</item>
+    <item>Markdown parse or sanitize — Prose only spaces matching direct children</item>
+  </when_not_to_use>
+  <prop name="align" kind="react">
+    <description>Aligns the region using logical alignment values. Omit so `text-align` inherits from the parent. Title/Text children that omit `align` inherit this value.</description>
+  </prop>
+  <prop name="gap" kind="react">
+    <description>Em density for heading-aware vertical rhythm (`s` &lt; `m` &lt; `l`).</description>
+  </prop>
+  <prop name="ref" kind="react">
+    <description>Ref forwarded to the rendered prose root element.</description>
+  </prop>
+  <prop name="render" kind="react">
+    <description>Replaces the default `div` root using Base UI render semantics.</description>
+  </prop>
+  <prop name="align" kind="css">
+    <description>Region `text-align` (`--vui-prose-align`) when the `align` prop is set; omitted inherits parent `text-align`.</description>
+  </prop>
+  <prop name="gap-blocks" kind="css">
+    <description>Block sibling gap (`--vui-prose-gap-blocks`). Default `2em` (`l`); `s`/`m` assign smaller triples on the root.</description>
+  </prop>
+  <prop name="gap-heading-end" kind="css">
+    <description>Heading block-end gap (`--vui-prose-gap-heading-end`). Default `0.8em` (`l`).</description>
+  </prop>
+  <prop name="gap-heading-start" kind="css">
+    <description>Gap after a heading onto the next sibling (`--vui-prose-gap-heading-start`). Default `1.3em` (`l`).</description>
+  </prop>
+</props>