@viraui/react 2026.7.0 → 2026.8.0

package/dist/components/spinner/variants/orbit.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/orbit.module.css
+var Track = "viraui__orbit-module__Track_kisTF";
+var orbit_module_default = {
+	Track,
+	"spinner-orbit-spin": "viraui__orbit-module__spinner-orbit-spin_unNkn"
+};
+//#endregion
+export { Track, orbit_module_default as default };

package/dist/components/spinner/variants/pulse.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__pulse-module__spinner-pulse-ripple_uxhZW{0%{opacity:.4;transform:scale(.25)}to{opacity:0;transform:scale(1)}}.viraui__pulse-module__Ring_urT8a{transform-origin:12px 12px;animation:viraui__pulse-module__spinner-pulse-ripple_uxhZW 1.2s ease-out infinite;@media (prefers-reduced-motion:reduce){animation:none;opacity:.2}}}

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

@@ -0,0 +1,2 @@
+declare const PulseGlyph: React.FC;
+export default PulseGlyph;

package/dist/components/spinner/variants/pulse.js

@@ -0,0 +1,19 @@
+import './pulse.css';
+import pulse_module_default from "./pulse.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/spinner/variants/pulse.tsx
+var PulseGlyph = () => /* @__PURE__ */ jsxs("g", {
+	fill: "currentColor",
+	children: [/* @__PURE__ */ jsx("circle", {
+		className: pulse_module_default.Ring,
+		cx: "12",
+		cy: "12",
+		r: "12"
+	}), /* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "3"
+	})]
+});
+//#endregion
+export { PulseGlyph as default };

package/dist/components/spinner/variants/pulse.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/pulse.module.css
+var Ring = "viraui__pulse-module__Ring_urT8a";
+var pulse_module_default = {
+	Ring,
+	"spinner-pulse-ripple": "viraui__pulse-module__spinner-pulse-ripple_uxhZW"
+};
+//#endregion
+export { Ring, pulse_module_default as default };

package/dist/components/spinner/variants/radar.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__radar-module__spinner-radar-spin_VcFzP{to{transform:rotate(1turn)}}.viraui__radar-module__Beam_iPWap{transform-origin:12px 12px;animation:viraui__radar-module__spinner-radar-spin_VcFzP 1.5s linear infinite;@media (prefers-reduced-motion:reduce){animation:none}}}

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

@@ -0,0 +1,2 @@
+declare const RadarGlyph: React.FC;
+export default RadarGlyph;

package/dist/components/spinner/variants/radar.js

@@ -0,0 +1,53 @@
+import './radar.css';
+import radar_module_default from "./radar.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+//#region src/components/spinner/variants/radar.tsx
+var RadarGlyph = () => {
+	const gradientId = `${useId().replaceAll(":", "")}-radar`;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", {
+			id: gradientId,
+			cx: "12",
+			cy: "12",
+			r: "12",
+			gradientUnits: "userSpaceOnUse",
+			children: [/* @__PURE__ */ jsx("stop", {
+				offset: "0.3334",
+				stopColor: "currentColor"
+			}), /* @__PURE__ */ jsx("stop", {
+				offset: "1",
+				stopColor: "currentColor",
+				stopOpacity: "0"
+			})]
+		}) }),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "12",
+			fill: "currentColor",
+			opacity: "0.2"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "8.25",
+			fill: "none",
+			stroke: "currentColor",
+			opacity: "0.2"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			className: radar_module_default.Beam,
+			d: "M12 0C14.2599 0 16.4736 0.638508 18.3867 1.84131C20.2999 3.04429 21.8355 4.763 22.815 6.7998C23.7944 8.8366 24.179 11.1094 23.9238 13.3549C23.6687 15.6002 22.7844 17.7276 21.3735 19.4927L15.7061 14.5488C16.2056 13.824 16.5 12.9468 16.5 12C16.5 9.51472 14.4853 7.5 12 7.5V0Z",
+			fill: `url(#${gradientId})`
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "3",
+			fill: "currentColor"
+		})
+	] });
+};
+//#endregion
+export { RadarGlyph as default };

