@viraui/react 2026.6.4 → 2026.7.0-next.0

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

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<usage surface="prose">
+  <do>Put headings and blocks as **direct** children — Title/Text with `render={&lt;h* /&gt;}` / `render={&lt;p /&gt;}`, plus native `ul`/`ol`/`blockquote` when needed</do>
+  <do>Pick `gap` `s` / `m` / `l` (default `l`) for density; `align` on Prose to set one `text-align` for the region (omit Title/Text `align` so they inherit)</do>
+  <do>Use `render={&lt;article /&gt;}` (or another landmark) when the region is the document landmark; name it if the landmark needs a name</do>
+  <do>Leave type on Title/Text; Title inside Prose uses `lineHeight=&quot;s&quot;`; override `--vui-prose-gap-*` on the Prose root only when the em triple must change</do>
+  <dont>Using Stack `rowGap` as article rhythm — one gap cannot split heading→body vs body→body</dont>
+  <dont>Expecting default Title/Text `span` hosts to join rhythm — they are not heading/block tags</dont>
+  <dont>Setting `as` — replace the root with `render` only</dont>
+  <dont>Setting `align` on every Title/Text inside Prose when one Prose `align` covers the region</dont>
+  <dont>Setting a widget `role` on Prose, or painting font/color/list/link chrome in Prose CSS</dont>
+</usage>

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

@@ -30,6 +30,9 @@
   <prop name="vPadding" kind="react">
     <description>Sets block padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple.</description>
   </prop>
+  <prop name="maxWidth" kind="react">
+    <description>Caps the Stack wrapper inline size. Use for a short dash in a horizontal row.</description>
+  </prop>
   <prop name="border-style" kind="css">
     <description>Separator line border style.</description>
   </prop>

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

@@ -5,6 +5,7 @@
   <do>Bookend action strips — Separator above/below a Button row inside Surface (editor footers)</do>
   <do>Vertical gutters or toolbar splits — `orientation=&quot;vertical&quot;` in a row Stack beside content or Button groups</do>
   <do>Token thickness (`size`) and `variant` (e.g. dashed); space with Separator `hPadding`/`vPadding` or parent Stack gap — no custom border CSS</do>
+  <do>Short dash in a row — `maxWidth` token (Stack cap), not extra width CSS</do>
   <dont>Using Select.Separator for general layout dividers — that part is for Select option lists only</dont>
   <dont>Replacing Surface borders or card outlines with Separator — use Surface `border` props for container chrome</dont>
   <dont>Inventing divider margin/gap CSS when parent Stack `rowGap` / `columnGap` and Separator padding props cover spacing</dont>

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

@@ -61,6 +61,15 @@
     <notes>From `auth/login-form` acknowledged state. `render={<p />}` for block semantics; default body size/tone.</notes>
   </example>
 
