@viraui/react 2026.7.1 → 2026.9.0

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

@@ -18,9 +18,9 @@
     render={
       <Surface color={1} border="all" radius="m" vPadding="2xs" hPadding="2xs" aria-label="100%">
         <Stack direction="row" vAlign="center">
-          <IconButton aria-label="Zoom out" icon={<Minus aria-hidden size="1rem" />} variant="flat" />
-          <IconButton aria-label="Reset zoom" icon={<FocusCenter aria-hidden size="1rem" />} variant="flat" />
-          <IconButton aria-label="Zoom in" icon={<Plus aria-hidden size="1rem" />} variant="flat" />
+          <IconButton aria-label="Zoom out" icon={<Minus aria-hidden />} variant="flat" />
+          <IconButton aria-label="Reset zoom" icon={<FocusCenter aria-hidden />} variant="flat" />
+          <IconButton aria-label="Zoom in" icon={<Plus aria-hidden />} variant="flat" />
         </Stack>
       </Surface>
     }
@@ -40,8 +40,8 @@
         aria-label="Shuffle lock"
         pressed={false}
         variant="flat"
-        restingIcon={<LockOpen2 aria-hidden size="1rem" />}
-        pressedIcon={<Lock aria-hidden size="1rem" />}
+        restingIcon={<LockOpen2 aria-hidden />}
+        pressedIcon={<Lock aria-hidden />}
       />
     }
   />
@@ -58,7 +58,7 @@
     delay={50}
     render={
       <span aria-label="Supported by: Chrome, Edge, Firefox">
-        <TriangleWarning aria-hidden size="1rem" color="var(--highlight-yellow)" />
+        <TriangleWarning aria-hidden color="var(--highlight-yellow)" />
       </span>
     }
   />
@@ -103,7 +103,7 @@ const toolbarHandle = Tooltip.createHandle<string>();
   closeDelay={200}
   handle={toolbarHandle}
   payload="Duplicate"
-  render={<Duplicate size={22} aria-label="Duplicate" />}
+  render={<Duplicate aria-label="Duplicate" />}
 />
 {/* more Icon triggers with the same handle… */}
 

package/dist/specs/foundation/attributes.xml

@@ -138,9 +138,8 @@
   <attr name="data-vibrant">
     <presence>boolean attribute; value ignored</presence>
     <effect>
-      When the active theme sets --effect-vibrancy, applies vibrancy backdrop-filter (brightness/blur/saturate). Surface with data-vibrant translucifies its fill via component CSS: it doesn't apply a background color to the element, that still need to be set by the consumer.
-      Only the  urface component applies the correct `color` prop based on the presence of the attribute. For custom styles you need to set the background color explicitly if you need one.
-      In built-in themes, the applied backdrop-filter is different based on the active theme mode: light or dark.
+      When the active theme sets --effect-vibrancy, applies vibrancy backdrop-filter (blur/saturate). Surface with data-vibrant translucifies its fill via component CSS: it doesn't apply a background color to the element, that still need to be set by the consumer.
+      Only the Surface component applies the correct `color` prop based on the presence of the attribute. For custom styles you need to set the background color explicitly if you need one.
     </effect>
     <values>
       <value>(boolean presence)</value>
@@ -152,6 +151,27 @@
       <gotcha>Surface</gotcha>
       <gotcha>--effect-vibrancy</gotcha>
       <gotcha>--vibrancy-blur</gotcha>
-      <gotcha>--vibrancy-brightness</gotcha>
+  </attr>
+  <attr name="data-layout-fixed">
+    <presence>boolean attribute on table elements</presence>
+    <effect>Sets table-layout: fixed on the table. Preflight already collapses borders, full inline-size, cell padding, and thead hairline — this only switches layout algorithm.</effect>
+    <values>
+      <value>(boolean presence)</value>
+    </values>
+    <when>Column widths must follow the first row / explicit widths instead of content</when>
+    <when_not>When auto table layout is already correct</when_not>
+    <when_not>Hand-rolling table-layout: fixed in app CSS instead of this attr</when_not>
+    <gotcha>Baseline table chrome lives in modules.xml id=baseline — do not reinvent cell padding or collapse.</gotcha>
+  </attr>
+  <attr name="data-table-separators">
+    <presence>boolean attribute on table elements</presence>
+    <effect>Draws a 1px base-2 hairline between consecutive body rows (tr + tr). Does not paint under thead (thead already has its own inset rule).</effect>
+    <values>
+      <value>(boolean presence)</value>
+    </values>
+    <when>Dense data tables that need row separators without custom border CSS</when>
+    <when_not>When thead/body styling without body-row lines is enough</when_not>
+    <when_not>Hand-rolling tr + tr border-top / row divider CSS instead of this attr</when_not>
+    <gotcha>Separators are body-row only; thead uses a separate inset box-shadow from baseline.</gotcha>
   </attr>
 </attributes>

