@viraui/react 2026.4.1 → 2026.5.0

package/dist/core/theme/full-radius-style.d.ts

@@ -0,0 +1,6 @@
+export type FullCornerShapeStyle = {
+    '--__corner-shape': 'round';
+};
+export declare const isFullRadiusValue: (value: string | number | null | undefined) => boolean;
+/** Sets `--__corner-shape: round` when any value is the full radius token or CSS. */
+export declare const fullCornerShapeStyle: (...values: Array<string | number | null | undefined>) => FullCornerShapeStyle | undefined;

package/dist/core/theme/full-radius-style.js

@@ -0,0 +1,13 @@
+//#region src/core/theme/full-radius-style.ts
+var FULL_RADIUS_MARKER = /(?:--radius-full|\b1e5px\b)/;
+var isFullRadiusValue = (value) => {
+	if (value === "full") return true;
+	if (typeof value !== "string" || value.length === 0) return false;
+	return FULL_RADIUS_MARKER.test(value);
+};
+/** Sets `--__corner-shape: round` when any value is the full radius token or CSS. */
+var fullCornerShapeStyle = (...values) => {
+	if (values.some(isFullRadiusValue)) return { "--__corner-shape": "round" };
+};
+//#endregion
+export { fullCornerShapeStyle, isFullRadiusValue };

package/dist/preflight.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.preflight{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-mode{syntax:"<color>";initial-value:#000;inherits:true}@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{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-medium);font-optical-sizing:auto;font-family:var(--font-family-body),system-ui,sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums;@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-x-small) + var(--space-2x-small)) var(--space-small)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}}@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/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) var(--shadow-blur-3) oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) var(--shadow-blur-4) oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:2px;--y3:4px;--y4:7px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:1px;--shadow-blur-2:2px;--shadow-blur-3:2px;--shadow-blur-4:3px}[data-elevation-hover="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:0px;--x2:2px;--x3:4px;--x4:7px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:1px;--y2:5px;--y3:11px;--y4:19px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:3px;--shadow-blur-2:5px;--shadow-blur-3:6px;--shadow-blur-4:8px}[data-elevation-hover="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]):hover,[data-elevation="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-blur-3:7px}[data-elevation-hover="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:1px;--x2:5px;--x3:11px;--x4:19px}[data-elevation-hover="2"]:where([data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=right]){--shadow-blur-3:6px}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:4px;--shadow-blur-2:7px;--shadow-blur-3:10px;--shadow-blur-4:12px}[data-elevation-hover="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:2px;--x2:7px;--x3:16px;--x4:29px}[data-elevation-hover="3"]:where([data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=right]){--x2:10px;--x3:22px;--x4:39px;--shadow-blur-1:5px;--shadow-blur-2:10px;--shadow-blur-3:13px;--shadow-blur-4:15px}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:8px;--shadow-blur-2:14px;--shadow-blur-3:20px;--shadow-blur-4:23px}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=left]):hover,[data-elevation="4"]:where([data-elevation-direction=left]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:15px;--x3:33px;--x4:58px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:14px;--x3:33px;--x4:58px}}}@layer viraui.preflight{[data-grow=true]{--vira-flex-grow:1;flex-grow:1}[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=true]{--vira-flex-shrink:1;flex-shrink:1}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/12%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{font-size:1em;font-family:var(--font-family-mono);&:not(:where(pre &)){background-color:var(--global-contrast);border-radius:var(--radius-small);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%)}}}}
+@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-xs:0.75rem;--font-scale-body-s:0.875rem;--font-scale-body-m:1rem;--font-scale-body-l:round(down, calc(1rem * pow(var(--font-body-typescale), 3)), 1px);--font-scale-body-xl: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%)}}}}

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

@@ -2,7 +2,7 @@
 <props surface="avatar">
   <when_to_use>
     <item>Show a user or entity photo with text or image fallback</item>
