@viraui/react 2026.7.1 → 2026.8.0

package/dist/catalog.json

@@ -86,6 +86,12 @@
       "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.",
       "agentDocs": "./specs/components/dialog/meta.xml"
     },
+    {
+      "id": "direction-provider",
+      "name": "DirectionProvider",
+      "summary": "Transparent re-export of Base UI DirectionProvider and useDirection. Enables RTL behavior for Base UI–backed components; does not set HTML dir or CSS direction — pair with document dir=rtl on a portal ancestor (usually html).",
+      "agentDocs": "./specs/components/direction-provider/meta.xml"
+    },
     {
       "id": "disclosure",
       "name": "Disclosure",
@@ -179,7 +185,7 @@
     {
       "id": "prose",
       "name": "Prose",
-      "summary": "Grouping region that applies heading-aware em rhythm to direct document blocks.",
+      "summary": "Text-wall grouping region (articles, docs, privacy) with heading-aware em rhythm; reading column via parent Stack `maxWidth` sized for body Text `size`.",
       "agentDocs": "./specs/components/prose/meta.xml"
     },
     {
@@ -257,7 +263,7 @@
     {
       "id": "text",
       "name": "Text",
-      "summary": "Theme-aware body-copy primitive with tone, family, and responsive body sizing.",
+      "summary": "Theme-aware body-copy primitive with tone, family, sizing, and readable-measure props (`maxWidth` / `lineHeight` / `balanced`).",
       "agentDocs": "./specs/components/text/meta.xml"
     },
     {
@@ -275,7 +281,7 @@
     {
       "id": "title",
       "name": "Title",
-      "summary": "Theme-aware heading and display typography primitive.",
+      "summary": "Theme-aware heading and display typography with readable-measure props (`maxWidth` / `lineHeight` / `balanced`).",
       "agentDocs": "./specs/components/title/meta.xml"
     },
     {

package/dist/components/button/button.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2xl);--vui-button-padding-inline:calc(var(--space-s) + var(--space-2xs));--vui-button-padding-block:var(--space-s);--vui-button-icon-size:calc(var(--space-xl) - var(--space-s) - var(--space-xs) - var(--space-2xs));--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-m);max-block-size:min-content;-webkit-user-select:none;user-select:none;margin-block:0;margin-inline:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:round(to-zero,var(--vui-button-height),2px);block-size:round(to-zero,var(--vui-button-height),2px);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-s);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-m);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{--__corner-shape:round;border-radius:var(--radius-full)}&[data-size=l]{--vui-button-height:calc(var(--space-2xl) + var(--space-xs));--vui-button-padding-inline:var(--space-m);--vui-button-padding-block:var(--space-s);--vui-button-radius:var(--radius-m);--vui-button-icon-size:calc(var(--space-l) - var(--space-xs))}&[data-size=s]{--vui-button-height:var(--space-xl);--vui-button-padding-inline:var(--space-s);--vui-button-padding-block:var(--space-xs);--vui-button-radius:var(--radius-s);--vui-button-icon-size:calc(var(--space-l) - var(--space-s));gap:var(--space-xs);font-size:var(--font-scale-body-s)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b / calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b / 0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b / 12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b / 30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-variant=flat]:is(:disabled,[aria-disabled=true]),&[data-variant=flat]:is(:disabled,[aria-disabled=true]):active,&[data-variant=flat]:is(:disabled,[aria-disabled=true]):hover{--vui-button-background:#0000}&[data-loading=true]:is(:disabled,[data-disabled],[aria-disabled=true]){pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:round(to-zero,var(--vui-button-icon-size),2px);inline-size:round(to-zero,var(--vui-button-icon-size),2px);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2xl);--vui-button-padding-inline:calc(var(--space-s) + var(--space-2xs));--vui-button-padding-block:var(--space-s);--vui-button-icon-size:calc(var(--space-xl) - var(--space-s) - var(--space-xs) - var(--space-2xs));--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-m);max-block-size:min-content;-webkit-user-select:none;user-select:none;margin-block:0;margin-inline:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:round(to-zero,var(--vui-button-height),2px);block-size:round(to-zero,var(--vui-button-height),2px);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 500;gap:var(--space-s);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-m);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{--__corner-shape:round;border-radius:var(--radius-full)}&[data-size=l]{--vui-button-height:calc(var(--space-2xl) + var(--space-xs));--vui-button-padding-inline:var(--space-m);--vui-button-padding-block:var(--space-s);--vui-button-radius:var(--radius-m);--vui-button-icon-size:calc(var(--space-l) - var(--space-xs))}&[data-size=s]{--vui-button-height:var(--space-xl);--vui-button-padding-inline:var(--space-s);--vui-button-padding-block:var(--space-xs);--vui-button-radius:var(--radius-s);--vui-button-icon-size:calc(var(--space-l) - var(--space-s));gap:var(--space-xs);font-size:var(--font-scale-body-s)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b / calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b / 0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b / 12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b / 30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-variant=flat]:is(:disabled,[aria-disabled=true]),&[data-variant=flat]:is(:disabled,[aria-disabled=true]):active,&[data-variant=flat]:is(:disabled,[aria-disabled=true]):hover{--vui-button-background:#0000}&[data-loading=true]:is(:disabled,[data-disabled],[aria-disabled=true]){pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:round(to-zero,var(--vui-button-icon-size),2px);inline-size:round(to-zero,var(--vui-button-icon-size),2px);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}

package/dist/components/direction-provider/index.d.ts

@@ -0,0 +1,2 @@
+export { DirectionProvider, useDirection } from '@base-ui/react/direction-provider';
+export type { DirectionProviderProps, TextDirection } from '@base-ui/react/direction-provider';

package/dist/components/direction-provider/index.js

@@ -0,0 +1,2 @@
+import { DirectionProvider, useDirection } from "@base-ui/react/direction-provider";
+export { DirectionProvider, useDirection };

package/dist/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './checkbox';
 export * from './chip';
 export * from './clamp-text';
 export * from './dialog';
+export * from './direction-provider';
 export * from './disclosure';
 export * from './elevator';
 export * from './fieldset';

package/dist/components/menu/menu-popup.d.ts

@@ -6,8 +6,8 @@ type MenuPopupPositionerProps = Omit<MenuPositioner.Props, 'className' | 'style'
  *
  * Encapsulates Portal + Positioner + Popup with Elevator + Surface list chrome
  * (Select-like). Positioning props forward to the Positioner; `sideOffset`
- * defaults to `2`. RTL placement comes from Base UI `DirectionProvider`;
- * app must also set HTML/`dir` (or `direction`) so portaled CSS inherits RTL.
+ * defaults to `2`. RTL placement comes from `@viraui/react` `DirectionProvider`
+ * (Base UI re-export); app must also set HTML/`dir` (or `direction`) so portaled CSS inherits RTL.
  *
  * @defaultValue `sideOffset` is `2`.
  */

package/dist/components/menu/menu.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__menu-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__menu-module__MenuPopup_GkrGa{min-inline-size:var(--anchor-width);max-block-size:var(--available-height);scroll-padding-block:var(--space-xs);color:var(--global-foreground);outline:none;position:relative;overscroll-behavior:contain;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__menu-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__menu-list-appear-offset)}&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__menu-list-appear-offset) 0}&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style]{translate:var(--__menu-list-appear-offset) 0;&:dir(rtl){translate:calc(var(--__menu-list-appear-offset) * -1) 0}}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0;&:dir(rtl){translate:var(--__menu-list-appear-offset) 0}}&[data-instant=click],&[data-instant=dismiss]{transition:none;scale:1;translate:0;opacity:1}&:focus,&:focus-visible{outline:none}}.viraui__menu-module__ItemRow_Be40k{min-block-size:var(--space-xl)}.viraui__menu-module__Indicator_btL99{min-inline-size:var(--space-s);min-block-size:var(--space-s);inline-size:fit-content;block-size:fit-content;color:var(--global-foreground);opacity:0;&[data-checked]{opacity:1}&[data-kind=chevron]{opacity:1;color:var(--global-foreground);&:dir(rtl){scale:-1 1}}}}@layer viraui.overrides{.viraui__menu-module__Item_9zmEO{cursor:pointer;&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-checked]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}&[data-sentiment=destructive]{color:var(--highlight-red);outline-color:var(--highlight-red);&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:oklab(from var(--highlight-red) l a b/12%)}}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__menu-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__menu-module__MenuPopup_GkrGa{min-inline-size:var(--anchor-width);max-block-size:var(--available-height);scroll-padding-block:var(--space-xs);color:var(--global-foreground);outline:none;position:relative;overscroll-behavior:contain;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__menu-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__menu-list-appear-offset)}&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__menu-list-appear-offset) 0}&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style]{translate:var(--__menu-list-appear-offset) 0;&:dir(rtl){translate:calc(var(--__menu-list-appear-offset) * -1) 0}}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style]{translate:calc(var(--__menu-list-appear-offset) * -1) 0;&:dir(rtl){translate:var(--__menu-list-appear-offset) 0}}&[data-instant=click],&[data-instant=dismiss]{transition:none;scale:1;translate:0;opacity:1}&:focus,&:focus-visible{outline:none}}.viraui__menu-module__ItemRow_Be40k{min-block-size:var(--space-xl)}.viraui__menu-module__Indicator_btL99{min-inline-size:var(--space-s);min-block-size:var(--space-s);inline-size:fit-content;block-size:fit-content;color:var(--global-foreground);opacity:0;&[data-checked]{opacity:1}&[data-kind=chevron]{opacity:1;color:var(--global-foreground);&:dir(rtl){scale:-1 1}}}}@layer viraui.overrides{.viraui__menu-module__Item_9zmEO{cursor:pointer;color:inherit;text-decoration:none;&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-checked]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}&[data-sentiment=destructive]{color:var(--highlight-red);outline-color:var(--highlight-red);&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:oklab(from var(--highlight-red) l a b/12%)}}}}

