@viraui/react 2026.9.0 → 2026.10.0-next.0

package/dist/catalog.json

@@ -185,7 +185,7 @@
     {
       "id": "prose",
       "name": "Prose",
-      "summary": "Text-wall grouping region (articles, docs, privacy) with heading-aware em rhythm; reading column via parent Stack `maxWidth` sized for body Text `size`.",
+      "summary": "Text-wall grouping region (articles, docs, privacy) with heading-aware em rhythm, region `wrap` (default `pretty`), and reading column via parent Stack `maxWidth` sized for body Text `size`.",
       "agentDocs": "./specs/components/prose/meta.xml"
     },
     {
@@ -263,7 +263,7 @@
     {
       "id": "text",
       "name": "Text",
-      "summary": "Theme-aware body-copy primitive with tone, family, sizing, and readable-measure props (`maxWidth` / `lineHeight` / `balanced`).",
+      "summary": "Theme-aware body-copy primitive with tone, family, sizing, and readable-measure props (`maxWidth` / `lineHeight` / `wrap`).",
       "agentDocs": "./specs/components/text/meta.xml"
     },
     {
@@ -281,7 +281,7 @@
     {
       "id": "title",
       "name": "Title",
-      "summary": "Theme-aware heading and display typography with readable-measure props (`maxWidth` / `lineHeight` / `balanced`).",
+      "summary": "Theme-aware heading and display typography with readable-measure props (`maxWidth` / `lineHeight` / `wrap`).",
       "agentDocs": "./specs/components/title/meta.xml"
     },
     {
@@ -302,6 +302,12 @@
       "summary": "Toolbar toggle set with shared selection state; Stack direction follows orientation with zero default gap.",
       "agentDocs": "./specs/components/toggle-group/meta.xml"
     },
+    {
+      "id": "toggle-text-button",
+      "name": "ToggleTextButton",
+      "summary": "Labeled two-state toggle on Base UI Toggle with Button chrome; visible text children, optional addon / pressedVariant; no resting/pressed icon pair.",
+      "agentDocs": "./specs/components/toggle-text-button/meta.xml"
+    },
     {
       "id": "typewriter",
       "name": "Typewriter",

package/dist/components/index.d.ts

@@ -48,5 +48,6 @@ export * from './title';
 export * from './toast';
 export * from './toggle-button';
 export * from './toggle-group';
+export * from './toggle-text-button';
 export * from './typewriter';
 export * from './tooltip';

package/dist/components/prose/prose.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-prose-align{syntax:"*";inherits:false;initial-value:start}@property --vui-prose-gap-blocks{syntax:"<length>";inherits:true;initial-value:2em}@property --vui-prose-gap-heading-start{syntax:"<length>";inherits:true;initial-value:1.3em}@property --vui-prose-gap-heading-end{syntax:"<length>";inherits:true;initial-value:.8em}.viraui__prose-module__Prose_8yO9h{--vui-prose-gap-blocks:2em;--vui-prose-gap-heading-start:1.3em;--vui-prose-gap-heading-end:0.8em;&[data-prose-gap=s]{--vui-prose-gap-blocks:1em;--vui-prose-gap-heading-start:0.7em;--vui-prose-gap-heading-end:0.3em}&[data-prose-gap=m]{--vui-prose-gap-blocks:1.5em;--vui-prose-gap-heading-start:1em;--vui-prose-gap-heading-end:0.6em}&[data-prose-has-align=true]{text-align:var(--vui-prose-align)}&>:is(h1,h2,h3,h4,h5,h6,hgroup,ul,ol,dd,p,figure,img,pre,table,fieldset,blockquote,picture,div):where(:not(:first-child)){margin-block:var(--vui-prose-gap-blocks)}&>:is(h1,h2,h3,h4,h5,h6)+*{margin-block-start:var(--vui-prose-gap-heading-start)}&>:is(h1,h2,h3,h4,h5,h6){margin-block-end:var(--vui-prose-gap-heading-end);text-box:trim-both cap alphabetic}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-prose-align{syntax:"*";inherits:false;initial-value:start}@property --vui-prose-wrap{syntax:"*";inherits:true;initial-value:pretty}@property --vui-prose-gap-blocks{syntax:"<length>";inherits:true;initial-value:2em}@property --vui-prose-gap-heading-start{syntax:"<length>";inherits:true;initial-value:1.3em}@property --vui-prose-gap-heading-end{syntax:"<length>";inherits:true;initial-value:.8em}.viraui__prose-module__Prose_8yO9h{--vui-prose-gap-blocks:2em;--vui-prose-gap-heading-start:1.3em;--vui-prose-gap-heading-end:0.8em;&[data-prose-gap=s]{--vui-prose-gap-blocks:1em;--vui-prose-gap-heading-start:0.7em;--vui-prose-gap-heading-end:0.3em}&[data-prose-gap=m]{--vui-prose-gap-blocks:1.5em;--vui-prose-gap-heading-start:1em;--vui-prose-gap-heading-end:0.6em}text-wrap:var(--vui-prose-wrap);&[data-prose-has-align=true]{text-align:var(--vui-prose-align)}&>:is(h1,h2,h3,h4,h5,h6,hgroup,ul,ol,dd,p,figure,img,pre,table,fieldset,blockquote,picture,div):where(:not(:first-child)){margin-block:var(--vui-prose-gap-blocks)}&>:is(h1,h2,h3,h4,h5,h6)+*{margin-block-start:var(--vui-prose-gap-heading-start)}&>:is(h1,h2,h3,h4,h5,h6){margin-block-end:var(--vui-prose-gap-heading-end);text-box:trim-both cap alphabetic}}}

package/dist/components/prose/prose.d.ts

@@ -25,6 +25,14 @@ export type ProseProps = React.ComponentPropsWithoutRef<'div'> & {
      * @defaultValue Inherits parent `text-align`.
      */
     align?: React.CSSProperties['textAlign'];
+    /**
+     * Controls CSS `text-wrap` on the Prose root (inherits to descendants unless a child overrides).
+     * Default `pretty` for orphan-aware article walls. Prefer `balance` only on short multi-line
+     * blocks that need even line lengths. Single-line metrics stay on child Text/Title `whiteSpace`.
+     *
+     * @defaultValue 'pretty'
+     */
+    wrap?: React.CSSProperties['textWrap'];
     /**
      * Replaces the default `div` root using Base UI render semantics.
      *

package/dist/components/prose/prose.js

@@ -4,10 +4,11 @@ import { clsx } from "../../core/clsx.js";
 import prose_module_default from "./prose.module.js";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/prose/prose.tsx
-var Prose = ({ align, className, gap = "l", ref, render, style, ...otherProps }) => {
+var Prose = ({ align, className, gap = "l", ref, render, style, wrap = "pretty", ...otherProps }) => {
 	const hasAlign = align !== void 0;
 	const dynamicStyle = {
 		...hasAlign && { "--vui-prose-align": align },
+		"--vui-prose-wrap": wrap,
 		...style
 	};
 	return useRender({

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

@@ -3,31 +3,37 @@ import { Stack } from "../stack/stack.js";
 import { Surface } from "../surface/surface.js";
 import tabs_module_default from "./tabs.module.js";
 import { TabsIndicator } from "./tabs-indicator.js";
+import { useTabsSize } from "./tabs-size-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/tabs/tabs-list.tsx
-var TabsList = ({ children, className, activateOnFocus = true, ref, ...otherProps }) => /* @__PURE__ */ jsxs(Tabs.List, {
-	className: clsx(tabs_module_default.List, className),
-	activateOnFocus,
-	render: /* @__PURE__ */ jsx(Surface, {
-		color: 1,
-		border: "all",
-		radius: "m",
-		vPadding: "2xs"
-	}),
-	ref,
-	...otherProps,
-	children: [/* @__PURE__ */ jsx(TabsIndicator, {}), /* @__PURE__ */ jsx("div", {
-		className: tabs_module_default.Track,
-		children: /* @__PURE__ */ jsx(Stack, {
-			expandChildren: true,
-			fullWidth: true,
-			direction: "row",
-			hAlign: "start",
-			vAlign: "center",
-			children
-		})
-	})]
-});
+var TabsList = ({ children, className, activateOnFocus = true, ref, ...otherProps }) => {
+	const size = useTabsSize();
+	const listRadius = size === "s" ? "s" : "m";
+	return /* @__PURE__ */ jsxs(Tabs.List, {
+		className: clsx(tabs_module_default.List, className),
+		activateOnFocus,
+		"data-size": size,
+		render: /* @__PURE__ */ jsx(Surface, {
+			color: 1,
+			border: "all",
+			radius: listRadius,
+			vPadding: "2xs"
+		}),
+		ref,
+		...otherProps,
+		children: [/* @__PURE__ */ jsx(TabsIndicator, {}), /* @__PURE__ */ jsx("div", {
+			className: tabs_module_default.Track,
+			children: /* @__PURE__ */ jsx(Stack, {
+				expandChildren: true,
+				fullWidth: true,
+				direction: "row",
+				hAlign: "start",
+				vAlign: "center",
+				children
+			})
+		})]
+	});
+};
 //#endregion
 export { TabsList };

package/dist/components/tabs/tabs-size-context.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from '../button/button';
+export type TabsSize = NonNullable<ButtonProps['size']>;
+export declare const TabsSizeContext: import('react').Context<TabsSize>;
+export declare const useTabsSize: () => TabsSize;

package/dist/components/tabs/tabs-size-context.js

@@ -0,0 +1,7 @@
+"use client";
+import { createContext, useContext } from "react";
+//#region src/components/tabs/tabs-size-context.ts
+var TabsSizeContext = createContext("m");
+var useTabsSize = () => useContext(TabsSizeContext);
+//#endregion
+export { TabsSizeContext, useTabsSize };

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

@@ -2,24 +2,29 @@ import { clsx } from "../../core/clsx.js";
 import { Text } from "../text/text.js";
 import { Button } from "../button/button.js";
 import tabs_module_default from "./tabs.module.js";
+import { useTabsSize } from "./tabs-size-context.js";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/tabs/tabs-tab.tsx
-var TabsTab = ({ addon, addonPosition = "start", children, className, ...otherProps }) => /* @__PURE__ */ jsx(Tabs.Tab, {
-	render: /* @__PURE__ */ jsx(Button, {
-		variant: "flat",
-		addon,
-		addonPosition,
-		className: clsx(tabs_module_default.Item, className)
-	}),
-	...otherProps,
-	children: /* @__PURE__ */ jsx(Text, {
-		fluid: false,
-		tone: "muted",
-		whiteSpace: "nowrap",
-		className: tabs_module_default.Label,
-		children
-	})
-});
+var TabsTab = ({ addon, addonPosition = "start", children, className, ...otherProps }) => {
+	const size = useTabsSize();
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "flat",
+			size,
+			addon,
+			addonPosition,
+			className: clsx(tabs_module_default.Item, className)
+		}),
+		...otherProps,
+		children: /* @__PURE__ */ jsx(Text, {
+			fluid: false,
+			tone: "muted",
+			whiteSpace: "nowrap",
+			className: tabs_module_default.Label,
+			children
+		})
+	});
+};
 //#endregion
 export { TabsTab };

