@viraui/react 2026.7.0 → 2026.8.0

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

@@ -1,14 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <patterns surface="title">
   <!-- Sources: viraui-app + design-kitchen preview-grid — cleaned (no handlers, no i18n). -->
+  <!-- Type measure: prefer maxWidth in `ch` (not rem) — scaled to size for ~10–12 words/line. -->
 
-  <example title="Auth hero heading">
+  <example title="Auth hero heading (readable measure)">
     <tsx><![CDATA[
-<Title size="1" render={<h1 />} maxWidth="32rem" lineHeight="s">
+<Title size="1" render={<h1 />} maxWidth="36ch" lineHeight="s" balanced>
   Ship real UI at the speed of thought.
 </Title>
 ]]></tsx>
-    <notes>From `auth/login-view`. Pair `size` with `render={<h1 />}` — visual preset and heading semantics stay intentional. (Live app nests Typewriter inside; see typewriter patterns.)</notes>
+    <notes>From `auth/login-view`. Pair `size` with `render={<h1 />}`; cap measure in `ch`; `lineHeight="s"` + `balanced` on wrapping display. Prefer `ch` over rem. (Live app nests Typewriter inside; see typewriter patterns.)</notes>
   </example>
 
   <example title="Card section heading">
@@ -17,21 +18,21 @@
   <Title size="6" render={<h2 />}>
     Preferences
   </Title>
-  <Text size="s" maxWidth="18rem" tone="muted">
+  <Text size="s" maxWidth="45ch" tone="muted" balanced>
     Manage your account settings and notifications.
   </Text>
 </Stack>
 ]]></tsx>
-    <notes>From preview-grid `preferences` (+ payout-threshold, notifications, …). Dense card titles use `size="6"` + `h2`.</notes>
+    <notes>From preview-grid `preferences` (+ payout-threshold, notifications, …). Dense card titles use `size="6"` + `h2`; blurb keeps `ch` measure + `balanced`.</notes>
   </example>
 
   <example title="Empty-state heading">
     <tsx><![CDATA[
-<Title align="center" size="5" render={<h3 />}>
+<Title align="center" size="5" render={<h3 />} balanced>
   No Team Members
 </Title>
 ]]></tsx>
-    <notes>From preview-grid `empty-team`. Centered mid-size heading; pair with muted Text below.</notes>
+    <notes>From preview-grid `empty-team`. Centered mid-size heading; prefer `balanced` when the title wraps; pair with muted Text below.</notes>
   </example>
 
   <example title="Display metric">
@@ -45,7 +46,7 @@
   </Text>
 </Stack>
 ]]></tsx>
-    <notes>From preview-grid `daily-activity-goal`. `size="display"` for hero numerals; `whiteSpace="nowrap"` keeps metric on one line.</notes>
+    <notes>From preview-grid `daily-activity-goal`. `size="display"` for hero numerals; `whiteSpace="nowrap"` keeps metric on one line — skip `balanced`.</notes>
   </example>
 
   <example title="Balance display">
@@ -68,11 +69,11 @@
   <Title size="4" render={<h3 />}>
     Colors
   </Title>
-  <Text size="s" tone="muted">
+  <Text size="s" tone="muted" maxWidth="48ch" balanced>
     Preview of theme voice, contrast, and color rhythm across accents.
   </Text>
 </Stack>
 ]]></tsx>
-    <notes>From design-kitchen `theme-preview` (+ `base-theme-selector` label scale). Mid panel titles use `size="4"` + `h3`.</notes>
+    <notes>From design-kitchen `theme-preview` (+ `base-theme-selector` label scale). Mid panel titles use `size="4"` + `h3`; supporting Text keeps `ch` measure.</notes>
   </example>
 </patterns>

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

@@ -4,19 +4,20 @@
     <item>Headings and display text with title presets</item>
     <item>Semantic heading tags chosen explicitly through render</item>
     <item>Size and render paired together for most heading use cases</item>
+    <item>Readable wrapping titles: `maxWidth` (~10–12 words/line, **scaled to `size`** — smaller → narrower), `lineHeight` (`s` on large wrapping / inside Prose), and `balanced` on short multi-line heads</item>
     <item>Letter-spacing via `tracking` or text-transform via `transform` — prefer props over CSS on the Title root</item>
     <item>Fluid clamp sizing across title appearance presets (theme `--effect-fluid-typography` or per-instance `fluid`; off → fixed at --font-scale-display / h-* for that size)</item>
   </when_to_use>
   <when_not_to_use>
     <item>Body copy — use Text</item>
     <item>Body or mono family typography</item>
-    <item>Inventing CSS `letter-spacing` / `text-transform` / `width: 100%` when `tracking` / `transform` / parent Stack `fullWidth` cover the need</item>
+    <item>Inventing CSS `letter-spacing` / `text-transform` / `line-height` / `max-width` / `text-wrap: balance` / `width: 100%` when `tracking` / `transform` / `lineHeight` / `maxWidth` / `balanced` / parent Stack `fullWidth` cover the need</item>
   </when_not_to_use>
   <prop name="align" kind="react">
     <description>Aligns text using logical alignment values. Omit so `text-align` inherits from the parent.</description>
   </prop>
   <prop name="balanced" kind="react">
