@viraui/react 2026.7.1 → 2026.9.0

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

@@ -0,0 +1,24 @@
+import './orbit.css';
+import orbit_module_default from "./orbit.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/spinner/variants/orbit.tsx
+var OrbitGlyph = () => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+	cx: "12",
+	cy: "12",
+	r: "3",
+	fill: "currentColor"
+}), /* @__PURE__ */ jsx("g", {
+	className: orbit_module_default.Track,
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.5",
+	strokeLinecap: "round",
+	children: /* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "9",
+		strokeDasharray: "28 28.5"
+	})
+})] });
+//#endregion
+export { OrbitGlyph as default };

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/stack/stack.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-stack-row-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-column-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-h-align{syntax:"*";inherits:false;initial-value:initial}@property --vui-stack-v-align{syntax:"*";inherits:false;initial-value:initial}@property --vui-stack-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-stack-min-width{syntax:"*";inherits:false;initial-value:none}.viraui__stack-module__Stack_NR-Ey{display:flex;gap:var(--vui-stack-row-gap) var(--vui-stack-column-gap);flex-direction:column;align-items:var(--vui-stack-h-align);justify-content:var(--vui-stack-v-align);max-inline-size:var(--vui-stack-max-width);min-inline-size:var(--vui-stack-min-width);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--vui-stack-v-align);justify-content:var(--vui-stack-h-align)}&[data-stack-direction=row]{flex-direction:row}&[data-stack-direction=row-reverse]{flex-direction:row-reverse}&[data-stack-inline=true]{display:inline-flex;flex-grow:0}:where(&[data-stack-wrap=true]){flex-wrap:wrap}:where(&[data-stack-has-padding=true]){padding:var(--vui-stack-padding-block-start) var(--vui-stack-padding-inline-end) var(--vui-stack-padding-block-end) var(--vui-stack-padding-inline-start)}:where(&[data-stack-expand-children=true]>*){flex-grow:var(--vira-flex-grow,1)}&[data-stack-full-width=true]{inline-size:100%}&[data-stack-container=true]{container:stack/inline-size}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-stack-row-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-column-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-h-align{syntax:"*";inherits:false;initial-value:initial}@property --vui-stack-v-align{syntax:"*";inherits:false;initial-value:initial}@property --vui-stack-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-stack-min-width{syntax:"*";inherits:false;initial-value:none}.viraui__stack-module__Stack_NR-Ey{display:flex;gap:var(--vui-stack-row-gap) var(--vui-stack-column-gap);flex-direction:column;align-items:var(--vui-stack-h-align);justify-content:var(--vui-stack-v-align);max-inline-size:var(--vui-stack-max-width);min-inline-size:var(--vui-stack-min-width);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--vui-stack-v-align);justify-content:var(--vui-stack-h-align)}&[data-stack-direction=row]{flex-direction:row}&[data-stack-direction=row-reverse]{flex-direction:row-reverse}&[data-stack-inline=true]{display:inline-flex;flex-grow:0}:where(&[data-stack-wrap=true]){flex-wrap:wrap}:where(&[data-stack-has-padding=true]){padding:var(--vui-stack-padding-block-start) var(--vui-stack-padding-inline-end) var(--vui-stack-padding-block-end) var(--vui-stack-padding-inline-start)}:where(&[data-stack-expand-children=true]>*){flex-grow:var(--vira-flex-grow,1)}&[data-stack-full-width=true]{inline-size:100%}&[data-stack-full-height=true]{block-size:100%}&[data-stack-container=true]{container:stack/inline-size}}}

package/dist/components/stack/stack.d.ts

@@ -47,8 +47,9 @@ export type StackProps = React.ComponentPropsWithoutRef<'div'> & {
      * Makes direct children grow along the flex main axis (`flex-grow`).
      *
      * Prefer for equal-width row actions instead of inventing width/flex CSS on each child.
-     * Does not set the stack root's own inline size — use `fullWidth` when this stack must
-     * fill its parent width (e.g. centered shell with `maxWidth`, or a full-bleed Button column).
+     * Cross-axis fill stays on `hAlign` / `vAlign="stretch"` (which prop is cross depends on
+     * `direction`). Does not size this root — use `fullWidth` / `fullHeight` when the Stack must
+     * fill its parent first so stretch has room.
      *
      * @defaultValue false
      */
@@ -59,11 +60,22 @@ export type StackProps = React.ComponentPropsWithoutRef<'div'> & {
      * Prefer this (with cross-axis stretch) so content-sized children like Button span a panel —
      * do not add `width: 100%` CSS on those children.
      * Use with `maxWidth` under a parent `hAlign="center"` for a fluid, capped, centered shell.
-     * Orthogonal to `expandChildren` (self size vs children grow).
+     * Orthogonal to `expandChildren` (self size vs children grow). Pair with `fullHeight` when the
+     * root must fill both parent axes.
      *
      * @defaultValue false
      */
     fullWidth?: boolean;
+    /**
+     * Sets `block-size: 100%` on the stack root so it fills the parent's block size.
+     *
+     * Prefer this over `style`/`className` `height` / `block-size: 100%` on this Stack.
+     * Pair with `expandChildren` and cross-axis `hAlign`/`vAlign="stretch"` so children fill both
+     * axes without per-child size CSS. Orthogonal to `expandChildren` and `fullWidth`.
+     *
+     * @defaultValue false
+     */
+    fullHeight?: boolean;
     /**
      * Sets the gap between flex rows using the Vira space token scale.
      *

package/dist/components/stack/stack.js

@@ -5,7 +5,7 @@ import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
 import stack_module_default from "./stack.module.js";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/stack/stack.tsx
-var Stack = ({ className, direction = "column", expandChildren = false, fullWidth = false, hAlign = "initial", hPadding, inline = false, maxWidth, minWidth, enableContainer, ref, render, rowGap, columnGap, style, vAlign = "initial", vPadding, wrap = false, ...otherProps }) => {
+var Stack = ({ className, direction = "column", expandChildren = false, fullHeight = false, fullWidth = false, hAlign = "initial", hPadding, inline = false, maxWidth, minWidth, enableContainer, ref, render, rowGap, columnGap, style, vAlign = "initial", vPadding, wrap = false, ...otherProps }) => {
 	const hasPadding = Boolean(hPadding || vPadding);
 	const dynamicStyle = {
 		"--vui-stack-row-gap": resolveThemeValue(rowGap, "space", 0),
@@ -30,6 +30,7 @@ var Stack = ({ className, direction = "column", expandChildren = false, fullWidt
 			"data-stack-wrap": wrap ? "true" : "false",
 			"data-stack-expand-children": expandChildren ? "true" : "false",
 			"data-stack-full-width": fullWidth ? "true" : "false",
+			"data-stack-full-height": fullHeight ? "true" : "false",
 			"data-stack-has-padding": hasPadding ? "true" : "false",
 			className: clsx(stack_module_default.Stack, className),
 			style: dynamicStyle

package/dist/components/surface/surface.css

@@ -4,4 +4,4 @@
     )}&[data-surface-hover-color=primary]{--vui-surface-background-hover:light-dark(
       oklab(from var(--global-primary) l a b / 20%),
       oklab(from var(--global-primary) l a b / 10%)
-    )}@container root not style(--effect-vibrancy: initial){&[data-vibrant]{background:oklab(from var(--global-background) l a b/80%)}&[data-vibrant][data-surface-has-color=true]{background:oklab(from var(--vui-surface-background) l a b/80%)}}&[data-surface-has-padding=true]{padding:var(--vui-surface-padding-block-start) var(--vui-surface-padding-inline-end) var(--vui-surface-padding-block-end) var(--vui-surface-padding-inline-start)}&[data-surface-border]{border-style:var(--vui-surface-border-style);border-color:var(--global-contrast);border-left-width:0;border-bottom-width:0;border-right-width:0;border-top-width:0}&[data-surface-border~=all]{border-width:1px}&[data-surface-border~=top]{border-top-width:1px}&[data-surface-border~=right]{border-right-width:1px}&[data-surface-border~=bottom]{border-bottom-width:1px}&[data-surface-border~=left]{border-left-width:1px}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--vui-surface-background-hover)}}&[data-surface-container=true]{container:surface/inline-size}}}
+    )}@container root not style(--effect-vibrancy: initial){&[data-vibrant]{background:#0000}&[data-vibrant][data-surface-has-color=true]{background:oklab(from var(--vui-surface-background) l a b/80%)}}&[data-surface-has-padding=true]{padding:var(--vui-surface-padding-block-start) var(--vui-surface-padding-inline-end) var(--vui-surface-padding-block-end) var(--vui-surface-padding-inline-start)}&[data-surface-border]{border-style:var(--vui-surface-border-style);border-color:var(--global-contrast);border-left-width:0;border-bottom-width:0;border-right-width:0;border-top-width:0}&[data-surface-border~=all]{border-width:1px}&[data-surface-border~=top]{border-top-width:1px}&[data-surface-border~=right]{border-right-width:1px}&[data-surface-border~=bottom]{border-bottom-width:1px}&[data-surface-border~=left]{border-left-width:1px}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--vui-surface-background-hover)}}&[data-surface-container=true]{container:surface/inline-size}}}

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
      */