package/dist/components/tabs/tabs.d.ts

@@ -1,5 +1,6 @@
 import { TabsRoot } from '@base-ui/react/tabs';
 import { StackProps } from '..';
+import { ButtonProps } from '../button/button';
 import { TabsListProps } from './tabs-list';
 import { TabsPanelProps } from './tabs-panel';
 import { TabsTabProps } from './tabs-tab';
@@ -20,6 +21,12 @@ export type TabsProps = TabsRoot.Props & {
      * @defaultValue 'start'
      */
     listAlignment?: Extract<StackProps['hAlign'], 'start' | 'center' | 'end' | 'stretch'>;
+    /**
+     * Shared visual size for tab items (`Button`) and the active indicator footprint.
+     *
+     * @defaultValue 'm'
+     */
+    size?: ButtonProps['size'];
 };
 type TabsComponent = React.FC<TabsProps> & {
     List: React.FC<TabsListProps>;

package/dist/components/tabs/tabs.js

@@ -2,6 +2,7 @@ import './tabs.css';
 import { clsx } from "../../core/clsx.js";
 import { Stack } from "../stack/stack.js";
 import tabs_module_default from "./tabs.module.js";
+import { TabsSizeContext } from "./tabs-size-context.js";
 import { TabsList } from "./tabs-list.js";
 import { TabsPanel } from "./tabs-panel.js";
 import { TabsTab } from "./tabs-tab.js";
@@ -10,14 +11,17 @@ import { jsx } from "react/jsx-runtime";
 import "react";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/tabs/tabs.tsx
-var TabsRootComponent = ({ children, className, listAlignment = "start", ...otherProps }) => /* @__PURE__ */ jsx(Tabs.Root, {
-	render: /* @__PURE__ */ jsx(Stack, {
-		hAlign: listAlignment,
-		vAlign: "start",
-		className: clsx(tabs_module_default.Tabs, className)
-	}),
-	...otherProps,
-	children
+var TabsRootComponent = ({ children, className, listAlignment = "start", size = "m", ...otherProps }) => /* @__PURE__ */ jsx(TabsSizeContext.Provider, {
+	value: size,
+	children: /* @__PURE__ */ jsx(Tabs.Root, {
+		render: /* @__PURE__ */ jsx(Stack, {
+			hAlign: listAlignment,
+			vAlign: "start",
+			className: clsx(tabs_module_default.Tabs, className)
+		}),
+		...otherProps,
+		children
+	})
 });
 var Tabs$1 = Object.assign(TabsRootComponent, {
 	List: TabsList,

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((100vi - 320px) / 1125px);--__text-size-min:var(--font-scale-body-s);--__text-size-max:var(--font-scale-body-m);--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-wrap{syntax:"*";inherits:false;initial-value:pretty}@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-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)}}}
+  );--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);text-wrap:var(--vui-text-wrap);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-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

