@viraui/react 1.0.11 → 1.0.13

package/dist/catalog.json

@@ -11,7 +11,7 @@
     {
       "id": "annotate",
       "name": "Annotate",
-      "summary": "Decorative CSS-only arrow and handwritten label that wraps inline content with optional highlighter mark.",
+      "summary": "Decorative arrow and handwritten label that wraps inline content with optional highlighter mark, positioned via CSS anchor positioning.",
       "guidePath": "./components/annotate/annotate.guide.json"
     },
     {
@@ -26,6 +26,12 @@
       "summary": "Overlapping avatar stack with shared sizing, directional layout, and an optional overflow pill.",
       "guidePath": "./components/avatar-group/avatar-group.guide.json"
     },
+    {
+      "id": "badge",
+      "name": "Badge",
+      "summary": "Decorative status-dot overlay that wraps a child, with optional radial mask cutout on the child around the corner dot.",
+      "guidePath": "./components/badge/badge.guide.json"
+    },
     {
       "id": "bleed",
       "name": "Bleed",

package/dist/components/accordion/accordion.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Accordion",
+  "structure": "<Accordion>\n  <Accordion.Item trigger=\"…\">…</Accordion.Item>\n</Accordion>",
   "summary": "Collapsible sections grouped into open/closed blocks with optional Surface wrapping, shared corner radius, and background on open items.",
   "whenToUse": [
     "Progressive disclosure for related content sections in one surface",

package/dist/components/annotate/annotate.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-annotate-color{syntax:"<color>";inherits:true;initial-value:#d16500}@property --vui-annotate-arrow-x{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-arrow-y{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-text-x{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-text-y{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-rotate{syntax:"<angle>";inherits:true;initial-value:-4deg}@property --vui-annotate-target-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-label-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-label-max-width{syntax:"<length>";inherits:true;initial-value:150px}.viraui__annotate-module__Annotate_7C36U{--vui-annotate-color:var(--highlight-yellow);--vui-annotate-target-gap:var(--space-small);--vui-annotate-label-gap:var(--space-x-small);position:relative;display:inline-block;overflow:visible;border-radius:var(--radius-x-small);&:before{content:"";z-index:3;width:46px;height:38px;transform-origin:50% 50%;mask:var(--_annotate-arrow-mask) center /contain no-repeat;background:var(--vui-annotate-color)}&:after,&:before{position:absolute;pointer-events:none}&:after{content:attr(data-note);z-index:4;width:max-content;max-width:var(--vui-annotate-label-max-width);transform:rotate(var(--vui-annotate-rotate));font-family:Segoe Print,Chalkboard,cursive,system-ui;font-size:.95rem;line-height:1.05;color:var(--vui-annotate-color);white-space:normal}&:not([data-note]):after,&:not([data-note]):before,&[data-note=""]:after,&[data-note=""]:before{display:none}&[data-mark=true]{background:oklab(from var(--vui-annotate-color) l a b/30%);box-shadow:-.3em 0 0 0 oklab(from var(--vui-annotate-color) l a b/30%),.3em 0 0 0 oklab(from var(--vui-annotate-color) l a b/30%)}&[data-side=top]:before{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M23 4c-1 9-1 20 0 31'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m17 29 6 7 6-7'/%3E%3C/svg%3E");left:calc(50% - 23px + var(--vui-annotate-arrow-x));top:calc(-1 * var(--vui-annotate-target-gap) - 35px + var(--vui-annotate-arrow-y))}&[data-side=top]:after{left:calc(50% + var(--vui-annotate-text-x));bottom:calc(100% + var(--vui-annotate-target-gap) + 31px + var(--vui-annotate-label-gap) - var(--vui-annotate-text-y));transform:translateX(-50%) rotate(var(--vui-annotate-rotate))}&[data-side=top-start]:before{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M6 6c10 2 22 14 34 26'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m36 22 4 10-10-4'/%3E%3C/svg%3E");left:calc(50% - 40px + var(--vui-annotate-arrow-x));top:calc(-1 * var(--vui-annotate-target-gap) - 32px + var(--vui-annotate-arrow-y));transform:translateX(-10%)}&[data-side=top-start]:after{left:calc(50% - 34px + var(--vui-annotate-text-x));bottom:calc(100% + var(--vui-annotate-target-gap) + 26px + var(--vui-annotate-label-gap) - var(--vui-annotate-text-y));transform:translateX(-60%) rotate(var(--vui-annotate-rotate))}&[data-side=start]:before{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M4 19c11-1 27-1 39 0'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m36 13 7 6-7 6'/%3E%3C/svg%3E");left:calc(-1 * var(--vui-annotate-target-gap) - 43px + var(--vui-annotate-arrow-x));top:calc(50% - 19px + var(--vui-annotate-arrow-y))}&[data-side=start]:after{right:calc(100% + var(--vui-annotate-target-gap) + 39px + var(--vui-annotate-label-gap) - var(--vui-annotate-text-x));top:calc(50% - 5px + var(--vui-annotate-text-y));transform:translateY(-50%) rotate(var(--vui-annotate-rotate))}&[data-side=bottom-start]:before{left:calc(50% - 40px + var(--vui-annotate-arrow-x));--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M6 32c10-2 22-14 34-26'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m30 10 10-4-4 10'/%3E%3C/svg%3E");top:calc(100% + var(--vui-annotate-target-gap) - 6px + var(--vui-annotate-arrow-y));transform:translateX(-10%)}&[data-side=bottom-start]:after{left:calc(50% - 34px + var(--vui-annotate-text-x));top:calc(100% + var(--vui-annotate-target-gap) + 26px + var(--vui-annotate-label-gap) + var(--vui-annotate-text-y));transform:translateX(-60%) rotate(var(--vui-annotate-rotate))}&[data-side=bottom]:before{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M23 35c-1-9-1-20 0-31'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m17 10 6-7 6 7'/%3E%3C/svg%3E");left:calc(50% - 23px + var(--vui-annotate-arrow-x));top:calc(100% + var(--vui-annotate-target-gap) - 4px + var(--vui-annotate-arrow-y))}&[data-side=bottom]:after{left:calc(50% + var(--vui-annotate-text-x));top:calc(100% + var(--vui-annotate-target-gap) + 31px + var(--vui-annotate-label-gap) + var(--vui-annotate-text-y));transform:translateX(-50%) rotate(var(--vui-annotate-rotate))}&[data-side=bottom-end]:before{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M40 32C30 30 18 18 6 6'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M16 10 6 6l4 10'/%3E%3C/svg%3E");left:calc(50% - 6px + var(--vui-annotate-arrow-x));top:calc(100% + var(--vui-annotate-target-gap) - 6px + var(--vui-annotate-arrow-y));transform:translateX(10%)}&[data-side=bottom-end]:after{left:calc(50% + 34px + var(--vui-annotate-text-x));top:calc(100% + var(--vui-annotate-target-gap) + 26px + var(--vui-annotate-label-gap) + var(--vui-annotate-text-y));transform:translateX(-40%) rotate(var(--vui-annotate-rotate))}&[data-side=end]:before{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M43 19c-11-1-28-1-40 0'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m10 13-7 6 7 6'/%3E%3C/svg%3E");left:calc(100% + var(--vui-annotate-target-gap) - 3px + var(--vui-annotate-arrow-x));top:calc(50% - 19px + var(--vui-annotate-arrow-y))}&[data-side=end]:after{left:calc(100% + var(--vui-annotate-target-gap) + 40px + var(--vui-annotate-label-gap) + var(--vui-annotate-text-x));top:calc(50% - 5px + var(--vui-annotate-text-y));transform:translateY(-50%) rotate(var(--vui-annotate-rotate))}&[data-side=top-end]:before{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M40 6C30 8 18 20 6 32'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10 22 6 32l10-4'/%3E%3C/svg%3E");left:calc(50% - 6px + var(--vui-annotate-arrow-x));top:calc(-1 * var(--vui-annotate-target-gap) - 32px + var(--vui-annotate-arrow-y));transform:translateX(10%)}&[data-side=top-end]:after{left:calc(50% + 34px + var(--vui-annotate-text-x));bottom:calc(100% + var(--vui-annotate-target-gap) + 26px + var(--vui-annotate-label-gap) - var(--vui-annotate-text-y));transform:translateX(-40%) rotate(var(--vui-annotate-rotate))}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-annotate-color{syntax:"<color>";inherits:true;initial-value:#d16500}@property --vui-annotate-arrow-x{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-arrow-y{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-text-x{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-text-y{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-rotate{syntax:"<angle>";inherits:true;initial-value:-4deg}@property --vui-annotate-target-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-label-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-label-max-width{syntax:"<length>";inherits:true;initial-value:150px}@property --vui-annotate-z-index{syntax:"*";inherits:true;initial-value:auto}@property --vui-annotate-text-align{syntax:"*";inherits:true;initial-value:start}.viraui__annotate-module__Annotate_7C36U{--vui-annotate-color:var(--global-foreground);--vui-annotate-target-gap:var(--space-small);--vui-annotate-label-gap:var(--space-x-small);--_annotate-tail-x:23px;--_annotate-tail-y:4px;--_annotate-note-align-x:-50%;--_annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap));anchor-name:--vui-annotate-target;anchor-scope:--vui-annotate-target,--vui-annotate-arrow;display:inline-block;overflow:visible;border-radius:var(--radius-x-small)}.viraui__annotate-module__Arrow_T4B-6{position:absolute;z-index:var(--vui-annotate-z-index);position-anchor:--vui-annotate-target;anchor-name:--vui-annotate-arrow;width:46px;height:38px;transform:translate(var(--vui-annotate-arrow-x),var(--vui-annotate-arrow-y));transform-origin:50% 50%;mask:var(--_annotate-arrow-mask) center /contain no-repeat;background:var(--vui-annotate-color);pointer-events:none}.viraui__annotate-module__Note_8UW-R{position:absolute;z-index:var(--vui-annotate-z-index);position-anchor:--vui-annotate-arrow;left:calc(anchor(left) + var(--_annotate-tail-x));top:calc(anchor(top) + var(--_annotate-tail-y));width:max-content;max-width:var(--vui-annotate-label-max-width);transform:translate(calc(var(--_annotate-note-align-x) + var(--vui-annotate-text-x)),calc(var(--_annotate-note-align-y) + var(--vui-annotate-text-y))) rotate(var(--vui-annotate-rotate));font-family:Segoe Print,Chalkboard SE,Marker Felt,Dancing Script,sans-serif,system-ui;font-size:.95rem;line-height:1.05;color:var(--vui-annotate-color);text-align:var(--vui-annotate-text-align);white-space:normal;pointer-events:none}.viraui__annotate-module__Annotate_7C36U[data-mark=true]{background:oklab(from var(--vui-annotate-color) l a b/30%);box-shadow:-.3em 0 0 0 oklab(from var(--vui-annotate-color) l a b/30%),.3em 0 0 0 oklab(from var(--vui-annotate-color) l a b/30%)}.viraui__annotate-module__Annotate_7C36U[data-side=top]{--_annotate-tail-x:23px;--_annotate-tail-y:4px;--_annotate-note-align-x:-50%;--_annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top] .viraui__annotate-module__Arrow_T4B-6{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M23 4c-1 9-1 20 0 31'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m17 29 6 7 6-7'/%3E%3C/svg%3E");position-area:block-start;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=top-start]{--_annotate-tail-x:6px;--_annotate-tail-y:6px;--_annotate-note-align-x:-50%;--_annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top-start] .viraui__annotate-module__Arrow_T4B-6{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M6 6c10 2 22 14 34 26'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m36 22 4 10-10-4'/%3E%3C/svg%3E");position-area:block-start inline-start;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=top-end]{--_annotate-tail-x:40px;--_annotate-tail-y:6px;--_annotate-note-align-x:-50%;--_annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top-end] .viraui__annotate-module__Arrow_T4B-6{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M40 6C30 8 18 20 6 32'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10 22 6 32l10-4'/%3E%3C/svg%3E");position-area:block-start inline-end;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom]{--_annotate-tail-x:23px;--_annotate-tail-y:35px;--_annotate-note-align-x:-50%;--_annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom] .viraui__annotate-module__Arrow_T4B-6{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M23 35c-1-9-1-20 0-31'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m17 10 6-7 6 7'/%3E%3C/svg%3E");position-area:block-end;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-start]{--_annotate-tail-x:6px;--_annotate-tail-y:32px;--_annotate-note-align-x:-50%;--_annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-start] .viraui__annotate-module__Arrow_T4B-6{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M6 32c10-2 22-14 34-26'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m30 10 10-4-4 10'/%3E%3C/svg%3E");position-area:block-end inline-start;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-end]{--_annotate-tail-x:40px;--_annotate-tail-y:32px;--_annotate-note-align-x:-50%;--_annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-end] .viraui__annotate-module__Arrow_T4B-6{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M40 32C30 30 18 18 6 6'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M16 10 6 6l4 10'/%3E%3C/svg%3E");position-area:block-end inline-end;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=start]{--_annotate-tail-x:4px;--_annotate-tail-y:19px;--_annotate-note-align-x:calc(-100% - var(--vui-annotate-label-gap));--_annotate-note-align-y:-50%}.viraui__annotate-module__Annotate_7C36U[data-side=start] .viraui__annotate-module__Arrow_T4B-6{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M4 19c11-1 27-1 39 0'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m36 13 7 6-7 6'/%3E%3C/svg%3E");position-area:inline-start;margin-inline-end:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=end]{--_annotate-tail-x:43px;--_annotate-tail-y:19px;--_annotate-note-align-x:var(--vui-annotate-label-gap);--_annotate-note-align-y:-50%}.viraui__annotate-module__Annotate_7C36U[data-side=end] .viraui__annotate-module__Arrow_T4B-6{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M43 19c-11-1-28-1-40 0'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m10 13-7 6 7 6'/%3E%3C/svg%3E");position-area:inline-end;margin-inline-start:var(--vui-annotate-target-gap)}}

package/dist/components/annotate/annotate.d.ts

@@ -11,11 +11,11 @@ export type AnnotateSide = 'top-start' | 'top' | 'top-end' | 'end' | 'bottom-end
  */
 export type AnnotateProps = React.ComponentPropsWithRef<'span'> & {
     /**
-     * Decorative label rendered via `::after` from `attr(data-note)`.
+     * Decorative label rendered in a presentational note span (not announced).
      *
-     * Do not put critical information here — assistive tech does not announce the pseudo label.
+     * Do not put critical information here — assistive tech does not announce the note.
      *
-     * @default No note; arrow and label pseudos stay hidden.
+     * @default No note; arrow and label stay hidden.
      */
     note?: string;
     /**
@@ -27,7 +27,7 @@ export type AnnotateProps = React.ComponentPropsWithRef<'span'> & {
     /**
      * Highlight token driving arrow, label, and optional mark color via `--vui-annotate-color`.
      *
-     * @default 'yellow'
+     * @default `var(--global-foreground)` when omitted
      */
     color?: ThemeTypes['highlight'];
     /**
@@ -84,5 +84,18 @@ export type AnnotateProps = React.ComponentPropsWithRef<'span'> & {
      * @default `300px`
      */
     labelMaxWidth?: string;
+    /**
+     * Stacking order for arrow and note via `--vui-annotate-z-index`.
+     * Same value on both parts.
+     *
+     * @default undefined (`auto`)
+     */
+    zIndex?: React.CSSProperties['zIndex'];
+    /**
+     * Text alignment for the note via `--vui-annotate-text-align`.
+     *
+     * @default undefined (`start`)
+     */
+    textAlign?: React.CSSProperties['textAlign'];
 };
 export declare const Annotate: React.FC<AnnotateProps>;

package/dist/components/annotate/annotate.guide.json

@@ -1,9 +1,10 @@
 {
   "name": "Annotate",
-  "summary": "Decorative CSS-only arrow and handwritten label that wraps inline content with optional highlighter mark.",
+  "structure": "<Annotate note=\"…\">…<span aria-hidden className={Arrow} /><span aria-hidden className={Note}>{note}</span></Annotate>",
+  "summary": "Decorative arrow and handwritten label that wraps inline content with optional highlighter mark, positioned via CSS anchor positioning.",
   "whenToUse": [
     "Call out a word or phrase in marketing, docs, or onboarding copy",
-    "Add a playful visual annotation without extra DOM nodes",
+    "Add a playful visual annotation without interactive chrome",
     "Highlight a target with an optional mark while keeping children as the real content"
   ],
   "whenNotToUse": [
@@ -12,40 +13,41 @@
     "Layouts that clip overflow and cannot leave room for the arrow and label"
   ],
   "accessibility": [
-    "Arrow and label are CSS pseudos — decorative only and not exposed to assistive tech",
+    "Arrow and note are presentational spans with aria-hidden — decorative only and not exposed to assistive tech",
     "Do not put critical information in note; keep real meaning in children or aria-describedby content",
     "Children retain native semantics; Annotate itself is a presentational span wrap"
   ],
   "antiPatterns": [
     "Using note as the only source of instructions or status",
     "Nesting Annotate inside overflow-hidden parents without padding for the arrow",
-    "Expecting the label to participate in hit-testing or selection"
+    "Expecting the label to participate in hit-testing or selection",
+    "Adding position:relative on Annotate — it breaks CSS anchor position-area placement"
   ],
   "related": ["Text", "Title", "Tooltip", "Chip"],
   "properties": {
     "react": {
       "color": {
-        "description": "Highlight token driving arrow, label, and optional mark color via --vui-annotate-color.",
+        "description": "Highlight token driving arrow, label, and optional mark color via --vui-annotate-color. When omitted, falls back to var(--global-foreground).",
         "refCss": "color"
       },
       "arrowOffsetX": {
-        "description": "Horizontal offset for the arrow pseudo.",
+        "description": "Horizontal offset for the arrow part.",
         "refCss": "arrow-x"
       },
       "arrowOffsetY": {
-        "description": "Vertical offset for the arrow pseudo.",
+        "description": "Vertical offset for the arrow part.",
         "refCss": "arrow-y"
       },
       "textOffsetX": {
-        "description": "Horizontal offset for the label pseudo.",
+        "description": "Horizontal offset for the note part.",
         "refCss": "text-x"
       },
       "textOffsetY": {
-        "description": "Vertical offset for the label pseudo.",
+        "description": "Vertical offset for the note part.",
         "refCss": "text-y"
       },
       "rotate": {
-        "description": "Rotation for the label via --vui-annotate-rotate.",
+        "description": "Rotation for the note via --vui-annotate-rotate.",
         "refCss": "rotate"
       },
       "targetGap": {
@@ -53,17 +55,25 @@
         "refCss": "target-gap"
       },
       "labelGap": {
-        "description": "Gap between arrow and label on all sides.",
+        "description": "Gap between arrow and note on all sides.",
         "refCss": "label-gap"
       },
       "labelMaxWidth": {
-        "description": "Max width for the label pseudo.",
+        "description": "Max width for the note part.",
         "refCss": "label-max-width"
+      },
+      "zIndex": {
+        "description": "Stacking order for arrow and note via --vui-annotate-z-index. Same value on both. When omitted, auto.",
+        "refCss": "z-index"
+      },
+      "textAlign": {
+        "description": "Text alignment for the note via --vui-annotate-text-align. When omitted, start.",
+        "refCss": "text-align"
       }
     },
     "css": {
       "color": {
-        "description": "Arrow, label, and mark accent color.",
+        "description": "Arrow, note, and mark accent color. Defaults to var(--global-foreground).",
         "refReact": "color"
       },
       "arrow-x": {
@@ -75,15 +85,15 @@
         "refReact": "arrowOffsetY"
       },
       "text-x": {
-        "description": "Horizontal label offset.",
+        "description": "Horizontal note offset.",
         "refReact": "textOffsetX"
       },
       "text-y": {
-        "description": "Vertical label offset.",
+        "description": "Vertical note offset.",
         "refReact": "textOffsetY"
       },
       "rotate": {
-        "description": "Label rotation angle.",
+        "description": "Note rotation angle.",
         "refReact": "rotate"
       },
       "target-gap": {
@@ -91,12 +101,20 @@
         "refReact": "targetGap"
       },
       "label-gap": {
-        "description": "Gap between arrow and label on all sides.",
+        "description": "Gap between arrow and note on all sides.",
         "refReact": "labelGap"
       },
       "label-max-width": {
-        "description": "Max width for the label pseudo.",
+        "description": "Max width for the note part.",
         "refReact": "labelMaxWidth"
+      },
+      "z-index": {
+        "description": "Stacking order for arrow and note. Defaults to auto.",
+        "refReact": "zIndex"
+      },
+      "text-align": {
+        "description": "Text alignment for the note. Defaults to start.",
+        "refReact": "textAlign"
       }
     }
   }

package/dist/components/annotate/annotate.js

@@ -1,9 +1,9 @@
 import './annotate.css';
 import { clsx } from "../../core/clsx.js";
 import annotate_module_default from "./annotate.module.js";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/annotate/annotate.tsx
-var Annotate = ({ arrowOffsetX, arrowOffsetY, children, className, color = "yellow", labelGap, labelMaxWidth = "300px", mark = false, note, ref, rotate, side = "top", style, targetGap, textOffsetX, textOffsetY, ...otherProps }) => {
+var Annotate = ({ arrowOffsetX, arrowOffsetY, children, className, color, labelGap, labelMaxWidth = "300px", mark = false, note, ref, rotate, side = "top", style, targetGap, textAlign, textOffsetX, textOffsetY, zIndex, ...otherProps }) => {
 	const dynamicStyle = {
 		...color && { "--vui-annotate-color": `var(--highlight-${color})` },
 		...arrowOffsetX && { "--vui-annotate-arrow-x": arrowOffsetX },
@@ -14,17 +14,25 @@ var Annotate = ({ arrowOffsetX, arrowOffsetY, children, className, color = "yell
 		...targetGap && { "--vui-annotate-target-gap": targetGap },
 		...labelGap && { "--vui-annotate-label-gap": labelGap },
 		...labelMaxWidth && { "--vui-annotate-label-max-width": labelMaxWidth },
+		...zIndex != null && { "--vui-annotate-z-index": zIndex },
+		...textAlign && { "--vui-annotate-text-align": textAlign },
 		...style
 	};
-	return /* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsxs("span", {
 		...otherProps,
 		ref,
 		className: clsx(annotate_module_default.Annotate, className),
 		"data-mark": mark ? "true" : void 0,
-		"data-note": note,
 		"data-side": side,
 		style: dynamicStyle,
-		children
+		children: [children, note && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: annotate_module_default.Arrow
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: annotate_module_default.Note,
+			children: note
+		})] })]
 	});
 };
 //#endregion

package/dist/components/annotate/annotate.module.js

@@ -1,5 +1,11 @@
 //#region src/components/annotate/annotate.module.css
 var Annotate = "viraui__annotate-module__Annotate_7C36U";
-var annotate_module_default = { Annotate };
+var Arrow = "viraui__annotate-module__Arrow_T4B-6";
+var Note = "viraui__annotate-module__Note_8UW-R";
+var annotate_module_default = {
+	Annotate,
+	Arrow,
+	Note
+};
 //#endregion
-export { Annotate, annotate_module_default as default };
+export { Annotate, Arrow, Note, annotate_module_default as default };

package/dist/components/avatar/avatar.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Avatar",
+  "structure": "<Avatar fallback=\"AB\" />",
   "summary": "Circular identity image or fallback for users, entities, or profile chips.",
   "whenToUse": [
     "Show a user or entity photo with text or image fallback",

package/dist/components/avatar-group/avatar-group.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "AvatarGroup",
+  "structure": "<AvatarGroup avatars={[{ fallback: \"AB\" }]} />",
   "summary": "Overlapping avatar stack with shared sizing, directional layout, and an optional overflow pill.",
   "whenToUse": [
     "Show a compact list of people or entities with consistent avatar sizing",

package/dist/components/badge/badge.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-badge-size{syntax:"<length>";inherits:true;initial-value:12px}@property --vui-badge-color{syntax:"<color>";inherits:true;initial-value:#292929}@property --_badge-hole-progress{syntax:"<number>";inherits:true;initial-value:0}.viraui__badge-module__Badge_lJqlY{--vui-badge-color:var(--global-primary);--vui-badge-size:0.074rem;--vui-badge-position-x:100%;--vui-badge-position-y:0%;--_badge-gap:calc(var(--vui-badge-size) * 0.25);--_badge-mask-size:calc(var(--vui-badge-size) / 2 + var(--_badge-gap));--_badge-hole-progress:0;position:relative;display:inline-flex;&[data-position=top-end]{--vui-badge-position-x:100%;--vui-badge-position-y:0%}&[data-position=top-start]{--vui-badge-position-x:0%;--vui-badge-position-y:0%}&[data-position=bottom-end]{--vui-badge-position-x:100%;--vui-badge-position-y:100%}&[data-position=bottom-start]{--vui-badge-position-x:0%;--vui-badge-position-y:100%}&>*{outline-offset:-4px}&[data-show=true]{&:after{content:"";width:var(--vui-badge-size);aspect-ratio:1;display:block;border-radius:100000px;background:var(--vui-badge-color);position:absolute;left:calc(var(--vui-badge-position-x) - min(var(--vui-badge-position-x), var(--vui-badge-size)));top:calc(var(--vui-badge-position-y) - min(var(--vui-badge-position-y), var(--vui-badge-size)));pointer-events:none;transform-origin:center}&:not([data-exit]):after{transform:scale(0);animation:viraui__badge-module__badge-dot-in_SKMx8 var(--duration-fast) var(--easing-entrance) 60ms forwards}&[data-exit]:after{transform:scale(1);animation:viraui__badge-module__badge-dot-out_vWhcP var(--duration-fast) var(--easing-entrance) forwards}&>*{mask-image:radial-gradient(circle at calc(var(--vui-badge-position-x) - min(var(--vui-badge-position-x), var(--vui-badge-size)) + (var(--vui-badge-size) / 2)) calc(var(--vui-badge-position-y) - min(var(--vui-badge-position-y), var(--vui-badge-size)) + (var(--vui-badge-size) / 2)),#0000 0 calc(var(--_badge-mask-size) * var(--_badge-hole-progress)),red calc(var(--_badge-mask-size) * var(--_badge-hole-progress) + 1px))}&:not([data-exit])>*{animation:viraui__badge-module__badge-hole-in_71iZP var(--duration-fast) var(--easing-entrance) forwards}&[data-exit]>*{--_badge-hole-progress:1;animation:viraui__badge-module__badge-hole-out_JCHCf var(--duration-fast) var(--easing-entrance) 60ms forwards}@media (prefers-reduced-motion:reduce){&:after{transform:none}&:after,&>*{animation:none}&>*{--_badge-hole-progress:1}&[data-exit]>*{--_badge-hole-progress:0}}}}@keyframes viraui__badge-module__badge-hole-in_71iZP{0%{--_badge-hole-progress:0}to{--_badge-hole-progress:1}}@keyframes viraui__badge-module__badge-hole-out_JCHCf{0%{--_badge-hole-progress:1}to{--_badge-hole-progress:0}}@keyframes viraui__badge-module__badge-dot-in_SKMx8{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes viraui__badge-module__badge-dot-out_vWhcP{0%{transform:scale(1)}to{transform:scale(0)}}}

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,39 @@
+import { ThemeTypes } from '@viraui/foundation/vira/types';
+import type * as React from 'react';
+export type BadgePosition = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';
+/**
+ * Public Badge props.
+ *
+ * Includes standard `div` attributes such as `children`, `id`, `className`, and event handlers,
+ * plus Vira-owned decorative status-dot controls.
+ *
+ * @default Native div pass-through props keep React defaults.
+ */
+export type BadgeProps = React.ComponentPropsWithRef<'div'> & {
+    /**
+     * Diameter of the status dot via `--vui-badge-size`.
+     *
+     * @default '12px'
+     */
+    size?: string;
+    /**
+     * Highlight token driving the status-dot color via `--vui-badge-color`.
+     *
+     * @default `var(--global-primary)` when omitted
+     */
+    color?: ThemeTypes['highlight'];
+    /**
+     * When true, shows the decorative status dot and applies the radial mask cutout.
+     * Enter: hole expands, then the dot scales in. Exit: reverse (dot then hole).
+     *
+     * @default false
+     */
+    show?: boolean;
+    /**
+     * Places the status dot on a corner of the wrapped content.
+     *
+     * @default 'top-end'
+     */
+    position?: BadgePosition;
+};
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/badge/badge.guide.json

@@ -0,0 +1,55 @@
+{
+  "name": "Badge",
+  "structure": "<Badge>{child}</Badge>",
+  "summary": "Decorative status-dot overlay that wraps a child, with optional radial mask cutout on the child around the corner dot.",
+  "whenToUse": [
+    "Show online/offline or presence on an Avatar or icon without changing the child component API",
+    "Mark a control as needing attention with a small corner indicator",
+    "Keep Chip for labeled text badges; use Badge only for the status-dot overlay"
+  ],
+  "whenNotToUse": [
+    "Conveying critical status that assistive tech must announce — put real meaning in the child name or nearby text",
+    "Labeled text badges or tags — use Chip",
+    "Count or text inside a pill — out of scope for v1"
+  ],
+  "accessibility": [
+    "The status dot is a decorative ::after pseudo — not exposed to assistive tech",
+    "Do not rely on the dot alone for status; keep real meaning in the child's accessible name or nearby text",
+    "Children retain native semantics; Badge itself is a presentational div wrap",
+    "Enter/exit motion (hole↔dot, reverse on hide) is suppressed under prefers-reduced-motion"
+  ],
+  "antiPatterns": [
+    "Using the visible dot as the only source of status for assistive tech",
+    "Wrapping multiple element children when only one should receive the radial mask cutout",
+    "Expecting the dot to participate in hit-testing"
+  ],
+  "related": ["Avatar", "AvatarGroup", "Chip", "Annotate"],
+  "properties": {
+    "react": {
+      "size": {
+        "description": "Diameter of the status dot via --vui-badge-size. Defaults to 12px.",
+        "refCss": "size"
+      },
+      "color": {
+        "description": "Highlight token driving the status-dot color via --vui-badge-color. When omitted, falls back to var(--global-primary).",
+        "refCss": "color"
+      },
+      "show": {
+        "description": "When true, shows the decorative status dot and applies the radial mask cutout to the direct child. Enter: hole expands from center, then the dot scales in. Exit: reverse (dot then hole). Defaults to false."
+      },
+      "position": {
+        "description": "Corner placement for the status dot (top-end, top-start, bottom-end, bottom-start). Defaults to top-end."
+      }
+    },
+    "css": {
+      "size": {
+        "description": "Status-dot diameter. Defaults to 12px.",
+        "refReact": "size"
+      },
+      "color": {
+        "description": "Status-dot accent color. Defaults to var(--global-primary).",
+        "refReact": "color"
+      }
+    }
+  }
+}

package/dist/components/badge/badge.js

@@ -0,0 +1,50 @@
+import './badge.css';
+import { clsx } from "../../core/clsx.js";
+import badge_module_default from "./badge.module.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+//#region src/components/badge/badge.tsx
+var prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+var Badge = ({ size = "10px", children, className, color, position = "top-end", ref, show = false, style, ...otherProps }) => {
+	const [present, setPresent] = useState(show);
+	const [exiting, setExiting] = useState(false);
+	useEffect(() => {
+		if (show) {
+			setPresent(true);
+			setExiting(false);
+			return;
+		}
+		if (!present) return;
+		if (prefersReducedMotion()) {
+			setPresent(false);
+			setExiting(false);
+			return;
+		}
+		setExiting(true);
+	}, [show, present]);
+	const handleAnimationEnd = (event) => {
+		if (!exiting) return;
+		if (!(event.target instanceof HTMLElement) || event.target.parentElement !== event.currentTarget) return;
+		if (!event.animationName.includes("badge-hole-out")) return;
+		setPresent(false);
+		setExiting(false);
+	};
+	const dynamicStyle = {
+		"--vui-badge-size": size,
+		...color && { "--vui-badge-color": `var(--highlight-${color})` },
+		...style
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...otherProps,
+		ref,
+		className: clsx(badge_module_default.Badge, className),
+		"data-exit": exiting ? "true" : void 0,
+		"data-position": position,
+		"data-show": present ? "true" : void 0,
+		style: dynamicStyle,
+		onAnimationEnd: handleAnimationEnd,
+		children
+	});
+};
+//#endregion
+export { Badge };

package/dist/components/badge/badge.module.js

@@ -0,0 +1,11 @@
+//#region src/components/badge/badge.module.css
+var Badge = "viraui__badge-module__Badge_lJqlY";
+var badge_module_default = {
+	Badge,
+	"badge-dot-in": "viraui__badge-module__badge-dot-in_SKMx8",
+	"badge-dot-out": "viraui__badge-module__badge-dot-out_vWhcP",
+	"badge-hole-in": "viraui__badge-module__badge-hole-in_71iZP",
+	"badge-hole-out": "viraui__badge-module__badge-hole-out_JCHCf"
+};
+//#endregion
+export { Badge, badge_module_default as default };

package/dist/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './badge';
+export type { BadgePosition, BadgeProps } from './badge';

package/dist/components/bleed/bleed.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Bleed",
+  "structure": "<Bleed>…</Bleed>",
   "summary": "Layout utility that pulls content past inline padding using negative margins or full viewport bleed.",
   "whenToUse": [
     "Edge-to-edge media or dividers inside padded Surface or Stack containers",

package/dist/components/button/button-link.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "ButtonLink",
+  "structure": "<ButtonLink href=\"#\">Save</ButtonLink>",
   "summary": "Navigation link that shares Button visual chrome (--vui-button-* CSS) and default a root with optional render for framework Link.",
   "whenToUse": [
     "Actions that navigate (href or router Link) but should look like Button",

package/dist/components/button/button-link.js

@@ -1,7 +1,7 @@
 import { ButtonChromeChildren, getButtonChromeRootAttrs } from "./button-chrome.js";
 import { jsx } from "react/jsx-runtime";
-import { useRender } from "@base-ui/react/use-render";
 import "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/button/button-link.tsx
 var ButtonLink = ({ children, className, disabled = false, addon, addonPosition = "start", loading = false, pill = false, size = "medium", variant = "primary", render, ref, onClick, ...otherProps }) => {
 	const isDisabled = disabled || loading;

package/dist/components/button/button.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Button",
+  "structure": "<Button>Save</Button>",
   "summary": "Primary action control with size, variant, optional addon, optional pill shape, and loading state.",
   "whenToUse": [
     "Labeled actions with text and optional leading or trailing addon",

package/dist/components/button/button.js

@@ -1,9 +1,9 @@
 import './button.css';
 import { ButtonChromeChildren, getButtonChromeRootAttrs } from "./button-chrome.js";
 import { jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
-import * as React from "react";
 //#region src/components/button/button.tsx
 function usesButtonPrimitiveRender(render) {
 	return render === void 0 || React.isValidElement(render) && render.type === "button";

package/dist/components/checkbox/checkbox.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Checkbox",
+  "structure": "<Checkbox label=\"…\" />",
   "summary": "Field.Item checkbox option for standalone fields or CheckboxGroup children.",
   "whenToUse": [
     "Single boolean fields wrapped in Field.Root with optional label and helper text — no Fieldset required",

package/dist/components/chip/chip.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Chip",
+  "structure": "<Chip>Label</Chip>",
   "summary": "Compact visual label primitive for short status, category, or metadata treatments.",
   "whenToUse": [
     "Short, non-interactive labels that need a compact pill treatment",

package/dist/components/chip/chip.js

@@ -3,8 +3,8 @@ import { clsx } from "../../core/clsx.js";
 import { Stack } from "../stack/stack.js";
 import chip_module_default from "./chip.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRender } from "@base-ui/react/use-render";
 import "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/chip/chip.tsx
 var Chip = ({ addon, addonPosition = "start", children, className, ref, render, variant = "primary", ...otherProps }) => {
 	const content = /* @__PURE__ */ jsxs(Stack, {

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

@@ -1,5 +1,6 @@
 {
   "name": "ClampText",
+  "structure": "<ClampText>…</ClampText>",
   "summary": "Presentational utility that truncates overflowing copy to a fixed line count.",
   "whenToUse": [
     "Single- or multi-line ellipsis in constrained layouts",

package/dist/components/clamp-text/clamp-text.js

@@ -2,8 +2,8 @@
 import './clamp-text.css';
 import { clsx } from "../../core/clsx.js";
 import clamp_text_module_default from "./clamp-text.module.js";
-import { useRender } from "@base-ui/react/use-render";
 import { useMemo } from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/clamp-text/clamp-text.tsx
 var ClampText = ({ className, inline = false, ref, render, rows = 1, style, ...otherProps }) => {
 	const dynamicStyle = useMemo(() => ({ "--vui-clamp-text-rows": rows }), [rows]);

package/dist/components/dialog/dialog-sheet.js

@@ -49,7 +49,7 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 				hPadding: "medium",
 				fillChildren: false,
 				children: [/* @__PURE__ */ jsx(Drawer.Title, {
-					render: /* @__PURE__ */ jsx(Title, { level: "h4" }),
+					render: /* @__PURE__ */ jsx(Title, { size: "4" }),
 					children: title
 				}), description && /* @__PURE__ */ jsx(Drawer.Description, {
 					render: /* @__PURE__ */ jsx(Text, {

package/dist/components/dialog/dialog.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Dialog",
+  "structure": "<Dialog>\n  <Dialog.Trigger />\n  <Dialog.Sheet title=\"…\">…</Dialog.Sheet>\n</Dialog>",
   "summary": "Compound drawer sheet with `Dialog.Trigger`, `Dialog.Sheet`, `Dialog.Close`, and Base UI pass-through `Dialog.Provider`, `Dialog.Indent`, and `Dialog.IndentBackground` for app-shell indent effects.",
   "whenToUse": [
     "Focused tasks or confirmations that interrupt the current page without navigation",

package/dist/components/elevator/elevator.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Elevator",
+  "structure": "<Elevator resting={1}>…</Elevator>",
   "summary": "No-DOM elevation utility that merges shadow hooks onto valid element children.",
   "whenToUse": [
     "Apply resting and optional hover elevation to existing elements",

package/dist/components/fieldset/fieldset.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Fieldset",
+  "structure": "<Fieldset label=\"…\">…</Fieldset>",
   "summary": "Semantic field grouping with shared legend and optional group helper copy.",
   "whenToUse": [
     "Section legends for multiple related fields — billing details with Textfield, Textarea, or Select children",

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

@@ -1,5 +1,6 @@
 {
   "name": "FitText",
+  "structure": "<FitText>…</FitText>",
   "summary": "CSS-only fit-to-width wrapper that scales children to fill available inline space.",
   "whenToUse": [
     "Headlines or short copy that should fill a constrained inline width",

package/dist/components/icon-button/icon-button-link.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "IconButtonLink",
+  "structure": "<IconButtonLink href=\"#\" icon={<Plus />} aria-label=\"Add\" />",
   "summary": "Icon-only navigation link that requires an accessible name; wraps ButtonLink.",
   "whenToUse": [
     "Compact toolbar or chrome navigation identified only by icon",

package/dist/components/icon-button/icon-button.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "IconButton",
+  "structure": "<IconButton icon={<Plus />} aria-label=\"Add\" />",
   "summary": "Icon-only button that requires an accessible name through aria-label or aria-labelledby.",
   "whenToUse": [
     "Compact toolbar or chrome actions identified only by icon",

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './accordion';
 export * from './annotate';
 export * from './avatar';
 export * from './avatar-group';
+export * from './badge';
 export * from './bleed';
 export * from './button';
 export * from './checkbox';

package/dist/components/linear-progress/linear-progress.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "LinearProgress",
+  "structure": "<LinearProgress value={40} />",
   "summary": "Shows determinate or indeterminate progress for a task in a compact horizontal track.",
   "whenToUse": [
     "Use for task completion with a known percentage or bounded numeric value.",

package/dist/components/masonry/masonry.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Masonry",
+  "structure": "<Masonry>\n  <Masonry.Item>…</Masonry.Item>\n</Masonry>",
   "summary": "Responsive React-column layout primitive for read-only mixed-height content walls.",
   "whenToUse": [
     "Card walls, gallery-like collections, and editorial layouts with uneven item heights",

package/dist/components/masonry/masonry.js

@@ -6,8 +6,8 @@ import { Stack } from "../stack/stack.js";
 import masonry_module_default from "./masonry.module.js";
 import { MasonryItem } from "./masonry-item.js";
 import { jsx } from "react/jsx-runtime";
-import { useRender } from "@base-ui/react/use-render";
 import { Children, useEffect, useRef, useState } from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/masonry/masonry.tsx
 var DEFAULT_BREAKPOINT_COLS = {
 	default: 1,

package/dist/components/meter/meter.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Meter",
+  "structure": "<Meter value={40} />",
   "summary": "Shows a determinate metric in a compact horizontal track for static capacity, level, or score values.",
   "whenToUse": [
     "Use for storage usage, battery level, capacity, or score within a known range.",

package/dist/components/popover/popover-sheet.js

@@ -48,7 +48,7 @@ var PopoverSheet = ({ unstyled, title, description, children, showCloseButton =
 					children: [/* @__PURE__ */ jsx(Popover.Title, {
 						render: /* @__PURE__ */ jsx(Title, {
 							align: headerAlign,
-							level: "h6",
+							size: "6",
 							lineHeight: "x-small"
 						}),
 						children: title

package/dist/components/popover/popover.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Popover",
+  "structure": "<Popover>\n  <Popover.Trigger />\n  <Popover.Sheet title=\"…\">…</Popover.Sheet>\n</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 triggers; `Sheet` encapsulates Portal + Positioner + Popup + Viewport + Title + Description and animates position, size, and content between triggers; `Sheet` with `unstyled` skips the built-in Surface and header so the consumer composes the popup chrome, including `Popover.Title` and `Popover.Description`.",
   "whenToUse": [
     "Anchored quick actions or contextual hints next to a triggering control",

package/dist/components/progressive-blur/progressive-blur.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "ProgressiveBlur",
+  "structure": "<ProgressiveBlur />",
   "summary": "Decorative stacked backdrop-filter overlay that ramps blur from one edge toward the opposite edge.",
   "whenToUse": [
     "Edge scrims on cards, sheets, heroes, or scroll regions where content should fade into blur",

package/dist/components/radio/radio.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Radio",
+  "structure": "<RadioGroup>\n  <Radio value=\"…\" label=\"…\" />\n</RadioGroup>",
   "summary": "Mutually exclusive choice within a RadioGroup, with optional per-option label and helper text.",
   "whenToUse": [
     "Single selection from a small set of related options inside RadioGroup",

package/dist/components/select/select.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Select",
+  "structure": "<Select>\n  <Select.Option value=\"…\">…</Select.Option>\n  <Select.Group label=\"…\">\n    <Select.Option value=\"…\">…</Select.Option>\n  </Select.Group>\n  <Select.Separator />\n</Select>",
   "summary": "Field-wrapped single-select dropdown with grouped options and field copy.",
   "whenToUse": [
     "Choose one value from a predefined list with label and helper copy",

package/dist/components/separator/separator.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Separator",
+  "structure": "<Separator />",
   "summary": "Thematic or content divider with horizontal or vertical orientation, token padding, and preset line thickness.",
   "whenToUse": [
     "Dividing sections within a page or panel",

package/dist/components/shimmer/shimmer.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Shimmer",
+  "structure": "<Shimmer>…</Shimmer>",
   "summary": "Decorative inline text shimmer that inherits typography and color from a parent text primitive.",
   "whenToUse": [
     "Loading placeholder copy inside Text or Title",

package/dist/components/skeleton/skeleton.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Skeleton",
+  "structure": "<Skeleton />",
   "summary": "Decorative loading placeholder sized by props, not children.",
   "whenToUse": [
     "Placeholder blocks while content loads",

package/dist/components/slider/slider.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Slider",
+  "structure": "<Slider />",
   "summary": "Field-wrapped range input supporting single-thumb or two-thumb range selection.",
   "whenToUse": [
     "Numeric value selection on a horizontal or vertical axis",

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

@@ -1,5 +1,6 @@
 {
   "name": "Spinner",
+  "structure": "<Spinner />",
   "summary": "Decorative SVG pulsing loading indicator used inside interactive components.",
   "whenToUse": [
     "Inline loading overlay inside Button or IconButton",

package/dist/components/stack/stack.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-stack-row-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-column-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-h-align{syntax:"*";inherits:false;initial-value:initial}@property --vui-stack-v-align{syntax:"*";inherits:false;initial-value:initial}@property --vui-stack-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-stack-min-width{syntax:"*";inherits:false;initial-value:none}.viraui__stack-module__Stack_NR-Ey{container:stack/inline-size block-size;display:flex;gap:var(--vui-stack-row-gap) var(--vui-stack-column-gap);flex-direction:column;align-items:var(--vui-stack-h-align);justify-content:var(--vui-stack-v-align);max-inline-size:var(--vui-stack-max-width);min-inline-size:var(--vui-stack-min-width);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--vui-stack-v-align);justify-content:var(--vui-stack-h-align)}&[data-stack-direction=row]{flex-direction:row}&[data-stack-direction=row-reverse]{flex-direction:row-reverse}&[data-stack-inline=true]{display:inline-flex;flex-grow:0}:where(&[data-stack-wrap=true]){flex-wrap:wrap}:where(&[data-stack-has-padding=true]){padding:var(--vui-stack-padding-block-start) var(--vui-stack-padding-inline-end) var(--vui-stack-padding-block-end) var(--vui-stack-padding-inline-start)}:where(&[data-stack-fill-children=true]>*){flex-grow:var(--vira-flex-grow,1)}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-stack-row-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-column-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-h-align{syntax:"*";inherits:false;initial-value:initial}@property --vui-stack-v-align{syntax:"*";inherits:false;initial-value:initial}@property --vui-stack-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-stack-min-width{syntax:"*";inherits:false;initial-value:none}.viraui__stack-module__Stack_NR-Ey{display:flex;gap:var(--vui-stack-row-gap) var(--vui-stack-column-gap);flex-direction:column;align-items:var(--vui-stack-h-align);justify-content:var(--vui-stack-v-align);max-inline-size:var(--vui-stack-max-width);min-inline-size:var(--vui-stack-min-width);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--vui-stack-v-align);justify-content:var(--vui-stack-h-align)}&[data-stack-direction=row]{flex-direction:row}&[data-stack-direction=row-reverse]{flex-direction:row-reverse}&[data-stack-inline=true]{display:inline-flex;flex-grow:0}:where(&[data-stack-wrap=true]){flex-wrap:wrap}:where(&[data-stack-has-padding=true]){padding:var(--vui-stack-padding-block-start) var(--vui-stack-padding-inline-end) var(--vui-stack-padding-block-end) var(--vui-stack-padding-inline-start)}:where(&[data-stack-fill-children=true]>*){flex-grow:var(--vira-flex-grow,1)}}}

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

@@ -1,5 +1,6 @@
 {
   "name": "Stack",
+  "structure": "<Stack>…</Stack>",
   "summary": "Flex layout primitive for arranging children with token spacing, alignment, and padding; root is a named CSS container query context (`stack`).",
   "whenToUse": [
     "Column or row layouts with token gap and alignment",

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

@@ -1,5 +1,6 @@
 {
   "name": "StaticNoise",
+  "structure": "<StaticNoise />",
   "summary": "Decorative SVG turbulence noise overlay for textured surfaces and hero sections.",
   "whenToUse": [
     "Subtle grain or texture overlay on cards, panels, or hero sections",

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);container:surface/inline-size block-size;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-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)}}}}

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

@@ -1,5 +1,6 @@
 {
   "name": "Surface",
+  "structure": "<Surface>…</Surface>",
   "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners; root is a named CSS container query context (`surface`).",
   "whenToUse": [
     "Group content with base-level background and contrast border",

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

@@ -1,5 +1,6 @@
 {
   "name": "Switch",
+  "structure": "<Switch label=\"…\" />",
   "summary": "Field-wrapped toggle control with regular or small track and optional field copy.",
   "whenToUse": [
     "Boolean on/off settings with optional label and helper text",

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

@@ -1,5 +1,6 @@
 {
   "name": "Tabs",
+  "structure": "<Tabs>\n  <Tabs.List>\n    <Tabs.Tab value=\"a\">…</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Viewport>\n    <Tabs.Panel value=\"a\">…</Tabs.Panel>\n  </Tabs.Viewport>\n</Tabs>",
   "summary": "Compound segmented tab control with Surface list chrome, moving indicator, and animated panels.",
   "whenToUse": [
     "Switching between related views in the same surface",

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

@@ -1,5 +1,6 @@
 {
   "name": "Text",
+  "structure": "<Text>…</Text>",
   "summary": "Theme-aware body-copy primitive with tone, family, and responsive body sizing.",
   "whenToUse": [
     "Body copy with semantic tone and token-backed typography",

package/dist/components/textarea/textarea.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Textarea",
+  "structure": "<Textarea />",
   "summary": "Multi-line field control with shared field copy, optional resize, and optional content sizing.",
   "whenToUse": [
     "Multi-line text entry with label, description, and error",

package/dist/components/textfield/textfield.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Textfield",
+  "structure": "<Textfield />",
   "summary": "Single-line field input with control-group chrome and optional addons.",
   "whenToUse": [
     "Single-line text, email, password, or similar native input types",

package/dist/components/title/title.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:none}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:none}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:-.03em}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}.viraui__title-module__Title_CXMUX{--title-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-title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1));--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-standard);margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--vui-title-letter-spacing);text-align:var(--vui-title-align);white-space:var(--vui-title-white-space);word-break:break-word;font-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-title-font-weight),"wdth" var(--vui-title-font-width),"opsz" var(--vui-title-font-opsz);text-box:var(--vui-title-trim) var(--vui-title-trim-type);display:inline-flex;&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--vui-title-padding-block-start) var(--vui-title-padding-inline-end) var(--vui-title-padding-block-end) var(--vui-title-padding-inline-start)}&[data-title-level=display]{--vui-title-font-size:clamp(var(--font-scale-h1),calc(var(--font-scale-h1) + 4.643cqi - 0.9286rem),var(--font-scale-display))}&[data-title-level=h1]{--vui-title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1))}&[data-title-level=h2]{--vui-title-font-size:clamp(var(--font-scale-h3),calc(var(--title-medium) * pow(var(--font-heading-typescale), 4)),var(--font-scale-h2))}&[data-title-level=h3]{--vui-title-font-size:clamp(var(--font-scale-h4),calc(var(--title-medium) * pow(var(--font-heading-typescale), 3)),var(--font-scale-h3))}&[data-title-level=h4]{--vui-title-font-size:clamp(var(--font-scale-h5),calc(var(--title-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-h4))}&[data-title-level=h5]{--vui-title-font-size:clamp(var(--font-scale-h6),calc(var(--title-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-h5));--vui-title-letter-spacing:-0.02em}&[data-title-level=h6]{--vui-title-font-size:clamp(var(--font-scale-body-medium),var(--title-medium),var(--font-scale-h6));--vui-title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--vui-title-literal-color)}&[data-title-line-height=none]{--vui-title-line-height:0}&[data-title-line-height=x-small]{--vui-title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--vui-title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--vui-title-line-height:var(--font-leading-large)}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:none}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:none}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:-.03em}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}.viraui__title-module__Title_CXMUX{--title-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-title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1));--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-standard);margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--vui-title-letter-spacing);text-align:var(--vui-title-align);white-space:var(--vui-title-white-space);word-break:break-word;font-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-title-font-weight),"wdth" var(--vui-title-font-width),"opsz" var(--vui-title-font-opsz);text-box:var(--vui-title-trim) var(--vui-title-trim-type);display:inline-flex;&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--vui-title-padding-block-start) var(--vui-title-padding-inline-end) var(--vui-title-padding-block-end) var(--vui-title-padding-inline-start)}&[data-title-size=display]{--vui-title-font-size:clamp(var(--font-scale-h1),calc(var(--font-scale-h1) + 4.643cqi - 0.9286rem),var(--font-scale-display))}&[data-title-size="1"]{--vui-title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1))}&[data-title-size="2"]{--vui-title-font-size:clamp(var(--font-scale-h3),calc(var(--title-medium) * pow(var(--font-heading-typescale), 4)),var(--font-scale-h2))}&[data-title-size="3"]{--vui-title-font-size:clamp(var(--font-scale-h4),calc(var(--title-medium) * pow(var(--font-heading-typescale), 3)),var(--font-scale-h3))}&[data-title-size="4"]{--vui-title-font-size:clamp(var(--font-scale-h5),calc(var(--title-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-h4))}&[data-title-size="5"]{--vui-title-font-size:clamp(var(--font-scale-h6),calc(var(--title-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-h5));--vui-title-letter-spacing:-0.02em}&[data-title-size="6"]{--vui-title-font-size:clamp(var(--font-scale-body-medium),var(--title-medium),var(--font-scale-h6));--vui-title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--vui-title-literal-color)}&[data-title-line-height=none]{--vui-title-line-height:0}&[data-title-line-height=x-small]{--vui-title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--vui-title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--vui-title-line-height:var(--font-leading-large)}}}

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

@@ -15,7 +15,7 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
     /**
      * Replaces the default `span` root using Base UI render semantics.
      *
-     * Pair this with `level` for most headings so DOM semantics and visual preset stay intentionally aligned.
+     * Pair this with `size` for most headings so DOM semantics and visual preset stay intentionally aligned.
      *
      * @default The title renders a `span` root.
      */
@@ -32,11 +32,11 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
      * This controls only the visual preset. Semantic heading choice remains owned by `render`,
      * because `Title` keeps a `span` root unless `render` replaces it.
      *
-     * @default 'h1'
+     * @default '1'
      */
-    level?: 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    size?: 'display' | '1' | '2' | '3' | '4' | '5' | '6';
     /**
-     * Overrides the level preset weight (`font-weight` + `wght` axis).
+     * Overrides the size preset weight (`font-weight` + `wght` axis).
      *
      * @default No weight override.
      */

package/dist/components/title/title.guide.json

@@ -1,22 +1,23 @@
 {
   "name": "Title",
+  "structure": "<Title>…</Title>",
   "summary": "Theme-aware heading and display typography primitive.",
   "whenToUse": [
     "Headings and display text with title presets",
     "Semantic heading tags chosen explicitly through render",
-    "Level and render paired together for most heading use cases",
-    "Fluid clamp sizing across title levels"
+    "Size and render paired together for most heading use cases",
+    "Fluid clamp sizing across title appearance presets"
   ],
   "whenNotToUse": ["Body copy — use Text", "Body or mono family typography"],
   "accessibility": [
     "Title renders a span by default, so choose render to match the correct heading level for the page outline",
-    "Visual level presets do not replace picking the right h1–h6 element",
-    "Use level for appearance and render for semantics; pair them unless you intentionally need a visual mismatch",
-    "Keep heading hierarchy sequential; do not skip levels for styling alone"
+    "Visual size presets do not replace picking the right h1–h6 element",
+    "Use size for appearance and render for semantics; pair them unless you intentionally need a visual mismatch",
+    "Keep heading hierarchy sequential; do not skip outline levels for styling alone"
   ],
   "antiPatterns": [
-    "Assuming level changes the HTML tag automatically",
-    "Letting level force the HTML tag instead of choosing render explicitly",
+    "Assuming size changes the HTML tag automatically",
+    "Letting size force the HTML tag instead of choosing render explicitly",
     "Using Title for long body paragraphs"
   ],
   "related": ["Text", "ClampText"],
@@ -64,8 +65,8 @@
       "vPadding": {
         "description": "Sets block padding using one token or a [start, end] tuple."
       },
-      "level": {
-        "description": "Selects the visual heading preset; does not change semantic heading level.",
+      "size": {
+        "description": "Selects the visual heading appearance preset; does not change semantic heading level.",
         "refCss": "font-size"
       },
       "lineHeight": {
@@ -127,15 +128,15 @@
         "refReact": "vPadding"
       },
       "font-size": {
-        "description": "Heading font size; level prop presets via data attributes.",
-        "refReact": "level"
+        "description": "Heading font size; size prop presets via data attributes.",
+        "refReact": "size"
       },
       "line-height": {
         "description": "Line height; lineHeight prop presets via data attributes.",
         "refReact": "lineHeight"
       },
       "letter-spacing": {
-        "description": "Heading letter spacing; level presets adjust this."
+        "description": "Heading letter spacing; size presets adjust this."
       },
       "font-family": {
         "description": "Heading font family on the root."

package/dist/components/title/title.js

@@ -4,7 +4,7 @@ import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
 import title_module_default from "./title.module.js";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/title/title.tsx
-var Title = ({ align = "start", balanced = false, selection = true, className, color, fontWidth, hPadding, level = "h1", lineHeight = "standard", maxWidth, opticalSize, ref, render, style, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", ...otherProps }) => {
+var Title = ({ align = "start", balanced = false, selection = true, className, color, fontWidth, hPadding, size = "1", lineHeight = "standard", maxWidth, opticalSize, ref, render, style, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", ...otherProps }) => {
 	const hasPadding = Boolean(hPadding || vPadding);
 	const dynamicStyle = {
 		"--vui-title-align": align,
@@ -26,7 +26,7 @@ var Title = ({ align = "start", balanced = false, selection = true, className, c
 		ref,
 		props: {
 			...otherProps,
-			"data-title-level": level,
+			"data-title-size": size,
 			"data-title-weight": weight !== void 0 ? "custom" : "preset",
 			"data-title-line-height": lineHeight,
 			"data-title-balanced": balanced ? "true" : "false",

package/dist/components/toast/toast.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Toast",
+  "structure": "<Toast.Provider>\n  <Toast.Portal>\n    <Toast.Viewport>\n      <Toast.Banner toast={…}>\n        <Toast.Action>…</Toast.Action>\n      </Toast.Banner>\n    </Toast.Viewport>\n  </Toast.Portal>\n</Toast.Provider>",
   "summary": "Transient notification surface with stacked or anchored placement, Banner high-level API, and optional action buttons.",
   "whenToUse": [
     "Confirming a completed action such as save or delete",

package/dist/components/toggle-button/toggle-button.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "ToggleButton",
+  "structure": "<ToggleButton restingIcon={<Plus />} aria-label=\"Pin\" />",
   "summary": "Icon-only two-state toggle that swaps resting and optional pressed icons on Base UI Toggle state.",
   "whenToUse": [
     "Toolbar pin, favorite, or mute toggles identified only by icon",

package/dist/components/toggle-group/toggle-group.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "ToggleGroup",
+  "structure": "<ToggleGroup>\n  <ToggleButton restingIcon={<Plus />} aria-label=\"List\" value=\"list\" />\n</ToggleGroup>",
   "summary": "Toolbar toggle set with shared selection state and default Stack spacing on Base UI ToggleGroup.",
   "whenToUse": [
     "Segmented icon toolbars such as text alignment or formatting controls",

package/dist/components/tooltip/tooltip.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Tooltip",
+  "structure": "<Tooltip>\n  <Tooltip.Trigger />\n  <Tooltip.Content />\n</Tooltip>",
   "summary": "Compound tooltip built on Base UI Tooltip with `Tooltip.Provider`, `Tooltip.Trigger`, `Tooltip.Content`, and `Tooltip.createHandle` for detached and multiple triggers; `Content` encapsulates Portal + Positioner + Popup + Viewport and animates position, size, and content between triggers.",
   "whenToUse": [
     "Short hints on hover or focus for toolbar controls and icon buttons",

package/dist/components/typewriter/typewriter.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Typewriter",
+  "structure": "<Typewriter>…</Typewriter>",
   "summary": "Decorative inline typewriter animation that inherits typography and color from a parent text primitive.",
   "whenToUse": [
     "Hero or marketing copy that cycles through short phrases",

package/dist/index.js

@@ -2,6 +2,7 @@ import { Accordion } from "./components/accordion/accordion.js";
 import { Annotate } from "./components/annotate/annotate.js";
 import { Avatar } from "./components/avatar/avatar.js";
 import { AvatarGroup } from "./components/avatar-group/avatar-group.js";
+import { Badge } from "./components/badge/badge.js";
 import { Bleed } from "./components/bleed/bleed.js";
 import { Spinner } from "./components/spinner/spinner.js";
 import { Button } from "./components/button/button.js";
@@ -51,4 +52,4 @@ import { ToggleGroup } from "./components/toggle-group/toggle-group.js";
 import { Typewriter } from "./components/typewriter/typewriter.js";
 import { TooltipContent } from "./components/tooltip/tooltip-content.js";
 import { Tooltip, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
-export { Accordion, Annotate, Avatar, AvatarGroup, Bleed, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, IconButton, IconButtonLink, LinearProgress, Masonry, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps };
+export { Accordion, Annotate, Avatar, AvatarGroup, Badge, Bleed, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, IconButton, IconButtonLink, LinearProgress, Masonry, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "private": false,
   "files": [
     "dist"
@@ -35,10 +35,10 @@
     "unplugin-dts": "1.0.3",
     "vite": "8.1.4",
     "vite-plugin-static-copy": "4.1.1",
-    "@viraui/foundation": "1.0.11",
     "@viraui/icons": "0.1.7",
     "@viraui/postcss-config": "0.0.18",
-    "@viraui/tsconfig": "0.0.17"
+    "@viraui/tsconfig": "0.0.17",
+    "@viraui/foundation": "1.0.13"
   },
   "peerDependencies": {
     "@base-ui/react": ">=1.6.0",