package/dist/components/progressive-blur/progressive-blur.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-progressive-blur-amount{syntax:"<length>";inherits:true;initial-value:16px}@property --__progressive-blur-factor{syntax:"<number>";inherits:false;initial-value:1}@property --__progressive-blur-mask-image{syntax:"<image>";inherits:false;initial-value:linear-gradient(#0000,#0000)}@property --__progressive-blur-mask-gradient{syntax:"*";inherits:false;initial-value:#0000}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK{pointer-events:none;&[data-direction=top]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to top, var(--__progressive-blur-mask-gradient))}}&[data-direction=right]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to right, var(--__progressive-blur-mask-gradient))}}&[data-direction=bottom]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to bottom, var(--__progressive-blur-mask-gradient))}}&[data-direction=left]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to left, var(--__progressive-blur-mask-gradient))}}}.viraui__progressive-blur-module__Layer_zbzMS{position:absolute;inset:0;backdrop-filter:blur(calc(var(--vui-progressive-blur-amount) * var(--__progressive-blur-factor)));mask-image:var(--__progressive-blur-mask-image)}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-progressive-blur-amount{syntax:"<length>";inherits:true;initial-value:16px}@property --__progressive-blur-factor{syntax:"<number>";inherits:false;initial-value:1}@property --__progressive-blur-mask-image{syntax:"<image>";inherits:false;initial-value:linear-gradient(#0000,#0000)}@property --__progressive-blur-mask-gradient{syntax:"*";inherits:false;initial-value:#0000}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK{pointer-events:none;&[data-direction=top]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to top, var(--__progressive-blur-mask-gradient))}}&[data-direction=right]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to right, var(--__progressive-blur-mask-gradient))}}&[data-direction=bottom]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to bottom, var(--__progressive-blur-mask-gradient))}}&[data-direction=left]{& .viraui__progressive-blur-module__Layer_zbzMS{--__progressive-blur-mask-image:linear-gradient(to left, var(--__progressive-blur-mask-gradient))}}}.viraui__progressive-blur-module__Layer_zbzMS{position:absolute;inset:0;border-radius:inherit;backdrop-filter:blur(calc(var(--vui-progressive-blur-amount) * var(--__progressive-blur-factor)));mask-image:var(--__progressive-blur-mask-image)}}

package/dist/components/prose/prose.d.ts

@@ -3,7 +3,10 @@ import type * as React from 'react';
 /**
  * Public Prose props.
  *
- * Grouping wrapper for document blocks. Native `div` attributes pass through.
+ * Text-wall grouping for articles, docs, privacy/terms — heading-aware em rhythm
+ * on direct document blocks. Prefer Stack `maxWidth` sized for the body Text `size`
+ * (~10–12 words/line; smaller → narrower). Short UI blurbs stay on Text/Title.
+ * Native `div` attributes pass through.
  * Replace the root with Base UI `render` (for example `article`). No `as` prop.
  *
  * @defaultValue Native div pass-through props keep React defaults.

package/dist/components/select/select-group.js

@@ -10,7 +10,7 @@ function SelectGroup({ children, className, label, ...groupProps }) {
 		className,
 		render: /* @__PURE__ */ jsx(Stack, {
 			rowGap: "2xs",
-			vPadding: "2xs"
+			vPadding: ["2xs", 0]
 		}),
 		children: [/* @__PURE__ */ jsxs(Select.GroupLabel, {
 			render: /* @__PURE__ */ jsx(Stack, {

package/dist/components/select/select.js

@@ -119,7 +119,10 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 											vPadding: "xs",
 											"data-vibrant": true
 										}),
-										children
+										children: /* @__PURE__ */ jsx(Stack, {
+											rowGap: "2xs",
+											children
+										})
 									})
 								}),
 								/* @__PURE__ */ jsx(Select.ScrollDownArrow, {

package/dist/components/spinner/spinner.d.ts

@@ -14,7 +14,12 @@ export type SpinnerProps = Omit<React.ComponentProps<'svg'>, 'color'> & {
      */
     color?: string;
     /**
-     * Visual animation style.
+     * Visual animation style. Catalog: `arc`, `atom`, `blocks`, `bouncing-dots`,
+     * `cascade`, `circular-dots`, `classic`, `classic-v2`, `clock`, `comet`,
+     * `compass`, `dual`, `eclipse`, `flip`, `gather`, `leap`, `linear-dots`,
+     * `loading`, `morph`, `orbit`, `pulse`, `radar`, `ring`, `ripple`, `slide`,
+     * `snake`, `swirl`, `trace`, `wave`. Legacy aliases: `bars`→`wave`,
+     * `dot-grid`→`blocks`, `dots`→`eclipse`.
      *
      * @defaultValue 'bars'
      */

package/dist/components/spinner/variants/arc.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__arc-module__spinner-arc-spin_hfLao{to{transform:rotate(1turn)}}.viraui__arc-module__Spin_iS5dU{transform-origin:12px 12px;animation:viraui__arc-module__spinner-arc-spin_hfLao .8s linear infinite;@media (prefers-reduced-motion:reduce){animation:none}}}

package/dist/components/spinner/variants/arc.d.ts

@@ -0,0 +1,2 @@
+declare const ArcGlyph: React.FC;
+export default ArcGlyph;

package/dist/components/spinner/variants/arc.js

@@ -0,0 +1,19 @@
+import './arc.css';
+import arc_module_default from "./arc.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spinner/variants/arc.tsx
+var ArcGlyph = () => /* @__PURE__ */ jsx("g", {
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	children: /* @__PURE__ */ jsx("circle", {
+		className: arc_module_default.Spin,
+		cx: "12",
+		cy: "12",
+		r: "10",
+		strokeDasharray: "18 44.8"
+	})
+});
+//#endregion
+export { ArcGlyph as default };

package/dist/components/spinner/variants/arc.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/arc.module.css
+var Spin = "viraui__arc-module__Spin_iS5dU";
+var arc_module_default = {
+	Spin,
+	"spinner-arc-spin": "viraui__arc-module__spinner-arc-spin_hfLao"
+};
+//#endregion
+export { Spin, arc_module_default as default };

package/dist/components/spinner/variants/atom.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__atom-module__spinner-atom-spin_pBfsa{to{transform:rotate(1turn)}}.viraui__atom-module__Orbit_Ceb6Y{transform-origin:12px 12px;animation:viraui__atom-module__spinner-atom-spin_pBfsa 1s linear infinite;animation-delay:calc(1s * (var(--__spinner-atom-step) - 3) / 3);@media (prefers-reduced-motion:reduce){animation:none;transform:rotate(60deg)}}}

package/dist/components/spinner/variants/atom.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 2D projection of upstream 3-orbit atom (shell + tilted ellipses).
+ * Pure SVG — no foreignObject / CSS 3D.
+ */
+declare const AtomGlyph: React.FC;
+export default AtomGlyph;

package/dist/components/spinner/variants/atom.js

@@ -0,0 +1,40 @@
+import './atom.css';
+import atom_module_default from "./atom.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/spinner/variants/atom.tsx
+/** Upstream: 3 orbits, tilt step = 180 / count. */
+var ORBITS = [
+	0,
+	1,
+	2
+];
+var TILT = 180 / ORBITS.length;
+/**
+* 2D projection of upstream 3-orbit atom (shell + tilted ellipses).
+* Pure SVG — no foreignObject / CSS 3D.
+*/
+var AtomGlyph = () => /* @__PURE__ */ jsxs("g", {
+	fill: "none",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "11.34",
+		strokeWidth: "1.32"
+	}), ORBITS.map((index) => /* @__PURE__ */ jsx("g", {
+		transform: `rotate(${index * TILT} 12 12)`,
+		children: /* @__PURE__ */ jsx("ellipse", {
+			className: atom_module_default.Orbit,
+			cx: "12",
+			cy: "12",
+			rx: "11.34",
+			ry: "4",
+			opacity: "0.55",
+			strokeWidth: "1.08",
+			style: { "--__spinner-atom-step": index }
+		})
+	}, index))]
+});
+//#endregion
+export { AtomGlyph as default };