@@ -85,7 +85,9 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
      */
     maxWidth?: string;
     /**
-     * Controls white-space preservation and wrapping behavior.
+     * Controls white-space collapse/preserve (`white-space`).
+     * Prefer `whiteSpace="nowrap"` for single-line metrics/chrome (also collapses spaces).
+     * For wrapping algorithm / even line lengths use `wrap` (`text-wrap`) — not this prop.
      *
      * @defaultValue 'normal'
      */
@@ -105,13 +107,14 @@ 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.
+     * Controls CSS `text-wrap` (wrapping algorithm / wrap on-off).
+     * Default `pretty` for orphan-aware UI copy. Prefer `balance` on short multi-line
+     * heads/blurbs that need even line lengths. Use `wrap="nowrap"` only when you need
+     * no wrap without changing white-space collapse; prefer `whiteSpace="nowrap"` for metrics.
      *
-     * @defaultValue false
+     * @defaultValue 'pretty'
      */
-    balanced?: boolean;
+    wrap?: React.CSSProperties['textWrap'];
     /**
      * Enables text selection on the rendered copy.
      *

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, balanced = false, selection = true, className, color, family = "body", fluid = false, fontWidth, hPadding, lineHeight, maxWidth, opticalSize, ref, render, size, style, tone, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight = "regular", whiteSpace = "normal", ...otherProps }) => {
+var Text = ({ align, selection = true, className, color, family = "body", fluid = false, fontWidth, hPadding, lineHeight, maxWidth, opticalSize, ref, render, size, style, tone, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight = "regular", whiteSpace = "normal", wrap = "pretty", ...otherProps }) => {
 	const hasAlign = align !== void 0;
 	const hasPadding = Boolean(hPadding || vPadding);
 	const dynamicStyle = {
@@ -12,6 +12,7 @@ var Text = ({ align, balanced = false, selection = true, className, color, famil
 		"--vui-text-max-width": maxWidth ?? "none",
 		"--vui-text-literal-color": color,
 		"--vui-text-white-space": whiteSpace,
+		"--vui-text-wrap": wrap,
 		"--vui-text-letter-spacing": tracking,
 		"--vui-text-text-transform": transform,
 		"--vui-text-trim": trim ? `trim-${trim}` : "none",
@@ -34,7 +35,6 @@ var Text = ({ align, balanced = false, selection = true, className, color, famil
 			"data-text-weight": typeof weight === "string" ? weight : "custom",
 			"data-text-tone": tone,
 			"data-text-line-height": lineHeight,
-			"data-text-balanced": balanced ? "true" : "false",
 			"data-text-selection": selection ? "true" : "false",
 			"data-text-fluid": fluid ? "true" : "false",
 			"data-text-has-align": hasAlign ? "true" : "false",

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

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

@@ -72,7 +72,9 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
      */
     maxWidth?: string;
     /**
-     * Controls white-space preservation and wrapping behavior.
+     * Controls white-space collapse/preserve (`white-space`).
+     * Prefer `whiteSpace="nowrap"` for single-line metrics/chrome (also collapses spaces).
+     * For wrapping algorithm / even line lengths use `wrap` (`text-wrap`) — not this prop.
      *
      * @defaultValue 'normal'
      */