-    <description>Enables balanced wrapping for block-like titles.</description>
+    <description>Enables balanced wrapping for block-like titles. Prefer on short wrapping heads (hero, empty state, section); omit for single-line / `whiteSpace=&quot;nowrap&quot;` metrics.</description>
   </prop>
   <prop name="color" kind="react">
     <description>Applies a literal color escape hatch.</description>
@@ -31,10 +32,10 @@
     <description>Sets inline padding using one token for both sides or a `[start, end]` tuple (`0` allowed). Prefer the tuple for one-sided inset — never `style`/`paddingInline*` CSS when this prop covers it.</description>
   </prop>
   <prop name="lineHeight" kind="react">
-    <description>Controls line height through foundation leading tokens.</description>
+    <description>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`.</description>
   </prop>
   <prop name="maxWidth" kind="react">
-    <description>Constrains the maximum inline size of the rendered text block.</description>
+    <description>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 Title size. Shared columns may use parent Stack `maxWidth` instead.</description>
   </prop>
   <prop name="opticalSize" kind="react">
     <description>Overrides the optical size (`opsz`) axis on variable fonts; static fonts keep `font-optical-sizing: auto`.</description>

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

@@ -1,15 +1,20 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <usage surface="title">
   <do>Headings and display type — pair `size` (visual preset) with `render={&lt;h1 /&gt;}`…`h6` for outline semantics (default root is `span`)</do>
+  <do>Readable measure on wrapping titles: aim ~10–12 words per line — `maxWidth` / Stack `maxWidth` **scales with `size`** (smaller → narrower; larger → wider); prefer **`ch`** (not `rem`) in patterns/examples; large wrapping presets often `lineHeight=&quot;s&quot;`</do>
+  <do>Prefer `balanced` on short wrapping titles (hero, empty state, section head); omit when single-line / `whiteSpace=&quot;nowrap&quot;` metrics</do>
+  <do>Omit `align` so the heading inherits parent `text-align`; pass `align` only to override</do>
+  <do>Title inside Prose → `lineHeight=&quot;s&quot;`; long-form rhythm stays on Prose — not Stack `rowGap`</do>
   <do>Card / panel header: Stack `rowGap=&quot;xs&quot;` + Title + muted Text blurb — Surface for card chrome</do>
   <do>Auth / hero cycle: nest Typewriter inside Title (`preserveSpace`, caret props) so display preset + heading tag stay on the parent</do>
   <do>Loading title copy: nest Shimmer inside Title — parent region owns busy semantics</do>
   <do>Truncation: ClampText `render={&lt;Title size=… render={&lt;h* /&gt;} /&gt;}` — FitText wraps Title when short headlines must fill a constrained width</do>
   <do>Fluid clamp across presets (`fluid` / theme `--effect-fluid-typography`); pass `fluid={false}` inside chrome or dense UI</do>
-  <do>Letter-spacing via `tracking`; text-transform via `transform`; width via `maxWidth` or parent Stack `fullWidth`</do>
-  <do>Omit `align` so the heading inherits parent `text-align`; pass `align` only to override</do>
+  <do>Letter-spacing via `tracking`; text-transform via `transform`; width via `maxWidth` or parent Stack `fullWidth`/`maxWidth`</do>
   <do>Title-as-prose-link (`render={&lt;a /&gt;}`) keeps preflight link chrome — omit `data-no-link-style`</do>
   <dont>Assuming `size` changes the HTML tag — choose `render` explicitly</dont>
   <dont>Using Title for long body paragraphs — use Text</dont>
-  <dont>Inventing CSS `letter-spacing` / `text-transform` / `width: 100%` / `paddingBlock*` / `paddingInline*` when props / Stack / `hPadding`/`vPadding` tuples cover it</dont>
+  <dont>Inventing CSS `letter-spacing` / `text-transform` / `line-height` / `max-width` / `text-wrap: balance` / `width: 100%` / `paddingBlock*` / `paddingInline*` when props / Stack / `hPadding`/`vPadding` tuples cover it</dont>
+  <dont>Full-bleed wrapping headlines across a wide shell when a capped measure + `balanced` fits</dont>
+  <dont>One fixed wide measure for every Title `size` — smaller presets need a narrower column for ~10–12 words/line</dont>
 </usage>

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

@@ -22,8 +22,8 @@
     render={
       <ToggleButton
         aria-label="Lock in shuffle"
-        restingIcon={<LockOpen2 aria-hidden size="1rem" />}
-        pressedIcon={<Lock aria-hidden size="1rem" color="var(--global-primary)" />}
+        restingIcon={<LockOpen2 aria-hidden />}
+        pressedIcon={<Lock aria-hidden color="var(--global-primary)" />}
         variant="flat"
         pressedVariant="secondary"
       />
@@ -43,7 +43,7 @@
       <ToggleButton
         aria-label="Sync light and dark"
         size="s"
-        restingIcon={<DarkLight aria-hidden size="1rem" />}
+        restingIcon={<DarkLight aria-hidden />}
         variant="flat"
         pressedVariant="primary"
       />
@@ -60,8 +60,8 @@
 <Badge show color="yellow">
   <ToggleButton
     aria-label="Mute notifications"
-    restingIcon={<BellSlash aria-hidden size={16} />}
-    pressedIcon={<BellOn aria-hidden size={16} />}
+    restingIcon={<BellSlash aria-hidden />}
+    pressedIcon={<BellOn aria-hidden />}
     size="s"
     interpolateIcons
     variant="secondary"
@@ -77,7 +77,7 @@
   <ToggleButton
     value="light"
     aria-label="Light"
-    restingIcon={<Sun aria-hidden size="1rem" />}
+    restingIcon={<Sun aria-hidden />}
     variant="flat"
     size="s"
     pressedVariant="secondary"
@@ -85,7 +85,7 @@
   <ToggleButton
     value="dark"
     aria-label="Dark"
-    restingIcon={<MoonStars aria-hidden size="1rem" />}
+    restingIcon={<MoonStars aria-hidden />}
     variant="flat"
     size="s"
     pressedVariant="secondary"
@@ -93,7 +93,7 @@
   <ToggleButton
     value="system"
     aria-label="System"
-    restingIcon={<DarkLight aria-hidden size="1rem" />}
+    restingIcon={<DarkLight aria-hidden />}
     variant="flat"
     size="s"
     pressedVariant="secondary"

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

@@ -20,13 +20,13 @@
     <description>Applies a fully rounded pill shape to the button.</description>
   </prop>
   <prop name="pressedIcon" kind="react">
-    <description>Icon shown while the toggle is pressed.</description>
+    <description>Icon shown while the toggle is pressed. Omit glyph `size` / width / height — host CSS sizes SVG via `--vui-button-icon-size`.</description>
   </prop>
   <prop name="pressedVariant" kind="react">
     <description>Visual variant while the toggle is pressed.</description>
   </prop>
   <prop name="restingIcon" kind="react">
-    <description>Icon shown while the toggle is not pressed.</description>
+    <description>Icon shown while the toggle is not pressed. Omit glyph `size` / width / height — host CSS sizes SVG via `--vui-button-icon-size`.</description>
   </prop>
   <prop name="size" kind="react">
     <description>Controls the visual button size.</description>
@@ -44,7 +44,7 @@
     <description>Button block size; size prop presets via data attributes.</description>
   </prop>
   <prop name="icon-size" kind="css">
-    <description>Addon icon size inside the button.</description>
+    <description>Addon icon size inside the button (`--vui-button-icon-size`). Prefer this over setting `size` on the glyph ReactNode.</description>
   </prop>
   <prop name="padding-block" kind="css">
     <description>Vertical padding inside the button.</description>

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

@@ -3,12 +3,14 @@
   <do>Toolbar pin, favorite, mute, or lock toggles identified only by icon</do>
   <do>Compact on/off controls that share IconButton size, variant, and loading model</do>
   <do>Two-state actions where pressed state should swap the visible glyph via `restingIcon` / `pressedIcon`</do>
+  <do>Omit `size` / width / height on `restingIcon` / `pressedIcon` glyphs — host CSS sizes SVG via `--vui-button-icon-size`; set glyph size only to expressly override</do>
   <do>Temporal pressed feedback (e.g. copy) with optional `interpolateIcons` crossfade</do>
   <do>Segmented toolbars: nest ToggleButtons with `value` inside ToggleGroup; label each control and the group</do>
   <do>Optional chrome: wrap with Tooltip.Trigger / Badge — keep the accessible name on the ToggleButton</do>
   <dont>Using IconButton for persistent or temporal pressed toolbar state</dont>
   <dont>Using Switch for compact icon-only toolbar toggles</dont>
   <dont>Passing `icon` or `render` — ToggleButton owns icon swap and Toggle render wiring; use `restingIcon` / `pressedIcon`</dont>
+  <dont>Passing `size={16}` / `size=&quot;1rem&quot;` (or width/height) on every icon slot glyph — ToggleButton CSS sizes SVG descendants</dont>
   <dont>Omitting `value` on ToggleButton children inside a ToggleGroup</dont>
   <dont>Omitting both `aria-label` and `aria-labelledby`</dont>
 </usage>

package/dist/specs/components/toggle-group/patterns.xml

@@ -9,7 +9,7 @@
     <ToggleButton
       value="light"
       aria-label="Light"
-      restingIcon={<Sun aria-hidden size="1rem" />}
+      restingIcon={<Sun aria-hidden />}
       variant="flat"
       size="s"
       pressedVariant="secondary"
@@ -17,7 +17,7 @@
     <ToggleButton
       value="dark"
       aria-label="Dark"
-      restingIcon={<MoonStars aria-hidden size="1rem" />}
+      restingIcon={<MoonStars aria-hidden />}
       variant="flat"
       size="s"
       pressedVariant="secondary"
@@ -25,7 +25,7 @@
     <ToggleButton
       value="system"
       aria-label="System"
-      restingIcon={<DarkLight aria-hidden size="1rem" />}
+      restingIcon={<DarkLight aria-hidden />}
       variant="flat"
       size="s"
       pressedVariant="secondary"

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

@@ -18,9 +18,9 @@
     render={
       <Surface color={1} border="all" radius="m" vPadding="2xs" hPadding="2xs" aria-label="100%">
         <Stack direction="row" vAlign="center">
-          <IconButton aria-label="Zoom out" icon={<Minus aria-hidden size="1rem" />} variant="flat" />
-          <IconButton aria-label="Reset zoom" icon={<FocusCenter aria-hidden size="1rem" />} variant="flat" />
-          <IconButton aria-label="Zoom in" icon={<Plus aria-hidden size="1rem" />} variant="flat" />
+          <IconButton aria-label="Zoom out" icon={<Minus aria-hidden />} variant="flat" />
+          <IconButton aria-label="Reset zoom" icon={<FocusCenter aria-hidden />} variant="flat" />
+          <IconButton aria-label="Zoom in" icon={<Plus aria-hidden />} variant="flat" />
         </Stack>
       </Surface>
     }
@@ -40,8 +40,8 @@
         aria-label="Shuffle lock"
         pressed={false}
         variant="flat"
-        restingIcon={<LockOpen2 aria-hidden size="1rem" />}
-        pressedIcon={<Lock aria-hidden size="1rem" />}
+        restingIcon={<LockOpen2 aria-hidden />}
+        pressedIcon={<Lock aria-hidden />}
       />
     }
   />
@@ -58,7 +58,7 @@
     delay={50}
     render={
       <span aria-label="Supported by: Chrome, Edge, Firefox">
-        <TriangleWarning aria-hidden size="1rem" color="var(--highlight-yellow)" />
+        <TriangleWarning aria-hidden color="var(--highlight-yellow)" />
       </span>
     }
   />
@@ -103,7 +103,7 @@ const toolbarHandle = Tooltip.createHandle<string>();
   closeDelay={200}
   handle={toolbarHandle}
   payload="Duplicate"
-  render={<Duplicate size={22} aria-label="Duplicate" />}
+  render={<Duplicate aria-label="Duplicate" />}
 />
 {/* more Icon triggers with the same handle… */}
 

package/dist/specs/foundation/attributes.xml

@@ -154,4 +154,26 @@
       <gotcha>--vibrancy-blur</gotcha>
       <gotcha>--vibrancy-brightness</gotcha>
   </attr>
+  <attr name="data-layout-fixed">
+    <presence>boolean attribute on table elements</presence>
+    <effect>Sets table-layout: fixed on the table. Preflight already collapses borders, full inline-size, cell padding, and thead hairline — this only switches layout algorithm.</effect>
+    <values>
+      <value>(boolean presence)</value>
+    </values>
+    <when>Column widths must follow the first row / explicit widths instead of content</when>
+    <when_not>When auto table layout is already correct</when_not>
+    <when_not>Hand-rolling table-layout: fixed in app CSS instead of this attr</when_not>
+    <gotcha>Baseline table chrome lives in modules.xml id=baseline — do not reinvent cell padding or collapse.</gotcha>
+  </attr>
+  <attr name="data-table-separators">
+    <presence>boolean attribute on table elements</presence>
+    <effect>Draws a 1px base-2 hairline between consecutive body rows (tr + tr). Does not paint under thead (thead already has its own inset rule).</effect>
+    <values>
+      <value>(boolean presence)</value>
+    </values>
+    <when>Dense data tables that need row separators without custom border CSS</when>
+    <when_not>When thead/body styling without body-row lines is enough</when_not>
+    <when_not>Hand-rolling tr + tr border-top / row divider CSS instead of this attr</when_not>
+    <gotcha>Separators are body-row only; thead uses a separate inset box-shadow from baseline.</gotcha>
+  </attr>
 </attributes>

package/dist/specs/foundation/bootstrap.xml

@@ -39,7 +39,7 @@
     <tree>Toast.Portal &gt; Toast.Viewport &gt; Toast.Banner per toast</tree>
     <next_js>Keep CSS side-effect imports in the Server Component root layout. Put the provider tree in a Client Component that wraps children.</next_js>
     <astro>React context does not cross Astro islands. Providers must live in the same island as the Vira overlays that consume them.</astro>
-    <rtl>For RTL menus and popups, wrap with Base UI DirectionProvider direction="rtl" and set dir="rtl" on a portal ancestor (usually html).</rtl>
+    <rtl>For RTL menus and popups, wrap with DirectionProvider direction="rtl" from @viraui/react (transparent Base UI re-export) and set dir="rtl" on a portal ancestor (usually html). Opt-in — not part of the Dialog/Tooltip/Toast overlay shell.</rtl>
   </root_providers>
   <next_js_app_router>
     <rule>In Next.js App Router apps, import theme CSS, font CSS, and @viraui/react/preflight.css as JavaScript side-effect imports in root app/layout.tsx; never bootstrap them with CSS @import in globals.css.</rule>

package/dist/specs/foundation/modules.xml

@@ -19,10 +19,14 @@
   </agent_rules>
 
   <module id="baseline">
-    <purpose>Root document baseline after theme load: rem root from --font-root-size, color/background from --global-*, polarity --is-light-mode, scrollbar and focus-visible ring, reduced-motion, corner-shape gate.</purpose>
-    <provides>--is-light-mode; focus ring via --outline*; scrollbar via --scrollbar-*; corner-shape application</provides>
+    <purpose>Root document baseline after theme load: rem root from --font-root-size, color/background from --global-*, polarity --is-light-mode, scrollbar and focus-visible ring, reduced-motion, corner-shape gate; plus universal margin/box-sizing reset, body font baseline, media/form/table element resets, and nested-list font-size fix.</purpose>
+    <provides>--is-light-mode; focus ring via --outline*; scrollbar via --scrollbar-*; corner-shape application; margin/box-sizing reset; body font family/size/optical sizing; img/svg defaults; button/fieldset unstyled baseline; table collapse/spacing/cell padding/thead rule; data-layout-fixed; data-table-separators; nested ol/ul font-size: initial</provides>
     <use>Theme tokens + data-mode. Query polarity with @container root style(--is-light-mode: black|white). Details: toggles.xml.</use>
+    <use>Bare img is block + full inline-size (capped); svg without fill inherits currentcolor. button and fieldset ship unstyled (Vira controls re-skin). table is full-width collapsed with cell padding and thead hairline; opt into fixed layout or body-row separators via attributes.xml.</use>
+    <use>Nested lists (ol ul / ul ol) reset font-size so inherited shrink from parent list does not cascade — list chrome itself is typography module.</use>
     <do_not>Replace preflight reset with a second framework reboot. Prefer omitting third-party preflight/reset (setup skill coexistence).</do_not>
+    <do_not>Hand-roll table-layout: fixed or body-row hairlines when data-layout-fixed / data-table-separators cover it.</do_not>
+    <do_not>Re-apply universal margin:0 / box-sizing:border-box or button/fieldset appearance resets that preflight already owns.</do_not>
   </module>
   <module id="font-scale">
     <purpose>Derives --font-scale-* from theme --font-heading-typescale / --font-body-typescale (pow + round). body-m = 1rem; smaller body steps floored; larger body and display from continuous powers.</purpose>
@@ -49,10 +53,15 @@
     <do_not>Assign --vira-flex-grow / --vira-flex-shrink directly in app CSS — use the data-* attrs.</do_not>
   </module>
   <module id="typography">
-    <purpose>Semantic HTML element typography defaults and link chrome opt-out.</purpose>
-    <provides>element type defaults; data-no-link-style</provides>
-    <use>Every a:any-link gets preflight link chrome (interactive color + animated underline) unless data-no-link-style is set. Prose links — including Text/Title render as a — keep it. Chrome components set the attr (attributes.xml).</use>
+    <purpose>Semantic HTML element typography defaults and link chrome opt-out. Preflight already styles bare prose, lists, and inline chrome — agents must not reinvent these as app CSS by default.</purpose>
+    <provides>element type defaults for p, small, strong/b, s, address, label/legend, a:any-link, code, kbd, abbr, mark, del, ins, ul, ol, dt, dd; data-no-link-style</provides>
+    <use>Prose: p uses body-m size + 1.5 line-height; small scales down; strong/b use wght 700; s is strikethrough + disabled foreground; address is normal style; label/legend inherit font-size.</use>
+    <use>Inline chrome: every a:any-link gets interactive color + animated underline unless data-no-link-style is set (attributes.xml). Prose links — including Text/Title render as a — keep it. Chrome components set the attr. Inline code (not inside pre) and kbd get contrast pill chrome; pre code drops the box-shadow. abbr uses dashed primary underline. mark / del / ins get highlight-tinted chips (yellow / red / green).</use>
+    <use>Lists: ul gets inline padding + muted ::marker; ol gets muted tabular-nums ::marker. Prefer bare ul/ol/li (or Stack render as list) — do not invent list-style / marker / list padding CSS. Nested-list font-size reset is baseline module.</use>
+    <use>Definitions: dt is semibold; dd has zero margin/padding.</use>
     <do_not>Rely on class presence to suppress link styles — use data-no-link-style only.</do_not>
+    <do_not>Reinvent list markers, list-style-type, or ul/ol padding when preflight already owns them — unless the consumer expressly asks for an override.</do_not>
+    <do_not>Reinvent link underline, inline code/kbd pills, or mark/del/ins highlight chips as app CSS by default.</do_not>
   </module>
   <module id="vibrancy">
     <purpose>Theme-gated backdrop-filter glass on opt-in hosts.</purpose>
@@ -110,10 +119,10 @@
     <use>Override on html/root when product needs a custom scrollbar tint.</use>
   </custom_property>
   <custom_property name="--scrollbar-track" surface="public">
-    <purpose>Scrollbar track color for preflight scrollbar-color.</purpose>
+    <purpose>Scrollbar track color token on html. Preflight paints tracks as transparent (scrollbar-color + webkit track) so empty-track flash stays invisible; override this only if a product needs a visible track.</purpose>
     <default>transparent</default>
     <set_by>Preflight on html; optional root override</set_by>
-    <use>Optional root override.</use>
+    <use>Optional root override when a visible track is required.</use>
   </custom_property>
   <custom_property name="--outline" surface="public">
     <purpose>Focus-visible outline shorthand.</purpose>

package/dist/specs/foundation/toggles.xml

@@ -20,7 +20,7 @@
     <when>Brand default is initial (off). When on, paints a fixed body::after foil overlay gated by @container root not style(--effect-holofoil: initial); foil blend adjusts under @container root style(--is-light-mode: white). Do not invent alternate foil hooks.</when>
   </toggle>
   <toggle name="--effect-fluid-typography">
-    <when>Empty/unset enables Text/Title fluid clamp sizing (prev scale step→step via viewport progress) when the instance `fluid` prop is true. Text defaults `fluid` false (locked at --font-scale-body-*); Title defaults true. Set theme to initial to lock each size at its theme scale token (--font-scale-body-* / --font-scale-display / --font-scale-h*). Per-instance: Text/Title `fluid={false}` → data-*-fluid=false locks that node to its size max token; Text `fluid` opts in. Module CSS also gates with @container root style(--effect-fluid-typography: initial). Text size xs stays fixed (min=max). At full fluid progress, on and off resolve to the same token.</when>
+    <when>Empty/unset enables Text/Title fluid clamp sizing (prev scale step→step via viewport progress) when the instance `fluid` prop is true. Text defaults `fluid` false (locked at --font-scale-body-*); Title defaults true. Set theme to initial to lock each size at its theme scale token (--font-scale-body-* / --font-scale-display / --font-scale-h*). Per-instance: Text/Title `fluid={false}` → data-*-fluid=false locks that node to its size max token; Text `fluid` opts in. Module CSS also gates with @container root style(--effect-fluid-typography: initial). Text size s and xs stay fixed (min=max); fluid clamp starts at m. At full fluid progress, on and off resolve to the same token.</when>
   </toggle>
   <toggle name="--corner-shape">
     <when>Theme corner shape token; preflight may set internal --__corner-shape beside full radius. Not a consumer data-*.</when>

package/dist/specs/index.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<index package="@viraui/react" version="2026.7.0" generated="2026-10-08T07:14:12.516Z">
+<index package="@viraui/react" version="2026.8.0" generated="2026-10-14T16:23:26.846Z">
   <categories>
     <category id="layout" />
     <category id="action" />
@@ -151,6 +151,16 @@
       <unit kind="patterns" href="components/dialog/patterns.xml" />
     </units>
   </entry>
+  <entry id="direction-provider" category="layout" title="DirectionProvider">
+    <summary>Transparent re-export of Base UI DirectionProvider and useDirection. Enables RTL behavior for Base UI–backed components; does not set HTML dir or CSS direction — pair with document dir=rtl on a porta…</summary>
+    <units>
+      <unit kind="meta" href="components/direction-provider/meta.xml" />
+      <unit kind="a11y" href="components/direction-provider/a11y.xml" />
+      <unit kind="props" href="components/direction-provider/props.xml" />
+      <unit kind="usage" href="components/direction-provider/usage.xml" />
+      <unit kind="patterns" href="components/direction-provider/patterns.xml" />
+    </units>
+  </entry>
   <entry id="disclosure" category="layout" title="Disclosure">
     <summary>Single-section expand/collapse wrapping Base UI Collapsible. Default Trigger is Surface with render → Collapsible Trigger; Panel is a height motion shell with no default content padding. Use Accordio…</summary>
     <units>
@@ -302,7 +312,7 @@
     </units>
   </entry>
   <entry id="prose" category="typography" title="Prose">
-    <summary>Grouping region that applies heading-aware em rhythm to direct document blocks.</summary>
+    <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>
     <units>
       <unit kind="meta" href="components/prose/meta.xml" />
       <unit kind="a11y" href="components/prose/a11y.xml" />
@@ -432,7 +442,7 @@
     </units>
   </entry>
   <entry id="text" category="typography" title="Text">
-    <summary>Theme-aware body-copy primitive with tone, family, and responsive body sizing.</summary>
+    <summary>Theme-aware body-copy primitive with tone, family, sizing, and readable-measure props (`maxWidth` / `lineHeight` / `balanced`).</summary>
     <units>
       <unit kind="meta" href="components/text/meta.xml" />
       <unit kind="a11y" href="components/text/a11y.xml" />
@@ -462,7 +472,7 @@
     </units>
   </entry>
   <entry id="title" category="typography" title="Title">
-    <summary>Theme-aware heading and display typography primitive.</summary>
+    <summary>Theme-aware heading and display typography with readable-measure props (`maxWidth` / `lineHeight` / `balanced`).</summary>
     <units>
       <unit kind="meta" href="components/title/meta.xml" />
       <unit kind="a11y" href="components/title/a11y.xml" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.7.0",
+  "version": "2026.8.0",
   "private": false,
   "files": [
     "dist"
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@base-ui/react": ">=1.8.0",
-    "@viraui/foundation": "2026.7.0",
+    "@viraui/foundation": "2026.8.0",
     "@viraui/icons": "2026.1.0",
     "@viraui/postcss-config": "2026.0.0",
     "@viraui/tsconfig": "2026.0.0",

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

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

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

@@ -1,134 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-//#region src/components/spinner/variants/bars.tsx
-/** Sanitize React useId for SVG id / begin references (strip `:`). */
-var smilId = (reactId, name) => `${reactId.replaceAll(":", "")}${name}`;
-var BarsGlyph = () => {
-	const reactId = useId();
-	const ccmt = smilId(reactId, "ccmt");
-	const izzb = smilId(reactId, "izzb");
-	const pulse = {
-		y: {
-			values: "6;1;6",
-			keySplines: ".36,.61,.3,.98;.36,.61,.3,.98"
-		},
-		height: {
-			values: "12;22;12",
-			keySplines: ".36,.61,.3,.98;.36,.61,.3,.98"
-		}
-	};
-	return /* @__PURE__ */ jsxs("g", {
-		fill: "currentColor",
-		children: [
-			/* @__PURE__ */ jsxs("rect", {
-				x: "1",
-				y: "6",
-				width: "2.8",
-				height: "12",
-				children: [/* @__PURE__ */ jsx("animate", {
-					id: ccmt,
-					begin: `0;${izzb}.end-0.1s`,
-					attributeName: "y",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.y.values,
-					keySplines: pulse.y.keySplines
-				}), /* @__PURE__ */ jsx("animate", {
-					begin: `0;${izzb}.end-0.1s`,
-					attributeName: "height",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.height.values,
-					keySplines: pulse.height.keySplines
-				})]
-			}),
-			/* @__PURE__ */ jsxs("rect", {
-				x: "5.8",
-				y: "6",
-				width: "2.8",
-				height: "12",
-				children: [/* @__PURE__ */ jsx("animate", {
-					begin: `${ccmt}.begin+0.1s`,
-					attributeName: "y",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.y.values,
-					keySplines: pulse.y.keySplines
-				}), /* @__PURE__ */ jsx("animate", {
-					begin: `${ccmt}.begin+0.1s`,
-					attributeName: "height",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.height.values,
-					keySplines: pulse.height.keySplines
-				})]
-			}),
-			/* @__PURE__ */ jsxs("rect", {
-				x: "10.6",
-				y: "6",
-				width: "2.8",
-				height: "12",
-				children: [/* @__PURE__ */ jsx("animate", {
-					begin: `${ccmt}.begin+0.2s`,
-					attributeName: "y",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.y.values,
-					keySplines: pulse.y.keySplines
-				}), /* @__PURE__ */ jsx("animate", {
-					begin: `${ccmt}.begin+0.2s`,
-					attributeName: "height",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.height.values,
-					keySplines: pulse.height.keySplines
-				})]
-			}),
-			/* @__PURE__ */ jsxs("rect", {
-				x: "15.4",
-				y: "6",
-				width: "2.8",
-				height: "12",
-				children: [/* @__PURE__ */ jsx("animate", {
-					begin: `${ccmt}.begin+0.3s`,
-					attributeName: "y",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.y.values,
-					keySplines: pulse.y.keySplines
-				}), /* @__PURE__ */ jsx("animate", {
-					begin: `${ccmt}.begin+0.3s`,
-					attributeName: "height",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.height.values,
-					keySplines: pulse.height.keySplines
-				})]
-			}),
-			/* @__PURE__ */ jsxs("rect", {
-				x: "20.2",
-				y: "6",
-				width: "2.8",
-				height: "12",
-				children: [/* @__PURE__ */ jsx("animate", {
-					id: izzb,
-					begin: `${ccmt}.begin+0.4s`,
-					attributeName: "y",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.y.values,
-					keySplines: pulse.y.keySplines
-				}), /* @__PURE__ */ jsx("animate", {
-					begin: `${ccmt}.begin+0.4s`,
-					attributeName: "height",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.height.values,
-					keySplines: pulse.height.keySplines
-				})]
-			})
-		]
-	});
-};
-//#endregion
-export { BarsGlyph as default };

package/dist/components/spinner/variants/dot-grid.css

@@ -1 +0,0 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__dot-grid-module__spinner-dot-grid-1_X76yC{9.0909090909%{transform:translate(-12px)}18.1818181818%{transform:translate(0)}27.2727272727%{transform:translate(0)}36.3636363636%{transform:translate(12px)}45.4545454545%{transform:translate(12px,12px)}54.5454545455%{transform:translate(12px,12px)}63.6363636364%{transform:translate(12px,12px)}72.7272727273%{transform:translate(12px)}81.8181818182%{transform:translate(0)}90.9090909091%{transform:translate(-12px)}to{transform:translate(0)}}@keyframes viraui__dot-grid-module__spinner-dot-grid-2_ntLgO{9.0909090909%{transform:translate(0)}18.1818181818%{transform:translate(12px)}27.2727272727%{transform:translate(0)}36.3636363636%{transform:translate(12px)}45.4545454545%{transform:translate(12px,12px)}54.5454545455%{transform:translate(12px,12px)}63.6363636364%{transform:translate(12px,12px)}72.7272727273%{transform:translate(12px,12px)}81.8181818182%{transform:translateY(12px)}90.9090909091%{transform:translateY(12px)}to{transform:translate(0)}}@keyframes viraui__dot-grid-module__spinner-dot-grid-3_6XjPw{9.0909090909%{transform:translate(-12px)}18.1818181818%{transform:translate(-12px)}27.2727272727%{transform:translate(0)}36.3636363636%{transform:translate(-12px)}45.4545454545%{transform:translate(-12px)}54.5454545455%{transform:translate(-12px)}63.6363636364%{transform:translate(-12px)}72.7272727273%{transform:translate(-12px)}81.8181818182%{transform:translate(-12px,-12px)}90.9090909091%{transform:translateY(-12px)}to{transform:translate(0)}}@keyframes viraui__dot-grid-module__spinner-dot-grid-4_xy0HO{9.0909090909%{transform:translate(-12px)}18.1818181818%{transform:translate(-12px)}27.2727272727%{transform:translate(-12px,-12px)}36.3636363636%{transform:translateY(-12px)}45.4545454545%{transform:translate(0)}54.5454545455%{transform:translateY(-12px)}63.6363636364%{transform:translateY(-12px)}72.7272727273%{transform:translateY(-12px)}81.8181818182%{transform:translate(-12px,-12px)}90.9090909091%{transform:translate(-12px)}to{transform:translate(0)}}@keyframes viraui__dot-grid-module__spinner-dot-grid-5_lJzYz{9.0909090909%{transform:translate(0)}18.1818181818%{transform:translate(0)}27.2727272727%{transform:translate(0)}36.3636363636%{transform:translate(12px)}45.4545454545%{transform:translate(12px)}54.5454545455%{transform:translate(12px)}63.6363636364%{transform:translate(12px)}72.7272727273%{transform:translate(12px)}81.8181818182%{transform:translate(12px,-12px)}90.9090909091%{transform:translateY(-12px)}to{transform:translate(0)}}@keyframes viraui__dot-grid-module__spinner-dot-grid-6_ZjVjH{9.0909090909%{transform:translate(0)}18.1818181818%{transform:translate(-12px)}27.2727272727%{transform:translate(-12px)}36.3636363636%{transform:translate(0)}45.4545454545%{transform:translate(0)}54.5454545455%{transform:translate(0)}63.6363636364%{transform:translate(0)}72.7272727273%{transform:translateY(12px)}81.8181818182%{transform:translate(-12px,12px)}90.9090909091%{transform:translate(-12px)}to{transform:translate(0)}}@keyframes viraui__dot-grid-module__spinner-dot-grid-7_sEfp9{9.0909090909%{transform:translate(12px)}18.1818181818%{transform:translate(12px)}27.2727272727%{transform:translate(12px)}36.3636363636%{transform:translate(0)}45.4545454545%{transform:translateY(-12px)}54.5454545455%{transform:translate(12px,-12px)}63.6363636364%{transform:translateY(-12px)}72.7272727273%{transform:translateY(-12px)}81.8181818182%{transform:translate(0)}90.9090909091%{transform:translate(12px)}to{transform:translate(0)}}@keyframes viraui__dot-grid-module__spinner-dot-grid-8_L2-uH{9.0909090909%{transform:translate(0)}18.1818181818%{transform:translate(-12px)}27.2727272727%{transform:translate(-12px,-12px)}36.3636363636%{transform:translateY(-12px)}45.4545454545%{transform:translateY(-12px)}54.5454545455%{transform:translateY(-12px)}63.6363636364%{transform:translateY(-12px)}72.7272727273%{transform:translateY(-12px)}81.8181818182%{transform:translate(12px,-12px)}90.9090909091%{transform:translate(12px)}to{transform:translate(0)}}@keyframes viraui__dot-grid-module__spinner-dot-grid-9_CrL1l{9.0909090909%{transform:translate(-12px)}18.1818181818%{transform:translate(-12px)}27.2727272727%{transform:translate(0)}36.3636363636%{transform:translate(-12px)}45.4545454545%{transform:translate(0)}54.5454545455%{transform:translate(0)}63.6363636364%{transform:translate(-12px)}72.7272727273%{transform:translate(-12px)}81.8181818182%{transform:translate(-24px)}90.9090909091%{transform:translate(-12px)}to{transform:translate(0)}}.viraui__dot-grid-module__Glyph_sf2Sf{&>circle{transform-origin:50% 50%}&>circle:first-child{animation:viraui__dot-grid-module__spinner-dot-grid-1_X76yC 4s infinite}&>circle:nth-child(2){animation:viraui__dot-grid-module__spinner-dot-grid-2_ntLgO 4s infinite}&>circle:nth-child(3){animation:viraui__dot-grid-module__spinner-dot-grid-3_6XjPw 4s infinite}&>circle:nth-child(4){animation:viraui__dot-grid-module__spinner-dot-grid-4_xy0HO 4s infinite}&>circle:nth-child(5){animation:viraui__dot-grid-module__spinner-dot-grid-5_lJzYz 4s infinite}&>circle:nth-child(6){animation:viraui__dot-grid-module__spinner-dot-grid-6_ZjVjH 4s infinite}&>circle:nth-child(7){animation:viraui__dot-grid-module__spinner-dot-grid-7_sEfp9 4s infinite}&>circle:nth-child(8){animation:viraui__dot-grid-module__spinner-dot-grid-8_L2-uH 4s infinite}&>circle:nth-child(9){animation:viraui__dot-grid-module__spinner-dot-grid-9_CrL1l 4s infinite}}}

package/dist/components/spinner/variants/dot-grid.d.ts

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