package/dist/components/spinner/variants/atom.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/atom.module.css
+var Orbit = "viraui__atom-module__Orbit_Ceb6Y";
+var atom_module_default = {
+	Orbit,
+	"spinner-atom-spin": "viraui__atom-module__spinner-atom-spin_pBfsa"
+};
+//#endregion
+export { Orbit, atom_module_default as default };

package/dist/components/spinner/variants/blocks.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__blocks-module__spinner-blocks-sweep_KLVpF{0%,70%,to{transform:scale(1)}35%{transform:scale(0)}}.viraui__blocks-module__Cell_5peuH{transform-box:fill-box;transform-origin:center;animation:viraui__blocks-module__spinner-blocks-sweep_KLVpF 1.3s ease-in-out infinite;animation-delay:calc(1.3s * (var(--__spinner-blocks-step) - 5) / 5);@media (prefers-reduced-motion:reduce){animation:none;transform:scale(.8)}}}

package/dist/components/spinner/variants/blocks.d.ts

@@ -0,0 +1,2 @@
+declare const BlocksGlyph: React.FC;
+export default BlocksGlyph;

package/dist/components/spinner/variants/blocks.js

@@ -0,0 +1,25 @@
+import './blocks.css';
+import blocks_module_default from "./blocks.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spinner/variants/blocks.tsx
+var SIDE = 3;
+var CELL = 20.8 / SIDE;
+var CELLS = Array.from({ length: 9 }, (_, index) => ({
+	col: index % SIDE,
+	row: Math.floor(index / SIDE),
+	step: index % SIDE + Math.floor(index / SIDE)
+}));
+var BlocksGlyph = () => /* @__PURE__ */ jsx("g", {
+	fill: "currentColor",
+	children: CELLS.map(({ col, row, step }) => /* @__PURE__ */ jsx("rect", {
+		className: blocks_module_default.Cell,
+		x: col * 8.533333333333333,
+		y: row * 8.533333333333333,
+		width: CELL,
+		height: CELL,
+		rx: "1.5",
+		style: { "--__spinner-blocks-step": step }
+	}, `${col}-${row}`))
+});
+//#endregion
+export { BlocksGlyph as default };