package/dist/specs/foundation/bootstrap.xml

@@ -39,7 +39,7 @@
     <tree>Toast.Portal &gt; Toast.Viewport &gt; Toast.Banner per toast</tree>
     <next_js>Keep CSS side-effect imports in the Server Component root layout. Put the provider tree in a Client Component that wraps children.</next_js>
     <astro>React context does not cross Astro islands. Providers must live in the same island as the Vira overlays that consume them.</astro>
-    <rtl>For RTL menus and popups, wrap with Base UI DirectionProvider direction="rtl" and set dir="rtl" on a portal ancestor (usually html).</rtl>
+    <rtl>For RTL menus and popups, wrap with DirectionProvider direction="rtl" from @viraui/react (transparent Base UI re-export) and set dir="rtl" on a portal ancestor (usually html). Opt-in — not part of the Dialog/Tooltip/Toast overlay shell.</rtl>
   </root_providers>
   <next_js_app_router>
     <rule>In Next.js App Router apps, import theme CSS, font CSS, and @viraui/react/preflight.css as JavaScript side-effect imports in root app/layout.tsx; never bootstrap them with CSS @import in globals.css.</rule>

package/dist/specs/foundation/modules.xml

@@ -19,10 +19,14 @@
   </agent_rules>
 
   <module id="baseline">
-    <purpose>Root document baseline after theme load: rem root from --font-root-size, color/background from --global-*, polarity --is-light-mode, scrollbar and focus-visible ring, reduced-motion, corner-shape gate.</purpose>
-    <provides>--is-light-mode; focus ring via --outline*; scrollbar via --scrollbar-*; corner-shape application</provides>
+    <purpose>Root document baseline after theme load: rem root from --font-root-size, color/background from --global-*, polarity --is-light-mode, scrollbar and focus-visible ring, reduced-motion, corner-shape gate; plus universal margin/box-sizing reset, body font baseline, media/form/table element resets, and nested-list font-size fix.</purpose>
+    <provides>--is-light-mode; focus ring via --outline*; scrollbar via --scrollbar-*; corner-shape application; margin/box-sizing reset; body font family/size/optical sizing; img/svg defaults; button/fieldset unstyled baseline; table collapse/spacing/cell padding/thead rule; data-layout-fixed; data-table-separators; nested ol/ul font-size: initial</provides>
     <use>Theme tokens + data-mode. Query polarity with @container root style(--is-light-mode: black|white). Details: toggles.xml.</use>
+    <use>Bare img is block + full inline-size (capped); svg without fill inherits currentcolor. button and fieldset ship unstyled (Vira controls re-skin). table is full-width collapsed with cell padding and thead hairline; opt into fixed layout or body-row separators via attributes.xml.</use>
+    <use>Nested lists (ol ul / ul ol) reset font-size so inherited shrink from parent list does not cascade — list chrome itself is typography module.</use>
     <do_not>Replace preflight reset with a second framework reboot. Prefer omitting third-party preflight/reset (setup skill coexistence).</do_not>
+    <do_not>Hand-roll table-layout: fixed or body-row hairlines when data-layout-fixed / data-table-separators cover it.</do_not>
+    <do_not>Re-apply universal margin:0 / box-sizing:border-box or button/fieldset appearance resets that preflight already owns.</do_not>
   </module>
   <module id="font-scale">
     <purpose>Derives --font-scale-* from theme --font-heading-typescale / --font-body-typescale (pow + round). body-m = 1rem; smaller body steps floored; larger body and display from continuous powers.</purpose>
@@ -49,10 +53,15 @@
     <do_not>Assign --vira-flex-grow / --vira-flex-shrink directly in app CSS — use the data-* attrs.</do_not>
   </module>
   <module id="typography">