-    <item>Display profile chips from x-small through large sizes</item>
+    <item>Display profile chips from xs through large sizes</item>
   </when_to_use>
   <when_not_to_use>
     <item>Interactive controls or navigation</item>

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

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <usage surface="avatar">
   <do>Show a user or entity photo with text or image fallback</do>
-  <do>Display profile chips from x-small through large sizes</do>
+  <do>Display profile chips from xs through large sizes</do>
   <dont>Relying on Avatar children for layout sizing</dont>
   <dont>Omitting meaningful alt text when the image conveys identity</dont>
 </usage>

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

@@ -69,7 +69,7 @@
     <description>Horizontal padding inside the button.</description>
   </css_var>
   <css_var suffix="radius">
-    <description>Corner radius; pill sets infinite radius via data-pill.</description>
+    <description>Corner radius; pill sets full radius via data-pill.</description>
   </css_var>
   <css_var suffix="spinner-color">
     <description>Loading spinner color on the root.</description>
@@ -93,7 +93,7 @@
     <description>Horizontal padding inside the button. (button-link)</description>
   </css_var>
   <css_var suffix="radius">
-    <description>Corner radius; pill sets infinite radius via data-pill. (button-link)</description>
+    <description>Corner radius; pill sets full radius via data-pill. (button-link)</description>
   </css_var>
   <css_var suffix="spinner-color">
     <description>Loading spinner color on the root. (button-link)</description>

package/dist/specs/components/icon-button/props.xml

@@ -63,7 +63,7 @@
     <description>Horizontal padding inside the button.</description>
   </css_var>
   <css_var suffix="radius">
-    <description>Corner radius; pill sets infinite radius via data-pill.</description>
+    <description>Corner radius; pill sets full radius via data-pill.</description>
   </css_var>
   <css_var suffix="spinner-color">
     <description>Loading spinner color on the root.</description>
@@ -87,7 +87,7 @@
     <description>Horizontal padding inside the button. (icon-button-link)</description>
   </css_var>
   <css_var suffix="radius">
-    <description>Corner radius; pill sets infinite radius via data-pill. (icon-button-link)</description>
+    <description>Corner radius; pill sets full radius via data-pill. (icon-button-link)</description>
   </css_var>
   <css_var suffix="spinner-color">
     <description>Loading spinner color on the root. (icon-button-link)</description>

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

@@ -19,7 +19,7 @@
     <description>Decorative leading node rendered before the item label.</description>
   </prop>
   <prop name="CheckboxItem.note" kind="react">
-    <description>End-aligned secondary text (e.g. keyboard shortcut) before the check indicator. Rendered muted `x-small`.</description>
+    <description>End-aligned secondary text (e.g. keyboard shortcut) before the check indicator. Rendered muted `xs`.</description>
   </prop>
   <prop name="CheckboxItem.sentiment" kind="react">
     <description>Visual sentiment. `destructive` uses highlight-red wash + text.</description>
@@ -31,7 +31,7 @@
     <description>Decorative leading node rendered before the item label.</description>
   </prop>
   <prop name="Item.note" kind="react">
-    <description>End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `x-small`.</description>
+    <description>End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `xs`.</description>
   </prop>
   <prop name="Item.sentiment" kind="react">
     <description>Visual sentiment. `destructive` uses highlight-red wash + text.</description>
@@ -40,7 +40,7 @@
     <description>Decorative leading node rendered before the item label.</description>
   </prop>
   <prop name="LinkItem.note" kind="react">
-    <description>End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `x-small`.</description>
+    <description>End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `xs`.</description>
   </prop>
   <prop name="LinkItem.sentiment" kind="react">
     <description>Visual sentiment. `destructive` uses highlight-red wash + text.</description>
@@ -58,7 +58,7 @@
     <description>Decorative leading node rendered before the item label.</description>
   </prop>
   <prop name="RadioItem.note" kind="react">