package/dist/components/spinner/variants/radar.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/radar.module.css
+var Beam = "viraui__radar-module__Beam_iPWap";
+var radar_module_default = {
+	Beam,
+	"spinner-radar-spin": "viraui__radar-module__spinner-radar-spin_VcFzP"
+};
+//#endregion
+export { Beam, radar_module_default as default };

package/dist/components/spinner/variants/ring.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__ring-module__spinner-ring-spin_GiTYf{to{transform:rotate(1turn)}}.viraui__ring-module__Spin_UI5qI{transform-origin:12px 12px;animation:viraui__ring-module__spinner-ring-spin_GiTYf .8s linear infinite;@media (prefers-reduced-motion:reduce){animation:none}}}

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

@@ -0,0 +1,2 @@
+declare const RingGlyph: React.FC;
+export default RingGlyph;

package/dist/components/spinner/variants/ring.js

@@ -0,0 +1,24 @@
+import './ring.css';
+import ring_module_default from "./ring.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/spinner/variants/ring.tsx
+var RingGlyph = () => /* @__PURE__ */ jsxs("g", {
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "10",
+		opacity: "0.2"
+	}), /* @__PURE__ */ jsx("circle", {
+		className: ring_module_default.Spin,
+		cx: "12",
+		cy: "12",
+		r: "10",
+		strokeDasharray: "16 46.8"
+	})]
+});
+//#endregion
+export { RingGlyph as default };

package/dist/components/spinner/variants/ring.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/ring.module.css
+var Spin = "viraui__ring-module__Spin_UI5qI";
+var ring_module_default = {
+	Spin,
+	"spinner-ring-spin": "viraui__ring-module__spinner-ring-spin_GiTYf"
+};
+//#endregion
+export { Spin, ring_module_default as default };

package/dist/components/spinner/variants/ripple.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__ripple-module__spinner-ripple-spread_2XAYW{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(1)}}.viraui__ripple-module__Ring_40qYn{transform-origin:12px 12px;animation:viraui__ripple-module__spinner-ripple-spread_2XAYW 1.2s ease-out infinite;animation-delay:calc(1.2s * (var(--__spinner-ripple-step) - 3) / 3);@media (prefers-reduced-motion:reduce){animation:none;opacity:.4;transform:scale(calc((var(--__spinner-ripple-step) + 1) / 3))}}}

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

@@ -0,0 +1,2 @@
+declare const RippleGlyph: React.FC;
+export default RippleGlyph;

package/dist/components/spinner/variants/ripple.js

@@ -0,0 +1,23 @@
+import './ripple.css';
+import ripple_module_default from "./ripple.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spinner/variants/ripple.tsx
+var RINGS = [
+	0,
+	1,
+	2
+];
+var RippleGlyph = () => /* @__PURE__ */ jsx("g", {
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.9",
+	children: RINGS.map((index) => /* @__PURE__ */ jsx("circle", {
+		className: ripple_module_default.Ring,
+		cx: "12",
+		cy: "12",
+		r: "11",
+		style: { "--__spinner-ripple-step": index }
+	}, index))
+});
+//#endregion
+export { RippleGlyph as default };

package/dist/components/spinner/variants/ripple.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/ripple.module.css
+var Ring = "viraui__ripple-module__Ring_40qYn";
+var ripple_module_default = {
+	Ring,
+	"spinner-ripple-spread": "viraui__ripple-module__spinner-ripple-spread_2XAYW"
+};
+//#endregion
+export { Ring, ripple_module_default as default };