-    <purpose>Semantic HTML element typography defaults and link chrome opt-out.</purpose>
-    <provides>element type defaults; data-no-link-style</provides>
-    <use>Every a:any-link gets preflight link chrome (interactive color + animated underline) unless data-no-link-style is set. Prose links — including Text/Title render as a — keep it. Chrome components set the attr (attributes.xml).</use>
+    <purpose>Semantic HTML element typography defaults and link chrome opt-out. Preflight already styles bare prose, lists, and inline chrome — agents must not reinvent these as app CSS by default.</purpose>
+    <provides>element type defaults for p, small, strong/b, s, address, label/legend, a:any-link, code, kbd, abbr, mark, del, ins, ul, ol, dt, dd; data-no-link-style</provides>
+    <use>Prose: p uses body-m size + 1.5 line-height; small scales down; strong/b use wght 700; s is strikethrough + disabled foreground; address is normal style; label/legend inherit font-size.</use>
+    <use>Inline chrome: every a:any-link gets interactive color + animated underline unless data-no-link-style is set (attributes.xml). Prose links — including Text/Title render as a — keep it. Chrome components set the attr. Inline code (not inside pre) and kbd get contrast pill chrome; pre code drops the box-shadow. abbr uses dashed primary underline. mark / del / ins get highlight-tinted chips (yellow / red / green).</use>
+    <use>Lists: ul gets inline padding + muted ::marker; ol gets muted tabular-nums ::marker. Prefer bare ul/ol/li (or Stack render as list) — do not invent list-style / marker / list padding CSS. Nested-list font-size reset is baseline module.</use>
+    <use>Definitions: dt is semibold; dd has zero margin/padding.</use>
     <do_not>Rely on class presence to suppress link styles — use data-no-link-style only.</do_not>
+    <do_not>Reinvent list markers, list-style-type, or ul/ol padding when preflight already owns them — unless the consumer expressly asks for an override.</do_not>
+    <do_not>Reinvent link underline, inline code/kbd pills, or mark/del/ins highlight chips as app CSS by default.</do_not>
   </module>
   <module id="vibrancy">
     <purpose>Theme-gated backdrop-filter glass on opt-in hosts.</purpose>

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

@@ -45,9 +45,9 @@
     <agent>Theme-level gates. Runtime polarity/details: toggles.xml. Do not invent alternate effect hooks.</agent>
   </topic>
   <topic id="vibrancy" surface="theme">
-    <pattern>--vibrancy-blur | --vibrancy-brightness</pattern>
-    <summary>Vibrancy glass params; blur is a numeric amount consumed as pixels, brightness is a percent string.</summary>
-    <agent>Theme params for data-vibrant hosts when --effect-vibrancy is on. Do not hand-roll backdrop-filter.</agent>
+    <pattern>--vibrancy-blur</pattern>
+    <summary>Vibrancy glass blur amount; numeric value consumed as pixels in data-vibrant backdrop-filter (with fixed saturate).</summary>
+    <agent>Theme param for data-vibrant hosts when --effect-vibrancy is on. Do not hand-roll backdrop-filter.</agent>
   </topic>
   <topic id="radius" surface="theme">
     <pattern>--radius-* | --corner-shape</pattern>

package/dist/specs/foundation/toggles.xml

@@ -5,13 +5,13 @@
     <when>html registers polarity via contrast-color(var(--global-background)) so light backgrounds resolve to black and dark backgrounds to white; container name is root (see core.css).</when>
     <when>data-mode=&quot;light&quot; forces --is-light-mode: black and color-scheme: light; data-mode=&quot;dark&quot; forces white and color-scheme: dark.</when>
     <when>data-mode=&quot;inverted&quot; flips color-scheme against the root value: @container root style(--is-light-mode: black) → dark; style(--is-light-mode: white) → light.</when>
-    <when>Component/preflight CSS branches on polarity with @container root style(--is-light-mode: black) or white — e.g. vibrancy brightness, holofoil mix-blend, Button/Chip secondary fills. Do not invent alternate light/dark hooks.</when>
+    <when>Component/preflight CSS branches on polarity with @container root style(--is-light-mode: black) or white — e.g. holofoil mix-blend, Button/Chip secondary fills. Do not invent alternate light/dark hooks.</when>
   </toggle>
   <toggle name="--effect-shadows">
     <when>Empty/unset enables data-elevation box-shadow stacks; set to initial to disable. Preflight gates with @container root not style(--effect-shadows: initial). Do not hand-roll box-shadow.</when>
   </toggle>
   <toggle name="--effect-vibrancy">
-    <when>Empty/unset enables data-vibrant backdrop filters; set to initial to disable. Preflight gates with @container root not style(--effect-vibrancy: initial); vibrancy may further branch on --is-light-mode. Do not hand-roll backdrop-filter.</when>
+    <when>Empty/unset enables data-vibrant backdrop filters; set to initial to disable. Preflight gates with @container root not style(--effect-vibrancy: initial). Do not hand-roll backdrop-filter.</when>
   </toggle>
   <toggle name="--effect-corner-shape">
     <when>Empty/unset enables theme corner-shape on *; set to initial to disable. Preflight gates with @container root not style(--effect-corner-shape: initial) and applies var(--__corner-shape, var(--corner-shape)). Pair with --corner-shape token.</when>