package/dist/components/spinner/variants/blocks.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/blocks.module.css
+var Cell = "viraui__blocks-module__Cell_5peuH";
+var blocks_module_default = {
+	Cell,
+	"spinner-blocks-sweep": "viraui__blocks-module__spinner-blocks-sweep_KLVpF"
+};
+//#endregion
+export { Cell, blocks_module_default as default };

package/dist/components/spinner/variants/bouncing-dots.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__bouncing-dots-module__spinner-bouncing-dots-bounce_TVKej{0%{transform:translateY(14%)}to{transform:translateY(-72%)}}.viraui__bouncing-dots-module__Dot_oIZQs{transform-box:fill-box;transform-origin:center;animation:viraui__bouncing-dots-module__spinner-bouncing-dots-bounce_TVKej .5s ease-in-out infinite alternate;animation-delay:calc(.5s * (var(--__spinner-bouncing-dots-step) - 3) / 3);@media (prefers-reduced-motion:reduce){animation:none;transform:translateY(calc(var(--__spinner-bouncing-dots-step) * -20%))}}}

package/dist/components/spinner/variants/bouncing-dots.d.ts

@@ -0,0 +1,2 @@
+declare const BouncingDotsGlyph: React.FC;
+export default BouncingDotsGlyph;

package/dist/components/spinner/variants/bouncing-dots.js