@@ -94,13 +96,14 @@ 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.
+     * Controls CSS `text-wrap` (wrapping algorithm / wrap on-off).
+     * Default `pretty` for orphan-aware titles. Prefer `balance` on short multi-line
+     * heads that need even line lengths. Use `wrap="nowrap"` only when you need no wrap
+     * without changing white-space collapse; prefer `whiteSpace="nowrap"` for metrics.
      *
-     * @defaultValue false
+     * @defaultValue 'pretty'
      */
-    balanced?: boolean;
+    wrap?: React.CSSProperties['textWrap'];
     /**
      * Enables text selection on the rendered copy.
      *

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, balanced = false, selection = true, className, color, fluid = true, fontWidth, hPadding, size = "1", lineHeight = "m", maxWidth, opticalSize, ref, render, style, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", ...otherProps }) => {
+var Title = ({ align, selection = true, className, color, fluid = true, fontWidth, hPadding, size = "1", lineHeight = "m", maxWidth, opticalSize, ref, render, style, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", wrap = "pretty", ...otherProps }) => {
 	const hasAlign = align !== void 0;
 	const hasPadding = Boolean(hPadding || vPadding);
 	const hasTracking = tracking !== void 0;
@@ -13,6 +13,7 @@ var Title = ({ align, balanced = false, selection = true, className, color, flui
 		"--vui-title-max-width": maxWidth ?? "none",
 		"--vui-title-literal-color": color,
 		"--vui-title-white-space": whiteSpace,
+		"--vui-title-wrap": wrap,
 		...hasTracking && { "--vui-title-letter-spacing": tracking },
 		"--vui-title-text-transform": transform,
 		"--vui-title-trim": trim ? `trim-${trim}` : "none",
@@ -32,7 +33,6 @@ var Title = ({ align, balanced = false, selection = true, className, color, flui
 			...otherProps,
 			"data-title-size": size,
 			"data-title-line-height": lineHeight,
-			"data-title-balanced": balanced ? "true" : "false",
 			"data-title-selection": selection ? "true" : "false",
 			"data-title-fluid": fluid ? "true" : "false",
 			"data-title-has-align": hasAlign ? "true" : "false",

package/dist/components/toggle-group/toggle-group.d.ts

@@ -4,7 +4,9 @@ import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group
  *
  * Thin wrapper around Base UI `ToggleGroup` with default `Stack` direction
  * (`row` / `column` from `orientation`) and zero gap — consumers own spacing.
- * Compose `ToggleButton` children each with `value` and an accessible name.
+ * Compose `ToggleButton` and/or `ToggleTextButton` children each with `value`
+ * (icon-only children also need an accessible name).
+
  *
  * @defaultValue Base UI pass-through props keep upstream defaults.
  */

