@viraui/react 2026.10.0 → 2026.11.0-next.0

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

@@ -8,6 +8,7 @@
   </when_to_use>
   <when_not_to_use>
     <item>Use LinearProgress for in-progress tasks or indeterminate work.</item>
+    <item>Use IconMeter for discrete icon-row scores (stars / hearts / custom glyphs).</item>
     <item>Use Slider when the user needs to choose or adjust a value.</item>
     <item>Use Spinner for a small standalone loading affordance without metric context.</item>
   </when_not_to_use>

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

@@ -7,6 +7,7 @@
   <do>Color-coded metrics via highlight `variant` (`green`, `red`, `yellow`, …) or default `primary` — tints track wash + indicator like Chip</do>
   <do>Prefer LinearProgress for in-progress or indeterminate tasks (`value={null}`) — Meter has no indeterminate mode</do>
   <dont>Using Meter as an interactive value control — use Slider</dont>
+  <dont>Using Meter for discrete icon-row scores (stars / hearts) — use IconMeter</dont>
   <dont>Using Meter for indeterminate or in-progress work — use LinearProgress</dont>
   <dont>Modeling invalid or disabled meter state — Base UI Meter exposes neither</dont>
   <dont>Hiding the metric name when multiple meters share a view</dont>

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

@@ -9,7 +9,7 @@
 <Stack
   direction="row"
   columnGap="s"
-  vAlign="center"
+  vAlign="safe center"
   fullWidth
   render={<Surface border="all" color={1} radius="m" hPadding="m" vPadding="s" />}
 >
@@ -45,7 +45,7 @@
   <Stack
     direction="row"
     hAlign="space-between"
-    vAlign="center"
+    vAlign="safe center"
     columnGap="m"
     hPadding="m"
     vPadding="m"
@@ -72,19 +72,19 @@
 <Stack
   render={<header />}
   direction="row"
-  vAlign="center"
+  vAlign="safe center"
   hAlign="space-between"
   hPadding="m"
   vPadding="m"
   columnGap="s"
 >
-  <Stack direction="row" vAlign="center" columnGap="s">
+  <Stack direction="row" vAlign="safe center" columnGap="s">
     {/* brand / logo */}
   </Stack>
 
   <Surface hPadding="xs" vPadding="xs" radius="m" border="all" data-vibrant>
     <Surface radius="auto" color={1} hPadding="xs" vPadding="xs">
-      <Stack render={<nav />} direction="row" vAlign="center" columnGap="xs">
+      <Stack render={<nav />} direction="row" vAlign="safe center" columnGap="xs">
         <ButtonLink size="s" variant="secondary" href="/hub">
           Hub
         </ButtonLink>
@@ -98,7 +98,7 @@
     </Surface>
   </Surface>
 
-  <Stack direction="row" vAlign="center" columnGap="s">
+  <Stack direction="row" vAlign="safe center" columnGap="s">
     <Button size="s" variant="secondary">
       Sign out
     </Button>
@@ -113,7 +113,7 @@
 <form>
   <Stack direction="row" columnGap="m" rowGap="m" hAlign="start" vAlign="start" wrap>
     <Textfield type="email" placeholder="your@email.com" size={30} aria-label="Email" />
-    <Stack direction="row" vAlign="center" columnGap="m">
+    <Stack direction="row" vAlign="safe center" columnGap="m">
       <Button type="submit">Send magic link</Button>
       or
       <ButtonLink variant="secondary" href="#">
@@ -136,7 +136,7 @@
   expandChildren
 >
   {/* brand */}
-  <Stack rowGap="xl" vAlign="center">
+  <Stack rowGap="xl" vAlign="safe center">
     <Stack vPadding={[0, 'l']} rowGap="xl">
       <Title size="1" render={<h1 />} maxWidth="36ch" lineHeight="s">
         Design systems that ship
@@ -173,8 +173,8 @@
 <Stack hPadding="m">
   <Surface color={2} hoverColor={3} radius="m" vPadding="s">
     <Stack rowGap="s" hPadding="m" vPadding={[0, 's']}>
-      <Stack direction="row" vAlign="center" hAlign="space-between" columnGap="s">
-        <Stack direction="row" vAlign="center" columnGap="s">
+      <Stack direction="row" vAlign="safe center" hAlign="space-between" columnGap="s">
+        <Stack direction="row" vAlign="safe center" columnGap="s">
           {/* section icon */}
           <Text size="xs" weight="semibold">
             Colors