package/dist/components/spinner/variants/slide.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__slide-module__spinner-slide-walk_53ezW{0%{transform:translate(10.5px)}25%,8.33%{transform:translate(10.5px,10.5px)}33.33%,50%{transform:translateY(10.5px)}58.33%,75%{transform:translate(0)}83.33%,to{transform:translate(10.5px)}}.viraui__slide-module__Dot_Ca-UR{animation:viraui__slide-module__spinner-slide-walk_53ezW 2.4s ease-in-out infinite;animation-delay:calc(2.4s * (var(--__spinner-slide-step) - 3) / 3);@media (prefers-reduced-motion:reduce){animation:none;transform:var(--__spinner-slide-rest)}}}

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

@@ -0,0 +1,2 @@
+declare const SlideGlyph: React.FC;
+export default SlideGlyph;

package/dist/components/spinner/variants/slide.js

@@ -0,0 +1,24 @@
+import './slide.css';
+import slide_module_default from "./slide.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spinner/variants/slide.tsx
+var RESTS = [
+	"translate(10.5px, 0)",
+	"translate(0, 0)",
+	"translate(0, 10.5px)"
+];
+var SlideGlyph = () => /* @__PURE__ */ jsx("g", {
+	fill: "currentColor",
+	children: RESTS.map((rest, index) => /* @__PURE__ */ jsx("circle", {
+		className: slide_module_default.Dot,
+		cx: "4.5",
+		cy: "4.5",
+		r: "4",
+		style: {
+			"--__spinner-slide-step": index,
+			"--__spinner-slide-rest": rest
+		}
+	}, rest))
+});
+//#endregion
+export { SlideGlyph as default };

package/dist/components/spinner/variants/slide.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/slide.module.css
+var Dot = "viraui__slide-module__Dot_Ca-UR";
+var slide_module_default = {
+	Dot,
+	"spinner-slide-walk": "viraui__slide-module__spinner-slide-walk_53ezW"
+};
+//#endregion
+export { Dot, slide_module_default as default };

package/dist/components/spinner/variants/snake.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__snake-module__spinner-snake-spin_76ETQ{to{transform:rotate(1turn)}}@keyframes viraui__snake-module__spinner-snake-stretch_j03ip{0%{stroke-dasharray:1 100;stroke-dashoffset:0}50%{stroke-dasharray:45 100;stroke-dashoffset:-17}to{stroke-dasharray:45 100;stroke-dashoffset:-62}}.viraui__snake-module__Spin_qqtko{transform-origin:12px 12px;animation:viraui__snake-module__spinner-snake-spin_76ETQ 1.4s linear infinite;@media (prefers-reduced-motion:reduce){animation:none}}.viraui__snake-module__Dash_MvPl3{animation:viraui__snake-module__spinner-snake-stretch_j03ip 1.4s ease-in-out infinite;@media (prefers-reduced-motion:reduce){animation:none;stroke-dasharray:18 100}}}

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

@@ -0,0 +1,2 @@
+declare const SnakeGlyph: React.FC;
+export default SnakeGlyph;

package/dist/components/spinner/variants/snake.js

@@ -0,0 +1,19 @@
+import './snake.css';
+import snake_module_default from "./snake.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spinner/variants/snake.tsx
+var SnakeGlyph = () => /* @__PURE__ */ jsx("g", {
+	className: snake_module_default.Spin,
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	children: /* @__PURE__ */ jsx("circle", {
+		className: snake_module_default.Dash,
+		cx: "12",
+		cy: "12",
+		r: "10"
+	})
+});
+//#endregion
+export { SnakeGlyph as default };

package/dist/components/spinner/variants/snake.module.js

@@ -0,0 +1,11 @@
+//#region src/components/spinner/variants/snake.module.css
+var Spin = "viraui__snake-module__Spin_qqtko";
+var Dash = "viraui__snake-module__Dash_MvPl3";
+var snake_module_default = {
+	Spin,
+	"spinner-snake-spin": "viraui__snake-module__spinner-snake-spin_76ETQ",
+	Dash,
+	"spinner-snake-stretch": "viraui__snake-module__spinner-snake-stretch_j03ip"
+};
+//#endregion
+export { Dash, Spin, snake_module_default as default };