package/dist/components/toggle-text-button/index.d.ts

@@ -0,0 +1,2 @@
+export { ToggleTextButton } from './toggle-text-button';
+export type { ToggleTextButtonProps } from './toggle-text-button';

package/dist/components/toggle-text-button/toggle-text-button.d.ts

@@ -0,0 +1,27 @@
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { ButtonProps } from '../button/button';
+import * as React from 'react';
+/**
+ * Public ToggleTextButton props.
+ *
+ * Labeled two-state control built on Base UI `Toggle` and `Button`.
+ * Prefer a visible text `children` label; supply `aria-label` or `aria-labelledby`
+ * when children are empty or whitespace-only.
+ *
+ * @defaultValue Base UI toggle pass-through props keep upstream defaults.
+ */
+export type ToggleTextButtonProps = Omit<ButtonProps, 'render' | 'variant'> & Omit<TogglePrimitive.Props, 'render' | 'children'> & {
+    /**
+     * Visual variant while the toggle is not pressed.
+     *
+     * @defaultValue 'flat'
+     */
+    variant?: ButtonProps['variant'];
+    /**
+     * Visual variant while the toggle is pressed.
+     *
+     * @defaultValue When omitted, `variant` is used in both states.
+     */
+    pressedVariant?: ButtonProps['variant'];
+};
+export declare const ToggleTextButton: React.FC<ToggleTextButtonProps>;

