@viraui/react 1.0.13 → 1.0.14

package/dist/catalog.json

@@ -89,7 +89,7 @@
     {
       "id": "icon-button",
       "name": "IconButton",
-      "summary": "Icon-only button that requires an accessible name through aria-label or aria-labelledby.",
+      "summary": "Icon-only button that shares Button visual chrome (--vui-button-* CSS) and requires an accessible name through aria-label or aria-labelledby.",
       "guidePath": "./components/icon-button/icon-button.guide.json"
     },
     {
@@ -101,9 +101,15 @@
     {
       "id": "masonry",
       "name": "Masonry",
-      "summary": "Responsive React-column layout primitive for read-only mixed-height content walls.",
+      "summary": "Responsive React-column layout primitive for read-only mixed-height content walls; root is a named CSS container query context (`masonry` / inline-size).",
       "guidePath": "./components/masonry/masonry.guide.json"
     },
+    {
+      "id": "menu",
+      "name": "Menu",
+      "summary": "Compound menu built on Base UI Menu with `Menu.Trigger`, `Menu.Popup`, unified item rows, groups, checkbox/radio items, nested submenus, destructive sentiment, and `Menu.createHandle` for detached triggers; `Popup` owns Portal + Positioner + Elevator/Surface Select-like list chrome.",
+      "guidePath": "./components/menu/menu.guide.json"
+    },
     {
       "id": "meter",
       "name": "Meter",
@@ -227,13 +233,13 @@
     {
       "id": "toggle-button",
       "name": "ToggleButton",
-      "summary": "Icon-only two-state toggle that swaps resting and optional pressed icons on Base UI Toggle state.",
+      "summary": "Icon-only two-state toggle that swaps resting and optional pressed icons on Base UI Toggle state; `interpolateIcons` (default false) opt-in crossfade + light rotate between dual icons.",
       "guidePath": "./components/toggle-button/toggle-button.guide.json"
     },
     {
       "id": "toggle-group",
       "name": "ToggleGroup",
-      "summary": "Toolbar toggle set with shared selection state and default Stack spacing on Base UI ToggleGroup.",
+      "summary": "Toolbar toggle set with shared selection state; Stack direction follows orientation with zero default gap.",
       "guidePath": "./components/toggle-group/toggle-group.guide.json"
     },
     {

package/dist/components/accordion/accordion.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-accordion-island-gap{syntax:"<length>";inherits:true;initial-value:0}.viraui__accordion-module__Accordion_wFOlN{--vui-accordion-island-gap:var(--space-medium);--trigger-radius:var(--radius-large);inline-size:100%;&:dir(rtl) .viraui__accordion-module__Trigger_4HzIb[data-stack-direction=row-reverse]{direction:ltr;flex-direction:row}}.viraui__accordion-module__Trigger_4HzIb{inline-size:100%;border:0;background:#0000;cursor:pointer;text-align:start;color:inherit;&:focus-visible{outline-offset:-4px}&[data-disabled]{cursor:not-allowed;opacity:.5}.viraui__accordion-module__Item_66o2x[data-use-surface=true] &{&:focus-visible{border-radius:var(--radius-large);outline-offset:-4px}}}.viraui__accordion-module__IconSlot_AVQq3{position:relative;flex-shrink:0;inline-size:1rem;block-size:1rem}.viraui__accordion-module__Icon_qdu2v{position:absolute;inset:0;display:grid;place-items:center;transition:opacity var(--duration-fast) var(--easing-standard),rotate var(--duration-fast) var(--easing-standard);&:first-of-type{opacity:1;rotate:0deg}&:last-of-type{opacity:0;rotate:-90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:first-of-type{opacity:0;rotate:90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:last-of-type{opacity:1;rotate:0deg}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__accordion-module__Panel_U1Ofk{block-size:var(--accordion-panel-height);overflow:hidden;transition:block-size var(--duration-fast) var(--easing-standard);&[data-ending-style],&[data-starting-style]{block-size:0}@media (prefers-reduced-motion:reduce){transition:none}}}@layer viraui.overrides{.viraui__accordion-module__Item_66o2x{inline-size:100%;transition:margin var(--duration-fast) var(--easing-standard),background var(--duration-fast) var(--easing-standard),border-radius var(--duration-fast) var(--easing-standard);&[data-use-surface=true]{--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;&:not([data-open]){--vui-surface-background:#0000}&:not([data-open])+&:not([data-open]),&[data-open]+&[data-open]{border-top-width:0}&:first-child,&:not([data-open])+&[data-open],&[data-open]+&:not([data-open]){--vui-surface-border-radius-top-left:var(--trigger-radius);--vui-surface-border-radius-top-right:var(--trigger-radius)}&:last-child,&:not([data-open]):has(+&[data-open]),&[data-open]:has(+&:not([data-open])){--vui-surface-border-radius-bottom-left:var(--trigger-radius);--vui-surface-border-radius-bottom-right:var(--trigger-radius)}&:not(:last-child):not([data-open]):has(+&[data-open]),&:not(:last-child)[data-open]:has(+&:not([data-open])){margin-block-end:var(--vui-accordion-island-gap)}}.viraui__accordion-module__Accordion_wFOlN[data-islands=false] &[data-use-surface=true]{&:not(:first-child){border-top-width:0}&:not([data-open])+&[data-open],&[data-open]+&:not([data-open]){--vui-surface-border-radius-top-left:0;--vui-surface-border-radius-top-right:0}&:not([data-open]):has(+&[data-open]),&[data-open]:has(+&:not([data-open])){--vui-surface-border-radius-bottom-left:0;--vui-surface-border-radius-bottom-right:0}&:not(:last-child):not([data-open]):has(+&[data-open]),&:not(:last-child)[data-open]:has(+&:not([data-open])){margin-block-end:0}}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-accordion-island-gap{syntax:"<length>";inherits:true;initial-value:0}@property --__accordion-trigger-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__accordion-module__Accordion_wFOlN{--vui-accordion-island-gap:var(--space-medium);--__accordion-trigger-radius:var(--radius-large);inline-size:100%;&:dir(rtl) .viraui__accordion-module__Trigger_4HzIb[data-stack-direction=row-reverse]{direction:ltr;flex-direction:row}}.viraui__accordion-module__Trigger_4HzIb{inline-size:100%;border:0;background:#0000;cursor:pointer;text-align:start;color:inherit;&:focus-visible{outline-offset:-4px}&[data-disabled]{cursor:not-allowed;opacity:.5}.viraui__accordion-module__Item_66o2x[data-use-surface=true] &{&:focus-visible{border-radius:var(--radius-large);outline-offset:-4px}}}.viraui__accordion-module__IconSlot_AVQq3{position:relative;flex-shrink:0;inline-size:1rem;block-size:1rem}.viraui__accordion-module__Icon_qdu2v{position:absolute;inset:0;display:grid;place-items:center;transition:opacity var(--duration-fast) var(--easing-standard),rotate var(--duration-fast) var(--easing-standard);&:first-of-type{opacity:1;rotate:0deg}&:last-of-type{opacity:0;rotate:-90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:first-of-type{opacity:0;rotate:90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:last-of-type{opacity:1;rotate:0deg}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__accordion-module__Panel_U1Ofk{block-size:var(--accordion-panel-height);overflow:hidden;transition:block-size var(--duration-fast) var(--easing-standard);&[data-ending-style],&[data-starting-style]{block-size:0}@media (prefers-reduced-motion:reduce){transition:none}}}@layer viraui.overrides{.viraui__accordion-module__Item_66o2x{inline-size:100%;transition:margin var(--duration-fast) var(--easing-standard),background var(--duration-fast) var(--easing-standard),border-radius var(--duration-fast) var(--easing-standard);&[data-use-surface=true]{--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;&:not([data-open]){--vui-surface-background:#0000}&:not([data-open])+&:not([data-open]),&[data-open]+&[data-open]{border-top-width:0}&:first-child,&:not([data-open])+&[data-open],&[data-open]+&:not([data-open]){--vui-surface-border-radius-top-left:var(--__accordion-trigger-radius);--vui-surface-border-radius-top-right:var(--__accordion-trigger-radius)}&:last-child,&:not([data-open]):has(+&[data-open]),&[data-open]:has(+&:not([data-open])){--vui-surface-border-radius-bottom-left:var(--__accordion-trigger-radius);--vui-surface-border-radius-bottom-right:var(--__accordion-trigger-radius)}&:not(:last-child):not([data-open]):has(+&[data-open]),&:not(:last-child)[data-open]:has(+&:not([data-open])){margin-block-end:var(--vui-accordion-island-gap)}}.viraui__accordion-module__Accordion_wFOlN[data-islands=false] &[data-use-surface=true]{&:not(:first-child){border-top-width:0}&:not([data-open])+&[data-open],&[data-open]+&:not([data-open]){--vui-surface-border-radius-top-left:0;--vui-surface-border-radius-top-right:0}&:not([data-open]):has(+&[data-open]),&[data-open]:has(+&:not([data-open])){--vui-surface-border-radius-bottom-left:0;--vui-surface-border-radius-bottom-right:0}&:not(:last-child):not([data-open]):has(+&[data-open]),&:not(:last-child)[data-open]:has(+&:not([data-open])){margin-block-end:0}}}}

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

@@ -22,6 +22,32 @@
   ],
   "related": ["Surface", "Separator", "Stack", "Text", "Icon"],
   "properties": {
+    "react": {
+      "islands": {
+        "description": "When `true`, open/closed blocks render as separated Surface islands with gap between them. When `false`, blocks stay attached with corner radius only on the first and last items. Applies only to items with `useSurface`."
+      },
+      "Item.children": {
+        "description": "Panel content revealed when the item is open."
+      },
+      "Item.color": {
+        "description": "Resting background for the item card, forwarded to the wrapping `Surface` when `useSurface` is `true`."
+      },
+      "Item.iconClosed": {
+        "description": "Decorative icon shown when the item is closed."
+      },
+      "Item.iconOpen": {
+        "description": "Decorative icon shown when the item is open."
+      },
+      "Item.iconPosition": {
+        "description": "Side of the trigger label where the expand/collapse icon is rendered."
+      },
+      "Item.trigger": {
+        "description": "Visible trigger label rendered inside the accordion header button."
+      },
+      "Item.useSurface": {
+        "description": "When `true`, wraps the item in `Surface` with border and open-block background. When `false`, renders without `Surface` so consumers can insert `Separator` between items; island styling is skipped for that item."
+      }
+    },
     "css": {
       "island-gap": {
         "description": "Gap between separated Surface islands when islands={true}."

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}@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)}}
+@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}@property --__annotate-tail-x{syntax:"<length>";inherits:true;initial-value:23px}@property --__annotate-tail-y{syntax:"<length>";inherits:true;initial-value:4px}@property --__annotate-note-align-x{syntax:"<length-percentage>";inherits:true;initial-value:-50%}@property --__annotate-note-align-y{syntax:"<length-percentage>";inherits:true;initial-value:0%}@property --__annotate-arrow-mask{syntax:"*";inherits:true;initial-value:none}.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-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.guide.json

@@ -26,95 +26,84 @@
   "related": ["Text", "Title", "Tooltip", "Chip"],
   "properties": {
     "react": {
-      "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 part.",
-        "refCss": "arrow-x"
+        "description": "Horizontal offset for the arrow pseudo (`--vui-annotate-arrow-x`)."
       },
       "arrowOffsetY": {
-        "description": "Vertical offset for the arrow part.",
-        "refCss": "arrow-y"
+        "description": "Vertical offset for the arrow pseudo (`--vui-annotate-arrow-y`)."
       },
-      "textOffsetX": {
-        "description": "Horizontal offset for the note part.",
-        "refCss": "text-x"
+      "color": {
+        "description": "Highlight token driving arrow, label, and optional mark color via `--vui-annotate-color`."
       },
-      "textOffsetY": {
-        "description": "Vertical offset for the note part.",
-        "refCss": "text-y"
+      "labelGap": {
+        "description": "Gap between arrow and label on all sides via `--vui-annotate-label-gap`."
+      },
+      "labelMaxWidth": {
+        "description": "Max width for the label pseudo via `--vui-annotate-label-max-width`."
+      },
+      "mark": {
+        "description": "When true, applies a highlighter mark behind the wrapped content."
+      },
+      "note": {
+        "description": "Decorative label rendered in a presentational note span (not announced). Do not put critical information here — assistive tech does not announce the note."
       },
       "rotate": {
-        "description": "Rotation for the note via --vui-annotate-rotate.",
+        "description": "Rotation for the label (and composed transforms) via `--vui-annotate-rotate`.",
         "refCss": "rotate"
       },
+      "side": {
+        "description": "Places the decorative arrow and label relative to the wrapped content."
+      },
       "targetGap": {
-        "description": "Gap between the target and the arrow.",
-        "refCss": "target-gap"
+        "description": "Gap between the target and the arrow via `--vui-annotate-target-gap`."
       },
-      "labelGap": {
-        "description": "Gap between arrow and note on all sides.",
-        "refCss": "label-gap"
+      "textAlign": {
+        "description": "Text alignment for the note via `--vui-annotate-text-align`."
       },
-      "labelMaxWidth": {
-        "description": "Max width for the note part.",
-        "refCss": "label-max-width"
+      "textOffsetX": {
+        "description": "Horizontal offset for the label pseudo (`--vui-annotate-text-x`)."
       },
-      "zIndex": {
-        "description": "Stacking order for arrow and note via --vui-annotate-z-index. Same value on both. When omitted, auto.",
-        "refCss": "z-index"
+      "textOffsetY": {
+        "description": "Vertical offset for the label pseudo (`--vui-annotate-text-y`)."
       },
-      "textAlign": {
-        "description": "Text alignment for the note via --vui-annotate-text-align. When omitted, start.",
-        "refCss": "text-align"
+      "zIndex": {
+        "description": "Stacking order for arrow and note via `--vui-annotate-z-index`. Same value on both parts."
       }
     },
     "css": {
-      "color": {
-        "description": "Arrow, note, and mark accent color. Defaults to var(--global-foreground).",
-        "refReact": "color"
-      },
       "arrow-x": {
-        "description": "Horizontal arrow offset.",
-        "refReact": "arrowOffsetX"
+        "description": "Horizontal arrow offset."
       },
       "arrow-y": {
-        "description": "Vertical arrow offset.",
-        "refReact": "arrowOffsetY"
+        "description": "Vertical arrow offset."
       },
-      "text-x": {
-        "description": "Horizontal note offset.",
-        "refReact": "textOffsetX"
+      "color": {
+        "description": "Arrow, note, and mark accent color. Defaults to var(--global-foreground)."
       },
-      "text-y": {
-        "description": "Vertical note offset.",
-        "refReact": "textOffsetY"
+      "label-gap": {
+        "description": "Gap between arrow and note on all sides."
+      },
+      "label-max-width": {
+        "description": "Max width for the note part."
       },
       "rotate": {
         "description": "Note rotation angle.",
         "refReact": "rotate"
       },
       "target-gap": {
-        "description": "Gap between the target and the arrow.",
-        "refReact": "targetGap"
+        "description": "Gap between the target and the arrow."
       },
-      "label-gap": {
-        "description": "Gap between arrow and note on all sides.",
-        "refReact": "labelGap"
+      "text-align": {
+        "description": "Text alignment for the note. Defaults to start."
       },
-      "label-max-width": {
-        "description": "Max width for the note part.",
-        "refReact": "labelMaxWidth"
+      "text-x": {
+        "description": "Horizontal note offset."
       },
-      "z-index": {
-        "description": "Stacking order for arrow and note. Defaults to auto.",
-        "refReact": "zIndex"
+      "text-y": {
+        "description": "Vertical note offset."
       },
-      "text-align": {
-        "description": "Text alignment for the note. Defaults to start.",
-        "refReact": "textAlign"
+      "z-index": {
+        "description": "Stacking order for arrow and note. Defaults to auto."
       }
     }
   }

package/dist/components/avatar/avatar.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-avatar-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-avatar-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-avatar-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-avatar-foreground{syntax:"<color>";inherits:false;initial-value:#0000}.viraui__avatar-module__Avatar_BRuS3{--vui-avatar-size:var(--space-2x-large);--vui-avatar-background:var(--global-contrast);--vui-avatar-foreground:var(--global-foreground);--vui-avatar-radius:var(--radius-medium);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--vui-avatar-size);block-size:var(--vui-avatar-size);min-inline-size:var(--vui-avatar-size);min-block-size:var(--vui-avatar-size);overflow:hidden;border-radius:var(--vui-avatar-radius);background:var(--vui-avatar-background);color:var(--vui-avatar-foreground);vertical-align:middle;-webkit-user-select:none;user-select:none;container-name:viraui-avatar;container-type:inline-size;&[data-size=x-small]{--vui-avatar-size:var(--space-large);--vui-avatar-radius:var(--radius-small)}&[data-size=small]{--vui-avatar-size:var(--space-2x-large)}&[data-size=regular]{--vui-avatar-size:var(--space-wide)}&[data-size=big]{--vui-avatar-size:var(--space-2x-wide);--vui-avatar-radius:var(--radius-large)}}.viraui__avatar-module__Image_Q7bHi{inline-size:100%;block-size:100%;display:block;object-fit:cover}}@layer viraui.overrides{.viraui__avatar-module__AvatarSkeleton_AnE8Q{border-radius:inherit}.viraui__avatar-module__Label_QASTF{font-size:30cqw}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-avatar-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-avatar-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-avatar-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-avatar-foreground{syntax:"<color>";inherits:false;initial-value:#0000}.viraui__avatar-module__Avatar_BRuS3{--vui-avatar-size:var(--space-2x-large);--vui-avatar-background:var(--global-contrast);--vui-avatar-foreground:var(--global-foreground);--vui-avatar-radius:var(--radius-medium);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--vui-avatar-size);block-size:var(--vui-avatar-size);min-inline-size:var(--vui-avatar-size);min-block-size:var(--vui-avatar-size);overflow:hidden;border-radius:var(--vui-avatar-radius);background:var(--vui-avatar-background);color:var(--vui-avatar-foreground);vertical-align:middle;-webkit-user-select:none;user-select:none;container-type:inline-size;&[data-size=x-small]{--vui-avatar-size:var(--space-large);--vui-avatar-radius:var(--radius-small)}&[data-size=regular]{--vui-avatar-size:var(--space-wide)}&[data-size=big]{--vui-avatar-size:var(--space-2x-wide);--vui-avatar-radius:var(--radius-large)}}.viraui__avatar-module__Image_Q7bHi{inline-size:100%;block-size:100%;display:block;object-fit:cover}}@layer viraui.overrides{.viraui__avatar-module__AvatarSkeleton_AnE8Q{border-radius:inherit}.viraui__avatar-module__Label_QASTF{font-size:30cqw}}

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

@@ -20,25 +20,37 @@
   "related": ["Skeleton"],
   "properties": {
     "react": {
+      "alt": {
+        "description": "Supplies alternative text for the avatar image."
+      },
+      "fallback": {
+        "description": "Supplies the content shown when the image is absent or fails to load."
+      },
+      "loading": {
+        "description": "Replaces the avatar content with a same-size skeleton while image data is still loading upstream."
+      },
+      "ref": {
+        "description": "Ref forwarded to the rendered avatar root element."
+      },
       "size": {
-        "description": "Selects the rendered avatar footprint.",
-        "refCss": "size"
+        "description": "Selects the rendered avatar footprint."
+      },
+      "src": {
+        "description": "Supplies the avatar image source URL."
       }
     },
     "css": {
-      "size": {
-        "description": "Avatar inline and block size on the root.",
-        "refReact": "size"
-      },
-      "radius": {
-        "description": "Corner radius on the root; size presets also adjust this.",
-        "refReact": "size"
-      },
       "background": {
         "description": "Root background fill behind image or fallback."
       },
       "foreground": {
         "description": "Root foreground color for fallback content."
+      },
+      "radius": {
+        "description": "Corner radius on the root; size presets also adjust this."
+      },
+      "size": {
+        "description": "Avatar inline and block size on the root."
       }
     }
   }

package/dist/components/avatar/avatar.js

@@ -19,8 +19,6 @@ var Avatar$1 = ({ alt = "", className, fallback, loading = false, ref, size = "s
 		ref,
 		"aria-busy": loading || void 0,
 		className: clsx(avatar_module_default.Avatar, className),
-		"data-has-image": hasImage ? "true" : "false",
-		"data-loading": loading ? "true" : "false",
 		"data-size": size,
 		"data-grow": "false",
 		"data-shrink": "false",

package/dist/components/avatar-group/avatar-group.css

@@ -1,7 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-avatar-group-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-overlap-distance{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-gap-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-item-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__avatar-group-module__AvatarGroup_zOrR-{--vui-avatar-group-size:var(--space-2x-large);--vui-avatar-group-overlap-distance:var(--space-small);--vui-avatar-group-gap-size:var(--space-x-small);--vui-avatar-group-item-radius:var(--radius-medium);display:inline-flex;flex-wrap:nowrap;align-items:flex-start;min-inline-size:max-content;vertical-align:middle;&[data-direction=vertical]{flex-direction:column}&[data-size=x-small]{--vui-avatar-group-size:var(--space-large);--vui-avatar-group-overlap-distance:var(--space-x-small);--vui-avatar-group-gap-size:var(--space-2x-small);--vui-avatar-group-item-radius:var(--radius-small)}&[data-size=small]{--vui-avatar-group-size:var(--space-2x-large);--vui-avatar-group-overlap-distance:var(--space-medium);--vui-avatar-group-gap-size:var(--space-x-small)}&[data-size=regular]{--vui-avatar-group-size:var(--space-wide);--vui-avatar-group-overlap-distance:var(--space-medium);--vui-avatar-group-gap-size:var(--space-x-small)}&[data-size=big]{--vui-avatar-group-size:var(--space-2x-wide);--vui-avatar-group-overlap-distance:var(--space-large);--vui-avatar-group-gap-size:var(--space-small);--vui-avatar-group-item-radius:var(--radius-large)}}.viraui__avatar-group-module__AvatarWrapper_0opqY{position:relative;display:inline-flex;flex:0 0 auto;inline-size:var(--vui-avatar-group-size);block-size:var(--vui-avatar-group-size);.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=horizontal] &:not(:first-child){margin-inline-start:calc(var(--vui-avatar-group-overlap-distance) * -1)}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:first-child){margin-block-start:calc(var(--vui-avatar-group-overlap-distance) * -1)}--avatar-hole-half:calc((var(--vui-avatar-group-size) / 2) + var(--vui-avatar-group-gap-size));--avatar-hole-r:calc(min(var(--vui-avatar-group-item-radius), var(--vui-avatar-group-size) / 2) + var(--vui-avatar-group-gap-size));.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(ltr)[data-direction=horizontal] &:not(:last-child){--avatar-hole-cx:calc(100% + (var(--vui-avatar-group-size) / 2) - var(--vui-avatar-group-overlap-distance));--avatar-hole-cy:50%}.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(rtl)[data-direction=horizontal] &:not(:last-child){--avatar-hole-cx:calc(var(--vui-avatar-group-overlap-distance) - (var(--vui-avatar-group-size) / 2));--avatar-hole-cy:50%}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:last-child){--avatar-hole-cx:50%;--avatar-hole-cy:calc(100% + (var(--vui-avatar-group-size) / 2) - var(--vui-avatar-group-overlap-distance))}.viraui__avatar-group-module__AvatarGroup_zOrR- &:not(:last-child){--avatar-hole-edge:calc((var(--avatar-hole-half) - var(--avatar-hole-r)) * 2);--avatar-hole-corner-inset:calc(var(--avatar-hole-r) * 0.85);@supports (corner-shape:squircle){@container root not style(--corner-shape-enable: initial){--avatar-hole-corner-tr:curve by var(--avatar-hole-r) var(--avatar-hole-r) with var(--avatar-hole-corner-inset) 0px /var(--avatar-hole-r) calc(var(--avatar-hole-r) * 0.15);--avatar-hole-corner-br:curve by calc(var(--avatar-hole-r) * -1) var(--avatar-hole-r) with 0px var(--avatar-hole-corner-inset) /calc(var(--avatar-hole-r) * -0.15) var(--avatar-hole-r);--avatar-hole-corner-bl:curve by calc(var(--avatar-hole-r) * -1) calc(var(--avatar-hole-r) * -1) with calc(var(--avatar-hole-corner-inset) * -1) 0px /calc(var(--avatar-hole-r) * -1) calc(var(--avatar-hole-r) * -0.15);--avatar-hole-corner-tl:curve by var(--avatar-hole-r) calc(var(--avatar-hole-r) * -1) with 0px calc(var(--avatar-hole-corner-inset) * -1) /calc(var(--avatar-hole-r) * 0.15) calc(var(--avatar-hole-r) * -1)}}clip-path:shape(evenodd from 0 0,line to 100% 0,line to 100% 100%,line to 0 100%,close,move to calc(var(--avatar-hole-cx) - var(--avatar-hole-half) + var(--avatar-hole-r)) calc(var(--avatar-hole-cy) - var(--avatar-hole-half)),line by var(--avatar-hole-edge) 0,var(--avatar-hole-corner-tr,arc by var(--avatar-hole-r) var(--avatar-hole-r) of var(--avatar-hole-r) cw),line by 0 var(--avatar-hole-edge),var(
-        --avatar-hole-corner-br,arc by calc(var(--avatar-hole-r) * -1) var(--avatar-hole-r) of var(--avatar-hole-r) cw
-      ),line by calc(var(--avatar-hole-edge) * -1) 0,var(
-        --avatar-hole-corner-bl,arc by calc(var(--avatar-hole-r) * -1) calc(var(--avatar-hole-r) * -1) of var(--avatar-hole-r) cw
-      ),line by 0 calc(var(--avatar-hole-edge) * -1),var(
-        --avatar-hole-corner-tl,arc by var(--avatar-hole-r) calc(var(--avatar-hole-r) * -1) of var(--avatar-hole-r) cw
-      ),close)}}.viraui__avatar-group-module__OverflowWrapper_bKv6I{inline-size:auto}.viraui__avatar-group-module__OverflowPill_nMmTD{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--vui-avatar-group-size);block-size:var(--vui-avatar-group-size)}}@layer viraui.overrides{.viraui__avatar-group-module__AvatarGroupItem_Vvlyh{--vui-avatar-radius:var(--vui-avatar-group-item-radius)}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-avatar-group-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-overlap-distance{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-gap-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-item-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__avatar-group-hole-half{syntax:"<length>";inherits:false;initial-value:0}@property --__avatar-group-hole-r{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-cx{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-cy{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-corner-tl{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-tr{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-br{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-bl{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-inset{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-edge{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__avatar-group-module__AvatarGroup_zOrR-{--vui-avatar-group-size:var(--space-2x-large);--vui-avatar-group-overlap-distance:var(--space-medium);--vui-avatar-group-gap-size:var(--space-x-small);--vui-avatar-group-item-radius:var(--radius-medium);display:inline-flex;flex-wrap:nowrap;align-items:flex-start;min-inline-size:max-content;vertical-align:middle;&[data-direction=vertical]{flex-direction:column}&[data-size=x-small]{--vui-avatar-group-size:var(--space-large);--vui-avatar-group-overlap-distance:var(--space-x-small);--vui-avatar-group-gap-size:var(--space-2x-small);--vui-avatar-group-item-radius:var(--radius-small)}&[data-size=regular]{--vui-avatar-group-size:var(--space-wide);--vui-avatar-group-overlap-distance:var(--space-medium);--vui-avatar-group-gap-size:var(--space-x-small)}&[data-size=big]{--vui-avatar-group-size:var(--space-2x-wide);--vui-avatar-group-overlap-distance:var(--space-large);--vui-avatar-group-gap-size:var(--space-small);--vui-avatar-group-item-radius:var(--radius-large)}}.viraui__avatar-group-module__AvatarWrapper_0opqY{position:relative;display:inline-flex;flex:0 0 auto;inline-size:var(--vui-avatar-group-size);block-size:var(--vui-avatar-group-size);.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=horizontal] &:not(:first-child){margin-inline-start:calc(var(--vui-avatar-group-overlap-distance) * -1)}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:first-child){margin-block-start:calc(var(--vui-avatar-group-overlap-distance) * -1)}--__avatar-group-hole-half:calc((var(--vui-avatar-group-size) / 2) + var(--vui-avatar-group-gap-size));--__avatar-group-hole-r:calc(min(var(--vui-avatar-group-item-radius), var(--vui-avatar-group-size) / 2) + var(--vui-avatar-group-gap-size));.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(ltr)[data-direction=horizontal] &:not(:last-child){--__avatar-group-hole-cx:calc(100% + (var(--vui-avatar-group-size) / 2) - var(--vui-avatar-group-overlap-distance));--__avatar-group-hole-cy:50%}.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(rtl)[data-direction=horizontal] &:not(:last-child){--__avatar-group-hole-cx:calc(var(--vui-avatar-group-overlap-distance) - (var(--vui-avatar-group-size) / 2));--__avatar-group-hole-cy:50%}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:last-child){--__avatar-group-hole-cx:50%;--__avatar-group-hole-cy:calc(100% + (var(--vui-avatar-group-size) / 2) - var(--vui-avatar-group-overlap-distance))}.viraui__avatar-group-module__AvatarGroup_zOrR- &:not(:last-child){--__avatar-group-hole-edge:calc((var(--__avatar-group-hole-half) - var(--__avatar-group-hole-r)) * 2);--__avatar-group-hole-corner-inset:calc(var(--__avatar-group-hole-r) * 0.85);--__avatar-group-hole-corner-tr:arc by var(--__avatar-group-hole-r) var(--__avatar-group-hole-r) of var(--__avatar-group-hole-r) cw;--__avatar-group-hole-corner-br:arc by calc(var(--__avatar-group-hole-r) * -1) var(--__avatar-group-hole-r) of var(--__avatar-group-hole-r) cw;--__avatar-group-hole-corner-bl:arc by calc(var(--__avatar-group-hole-r) * -1) calc(var(--__avatar-group-hole-r) * -1) of var(--__avatar-group-hole-r) cw;--__avatar-group-hole-corner-tl:arc by var(--__avatar-group-hole-r) calc(var(--__avatar-group-hole-r) * -1) of var(--__avatar-group-hole-r) cw;@supports (corner-shape:squircle){@container root not style(--corner-shape-enable: initial){--__avatar-group-hole-corner-tr:curve by var(--__avatar-group-hole-r) var(--__avatar-group-hole-r) with var(--__avatar-group-hole-corner-inset) 0px /var(--__avatar-group-hole-r) calc(var(--__avatar-group-hole-r) * 0.15);--__avatar-group-hole-corner-br:curve by calc(var(--__avatar-group-hole-r) * -1) var(--__avatar-group-hole-r) with 0px var(--__avatar-group-hole-corner-inset) /calc(var(--__avatar-group-hole-r) * -0.15) var(--__avatar-group-hole-r);--__avatar-group-hole-corner-bl:curve by calc(var(--__avatar-group-hole-r) * -1) calc(var(--__avatar-group-hole-r) * -1) with calc(var(--__avatar-group-hole-corner-inset) * -1) 0px /calc(var(--__avatar-group-hole-r) * -1) calc(var(--__avatar-group-hole-r) * -0.15);--__avatar-group-hole-corner-tl:curve by var(--__avatar-group-hole-r) calc(var(--__avatar-group-hole-r) * -1) with 0px calc(var(--__avatar-group-hole-corner-inset) * -1) /calc(var(--__avatar-group-hole-r) * 0.15) calc(var(--__avatar-group-hole-r) * -1)}}clip-path:shape(evenodd from 0 0,line to 100% 0,line to 100% 100%,line to 0 100%,close,move to calc(var(--__avatar-group-hole-cx) - var(--__avatar-group-hole-half) + var(--__avatar-group-hole-r)) calc(var(--__avatar-group-hole-cy) - var(--__avatar-group-hole-half)),line by var(--__avatar-group-hole-edge) 0,var(--__avatar-group-hole-corner-tr),line by 0 var(--__avatar-group-hole-edge),var(--__avatar-group-hole-corner-br),line by calc(var(--__avatar-group-hole-edge) * -1) 0,var(--__avatar-group-hole-corner-bl),line by 0 calc(var(--__avatar-group-hole-edge) * -1),var(--__avatar-group-hole-corner-tl),close)}}.viraui__avatar-group-module__OverflowWrapper_bKv6I{inline-size:auto}.viraui__avatar-group-module__OverflowPill_nMmTD{min-inline-size:var(--vui-avatar-group-size);block-size:var(--vui-avatar-group-size)}}@layer viraui.overrides{.viraui__avatar-group-module__AvatarGroupItem_Vvlyh{--vui-avatar-radius:var(--vui-avatar-group-item-radius)}}

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

@@ -4,7 +4,7 @@
   "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",
-    "Display overlapping circular identity clusters in horizontal or vertical layouts",
+    "Display overlapping identity clusters in horizontal or vertical layouts",
     "Collapse long avatar lists into a final overflow pill such as +15 or +9938"
   ],
   "whenNotToUse": ["Interactive chip collections that need per-item actions", "Mixed avatar sizes inside one group"],
@@ -16,33 +16,40 @@
   "antiPatterns": [
     "Passing per-avatar size values instead of using the group size prop",
     "Expecting AvatarGroup to derive hidden-count labels instead of passing overflowText directly",
-    "Expecting grouped avatars to follow theme radius tokens instead of always rendering as circles",
+    "Expecting grouped avatars to always render as circles — items keep theme radius/squircle via --vui-avatar-group-item-radius",
     "Using non-positive maxVisible values expecting truncation"
   ],
   "related": ["Avatar"],
   "properties": {
     "react": {
+      "avatars": {
+        "description": "Supplies the avatar payloads rendered by the group in DOM order."
+      },
+      "direction": {
+        "description": "Chooses whether avatars overlap across the inline or block axis."
+      },
+      "maxVisible": {
+        "description": "Limits how many real avatars render before the optional overflow pill is appended. Omitted, zero, and negative values are ignored."
+      },
+      "overflowText": {
+        "description": "Supplies the content rendered inside the optional overflow pill when truncation is active."
+      },
       "size": {
-        "description": "Shared avatar footprint for every item in the group.",
-        "refCss": "size"
+        "description": "Selects the shared avatar footprint for every rendered avatar."
       }
     },
     "css": {
-      "size": {
-        "description": "Rendered avatar size used for overlap layout.",
-        "refReact": "size"
-      },
-      "overlap-distance": {
-        "description": "Negative margin overlap between adjacent avatars.",
-        "refReact": "size"
-      },
       "gap-size": {
-        "description": "Cutout gap used by overlap clip-path math.",
-        "refReact": "size"
+        "description": "Cutout gap used by overlap clip-path math."
       },
       "item-radius": {
-        "description": "Corner radius applied to grouped avatar items.",
-        "refReact": "size"
+        "description": "Corner radius applied to grouped avatar items."
+      },
+      "overlap-distance": {
+        "description": "Negative margin overlap between adjacent avatars."
+      },
+      "size": {
+        "description": "Rendered avatar size used for overlap layout."
       }
     }
   }

package/dist/components/badge/badge.css

@@ -1 +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)}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-badge-size{syntax:"<length>";inherits:true;initial-value:.5rem}@property --vui-badge-color{syntax:"<color>";inherits:true;initial-value:#292929}@property --vui-badge-position-x{syntax:"<length-percentage>";inherits:true;initial-value:100%}@property --vui-badge-position-y{syntax:"<length-percentage>";inherits:true;initial-value:0%}@property --__badge-gap{syntax:"<length>";inherits:true;initial-value:0}@property --__badge-mask-size{syntax:"<length>";inherits:true;initial-value:0}@property --__badge-hole-progress{syntax:"<number>";inherits:true;initial-value:0}@property --__badge-motion-delay{syntax:"<time>";inherits:true;initial-value:.16s}.viraui__badge-module__Badge_lJqlY{--vui-badge-color:var(--global-primary);--__badge-gap:calc(var(--vui-badge-size) * 0.25);--__badge-mask-size:calc(var(--vui-badge-size) / 2 + var(--__badge-gap));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) forwards;animation-delay:var(--__badge-motion-delay)}&[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) forwards;animation-delay:var(--__badge-motion-delay)}@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

@@ -13,7 +13,7 @@ export type BadgeProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Diameter of the status dot via `--vui-badge-size`.
      *
-     * @default '12px'
+     * @default '0.5rem'
      */
     size?: string;
     /**

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

@@ -26,29 +26,33 @@
   "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"
+        "description": "Highlight token driving the status-dot color via `--vui-badge-color`."
+      },
+      "position": {
+        "description": "Places the status dot on a corner of the wrapped content."
       },
       "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."
+        "description": "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)."
       },
-      "position": {
-        "description": "Corner placement for the status dot (top-end, top-start, bottom-end, bottom-start). Defaults to top-end."
+      "size": {
+        "description": "Diameter of the status dot via `--vui-badge-size`.",
+        "refCss": "size"
       }
     },
     "css": {
+      "color": {
+        "description": "Status-dot accent color. Defaults to var(--global-primary)."
+      },
+      "position-x": {
+        "description": "Horizontal status-dot anchor. Position presets set it to 0% for start or 100% for end."
+      },
+      "position-y": {
+        "description": "Vertical status-dot anchor. Position presets set it to 0% for top or 100% for bottom."
+      },
       "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

@@ -5,7 +5,7 @@ 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 }) => {
+var Badge = ({ size = "0.5rem", children, className, color, position = "top-end", ref, show = false, style, ...otherProps }) => {
 	const [present, setPresent] = useState(show);
 	const [exiting, setExiting] = useState(false);
 	useEffect(() => {

package/dist/components/basic-input/basic-input.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-basic-input-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-basic-input-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-basic-input-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-basic-input-placeholder-color{syntax:"<color>";inherits:false;initial-value:#0000}.viraui__basic-input-module__BasicInput_5uE64{--vui-basic-input-background:var(--base-1);--vui-basic-input-color:var(--global-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);--vui-basic-input-padding-inline:var(--space-small);--vui-basic-input-font-size:var(--font-scale-body-small);--vui-basic-input-border-radius:var(--radius-medium);box-sizing:border-box;margin:0;inline-size:100%;min-inline-size:0;padding-inline:var(--vui-basic-input-padding-inline);font-family:inherit;font-size:var(--vui-basic-input-font-size);font-variation-settings:"wght" 400;color:var(--vui-basic-input-color);background:var(--vui-basic-input-background);border:none;border-radius:var(--vui-basic-input-border-radius);appearance:none;&::-webkit-contacts-auto-fill-button{background-color:var(--vui-basic-input-color)}&::placeholder{color:var(--vui-basic-input-placeholder-color)}&:disabled{--vui-basic-input-background:var(--global-disabled-background);--vui-basic-input-color:var(--global-disabled-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);cursor:not-allowed}&[data-invalid]{outline-color:oklab(from var(--highlight-red) l a b/.3)}&[data-sizing=content]{field-sizing:content}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-basic-input-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-basic-input-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-basic-input-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-basic-input-placeholder-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-field-label-padding-inline{syntax:"<length>";inherits:true;initial-value:0}.viraui__basic-input-module__BasicInput_5uE64{--vui-basic-input-background:var(--base-1);--vui-basic-input-color:var(--global-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);--vui-basic-input-padding-inline:var(--space-small);--vui-basic-input-font-size:var(--font-scale-body-small);--vui-basic-input-border-radius:var(--radius-medium);box-sizing:border-box;margin:0;inline-size:100%;min-inline-size:0;padding-inline:var(--vui-basic-input-padding-inline);font-family:inherit;font-size:var(--vui-basic-input-font-size);font-variation-settings:"wght" 400;color:var(--vui-basic-input-color);background:var(--vui-basic-input-background);border:none;border-radius:var(--vui-basic-input-border-radius);appearance:none;&::-webkit-contacts-auto-fill-button{background-color:var(--vui-basic-input-color)}&::placeholder{color:var(--vui-basic-input-placeholder-color)}&:disabled{--vui-basic-input-background:var(--global-disabled-background);--vui-basic-input-color:var(--global-disabled-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);cursor:not-allowed}&[data-invalid]{outline-color:oklab(from var(--highlight-red) l a b/.3)}&[data-sizing=content]{field-sizing:content}}}

package/dist/components/basic-input/field-label.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.overrides{.viraui__field-label-module__FieldLabel_R9SYf{display:inline;flex-direction:column;align-items:stretch;inline-size:100%;padding-inline:var(--vui-field-label-padding-inline,0)}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-basic-input-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-basic-input-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-basic-input-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-basic-input-placeholder-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-field-label-padding-inline{syntax:"<length>";inherits:true;initial-value:0}}@layer viraui.overrides{.viraui__field-label-module__FieldLabel_R9SYf{padding-inline:var(--vui-field-label-padding-inline)}}

package/dist/components/basic-input/field-label.js

@@ -2,6 +2,7 @@ import './field-label.css';
 import { clsx } from "../../core/clsx.js";
 import { Text } from "../text/text.js";
 import field_label_module_default from "./field-label.module.js";
+import { Stack } from "../stack/stack.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/basic-input/field-label.tsx
 /**
@@ -16,6 +17,7 @@ var FieldLabel = ({ children, className, size = "small", ...textProps }) => /* @
 	lineHeight: "small",
 	selection: false,
 	size,
+	render: /* @__PURE__ */ jsx(Stack, { render: /* @__PURE__ */ jsx("span", {}) }),
 	weight: "semibold",
 	...textProps,
 	children