package/dist/components/spinner/variants/swirl.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__swirl-module__spinner-swirl-fade_jOM4Q{0%{opacity:1}to{opacity:.2}}.viraui__swirl-module__Cell_ntRNb{animation:viraui__swirl-module__spinner-swirl-fade_jOM4Q 1.2s linear infinite;animation-delay:calc(1.2s * (var(--__spinner-swirl-step) - 8) / 8);@media (prefers-reduced-motion:reduce){animation:none;opacity:.6}}}

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

@@ -0,0 +1,2 @@
+declare const SwirlGlyph: React.FC;
+export default SwirlGlyph;

package/dist/components/spinner/variants/swirl.js

@@ -0,0 +1,35 @@
+import './swirl.css';
+import swirl_module_default from "./swirl.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spinner/variants/swirl.tsx
+var RING = [
+	0,
+	1,
+	2,
+	7,
+	null,
+	3,
+	6,
+	5,
+	4
+];
+var CELL = 7;
+var SwirlGlyph = () => /* @__PURE__ */ jsx("g", {
+	fill: "currentColor",
+	children: RING.map((place, index) => {
+		if (place === null) return null;
+		const col = index % 3;
+		const row = Math.floor(index / 3);
+		return /* @__PURE__ */ jsx("rect", {
+			className: swirl_module_default.Cell,
+			x: col * 8.5,
+			y: row * 8.5,
+			width: CELL,
+			height: CELL,
+			rx: "1.5",
+			style: { "--__spinner-swirl-step": place }
+		}, place);
+	})
+});
+//#endregion
+export { SwirlGlyph as default };

package/dist/components/spinner/variants/swirl.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/swirl.module.css
+var Cell = "viraui__swirl-module__Cell_ntRNb";
+var swirl_module_default = {
+	Cell,
+	"spinner-swirl-fade": "viraui__swirl-module__spinner-swirl-fade_jOM4Q"
+};
+//#endregion
+export { Cell, swirl_module_default as default };

package/dist/components/spinner/variants/trace.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__trace-module__spinner-trace-dash_-Wnw8{to{stroke-dashoffset:-63.13}}.viraui__trace-module__Dash_mjMJN{animation:viraui__trace-module__spinner-trace-dash_-Wnw8 1.2s linear infinite;@media (prefers-reduced-motion:reduce){animation:none}}}

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

@@ -0,0 +1,2 @@
+declare const TraceGlyph: React.FC;
+export default TraceGlyph;

package/dist/components/spinner/variants/trace.js

@@ -0,0 +1,28 @@
+import './trace.css';
+import trace_module_default from "./trace.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/spinner/variants/trace.tsx
+var TraceGlyph = () => /* @__PURE__ */ jsxs("g", {
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	children: [/* @__PURE__ */ jsx("rect", {
+		x: "3.25",
+		y: "3.25",
+		width: "17.5",
+		height: "17.5",
+		rx: "4",
+		opacity: "0.2"
+	}), /* @__PURE__ */ jsx("rect", {
+		className: trace_module_default.Dash,
+		x: "3.25",
+		y: "3.25",
+		width: "17.5",
+		height: "17.5",
+		rx: "4",
+		strokeDasharray: "16 47.13"
+	})]
+});
+//#endregion
+export { TraceGlyph as default };

package/dist/components/spinner/variants/trace.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/trace.module.css
+var Dash = "viraui__trace-module__Dash_mjMJN";
+var trace_module_default = {
+	Dash,
+	"spinner-trace-dash": "viraui__trace-module__spinner-trace-dash_-Wnw8"
+};
+//#endregion
+export { Dash, trace_module_default as default };