package/dist/components/toggle-text-button/toggle-text-button.js

@@ -0,0 +1,24 @@
+import { Button } from "../button/button.js";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { Toggle } from "@base-ui/react/toggle";
+//#region src/components/toggle-text-button/toggle-text-button.tsx
+var ToggleTextButton = ({ variant = "flat", pressedVariant, pressed, defaultPressed, onPressedChange, value, disabled, ref, ...otherProps }) => /* @__PURE__ */ jsx(Toggle, {
+	ref,
+	value,
+	pressed,
+	defaultPressed,
+	onPressedChange,
+	disabled,
+	render: (toggleProps, state) => {
+		const { "aria-label": _toggleAriaLabel, "aria-labelledby": _toggleAriaLabelledBy, ...restToggleProps } = toggleProps;
+		return /* @__PURE__ */ jsx(Button, {
+			...mergeProps(restToggleProps, otherProps),
+			disabled,
+			variant: state.pressed ? pressedVariant ?? variant : variant
+		});
+	}
+});
+//#endregion
+export { ToggleTextButton };

package/dist/index.js

@@ -70,7 +70,8 @@ import { Title } from "./components/title/title.js";
 import { Toast } from "./components/toast/toast.js";
 import { ToggleButton } from "./components/toggle-button/toggle-button.js";
 import { ToggleGroup } from "./components/toggle-group/toggle-group.js";
+import { ToggleTextButton } from "./components/toggle-text-button/toggle-text-button.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, 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 };
+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, ToggleTextButton, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps, useBreakpoints, useDirection };

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

@@ -9,7 +9,8 @@
     <item>Actions that need visible text — use Button</item>
     <item>Missing both aria-label and aria-labelledby</item>
     <item>Navigation or non-button semantics — use IconButtonLink</item>
-    <item>Temporally swap icons after user interactions with temporal pressed state, like copy feedback. Use ToggleButton instead</item>
+    <item>Temporally swap icons after user interactions with temporal pressed state, like copy feedback. Use ToggleButton (icon-only) or ToggleTextButton (labeled)</item>
+
   </when_not_to_use>
   <prop name="icon" kind="react">
     <description>Icon rendered as the sole visible control content. Omit glyph `size` / width / height — host CSS sizes SVG via `--vui-button-icon-size`.</description>

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

@@ -10,7 +10,8 @@
   <do>Icon-only navigation — use IconButtonLink (framework Link via `render`)</do>
   <dont>Passing `children`, `addon`, or `addonPosition` — not part of the public API; use `icon`</dont>
   <dont>Using icon-only Button instead of IconButton</dont>