-    <description>End-aligned secondary text (e.g. keyboard shortcut) before the check indicator. Rendered muted `x-small`.</description>
+    <description>End-aligned secondary text (e.g. keyboard shortcut) before the check indicator. Rendered muted `xs`.</description>
   </prop>
   <prop name="RadioItem.sentiment" kind="react">
     <description>Visual sentiment. `destructive` uses highlight-red wash + text.</description>

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

@@ -3,7 +3,7 @@
   <when_to_use>
     <item>Body copy with semantic tone (including brand `primary`) and token-backed typography</item>
     <item>Helper, label, or inline copy inside other components</item>
-    <item>Mono or body family text with fluid clamp sizing</item>
+    <item>Mono or body family text with fluid clamp sizing (gated by --effect-fluid-typography; off → fixed at --font-scale-body-* for that size)</item>
   </when_to_use>
   <when_not_to_use>
     <item>Headings or display typography — use Title</item>
@@ -46,7 +46,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.</description>
+    <description>Selects a semantic body typography size from the active theme scale. Fluid clamp between prev step and this size’s --font-scale-body-* token is on when --effect-fluid-typography is empty; set the theme effect to initial to lock at that body scale token. size xs is always fixed.</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>
@@ -82,7 +82,7 @@
     <description>Optical size axis on the root (variable fonts).</description>
   </css_var>
   <css_var suffix="font-size">
-    <description>Body font size; size prop presets via data attributes.</description>
+    <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.</description>
   </css_var>
   <css_var suffix="font-weight">
     <description>Font weight on the root; keyword presets or numeric via weight prop.</description>

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

@@ -2,6 +2,6 @@
 <usage surface="text">
   <do>Body copy with semantic tone (including brand `primary`) and token-backed typography</do>
   <do>Helper, label, or inline copy inside other components</do>
-  <do>Mono or body family text with fluid clamp sizing</do>
+  <do>Mono or body family text with fluid clamp sizing (gated by --effect-fluid-typography; off → fixed at --font-scale-body-* for that size)</do>
   <dont>Using Text for headings instead of Title</dont>
 </usage>

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

@@ -4,7 +4,7 @@
     <item>Headings and display text with title presets</item>
     <item>Semantic heading tags chosen explicitly through render</item>
     <item>Size and render paired together for most heading use cases</item>
-    <item>Fluid clamp sizing across title appearance presets</item>
+    <item>Fluid clamp sizing across title appearance presets (gated by --effect-fluid-typography; off → fixed at --font-scale-display / h-* for that size)</item>
   </when_to_use>
   <when_not_to_use>
     <item>Body copy — use Text</item>
@@ -44,7 +44,7 @@
     <description>Enables text selection on the rendered copy.</description>
   </prop>
   <prop name="size" kind="react">
-    <description>Selects a heading or display typography preset from the active theme scale. This controls only the visual preset. Semantic heading choice remains owned by `render`, because `Title` keeps a `span` root unless `render` replaces it.</description>
+    <description>Selects a heading or display typography preset from the active theme scale. This controls only the visual preset. Semantic heading choice remains owned by `render`, because `Title` keeps a `span` root unless `render` replaces it. Fluid clamp between prev step and this size’s --font-scale-display / --font-scale-h* token is on when --effect-fluid-typography is empty; set the theme effect to initial to lock at that scale token.</description>
   </prop>
   <prop name="tracking" kind="react">
     <description>Sets letter spacing on the rendered copy. Overrides size preset letter-spacing when set.</description>
@@ -77,7 +77,7 @@
     <description>Optical size axis on the root (variable fonts).</description>
   </css_var>
   <css_var suffix="font-size">
-    <description>Heading font size; size prop presets via data attributes.</description>
+    <description>Heading font size; size prop presets via data attributes. Defaults to the theme scale token for that size; clamp (prev step→token) applies only when --effect-fluid-typography is on.</description>
   </css_var>
   <css_var suffix="font-weight">
     <description>Font weight on the root.</description>

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