@@ -20,7 +20,7 @@
     <when>Brand default is initial (off). When on, paints a fixed body::after foil overlay gated by @container root not style(--effect-holofoil: initial); foil blend adjusts under @container root style(--is-light-mode: white). Do not invent alternate foil hooks.</when>
   </toggle>
   <toggle name="--effect-fluid-typography">
-    <when>Empty/unset enables Text/Title fluid clamp sizing (prev scale step→step via viewport progress) when the instance `fluid` prop is true. Text defaults `fluid` false (locked at --font-scale-body-*); Title defaults true. Set theme to initial to lock each size at its theme scale token (--font-scale-body-* / --font-scale-display / --font-scale-h*). Per-instance: Text/Title `fluid={false}` → data-*-fluid=false locks that node to its size max token; Text `fluid` opts in. Module CSS also gates with @container root style(--effect-fluid-typography: initial). Text size xs stays fixed (min=max). At full fluid progress, on and off resolve to the same token.</when>
+    <when>Empty/unset enables Text/Title fluid clamp sizing (prev scale step→step via viewport progress) when the instance `fluid` prop is true. Text defaults `fluid` false (locked at --font-scale-body-*); Title defaults true. Set theme to initial to lock each size at its theme scale token (--font-scale-body-* / --font-scale-display / --font-scale-h*). Per-instance: Text/Title `fluid={false}` → data-*-fluid=false locks that node to its size max token; Text `fluid` opts in. Module CSS also gates with @container root style(--effect-fluid-typography: initial). Text size s and xs stay fixed (min=max); fluid clamp starts at m. At full fluid progress, on and off resolve to the same token.</when>
   </toggle>
   <toggle name="--corner-shape">
     <when>Theme corner shape token; preflight may set internal --__corner-shape beside full radius. Not a consumer data-*.</when>

package/dist/specs/index.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<index package="@viraui/react" version="2026.7.1" generated="2026-10-08T15:55:11.992Z">
+<index package="@viraui/react" version="2026.9.0" generated="2026-10-15T06:47:40.657Z">
   <categories>
     <category id="layout" />
     <category id="action" />
@@ -151,6 +151,16 @@
       <unit kind="patterns" href="components/dialog/patterns.xml" />
     </units>
   </entry>
+  <entry id="direction-provider" category="layout" title="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 porta…</summary>
+    <units>
+      <unit kind="meta" href="components/direction-provider/meta.xml" />
+      <unit kind="a11y" href="components/direction-provider/a11y.xml" />
+      <unit kind="props" href="components/direction-provider/props.xml" />
+      <unit kind="usage" href="components/direction-provider/usage.xml" />
+      <unit kind="patterns" href="components/direction-provider/patterns.xml" />
+    </units>
+  </entry>
   <entry id="disclosure" category="layout" title="Disclosure">
     <summary>Single-section expand/collapse wrapping Base UI Collapsible. Default Trigger is Surface with render → Collapsible Trigger; Panel is a height motion shell with no default content padding. Use Accordio…</summary>
     <units>
@@ -302,7 +312,7 @@
     </units>
   </entry>
   <entry id="prose" category="typography" title="Prose">
-    <summary>Grouping region that applies heading-aware em rhythm to direct document blocks.</summary>
+    <summary>Text-wall grouping region (articles, docs, privacy) with heading-aware em rhythm; reading column via parent Stack `maxWidth` sized for body Text `size`.</summary>
     <units>
       <unit kind="meta" href="components/prose/meta.xml" />
       <unit kind="a11y" href="components/prose/a11y.xml" />
@@ -432,7 +442,7 @@
     </units>
   </entry>
   <entry id="text" category="typography" title="Text">
-    <summary>Theme-aware body-copy primitive with tone, family, and responsive body sizing.</summary>
+    <summary>Theme-aware body-copy primitive with tone, family, sizing, and readable-measure props (`maxWidth` / `lineHeight` / `balanced`).</summary>
     <units>
       <unit kind="meta" href="components/text/meta.xml" />
       <unit kind="a11y" href="components/text/a11y.xml" />
@@ -462,7 +472,7 @@
     </units>
   </entry>
   <entry id="title" category="typography" title="Title">
-    <summary>Theme-aware heading and display typography primitive.</summary>
+    <summary>Theme-aware heading and display typography with readable-measure props (`maxWidth` / `lineHeight` / `balanced`).</summary>
     <units>
       <unit kind="meta" href="components/title/meta.xml" />
       <unit kind="a11y" href="components/title/a11y.xml" />
