@viraui/react 1.0.13 → 1.0.15

package/dist/components/spinner/spinner.guide.json

@@ -23,15 +23,16 @@
   "related": ["Button", "IconButton"],
   "properties": {
     "react": {
+      "color": {
+        "description": "Overrides the spinner fill color."
+      },
       "size": {
-        "description": "Sets the rendered spinner size.",
-        "refCss": "size"
+        "description": "Sets the rendered spinner size."
       }
     },
     "css": {
       "size": {
-        "description": "Spinner glyph size on the root.",
-        "refReact": "size"
+        "description": "Spinner glyph size on the root."
       }
     }
   }

package/dist/components/stack/stack.guide.json

@@ -24,77 +24,79 @@
   "related": ["Surface", "Text", "Button"],
   "properties": {
     "react": {
-      "rowGap": {
-        "description": "Sets row gap using a Vira space token.",
-        "refCss": "row-gap"
-      },
       "columnGap": {
-        "description": "Sets column gap using a Vira space token.",
-        "refCss": "column-gap"
+        "description": "Sets the gap between flex columns using the Vira space token scale."
       },
-      "hAlign": {
-        "description": "Sets main-axis alignment for column layouts and cross-axis for row layouts.",
-        "refCss": "h-align"
+      "direction": {
+        "description": "Renders children across rows or columns using the chosen flex direction."
       },
-      "vAlign": {
-        "description": "Sets cross-axis alignment for column layouts and main-axis for row layouts.",
-        "refCss": "v-align"
+      "fillChildren": {
+        "description": "Makes direct children grow to fill the available space within the stack."
+      },
+      "hAlign": {
+        "description": "Aligns content on the horizontal axis from the consumer point of view."
       },
       "hPadding": {
-        "description": "Sets inline padding using one token or a [start, end] tuple."
+        "description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."
       },
-      "vPadding": {
-        "description": "Sets block padding using one token or a [start, end] tuple."
+      "inline": {
+        "description": "Displays the stack as `inline-flex` instead of `flex`."
       },
       "maxWidth": {
-        "description": "Constrains max inline size of the stack root.",
-        "refCss": "max-width"
+        "description": "Applies a maximum width value to the stack root."
       },
       "minWidth": {
-        "description": "Constrains min inline size of the stack root.",
-        "refCss": "min-width"
+        "description": "Applies a minimum width value to the stack root."
+      },
+      "ref": {
+        "description": "Ref forwarded to the rendered stack root element."
+      },
+      "render": {
+        "description": "Replaces the default `div` root using Base UI render semantics."
+      },
+      "rowGap": {
+        "description": "Sets the gap between flex rows using the Vira space token scale."
+      },
+      "vAlign": {
+        "description": "Aligns content on the vertical axis from the consumer point of view."
+      },
+      "vPadding": {
+        "description": "Sets block padding using one token for both sides or a `[start, end]` tuple."
+      },
+      "wrap": {
+        "description": "Allows direct children to wrap onto additional lines when space is constrained."
       }
     },
     "css": {
-      "row-gap": {
-        "description": "Flex row gap on the root.",
-        "refReact": "rowGap"
-      },
       "column-gap": {
-        "description": "Flex column gap on the root.",
-        "refReact": "columnGap"
+        "description": "Flex column gap on the root."
       },
       "h-align": {
-        "description": "Logical horizontal flex alignment hook.",
-        "refReact": "hAlign"
+        "description": "Logical horizontal flex alignment hook."
       },
-      "v-align": {
-        "description": "Logical vertical flex alignment hook.",
-        "refReact": "vAlign"
+      "max-width": {
+        "description": "Max inline size of the stack root."
       },
-      "padding-inline-start": {
-        "description": "Inline-start padding when padding is enabled.",
-        "refReact": "hPadding"
+      "min-width": {
+        "description": "Min inline size of the stack root."
       },
-      "padding-inline-end": {
-        "description": "Inline-end padding when padding is enabled.",
-        "refReact": "hPadding"
+      "padding-block-end": {
+        "description": "Block-end padding when padding is enabled."
       },
       "padding-block-start": {
-        "description": "Block-start padding when padding is enabled.",
-        "refReact": "vPadding"
+        "description": "Block-start padding when padding is enabled."
       },
-      "padding-block-end": {
-        "description": "Block-end padding when padding is enabled.",
-        "refReact": "vPadding"
+      "padding-inline-end": {
+        "description": "Inline-end padding when padding is enabled."
       },
-      "max-width": {
-        "description": "Max inline size of the stack root.",
-        "refReact": "maxWidth"
+      "padding-inline-start": {
+        "description": "Inline-start padding when padding is enabled."
       },
-      "min-width": {
-        "description": "Min inline size of the stack root.",
-        "refReact": "minWidth"
+      "row-gap": {
+        "description": "Flex row gap on the root."
+      },
+      "v-align": {
+        "description": "Logical vertical flex alignment hook."
       }
     }
   }

package/dist/components/static-noise/static-noise.guide.json

@@ -13,7 +13,7 @@
     "Large numbers of simultaneous full-viewport overlays on the same page"
   ],
   "accessibility": [
-    "StaticNoise is decorative — the root renders with aria-hidden by default",
+    "StaticNoise is decorative — the root hardcodes `aria-hidden=\"true\"` (not overridable via props)",
     "Parent surface or region must expose any meaningful label or busy state",
     "Consumer owns position, inset, z-index, and sizing for the overlay placement"
   ],
@@ -22,5 +22,21 @@
     "Using StaticNoise as the only loading announcement for a page",
     "Embedding layout positioning rules inside the component stylesheet"
   ],
-  "related": ["Surface", "Skeleton"]
+  "related": ["Surface", "Skeleton"],
+  "properties": {
+    "react": {
+      "animate": {
+        "description": "Animates the internal turbulence filter by cycling `feTurbulence` seed values."
+      },
+      "baseFrequency": {
+        "description": "Sets the SVG turbulence `baseFrequency` for the internal noise filter."
+      },
+      "mixBlendMode": {
+        "description": "Sets the rendered overlay mix blend mode."
+      },
+      "opacity": {
+        "description": "Sets the rendered overlay opacity."
+      }
+    }
+  }
 }

package/dist/components/surface/surface.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-surface-background{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-background-hover{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --vui-surface-overflow{syntax:"<custom-ident>";inherits:false;initial-value:visible}@property --vui-surface-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}.viraui__surface-module__Surface_slEYq{--vui-surface-border-radius-top-left:var(--vui-surface-border-radius);--vui-surface-border-radius-top-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-left:var(--vui-surface-border-radius);--vui-surface-background-hover:var(--vui-surface-background);position:relative;overflow:var(--vui-surface-overflow);box-sizing:border-box;background:var(--vui-surface-background);border-radius:var(--vui-surface-border-radius-top-left) var(--vui-surface-border-radius-top-right) var(--vui-surface-border-radius-bottom-right) var(--vui-surface-border-radius-bottom-left);border:0;@container root not style(--vibrancy-enable: initial){&[data-vibrant]{background:oklab(from var(--vui-surface-background) l a b/80%)}}&[data-surface-radius=auto]{--vui-surface-border-radius-top-left:0;--vui-surface-border-radius-top-right:0;--vui-surface-border-radius-bottom-right:0;--vui-surface-border-radius-bottom-left:0}&[data-surface-has-padding=true]{padding:var(--vui-surface-padding-block-start) var(--vui-surface-padding-inline-end) var(--vui-surface-padding-block-end) var(--vui-surface-padding-inline-start)}&[data-surface-border]{border-style:var(--vui-surface-border-style);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--vui-surface-background-hover)}}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-surface-background{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-background-hover{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --vui-surface-overflow{syntax:"<custom-ident>";inherits:false;initial-value:visible}@property --vui-surface-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}.viraui__surface-module__Surface_slEYq{--vui-surface-border-radius-top-left:var(--vui-surface-border-radius);--vui-surface-border-radius-top-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-left:var(--vui-surface-border-radius);--vui-surface-background-hover:var(--vui-surface-background);position:relative;overflow:var(--vui-surface-overflow);box-sizing:border-box;background:var(--vui-surface-background);border-radius:var(--vui-surface-border-radius-top-left) var(--vui-surface-border-radius-top-right) var(--vui-surface-border-radius-bottom-right) var(--vui-surface-border-radius-bottom-left);border:0;@container root not style(--vibrancy-enable: initial){&[data-vibrant]{background:oklab(from var(--vui-surface-background) l a b/80%)}}&[data-surface-has-padding=true]{padding:var(--vui-surface-padding-block-start) var(--vui-surface-padding-inline-end) var(--vui-surface-padding-block-end) var(--vui-surface-padding-inline-start)}&[data-surface-border]{border-style:var(--vui-surface-border-style);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--vui-surface-background-hover)}}}}

package/dist/components/surface/surface.guide.json

@@ -33,85 +33,78 @@
   "related": ["Elevator", "Stack"],
   "properties": {
     "react": {
+      "border": {
+        "description": "Applies the shared contrast border on the chosen side or axis. Omit for no border."
+      },
+      "borderStyle": {
+        "description": "Sets the CSS border style when `border` is set."
+      },
       "color": {
-        "description": "Sets the resting background using a base ramp layer or literal CSS color.",
-        "refCss": "background"
+        "description": "Sets the resting background using a base ramp layer (`1`–`3`) or a literal CSS color value."
       },
       "hoverColor": {
-        "description": "Sets the hover background on hover-capable pointers.",
-        "refCss": "background-hover"
+        "description": "Sets the hover background on hover-capable pointers using a base ramp layer (`1`–`3`) or literal CSS value."
       },
-      "borderStyle": {
-        "description": "Sets the CSS border style when border is set.",
-        "refCss": "border-style"
+      "hPadding": {
+        "description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."
       },
       "overflow": {
-        "description": "Sets root overflow through the surface overflow custom property.",
+        "description": "Sets root overflow through the `--vui-surface-overflow` custom property.",
         "refCss": "overflow"
       },
       "radius": {
-        "description": "Sets corner radius from tokens, a per-corner tuple, or auto for concentric radii.",
-        "refCss": "border-radius"
+        "description": "Sets corner radius from the Vira radius token scale, a per-corner `[top-left, top-right, bottom-right, bottom-left]` tuple (`0` for square corners), or `auto` for concentric radii from the nearest ancestor Surface."
       },
-      "hPadding": {
-        "description": "Sets inline padding using one token or a [start, end] tuple."
+      "ref": {
+        "description": "Ref forwarded to the rendered surface root element."
+      },
+      "render": {
+        "description": "Replaces the default `div` root using Base UI render semantics."
       },
       "vPadding": {
-        "description": "Sets block padding using one token or a [start, end] tuple."
+        "description": "Sets block padding using one token for both sides or a `[start, end]` tuple."
       }
     },
     "css": {
       "background": {
-        "description": "Resting surface background on the root.",
-        "refReact": "color"
+        "description": "Resting surface background on the root."
       },
       "background-hover": {
-        "description": "Hover surface background on the root.",
-        "refReact": "hoverColor"
+        "description": "Hover surface background on the root."
       },
-      "border-style": {
-        "description": "Border style when border is enabled.",
-        "refReact": "borderStyle"
+      "border-radius": {
+        "description": "Uniform corner radius when radius is a single token."
       },
-      "overflow": {
-        "description": "Root overflow behavior.",
-        "refReact": "overflow"
+      "border-radius-bottom-left": {
+        "description": "Bottom-left corner radius; radius tuple or auto resolves per corner."
       },
-      "border-radius": {
-        "description": "Uniform corner radius when radius is a single token.",
-        "refReact": "radius"
+      "border-radius-bottom-right": {
+        "description": "Bottom-right corner radius; radius tuple or auto resolves per corner."
       },
       "border-radius-top-left": {
-        "description": "Top-left corner radius; radius tuple or auto resolves per corner.",
-        "refReact": "radius"
+        "description": "Top-left corner radius; radius tuple or auto resolves per corner."
       },
       "border-radius-top-right": {
-        "description": "Top-right corner radius; radius tuple or auto resolves per corner.",
-        "refReact": "radius"
+        "description": "Top-right corner radius; radius tuple or auto resolves per corner."
       },
-      "border-radius-bottom-right": {
-        "description": "Bottom-right corner radius; radius tuple or auto resolves per corner.",
-        "refReact": "radius"
-      },
-      "border-radius-bottom-left": {
-        "description": "Bottom-left corner radius; radius tuple or auto resolves per corner.",
-        "refReact": "radius"
+      "border-style": {
+        "description": "Border style when border is enabled."
       },
-      "padding-inline-start": {
-        "description": "Inline-start padding when padding is enabled.",
-        "refReact": "hPadding"
+      "overflow": {
+        "description": "Root overflow behavior.",
+        "refReact": "overflow"
       },
-      "padding-inline-end": {
-        "description": "Inline-end padding when padding is enabled.",
-        "refReact": "hPadding"
+      "padding-block-end": {
+        "description": "Block-end padding when padding is enabled."
       },
       "padding-block-start": {
-        "description": "Block-start padding when padding is enabled.",
-        "refReact": "vPadding"
+        "description": "Block-start padding when padding is enabled."
       },
-      "padding-block-end": {
-        "description": "Block-end padding when padding is enabled.",
-        "refReact": "vPadding"
+      "padding-inline-end": {
+        "description": "Inline-end padding when padding is enabled."
+      },
+      "padding-inline-start": {
+        "description": "Inline-start padding when padding is enabled."
       }
     }
   }

package/dist/components/switch/switch.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-switch-track-block-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-switch-track-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-switch-track-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-switch-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-switch-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-switch-thumb-inset{syntax:"<length>";inherits:true;initial-value:0}.viraui__switch-module__Switch_L86y7{&:has([required]) .viraui__switch-module__Label_9R-rv:after{content:" ＊";color:var(--highlight-red)}}.viraui__switch-module__SwitchRoot_Zv9An{--vui-switch-track-block-size:var(--space-large);--vui-switch-track-radius:var(--radius-small);--vui-switch-track-background:var(--global-contrast);--vui-switch-thumb-background:var(--base-1);--vui-switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--vui-switch-thumb-inset:var(--space-2x-small);position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--vui-switch-thumb-size) * 2) + var(--vui-switch-thumb-inset) * 2);block-size:var(--vui-switch-track-block-size);background:var(--vui-switch-track-background);border-radius:var(--vui-switch-track-radius);&[data-size=small]{--vui-switch-track-radius:var(--radius-x-small);--vui-switch-track-block-size:var(--space-medium);--vui-switch-thumb-size:calc(var(--space-medium) - var(--space-x-small))}&[data-checked]:not([data-disabled]){--vui-switch-track-background:var(--global-primary);--vui-switch-thumb-background:contrast-color(var(--global-primary))}&[data-invalid]:not([data-disabled]),.viraui__switch-module__Switch_L86y7[data-invalid]>&:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.viraui__switch-module__Switch_L86y7[data-disabled]>&{--vui-switch-track-background:var(--global-disabled-background);--vui-switch-thumb-background:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__switch-module__Thumb_ldwJw{--switch-thumb-radius:calc(var(--vui-switch-track-radius) - var(--vui-switch-thumb-inset));position:absolute;inset-block:var(--vui-switch-thumb-inset);inset-inline-start:var(--vui-switch-thumb-inset);background:var(--vui-switch-thumb-background);inline-size:var(--vui-switch-thumb-size);block-size:var(--vui-switch-thumb-size);border-radius:var(--switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);box-shadow:0 0 1px 1px var(--global-contrast);.viraui__switch-module__SwitchRoot_Zv9An[data-checked]>&{translate:100% 0;box-shadow:none}.viraui__switch-module__SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-switch-track-block-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-switch-track-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-switch-track-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-switch-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-switch-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-switch-thumb-inset{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-thumb-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__switch-module__Switch_L86y7{&:has([required]) .viraui__switch-module__Label_9R-rv:after{content:" ＊";color:var(--highlight-red)}}.viraui__switch-module__SwitchRoot_Zv9An{--vui-switch-track-block-size:var(--space-large);--vui-switch-track-radius:var(--radius-small);--vui-switch-track-background:var(--global-contrast);--vui-switch-thumb-background:var(--base-1);--vui-switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--vui-switch-thumb-inset:var(--space-2x-small);position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--vui-switch-thumb-size) * 2) + var(--vui-switch-thumb-inset) * 2);block-size:var(--vui-switch-track-block-size);background:var(--vui-switch-track-background);border-radius:var(--vui-switch-track-radius);&[data-size=small]{--vui-switch-track-radius:var(--radius-x-small);--vui-switch-track-block-size:var(--space-medium);--vui-switch-thumb-size:calc(var(--space-medium) - var(--space-x-small))}&[data-checked]:not([data-disabled]){--vui-switch-track-background:var(--global-primary);--vui-switch-thumb-background:contrast-color(var(--global-primary))}&[data-invalid]:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled]{--vui-switch-track-background:var(--global-disabled-background);--vui-switch-thumb-background:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__switch-module__Thumb_ldwJw{--__switch-thumb-radius:calc(var(--vui-switch-track-radius) - var(--vui-switch-thumb-inset));position:absolute;inset-block:var(--vui-switch-thumb-inset);inset-inline-start:var(--vui-switch-thumb-inset);background:var(--vui-switch-thumb-background);inline-size:var(--vui-switch-thumb-size);block-size:var(--vui-switch-thumb-size);border-radius:var(--__switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);box-shadow:0 0 1px 1px var(--global-contrast);.viraui__switch-module__SwitchRoot_Zv9An[data-checked]>&{translate:100% 0;box-shadow:none}.viraui__switch-module__SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}}

package/dist/components/switch/switch.guide.json

@@ -23,19 +23,32 @@
   "related": ["Textfield", "Stack", "Text"],
   "properties": {
     "react": {
+      "description": {
+        "description": "Helper copy rendered with `Field.Description` and `Text` while the field is valid."
+      },
+      "error": {
+        "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while the field is invalid."
+      },
+      "hPadding": {
+        "description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."
+      },
+      "label": {
+        "description": "Visible label rendered with shared internal `FieldLabel`."
+      },
       "size": {
         "description": "Controls the visual switch size.",
         "refCss": "track-block-size"
+      },
+      "vPadding": {
+        "description": "Sets block padding using one token for both sides or a `[start, end]` tuple."
       }
     },
     "css": {
-      "track-block-size": {
-        "description": "Switch track block size; size presets adjust track and thumb.",
-        "refReact": "size"
+      "thumb-background": {
+        "description": "Switch thumb background color."
       },
-      "track-radius": {
-        "description": "Switch track corner radius.",
-        "refReact": "size"
+      "thumb-inset": {
+        "description": "Inset between thumb and track edges."
       },
       "thumb-size": {
         "description": "Switch thumb size derived from track block size.",
@@ -44,11 +57,13 @@
       "track-background": {
         "description": "Switch track background color."
       },
-      "thumb-background": {
-        "description": "Switch thumb background color."
+      "track-block-size": {
+        "description": "Switch track block size; size presets adjust track and thumb.",
+        "refReact": "size"
       },
-      "thumb-inset": {
-        "description": "Inset between thumb and track edges."
+      "track-radius": {
+        "description": "Switch track corner radius.",
+        "refReact": "size"
       }
     }
   }

package/dist/components/tabs/tabs.guide.json

@@ -22,6 +22,17 @@
   ],
   "related": ["Surface", "Stack", "Text"],
   "properties": {
+    "react": {
+      "listAlignment": {
+        "description": "Horizontal alignment of tab list within root Stack."
+      },
+      "Tab.addon": {
+        "description": "Decorative addon rendered alongside the tab label."
+      },
+      "Tab.addonPosition": {
+        "description": "Controls whether the addon appears before or after the label."
+      }
+    },
     "css": {
       "translate-amount": {
         "description": "Panel entry translate distance for tab transitions."

package/dist/components/text/text.css

@@ -1 +1 @@
-@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-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:none}@property --vui-text-trim-type{syntax:"*";inherits:false;initial-value:none}@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}.viraui__text-module__Text_bS8kv{--text-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--vui-text-font-family:var(--font-family-body);--vui-text-font-size:clamp(var(--font-scale-body-small),var(--text-medium),var(--font-scale-body-medium));--vui-text-line-height:var(--font-leading-standard);margin:0;min-inline-size: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);text-align:var(--vui-text-align);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-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=x-large]{--vui-text-font-size:clamp(var(--font-scale-body-large),calc(var(--text-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-body-x-large))}&[data-text-size=large]{--vui-text-font-size:clamp(var(--font-scale-body-medium),calc(var(--text-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-body-large))}&[data-text-size=medium]{--vui-text-font-size:clamp(var(--font-scale-body-small),var(--text-medium),var(--font-scale-body-medium))}&[data-text-size=small]{--vui-text-font-size:clamp(var(--font-scale-body-x-small),calc(var(--text-medium) * pow(var(--font-heading-typescale), -0.1)),var(--font-scale-body-small))}&[data-text-size=x-small]{--vui-text-font-size:var(--font-scale-body-x-small)}&[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=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=x-small]{--vui-text-line-height:var(--font-leading-x-small)}&[data-text-line-height=small]{--vui-text-line-height:var(--font-leading-small)}&[data-text-line-height=large]{--vui-text-line-height:var(--font-leading-large)}}}
+@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-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-medium{syntax:"*";inherits:false;initial-value:0}.viraui__text-module__Text_bS8kv{--__text-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--vui-text-font-family:var(--font-family-body);--vui-text-font-size:clamp(var(--font-scale-body-small),var(--__text-medium),var(--font-scale-body-medium));--vui-text-line-height:var(--font-leading-standard);margin:0;min-inline-size: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);text-align:var(--vui-text-align);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-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=x-large]{--vui-text-font-size:clamp(var(--font-scale-body-large),calc(var(--__text-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-body-x-large))}&[data-text-size=large]{--vui-text-font-size:clamp(var(--font-scale-body-medium),calc(var(--__text-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-body-large))}&[data-text-size=small]{--vui-text-font-size:clamp(var(--font-scale-body-x-small),calc(var(--__text-medium) * pow(var(--font-heading-typescale), -0.1)),var(--font-scale-body-small))}&[data-text-size=x-small]{--vui-text-font-size:var(--font-scale-body-x-small)}&[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=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=x-small]{--vui-text-line-height:var(--font-leading-x-small)}&[data-text-line-height=small]{--vui-text-line-height:var(--font-leading-small)}&[data-text-line-height=large]{--vui-text-line-height:var(--font-leading-large)}}}

package/dist/components/text/text.guide.json

@@ -24,55 +24,60 @@
         "description": "Aligns text using logical alignment values.",
         "refCss": "align"
       },
-      "maxWidth": {
-        "description": "Constrains the maximum inline size of the rendered text block.",
-        "refCss": "max-width"
+      "balanced": {
+        "description": "Enables balanced wrapping for block-like copy."
       },
       "color": {
-        "description": "Applies a literal color escape hatch when semantic tone is not used.",
-        "refCss": "literal-color"
-      },
-      "whiteSpace": {
-        "description": "Controls white-space preservation and wrapping behavior.",
-        "refCss": "white-space"
+        "description": "Applies a literal color escape hatch when semantic `tone` is not used."
       },
-      "weight": {
-        "description": "Numeric font weight; maps to font-weight and the wght variation axis.",
-        "refCss": "font-weight"
+      "family": {
+        "description": "Selects the semantic font family for body copy and inline code-like text."
       },
       "fontWidth": {
-        "description": "Font width as a percentage (100 = normal); maps to font-stretch and the wdth variation axis.",
-        "refCss": "font-width"
+        "description": "Overrides font width as a percentage (100 = normal); maps to `font-stretch` and `wdth`."
+      },
+      "hPadding": {
+        "description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."
+      },
+      "lineHeight": {
+        "description": "Controls line height through foundation leading tokens."
+      },
+      "maxWidth": {
+        "description": "Constrains the maximum inline size of the rendered text block."
       },
       "opticalSize": {
-        "description": "Optical size axis override (variable fonts); static fonts keep font-optical-sizing: auto.",
-        "refCss": "font-opsz"
+        "description": "Overrides the optical size (`opsz`) axis on variable fonts; static fonts keep `font-optical-sizing: auto`."
+      },
+      "ref": {
+        "description": "Ref forwarded to the rendered text root element."
+      },
+      "render": {
+        "description": "Replaces the default `span` root using Base UI render semantics."
+      },
+      "selection": {
+        "description": "Enables text selection on the rendered copy."
+      },
+      "size": {
+        "description": "Selects a semantic body typography size from the active theme scale."
+      },
+      "tone": {
+        "description": "Sets the semantic text color role when no literal `color` override is used."
       },
       "trim": {
-        "description": "Trims text box whitespace at the chosen edge.",
+        "description": "Trims text box whitespace at the chosen edge when the browser supports `text-box`.",
         "refCss": "trim"
       },
       "trimType": {
-        "description": "Selects the text-box trim basis when trim is active.",
-        "refCss": "trim-type"
-      },
-      "hPadding": {
-        "description": "Sets inline padding using one token or a [start, end] tuple."
+        "description": "Selects the `text-box` trim basis when `trim` is active."
       },
       "vPadding": {
-        "description": "Sets block padding using one token or a [start, end] tuple."
-      },
-      "size": {
-        "description": "Selects a semantic body typography size from the active theme scale.",
-        "refCss": "font-size"
+        "description": "Sets block padding using one token for both sides or a `[start, end]` tuple."
       },
-      "family": {
-        "description": "Selects the semantic font family for body copy.",
-        "refCss": "font-family"
+      "weight": {
+        "description": "Selects a semantic weight keyword or a numeric weight (`font-weight` + `wght` axis)."
       },
-      "lineHeight": {
-        "description": "Controls line height through foundation leading tokens.",
-        "refCss": "line-height"
+      "whiteSpace": {
+        "description": "Controls white-space preservation and wrapping behavior."
       }
     },
     "css": {
@@ -80,65 +85,51 @@
         "description": "Text alignment on the root.",
         "refReact": "align"
       },
-      "max-width": {
-        "description": "Max inline size of the text root.",
-        "refReact": "maxWidth"
+      "font-family": {
+        "description": "Font family; family prop presets via data attributes."
       },
-      "literal-color": {
-        "description": "Literal color override on the root.",
-        "refReact": "color"
+      "font-opsz": {
+        "description": "Optical size axis on the root (variable fonts)."
       },
-      "white-space": {
-        "description": "White-space behavior on the root.",
-        "refReact": "whiteSpace"
+      "font-size": {
+        "description": "Body font size; size prop presets via data attributes."
       },
       "font-weight": {
-        "description": "Font weight on the root.",
-        "refReact": "weight"
+        "description": "Font weight on the root; keyword presets or numeric via weight prop."
       },
       "font-width": {
-        "description": "Font width percentage on the root (font-stretch + wdth).",
-        "refReact": "fontWidth"
+        "description": "Font width percentage on the root (font-stretch + wdth)."
       },
-      "font-opsz": {
-        "description": "Optical size axis on the root (variable fonts).",
-        "refReact": "opticalSize"
-      },
-      "trim": {
-        "description": "Text-box trim mode on the root.",
-        "refReact": "trim"
+      "line-height": {
+        "description": "Line height; lineHeight prop presets via data attributes."
       },
-      "trim-type": {
-        "description": "Text-box trim basis on the root.",
-        "refReact": "trimType"
+      "literal-color": {
+        "description": "Literal color override on the root."
       },
-      "padding-inline-start": {
-        "description": "Inline-start padding when padding is enabled.",
-        "refReact": "hPadding"
+      "max-width": {
+        "description": "Max inline size of the text root."
       },
-      "padding-inline-end": {
-        "description": "Inline-end padding when padding is enabled.",
-        "refReact": "hPadding"
+      "padding-block-end": {
+        "description": "Block-end padding when padding is enabled."
       },
       "padding-block-start": {
-        "description": "Block-start padding when padding is enabled.",
-        "refReact": "vPadding"
+        "description": "Block-start padding when padding is enabled."
       },
-      "padding-block-end": {
-        "description": "Block-end padding when padding is enabled.",
-        "refReact": "vPadding"
+      "padding-inline-end": {
+        "description": "Inline-end padding when padding is enabled."
       },
-      "font-size": {
-        "description": "Body font size; size prop presets via data attributes.",
-        "refReact": "size"
+      "padding-inline-start": {
+        "description": "Inline-start padding when padding is enabled."
       },
-      "font-family": {
-        "description": "Font family; family prop presets via data attributes.",
-        "refReact": "family"
+      "trim": {
+        "description": "Text-box trim mode on the root.",
+        "refReact": "trim"
       },
-      "line-height": {
-        "description": "Line height; lineHeight prop presets via data attributes.",
-        "refReact": "lineHeight"
+      "trim-type": {
+        "description": "Text-box trim basis on the root."
+      },
+      "white-space": {
+        "description": "White-space behavior on the root."
       }
     }
   }