@@ -0,0 +1,21 @@
+import './bouncing-dots.css';
+import bouncing_dots_module_default from "./bouncing-dots.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spinner/variants/bouncing-dots.tsx
+var DOTS = [
+	0,
+	1,
+	2
+];
+var BouncingDotsGlyph = () => /* @__PURE__ */ jsx("g", {
+	fill: "currentColor",
+	children: DOTS.map((index) => /* @__PURE__ */ jsx("circle", {
+		className: bouncing_dots_module_default.Dot,
+		cx: 5 + index * 7,
+		cy: "14",
+		r: "3",
+		style: { "--__spinner-bouncing-dots-step": index }
+	}, index))
+});
+//#endregion
+export { BouncingDotsGlyph as default };

package/dist/components/spinner/variants/bouncing-dots.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/bouncing-dots.module.css
+var Dot = "viraui__bouncing-dots-module__Dot_oIZQs";
+var bouncing_dots_module_default = {
+	Dot,
+	"spinner-bouncing-dots-bounce": "viraui__bouncing-dots-module__spinner-bouncing-dots-bounce_TVKej"
+};
+//#endregion
+export { Dot, bouncing_dots_module_default as default };

package/dist/components/spinner/variants/cascade.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__cascade-module__spinner-cascade-turn_eKyVK{to{transform:rotate(1turn)}}.viraui__cascade-module__Arc_t1Trm{transform-origin:12px 12px;animation:viraui__cascade-module__spinner-cascade-turn_eKyVK 1.5s cubic-bezier(.68,-.75,.265,1.75) infinite;animation-delay:calc(1.5s * (var(--__spinner-cascade-step) - 3) / 3);@media (prefers-reduced-motion:reduce){animation:none}}}