package/dist/components/spinner/variants/wave.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__wave-module__spinner-wave-rise_lowcl{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}.viraui__wave-module__Bar_fg7xQ{transform-box:fill-box;transform-origin:center;animation:viraui__wave-module__spinner-wave-rise_lowcl .9s ease-in-out infinite;animation-delay:calc(.9s * (var(--__spinner-wave-step) - 5) / 5);@media (prefers-reduced-motion:reduce){animation:none;transform:scaleY(calc(.4 + var(--__spinner-wave-step) * .12))}}}

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

@@ -0,0 +1,2 @@
+declare const WaveGlyph: React.FC;
+export default WaveGlyph;

package/dist/components/spinner/variants/wave.js

@@ -0,0 +1,25 @@
+import './wave.css';
+import wave_module_default from "./wave.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spinner/variants/wave.tsx
+var BARS = [
+	0,
+	1,
+	2,
+	3,
+	4
+];
+var WaveGlyph = () => /* @__PURE__ */ jsx("g", {
+	fill: "currentColor",
+	children: BARS.map((index) => /* @__PURE__ */ jsx("rect", {
+		className: wave_module_default.Bar,
+		x: 2 + index * 4.4,
+		y: 3.6,
+		width: "2.8",
+		height: "16.8",
+		rx: "1.4",
+		style: { "--__spinner-wave-step": index }
+	}, index))
+});
+//#endregion
+export { WaveGlyph as default };

package/dist/components/spinner/variants/wave.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/wave.module.css
+var Bar = "viraui__wave-module__Bar_fg7xQ";
+var wave_module_default = {
+	Bar,
+	"spinner-wave-rise": "viraui__wave-module__spinner-wave-rise_lowcl"
+};
+//#endregion
+export { Bar, wave_module_default as default };

package/dist/components/text/text.css

@@ -2,4 +2,4 @@
     var(--__text-size-min),
     calc(var(--__text-size-min) + (var(--__text-size-max) - var(--__text-size-min)) * var(--__text-fluid)),
     var(--__text-size-max)
-  );--vui-text-font-family:var(--font-family-body);--vui-text-line-height:var(--font-leading-m);margin:0;max-inline-size:var(--vui-text-max-width);font-family:var(--vui-text-font-family);font-size:var(--vui-text-font-size);line-height:var(--vui-text-line-height);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-align=true]{text-align:var(--vui-text-align)}&[data-text-has-padding=true]{padding:var(--vui-text-padding-block-start) var(--vui-text-padding-inline-end) var(--vui-text-padding-block-end) var(--vui-text-padding-inline-start)}&[data-text-family=mono]{--vui-text-font-family:var(--font-family-mono)}&[data-text-size="4xl"]{--__text-size-min:var(--font-scale-body-3xl);--__text-size-max:var(--font-scale-body-4xl)}&[data-text-size="3xl"]{--__text-size-min:var(--font-scale-body-2xl);--__text-size-max:var(--font-scale-body-3xl)}&[data-text-size="2xl"]{--__text-size-min:var(--font-scale-body-xl);--__text-size-max:var(--font-scale-body-2xl)}&[data-text-size=xl]{--__text-size-min:var(--font-scale-body-l);--__text-size-max:var(--font-scale-body-xl)}&[data-text-size=l]{--__text-size-min:var(--font-scale-body-m);--__text-size-max:var(--font-scale-body-l)}&[data-text-size=s]{--__text-size-max:var(--font-scale-body-s)}&[data-text-size=s],&[data-text-size=xs]{--__text-size-min:var(--font-scale-body-xs)}&[data-text-size=xs]{--__text-size-max:var(--font-scale-body-xs)}& .viraui__text-module__Text_bS8kv:not([data-text-size]){font-size:inherit}& .viraui__text-module__Text_bS8kv:not([data-text-line-height]){line-height:inherit}&[data-text-fluid=false]{--vui-text-font-size:var(--__text-size-max)}@container root style(--effect-fluid-typography: initial){--vui-text-font-size:var(--__text-size-max)}&[data-text-weight=light]{--vui-text-font-weight:200}&[data-text-weight=semibold]{--vui-text-font-weight:600}&[data-text-weight=bold]{--vui-text-font-weight:800}&[data-text-tone=primary]{color:var(--global-primary)}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--vui-text-literal-color)}&[data-text-line-height=none]{--vui-text-line-height:0}&[data-text-line-height=xs]{--vui-text-line-height:var(--font-leading-xs)}&[data-text-line-height=s]{--vui-text-line-height:var(--font-leading-s)}&[data-text-line-height=m]{--vui-text-line-height:var(--font-leading-m)}&[data-text-line-height=l]{--vui-text-line-height:var(--font-leading-l)}}}
+  );--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);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-align=true]{text-align:var(--vui-text-align)}&[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-s);--__text-size-max:var(--font-scale-body-s)}&[data-text-size=xs]{--__text-size-min:var(--font-scale-body-xs);--__text-size-max:var(--font-scale-body-xs)}& .viraui__text-module__Text_bS8kv:not([data-text-size]){font-size:inherit}& .viraui__text-module__Text_bS8kv:not([data-text-line-height]){line-height:inherit}&[data-text-fluid=false]{--vui-text-font-size:var(--__text-size-max)}@container root style(--effect-fluid-typography: initial){--vui-text-font-size:var(--__text-size-max)}&[data-text-weight=light]{--vui-text-font-weight:200}&[data-text-weight=semibold]{--vui-text-font-weight:600}&[data-text-weight=bold]{--vui-text-font-weight:800}&[data-text-tone=primary]{color:var(--global-primary)}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--vui-text-literal-color)}&[data-text-line-height=none]{--vui-text-line-height:0}&[data-text-line-height=xs]{--vui-text-line-height:var(--font-leading-xs)}&[data-text-line-height=s]{--vui-text-line-height:var(--font-leading-s)}&[data-text-line-height=m]{--vui-text-line-height:var(--font-leading-m)}&[data-text-line-height=l]{--vui-text-line-height:var(--font-leading-l)}}}

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