-  <dont>Using IconButton for persistent or temporal pressed state — use ToggleButton</dont>
+  <dont>Using IconButton for persistent or temporal pressed state — use ToggleButton (icon-only) or ToggleTextButton (labeled)</dont>
+
   <dont>Using IconButton with `render={&lt;a /&gt;}` for links — use IconButtonLink</dont>
   <dont>Omitting both `aria-label` and `aria-labelledby`</dont>
   <dont>Passing `size={16}` / `size=&quot;1rem&quot;` (or width/height) on the `icon` glyph — IconButton CSS sizes SVG descendants</dont>

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

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <meta id="prose" title="Prose" category="typography" shared_contract="prose">
-  <summary>Text-wall grouping region (articles, docs, privacy) with heading-aware em rhythm; reading column via parent Stack `maxWidth` sized for body Text `size`.</summary>
+  <summary>Text-wall grouping region (articles, docs, privacy) with heading-aware em rhythm, region `wrap` (default `pretty`), and reading column via parent Stack `maxWidth` sized for body Text `size`.</summary>
   <exports>
     <export name="Prose" />
   </exports>

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

@@ -36,7 +36,7 @@
   </Prose>
 </Stack>
 ]]></tsx>
-    <notes>Text-wall path: Prose for rhythm + Stack measure sized for body `size` (here `s` → narrower than `m`). Not for short card blurbs — those stay Text/Title props (`maxWidth` / `balanced`).</notes>
+    <notes>Text-wall path: Prose for rhythm + Stack measure sized for body `size` (here `s` → narrower than `m`). Not for short card blurbs — those stay Text/Title props (`maxWidth` / `wrap`).</notes>
   </example>
 
   <example title="Density and region align">

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

@@ -3,12 +3,12 @@
   <when_to_use>
     <item>Text walls — articles, docs, privacy/terms, long editorial — whose direct children are headings and blocks that need heading-aware vertical rhythm</item>
     <item>Article, docs, or changelog regions where Stack `rowGap` would make heading→body and body→body the same</item>
-    <item>Optional `gap` density (`s` / `m` / `l`) and region `align` (Title/Text that omit `align` inherit it)</item>
+    <item>Optional `gap` density (`s` / `m` / `l`), region `align` (Title/Text that omit `align` inherit it), and region `wrap` (default `pretty`; inherits to descendants)</item>
     <item>Reading column via parent Stack `maxWidth` sized for the body Text `size` (smaller → narrower; not one fixed `65ch`–`75ch`); edge-to-edge wall of text is not OK</item>
   </when_to_use>
   <when_not_to_use>
     <item>UI chrome spacing (cards, toolbars, form rows) — use Stack `rowGap` / `columnGap`</item>
-    <item>Short card/hero blurbs “for leading” — use Text/Title `lineHeight` / `maxWidth` / `balanced`</item>
+    <item>Short card/hero blurbs “for leading” — use Text/Title `lineHeight` / `maxWidth` / `wrap` instead</item>
     <item>Restyling type, lists, links, or tables — stay on Title / Text / consumer CSS</item>
     <item>Markdown parse or sanitize — Prose only spaces matching direct children</item>
   </when_not_to_use>
@@ -18,6 +18,9 @@
   <prop name="gap" kind="react">
     <description>Em density for heading-aware vertical rhythm (`s` &lt; `m` &lt; `l`).</description>
   </prop>
+  <prop name="wrap" kind="react">
+    <description>Controls CSS `text-wrap` on the Prose root (inherits to descendants unless a child overrides). Default `pretty` for orphan-aware article walls. Prefer `balance` only on short multi-line blocks that need even line lengths. Single-line metrics stay on child Text/Title `whiteSpace`.</description>
+  </prop>
   <prop name="ref" kind="react">
     <description>Ref forwarded to the rendered prose root element.</description>
   </prop>
@@ -36,4 +39,7 @@
   <prop name="gap-heading-start" kind="css">
     <description>Gap after a heading onto the next sibling (`--vui-prose-gap-heading-start`). Default `1.3em` (`l`).</description>
   </prop>
+  <prop name="wrap" kind="css">
+    <description>Text-wrap on the Prose root (`--vui-prose-wrap`; inherits). Prefer the `wrap` React prop; default `pretty`.</description>
+  </prop>
 </props>