package/dist/components/spinner/variants/cascade.d.ts

@@ -0,0 +1,2 @@
+declare const CascadeGlyph: React.FC;
+export default CascadeGlyph;

package/dist/components/spinner/variants/cascade.js

@@ -0,0 +1,34 @@
+import './cascade.css';
+import cascade_module_default from "./cascade.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spinner/variants/cascade.tsx
+var RADII = [
+	{
+		r: 10.5,
+		dash: 16.5
+	},
+	{
+		r: 7,
+		dash: 11
+	},
+	{
+		r: 3.5,
+		dash: 5.5
+	}
+];
+var CascadeGlyph = () => /* @__PURE__ */ jsx("g", {
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	children: RADII.map(({ r, dash }, index) => /* @__PURE__ */ jsx("circle", {
+		className: cascade_module_default.Arc,
+		cx: "12",
+		cy: "12",
+		r,
+		strokeDasharray: `${dash} ${dash * 3}`,
+		style: { "--__spinner-cascade-step": index }
+	}, r))
+});
+//#endregion
+export { CascadeGlyph as default };

package/dist/components/spinner/variants/cascade.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/cascade.module.css
+var Arc = "viraui__cascade-module__Arc_t1Trm";
+var cascade_module_default = {
+	Arc,
+	"spinner-cascade-turn": "viraui__cascade-module__spinner-cascade-turn_eKyVK"
+};
+//#endregion
+export { Arc, cascade_module_default as default };

package/dist/components/spinner/variants/circular-dots.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__circular-dots-module__spinner-circular-dots-fade_27GIR{0%{opacity:1}to{opacity:.2}}.viraui__circular-dots-module__Dot_puBZv{animation:viraui__circular-dots-module__spinner-circular-dots-fade_27GIR .8s linear infinite;animation-delay:calc(.8s * (var(--__spinner-circular-dots-step) - 8) / 8);@media (prefers-reduced-motion:reduce){animation:none;opacity:.6}}}

package/dist/components/spinner/variants/circular-dots.d.ts

@@ -0,0 +1,2 @@
+declare const CircularDotsGlyph: React.FC;
+export default CircularDotsGlyph;

package/dist/components/spinner/variants/circular-dots.js

@@ -0,0 +1,26 @@
+import './circular-dots.css';
+import circular_dots_module_default from "./circular-dots.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spinner/variants/circular-dots.tsx
+var DOTS = [
+	[12, 2.25],
+	[18.894, 5.106],
+	[21.75, 12],
+	[18.894, 18.894],
+	[12, 21.75],
+	[5.106, 18.894],
+	[2.25, 12],
+	[5.106, 5.106]
+];
+var CircularDotsGlyph = () => /* @__PURE__ */ jsx("g", {
+	fill: "currentColor",
+	children: DOTS.map(([cx, cy], index) => /* @__PURE__ */ jsx("circle", {
+		className: circular_dots_module_default.Dot,
+		cx,
+		cy,
+		r: "2.25",
+		style: { "--__spinner-circular-dots-step": index }
+	}, `${cx}-${cy}`))
+});
+//#endregion
+export { CircularDotsGlyph as default };

package/dist/components/spinner/variants/circular-dots.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/circular-dots.module.css
+var Dot = "viraui__circular-dots-module__Dot_puBZv";
+var circular_dots_module_default = {
+	Dot,
+	"spinner-circular-dots-fade": "viraui__circular-dots-module__spinner-circular-dots-fade_27GIR"
+};
+//#endregion
+export { Dot, circular_dots_module_default as default };

package/dist/components/spinner/variants/classic-v2.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__classic-v2-module__spinner-classic-v2-fade_wMGQ3{0%{opacity:1}to{opacity:.4}}.viraui__classic-v2-module__Tick_n5bOq{animation:viraui__classic-v2-module__spinner-classic-v2-fade_wMGQ3 .8s linear infinite;animation-delay:calc(.8s * (var(--__spinner-classic-v2-step) - 8) / 8);@media (prefers-reduced-motion:reduce){animation:none;opacity:.5}}}

package/dist/components/spinner/variants/classic-v2.d.ts

