@viraui/react 1.0.15 → 1.0.17

package/dist/components/select/select.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-select-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-start{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-end{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-list-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-list-padding{syntax:"<length>";inherits:true;initial-value:0}@property --__select-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__select-module__Select_eXv4Y{--vui-select-input-height:var(--space-x-large);--vui-select-control-group-background:var(--base-1);--vui-select-control-group-color:var(--global-foreground);--vui-select-control-group-border-color:var(--global-contrast);--vui-select-control-group-border-radius:var(--radius-medium);--vui-select-trigger-padding-inline-start:var(--space-small);--vui-select-trigger-padding-inline-end:var(--space-x-small);--vui-field-label-padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2);z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--vui-select-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-select-input-height);padding-inline:var(--vui-select-trigger-padding-inline-start) var(--vui-select-trigger-padding-inline-end);border:1px solid var(--vui-select-control-group-border-color);border-radius:var(--vui-select-control-group-border-radius);background:var(--vui-select-control-group-background);color:var(--vui-select-control-group-color);font:inherit;text-align:start;cursor:pointer;&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--vui-select-control-group-background:var(--global-disabled-background);--vui-select-control-group-border-color:#0000;--vui-select-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2)}.viraui__select-module__SelectPopup_UzGXL{--vui-select-list-border-radius:var(--radius-medium);--vui-select-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;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(--__select-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__select-list-appear-offset)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__select-list-appear-offset) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__select-list-appear-offset) * -1) 0}&[data-side=none]{transition:none;scale:1;translate:0;opacity:1}}.viraui__select-module__ScrollArrow_kHlEi{position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--base-1);border:1px solid var(--global-contrast);@container root not style(--vibrancy-enable: initial){background:oklab(from var(--base-1) l a b/80%);backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px))}}.viraui__select-module__ScrollButton_sHBOa{pointer-events:none}.viraui__select-module__ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--vui-select-list-border-radius) var(--vui-select-list-border-radius) 0 0}.viraui__select-module__ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--vui-select-list-border-radius) var(--vui-select-list-border-radius)}.viraui__select-module__List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);scroll-padding-block:var(--vui-select-list-padding);overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.viraui__select-module__Indicator_YNUuz{min-inline-size:var(--space-medium);min-block-size:var(--space-medium);inline-size:fit-content;block-size:fit-content;color:var(--global-primary);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}.viraui__select-module__Group_xzkuA+.viraui__select-module__Group_xzkuA{margin-block-start:var(--space-medium)}}@layer viraui.overrides{.viraui__select-module__Value_uWHPX{flex:1 1 auto;min-inline-size:0;overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.viraui__select-module__Option_KgYqz{cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--vibrancy-enable: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-selected]{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}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-select-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-start{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-end{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-list-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-list-padding{syntax:"<length>";inherits:true;initial-value:0}@property --__select-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__select-module__Select_eXv4Y{--vui-select-input-height:var(--space-x-large);--vui-select-control-group-background:var(--base-1);--vui-select-control-group-color:var(--global-foreground);--vui-select-control-group-border-color:var(--global-contrast);--vui-select-control-group-border-radius:var(--radius-medium);--vui-select-trigger-padding-inline-start:var(--space-small);--vui-select-trigger-padding-inline-end:var(--space-x-small);--vui-field-label-padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2);z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR{&:after{content:" ＊";color:var(--highlight-red)}&:dir(rtl){&:after{content:none}&:before{content:"＊ ";color:var(--highlight-red)}}}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--vui-select-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-select-input-height);padding-inline:var(--vui-select-trigger-padding-inline-start) var(--vui-select-trigger-padding-inline-end);border:1px solid var(--vui-select-control-group-border-color);border-radius:var(--vui-select-control-group-border-radius);background:var(--vui-select-control-group-background);color:var(--vui-select-control-group-color);font:inherit;text-align:start;cursor:pointer;&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--vui-select-control-group-background:var(--global-disabled-background);--vui-select-control-group-border-color:#0000;--vui-select-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2)}.viraui__select-module__SelectPopup_UzGXL{--vui-select-list-border-radius:var(--radius-medium);--vui-select-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;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(--__select-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__select-list-appear-offset)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__select-list-appear-offset) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__select-list-appear-offset) * -1) 0}&[data-side=none]{transition:none;scale:1;translate:0;opacity:1}}.viraui__select-module__ScrollArrow_kHlEi{position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--base-1);border:1px solid var(--global-contrast);@container root not style(--vibrancy-enable: initial){background:oklab(from var(--base-1) l a b/80%);backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px))}}.viraui__select-module__ScrollButton_sHBOa{pointer-events:none}.viraui__select-module__ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--vui-select-list-border-radius) var(--vui-select-list-border-radius) 0 0}.viraui__select-module__ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--vui-select-list-border-radius) var(--vui-select-list-border-radius)}.viraui__select-module__List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);scroll-padding-block:var(--vui-select-list-padding);overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.viraui__select-module__Indicator_YNUuz{min-inline-size:var(--space-medium);min-block-size:var(--space-medium);inline-size:fit-content;block-size:fit-content;color:var(--global-primary);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}}@layer viraui.overrides{.viraui__select-module__Value_uWHPX{flex:1 1 auto;min-inline-size:0;overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.viraui__select-module__Option_KgYqz{cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--vibrancy-enable: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-selected]{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}}}

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

@@ -11,7 +11,8 @@
   ],
   "whenNotToUse": [
     "Multiple selection",
-    "Combobox, filterable search, or custom anchor positioning",
+    "Free-form filterable suggestions — use Autocomplete",
+    "Combobox selection state, or custom anchor positioning",
     "Wrapping a lone Select in Fieldset when its own label is sufficient"
   ],
   "accessibility": [
@@ -24,7 +25,7 @@
     "Leaving the trigger without label or aria-label",
     "Never set the size prop (if present) of Buttons, IconButtons or other interactive elements passed as addon other than small"
   ],