@@ -198,7 +198,7 @@
   <example title="Dialog form (import)">
     <tsx><![CDATA[
 <Dialog.Sheet title="Import preset" description="Paste preset code." showCloseButton headerAlign="center">
-  <Stack rowGap="m" hAlign="center" hPadding="m" vPadding={['s', 0]}>
+  <Stack rowGap="m" hAlign="safe center" hPadding="m" vPadding={['s', 0]}>
     <Textfield size={40} placeholder="Paste preset…" aria-label="Preset code" />
     <Stack direction="row" hAlign="end" columnGap="s">
       <Button>Apply</Button>
@@ -213,7 +213,7 @@
   <example title="Dialog action strip (export)">
     <tsx><![CDATA[
 <Stack rowGap="m" hPadding="m" vPadding={['s', 0]}>
-  <Stack direction="row" hAlign="center" columnGap="m">
+  <Stack direction="row" hAlign="safe center" columnGap="m">
     <Button size="l">Download</Button>
     <ButtonLink size="l" variant="secondary" href="#">
       Share
@@ -231,7 +231,7 @@
   <example title="Toolbar chip (canvas zoom)">
     <tsx><![CDATA[
 <Surface color={1} border="all" radius="m" vPadding="2xs" hPadding="2xs">
-  <Stack direction="row" vAlign="center">
+  <Stack direction="row" vAlign="safe center">
     <IconButton aria-label="Zoom out" icon={<Minus />} variant="flat" />
     <IconButton aria-label="Reset zoom" icon={<FocusCenter />} variant="flat" />
     <IconButton aria-label="Zoom in" icon={<Plus />} variant="flat" />
@@ -243,11 +243,11 @@
 
   <example title="Empty / info state">
     <tsx><![CDATA[
-<Stack hAlign="center" vAlign="center" rowGap="l" render={<div role="status" />}>
+<Stack hAlign="safe center" vAlign="safe center" rowGap="l" render={<div role="status" />}>
   <Surface color={1} border="all" hPadding="m" vPadding="m" radius="full">
     {/* icon */}
   </Surface>
-  <Stack hAlign="center" maxWidth="36ch" rowGap="s">
+  <Stack hAlign="safe center" maxWidth="36ch" rowGap="s">
     <Title align="center" render={<h2 />} size="3">
       No prompts yet
     </Title>
@@ -267,7 +267,7 @@
     rowGap="m"
     hPadding="l"
     vPadding="2xl"
-    hAlign="center"
+    hAlign="safe center"
     render={<Surface border="all" borderStyle="dashed" radius="l" />}
   >
     <AvatarGroup
@@ -322,7 +322,7 @@
     </Stack>
 
     <Surface color={2} hPadding="l" vPadding="m">
-      <Stack columnGap="m" direction="row" hAlign="space-between" vAlign="center">
+      <Stack columnGap="m" direction="row" hAlign="space-between" vAlign="safe center">
         <Button variant="secondary">Reset</Button>
         <Button>Save Preferences</Button>
       </Stack>
@@ -353,7 +353,7 @@
 
     <Stack rowGap="m">
       <Slider label="Minimum Payout Amount" min={50} max={10000} step={50} value={2500} />
-      <Stack columnGap="s" direction="row" hAlign="space-between" vAlign="center">
+      <Stack columnGap="s" direction="row" hAlign="space-between" vAlign="safe center">
         <Text family="mono" size="xs" tone="muted">
           $50 (MIN)
         </Text>
@@ -374,8 +374,8 @@
   <example title="Directory list row">
     <tsx><![CDATA[
 <Surface color={2} radius="m" hPadding="m" vPadding="m">
-  <Stack columnGap="m" direction="row" hAlign="space-between" vAlign="center">
-    <Stack columnGap="m" direction="row" vAlign="center">
+  <Stack columnGap="m" direction="row" hAlign="space-between" vAlign="safe center">
+    <Stack columnGap="m" direction="row" vAlign="safe center">
       <Avatar alt="Sarah Chen" fallback="SC" size="s" />
       <Stack rowGap="xs">
         <Text weight="semibold">Sarah Chen</Text>
@@ -445,7 +445,7 @@
     <tsx><![CDATA[
 {/* Parent must be sized. Children share height + fill width — props only. */}
 <Stack rowGap="s" expandChildren fullWidth fullHeight hAlign="stretch">
-  <Stack direction="row" columnGap="m" vAlign="center" hPadding="m" vPadding="s">
+  <Stack direction="row" columnGap="m" vAlign="safe center" hPadding="m" vPadding="s">
     {/* header strip */}
   </Stack>
   <Stack rowGap="m" hPadding="m" vPadding="m" expandChildren>

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

@@ -5,7 +5,7 @@
     <item>Composing screens and component internals without custom flex CSS</item>
     <item>Custom native root through render while keeping data-stack hooks</item>
     <item>Style descendants with `@container stack` queries when layout, gap, or typography should respond to the Stack&apos;s own inline-size instead of the viewport (set `enableContainer` on the Stack you&apos;re querying)</item>
-    <item>Centered max-width shells: parent `hAlign=&quot;center&quot;` + child `fullWidth` + `maxWidth`</item>
+    <item>Centered max-width shells: parent `hAlign=&quot;safe center&quot;` + child `fullWidth` + `maxWidth` (prefer `safe` on content-position)</item>
     <item>Readable type columns: `maxWidth` in **`ch`** around Text/Title/Prose for ~10–12 words/line — width **tracks body `size`** (smaller → narrower; prefer `ch` over rem; never one fixed band for every size)</item>
     <item>Full-bleed or equal-width action clusters (Buttons, etc.): `fullWidth` and/or `expandChildren` instead of per-child width CSS</item>
     <item>Children fill both axes in a sized parent — see this surface `patterns.xml`: row = `direction=&quot;row&quot;` + `expandChildren` + `fullHeight` + `vAlign=&quot;stretch&quot;`; column = `expandChildren` + `fullWidth` + `fullHeight` + `hAlign=&quot;stretch&quot;` — never invent `height`/`width` / `block-size`/`inline-size: 100%` CSS</item>
@@ -34,10 +34,10 @@
     <description>Sets `block-size: 100%` on the stack root so it fills the parent&apos;s block size. Default `false`. Prefer this over `style`/`className` `height` / `block-size: 100%` on this Stack. Pair with `expandChildren` and cross-axis `hAlign`/`vAlign=&quot;stretch&quot;` so children fill both axes without per-child size CSS. Orthogonal to `expandChildren` and `fullWidth`.</description>
   </prop>
   <prop name="fullWidth" kind="react">
-    <description>Sets `inline-size: 100%` on the stack root so it fills the parent&apos;s inline size. Default `false`. Prefer this (plus cross-axis stretch) so content-sized children like Button span a panel — do not add `width: 100%` CSS on those children. Use with `maxWidth` under a parent `hAlign=&quot;center&quot;` for a fluid capped centered shell. Pair with `fullHeight` when the root must fill both parent axes. Does not grow children — use `expandChildren` for that.</description>
+    <description>Sets `inline-size: 100%` on the stack root so it fills the parent&apos;s inline size. Default `false`. Prefer this (plus cross-axis stretch) so content-sized children like Button span a panel — do not add `width: 100%` CSS on those children. Use with `maxWidth` under a parent `hAlign=&quot;safe center&quot;` for a fluid capped centered shell. Pair with `fullHeight` when the root must fill both parent axes. Does not grow children — use `expandChildren` for that.</description>
   </prop>
   <prop name="hAlign" kind="react">
-    <description>Aligns content on the horizontal axis from the consumer point of view.</description>
+    <description>Aligns content on the horizontal axis from the consumer point of view. Accepts CSS `justify-content` / `align-items` values (which property is used depends on `direction`), including overflow keywords such as `safe center`.</description>
   </prop>
   <prop name="hPadding" kind="react">
     <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>
@@ -61,7 +61,7 @@
     <description>Sets the gap between flex rows using the Vira space token scale.</description>
   </prop>
   <prop name="vAlign" kind="react">
-    <description>Aligns content on the vertical axis from the consumer point of view.</description>
+    <description>Aligns content on the vertical axis from the consumer point of view. Accepts CSS `justify-content` / `align-items` values (which property is used depends on `direction`), including overflow keywords such as `safe center`.</description>
   </prop>
   <prop name="vPadding" kind="react">
     <description>Sets block padding using one token for both sides or a `[start, end]` tuple (`0` allowed). Prefer the tuple for one-sided inset (e.g. bottom only `vPadding={[0, &apos;l&apos;]}`) — never `style`/`paddingBlock*` CSS when this prop covers it.</description>
@@ -73,7 +73,7 @@
     <description>Flex column gap on the root.</description>
   </prop>
   <prop name="h-align" kind="css">
-    <description>Logical horizontal flex alignment hook.</description>
+    <description>Horizontal flex alignment custom property (`justify-content` or `align-items` by `direction`). Accepts full CSS values including overflow keywords such as `safe center`.</description>
   </prop>
   <prop name="max-width" kind="css">
     <description>Max inline size of the stack root.</description>
@@ -97,6 +97,6 @@
     <description>Flex row gap on the root.</description>
   </prop>
   <prop name="v-align" kind="css">
-    <description>Logical vertical flex alignment hook.</description>
+    <description>Vertical flex alignment custom property (`justify-content` or `align-items` by `direction`). Accepts full CSS values including overflow keywords such as `safe center`.</description>
   </prop>
 </props>

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

@@ -8,14 +8,16 @@
     row → `direction="row"` + `expandChildren` + `fullHeight` + `vAlign="stretch"` (share width + fill height);
     column → `expandChildren` + `fullWidth` + `fullHeight` + `hAlign=&quot;stretch&quot;` (share height + fill width)</do>
   <do>Settings rows: Stack `direction=&quot;row&quot;` + Text (label/description column) + Switch or Checkbox — nest in Surface for panel chrome</do>
-  <do>Centered capped shells: parent `hAlign=&quot;center&quot;` + child Stack `fullWidth` + `maxWidth`</do>
+  <do>Centered capped shells: parent `hAlign=&quot;safe center&quot;` + child Stack `fullWidth` + `maxWidth` — prefer `safe` on content-position (`center`/`end`); keep `stretch` / `space-*` bare</do>
+  <do>Overflow-safe flex alignment via `hAlign`/`vAlign` props (`safe center`, `safe end`, …) — never `style`/`justifyContent`/`alignItems` solely for `safe …`</do>
   <do>Readable type column: Stack `maxWidth` in **`ch`** around Text/Title/Prose sized for the dominant body `size` (~10–12 words/line; smaller → narrower) — prefer `ch` over rem; never one fixed ch for every size</do>
   <do>Semantic/native roots via `render` (`header`, `main`, `nav`, `section`, …) while keeping Stack as the layout engine</do>
   <do>Opt into `@container stack` with `enableContainer` when layout should follow this Stack&apos;s inline-size, not the viewport</do>
   <dont>Reaching for a plain wrapper `div` when Stack (optionally with `render` for a semantic tag) can own the box</dont>
   <dont>Passing `render={&lt;div /&gt;}` (or any host that matches Stack&apos;s default root) — omit `render`; use it only for a different host (`header`, `Surface`, …)</dont>
   <dont>Assuming Stack expands direct children by default — pass `expandChildren` when children should grow on the flex main axis</dont>
-  <dont>Using `expandChildren` to fill parent width under `hAlign=&quot;center&quot;` — that is `fullWidth` on the child Stack (self `inline-size`), not child flex-grow</dont>
+  <dont>Using `expandChildren` to fill parent width under `hAlign=&quot;safe center&quot;` / `center` — that is `fullWidth` on the child Stack (self `inline-size`), not child flex-grow</dont>
+  <dont>Inventing `style` / CSS `justify-content` / `align-items` (including solely for `safe center`) when `hAlign`/`vAlign` cover it — prefer `safe` on content-position values</dont>
   <dont>Inventing `width`/`height` / `inline-size`/`block-size: 100%` / `w-full` / size-fill `className` on this Stack or content-sized children when `fullWidth` / `fullHeight` / `expandChildren` + stretch align can own the fill — or when children are intentionally fixed-size (e.g. IconButton)</dont>
   <dont>Inventing CSS `gap` / `padding` / `paddingBlock*` / `paddingInline*` / side paddings (`style` or className) when public spacing props cover it — one-sided inset uses `hPadding`/`vPadding` `[start, end]` tuples (e.g. `vPadding={[0, &apos;l&apos;]}`), not `paddingBlockEnd: &apos;1rem&apos;`</dont>
   <dont>Putting `data-grow=&quot;false&quot;` on an ancestor to control nested `expandChildren` — set it on the child that should not grow</dont>

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

@@ -70,7 +70,7 @@
   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>
+    <notes>Text-as-a keeps preflight link chrome (always-visible decoration; hover/focus offset only). Do not set `data-no-link-style` — that attr is for painted chrome links only.</notes>
   </example>
 
   <example title="Empty-state centered">

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

@@ -15,7 +15,7 @@
   <do>Inline prose link: `Text render={&lt;a href=… /&gt;}` — keeps preflight link chrome (no `data-no-link-style`)</do>
   <do>Long articles / docs / privacy walls → Prose (not Text alone for heading-aware rhythm); still keep a reading column</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>Putting `data-no-link-style` on Text-as-a when the default always-visible underline is wanted</dont>
   <dont>Inventing CSS `letter-spacing` / `text-transform` / `line-height` / `max-width` / `text-wrap` / `width: 100%` / `paddingBlock*` / `paddingInline*` when `tracking` / `transform` / `lineHeight` / `maxWidth` / `wrap` / Stack `fullWidth` / `hPadding`/`vPadding` tuples cover it</dont>
   <dont>Setting body color with raw `--global-*` when `tone` covers the role</dont>
   <dont>Full-bleed marketing/UI paragraphs across a wide shell when a ~10–12-word measure fits</dont>

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

@@ -46,7 +46,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 (`--vui-button-icon-size`). Prefer this over setting `size` on the glyph ReactNode.</description>
+    <description>Addon icon size inside the button (`--vui-button-icon-size`). Defaults to a fixed fraction of `--vui-button-height` so glyphs stay proportional across space scales; 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,7 +3,7 @@
   <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>Omit `size` / width / height on `restingIcon` / `pressedIcon` glyphs — host CSS sizes SVG via `--vui-button-icon-size` (fraction of `--vui-button-height`); 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>

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

@@ -41,7 +41,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 (`--vui-button-icon-size`). Prefer this over setting `size` on the glyph ReactNode.</description>
+    <description>Addon icon size inside the button (`--vui-button-icon-size`). Defaults to a fixed fraction of `--vui-button-height` so glyphs stay proportional across space scales; 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/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 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>
+    <effect>Excludes the anchor from all preflight default link styling (interactive color + always-visible native text-decoration from --global-link-decoration / --global-contrast; hover/focus only increases text-underline-offset). Every a:any-link without this attribute gets that chrome — class presence alone does not opt out. Theme --global-link-decoration: none clears the line globally; this attr remains the only per-anchor opt-out.</effect>
     <values>
       <value>(boolean presence)</value>
     </values>
     <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>Any painted chrome anchor that must not receive preflight link decoration</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>
+    <gotcha>A class on the anchor never suppresses link styles — only data-no-link-style does. Chrome components set it; prose Text/Title-as-a keep the always-visible underline with no extra markup.</gotcha>
   </attr>
   <attr name="data-elevation">
     <presence>value required</presence>

package/dist/specs/foundation/modules.xml

@@ -56,7 +56,7 @@
     <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>Inline chrome: every a:any-link without data-no-link-style gets interactive color + always-visible native text-decoration (style from --global-link-decoration, brand default wavy; color var(--global-contrast)). Hover/focus only increases text-underline-offset. Theme may set --global-link-decoration: none to clear the line. Opt out per anchor with data-no-link-style only — class never opts out (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>

package/dist/specs/foundation/theme-topics.xml

@@ -9,7 +9,7 @@
   </audience>
 
   <agent_rules>
-    <use>Override --global-*, --base-*, --highlight-*, --space-*, --radius-*, --corner-shape, --effect-*, --vibrancy-*, --font-root-size, --font-*-typescale, --font-leading-*, --font-family-*, --duration-*, --easing-* after a complete compatible theme sheet.</use>
+    <use>Override --global-*, --global-link-decoration, --base-*, --highlight-*, --space-*, --radius-*, --corner-shape, --effect-*, --vibrancy-*, --font-root-size, --font-*-typescale, --font-leading-*, --font-family-*, --duration-*, --easing-* after a complete compatible theme sheet.</use>
     <use>Change live typography scale via --font-heading-typescale / --font-body-typescale; preflight re-derives --font-scale-*.</use>
     <use>Read surface=&quot;derived&quot; tokens (var(--font-scale-*)) in component/app CSS — consume, do not redefine in theme.</use>
     <do_not>Author --font-scale-* in theme CSS or brand typography.json. Theme ships typescale ratios only.</do_not>
@@ -32,7 +32,12 @@
   <topic id="global" surface="theme">
     <pattern>--global-*</pattern>
     <summary>App-facing foreground, background, primary, muted, interactive, disabled, and contrast colors.</summary>
-    <agent>Primary brand/accent override surface.</agent>
+    <agent>Primary brand/accent override surface. Link decoration style is the sibling topic --global-link-decoration (not a color).</agent>
+  </topic>
+  <topic id="global-link-decoration" surface="theme">
+    <pattern>--global-link-decoration</pattern>
+    <summary>Free string mapped to text-decoration-style on every preflight a:any-link (brand default wavy). Color is var(--global-contrast). none clears the underline. Hover/focus only increases text-underline-offset — no gradient or grow-from-zero animation.</summary>
+    <agent>Theme lever for prose link decoration. Per-anchor opt-out remains data-no-link-style only (class never opts out). modules.xml typography + attributes.xml.</agent>
   </topic>
   <topic id="highlight" surface="theme">
     <pattern>--highlight-*</pattern>

package/dist/specs/index.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<index package="@viraui/react" version="2026.10.0" generated="2026-10-16T10:31:41.253Z">
+<index package="@viraui/react" version="2026.11.0-next.0" generated="2026-10-28T09:41:51.880Z">
   <categories>
     <category id="layout" />
     <category id="action" />
@@ -211,6 +211,16 @@
       <unit kind="patterns" href="components/glow/patterns.xml" />
     </units>
   </entry>
+  <entry id="gauge" category="feedback" title="Gauge">
+    <summary>Composable round dial for determinate readings and optional polar slider control, built from SVG parts sharing one domain context. Linear bars stay on Slider.</summary>
+    <units>
+      <unit kind="meta" href="components/gauge/meta.xml" />
+      <unit kind="a11y" href="components/gauge/a11y.xml" />
+      <unit kind="props" href="components/gauge/props.xml" />
+      <unit kind="usage" href="components/gauge/usage.xml" />
+      <unit kind="patterns" href="components/gauge/patterns.xml" />
+    </units>
+  </entry>
   <entry id="grid" category="layout" title="Grid">
     <summary>CSS Grid layout primitive for auto-fill/fit or fixed track layouts with token gaps, Stack-aligned padding, and item placement (`fullWidth` / `fullHeight` / column / row).</summary>
     <units>
@@ -231,6 +241,16 @@
       <unit kind="patterns" href="components/icon-button/patterns.xml" />
     </units>
   </entry>
+  <entry id="icon-meter" category="feedback" title="IconMeter">
+    <summary>Display-only discrete icon row for scores and levels (empty / half / full), with APG Meter semantics. Distinct from track Meter, arc Gauge, and LinearProgress.</summary>
+    <units>
+      <unit kind="meta" href="components/icon-meter/meta.xml" />
+      <unit kind="a11y" href="components/icon-meter/a11y.xml" />
+      <unit kind="props" href="components/icon-meter/props.xml" />
+      <unit kind="usage" href="components/icon-meter/usage.xml" />
+      <unit kind="patterns" href="components/icon-meter/patterns.xml" />
+    </units>
+  </entry>
   <entry id="linear-progress" category="feedback" title="LinearProgress">
     <summary>Shows determinate or indeterminate progress for a task in a compact horizontal track.</summary>
     <units>

package/dist/specs/patterns/compose-layout-first.xml

@@ -16,7 +16,7 @@
 <Stack
   direction="row"
   columnGap="m"
-  vAlign="center"
+  vAlign="safe center"
   fullWidth
   expandChildren
   render={

package/dist/specs/patterns/settings-panel.xml

@@ -14,7 +14,7 @@
   <Surface color={1} border="all" radius="m" hPadding="m" vPadding="m">
     <Stack rowGap="m">
       <Textfield label="Display name" fullWidth />
-      <Stack direction="row" vAlign="center" columnGap="m" fullWidth>
+      <Stack direction="row" vAlign="safe center" columnGap="m" fullWidth>
         <Stack rowGap="2xs" expandChildren>
           <Text weight="m">Notifications</Text>
           <Text size="sm" color="muted">

package/dist/specs/patterns/settings-row.xml

@@ -8,7 +8,7 @@
   <do>Use Stack for the row flex layout and token `columnGap`; put label copy in a nested column Stack with `expandChildren`; put the control at the trailing edge.</do>
   <dont>Do not reimplement row flex, gap, or stretch in app CSS when Stack covers alignment and spacing.</dont>
   <tsx><![CDATA[
-<Stack direction="row" vAlign="center" columnGap="m" fullWidth>
+<Stack direction="row" vAlign="safe center" columnGap="m" fullWidth>
   <Stack rowGap="2xs" expandChildren>
     <Text weight="m">Notifications</Text>
     <Text size="sm" color="muted">

package/package.json

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