@@ -0,0 +1,2 @@
+declare const ClassicV2Glyph: React.FC;
+export default ClassicV2Glyph;

package/dist/components/spinner/variants/classic-v2.js

@@ -0,0 +1,24 @@
+import './classic-v2.css';
+import classic_v2_module_default from "./classic-v2.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spinner/variants/classic-v2.tsx
+var TICKS = [
+	"M11 1C11 0.447715 11.4477 0 12 0C12.5523 0 13 0.447715 13 1V5C13 5.55228 12.5523 6 12 6C11.4477 6 11 5.55228 11 5V1Z",
+	"M17.6569 7.75736C17.2664 8.14788 16.6332 8.14788 16.2426 7.75736C15.8521 7.36684 15.8521 6.73367 16.2426 6.34315L19.0711 3.51472C19.4616 3.12419 20.0948 3.12419 20.4853 3.51472C20.8758 3.90524 20.8758 4.53841 20.4853 4.92893L17.6569 7.75736Z",
+	"M19 13C18.4477 13 18 12.5523 18 12C18 11.4477 18.4477 11 19 11H23C23.5523 11 24 11.4477 24 12C24 12.5523 23.5523 13 23 13H19Z",
+	"M16.2426 17.6569C15.8521 17.2664 15.8521 16.6332 16.2426 16.2426C16.6332 15.8521 17.2664 15.8521 17.6569 16.2426L20.4853 19.0711C20.8758 19.4616 20.8758 20.0948 20.4853 20.4853C20.0948 20.8758 19.4616 20.8758 19.0711 20.4853L16.2426 17.6569Z",
+	"M11 19C11 18.4477 11.4477 18 12 18C12.5523 18 13 18.4477 13 19V23C13 23.5523 12.5523 24 12 24C11.4477 24 11 23.5523 11 23V19Z",
+	"M4.92893 20.4853C4.53841 20.8758 3.90524 20.8758 3.51472 20.4853C3.12419 20.0948 3.12419 19.4616 3.51472 19.0711L6.34315 16.2426C6.73367 15.8521 7.36684 15.8521 7.75736 16.2426C8.14788 16.6332 8.14788 17.2664 7.75736 17.6569L4.92893 20.4853Z",
+	"M1 13C0.447715 13 0 12.5523 0 12C0 11.4477 0.447715 11 1 11H5C5.55228 11 6 11.4477 6 12C6 12.5523 5.55228 13 5 13H1Z",
+	"M3.51472 4.92893C3.12419 4.53841 3.12419 3.90524 3.51472 3.51472C3.90524 3.12419 4.53841 3.12419 4.92893 3.51472L7.75736 6.34315C8.14788 6.73367 8.14788 7.36684 7.75736 7.75736C7.36684 8.14788 6.73367 8.14788 6.34315 7.75736L3.51472 4.92893Z"
+];
+var ClassicV2Glyph = () => /* @__PURE__ */ jsx("g", {
+	fill: "currentColor",
+	children: TICKS.map((d, index) => /* @__PURE__ */ jsx("path", {
+		className: classic_v2_module_default.Tick,
+		d,
+		style: { "--__spinner-classic-v2-step": index }
+	}, d))
+});
+//#endregion
+export { ClassicV2Glyph as default };

package/dist/components/spinner/variants/classic-v2.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/classic-v2.module.css
+var Tick = "viraui__classic-v2-module__Tick_n5bOq";
+var classic_v2_module_default = {
+	Tick,
+	"spinner-classic-v2-fade": "viraui__classic-v2-module__spinner-classic-v2-fade_wMGQ3"
+};
+//#endregion
+export { Tick, classic_v2_module_default as default };

package/dist/components/spinner/variants/classic.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__classic-module__spinner-classic-fade_HUDyu{0%{opacity:1}to{opacity:.15}}.viraui__classic-module__Bar_9S0w-{transform-origin:12px 12px;animation:viraui__classic-module__spinner-classic-fade_HUDyu 1.2s linear infinite;animation-delay:calc(1.2s * (var(--__spinner-classic-step) - 12) / 12);@media (prefers-reduced-motion:reduce){animation:none;opacity:.5}}}

package/dist/components/spinner/variants/classic.d.ts

@@ -0,0 +1,2 @@
+declare const ClassicGlyph: React.FC;
+export default ClassicGlyph;

package/dist/components/spinner/variants/classic.js