@@ -588,18 +598,6 @@
       <unit kind="pattern" href="patterns/compose-layout-first.xml" />
     </units>
   </entry>
-  <entry id="equal-width-actions" category="pattern" title="Equal-width action row">
-    <summary>Span or share space with Stack `fullWidth` and/or `expandChildren` (and control `fullWidth` when the surface owns it). Orthogonal: `fullWidth` sizes the Stack; `expandChildren` grows direct children …</summary>
-    <units>
-      <unit kind="pattern" href="patterns/equal-width-actions.xml" />
-    </units>
-  </entry>
-  <entry id="page-chrome" category="pattern" title="Page chrome with Stack render">
-    <summary>Own page/section flex with Stack. Pick semantic tags (`header`, `main`, `nav`, `section`, …) via `render={&amp;lt;tag /&amp;gt;}` — keep Stack as the layout engine. CSS modules may set min-block-size / scrol…</summary>
-    <units>
-      <unit kind="pattern" href="patterns/page-chrome.xml" />
-    </units>
-  </entry>
   <entry id="settings-panel" category="pattern" title="Settings panel (Surface + Stack)">
     <summary>Wrap a settings block in Surface for fill/border/radius/padding; nest Stack for child gaps and rows. Compose the settings-row pattern inside for label+control rows. Prefer props over CSS for spacing …</summary>
     <units>
@@ -612,10 +610,4 @@
       <unit kind="pattern" href="patterns/settings-row.xml" />
     </units>
   </entry>