+  <example title="Prose link">
+    <tsx><![CDATA[
+<Text render={<a href="#" />} size="xs">
+  Forgot password?
+</Text>
+]]></tsx>
+    <notes>Text-as-a keeps preflight link chrome (animated underline). Do not set `data-no-link-style` — that attr is for painted chrome links only.</notes>
+  </example>
+
   <example title="Empty-state centered">
     <tsx><![CDATA[
 <Stack hAlign="center" rowGap="m">

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

@@ -12,7 +12,7 @@
     <item>Inventing CSS `letter-spacing` / `text-transform` / `width: 100%` when `tracking` / `transform` / parent Stack `fullWidth` cover the need</item>
   </when_not_to_use>
   <prop name="align" kind="react">
-    <description>Aligns text using logical alignment values.</description>
+    <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 copy.</description>
@@ -33,7 +33,7 @@
     <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. Root Text without lineHeight uses leading `m`; omit on nested Text so line-height inherits the outer Text.</description>
   </prop>
   <prop name="maxWidth" kind="react">
     <description>Constrains the maximum inline size of the rendered text block.</description>
@@ -51,7 +51,7 @@
     <description>Enables text selection on the rendered copy.</description>
   </prop>
   <prop name="size" kind="react">
-    <description>Selects a semantic body typography size from the active theme scale (`4xl` \| `3xl` \| `2xl` \| `xl` \| `l` \| `m` \| `s` \| `xs`). Default locks at that size’s --font-scale-body-* token; fluid clamp (prev step→token) applies when `fluid` is true and --effect-fluid-typography is empty. Theme effect initial still locks all Text. size xs is always fixed (min=max).</description>
+    <description>Selects a semantic body typography size from the active theme scale (`4xl` \| `3xl` \| `2xl` \| `xl` \| `l` \| `m` \| `s` \| `xs`). Root Text without size locks at body `m`; omit size on nested Text so font-size inherits the outer Text. Fluid clamp (prev step→token) applies when `fluid` is true and --effect-fluid-typography is empty. Theme effect initial still locks all Text. size xs is always fixed (min=max).</description>
   </prop>
   <prop name="tone" kind="react">
     <description>Sets the semantic text color role when no literal `color` override is used. `default` inherits; `primary` → `--global-primary`; `muted` → `--global-muted`; `interactive` → `--global-interactive-text`; `positive` / `informative` / `danger` / `warning` → `--highlight-green` / `--highlight-blue` / `--highlight-red` / `--highlight-yellow`.</description>
@@ -78,7 +78,7 @@
     <description>Controls white-space preservation and wrapping behavior.</description>
   </prop>
   <prop name="align" kind="css">
-    <description>Text alignment on the root.</description>
+    <description>Text alignment on the root when the `align` prop is set; omitted inherits parent `text-align`.</description>
   </prop>
   <prop name="font-family" kind="css">
     <description>Font family; family prop presets via data attributes.</description>
@@ -87,7 +87,7 @@
     <description>Optical size axis on the root (variable fonts).</description>
   </prop>
   <prop name="font-size" kind="css">
-    <description>Body font size; size prop presets via data attributes. Defaults to the theme body scale token for that size; clamp (prev step→token) applies only when --effect-fluid-typography is on and `fluid` is true (Text defaults fluid false).</description>
+    <description>Body font size; size prop presets via data attributes. Root without size uses body `m`; nested Text without `data-text-size` inherits the outer Text font-size. Clamp (prev step→token) applies only when --effect-fluid-typography is on and `fluid` is true (Text defaults fluid false).</description>
   </prop>
   <prop name="font-weight" kind="css">
     <description>Font weight on the root; keyword presets or numeric via weight prop.</description>
@@ -96,7 +96,7 @@
     <description>Font width percentage on the root (font-stretch + wdth).</description>
   </prop>
   <prop name="line-height" kind="css">
-    <description>Line height; lineHeight prop presets via data attributes.</description>
+    <description>Line height; lineHeight prop presets via data attributes. Nested Text without `data-text-line-height` inherits the outer Text line-height.</description>
   </prop>
   <prop name="letter-spacing" kind="css">
     <description>Letter spacing on the root. Prefer the `tracking` React prop; set this hook only when theming beyond the prop.</description>

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

@@ -8,7 +8,10 @@
   <do>Hero / status motion: nest Typewriter inside Text when body tone/size should drive the typed line</do>
   <do>Ellipsis: ClampText `render={&lt;Text … /&gt;}` — FitText when copy must scale to fill width instead of truncate</do>
   <do>Letter-spacing via `tracking`; text-transform via `transform`; width via `maxWidth` or parent Stack `fullWidth`</do>
+  <do>Omit `align` so copy inherits parent `text-align`; pass `align` only to override</do>
+  <do>Inline prose link: `Text render={&lt;a href=… /&gt;}` — keeps preflight link chrome (no `data-no-link-style`)</do>
   <dont>Using Text for headings — use Title (`render` for h1–h6)</dont>
+  <dont>Putting `data-no-link-style` on Text-as-a when the default underline hover is wanted</dont>
   <dont>Inventing CSS `letter-spacing` / `text-transform` / `width: 100%` / `paddingBlock*` / `paddingInline*` when `tracking` / `transform` / Stack `fullWidth` / `hPadding`/`vPadding` tuples cover it</dont>
   <dont>Setting body color with raw `--global-*` when `tone` covers the role</dont>
 </usage>

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

@@ -8,6 +8,7 @@
     <ref id="autocomplete" />
     <ref id="fieldset" />
     <ref id="textarea" />
+    <ref id="otp-field" />
     <ref id="select" />
     <ref id="text" />
   </related>

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

@@ -5,14 +5,19 @@
     <item>Start or end addon slots inside the shared control group</item>
     <item>Label, description, and error copy with validation states</item>
     <item>Several related Textfields grouped under one section legend as Fieldset children (e.g. billing details)</item>
+    <item>Control chrome inside another Field (`controlOnly`) — native `size` / `fitContent` still apply</item>
   </when_to_use>
   <when_not_to_use>
     <item>Multi-line entry — use Textarea</item>
-    <item>Custom size or variant props — fixed medium treatment</item>
+    <item>Custom visual size or variant props — fixed medium treatment (native HTML `size` is allowed)</item>
     <item>Wrapping a lone Textfield in Fieldset when its own label is sufficient — Fieldset is for multi-field sections or shared legends</item>
     <item>Using Fieldset instead of the Textfield label for a single control</item>
     <item>Inventing CSS `width: 100%` / `w-full` when the `fullWidth` prop covers it</item>
+    <item>`controlOnly` as a standalone labeled field — omit it when you need Field chrome</item>
   </when_not_to_use>
+  <prop name="controlOnly" kind="react">
+    <description>When `true`, skip Field.Root / label / helper. Control group + input only. Use inside another Field (OTP slots). Native `size` and `fitContent` still apply. `label`, `description`, and `error` are ignored.</description>
+  </prop>
   <prop name="description" kind="react">
     <description>Helper copy rendered with `Field.Description` and `Text` while the field is valid.</description>
   </prop>

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

@@ -7,9 +7,10 @@
   <do>Span the form column with Textfield `fullWidth` — open props before inventing width CSS</do>
   <do>`startAddon` / `endAddon` for prefix text, icons, or actions inside the control group — IconButton/Button addons use `size=&quot;s&quot;` and `type=&quot;button&quot;`</do>
   <do>Label, description, and error copy with validation states</do>
+  <do>Compose the control inside another Field with `controlOnly` — native `size` / `fitContent` still apply; skip a second Field.Root</do>
   <dont>Multi-line entry — use Textarea</dont>
   <dont>Inventing `width: 100%` / `w-full` CSS on the Textfield root when `fullWidth` covers it</dont>
-  <dont>Passing unsupported size or variant props — fixed medium treatment</dont>
+  <dont>Passing visual size or variant props — chrome is fixed medium. Native HTML `size` on the input is allowed</dont>
   <dont>Expecting a focus ring when focus is only on addon controls</dont>
   <dont>Wrapping a lone Textfield in Fieldset when its own label is enough</dont>
 </usage>

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

@@ -13,7 +13,7 @@
     <item>Inventing CSS `letter-spacing` / `text-transform` / `width: 100%` when `tracking` / `transform` / parent Stack `fullWidth` cover the need</item>
   </when_not_to_use>
   <prop name="align" kind="react">
-    <description>Aligns text using logical alignment values.</description>
+    <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>
@@ -73,7 +73,7 @@
     <description>Controls white-space preservation and wrapping behavior.</description>
   </prop>
   <prop name="align" kind="css">
-    <description>Title alignment on the root.</description>
+    <description>Title alignment on the root when the `align` prop is set; omitted inherits parent `text-align`.</description>
   </prop>
   <prop name="font-family" kind="css">
     <description>Heading font family on the root.</description>

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

@@ -7,6 +7,8 @@
   <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>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>

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

@@ -2,7 +2,6 @@
 <usage surface="typewriter">
   <do>Nest inside Title or Text so size/tone/heading `render` live on the parent — Typewriter stays decorative typed copy</do>
   <do>Hero / marketing phrase cycles via `texts` + `preserveSpace` so layout holds through type/delete (see auth Title compose)</do>
-  <do>Wrapped `preserveSpace` copy: keep phrase lengths similar so reserved height stays honest across the cycle</do>
   <do>Caret via `caret` / `caretColor`; timing via `speed` / `deleteSpeed` / `pause` / `delay` / `loop`</do>
   <do>Loading shimmer on static copy is Shimmer inside Text/Title — Typewriter when progressive letter reveal is the intent</do>
   <dont>Using Typewriter as the only source of critical status without a labeled surrounding region</dont>

package/dist/specs/foundation/attributes.xml

@@ -19,14 +19,14 @@
   </attr>
   <attr name="data-no-link-style">
     <presence>boolean attribute on anchor elements</presence>
-    <effect>Excludes the anchor from preflight default link styling (interactive color, no underline, animated underline on unclassed links).</effect>
+    <effect>Excludes the anchor from all preflight default link styling (interactive color, text-decoration reset, animated underline on hover/focus). Every a:any-link without this attribute gets that chrome — class presence alone does not opt out.</effect>
     <values>
       <value>(boolean presence)</value>
     </values>
-      <when>Links that must keep component-owned or custom link chrome like linked Surfaces or other components</when>
-      <when>Anchors with their own link styling</when>
-      <when_not>Standard inline prose links that should inherit preflight link styling</when_not>
-
+    <when>Component-owned or custom link chrome (ButtonLink, Chip-as-link, Menu.LinkItem, Surface-as-link, app anchors with their own paint)</when>
+    <when>Any anchor whose background must not receive the preflight underline gradient</when>
+    <when_not>Standard inline prose links (bare a, Text/Title render as a) that should keep preflight link styling</when_not>
+    <gotcha>A class on the anchor no longer suppresses link styles — only data-no-link-style does. Chrome components set it; prose Text/Title-as-a keep the underline with no extra markup.</gotcha>
   </attr>
   <attr name="data-elevation">
     <presence>value required</presence>

package/dist/specs/foundation/modules.xml

@@ -51,8 +51,8 @@
   <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>Leave default prose links alone. Add data-no-link-style when component or custom link chrome must win (attributes.xml).</use>
-    <do_not>Fight preflight link styles without the opt-out attr.</do_not>
+    <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>
+    <do_not>Rely on class presence to suppress link styles — use data-no-link-style only.</do_not>
   </module>
   <module id="vibrancy">
     <purpose>Theme-gated backdrop-filter glass on opt-in hosts.</purpose>

package/dist/specs/index.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<index package="@viraui/react" version="2026.6.4" generated="2026-10-01T09:52:11.032Z">
+<index package="@viraui/react" version="2026.7.0-next.0" generated="2026-10-06T15:23:28.840Z">
   <categories>
     <category id="layout" />
     <category id="action" />
@@ -251,6 +251,16 @@
       <unit kind="patterns" href="components/meter/patterns.xml" />
     </units>
   </entry>
+  <entry id="otp-field" category="form" title="OTPField">
+    <summary>Field-wrapped one-time code slots. Default slots compose Textfield controlOnly; one label/helper on Root.</summary>
+    <units>
+      <unit kind="meta" href="components/otp-field/meta.xml" />
+      <unit kind="a11y" href="components/otp-field/a11y.xml" />
+      <unit kind="props" href="components/otp-field/props.xml" />
+      <unit kind="usage" href="components/otp-field/usage.xml" />
+      <unit kind="patterns" href="components/otp-field/patterns.xml" />
+    </units>
+  </entry>
   <entry id="popover" category="overlay" title="Popover">
     <summary>Compound popover built on Base UI Popover with `Popover.Trigger`, `Popover.Sheet`, `Popover.Close`, `Popover.Title`, `Popover.Description`, and `Popover.createHandle` for detached and multiple trigge…</summary>
     <units>
@@ -271,6 +281,16 @@
       <unit kind="patterns" href="components/progressive-blur/patterns.xml" />
     </units>
   </entry>
+  <entry id="prose" category="typography" title="Prose">
+    <summary>Grouping region that applies heading-aware em rhythm to direct document blocks.</summary>
+    <units>
+      <unit kind="meta" href="components/prose/meta.xml" />
+      <unit kind="a11y" href="components/prose/a11y.xml" />
+      <unit kind="props" href="components/prose/props.xml" />
+      <unit kind="usage" href="components/prose/usage.xml" />
+      <unit kind="patterns" href="components/prose/patterns.xml" />
+    </units>
+  </entry>
   <entry id="radio" category="form" title="Radio">
     <summary>Mutually exclusive choice within a RadioGroup, with optional per-option label and helper text.</summary>
     <units>

package/package.json

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