@@ -3,7 +3,7 @@
   <do>Headings and display text with title presets</do>
   <do>Semantic heading tags chosen explicitly through render</do>
   <do>Size and render paired together for most heading use cases</do>
-  <do>Fluid clamp sizing across title appearance presets</do>
+  <do>Fluid clamp sizing across title appearance presets (gated by --effect-fluid-typography; off → fixed at --font-scale-display / h-* for that size)</do>
   <dont>Assuming size changes the HTML tag automatically</dont>
   <dont>Letting size force the HTML tag instead of choosing render explicitly</dont>
   <dont>Using Title for long body paragraphs</dont>

package/dist/specs/components/toggle-button/props.xml

@@ -53,7 +53,7 @@
     <description>Horizontal padding inside the button.</description>
   </css_var>
   <css_var suffix="radius">
-    <description>Corner radius; pill sets infinite radius via data-pill.</description>
+    <description>Corner radius; pill sets full radius via data-pill.</description>
   </css_var>
   <css_var suffix="spinner-color">
     <description>Loading spinner color on the root.</description>

package/dist/specs/foundation/modules.xml

@@ -7,6 +7,9 @@
   <module id="core" file="core.css">
     <purpose>Root baseline including html font-size from --font-root-size, --is-light-mode registration, global element defaults, and corner-shape gate via var(--__corner-shape, var(--corner-shape)).</purpose>
   </module>
+  <module id="font-scale" file="font-scale.css">
+    <purpose>Derive --font-scale-* from --font-heading-typescale / --font-body-typescale with pow + round(down, …, 1px). Fixed body-xs/body-s; body-m = 1rem; display = heading n=8.</purpose>
+  </module>
   <module id="typography" file="typography.css">
     <purpose>Semantic HTML element typography and link styling opt-out.</purpose>
   </module>
@@ -55,8 +58,8 @@
     <set_by>data-shrink=&quot;true&quot; or data-shrink=&quot;false&quot;; registered in global-properties.css</set_by>
   </custom_property>
   <custom_property name="--__corner-shape">
-    <purpose>Internal override for the preflight corner-shape gate so infinite radius keeps round pill arcs when --effect-corner-shape is on. Not a consumer data-* or public theme recipe. Consumers must disable corner-shape when using infinite radius.</purpose>
+    <purpose>Internal override for the preflight corner-shape gate so full radius keeps round pill arcs when --effect-corner-shape is on. Not a consumer data-* or public theme recipe. Consumers must disable corner-shape when using full radius.</purpose>
     <default>guaranteed-invalid (no initial-value); inherits: false; preflight uses var(--__corner-shape, var(--corner-shape))</default>
-    <set_by>ViraUI components on the same element as infinite / pill radius (CSS modules or React style); registered in global-properties.css</set_by>
+    <set_by>ViraUI components on the same element as full / pill radius (CSS modules or React style); registered in global-properties.css</set_by>
   </custom_property>
 </modules>

package/dist/specs/foundation/theme-topics.xml

@@ -14,8 +14,8 @@
     <summary>App-facing foreground, background, primary, muted, interactive, disabled, and contrast colors.</summary>
   </topic>
   <topic id="effects">
-    <pattern>--effect-vibrancy | --effect-corner-shape | --effect-holofoil | --effect-shadows</pattern>
-    <summary>Optional effect toggles; empty/unset = on, initial = off. Brand holofoil defaults to initial (off); vibrancy, corner-shape, and shadows default empty (on). Holofoil on paints a fixed body::after foil overlay; shadows off disables preflight data-elevation box-shadow stacks.</summary>
+    <pattern>--effect-vibrancy | --effect-corner-shape | --effect-holofoil | --effect-shadows | --effect-fluid-typography</pattern>
+    <summary>Optional effect toggles; empty/unset = on, initial = off. Brand holofoil defaults to initial (off); vibrancy, corner-shape, shadows, and fluid-typography default empty (on). Holofoil on paints a fixed body::after foil overlay; shadows off disables preflight data-elevation box-shadow stacks; fluid-typography off locks Text/Title to each size’s theme scale token.</summary>
   </topic>
   <topic id="vibrancy">
     <pattern>--vibrancy-blur | --vibrancy-brightness</pattern>