-  "related": ["Fieldset", "Textfield", "Stack", "Surface", "Icon"],
+  "related": ["Autocomplete", "Fieldset", "Textfield", "Stack", "Surface", "Icon"],
   "properties": {
     "react": {
       "addon": {

package/dist/components/select/select.js

@@ -14,8 +14,8 @@ import { SelectGroup } from "./select-group.js";
 import { SelectOption } from "./select-option.js";
 import { SelectSeparator } from "./select-separator.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
 import { Field } from "@base-ui/react/field";
+import { useId } from "react";
 import { Select } from "@base-ui/react/select";
 //#region src/components/select/select.tsx
 function SelectRootComponent({ alignListWithTrigger = true, children, className, description, dirty, disabled, error, addon = /* @__PURE__ */ jsx(ChromeChevronExpandY, { size: 16 }), invalid, label, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }) {

package/dist/components/select/select.module.js

@@ -11,7 +11,6 @@ var ScrollArrowUp = "viraui__select-module__ScrollArrowUp_DGXS-";
 var ScrollArrowDown = "viraui__select-module__ScrollArrowDown_vhJy0";
 var List = "viraui__select-module__List_jdUWx";
 var Indicator = "viraui__select-module__Indicator_YNUuz";
-var Group = "viraui__select-module__Group_xzkuA";
 var Value = "viraui__select-module__Value_uWHPX";
 var Option = "viraui__select-module__Option_KgYqz";
 var select_module_default = {
@@ -27,9 +26,8 @@ var select_module_default = {
 	ScrollArrowDown,
 	List,
 	Indicator,
-	Group,
 	Value,
 	Option
 };
 //#endregion
-export { Description, Group, Icon, Indicator, Label, List, Option, ScrollArrow, ScrollArrowDown, ScrollArrowUp, ScrollButton, Select, SelectPopup, Trigger, Value, select_module_default as default };
+export { Description, Icon, Indicator, Label, List, Option, ScrollArrow, ScrollArrowDown, ScrollArrowUp, ScrollButton, Select, SelectPopup, Trigger, Value, select_module_default as default };

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

@@ -1,2 +1,2 @@
 export { Spinner } from './spinner';
-export type { SpinnerProps } from './spinner';
+export type { SpinnerProps, SpinnerVariant } from './spinner';

package/dist/components/spinner/spinner.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-spinner-size{syntax:"<length>";inherits:false;initial-value:0}.viraui__spinner-module__Spinner_qCQzj{--vui-spinner-size:var(--space-x-large);display:inline-block;inline-size:var(--vui-spinner-size);block-size:var(--vui-spinner-size);flex:none;vertical-align:middle;color:currentColor;&[data-dimension=small]{--vui-spinner-size:var(--space-medium)}&[data-dimension=regular]{--vui-spinner-size:var(--space-large)}}.viraui__spinner-module__Glyph_OV-cy>path{transform-origin:8px 8px;animation:viraui__spinner-module__spinner-bars_jDmaB var(--duration-slowest) infinite}.viraui__spinner-module__Glyph_OV-cy>path:first-child,.viraui__spinner-module__Glyph_OV-cy>path:nth-child(3){opacity:.3;transform:scaleY(.5);animation-delay:calc(var(--duration-slowest) / -2)}@keyframes viraui__spinner-module__spinner-bars_jDmaB{0%,to{opacity:1;transform:scaleY(1)}50%{opacity:.3;transform:scaleY(.5)}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-spinner-size{syntax:"<length>";inherits:false;initial-value:0}.viraui__spinner-module__Spinner_qCQzj{--vui-spinner-size:var(--space-x-large);display:inline-block;inline-size:var(--vui-spinner-size);block-size:var(--vui-spinner-size);flex:none;vertical-align:middle;color:currentColor;&[data-dimension=small]{--vui-spinner-size:var(--space-medium)}&[data-dimension=regular]{--vui-spinner-size:var(--space-large)}}}

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

@@ -1,3 +1,5 @@
+import { SpinnerVariant } from './variants';
+export type { SpinnerVariant };
 export type SpinnerProps = Omit<React.ComponentProps<'svg'>, 'color'> & {
     /**
      * Sets the rendered spinner size.
@@ -11,5 +13,11 @@ export type SpinnerProps = Omit<React.ComponentProps<'svg'>, 'color'> & {
      * @default No default; inherits `currentColor`.
      */
     color?: string;
+    /**
+     * Visual animation style.
+     *
+     * @default 'bars'
+     */
+    variant?: SpinnerVariant;
 };
 export declare const Spinner: React.FC<SpinnerProps>;

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

@@ -28,6 +28,9 @@
       },
       "size": {
         "description": "Sets the rendered spinner size."
+      },
+      "variant": {
+        "description": "Visual animation style."
       }
     },
     "css": {

package/dist/components/spinner/spinner.js

@@ -1,26 +1,28 @@
 import './spinner.css';
 import { clsx } from "../../core/clsx.js";
 import spinner_module_default from "./spinner.module.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { SPINNER_GLYPHS, SPINNER_VIEW_BOXES, isLazySpinnerVariant } from "./variants/index.js";
+import { jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
 //#region src/components/spinner/spinner.tsx
-var Spinner = ({ className, color, size = "big", ref, style, ...otherProps }) => /* @__PURE__ */ jsx("svg", {
-	...otherProps,
-	ref,
-	className: clsx(spinner_module_default.Spinner, className),
-	"data-dimension": size,
-	viewBox: "0 0 16 16",
-	xmlns: "http://www.w3.org/2000/svg",
-	color,
-	style,
-	children: /* @__PURE__ */ jsxs("g", {
-		className: spinner_module_default.Glyph,
-		fill: "currentColor",
-		children: [
-			/* @__PURE__ */ jsx("path", { d: "M0 2h2v12H0z" }),
-			/* @__PURE__ */ jsx("path", { d: "M7 2h2v12H7z" }),
-			/* @__PURE__ */ jsx("path", { d: "M14 2h2v12h-2z" })
-		]
-	})
-});
+var Spinner = ({ className, color, size = "big", variant = "bars", ref, style, ...otherProps }) => {
+	const Glyph = SPINNER_GLYPHS[variant];
+	const glyph = /* @__PURE__ */ jsx(Glyph, {});
+	return /* @__PURE__ */ jsx("svg", {
+		...otherProps,
+		ref,
+		className: clsx(spinner_module_default.Spinner, className),
+		"data-dimension": size,
+		"data-variant": variant,
+		viewBox: SPINNER_VIEW_BOXES[variant],
+		xmlns: "http://www.w3.org/2000/svg",
+		color,
+		style,
+		children: isLazySpinnerVariant(variant) ? /* @__PURE__ */ jsx(Suspense, {
+			fallback: null,
+			children: glyph
+		}) : glyph
+	});
+};
 //#endregion
 export { Spinner };

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

@@ -1,10 +1,5 @@
 //#region src/components/spinner/spinner.module.css
 var Spinner = "viraui__spinner-module__Spinner_qCQzj";
-var Glyph = "viraui__spinner-module__Glyph_OV-cy";
-var spinner_module_default = {
-	Spinner,
-	Glyph,
-	"spinner-bars": "viraui__spinner-module__spinner-bars_jDmaB"
-};
+var spinner_module_default = { Spinner };
 //#endregion
-export { Glyph, Spinner, spinner_module_default as default };
+export { Spinner, spinner_module_default as default };

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

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

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

@@ -0,0 +1,134 @@
+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

@@ -0,0 +1 @@
+@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

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

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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,16 @@
+//#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

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

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

@@ -0,0 +1,189 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+//#region src/components/spinner/variants/dots.tsx
+/** Sanitize React useId for SVG id / begin references (strip `:`). */
+var smilId = (reactId, name) => `${reactId.replaceAll(":", "")}${name}`;
+var spline = {
+	calcMode: "spline",
+	dur: "0.5s",
+	keySplines: ".36,.6,.31,1",
+	fill: "freeze"
+};
+var DotsGlyph = () => {
+	const reactId = useId();
+	const z0Or = smilId(reactId, "z0Or");
+	const lo66 = smilId(reactId, "lo66");
+	const OLMs = smilId(reactId, "OLMs");
+	const UHR2 = smilId(reactId, "UHR2");
+	const Aguh = smilId(reactId, "Aguh");
+	const JsnR = smilId(reactId, "JsnR");
+	const hSjk = smilId(reactId, "hSjk");
+	const v4v5M = smilId(reactId, "4v5M");
+	return /* @__PURE__ */ jsxs("g", {
+		fill: "currentColor",
+		children: [
+			/* @__PURE__ */ jsxs("circle", {
+				cx: "4",
+				cy: "12",
+				r: "0",
+				children: [
+					/* @__PURE__ */ jsx("animate", {
+						begin: `0;${z0Or}.end`,
+						attributeName: "r",
+						...spline,
+						values: "0;3"
+					}),
+					/* @__PURE__ */ jsx("animate", {
+						begin: `${OLMs}.end`,
+						attributeName: "cx",
+						...spline,
+						values: "4;12"
+					}),
+					/* @__PURE__ */ jsx("animate", {
+						begin: `${UHR2}.end`,
+						attributeName: "cx",
+						...spline,
+						values: "12;20"
+					}),
+					/* @__PURE__ */ jsx("animate", {
+						id: lo66,
+						begin: `${Aguh}.end`,
+						attributeName: "r",
+						...spline,
+						values: "3;0"
+					}),
+					/* @__PURE__ */ jsx("animate", {
+						id: z0Or,
+						begin: `${lo66}.end`,
+						attributeName: "cx",
+						dur: "0.001s",
+						values: "20;4",
+						fill: "freeze"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("circle", {
+				cx: "4",
+				cy: "12",
+				r: "3",
+				children: [
+					/* @__PURE__ */ jsx("animate", {
+						begin: `0;${z0Or}.end`,
+						attributeName: "cx",
+						...spline,
+						values: "4;12"
+					}),
+					/* @__PURE__ */ jsx("animate", {
+						begin: `${OLMs}.end`,
+						attributeName: "cx",
+						...spline,
+						values: "12;20"
+					}),
+					/* @__PURE__ */ jsx("animate", {
+						id: JsnR,
+						begin: `${UHR2}.end`,
+						attributeName: "r",
+						...spline,
+						values: "3;0"
+					}),
+					/* @__PURE__ */ jsx("animate", {
+						id: Aguh,
+						begin: `${JsnR}.end`,
+						attributeName: "cx",
+						dur: "0.001s",
+						values: "20;4",
+						fill: "freeze"
+					}),
+					/* @__PURE__ */ jsx("animate", {
+						begin: `${Aguh}.end`,
+						attributeName: "r",
+						...spline,
+						values: "0;3"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("circle", {
+				cx: "12",
+				cy: "12",
+				r: "3",
+				children: [
+					/* @__PURE__ */ jsx("animate", {
+						begin: `0;${z0Or}.end`,
+						attributeName: "cx",
+						...spline,
+						values: "12;20"
+					}),
+					/* @__PURE__ */ jsx("animate", {
+						id: hSjk,
+						begin: `${OLMs}.end`,
+						attributeName: "r",
+						...spline,
+						values: "3;0"
+					}),
+					/* @__PURE__ */ jsx("animate", {
+						id: UHR2,
+						begin: `${hSjk}.end`,
+						attributeName: "cx",
+						dur: "0.001s",
+						values: "20;4",
+						fill: "freeze"
+					}),
+					/* @__PURE__ */ jsx("animate", {
+						begin: `${UHR2}.end`,
+						attributeName: "r",
+						...spline,
+						values: "0;3"
+					}),
+					/* @__PURE__ */ jsx("animate", {
+						begin: `${Aguh}.end`,
+						attributeName: "cx",
+						...spline,
+						values: "4;12"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("circle", {
+				cx: "20",
+				cy: "12",
+				r: "3",
+				children: [
+					/* @__PURE__ */ jsx("animate", {
+						id: v4v5M,
+						begin: `0;${z0Or}.end`,
+						attributeName: "r",
+						...spline,
+						values: "3;0"
+					}),
+					/* @__PURE__ */ jsx("animate", {
+						id: OLMs,
+						begin: `${v4v5M}.end`,
+						attributeName: "cx",
+						dur: "0.001s",
+						values: "20;4",
+						fill: "freeze"
+					}),
+					/* @__PURE__ */ jsx("animate", {
+						begin: `${OLMs}.end`,
+						attributeName: "r",
+						...spline,
+						values: "0;3"
+					}),
+					/* @__PURE__ */ jsx("animate", {
+						begin: `${UHR2}.end`,
+						attributeName: "cx",
+						...spline,
+						values: "4;12"
+					}),
+					/* @__PURE__ */ jsx("animate", {
+						begin: `${Aguh}.end`,
+						attributeName: "cx",
+						...spline,
+						values: "12;20"
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { DotsGlyph as default };

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

@@ -0,0 +1,5 @@
+import { ComponentType } from 'react';
+export type SpinnerVariant = 'bars' | 'dot-grid' | 'dots';
+export declare const SPINNER_VIEW_BOXES: Record<SpinnerVariant, string>;
+export declare const SPINNER_GLYPHS: Record<SpinnerVariant, ComponentType>;
+export declare const isLazySpinnerVariant: (variant: SpinnerVariant) => boolean;

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

@@ -0,0 +1,16 @@
+import BarsGlyph from "./bars.js";
+import { lazy } from "react";
+//#region src/components/spinner/variants/index.ts
+var SPINNER_VIEW_BOXES = {
+	bars: "0 0 24 24",
+	"dot-grid": "-13 -13 45 45",
+	dots: "0 0 24 24"
+};
+var SPINNER_GLYPHS = {
+	bars: BarsGlyph,
+	"dot-grid": lazy(() => import("./dot-grid.js")),
+	dots: lazy(() => import("./dots.js"))
+};
+var isLazySpinnerVariant = (variant) => variant === "dot-grid" || variant === "dots";
+//#endregion
+export { SPINNER_GLYPHS, SPINNER_VIEW_BOXES, isLazySpinnerVariant };

package/dist/components/tabs/tabs-tab.js

@@ -1,6 +1,6 @@
 import { clsx } from "../../core/clsx.js";
-import { Button } from "../button/button.js";
 import { Text } from "../text/text.js";
+import { Button } from "../button/button.js";
 import tabs_module_default from "./tabs.module.js";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";

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

@@ -23,7 +23,7 @@
     "Passing unsupported size or variant props",
     "Expecting a focus ring when focus is only on addon controls"
   ],
-  "related": ["Fieldset", "Textarea", "Select", "Text"],
+  "related": ["Autocomplete", "Fieldset", "Textarea", "Select", "Text"],
   "properties": {
     "react": {
       "description": {