@@ -0,0 +1,22 @@
+import './classic.css';
+import classic_module_default from "./classic.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spinner/variants/classic.tsx
+var BARS = Array.from({ length: 12 }, (_, index) => index);
+var ClassicGlyph = () => /* @__PURE__ */ jsx("g", {
+	fill: "currentColor",
+	children: BARS.map((index) => /* @__PURE__ */ jsx("rect", {
+		className: classic_module_default.Bar,
+		x: "16.5",
+		y: "10.8",
+		width: "5.5",
+		height: "2.4",
+		rx: "1.2",
+		style: {
+			"--__spinner-classic-step": index,
+			transform: `rotate(${index * 30}deg)`
+		}
+	}, index))
+});
+//#endregion
+export { ClassicGlyph as default };

package/dist/components/spinner/variants/classic.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/classic.module.css
+var Bar = "viraui__classic-module__Bar_9S0w-";
+var classic_module_default = {
+	Bar,
+	"spinner-classic-fade": "viraui__classic-module__spinner-classic-fade_HUDyu"
+};
+//#endregion
+export { Bar, classic_module_default as default };

package/dist/components/spinner/variants/clock.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__clock-module__spinner-clock-spin_Ht1e1{to{transform:rotate(1turn)}}.viraui__clock-module__Hand_Za5YY{transform-origin:12px 12px;animation:viraui__clock-module__spinner-clock-spin_Ht1e1 1.2s linear infinite;@media (prefers-reduced-motion:reduce){animation:none}}}

package/dist/components/spinner/variants/clock.d.ts

@@ -0,0 +1,2 @@
+declare const ClockGlyph: React.FC;
+export default ClockGlyph;

package/dist/components/spinner/variants/clock.js

@@ -0,0 +1,18 @@
+import './clock.css';
+import clock_module_default from "./clock.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/spinner/variants/clock.tsx
+var ClockGlyph = () => /* @__PURE__ */ jsxs("g", {
+	fill: "currentColor",
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "12",
+		opacity: "0.1"
+	}), /* @__PURE__ */ jsx("path", {
+		className: clock_module_default.Hand,
+		d: "M16.7906 4.3809C15.7809 3.74609 14.6596 3.32096 13.4931 3.12471C12.6761 2.98727 12 3.67158 12 4.5V10.8049C12 11.2382 12.1874 11.6503 12.5139 11.9352L17.8499 16.5905C18.4931 17.1516 19.487 17.067 19.8965 16.3181C20.4534 15.2997 20.8104 14.1787 20.9426 13.0157C21.1338 11.3315 20.8457 9.62751 20.1111 8.0999C19.3766 6.57228 18.2255 5.28315 16.7906 4.3809Z"
+	})]
+});
+//#endregion
+export { ClockGlyph as default };

package/dist/components/spinner/variants/clock.module.js

@@ -0,0 +1,8 @@
+//#region src/components/spinner/variants/clock.module.css
+var Hand = "viraui__clock-module__Hand_Za5YY";
+var clock_module_default = {
+	Hand,
+	"spinner-clock-spin": "viraui__clock-module__spinner-clock-spin_Ht1e1"
+};
+//#endregion
+export { Hand, clock_module_default as default };

package/dist/components/spinner/variants/comet.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__comet-module__spinner-comet-spin_SPgQw{to{transform:rotate(1turn)}}.viraui__comet-module__Spin_c3-Xl{transform-origin:12px 12px;animation:viraui__comet-module__spinner-comet-spin_SPgQw .7s linear infinite;@media (prefers-reduced-motion:reduce){animation:none}}.viraui__comet-module__Tail_z8BYu{opacity:.85}}

package/dist/components/spinner/variants/comet.d.ts

@@ -0,0 +1,2 @@
+declare const CometGlyph: React.FC;
+export default CometGlyph;

package/dist/components/spinner/variants/comet.js

@@ -0,0 +1,33 @@
+import './comet.css';
+import comet_module_default from "./comet.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/spinner/variants/comet.tsx
+/** Upstream: stroke = 12% of size; head diameter = stroke; tip at top of ring. */
+var STROKE = 2.88;
+var R = 12 - STROKE / 2;
+var HEAD_R = STROKE / 2;
+var CometGlyph = () => /* @__PURE__ */ jsxs("g", {
+	className: comet_module_default.Spin,
+	children: [/* @__PURE__ */ jsx("g", {
+		transform: "rotate(-90 12 12)",
+		children: /* @__PURE__ */ jsx("circle", {
+			className: comet_module_default.Tail,
+			cx: "12",
+			cy: "12",
+			r: R,
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: STROKE,
+			strokeLinecap: "round",
+			pathLength: 100,
+			strokeDasharray: "48 52"
+		})
+	}), /* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: 1.4399999999999995,
+		r: HEAD_R,
+		fill: "currentColor"
+	})]
+});
+//#endregion
+export { CometGlyph as default };