@@ -31,7 +31,7 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
      *
      * @defaultValue 'm' on root Text (CSS); inherit when nested and omitted
      */
-    size?: '4xl' | '3xl' | '2xl' | 'xl' | 'l' | 'm' | 's' | 'xs';
+    size?: 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl';
     /**
      * Selects the semantic font family for body copy and inline code-like text.
      *
@@ -61,7 +61,9 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
     color?: string;
     /**
      * Controls line height through foundation leading tokens.
+     * Root Text without lineHeight uses leading `m` (`l` when open; `s` for dense chrome).
      * Omit when nested in Text so line-height inherits the outer Text.
+     * Prefer this prop over CSS `line-height`.
      *
      * @defaultValue 'm' on root Text (CSS); inherit when nested and omitted
      */
@@ -75,6 +77,9 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
     align?: React.CSSProperties['textAlign'];
     /**
      * Constrains the maximum inline size of the rendered text block.
+     * Prefer for readable UI measure (~10–12 words/line) over CSS `max-width`.
+     * Prefer `ch` (not `rem`) in patterns/examples. Width tracks `size` — smaller type → narrower cap;
+     * never one fixed ch for every size. Shared columns may use parent Stack `maxWidth` sized for the dominant body `size`.
      *
      * @defaultValue No max width constraint.
      */
@@ -101,6 +106,8 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
     transform?: React.CSSProperties['textTransform'];
     /**
      * Enables balanced wrapping for block-like copy.
+     * Prefer on short wrapping UI paragraphs (hero lead, empty state, card blurb);
+     * omit when single-line or intentional ragged.
      *
      * @defaultValue false
      */
@@ -151,7 +158,8 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
     /**
      * Enables viewport fluid clamp sizing for this instance.
      * Default locks at this size’s `--font-scale-body-*` token (UI chrome stays stable).
-     * Pass `true` for fluid page/body copy. Theme `--effect-fluid-typography: initial` still locks all Text globally.
+     * Pass `true` for fluid page/body copy (`m`+). `s` / `xs` stay fixed either way.
+     * Theme `--effect-fluid-typography: initial` still locks all Text globally.
      *
      * @defaultValue false
      */

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

