@viraui/react 2026.4.1 → 2026.6.0

package/dist/components/shimmer/shimmer.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-shimmer-duration{syntax:"<time>";inherits:false;initial-value:0s}@property --vui-shimmer-spread{syntax:"<length>";inherits:false;initial-value:0}@property --vui-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@property --vui-shimmer-highlight{syntax:"<color>";inherits:false;initial-value:#0000}@property --__shimmer-base{syntax:"<color>";inherits:false;initial-value:currentcolor}.viraui__shimmer-module__Shimmer_1k-ZM{--vui-shimmer-duration:var(--duration-slowest);--vui-shimmer-spread:calc(3ch + var(--space-2x-large));--vui-shimmer-highlight:oklch(from var(--__shimmer-base) min(calc(l + 0.35), 1) c h);background-image:linear-gradient(calc(90deg + var(--vui-shimmer-angle)),var(--__shimmer-base) calc(50% - var(--vui-shimmer-spread)),color-mix(in oklch,var(--vui-shimmer-highlight),var(--__shimmer-base) 50%) calc(50% - var(--vui-shimmer-spread) * .5),var(--vui-shimmer-highlight) 50%,color-mix(in oklch,var(--vui-shimmer-highlight),var(--__shimmer-base) 50%) calc(50% + var(--vui-shimmer-spread) * .5),var(--__shimmer-base) calc(50% + var(--vui-shimmer-spread)));background-repeat:no-repeat;background-size:calc(200% + var(--vui-shimmer-spread) * 2) 100%;background-position:0 0;background-clip:text;-webkit-text-fill-color:#0000;animation:viraui__shimmer-module__shimmer-slide_V1znC var(--vui-shimmer-duration) linear infinite;&::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));-webkit-text-fill-color:contrast-color(var(--global-primary));background-image:none;background-clip:initial;text-shadow:none}@media (prefers-reduced-motion:reduce){background-image:none;-webkit-text-fill-color:initial}}@keyframes viraui__shimmer-module__shimmer-slide_V1znC{0%{background-position:0 0}to{background-position:100% 0}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-shimmer-duration{syntax:"<time>";inherits:false;initial-value:0s}@property --vui-shimmer-spread{syntax:"<length>";inherits:false;initial-value:0}@property --vui-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@property --vui-shimmer-highlight{syntax:"<color>";inherits:false;initial-value:#0000}@property --__shimmer-base{syntax:"<color>";inherits:false;initial-value:currentcolor}.viraui__shimmer-module__Shimmer_1k-ZM{--vui-shimmer-duration:var(--duration-slowest);--vui-shimmer-spread:calc(3ch + var(--space-2xl));--vui-shimmer-highlight:oklch(from var(--__shimmer-base) min(calc(l + 0.35), 1) c h);background-image:linear-gradient(calc(90deg + var(--vui-shimmer-angle)),var(--__shimmer-base) calc(50% - var(--vui-shimmer-spread)),color-mix(in oklch,var(--vui-shimmer-highlight),var(--__shimmer-base) 50%) calc(50% - var(--vui-shimmer-spread) * .5),var(--vui-shimmer-highlight) 50%,color-mix(in oklch,var(--vui-shimmer-highlight),var(--__shimmer-base) 50%) calc(50% + var(--vui-shimmer-spread) * .5),var(--__shimmer-base) calc(50% + var(--vui-shimmer-spread)));background-repeat:no-repeat;background-size:calc(200% + var(--vui-shimmer-spread) * 2) 100%;background-position:0 0;background-clip:text;-webkit-text-fill-color:#0000;animation:viraui__shimmer-module__shimmer-slide_V1znC var(--vui-shimmer-duration) linear infinite;&::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));-webkit-text-fill-color:contrast-color(var(--global-primary));background-image:none;background-clip:initial;text-shadow:none}@media (prefers-reduced-motion:reduce){background-image:none;-webkit-text-fill-color:initial}}@keyframes viraui__shimmer-module__shimmer-slide_V1znC{0%{background-position:0 0}to{background-position:100% 0}}}

package/dist/components/shimmer/shimmer.d.ts

@@ -17,7 +17,7 @@ export type ShimmerProps = React.ComponentPropsWithoutRef<'span'> & {
     /**
      * Sets the shimmer highlight spread using any valid CSS length string.
      *
-     * @default The CSS spread is `calc(3ch + var(--space-2x-large))`.
+     * @default The CSS spread is `calc(3ch + var(--space-2xl))`.
      */
     spread?: string;
     /**

package/dist/components/skeleton/skeleton-overlay.d.ts

@@ -24,7 +24,7 @@ export type SkeletonOverlayProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Sets the corner radius from the Vira radius token scale.
      *
-     * @default 'small'
+     * @default 's'
      */
     radius?: ThemeTypes['radius'];
     /**

package/dist/components/skeleton/skeleton-overlay.js

@@ -1,5 +1,5 @@
 import { clsx } from "../../core/clsx.js";
-import { infiniteCornerShapeStyle } from "../../core/theme/infinite-radius-style.js";
+import { fullCornerShapeStyle } from "../../core/theme/full-radius-style.js";
 import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
 import skeleton_module_default from "./skeleton.module.js";
 import { jsx } from "react/jsx-runtime";
@@ -7,8 +7,8 @@ import { jsx } from "react/jsx-runtime";
 var SkeletonOverlay = ({ animate = true, radius, children, className, duration = "slow", ref, style, ...otherProps }) => {
 	const dynamicStyle = {
 		...radius != null && {
-			"--vui-skeleton-border-radius": resolveThemeValue(radius, "radius", "var(--radius-small)"),
-			...infiniteCornerShapeStyle(radius)
+			"--vui-skeleton-border-radius": resolveThemeValue(radius, "radius", "var(--radius-s)"),
+			...fullCornerShapeStyle(radius)
 		},
 		...duration != null && { "--vui-skeleton-duration": resolveThemeValue(duration, "duration", "var(--duration-slow)") },
 		...style

package/dist/components/skeleton/skeleton.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-skeleton-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-skeleton-inline-size{syntax:"*";inherits:false;initial-value:auto}@property --vui-skeleton-block-size{syntax:"*";inherits:false;initial-value:auto}@property --vui-skeleton-min-inline-size{syntax:"*";inherits:false;initial-value:none}@property --vui-skeleton-min-block-size{syntax:"*";inherits:false;initial-value:none}@property --vui-skeleton-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-skeleton-duration{syntax:"<time>";inherits:false;initial-value:0s}@property --vui-skeleton-wipe{syntax:"<percentage>";inherits:true;initial-value:-100%}.viraui__skeleton-module__Overlay_sZSQe,.viraui__skeleton-module__Skeleton_pn7Xk{--vui-skeleton-background:var(--global-contrast);--vui-skeleton-duration:var(--duration-slow);--vui-skeleton-border-radius:var(--radius-small);box-sizing:border-box;overflow:hidden;background-color:var(--vui-skeleton-background);opacity:1;border-radius:var(--vui-skeleton-border-radius);animation:viraui__skeleton-module__skeleton-fade_XHkG4 var(--vui-skeleton-duration) var(--easing-standard) infinite alternate;&[data-animate=false]{animation:none;opacity:1}@media (prefers-reduced-motion:reduce){animation:none;opacity:1}}.viraui__skeleton-module__Skeleton_pn7Xk{--vui-skeleton-min-inline-size:var(--space-x-large);--vui-skeleton-min-block-size:var(--space-medium);display:inline-block;inline-size:var(--vui-skeleton-inline-size);block-size:var(--vui-skeleton-block-size);min-inline-size:var(--vui-skeleton-min-inline-size);min-block-size:var(--vui-skeleton-min-block-size);max-inline-size:100%;vertical-align:middle}.viraui__skeleton-module__Overlay_sZSQe{display:grid}.viraui__skeleton-module__OverlayMeasure_1zcKX{display:contents}:where(.viraui__skeleton-module__OverlayMeasure_1zcKX>*){visibility:hidden;grid-area:1/1;min-inline-size:0}@keyframes viraui__skeleton-module__skeleton-fade_XHkG4{0%{opacity:.52}to{opacity:1}}::view-transition-group(skeleton-overlay){border-radius:var(--radius-x-large);overflow:hidden}::view-transition-image-pair(skeleton-overlay){mix-blend-mode:normal}::view-transition-old(skeleton-overlay){z-index:2;mask-image:linear-gradient(to right,#000 var(--vui-skeleton-wipe),#0000 calc(var(--vui-skeleton-wipe) + 100%));animation:viraui__skeleton-module__vui-skeleton-wipe-out_0-qrj .6s ease-in-out forwards;@media (prefers-reduced-motion:reduce){animation:none}}::view-transition-new(skeleton-overlay){animation:none}@keyframes viraui__skeleton-module__vui-skeleton-wipe-out_0-qrj{0%{--vui-skeleton-wipe:100%}to{--vui-skeleton-wipe:-100%}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-skeleton-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-skeleton-inline-size{syntax:"*";inherits:false;initial-value:auto}@property --vui-skeleton-block-size{syntax:"*";inherits:false;initial-value:auto}@property --vui-skeleton-min-inline-size{syntax:"*";inherits:false;initial-value:none}@property --vui-skeleton-min-block-size{syntax:"*";inherits:false;initial-value:none}@property --vui-skeleton-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-skeleton-duration{syntax:"<time>";inherits:false;initial-value:0s}@property --vui-skeleton-wipe{syntax:"<percentage>";inherits:true;initial-value:-100%}.viraui__skeleton-module__Overlay_sZSQe,.viraui__skeleton-module__Skeleton_pn7Xk{--vui-skeleton-background:var(--global-contrast);--vui-skeleton-duration:var(--duration-slow);--vui-skeleton-border-radius:var(--radius-s);box-sizing:border-box;overflow:hidden;background-color:var(--vui-skeleton-background);opacity:1;border-radius:var(--vui-skeleton-border-radius);animation:viraui__skeleton-module__skeleton-fade_XHkG4 var(--vui-skeleton-duration) var(--easing-standard) infinite alternate;&[data-animate=false]{animation:none;opacity:1}@media (prefers-reduced-motion:reduce){animation:none;opacity:1}}.viraui__skeleton-module__Skeleton_pn7Xk{--vui-skeleton-min-inline-size:var(--space-xl);--vui-skeleton-min-block-size:var(--space-m);display:inline-block;inline-size:var(--vui-skeleton-inline-size);block-size:var(--vui-skeleton-block-size);min-inline-size:var(--vui-skeleton-min-inline-size);min-block-size:var(--vui-skeleton-min-block-size);max-inline-size:100%;vertical-align:middle}.viraui__skeleton-module__Overlay_sZSQe{display:grid}.viraui__skeleton-module__OverlayMeasure_1zcKX{display:contents}:where(.viraui__skeleton-module__OverlayMeasure_1zcKX>*){visibility:hidden;grid-area:1/1;min-inline-size:0}@keyframes viraui__skeleton-module__skeleton-fade_XHkG4{0%{opacity:.52}to{opacity:1}}::view-transition-group(skeleton-overlay){border-radius:var(--radius-xl);overflow:hidden}::view-transition-image-pair(skeleton-overlay){mix-blend-mode:normal}::view-transition-old(skeleton-overlay){z-index:2;mask-image:linear-gradient(to right,#000 var(--vui-skeleton-wipe),#0000 calc(var(--vui-skeleton-wipe) + 100%));animation:viraui__skeleton-module__vui-skeleton-wipe-out_0-qrj .6s ease-in-out forwards;@media (prefers-reduced-motion:reduce){animation:none}}::view-transition-new(skeleton-overlay){animation:none}@keyframes viraui__skeleton-module__vui-skeleton-wipe-out_0-qrj{0%{--vui-skeleton-wipe:100%}to{--vui-skeleton-wipe:-100%}}}

package/dist/components/skeleton/skeleton.d.ts

@@ -43,7 +43,7 @@ export type SkeletonProps = React.ComponentPropsWithoutRef<'div'> & {
     /**
      * Sets the corner radius from the Vira radius token scale.
      *
-     * @default 'small'
+     * @default 's'
      */
     radius?: ThemeTypes['radius'];
     /**

package/dist/components/skeleton/skeleton.js

@@ -1,6 +1,6 @@
 import './skeleton.css';
 import { clsx } from "../../core/clsx.js";
-import { infiniteCornerShapeStyle } from "../../core/theme/infinite-radius-style.js";
+import { fullCornerShapeStyle } from "../../core/theme/full-radius-style.js";
 import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
 import skeleton_module_default from "./skeleton.module.js";
 import { SkeletonOverlay } from "./skeleton-overlay.js";
@@ -9,8 +9,8 @@ import { jsx } from "react/jsx-runtime";
 var SkeletonBlock = ({ animate = true, radius, className, duration = "slow", height, minHeight, minWidth, ref, style, width, ...otherProps }) => {
 	const dynamicStyle = {
 		...radius != null && {
-			"--vui-skeleton-border-radius": resolveThemeValue(radius, "radius", "var(--radius-small)"),
-			...infiniteCornerShapeStyle(radius)
+			"--vui-skeleton-border-radius": resolveThemeValue(radius, "radius", "var(--radius-s)"),
+			...fullCornerShapeStyle(radius)
 		},
 		...duration != null && { "--vui-skeleton-duration": resolveThemeValue(duration, "duration", "var(--duration-slow)") },
 		...width && { "--vui-skeleton-inline-size": width },

package/dist/components/slider/slider.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-slider-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-thumb-spacer{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-indicator-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-progress-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__slider-module__Slider_vDNlm{--vui-slider-track-size:var(--space-medium);--vui-slider-thumb-size:var(--space-2x-small);--vui-slider-track-background:var(--global-contrast);--vui-slider-progress-background:var(--global-primary);--vui-slider-thumb-background:contrast-color(var(--global-primary));--__slider-thumb-spacer:0.75rem;inline-size:100%;block-size:100%;max-block-size:min-content;min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{max-block-size:none;max-inline-size:min-content}&:has([required]) .viraui__slider-module__Label_eQQHf:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]{--vui-slider-progress-background:var(--highlight-red)}&:has(.viraui__slider-module__SliderRoot_4JScw[data-disabled]),&[data-disabled]{--vui-slider-track-background:var(--global-disabled-background);--vui-slider-progress-background:var(--global-disabled-foreground);--vui-slider-thumb-background:var(--global-background);cursor:not-allowed}}.viraui__slider-module__SliderRoot_4JScw{inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0}.viraui__slider-module__SliderHeader_gOy9k{inline-size:100%;min-inline-size:0}.viraui__slider-module__Value_FaY9i{flex-shrink:0}.viraui__slider-module__SliderControl_FQd5-{position:relative;flex:1 1 auto;-webkit-user-select:none;user-select:none;touch-action:none;inline-size:100%;block-size:round(to-zero,var(--vui-slider-track-size),2px);min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{inline-size:var(--vui-slider-track-size);block-size:100%;>.viraui__slider-module__Track_wvLEH{inline-size:var(--vui-slider-track-size);block-size:100%}}}.viraui__slider-module__Track_wvLEH{position:relative;overflow:hidden;inline-size:100%;block-size:var(--vui-slider-track-size);background:var(--vui-slider-track-background);border-radius:var(--radius-x-small)}.viraui__slider-module__Indicator_y3JyJ{--__slider-indicator-gap:calc(var(--__slider-thumb-spacer) / 2);background:var(--vui-slider-progress-background);box-sizing:initial;position:relative;padding-inline-end:var(--__slider-indicator-gap);&[data-orientation=vertical]{padding-inline-end:0;padding-block-start:var(--__slider-indicator-gap)}.viraui__slider-module__Track_wvLEH:has(.viraui__slider-module__Thumb_S-uLF~.viraui__slider-module__Thumb_S-uLF) &{margin-inline-start:calc(var(--__slider-indicator-gap) * -1);padding-inline-end:calc(var(--__slider-indicator-gap) * 2);&[data-orientation=vertical]{margin-inline-start:0;padding-inline-end:0;margin-block-end:calc(var(--__slider-indicator-gap) * -1);padding-block-start:calc(var(--__slider-indicator-gap) * 2)}}}.viraui__slider-module__Thumb_S-uLF{box-sizing:border-box;inline-size:var(--__slider-thumb-spacer);block-size:50%;appearance:none;&:after{--__corner-shape:round;content:"";position:absolute;inset-block:0;inset-inline-start:50%;translate:-50% 0;box-sizing:border-box;inline-size:.125rem;block-size:100%;background:var(--vui-slider-thumb-background);border-radius:var(--radius-infinite)}&[data-orientation=vertical]{inline-size:calc(100% - 8px);block-size:var(--__slider-thumb-spacer);&:after{inset-inline:0;inset-block-start:50%;inset-block-end:auto;translate:0 -50%;inline-size:100%;block-size:var(--vui-slider-thumb-size)}}&:not(:disabled,[data-disabled]){cursor:grab}&:not(:disabled,[data-disabled]):active,&:not(:disabled,[data-disabled]):has(>input:active),&:not(:disabled,[data-disabled])[data-dragging]:has(>input:focus){cursor:grabbing}&:has(>input:focus-visible):after{outline:var(--outline);outline-offset:var(--outline-offset)}>input:focus-visible{outline:none}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-slider-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-thumb-spacer{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-indicator-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-progress-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__slider-module__Slider_vDNlm{--vui-slider-track-size:var(--space-m);--vui-slider-thumb-size:var(--space-2xs);--vui-slider-track-background:var(--global-contrast);--vui-slider-progress-background:var(--global-primary);--vui-slider-thumb-background:contrast-color(var(--global-primary));--__slider-thumb-spacer:0.75rem;inline-size:100%;block-size:100%;max-block-size:min-content;min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{max-block-size:none;max-inline-size:min-content}&:has([required]) .viraui__slider-module__Label_eQQHf:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]{--vui-slider-progress-background:var(--highlight-red)}&:has(.viraui__slider-module__SliderRoot_4JScw[data-disabled]),&[data-disabled]{--vui-slider-track-background:var(--global-disabled-background);--vui-slider-progress-background:var(--global-disabled-foreground);--vui-slider-thumb-background:var(--global-background);cursor:not-allowed}}.viraui__slider-module__SliderRoot_4JScw{inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0}.viraui__slider-module__SliderHeader_gOy9k{inline-size:100%;min-inline-size:0}.viraui__slider-module__Value_FaY9i{flex-shrink:0}.viraui__slider-module__SliderControl_FQd5-{position:relative;flex:1 1 auto;-webkit-user-select:none;user-select:none;touch-action:none;inline-size:100%;block-size:round(to-zero,var(--vui-slider-track-size),2px);min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{inline-size:var(--vui-slider-track-size);block-size:100%;>.viraui__slider-module__Track_wvLEH{inline-size:var(--vui-slider-track-size);block-size:100%}}}.viraui__slider-module__Track_wvLEH{position:relative;overflow:hidden;inline-size:100%;block-size:var(--vui-slider-track-size);background:var(--vui-slider-track-background);border-radius:var(--radius-xs)}.viraui__slider-module__Indicator_y3JyJ{--__slider-indicator-gap:calc(var(--__slider-thumb-spacer) / 2);background:var(--vui-slider-progress-background);box-sizing:initial;position:relative;padding-inline-end:var(--__slider-indicator-gap);&[data-orientation=vertical]{padding-inline-end:0;padding-block-start:var(--__slider-indicator-gap)}.viraui__slider-module__Track_wvLEH:has(.viraui__slider-module__Thumb_S-uLF~.viraui__slider-module__Thumb_S-uLF) &{margin-inline-start:calc(var(--__slider-indicator-gap) * -1);padding-inline-end:calc(var(--__slider-indicator-gap) * 2);&[data-orientation=vertical]{margin-inline-start:0;padding-inline-end:0;margin-block-end:calc(var(--__slider-indicator-gap) * -1);padding-block-start:calc(var(--__slider-indicator-gap) * 2)}}}.viraui__slider-module__Thumb_S-uLF{box-sizing:border-box;inline-size:var(--__slider-thumb-spacer);block-size:50%;appearance:none;&:after{--__corner-shape:round;content:"";position:absolute;inset-block:0;inset-inline-start:50%;translate:-50% 0;box-sizing:border-box;inline-size:.125rem;block-size:100%;background:var(--vui-slider-thumb-background);border-radius:var(--radius-full)}&[data-orientation=vertical]{inline-size:calc(100% - 8px);block-size:var(--__slider-thumb-spacer);&:after{inset-inline:0;inset-block-start:50%;inset-block-end:auto;translate:0 -50%;inline-size:100%;block-size:var(--vui-slider-thumb-size)}}&:not(:disabled,[data-disabled]){cursor:grab}&:not(:disabled,[data-disabled]):active,&:not(:disabled,[data-disabled]):has(>input:active),&:not(:disabled,[data-disabled])[data-dragging]:has(>input:focus){cursor:grabbing}&:has(>input:focus-visible):after{outline:var(--outline);outline-offset:var(--outline-offset)}>input:focus-visible{outline:none}}}

package/dist/components/slider/slider.js

@@ -25,7 +25,7 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
 		validate,
 		validationDebounceTime,
 		validationMode,
-		render: /* @__PURE__ */ jsx(Stack, { rowGap: "small" }),
+		render: /* @__PURE__ */ jsx(Stack, { rowGap: "s" }),
 		children: [/* @__PURE__ */ jsxs(Slider.Root, {
 			...sliderRootProps,
 			ref,
@@ -38,15 +38,15 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
 			thumbAlignment,
 			render: /* @__PURE__ */ jsx(Stack, {
 				direction: "column",
-				rowGap: "small",
-				columnGap: "x-small",
+				rowGap: "s",
+				columnGap: "xs",
 				vAlign: isVertical ? "stretch" : "center",
 				hAlign: isVertical ? "center" : "initial"
 			}),
 			children: [(label || renderValue) && /* @__PURE__ */ jsxs(Stack, {
 				className: slider_module_default.SliderHeader,
 				direction: isVertical ? "column" : "row",
-				columnGap: "small",
+				columnGap: "s",
 				vAlign: "center",
 				hAlign: isVertical ? "center" : "space-between",
 				children: [label && /* @__PURE__ */ jsx(Field.Label, {
@@ -57,7 +57,7 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
 					children: renderValue
 				}) : /* @__PURE__ */ jsx(Text, {
 					className: slider_module_default.Value,
-					size: "small",
+					size: "s",
 					tone: "muted",
 					family: "mono",
 					whiteSpace: "nowrap",

package/dist/components/spinner/spinner.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-spinner-size{syntax:"<length>";inherits:false;initial-value:0}.viraui__spinner-module__Spinner_qCQzj{--vui-spinner-size:var(--space-x-large);display:inline-block;inline-size:var(--vui-spinner-size);block-size:var(--vui-spinner-size);flex:none;vertical-align:middle;color:currentColor;&[data-dimension=small]{--vui-spinner-size:var(--space-medium)}&[data-dimension=medium]{--vui-spinner-size:var(--space-large)}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-spinner-size{syntax:"<length>";inherits:false;initial-value:0}.viraui__spinner-module__Spinner_qCQzj{--vui-spinner-size:var(--space-xl);display:inline-block;inline-size:var(--vui-spinner-size);block-size:var(--vui-spinner-size);flex:none;vertical-align:middle;color:currentColor;&[data-dimension=s]{--vui-spinner-size:var(--space-m)}&[data-dimension=m]{--vui-spinner-size:var(--space-l)}}}

package/dist/components/spinner/spinner.d.ts

@@ -4,9 +4,9 @@ export type SpinnerProps = Omit<React.ComponentProps<'svg'>, 'color'> & {
     /**
      * Sets the rendered spinner size.
      *
-     * @default 'large'
+     * @default 'l'
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: 's' | 'm' | 'l';
     /**
      * Overrides the spinner fill color.
      *

package/dist/components/spinner/spinner.js

@@ -12,7 +12,7 @@ import { Suspense } from "react";
 * set `aria-hidden` on decorative instances and expose loading status through
 * the surrounding control or region.
 */
-var Spinner = ({ className, color, size = "large", variant = "bars", ref, style, ...otherProps }) => {
+var Spinner = ({ className, color, size = "l", variant = "bars", ref, style, ...otherProps }) => {
 	const Glyph = SPINNER_GLYPHS[variant];
 	const glyph = /* @__PURE__ */ jsx(Glyph, {});
 	return /* @__PURE__ */ jsx("svg", {

package/dist/components/surface/surface-radius-context.js

@@ -1,5 +1,5 @@
 "use client";
-import { infiniteCornerShapeStyle } from "../../core/theme/infinite-radius-style.js";
+import { fullCornerShapeStyle } from "../../core/theme/full-radius-style.js";
 import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
 import { createContext, useContext } from "react";
 //#region src/components/surface/surface-radius-context.ts
@@ -74,7 +74,7 @@ var useSurfaceRadius = ({ defaults, hPadding, radius, style, vPadding }) => {
 			blockEnd: paddingBlockEnd
 		}
 	};
-	const cornerShapeStyle = infiniteCornerShapeStyle(radius === "infinite" ? "infinite" : void 0, styleRadius, tokenRadius, ownRadius.topLeft, ownRadius.topRight, ownRadius.bottomRight, ownRadius.bottomLeft);
+	const cornerShapeStyle = fullCornerShapeStyle(radius === "full" ? "full" : void 0, styleRadius, tokenRadius, ownRadius.topLeft, ownRadius.topRight, ownRadius.bottomRight, ownRadius.bottomLeft);
 	return {
 		contextValue,
 		hasAutoRadius,

package/dist/components/switch/switch.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-switch-track-block-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-switch-track-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-switch-track-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-switch-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-switch-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-switch-thumb-inset{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-track-block-size{syntax:"<length>";inherits:false;initial-value:0}@property --__switch-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-thumb-inset{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-thumb-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__switch-module__Switch_L86y7{max-block-size:min-content;&:has([required]) .viraui__switch-module__Label_9R-rv:after{content:" ＊";color:var(--highlight-red)}}.viraui__switch-module__SwitchRoot_Zv9An{--vui-switch-track-block-size:var(--space-large);--vui-switch-track-radius:var(--radius-small);--vui-switch-track-background:var(--global-contrast);--vui-switch-thumb-background:var(--base-1);--vui-switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--vui-switch-thumb-inset:var(--space-2x-small);--__switch-thumb-inset:round(nearest, var(--vui-switch-thumb-inset), 1px);--__switch-thumb-size:round(nearest, var(--vui-switch-thumb-size), 2px);--__switch-track-block-size:calc(var(--__switch-thumb-size) + 2 * var(--__switch-thumb-inset));position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--__switch-thumb-size) * 2) + var(--__switch-thumb-inset) * 2);block-size:var(--__switch-track-block-size);background:var(--vui-switch-track-background);border-radius:var(--vui-switch-track-radius);&[data-size=small]{--vui-switch-track-radius:var(--radius-x-small);--vui-switch-track-block-size:var(--space-medium);--vui-switch-thumb-size:calc(var(--space-medium) - var(--space-x-small))}&[data-checked]:not([data-disabled]){--vui-switch-track-background:var(--global-primary);--vui-switch-thumb-background:contrast-color(var(--global-primary))}&[data-invalid]:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled]{--vui-switch-track-background:var(--global-disabled-background);--vui-switch-thumb-background:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__switch-module__Thumb_ldwJw{--__switch-thumb-radius:calc(var(--vui-switch-track-radius) - var(--__switch-thumb-inset));position:absolute;inset-block:var(--__switch-thumb-inset);inset-inline-start:var(--__switch-thumb-inset);background:var(--vui-switch-thumb-background);inline-size:var(--__switch-thumb-size);block-size:var(--__switch-thumb-size);border-radius:var(--__switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);box-shadow:0 0 1px 1px var(--global-contrast);.viraui__switch-module__SwitchRoot_Zv9An[data-checked]>&{translate:100% 0;box-shadow:none}.viraui__switch-module__SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-switch-track-block-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-switch-track-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-switch-track-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-switch-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-switch-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-switch-thumb-inset{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-track-block-size{syntax:"<length>";inherits:false;initial-value:0}@property --__switch-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-thumb-inset{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-thumb-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__switch-module__Switch_L86y7{max-block-size:min-content;&:has([required]) .viraui__switch-module__Label_9R-rv:after{content:" ＊";color:var(--highlight-red)}}.viraui__switch-module__SwitchRoot_Zv9An{--vui-switch-track-block-size:var(--space-l);--vui-switch-track-radius:var(--radius-s);--vui-switch-track-background:var(--global-contrast);--vui-switch-thumb-background:var(--base-1);--vui-switch-thumb-size:calc(var(--space-l) - var(--space-xs));--vui-switch-thumb-inset:var(--space-2xs);--__switch-thumb-inset:round(nearest, var(--vui-switch-thumb-inset), 1px);--__switch-thumb-size:round(nearest, var(--vui-switch-thumb-size), 2px);--__switch-track-block-size:calc(var(--__switch-thumb-size) + 2 * var(--__switch-thumb-inset));position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--__switch-thumb-size) * 2) + var(--__switch-thumb-inset) * 2);block-size:var(--__switch-track-block-size);background:var(--vui-switch-track-background);border-radius:var(--vui-switch-track-radius);&[data-size=s]{--vui-switch-track-radius:var(--radius-xs);--vui-switch-track-block-size:var(--space-m);--vui-switch-thumb-size:calc(var(--space-m) - var(--space-xs))}&[data-checked]:not([data-disabled]){--vui-switch-track-background:var(--global-primary);--vui-switch-thumb-background:contrast-color(var(--global-primary))}&[data-invalid]:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled]{--vui-switch-track-background:var(--global-disabled-background);--vui-switch-thumb-background:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__switch-module__Thumb_ldwJw{--__switch-thumb-radius:calc(var(--vui-switch-track-radius) - var(--__switch-thumb-inset));position:absolute;inset-block:var(--__switch-thumb-inset);inset-inline-start:var(--__switch-thumb-inset);background:var(--vui-switch-thumb-background);inline-size:var(--__switch-thumb-size);block-size:var(--__switch-thumb-size);border-radius:var(--__switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);box-shadow:0 0 1px 1px var(--global-contrast);.viraui__switch-module__SwitchRoot_Zv9An[data-checked]>&{translate:100% 0;box-shadow:none}.viraui__switch-module__SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}}

package/dist/components/switch/switch.d.ts

@@ -34,9 +34,9 @@ export type SwitchProps = SwitchRoot.Props & Omit<FieldRoot.Props, 'ref'> & {
     /**
      * Controls the visual switch size.
      *
-     * @default 'small'
+     * @default 's'
      */
-    size?: 'medium' | 'small';
+    size?: 'm' | 's';
     /**
      * Sets block padding using one token for both sides or a `[start, end]` tuple.
      *

package/dist/components/switch/switch.js

@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Switch } from "@base-ui/react/switch";
 //#region src/components/switch/switch.tsx
-var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label, name, ref, size = "small", vPadding, hPadding, touched, validate, validationDebounceTime, validationMode, ...switchRootProps }) => {
+var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label, name, ref, size = "s", vPadding, hPadding, touched, validate, validationDebounceTime, validationMode, ...switchRootProps }) => {
 	const hasTextDescription = Boolean(description || error);
 	return /* @__PURE__ */ jsx(Field.Root, {
 		className: switch_module_default.Switch,
@@ -23,14 +23,14 @@ var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label
 		render: /* @__PURE__ */ jsx(Stack, {
 			direction: "row",
 			expandChildren: true,
-			columnGap: size === "small" ? "small" : "medium",
+			columnGap: size === "s" ? "s" : "m",
 			vAlign: hasTextDescription ? "start" : "center"
 		}),
 		children: /* @__PURE__ */ jsx(Field.Label, {
 			className: switch_module_default.Label,
 			children: /* @__PURE__ */ jsxs(Stack, {
 				direction: "row",
-				columnGap: size === "small" ? "small" : "medium",
+				columnGap: size === "s" ? "s" : "m",
 				vAlign: hasTextDescription ? "start" : "center",
 				hPadding,
 				vPadding,
@@ -44,9 +44,9 @@ var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label
 					ref,
 					children: /* @__PURE__ */ jsx(Switch.Thumb, { className: switch_module_default.Thumb })
 				}), label || description || error ? /* @__PURE__ */ jsxs(Stack, {
-					rowGap: "small",
+					rowGap: "s",
 					children: [label && /* @__PURE__ */ jsx(FieldLabel, {
-						size: size === "small" ? "small" : "medium",
+						size: size === "s" ? "s" : "m",
 						children: label
 					}), /* @__PURE__ */ jsx(FieldHelperCopy, {
 						description,

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

@@ -12,8 +12,8 @@ var TabsList = ({ children, className, activateOnFocus = true, ref, ...otherProp
 	render: /* @__PURE__ */ jsx(Surface, {
 		color: 1,
 		border: "all",
-		radius: "medium",
-		vPadding: "2x-small"
+		radius: "m",
+		vPadding: "2xs"
 	}),
 	ref,
 	...otherProps,

package/dist/components/tabs/tabs.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-tabs-translate-amount{syntax:"<length>";inherits:true;initial-value:10px}.viraui__tabs-module__Tabs_AwbZZ{min-block-size:10rem}.viraui__tabs-module__Viewport_15X1I{display:grid;grid-template-columns:minmax(0,1fr);inline-size:100%}.viraui__tabs-module__Panel_vkCFI{grid-area:1/1;inline-size:100%;opacity:1;translate:0 0;transition:opacity var(--duration-fast) var(--easing-entrance),translate var(--duration-fast) var(--easing-entrance);&[data-ending-style]{pointer-events:none}&[data-ending-style],&[data-starting-style]{opacity:0}&[data-activation-direction=right][data-starting-style]{translate:var(--vui-tabs-translate-amount) 0}&[data-activation-direction=left][data-starting-style],&[data-activation-direction=right][data-ending-style]{translate:calc(var(--vui-tabs-translate-amount) * -1) 0}&[data-activation-direction=left][data-ending-style]{translate:var(--vui-tabs-translate-amount) 0}&[data-activation-direction=none][data-ending-style],&[data-activation-direction=none][data-starting-style]{translate:0 var(--vui-tabs-translate-amount)}&[hidden]{display:none}@media (prefers-reduced-motion:reduce){&[data-ending-style],&[data-starting-style]{opacity:1;translate:0 0}}}}@layer viraui.overrides{.viraui__tabs-module__List_XJorr{position:relative;max-inline-size:100%;overflow-x:auto;overflow-y:clip}.viraui__tabs-module__Track_Fet4f{display:inline-flex;min-inline-size:100%;box-sizing:border-box;padding-inline:var(--space-2x-small)}.viraui__tabs-module__Indicator_UyNUn{position:absolute;pointer-events:none;inset-block-start:0;inset-inline-start:0;inline-size:var(--active-tab-width);block-size:round(nearest,var(--active-tab-height),2px);translate:var(--active-tab-left) calc(var(--active-tab-top) + (var(--active-tab-height) - round(nearest, var(--active-tab-height), 2px)) / 2);transition:translate var(--duration-fast) var(--easing-standard),inline-size var(--duration-fast) var(--easing-standard),block-size var(--duration-fast) var(--easing-standard)}.viraui__tabs-module__Item_XZ86Z{position:relative;flex-shrink:0;cursor:pointer;flex-basis:0;transition:none;will-change:auto;&[data-variant]:not(:disabled):active{translate:0 0}&:hover{background:#0000}&[data-disabled]{opacity:.5;background:#0000}&[data-active] .viraui__tabs-module__Label_5-8-Y{color:var(--global-foreground)}&:focus-visible{border-radius:var(--radius-small);outline-offset:-2px}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-tabs-translate-amount{syntax:"<length>";inherits:true;initial-value:10px}.viraui__tabs-module__Tabs_AwbZZ{min-block-size:10rem}.viraui__tabs-module__Viewport_15X1I{display:grid;grid-template-columns:minmax(0,1fr);inline-size:100%}.viraui__tabs-module__Panel_vkCFI{grid-area:1/1;inline-size:100%;opacity:1;translate:0 0;transition:opacity var(--duration-fast) var(--easing-entrance),translate var(--duration-fast) var(--easing-entrance);&[data-ending-style]{pointer-events:none}&[data-ending-style],&[data-starting-style]{opacity:0}&[data-activation-direction=right][data-starting-style]{translate:var(--vui-tabs-translate-amount) 0}&[data-activation-direction=left][data-starting-style],&[data-activation-direction=right][data-ending-style]{translate:calc(var(--vui-tabs-translate-amount) * -1) 0}&[data-activation-direction=left][data-ending-style]{translate:var(--vui-tabs-translate-amount) 0}&[data-activation-direction=none][data-ending-style],&[data-activation-direction=none][data-starting-style]{translate:0 var(--vui-tabs-translate-amount)}&[hidden]{display:none}@media (prefers-reduced-motion:reduce){&[data-ending-style],&[data-starting-style]{opacity:1;translate:0 0}}}}@layer viraui.overrides{.viraui__tabs-module__List_XJorr{position:relative;max-inline-size:100%;overflow-x:auto;overflow-y:clip}.viraui__tabs-module__Track_Fet4f{display:inline-flex;min-inline-size:100%;box-sizing:border-box;padding-inline:var(--space-2xs)}.viraui__tabs-module__Indicator_UyNUn{position:absolute;pointer-events:none;inset-block-start:0;inset-inline-start:0;inline-size:var(--active-tab-width);block-size:round(nearest,var(--active-tab-height),2px);translate:var(--active-tab-left) calc(var(--active-tab-top) + (var(--active-tab-height) - round(nearest, var(--active-tab-height), 2px)) / 2);transition:translate var(--duration-fast) var(--easing-standard),inline-size var(--duration-fast) var(--easing-standard),block-size var(--duration-fast) var(--easing-standard)}.viraui__tabs-module__Item_XZ86Z{position:relative;flex-shrink:0;cursor:pointer;flex-basis:0;transition:none;will-change:auto;&[data-variant]:not(:disabled):active{translate:0 0}&:hover{background:#0000}&[data-disabled]{opacity:.5;background:#0000}&[data-active] .viraui__tabs-module__Label_5-8-Y{color:var(--global-foreground)}&:focus-visible{border-radius:var(--radius-s);outline-offset:-2px}}}

package/dist/components/text/text.css

@@ -1,5 +1,5 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-text-align{syntax:"*";inherits:false;initial-value:start}@property --vui-text-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-text-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-text-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-text-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-text-text-transform{syntax:"none | capitalize | uppercase | lowercase";inherits:false;initial-value:none}@property --vui-text-font-weight{syntax:"<number>";inherits:false;initial-value:400}@property --vui-text-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-text-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-text-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-text-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-text-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-text-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --vui-text-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --__text-fluid{syntax:"<number>";inherits:false;initial-value:0}@property --__text-size-min{syntax:"<length>";inherits:false;initial-value:1rem}@property --__text-size-max{syntax:"<length>";inherits:false;initial-value:1rem}.viraui__text-module__Text_bS8kv{--__text-fluid:calc((100cqi - 320px) / 1125px);--__text-size-min:var(--font-scale-body-small);--__text-size-max:var(--font-scale-body-medium);--vui-text-font-size:clamp(
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-text-align{syntax:"*";inherits:false;initial-value:start}@property --vui-text-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-text-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-text-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-text-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-text-text-transform{syntax:"none | capitalize | uppercase | lowercase";inherits:false;initial-value:none}@property --vui-text-font-weight{syntax:"<number>";inherits:false;initial-value:400}@property --vui-text-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-text-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-text-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-text-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-text-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-text-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --vui-text-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --__text-fluid{syntax:"<number>";inherits:false;initial-value:0}@property --__text-size-min{syntax:"<length>";inherits:false;initial-value:1rem}@property --__text-size-max{syntax:"<length>";inherits:false;initial-value:1rem}.viraui__text-module__Text_bS8kv{--__text-fluid:calc((100vi - 320px) / 1125px);--__text-size-min:var(--font-scale-body-s);--__text-size-max:var(--font-scale-body-m);--vui-text-font-size:clamp(
     var(--__text-size-min),
     calc(var(--__text-size-min) + (var(--__text-size-max) - var(--__text-size-min)) * var(--__text-fluid)),
     var(--__text-size-max)
-  );--vui-text-font-family:var(--font-family-body);--vui-text-line-height:var(--font-leading-standard);margin:0;max-inline-size:var(--vui-text-max-width);font-family:var(--vui-text-font-family);font-size:var(--vui-text-font-size);line-height:var(--vui-text-line-height);text-align:var(--vui-text-align);letter-spacing:var(--vui-text-letter-spacing);text-transform:var(--vui-text-text-transform);white-space:var(--vui-text-white-space);word-break:break-word;font-weight:var(--vui-text-font-weight);font-stretch:calc(var(--vui-text-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-text-font-weight),"wdth" var(--vui-text-font-width),"opsz" var(--vui-text-font-opsz);text-box:var(--vui-text-trim) var(--vui-text-trim-type);&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--vui-text-padding-block-start) var(--vui-text-padding-inline-end) var(--vui-text-padding-block-end) var(--vui-text-padding-inline-start)}&[data-text-family=mono]{--vui-text-font-family:var(--font-family-mono)}&[data-text-size=x-large]{--__text-size-min:var(--font-scale-body-large);--__text-size-max:var(--font-scale-body-x-large)}&[data-text-size=large]{--__text-size-min:var(--font-scale-body-medium);--__text-size-max:var(--font-scale-body-large)}&[data-text-size=small]{--__text-size-min:var(--font-scale-body-x-small);--__text-size-max:var(--font-scale-body-small)}&[data-text-size=x-small]{--vui-text-font-size:var(--font-scale-body-x-small)}&[data-text-weight=light]{--vui-text-font-weight:200}&[data-text-weight=semibold]{--vui-text-font-weight:600}&[data-text-weight=bold]{--vui-text-font-weight:800}&[data-text-tone=primary]{color:var(--global-primary)}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--vui-text-literal-color)}&[data-text-line-height=none]{--vui-text-line-height:0}&[data-text-line-height=x-small]{--vui-text-line-height:var(--font-leading-x-small)}&[data-text-line-height=small]{--vui-text-line-height:var(--font-leading-small)}&[data-text-line-height=large]{--vui-text-line-height:var(--font-leading-large)}}}
+  );--vui-text-font-family:var(--font-family-body);--vui-text-line-height:var(--font-leading-m);margin:0;max-inline-size:var(--vui-text-max-width);font-family:var(--vui-text-font-family);font-size:var(--vui-text-font-size);line-height:var(--vui-text-line-height);text-align:var(--vui-text-align);letter-spacing:var(--vui-text-letter-spacing);text-transform:var(--vui-text-text-transform);white-space:var(--vui-text-white-space);word-break:break-word;font-weight:var(--vui-text-font-weight);font-stretch:calc(var(--vui-text-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-text-font-weight),"wdth" var(--vui-text-font-width),"opsz" var(--vui-text-font-opsz);text-box:var(--vui-text-trim) var(--vui-text-trim-type);&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--vui-text-padding-block-start) var(--vui-text-padding-inline-end) var(--vui-text-padding-block-end) var(--vui-text-padding-inline-start)}&[data-text-family=mono]{--vui-text-font-family:var(--font-family-mono)}&[data-text-size="4xl"]{--__text-size-min:var(--font-scale-body-3xl);--__text-size-max:var(--font-scale-body-4xl)}&[data-text-size="3xl"]{--__text-size-min:var(--font-scale-body-2xl);--__text-size-max:var(--font-scale-body-3xl)}&[data-text-size="2xl"]{--__text-size-min:var(--font-scale-body-xl);--__text-size-max:var(--font-scale-body-2xl)}&[data-text-size=xl]{--__text-size-min:var(--font-scale-body-l);--__text-size-max:var(--font-scale-body-xl)}&[data-text-size=l]{--__text-size-min:var(--font-scale-body-m);--__text-size-max:var(--font-scale-body-l)}&[data-text-size=s]{--__text-size-min:var(--font-scale-body-xs);--__text-size-max:var(--font-scale-body-s)}&[data-text-size=xs]{--vui-text-font-size:var(--font-scale-body-xs)}@container root style(--effect-fluid-typography: initial){--vui-text-font-size:var(--font-scale-body-m);&[data-text-size="4xl"]{--vui-text-font-size:var(--font-scale-body-4xl)}&[data-text-size="3xl"]{--vui-text-font-size:var(--font-scale-body-3xl)}&[data-text-size="2xl"]{--vui-text-font-size:var(--font-scale-body-2xl)}&[data-text-size=xl]{--vui-text-font-size:var(--font-scale-body-xl)}&[data-text-size=l]{--vui-text-font-size:var(--font-scale-body-l)}&[data-text-size=m]{--vui-text-font-size:var(--font-scale-body-m)}&[data-text-size=s]{--vui-text-font-size:var(--font-scale-body-s)}&[data-text-size=xs]{--vui-text-font-size:var(--font-scale-body-xs)}}&[data-text-weight=light]{--vui-text-font-weight:200}&[data-text-weight=semibold]{--vui-text-font-weight:600}&[data-text-weight=bold]{--vui-text-font-weight:800}&[data-text-tone=primary]{color:var(--global-primary)}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--vui-text-literal-color)}&[data-text-line-height=none]{--vui-text-line-height:0}&[data-text-line-height=xs]{--vui-text-line-height:var(--font-leading-xs)}&[data-text-line-height=s]{--vui-text-line-height:var(--font-leading-s)}&[data-text-line-height=m]{--vui-text-line-height:var(--font-leading-m)}&[data-text-line-height=l]{--vui-text-line-height:var(--font-leading-l)}}}

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

@@ -25,11 +25,12 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
      */
     ref?: React.Ref<HTMLElement>;
     /**
-     * Selects a semantic body typography size from the active theme scale.
+     * Selects a semantic body typography size from the active theme scale
+     * (`4xl` | `3xl` | `2xl` | `xl` | `l` | `m` | `s` | `xs`).
      *
-     * @default 'medium'
+     * @default 'm'
      */
-    size?: 'x-large' | 'large' | 'medium' | 'small' | 'x-small';
+    size?: '4xl' | '3xl' | '2xl' | 'xl' | 'l' | 'm' | 's' | 'xs';
     /**
      * Selects the semantic font family for body copy and inline code-like text.
      *
@@ -52,7 +53,7 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
      */
     tone?: 'default' | 'primary' | 'muted' | 'interactive' | 'positive' | 'informative' | 'danger' | 'warning';
     /**
-     * Applies a literal color escape hatch when semantic `tone` is not used.
+     * Applies a custom color as an escape hatch when semantic `tone` is not used.
      *
      * @default No literal color override.
      */
@@ -60,9 +61,9 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
     /**
      * Controls line height through foundation leading tokens.
      *
-     * @default 'standard'
+     * @default 'm'
      */
-    lineHeight?: 'none' | 'x-small' | 'small' | 'standard' | 'large';
+    lineHeight?: 'none' | 'xs' | 's' | 'm' | 'l';
     /**
      * Aligns text using logical alignment values.
      *

package/dist/components/text/text.js

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

package/dist/components/textarea/textarea.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textarea-min-block-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textarea-padding-block{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textarea-input-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textarea-module__Textarea_mtOUG{--vui-textarea-min-block-size:calc(var(--space-x-large) * 2);--vui-textarea-padding-block:var(--space-small);--vui-textarea-input-border-radius:var(--radius-small);--vui-field-label-padding-inline:calc(var(--vui-textarea-input-border-radius) / 2);inline-size:100%;&:not(:has([data-sizing=content])){max-block-size:min-content}&:has([required]) .viraui__textarea-module__Label_5dOso:after{content:" ＊";color:var(--highlight-red)}}.viraui__textarea-module__Description_er3zI{padding-inline:var(--vui-field-label-padding-inline)}}@layer viraui.overrides{.viraui__textarea-module__CustomBasicInput_Ce7yA{--vui-basic-input-border-radius:var(--vui-textarea-input-border-radius);border:1px solid var(--global-contrast);min-block-size:var(--vui-textarea-min-block-size);padding-block:var(--vui-textarea-padding-block);line-height:1.4;resize:none;&[data-resize=vertical]{resize:vertical}&[data-resize=horizontal]{resize:horizontal}&[data-resize=both]{resize:both}&[data-resize=block]{resize:block}&[data-resize=inline]{resize:inline}&[data-invalid][data-dirty]{border-color:var(--highlight-red)}&:disabled,&[data-disabled]{border-color:#0000}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textarea-min-block-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textarea-padding-block{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textarea-input-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textarea-module__Textarea_mtOUG{--vui-textarea-min-block-size:calc(var(--space-xl) * 2);--vui-textarea-padding-block:var(--space-s);--vui-textarea-input-border-radius:var(--radius-s);--vui-field-label-padding-inline:calc(var(--vui-textarea-input-border-radius) / 2);inline-size:100%;&:not(:has([data-sizing=content])){max-block-size:min-content}&:has([required]) .viraui__textarea-module__Label_5dOso:after{content:" ＊";color:var(--highlight-red)}}.viraui__textarea-module__Description_er3zI{padding-inline:var(--vui-field-label-padding-inline)}}@layer viraui.overrides{.viraui__textarea-module__CustomBasicInput_Ce7yA{--vui-basic-input-border-radius:var(--vui-textarea-input-border-radius);border:1px solid var(--global-contrast);min-block-size:var(--vui-textarea-min-block-size);padding-block:var(--vui-textarea-padding-block);line-height:1.4;resize:none;&[data-resize=vertical]{resize:vertical}&[data-resize=horizontal]{resize:horizontal}&[data-resize=both]{resize:both}&[data-resize=block]{resize:block}&[data-resize=inline]{resize:inline}&[data-invalid][data-dirty]{border-color:var(--highlight-red)}&:disabled,&[data-disabled]{border-color:#0000}}}

package/dist/components/textarea/textarea.js

@@ -20,7 +20,7 @@ var Textarea = ({ className, description, dirty, disabled, error, fitContent, in
 	validationMode,
 	render: /* @__PURE__ */ jsx(Stack, {
 		expandChildren: true,
-		rowGap: "small"
+		rowGap: "s"
 	}),
 	children: [
 		label && /* @__PURE__ */ jsx(Field.Label, {

package/dist/components/textfield/textfield.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textfield-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textfield-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textfield-module__Textfield_o-70A{--vui-textfield-input-height:var(--space-2x-large);--vui-textfield-control-group-background:var(--base-1);--vui-textfield-control-group-color:var(--global-foreground);--vui-textfield-control-group-border-color:var(--global-contrast);--vui-textfield-control-group-border-radius:var(--radius-medium);--vui-field-label-padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2);max-block-size:min-content;&[data-fullwidth=true]{inline-size:100%}&:has([required]) .viraui__textfield-module__Label_5rjr0:after{content:" ＊";color:var(--highlight-red)}}.viraui__textfield-module__ControlGroup_2W-OC{box-sizing:border-box;inline-size:100%;block-size:round(to-zero,var(--vui-textfield-input-height),2px);background:var(--vui-textfield-control-group-background);color:var(--vui-textfield-control-group-color);border:1px solid var(--vui-textfield-control-group-border-color);border-radius:var(--vui-textfield-control-group-border-radius);&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:focus-visible),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-invalid][data-dirty]){--vui-textfield-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:disabled),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-disabled]){--vui-textfield-control-group-background:var(--global-disabled-background);--vui-textfield-control-group-border-color:#0000;--vui-textfield-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=start])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-start:var(--space-x-small)}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=end])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-end:var(--space-x-small)}}.viraui__textfield-module__Addon_kK1ef{min-inline-size:var(--space-x-large)}.viraui__textfield-module__Description_8Qxot{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}}@layer viraui.overrides{.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;block-size:100%;line-height:1.2;background:#0000;border-radius:inherit;&:not(:-webkit-autofill){box-shadow:none}&:focus-visible{outline:none}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textfield-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textfield-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textfield-module__Textfield_o-70A{--vui-textfield-input-height:var(--space-2xl);--vui-textfield-control-group-background:var(--base-1);--vui-textfield-control-group-color:var(--global-foreground);--vui-textfield-control-group-border-color:var(--global-contrast);--vui-textfield-control-group-border-radius:var(--radius-m);--vui-field-label-padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2);max-block-size:min-content;&[data-fullwidth=true]{inline-size:100%}&:has([required]) .viraui__textfield-module__Label_5rjr0:after{content:" ＊";color:var(--highlight-red)}}.viraui__textfield-module__ControlGroup_2W-OC{box-sizing:border-box;inline-size:100%;block-size:round(to-zero,var(--vui-textfield-input-height),2px);background:var(--vui-textfield-control-group-background);color:var(--vui-textfield-control-group-color);border:1px solid var(--vui-textfield-control-group-border-color);border-radius:var(--vui-textfield-control-group-border-radius);&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:focus-visible),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-invalid][data-dirty]){--vui-textfield-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:disabled),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-disabled]){--vui-textfield-control-group-background:var(--global-disabled-background);--vui-textfield-control-group-border-color:#0000;--vui-textfield-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=start])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-start:var(--space-xs)}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=end])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-end:var(--space-xs)}}.viraui__textfield-module__Addon_kK1ef{min-inline-size:var(--space-xl)}.viraui__textfield-module__Description_8Qxot{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}}@layer viraui.overrides{.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;block-size:100%;line-height:1.2;background:#0000;border-radius:inherit;&:not(:-webkit-autofill){box-shadow:none}&:focus-visible{outline:none}}}

package/dist/components/textfield/textfield.js

@@ -23,7 +23,7 @@ var Textfield = ({ className, description, dirty, disabled, endAddon, error, fit
 	"data-fullwidth": fullWidth,
 	render: /* @__PURE__ */ jsx(Stack, {
 		expandChildren: true,
-		rowGap: "small"
+		rowGap: "s"
 	}),
 	children: [
 		label && /* @__PURE__ */ jsx(Field.Label, {

package/dist/components/title/title.css

@@ -1,5 +1,5 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --__title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-title-text-transform{syntax:"none | capitalize | uppercase | lowercase";inherits:false;initial-value:none}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --__title-fluid{syntax:"<number>";inherits:false;initial-value:0}@property --__title-size-min{syntax:"<length>";inherits:false;initial-value:1rem}@property --__title-size-max{syntax:"<length>";inherits:false;initial-value:1rem}.viraui__title-module__Title_CXMUX{--__title-fluid:calc((100cqi - 320px) / 1125px);--__title-size-min:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 5));--__title-size-max:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6));--vui-title-font-size:clamp(
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --__title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-title-text-transform{syntax:"none | capitalize | uppercase | lowercase";inherits:false;initial-value:none}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --__title-fluid{syntax:"<number>";inherits:false;initial-value:0}@property --__title-size-min{syntax:"<length>";inherits:false;initial-value:1rem}@property --__title-size-max{syntax:"<length>";inherits:false;initial-value:1rem}.viraui__title-module__Title_CXMUX{--__title-fluid:calc((100vi - 320px) / 1125px);--__title-size-min:var(--font-scale-h2);--__title-size-max:var(--font-scale-h1);--vui-title-font-size:clamp(
     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-standard);--__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:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6));--__title-size-max:var(--font-scale-display)}&[data-title-size="2"]{--__title-size-min:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 4));--__title-size-max:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 5))}&[data-title-size="3"]{--__title-size-min:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 3));--__title-size-max:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 4))}&[data-title-size="4"]{--__title-size-min:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 2));--__title-size-max:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 3))}&[data-title-size="5"]{--__title-size-min:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 1));--__title-size-max:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 2));--__title-letter-spacing:-0.02em}&[data-title-size="6"]{--__title-size-min:var(--font-scale-body-medium);--__title-size-max:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 1));--__title-letter-spacing:-0.02em}&[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=x-small]{--vui-title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--vui-title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--vui-title-line-height:var(--font-leading-large)}}}
+  );--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}@container root style(--effect-fluid-typography: initial){--vui-title-font-size:var(--font-scale-h1);&[data-title-size=display]{--vui-title-font-size:var(--font-scale-display)}&[data-title-size="1"]{--vui-title-font-size:var(--font-scale-h1)}&[data-title-size="2"]{--vui-title-font-size:var(--font-scale-h2)}&[data-title-size="3"]{--vui-title-font-size:var(--font-scale-h3)}&[data-title-size="4"]{--vui-title-font-size:var(--font-scale-h4)}&[data-title-size="5"]{--vui-title-font-size:var(--font-scale-h5)}&[data-title-size="6"]{--vui-title-font-size:var(--font-scale-h6)}}&[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

@@ -50,9 +50,9 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
     /**
      * Controls line height through foundation leading tokens.
      *
-     * @default 'standard'
+     * @default 'm'
      */
-    lineHeight?: 'none' | 'x-small' | 'small' | 'standard' | 'large';
+    lineHeight?: 'none' | 'xs' | 's' | 'm' | 'l';
     /**
      * Aligns text using logical alignment values.
      *

package/dist/components/title/title.js

@@ -4,7 +4,7 @@ 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, fontWidth, hPadding, size = "1", lineHeight = "standard", maxWidth, opticalSize, ref, render, style, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", ...otherProps }) => {
+var Title = ({ align = "start", balanced = false, selection = true, className, color, fontWidth, hPadding, size = "1", lineHeight = "m", maxWidth, opticalSize, ref, render, style, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", ...otherProps }) => {
 	const hasPadding = Boolean(hPadding || vPadding);
 	const hasTracking = tracking !== void 0;
 	const dynamicStyle = {

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

@@ -18,35 +18,35 @@ var ToastBanner = ({ children, className, description, dismissable = true, dismi
 		render: /* @__PURE__ */ jsx(Surface, {
 			color: 1,
 			border: "all",
-			radius: "large",
+			radius: "l",
 			"data-vibrant": true
 		}),
 		...!resolvedTitle && resolvedDescription && { "aria-label": typeof resolvedDescription === "string" ? resolvedDescription : void 0 },
 		children: /* @__PURE__ */ jsxs(Toast.Content, {
 			render: /* @__PURE__ */ jsx(Stack, {
 				className: toast_module_default.Content,
-				columnGap: "medium",
+				columnGap: "m",
 				direction: "row",
 				hAlign: "space-between",
 				vAlign: "center",
-				hPadding: "large",
-				vPadding: "large"
+				hPadding: "l",
+				vPadding: "l"
 			}),
 			children: [/* @__PURE__ */ jsxs(Stack, {
-				rowGap: "small",
+				rowGap: "s",
 				children: [resolvedTitle && /* @__PURE__ */ jsx(Toast.Title, {
-					render: /* @__PURE__ */ jsx(Text, { size: "medium" }),
+					render: /* @__PURE__ */ jsx(Text, { size: "m" }),
 					children: resolvedTitle
 				}), resolvedDescription && /* @__PURE__ */ jsx(Toast.Description, {
 					render: /* @__PURE__ */ jsx(Text, {
-						size: "small",
+						size: "s",
 						tone: "muted",
 						render: /* @__PURE__ */ jsx("p", {})
 					}),
 					children: resolvedDescription
 				})]
 			}), (dismissable || Boolean(actions.length)) && /* @__PURE__ */ jsxs(Stack, {
-				columnGap: "small",
+				columnGap: "s",
 				direction: "row",
 				children: [dismissable && /* @__PURE__ */ jsx(Toast.Close, {
 					render: /* @__PURE__ */ jsx(Button, { variant: "secondary" }),

package/dist/components/toast/toast.css

@@ -1,6 +1,6 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__toast-gap{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-peek{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-scale{syntax:"<number>";inherits:false;initial-value:1}@property --__toast-shrink{syntax:"<number>";inherits:false;initial-value:0}@property --__toast-stack-height{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-offset-y{syntax:"<length>";inherits:false;initial-value:0}.viraui__toast-module__Viewport_oSF5e{position:fixed;z-index:4;pointer-events:none;outline:0;inline-size:min(24rem,calc(100vw - 2 * var(--space-medium)));&[data-position=bottom-right]{inset-block-end:var(--space-medium);inset-inline-end:var(--space-medium)}&[data-position=bottom-left]{inset-block-end:var(--space-medium);inset-inline-start:var(--space-medium)}&[data-position=bottom-center]{inset-block-end:var(--space-medium);inset-inline:0;margin-inline:auto}&[data-position=top-right]{inset-block-start:var(--space-medium);inset-inline-end:var(--space-medium)}&[data-position=top-left]{inset-block-start:var(--space-medium);inset-inline-start:var(--space-medium)}&[data-position=top-center]{inset-block-start:var(--space-medium);inset-inline:0;margin-inline:auto}&[data-position=anchored]{inset:0;inline-size:auto}&>*{pointer-events:auto}}.viraui__toast-module__Content_5ODZr{overflow:hidden;transition:opacity .25s ease;&[data-behind]{opacity:0}&[data-expanded]{opacity:1}}}@layer viraui.overrides{.viraui__toast-module__Banner_QkOlo{--__toast-gap:var(--space-small);--__toast-peek:var(--space-small);--__toast-scale:calc(max(0, 1 - (var(--toast-index, 0) * 0.1)));--__toast-shrink:calc(1 - var(--__toast-scale));--__toast-stack-height:var(--toast-frontmost-height, var(--toast-height, 0px));--__toast-offset-y:calc(
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__toast-gap{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-peek{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-scale{syntax:"<number>";inherits:false;initial-value:1}@property --__toast-shrink{syntax:"<number>";inherits:false;initial-value:0}@property --__toast-stack-height{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-offset-y{syntax:"<length>";inherits:false;initial-value:0}.viraui__toast-module__Viewport_oSF5e{position:fixed;z-index:4;pointer-events:none;outline:0;inline-size:min(24rem,calc(100vw - 2 * var(--space-m)));&[data-position=bottom-right]{inset-block-end:var(--space-m);inset-inline-end:var(--space-m)}&[data-position=bottom-left]{inset-block-end:var(--space-m);inset-inline-start:var(--space-m)}&[data-position=bottom-center]{inset-block-end:var(--space-m);inset-inline:0;margin-inline:auto}&[data-position=top-right]{inset-block-start:var(--space-m);inset-inline-end:var(--space-m)}&[data-position=top-left]{inset-block-start:var(--space-m);inset-inline-start:var(--space-m)}&[data-position=top-center]{inset-block-start:var(--space-m);inset-inline:0;margin-inline:auto}&[data-position=anchored]{inset:0;inline-size:auto}&>*{pointer-events:auto}}.viraui__toast-module__Content_5ODZr{overflow:hidden;transition:opacity .25s ease;&[data-behind]{opacity:0}&[data-expanded]{opacity:1}}}@layer viraui.overrides{.viraui__toast-module__Banner_QkOlo{--__toast-gap:var(--space-s);--__toast-peek:var(--space-s);--__toast-scale:calc(max(0, 1 - (var(--toast-index, 0) * 0.1)));--__toast-shrink:calc(1 - var(--__toast-scale));--__toast-stack-height:var(--toast-frontmost-height, var(--toast-height, 0px));--__toast-offset-y:calc(
       var(--toast-offset-y, 0px) * -1 + (var(--toast-index, 0) * var(--__toast-gap) * -1) +
         var(--toast-swipe-movement-y, 0px)
     );position:absolute;inset-inline-end:0;inset-block-end:0;z-index:calc(1000 - var(--toast-index, 0));inline-size:100%;min-inline-size:16rem;will-change:transform,opacity;block-size:var(--toast-frontmost-height,var(--toast-height,auto));transform-origin:bottom center;transform:scale(var(--__toast-scale)) translateX(var(--toast-swipe-movement-x,0)) translateY(calc(var(--toast-swipe-movement-y, 0px) - (var(--toast-index, 0) * var(--__toast-peek)) - (var(--__toast-shrink) * var(--__toast-stack-height))));transition:transform var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);-webkit-user-select:none;user-select:none;&[data-swiping]{transition:none}&[data-expanded]{transform:scale(1) translateX(var(--toast-swipe-movement-x,0)) translateY(var(--__toast-offset-y));block-size:var(--toast-height,auto)}&[data-starting-style]{transform:scale(1) translateY(150%)}&[data-ending-style]{opacity:0;transform:scale(1) translateY(150%);&[data-swipe-direction=up]{transform:scale(1) translateY(calc(var(--toast-swipe-movement-y, 0px) - 150%))}&[data-swipe-direction=down]{transform:scale(1) translateY(calc(var(--toast-swipe-movement-y, 0px) + 150%))}&[data-swipe-direction=left]{transform:scale(1) translateX(calc(var(--toast-swipe-movement-x, 0px) - 150%)) translateY(var(--__toast-offset-y))}&[data-swipe-direction=right]{transform:scale(1) translateX(calc(var(--toast-swipe-movement-x, 0px) + 150%)) translateY(var(--__toast-offset-y))}}&[data-limited]{opacity:0}&:after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:0;inline-size:100%;block-size:calc(var(--__toast-gap) + 1px)}}:is(.viraui__toast-module__Viewport_oSF5e[data-position=bottom-left],.viraui__toast-module__Viewport_oSF5e[data-position=top-left]) .viraui__toast-module__Banner_QkOlo{inset-inline-end:auto;inset-inline-start:0}:is(.viraui__toast-module__Viewport_oSF5e[data-position=bottom-center],.viraui__toast-module__Viewport_oSF5e[data-position=top-center]) .viraui__toast-module__Banner_QkOlo{inset-inline:0;margin-inline:auto}.viraui__toast-module__Viewport_oSF5e[data-position^=top-] .viraui__toast-module__Banner_QkOlo{inset-block-end:auto;inset-block-start:0;transform-origin:top center;--__toast-offset-y:calc(
       var(--toast-offset-y, 0px) + (var(--toast-index, 0) * var(--__toast-gap)) + var(--toast-swipe-movement-y, 0px)
-    );transform:scale(var(--__toast-scale)) translateX(var(--toast-swipe-movement-x,0)) translateY(calc(var(--toast-swipe-movement-y, 0px) + (var(--toast-index, 0) * var(--__toast-peek)) + (var(--__toast-shrink) * var(--__toast-stack-height))));&:after{inset-block-start:auto;inset-block-end:100%}&[data-expanded]{transform:scale(1) translateX(var(--toast-swipe-movement-x,0)) translateY(var(--__toast-offset-y))}&[data-ending-style]:not([data-swipe-direction]),&[data-starting-style]{transform:scale(1) translateY(-150%)}}.viraui__toast-module__Viewport_oSF5e[data-position=anchored] .viraui__toast-module__Banner_QkOlo{position:static;z-index:auto;min-inline-size:auto;block-size:auto;transform:none;&:after{content:none}transition:transform var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);&[data-ending-style],&[data-starting-style]{opacity:0;transform:scale(1) translateY(var(--space-2x-small))}&[data-expanded]{transform:none}}}
+    );transform:scale(var(--__toast-scale)) translateX(var(--toast-swipe-movement-x,0)) translateY(calc(var(--toast-swipe-movement-y, 0px) + (var(--toast-index, 0) * var(--__toast-peek)) + (var(--__toast-shrink) * var(--__toast-stack-height))));&:after{inset-block-start:auto;inset-block-end:100%}&[data-expanded]{transform:scale(1) translateX(var(--toast-swipe-movement-x,0)) translateY(var(--__toast-offset-y))}&[data-ending-style]:not([data-swipe-direction]),&[data-starting-style]{transform:scale(1) translateY(-150%)}}.viraui__toast-module__Viewport_oSF5e[data-position=anchored] .viraui__toast-module__Banner_QkOlo{position:static;z-index:auto;min-inline-size:auto;block-size:auto;transform:none;&:after{content:none}transition:transform var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);&[data-ending-style],&[data-starting-style]{opacity:0;transform:scale(1) translateY(var(--space-2xs))}&[data-expanded]{transform:none}}}

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

@@ -7,8 +7,8 @@ var ToggleGroup$1 = ({ children, orientation = "horizontal", ...otherProps }) =>
 	orientation,
 	render: /* @__PURE__ */ jsx(Stack, {
 		direction: orientation === "vertical" ? "column" : "row",
-		columnGap: "2x-small",
-		rowGap: "2x-small"
+		columnGap: "2xs",
+		rowGap: "2xs"
 	}),
 	children
 });

package/dist/components/tooltip/tooltip-content.js

@@ -16,14 +16,14 @@ var TooltipContent = ({ children, sideOffset = 8, container, ...positionerProps
 			render: /* @__PURE__ */ jsx(Surface, {
 				color: 1,
 				border: "all",
-				radius: "medium",
+				radius: "m",
 				"data-vibrant": true
 			}),
 			children: /* @__PURE__ */ jsx(Tooltip.Viewport, {
 				className: tooltip_module_default.Viewport,
 				render: /* @__PURE__ */ jsx(Stack, {
-					vPadding: "small",
-					hPadding: "small"
+					vPadding: "s",
+					hPadding: "s"
 				}),
 				children
 			})