@@ -27,7 +27,7 @@
   </topic>
   <topic id="radius">
     <pattern>--radius-* | --corner-shape</pattern>
-    <summary>Semantic radius scale plus corner-shape value for component chrome. Infinite/pill radius with --effect-corner-shape on can cap true pills; ViraUI sets internal --__corner-shape (preflight-owned, not a consumer data-*) beside infinite radius.</summary>
+    <summary>Semantic radius scale plus corner-shape value for component chrome. Full/pill radius with --effect-corner-shape on can cap true pills; ViraUI sets internal --__corner-shape (preflight-owned, not a consumer data-*) beside full radius.</summary>
   </topic>
   <topic id="space">
     <pattern>--space-*</pattern>
@@ -37,9 +37,13 @@
     <pattern>--font-root-size</pattern>
     <summary>Root html font-size as a percentage of the user-agent default; preflight applies it on html so rem-based scales inherit the brand baseline.</summary>
   </topic>
+  <topic id="font-typescale">
+    <pattern>--font-heading-typescale | --font-body-typescale</pattern>
+    <summary>Editable modular ratios from theme CSS. Preflight derives --font-scale-* from these with pow + round(down). Override these (not baked sizes) for live typography scale changes.</summary>
+  </topic>
   <topic id="font-scale">
     <pattern>--font-scale-*</pattern>
-    <summary>Semantic typography sizes including display, headings, and body steps.</summary>
+    <summary>Semantic typography sizes (display, headings, body steps) derived by preflight from typescale ratios — not theme source tokens. body-m is always 1rem; body-xs/body-s are fixed 12px/14px; display uses heading ratio at n=8. Text/Title fluid clamp between scale tokens is gated by --effect-fluid-typography (off → fixed at that size’s scale token).</summary>
   </topic>
   <topic id="font-family">
     <pattern>--font-family-heading | --font-family-body | --font-family-mono</pattern>

package/dist/specs/foundation/toggles.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <toggles>
-  <summary>Core polarity and theme effect gates shipped with preflight. Polarity: --is-light-mode is a &lt;color&gt; on the root container (black = light theme, white = dark theme); query it with @container root style(--is-light-mode: black|white). Effect toggles: empty/unset = on, initial = off; brand holofoil defaults to initial (off); vibrancy, corner-shape, and shadows default empty (on). Gate effects with @container root not style(--effect-*: initial). Holofoil on paints a fixed body::after foil overlay; shadows off disables preflight data-elevation box-shadow stacks.</summary>
+  <summary>Core polarity and theme effect gates shipped with preflight. Polarity: --is-light-mode is a &lt;color&gt; on the root container (black = light theme, white = dark theme); query it with @container root style(--is-light-mode: black|white). Effect toggles: empty/unset = on, initial = off; brand holofoil defaults to initial (off); vibrancy, corner-shape, shadows, and fluid-typography default empty (on). Gate effects with @container root not style(--effect-*: initial). Holofoil on paints a fixed body::after foil overlay; shadows off disables preflight data-elevation box-shadow stacks; fluid-typography off locks Text/Title font-size to each size’s theme scale token.</summary>
   <toggle name="--is-light-mode">
     <when>html registers polarity via contrast-color(var(--global-background)) so light backgrounds resolve to black and dark backgrounds to white; container name is root (see core.css).</when>
     <when>data-mode=&quot;light&quot; forces --is-light-mode: black and color-scheme: light; data-mode=&quot;dark&quot; forces white and color-scheme: dark.</when>