@@ -49,6 +49,8 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
     color?: string;
     /**
      * Controls line height through foundation leading tokens.
+     * Default `m`; prefer `s` on large wrapping titles and always inside Prose.
+     * Prefer this prop over CSS `line-height`.
      *
      * @defaultValue 'm'
      */
@@ -62,6 +64,9 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
     align?: React.CSSProperties['textAlign'];
     /**
      * Constrains the maximum inline size of the rendered text block.
+     * Prefer for readable wrapping titles (~10–12 words/line) over CSS `max-width`.
+     * Prefer `ch` (not `rem`) in patterns/examples. Width tracks `size` — smaller presets → narrower cap;
+     * never one fixed measure for every size. Shared columns may use parent Stack `maxWidth` instead.
      *
      * @defaultValue No max width constraint.
      */
@@ -90,6 +95,8 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
     transform?: React.CSSProperties['textTransform'];
     /**
      * Enables balanced wrapping for block-like titles.
+     * Prefer on short wrapping heads (hero, empty state, section);
+     * omit for single-line / `whiteSpace="nowrap"` metrics.
      *
      * @defaultValue false
      */

package/dist/index.js

@@ -24,6 +24,7 @@ import { DialogIndentBackground } from "./components/dialog/dialog-indent-backgr
 import { DialogSheet } from "./components/dialog/dialog-sheet.js";
 import { DialogTrigger } from "./components/dialog/dialog-trigger.js";
 import { Dialog } from "./components/dialog/dialog.js";
+import { DirectionProvider, useDirection } from "./components/direction-provider/index.js";
 import { Disclosure } from "./components/disclosure/disclosure.js";
 import { ELEVATION_DEFAULTS } from "./core/elevation/elevation-types.js";
 import { getElevationProps } from "./core/elevation/get-elevation-props.js";
@@ -72,4 +73,4 @@ import { ToggleGroup } from "./components/toggle-group/toggle-group.js";
 import { Typewriter } from "./components/typewriter/typewriter.js";
 import { TooltipContent } from "./components/tooltip/tooltip-content.js";
 import { Tooltip, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
-export { Accordion, Annotate, Autocomplete, Avatar, AvatarGroup, Badge, Beam, Bleed, BreakpointsProvider, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, Disclosure, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, Glow, Grid, IconButton, IconButtonLink, LinearProgress, Masonry, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, NumberField, OTPField, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Prose, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps, useBreakpoints };
+export { Accordion, Annotate, Autocomplete, Avatar, AvatarGroup, Badge, Beam, Bleed, BreakpointsProvider, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, DirectionProvider, Disclosure, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, Glow, Grid, IconButton, IconButtonLink, LinearProgress, Masonry, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, NumberField, OTPField, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Prose, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps, useBreakpoints, useDirection };

package/dist/preflight.css

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

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

@@ -22,10 +22,10 @@
     <description>Resting background for the item card, forwarded to the wrapping `Surface` when `useSurface` is `true`. Omit for no background.</description>
   </prop>
   <prop name="Item.iconClosed" kind="react">
-    <description>Decorative icon shown when the item is closed.</description>
+    <description>Decorative icon shown when the item is closed. Omit glyph `size` / width / height unless expressly overriding — prefer host/chrome default.</description>
   </prop>
   <prop name="Item.iconOpen" kind="react">
-    <description>Decorative icon shown when the item is open.</description>
+    <description>Decorative icon shown when the item is open. Omit glyph `size` / width / height unless expressly overriding — prefer host/chrome default.</description>
   </prop>
   <prop name="Item.iconPosition" kind="react">
     <description>Side of the trigger label where the expand/collapse icon is rendered.</description>