-  <entry id="stack-as-surface" category="pattern" title="Stack as Surface (avoid extra DOM)">
-    <summary>When a flex cluster also needs Surface chrome (border, color, radius, padding), prefer `Stack render={&amp;lt;Surface … /&amp;gt;}` so layout + chrome share one root. Put gap/align/`fullWidth`/`expandChildre…</summary>
-    <units>
-      <unit kind="pattern" href="patterns/stack-as-surface.xml" />
-    </units>
-  </entry>
 </index>

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

@@ -10,7 +10,7 @@
     <ref id="bleed" units="meta,usage" />
   </uses>
   <do>Prefer Vira layout roots (`Stack`, `Grid`, `Masonry`, `Bleed`, `Surface`) and their public props for every consumer layout. Treat `Stack` as the default box: an enriched `div` (flex + gap/padding/align/`fullWidth`/`render`/…) — prefer it over bare wrapper `div`s even for simple nesting. Compose **with** these parts; default custom CSS = **app chrome** the system does not own. Prefer another Vira component (e.g. `Surface` for border/fill/radius) or `render` merge over a CSS class for chrome the library already owns. Do not open a CSS module to reshape a Vira control unless the consumer **expressly asked** for that override (still read `props`/`usage` first; a future override layer will formalize hooks).</do>
-  <dont>Do not invent bare wrapper `div`s (or `display:flex` / `display:grid` / CSS `gap` / `padding` / `paddingBlock*` / `paddingInline*` / `width` / `inline-size` / border/radius chrome on raw tags or Vira control roots) when `Stack` or another layout primitive / `Surface` / a public `fullWidth` or `hPadding`/`vPadding` tuple covers it. Do not skip composition to reach for a one-off stylesheet — including size-fill classNames that would do nothing on fixed-size controls. Do not pass `render` that restates a component&apos;s default root (e.g. Stack `render={&lt;div /&gt;}`) — omit `render` unless the host changes.</dont>
+  <dont>Do not invent bare wrapper `div`s (or `display:flex` / `display:grid` / CSS `gap` / `padding` / `paddingBlock*` / `paddingInline*` / `width` / `height` / `inline-size` / `block-size: 100%` / border/radius chrome on raw tags or Vira control roots) when `Stack` or another layout primitive / `Surface` / a public `fullWidth`/`fullHeight`/`expandChildren` + stretch align (Stack `patterns.xml`) or `hPadding`/`vPadding` tuple covers it. Do not skip composition to reach for a one-off stylesheet — including size-fill classNames that would do nothing on fixed-size controls. Do not pass `render` that restates a component&apos;s default root (e.g. Stack `render={&lt;div /&gt;}`) — omit `render` unless the host changes.</dont>
   <tsx><![CDATA[
 {/* Flex row + panel chrome: one DOM node via Stack render={<Surface />} */}
 <Stack

package/package.json

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

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

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

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

@@ -1,134 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-//#region src/components/spinner/variants/bars.tsx
-/** Sanitize React useId for SVG id / begin references (strip `:`). */
-var smilId = (reactId, name) => `${reactId.replaceAll(":", "")}${name}`;
-var BarsGlyph = () => {
-	const reactId = useId();
-	const ccmt = smilId(reactId, "ccmt");
-	const izzb = smilId(reactId, "izzb");
-	const pulse = {
-		y: {
-			values: "6;1;6",
-			keySplines: ".36,.61,.3,.98;.36,.61,.3,.98"
-		},
-		height: {
-			values: "12;22;12",
-			keySplines: ".36,.61,.3,.98;.36,.61,.3,.98"
-		}
-	};
-	return /* @__PURE__ */ jsxs("g", {
-		fill: "currentColor",
-		children: [
-			/* @__PURE__ */ jsxs("rect", {
-				x: "1",
-				y: "6",
-				width: "2.8",
-				height: "12",
-				children: [/* @__PURE__ */ jsx("animate", {
-					id: ccmt,
-					begin: `0;${izzb}.end-0.1s`,
-					attributeName: "y",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.y.values,
-					keySplines: pulse.y.keySplines
-				}), /* @__PURE__ */ jsx("animate", {
-					begin: `0;${izzb}.end-0.1s`,
-					attributeName: "height",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.height.values,
-					keySplines: pulse.height.keySplines
-				})]
-			}),
-			/* @__PURE__ */ jsxs("rect", {
-				x: "5.8",
-				y: "6",
-				width: "2.8",
-				height: "12",
-				children: [/* @__PURE__ */ jsx("animate", {
-					begin: `${ccmt}.begin+0.1s`,
-					attributeName: "y",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.y.values,
-					keySplines: pulse.y.keySplines
-				}), /* @__PURE__ */ jsx("animate", {
-					begin: `${ccmt}.begin+0.1s`,
-					attributeName: "height",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.height.values,
-					keySplines: pulse.height.keySplines
-				})]
-			}),
-			/* @__PURE__ */ jsxs("rect", {
-				x: "10.6",
-				y: "6",
-				width: "2.8",
-				height: "12",
-				children: [/* @__PURE__ */ jsx("animate", {
-					begin: `${ccmt}.begin+0.2s`,
-					attributeName: "y",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.y.values,
-					keySplines: pulse.y.keySplines
-				}), /* @__PURE__ */ jsx("animate", {
-					begin: `${ccmt}.begin+0.2s`,
-					attributeName: "height",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.height.values,
-					keySplines: pulse.height.keySplines
-				})]
-			}),
-			/* @__PURE__ */ jsxs("rect", {
-				x: "15.4",
-				y: "6",
-				width: "2.8",
-				height: "12",
-				children: [/* @__PURE__ */ jsx("animate", {
-					begin: `${ccmt}.begin+0.3s`,
-					attributeName: "y",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.y.values,
-					keySplines: pulse.y.keySplines
-				}), /* @__PURE__ */ jsx("animate", {
-					begin: `${ccmt}.begin+0.3s`,
-					attributeName: "height",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.height.values,
-					keySplines: pulse.height.keySplines
-				})]
-			}),
-			/* @__PURE__ */ jsxs("rect", {
-				x: "20.2",
-				y: "6",
-				width: "2.8",
-				height: "12",
-				children: [/* @__PURE__ */ jsx("animate", {
-					id: izzb,
-					begin: `${ccmt}.begin+0.4s`,
-					attributeName: "y",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.y.values,
-					keySplines: pulse.y.keySplines
-				}), /* @__PURE__ */ jsx("animate", {
-					begin: `${ccmt}.begin+0.4s`,
-					attributeName: "height",
-					calcMode: "spline",
-					dur: "0.6s",
-					values: pulse.height.values,
-					keySplines: pulse.height.keySplines
-				})]
-			})
-		]
-	});
-};
-//#endregion
-export { BarsGlyph as default };

package/dist/components/spinner/variants/dot-grid.css

@@ -1 +0,0 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@keyframes viraui__dot-grid-module__spinner-dot-grid-1_X76yC{9.0909090909%{transform:translate(-12px)}18.1818181818%{transform:translate(0)}27.2727272727%{transform:translate(0)}36.3636363636%{transform:translate(12px)}45.4545454545%{transform:translate(12px,12px)}54.5454545455%{transform:translate(12px,12px)}63.6363636364%{transform:translate(12px,12px)}72.7272727273%{transform:translate(12px)}81.8181818182%{transform:translate(0)}90.9090909091%{transform:translate(-12px)}to{transform:translate(0)}}@keyframes viraui__dot-grid-module__spinner-dot-grid-2_ntLgO{9.0909090909%{transform:translate(0)}18.1818181818%{transform:translate(12px)}27.2727272727%{transform:translate(0)}36.3636363636%{transform:translate(12px)}45.4545454545%{transform:translate(12px,12px)}54.5454545455%{transform:translate(12px,12px)}63.6363636364%{transform:translate(12px,12px)}72.7272727273%{transform:translate(12px,12px)}81.8181818182%{transform:translateY(12px)}90.9090909091%{transform:translateY(12px)}to{transform:translate(0)}}@keyframes viraui__dot-grid-module__spinner-dot-grid-3_6XjPw{9.0909090909%{transform:translate(-12px)}18.1818181818%{transform:translate(-12px)}27.2727272727%{transform:translate(0)}36.3636363636%{transform:translate(-12px)}45.4545454545%{transform:translate(-12px)}54.5454545455%{transform:translate(-12px)}63.6363636364%{transform:translate(-12px)}72.7272727273%{transform:translate(-12px)}81.8181818182%{transform:translate(-12px,-12px)}90.9090909091%{transform:translateY(-12px)}to{transform:translate(0)}}@keyframes viraui__dot-grid-module__spinner-dot-grid-4_xy0HO{9.0909090909%{transform:translate(-12px)}18.1818181818%{transform:translate(-12px)}27.2727272727%{transform:translate(-12px,-12px)}36.3636363636%{transform:translateY(-12px)}45.4545454545%{transform:translate(0)}54.5454545455%{transform:translateY(-12px)}63.6363636364%{transform:translateY(-12px)}72.7272727273%{transform:translateY(-12px)}81.8181818182%{transform:translate(-12px,-12px)}90.9090909091%{transform:translate(-12px)}to{transform:translate(0)}}@keyframes viraui__dot-grid-module__spinner-dot-grid-5_lJzYz{9.0909090909%{transform:translate(0)}18.1818181818%{transform:translate(0)}27.2727272727%{transform:translate(0)}36.3636363636%{transform:translate(12px)}45.4545454545%{transform:translate(12px)}54.5454545455%{transform:translate(12px)}63.6363636364%{transform:translate(12px)}72.7272727273%{transform:translate(12px)}81.8181818182%{transform:translate(12px,-12px)}90.9090909091%{transform:translateY(-12px)}to{transform:translate(0)}}@keyframes viraui__dot-grid-module__spinner-dot-grid-6_ZjVjH{9.0909090909%{transform:translate(0)}18.1818181818%{transform:translate(-12px)}27.2727272727%{transform:translate(-12px)}36.3636363636%{transform:translate(0)}45.4545454545%{transform:translate(0)}54.5454545455%{transform:translate(0)}63.6363636364%{transform:translate(0)}72.7272727273%{transform:translateY(12px)}81.8181818182%{transform:translate(-12px,12px)}90.9090909091%{transform:translate(-12px)}to{transform:translate(0)}}@keyframes viraui__dot-grid-module__spinner-dot-grid-7_sEfp9{9.0909090909%{transform:translate(12px)}18.1818181818%{transform:translate(12px)}27.2727272727%{transform:translate(12px)}36.3636363636%{transform:translate(0)}45.4545454545%{transform:translateY(-12px)}54.5454545455%{transform:translate(12px,-12px)}63.6363636364%{transform:translateY(-12px)}72.7272727273%{transform:translateY(-12px)}81.8181818182%{transform:translate(0)}90.9090909091%{transform:translate(12px)}to{transform:translate(0)}}@keyframes viraui__dot-grid-module__spinner-dot-grid-8_L2-uH{9.0909090909%{transform:translate(0)}18.1818181818%{transform:translate(-12px)}27.2727272727%{transform:translate(-12px,-12px)}36.3636363636%{transform:translateY(-12px)}45.4545454545%{transform:translateY(-12px)}54.5454545455%{transform:translateY(-12px)}63.6363636364%{transform:translateY(-12px)}72.7272727273%{transform:translateY(-12px)}81.8181818182%{transform:translate(12px,-12px)}90.9090909091%{transform:translate(12px)}to{transform:translate(0)}}@keyframes viraui__dot-grid-module__spinner-dot-grid-9_CrL1l{9.0909090909%{transform:translate(-12px)}18.1818181818%{transform:translate(-12px)}27.2727272727%{transform:translate(0)}36.3636363636%{transform:translate(-12px)}45.4545454545%{transform:translate(0)}54.5454545455%{transform:translate(0)}63.6363636364%{transform:translate(-12px)}72.7272727273%{transform:translate(-12px)}81.8181818182%{transform:translate(-24px)}90.9090909091%{transform:translate(-12px)}to{transform:translate(0)}}.viraui__dot-grid-module__Glyph_sf2Sf{&>circle{transform-origin:50% 50%}&>circle:first-child{animation:viraui__dot-grid-module__spinner-dot-grid-1_X76yC 4s infinite}&>circle:nth-child(2){animation:viraui__dot-grid-module__spinner-dot-grid-2_ntLgO 4s infinite}&>circle:nth-child(3){animation:viraui__dot-grid-module__spinner-dot-grid-3_6XjPw 4s infinite}&>circle:nth-child(4){animation:viraui__dot-grid-module__spinner-dot-grid-4_xy0HO 4s infinite}&>circle:nth-child(5){animation:viraui__dot-grid-module__spinner-dot-grid-5_lJzYz 4s infinite}&>circle:nth-child(6){animation:viraui__dot-grid-module__spinner-dot-grid-6_ZjVjH 4s infinite}&>circle:nth-child(7){animation:viraui__dot-grid-module__spinner-dot-grid-7_sEfp9 4s infinite}&>circle:nth-child(8){animation:viraui__dot-grid-module__spinner-dot-grid-8_L2-uH 4s infinite}&>circle:nth-child(9){animation:viraui__dot-grid-module__spinner-dot-grid-9_CrL1l 4s infinite}}}

package/dist/components/spinner/variants/dot-grid.d.ts

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

package/dist/components/spinner/variants/dot-grid.js

@@ -1,57 +0,0 @@
-import './dot-grid.css';
-import dot_grid_module_default from "./dot-grid.module.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/spinner/variants/dot-grid.tsx
-var DotGridGlyph = () => /* @__PURE__ */ jsxs("g", {
-	className: dot_grid_module_default.Glyph,
-	fill: "currentColor",
-	children: [
-		/* @__PURE__ */ jsx("circle", {
-			cx: "13",
-			cy: "1",
-			r: "5"
-		}),
-		/* @__PURE__ */ jsx("circle", {
-			cx: "13",
-			cy: "1",
-			r: "5"
-		}),
-		/* @__PURE__ */ jsx("circle", {
-			cx: "25",
-			cy: "25",
-			r: "5"
-		}),
-		/* @__PURE__ */ jsx("circle", {
-			cx: "13",
-			cy: "13",
-			r: "5"
-		}),
-		/* @__PURE__ */ jsx("circle", {
-			cx: "13",
-			cy: "13",
-			r: "5"
-		}),
-		/* @__PURE__ */ jsx("circle", {
-			cx: "25",
-			cy: "13",
-			r: "5"
-		}),
-		/* @__PURE__ */ jsx("circle", {
-			cx: "1",
-			cy: "25",
-			r: "5"
-		}),
-		/* @__PURE__ */ jsx("circle", {
-			cx: "13",
-			cy: "25",
-			r: "5"
-		}),
-		/* @__PURE__ */ jsx("circle", {
-			cx: "25",
-			cy: "25",
-			r: "5"
-		})
-	]
-});
-//#endregion
-export { DotGridGlyph as default };

package/dist/components/spinner/variants/dot-grid.module.js

@@ -1,16 +0,0 @@
-//#region src/components/spinner/variants/dot-grid.module.css
-var Glyph = "viraui__dot-grid-module__Glyph_sf2Sf";
-var dot_grid_module_default = {
-	Glyph,
-	"spinner-dot-grid-1": "viraui__dot-grid-module__spinner-dot-grid-1_X76yC",
-	"spinner-dot-grid-2": "viraui__dot-grid-module__spinner-dot-grid-2_ntLgO",
-	"spinner-dot-grid-3": "viraui__dot-grid-module__spinner-dot-grid-3_6XjPw",
-	"spinner-dot-grid-4": "viraui__dot-grid-module__spinner-dot-grid-4_xy0HO",
-	"spinner-dot-grid-5": "viraui__dot-grid-module__spinner-dot-grid-5_lJzYz",
-	"spinner-dot-grid-6": "viraui__dot-grid-module__spinner-dot-grid-6_ZjVjH",
-	"spinner-dot-grid-7": "viraui__dot-grid-module__spinner-dot-grid-7_sEfp9",
-	"spinner-dot-grid-8": "viraui__dot-grid-module__spinner-dot-grid-8_L2-uH",
-	"spinner-dot-grid-9": "viraui__dot-grid-module__spinner-dot-grid-9_CrL1l"
-};
-//#endregion
-export { Glyph, dot_grid_module_default as default };

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

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