@@ -19,7 +19,10 @@
   <toggle name="--effect-holofoil">
     <when>Brand default is initial (off). When on, paints a fixed body::after foil overlay gated by @container root not style(--effect-holofoil: initial); foil blend adjusts under @container root style(--is-light-mode: white). Do not invent alternate foil hooks.</when>
   </toggle>
+  <toggle name="--effect-fluid-typography">
+    <when>Empty/unset enables Text/Title fluid clamp sizing (prev scale step→step via container progress); set to initial to lock each size at its theme scale token (--font-scale-body-* / --font-scale-display / --font-scale-h*). Text and Title module CSS gate with @container root not style(--effect-fluid-typography: initial). No React prop or data-* — theme root only. Text size xs stays fixed regardless. At full fluid progress, on and off resolve to the same token.</when>
+  </toggle>
   <toggle name="--corner-shape">
-    <when>Theme corner shape token; preflight may set internal --__corner-shape beside infinite radius. Not a consumer data-*.</when>
+    <when>Theme corner shape token; preflight may set internal --__corner-shape beside full radius. Not a consumer data-*.</when>
   </toggle>
 </toggles>

package/dist/specs/index.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<index package="@viraui/react" version="2026.4.1" generated="2026-09-22T09:20:23.926Z">
+<index package="@viraui/react" version="2026.5.0" generated="2026-09-23T18:11:26.525Z">
   <categories>
     <category id="layout" />
     <category id="action" />

package/dist/specs/patterns/settings-row.xml

@@ -10,7 +10,7 @@
   <tsx><![CDATA[
 <Stack direction="row" vAlign="center" gap="3" fullWidth>
   <Stack gap="1" expandChildren>
-    <Text weight="medium">Notifications</Text>
+    <Text weight="m">Notifications</Text>
     <Text size="sm" color="muted">Email digests for account activity</Text>
   </Stack>
   <Switch aria-label="Notifications" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.4.1",
+  "version": "2026.5.0",
   "private": false,
   "files": [
     "dist"
@@ -28,8 +28,8 @@
   },
   "devDependencies": {
     "@base-ui/react": ">=1.7.0",
-    "@viraui/foundation": "2026.4.1",
-    "@viraui/icons": "2026.0.3",
+    "@viraui/foundation": "2026.5.0",
+    "@viraui/icons": "2026.1.0",
     "@viraui/postcss-config": "2026.0.0",
     "@viraui/tsconfig": "2026.0.0",
     "postcss": "8.5.26",

package/dist/core/theme/infinite-radius-style.d.ts

@@ -1,6 +0,0 @@
-export type InfiniteCornerShapeStyle = {
-    '--__corner-shape': 'round';
-};
-export declare const isInfiniteRadiusValue: (value: string | number | null | undefined) => boolean;
-/** Sets `--__corner-shape: round` when any value is the infinite radius token or CSS. */
-export declare const infiniteCornerShapeStyle: (...values: Array<string | number | null | undefined>) => InfiniteCornerShapeStyle | undefined;

package/dist/core/theme/infinite-radius-style.js

@@ -1,13 +0,0 @@
-//#region src/core/theme/infinite-radius-style.ts
-var INFINITE_RADIUS_MARKER = /(?:--radius-infinite|\b1e5px\b)/;
-var isInfiniteRadiusValue = (value) => {
-	if (value === "infinite") return true;
-	if (typeof value !== "string" || value.length === 0) return false;
-	return INFINITE_RADIUS_MARKER.test(value);
-};
-/** Sets `--__corner-shape: round` when any value is the infinite radius token or CSS. */
-var infiniteCornerShapeStyle = (...values) => {
-	if (values.some(isInfiniteRadiusValue)) return { "--__corner-shape": "round" };
-};
-//#endregion
-export { infiniteCornerShapeStyle, isInfiniteRadiusValue };