@viraui/react 1.0.12 → 1.0.14

package/dist/components/badge/badge.js

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

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

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

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

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

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

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

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

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

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

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

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

@@ -15,25 +15,28 @@
   "accessibility": [
     "Bleed is a layout wrapper only — child content keeps native semantics",
     "Parent containers should preserve readable line length for text content",
-    "Full bleed can introduce horizontal scroll when ancestors use overflow hidden incorrectly"
+    "Full bleed can introduce horizontal scroll when ancestors use overflow hidden incorrectly",
+    "Full bleed uses physical `margin-left: calc(50% - 50vw)` — known RTL limitation; verify mirroring in right-to-left layouts"
   ],
   "antiPatterns": [
     "Nesting multiple full bleeds without checking ancestor overflow",
     "Using Bleed to compensate for missing Stack padding instead of fixing layout composition",
-    "Applying full bleed inside narrow overflow-hidden cards without testing clipping"
+    "Applying full bleed inside narrow overflow-hidden cards without testing clipping",
+    "Expecting full bleed `margin-left` to flip automatically in RTL"
   ],
   "related": ["Stack", "Surface", "Separator"],
   "properties": {
     "react": {
       "amount": {
-        "description": "Sets the inline bleed amount using a Vira space token.",
-        "refCss": "amount"
+        "description": "Sets the inline bleed amount using a Vira space token."
+      },
+      "full": {
+        "description": "Bleeds content to the viewport edges and ignores `amount`."
       }
     },
     "css": {
       "amount": {
-        "description": "Negative inline margin bleed distance on the root.",
-        "refReact": "amount"
+        "description": "Bleed distance on the root via `margin: 0 calc(var(--vui-bleed-amount, 0) * -1)` (negative inline, zero block)."
       }
     }
   }

package/dist/components/button/button-chrome.d.ts

@@ -8,13 +8,15 @@ type ButtonChromeRootAttrsParams = {
     addon?: ReactNode;
     addonPosition: ButtonAddonPosition;
     className?: string;
+    isDisabled: boolean;
     isIconOnly: boolean;
     loading: boolean;
     pill: boolean;
     size: ButtonSize;
     variant: ButtonVariant;
 };
-export declare function getButtonChromeRootAttrs({ addon, addonPosition, className, isIconOnly, loading, pill, size, variant, }: ButtonChromeRootAttrsParams): {
+export declare function getButtonChromeRootAttrs({ addon, addonPosition, className, isDisabled, isIconOnly, loading, pill, size, variant, }: ButtonChromeRootAttrsParams): {
+    'data-disabled'?: "" | undefined;
     'aria-busy': true | undefined;
     className: string;
     'data-loading': string;

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

@@ -9,7 +9,7 @@ var spinnerDimensionsBySize = {
 	medium: "small",
 	big: "regular"
 };
-function getButtonChromeRootAttrs({ addon, addonPosition, className, isIconOnly, loading, pill, size, variant }) {
+function getButtonChromeRootAttrs({ addon, addonPosition, className, isDisabled, isIconOnly, loading, pill, size, variant }) {
 	return {
 		"aria-busy": loading || void 0,
 		className: clsx(button_module_default.Button, className),
@@ -18,7 +18,8 @@ function getButtonChromeRootAttrs({ addon, addonPosition, className, isIconOnly,
 		"data-size": size,
 		"data-icon-only": isIconOnly ? "true" : void 0,
 		"data-addon-position": addon && !isIconOnly ? addonPosition : void 0,
-		"data-variant": variant
+		"data-variant": variant,
+		...isDisabled && { "data-disabled": "" }
 	};
 }
 var ButtonChromeChildren = ({ addon, children, isIconOnly, loading, size }) => /* @__PURE__ */ jsxs(Fragment, { children: [isIconOnly ? /* @__PURE__ */ jsx("span", {

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

@@ -14,5 +14,59 @@
     "Loading sets aria-busy; Spinner stays decorative"
   ],
   "antiPatterns": ["Using Button with render={<a />} instead of ButtonLink", "Forcing role=button on a link"],
-  "related": ["Button", "IconButtonLink", "Icon", "Spinner", "Chip"]
+  "related": ["Button", "IconButtonLink", "Icon", "Spinner", "Chip"],
+  "properties": {
+    "react": {
+      "addon": {
+        "description": "Decorative addon rendered alongside the link label."
+      },
+      "addonPosition": {
+        "description": "Controls whether the addon appears before or after the label."
+      },
+      "disabled": {
+        "description": "Marks the link inert via `aria-disabled` and prevents activation."
+      },
+      "loading": {
+        "description": "Shows a centered spinner overlay while preserving the original content width."
+      },
+      "pill": {
+        "description": "Applies a fully rounded pill shape."
+      },
+      "render": {
+        "description": "Replaces the default `a` root using Base UI render semantics (e.g. Next.js `Link`)."
+      },
+      "size": {
+        "description": "Controls the visual button size."
+      },
+      "variant": {
+        "description": "Selects the visual treatment matching Button."
+      }
+    },
+    "css": {
+      "background": {
+        "description": "Button fill; variant and state selectors preset this."
+      },
+      "color": {
+        "description": "Button label and icon color."
+      },
+      "height": {
+        "description": "Button block size; size prop presets via data attributes."
+      },
+      "icon-size": {
+        "description": "Addon icon size inside the button."
+      },
+      "padding-block": {
+        "description": "Vertical padding inside the button."
+      },
+      "padding-inline": {
+        "description": "Horizontal padding inside the button."
+      },
+      "radius": {
+        "description": "Corner radius; pill sets infinite radius via data-pill."
+      },
+      "spinner-color": {
+        "description": "Loading spinner color on the root."
+      }
+    }
+  }
 }

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

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

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:false;initial-value:currentColor}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:1.125em}@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-x-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-small);--vui-button-radius:var(--radius-medium);-webkit-user-select:none;user-select:none;margin:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;max-block-size:var(--vui-button-height);block-size:var(--vui-button-height);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-small);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-medium);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]{border-radius:var(--radius-infinite);&[data-addon-position=end]{padding-inline-end:calc(var(--vui-button-padding-inline) / 2)}&[data-addon-position=start]{padding-inline-start:calc(var(--vui-button-padding-inline) / 2)}}&[data-size=big]{--vui-button-height:var(--space-2x-large);--vui-button-padding-inline:var(--space-medium);--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-radius:var(--radius-medium)}&[data-size=small]{--vui-button-height:var(--space-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-x-small);--vui-button-icon-size:1em;--vui-button-radius:var(--radius-small);gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[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(--base-6);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(--base-5);&: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);&: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-loading=true][data-disabled]{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:var(--vui-button-icon-size);inline-size:var(--vui-button-icon-size);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none}}
+@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:false;initial-value:currentColor}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:1.125em}@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-x-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-small);--vui-button-radius:var(--radius-medium);-webkit-user-select:none;user-select:none;margin:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;max-block-size:var(--vui-button-height);block-size:var(--vui-button-height);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-small);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-medium);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]{border-radius:var(--radius-infinite);&[data-addon-position=end]{padding-inline-end:calc(var(--vui-button-padding-inline) / 2)}&[data-addon-position=start]{padding-inline-start:calc(var(--vui-button-padding-inline) / 2)}}&[data-size=big]{--vui-button-height:var(--space-2x-large);--vui-button-padding-inline:var(--space-medium);--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-radius:var(--radius-medium)}&[data-size=small]{--vui-button-height:var(--space-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-x-small);--vui-button-icon-size:1em;--vui-button-radius:var(--radius-small);gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[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(--base-6);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(--base-5);&: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-loading=true][data-disabled]{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:var(--vui-button-icon-size);inline-size:var(--vui-button-icon-size);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/button/button.guide.json

@@ -27,6 +27,26 @@
   ],
   "related": ["ButtonLink", "IconButton", "IconButtonLink", "Icon", "Spinner", "Chip"],
   "properties": {
+    "react": {
+      "addon": {
+        "description": "Decorative addon rendered alongside the button label. Pass any React element; use a named icon from `@viraui/icons/react` or `<Chip />` for status chips."
+      },
+      "addonPosition": {
+        "description": "Controls whether the addon appears before or after the label."
+      },
+      "loading": {
+        "description": "Shows a centered spinner overlay while preserving the original content width."
+      },
+      "pill": {
+        "description": "Applies a fully rounded pill shape to the button."
+      },
+      "size": {
+        "description": "Controls the visual button size."
+      },
+      "variant": {
+        "description": "Selects the visual treatment for the button."
+      }
+    },
     "css": {
       "background": {
         "description": "Button fill; variant and state selectors preset this."
@@ -37,20 +57,20 @@
       "height": {
         "description": "Button block size; size prop presets via data attributes."
       },
-      "padding-inline": {
-        "description": "Horizontal padding inside the button."
+      "icon-size": {
+        "description": "Addon icon size inside the button."
       },
       "padding-block": {
         "description": "Vertical padding inside the button."
       },
-      "spinner-color": {
-        "description": "Loading spinner color on the root."
-      },
-      "icon-size": {
-        "description": "Addon icon size inside the button."
+      "padding-inline": {
+        "description": "Horizontal padding inside the button."
       },
       "radius": {
         "description": "Corner radius; pill sets infinite radius via data-pill."
+      },
+      "spinner-color": {
+        "description": "Loading spinner color on the root."
       }
     }
   }

package/dist/components/button/button.js

@@ -1,9 +1,9 @@
 import './button.css';
 import { ButtonChromeChildren, getButtonChromeRootAttrs } from "./button-chrome.js";
 import { jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
-import * as React from "react";
 //#region src/components/button/button.tsx
 function usesButtonPrimitiveRender(render) {
 	return render === void 0 || React.isValidElement(render) && render.type === "button";
@@ -33,6 +33,7 @@ var ButtonRoot = ({ children, className, isDisabled, isIconOnly, addon, addonPos
 		addon,
 		addonPosition,
 		className: typeof className === "string" ? className : void 0,
+		isDisabled,
 		isIconOnly,
 		loading,
 		pill,

package/dist/components/checkbox/checkbox.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-checkbox-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-checkbox-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-checkbox-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__checkbox-module__Checkbox_3oGip{&:has([required]) .viraui__checkbox-module__Label_n9HL7:after{content:" ＊";color:var(--highlight-red)}}.viraui__checkbox-module__CheckboxRoot_PeyF5{--vui-checkbox-size:var(--space-medium);--vui-checkbox-radius:var(--radius-x-small);--vui-checkbox-background:var(--global-contrast);--vui-checkbox-indicator-color:contrast-color(var(--global-primary));position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--vui-checkbox-border-color);inline-size:var(--vui-checkbox-size);block-size:var(--vui-checkbox-size);background:var(--vui-checkbox-background);border-radius:var(--vui-checkbox-radius);&[data-size=regular]{--vui-checkbox-size:var(--space-large);--vui-checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-checkbox-background:var(--global-primary);--vui-checkbox-border-color:var(--global-primary);box-shadow:none}&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--vui-checkbox-indicator-color:var(--global-primary)}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-checkbox-border-color:var(--highlight-red);--vui-checkbox-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--vui-checkbox-background:var(--global-disabled-background);--vui-checkbox-border-color:#0000;--vui-checkbox-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__checkbox-module__Indicator_C-k-l{display:inline-flex;align-items:center;justify-content:center;color:var(--vui-checkbox-indicator-color)}.viraui__checkbox-module__Icon_926Sa{stroke:currentColor}.viraui__checkbox-module__CheckboxRoot_PeyF5:not([data-indeterminate]) .viraui__checkbox-module__MinusIcon_Q57pY,.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__CheckIcon_XqUcs{display:none}.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__MinusIcon_Q57pY{display:inline-flex}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-checkbox-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-checkbox-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-checkbox-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__checkbox-module__Checkbox_3oGip{&:has([required]) .viraui__checkbox-module__Label_n9HL7:after{content:" ＊";color:var(--highlight-red)}}.viraui__checkbox-module__CheckboxRoot_PeyF5{--vui-checkbox-size:var(--space-medium);--vui-checkbox-radius:var(--radius-x-small);--vui-checkbox-background:var(--global-contrast);--vui-checkbox-indicator-color:contrast-color(var(--global-primary));position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--vui-checkbox-border-color);inline-size:var(--vui-checkbox-size);block-size:var(--vui-checkbox-size);background:var(--vui-checkbox-background);border-radius:var(--vui-checkbox-radius);&[data-size=regular]{--vui-checkbox-size:var(--space-large);--vui-checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-checkbox-background:var(--global-primary);--vui-checkbox-border-color:var(--global-primary);box-shadow:none}&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--vui-checkbox-indicator-color:var(--global-primary)}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-checkbox-border-color:var(--highlight-red);--vui-checkbox-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--vui-checkbox-border-color);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--vui-checkbox-background:var(--global-disabled-background);--vui-checkbox-border-color:#0000;--vui-checkbox-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__checkbox-module__Indicator_C-k-l{display:inline-flex;align-items:center;justify-content:center;color:var(--vui-checkbox-indicator-color)}.viraui__checkbox-module__CheckboxRoot_PeyF5:not([data-indeterminate]) .viraui__checkbox-module__MinusIcon_Q57pY,.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__CheckIcon_XqUcs{display:none}.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__MinusIcon_Q57pY{display:inline-flex}}

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

@@ -24,5 +24,44 @@
     "Using Checkbox without Field.Root for standalone validated fields",
     "Expecting description to stay visible when invalid without an error message"
   ],
-  "related": ["Fieldset", "CheckboxGroup", "Switch", "Stack", "Text"]
+  "related": ["Fieldset", "CheckboxGroup", "Switch", "Stack", "Text"],
+  "properties": {
+    "react": {
+      "description": {
+        "description": "Helper copy rendered with `Field.Description` and `Text` for this option."
+      },
+      "error": {
+        "description": "Error copy rendered in the same slot as `description` while invalid."
+      },
+      "hPadding": {
+        "description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."
+      },
+      "label": {
+        "description": "Visible label rendered with shared internal `FieldLabel`."
+      },
+      "size": {
+        "description": "Controls the visual checkbox size."
+      },
+      "vPadding": {
+        "description": "Sets block padding using one token for both sides or a `[start, end]` tuple."
+      }
+    },
+    "css": {
+      "background": {
+        "description": "Checkbox control background color."
+      },
+      "border-color": {
+        "description": "Checkbox control border color; invalid and checked states override."
+      },
+      "indicator-color": {
+        "description": "Checkbox check/minus indicator color."
+      },
+      "radius": {
+        "description": "Checkbox control corner radius."
+      },
+      "size": {
+        "description": "Checkbox control box size; size presets adjust footprint and radius."
+      }
+    }
+  }
 }

package/dist/components/checkbox/checkbox.js

@@ -33,10 +33,10 @@ var Checkbox$1 = ({ className, description, disabled, error, label, ref, size =
 					children: /* @__PURE__ */ jsxs(Checkbox.Indicator, {
 						className: checkbox_module_default.Indicator,
 						children: [/* @__PURE__ */ jsx(ChromeCheck, {
-							className: clsx(checkbox_module_default.Icon, checkbox_module_default.CheckIcon),
+							className: checkbox_module_default.CheckIcon,
 							size: iconSize
 						}), /* @__PURE__ */ jsx(ChromeMinus, {
-							className: clsx(checkbox_module_default.Icon, checkbox_module_default.MinusIcon),
+							className: checkbox_module_default.MinusIcon,
 							size: iconSize
 						})]
 					})

package/dist/components/checkbox/checkbox.module.js

@@ -3,7 +3,6 @@ var Checkbox = "viraui__checkbox-module__Checkbox_3oGip";
 var Label = "viraui__checkbox-module__Label_n9HL7";
 var CheckboxRoot = "viraui__checkbox-module__CheckboxRoot_PeyF5";
 var Indicator = "viraui__checkbox-module__Indicator_C-k-l";
-var Icon = "viraui__checkbox-module__Icon_926Sa";
 var MinusIcon = "viraui__checkbox-module__MinusIcon_Q57pY";
 var CheckIcon = "viraui__checkbox-module__CheckIcon_XqUcs";
 var checkbox_module_default = {
@@ -11,9 +10,8 @@ var checkbox_module_default = {
 	Label,
 	CheckboxRoot,
 	Indicator,
-	Icon,
 	MinusIcon,
 	CheckIcon
 };
 //#endregion
-export { CheckIcon, Checkbox, CheckboxRoot, Icon, Indicator, Label, MinusIcon, checkbox_module_default as default };
+export { CheckIcon, Checkbox, CheckboxRoot, Indicator, Label, MinusIcon, checkbox_module_default as default };

package/dist/components/chip/chip.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-chip-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-chip-icon-size{syntax:"<length>";inherits:true;initial-value:.9em}@property --vui-chip-color-bg-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:13%}@property --vui-chip-color-border-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:0}.viraui__chip-module__Chip_2D18T{--vui-chip-background:var(--global-primary);--vui-chip-color:contrast-color(var(--global-primary));--vui-chip-height:var(--space-large);min-block-size:var(--vui-chip-height);block-size:var(--vui-chip-height);border:1px solid var(--vui-chip-border-color);border-radius:var(--radius-infinite);background:var(--vui-chip-background);color:var(--vui-chip-color);font-size:var(--font-scale-body-small);font-variation-settings:"wght" 400;text-decoration:none;white-space:nowrap;overflow:hidden;&[data-variant=primary]{--vui-chip-background:var(--global-primary);--vui-chip-color:contrast-color(var(--global-primary))}&[data-variant=secondary]{--vui-chip-background:var(--global-contrast);--vui-chip-color:var(--base-6)}&[data-variant=outline]{--vui-chip-background:#0000;--vui-chip-border-color:oklab(from var(--global-contrast) l a b/0.2);--vui-chip-color:var(--base-6)}&[data-variant=gray]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-gray)}&[data-variant=slate]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-slate)}&[data-variant=yellow]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-yellow)}&[data-variant=green]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-green)}&[data-variant=blue]{--vui-chip-color:var(--highlight-blue)}&[data-variant=blue],&[data-variant=red]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity))}&[data-variant=red]{--vui-chip-color:var(--highlight-red)}&[data-variant=cyan]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-cyan)}&[data-variant=purple]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-purple)}&[data-variant=indigo]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-indigo)}&[data-variant=acid]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-acid)}&[data-variant=salmon]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-salmon)}&[data-variant=magenta]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-magenta)}}.viraui__chip-module__Content_7mLuL{min-inline-size:0;min-block-size:100%}.viraui__chip-module__IconSlot_9N5vD{display:inline-grid;place-items:center;flex-shrink:0;>svg{inline-size:var(--vui-chip-icon-size);block-size:var(--vui-chip-icon-size)}}.viraui__chip-module__Label_Hdx7l{display:inline-block;min-inline-size:0;overflow:hidden;text-overflow:ellipsis}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-chip-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-chip-icon-size{syntax:"<length>";inherits:true;initial-value:.9em}@property --vui-chip-color-bg-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:13%}@property --vui-chip-color-border-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:0}.viraui__chip-module__Chip_2D18T{--vui-chip-background:var(--global-primary);--vui-chip-color:contrast-color(var(--global-primary));--vui-chip-height:var(--space-large);block-size:var(--vui-chip-height);border:1px solid var(--vui-chip-border-color);border-radius:var(--radius-infinite);background:var(--vui-chip-background);color:var(--vui-chip-color);font-size:var(--font-scale-body-small);font-variation-settings:"wght" 400;text-decoration:none;white-space:nowrap;overflow:hidden;&[data-variant=secondary]{--vui-chip-background:var(--global-contrast);--vui-chip-color:var(--base-6)}&[data-variant=outline]{--vui-chip-background:#0000;--vui-chip-border-color:oklab(from var(--global-contrast) l a b/0.2);--vui-chip-color:var(--base-6)}&[data-variant=gray]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-gray)}&[data-variant=slate]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-slate)}&[data-variant=yellow]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-yellow)}&[data-variant=green]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-green)}&[data-variant=blue]{--vui-chip-color:var(--highlight-blue)}&[data-variant=blue],&[data-variant=red]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity))}&[data-variant=red]{--vui-chip-color:var(--highlight-red)}&[data-variant=cyan]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-cyan)}&[data-variant=purple]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-purple)}&[data-variant=indigo]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-indigo)}&[data-variant=acid]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-acid)}&[data-variant=salmon]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-salmon)}&[data-variant=magenta]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-magenta)}}.viraui__chip-module__Content_7mLuL{min-block-size:100%}.viraui__chip-module__IconSlot_9N5vD{display:inline-grid;place-items:center;>svg{inline-size:var(--vui-chip-icon-size);block-size:var(--vui-chip-icon-size)}}.viraui__chip-module__Label_Hdx7l{display:inline-block;min-inline-size:0;overflow:hidden;text-overflow:ellipsis}}

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

@@ -25,6 +25,23 @@
   ],
   "related": ["Button", "Icon", "IconButton", "Stack", "Text"],
   "properties": {
+    "react": {
+      "addon": {
+        "description": "Decorative addon rendered alongside the chip label."
+      },
+      "addonPosition": {
+        "description": "Controls whether the addon appears before or after the label."
+      },
+      "ref": {
+        "description": "Ref forwarded to the rendered chip root element."
+      },
+      "render": {
+        "description": "Replaces the default `div` root using Base UI render semantics."
+      },
+      "variant": {
+        "description": "Selects the visual treatment for the chip."
+      }
+    },
     "css": {
       "background": {
         "description": "Chip fill; variant presets via data attributes."
@@ -35,17 +52,17 @@
       "color": {
         "description": "Chip label and icon color."
       },
-      "height": {
-        "description": "Fixed chip block size."
-      },
-      "icon-size": {
-        "description": "Decorative addon icon size."
-      },
       "color-bg-opacity": {
         "description": "Highlight variant background opacity mix."
       },
       "color-border-opacity": {
         "description": "Highlight variant border opacity mix."
+      },
+      "height": {
+        "description": "Fixed chip block size."
+      },
+      "icon-size": {
+        "description": "Decorative addon icon size."
       }
     }
   }

package/dist/components/chip/chip.js

@@ -3,8 +3,8 @@ import { clsx } from "../../core/clsx.js";
 import { Stack } from "../stack/stack.js";
 import chip_module_default from "./chip.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRender } from "@base-ui/react/use-render";
 import "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/chip/chip.tsx
 var Chip = ({ addon, addonPosition = "start", children, className, ref, render, variant = "primary", ...otherProps }) => {
 	const content = /* @__PURE__ */ jsxs(Stack, {
@@ -18,6 +18,7 @@ var Chip = ({ addon, addonPosition = "start", children, className, ref, render,
 		children: [addon && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: chip_module_default.IconSlot,
+			"data-shrink": "false",
 			children: addon
 		}), /* @__PURE__ */ jsx("span", {
 			className: chip_module_default.Label,

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

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-clamp-text-rows{syntax:"<integer>";inherits:false;initial-value:1}.viraui__clamp-text-module__ClampText_Whnkd{display:-webkit-box;-webkit-line-clamp:var(--vui-clamp-text-rows,1);-webkit-box-orient:vertical;overflow:hidden;&[data-clamp-text-inline=true]{display:-webkit-inline-box}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-clamp-text-rows{syntax:"<integer>";inherits:false;initial-value:1}.viraui__clamp-text-module__ClampText_Whnkd{display:-webkit-box;-webkit-line-clamp:var(--vui-clamp-text-rows);-webkit-box-orient:vertical;overflow:hidden;&[data-clamp-text-inline=true]{display:-webkit-inline-box}}}

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

@@ -23,6 +23,15 @@
   "related": ["Text", "Title"],
   "properties": {
     "react": {
+      "inline": {
+        "description": "Uses inline `-webkit-inline-box` display instead of block `-webkit-box`."
+      },
+      "ref": {
+        "description": "Ref forwarded to the rendered clamp text root element."
+      },
+      "render": {
+        "description": "Replaces the default `span` root using Base UI render semantics."
+      },
       "rows": {
         "description": "Sets how many lines of text remain visible before truncation.",
         "refCss": "rows"

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

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

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

@@ -29,7 +29,6 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 			vPadding: ["medium", 0]
 		}),
 		children: [showHandle && /* @__PURE__ */ jsxs(Stack, {
-			className: dialog_module_default.Handle,
 			inline: true,
 			direction: "row",
 			vPadding: [0, "medium"],
@@ -45,6 +44,7 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 			className: dialog_module_default.Body,
 			children: [/* @__PURE__ */ jsxs(Stack, {
 				className: dialog_module_default.Header,
+				"data-shrink": "false",
 				hAlign: headerAlign,
 				hPadding: "medium",
 				fillChildren: false,

package/dist/components/dialog/dialog.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-dialog-max-block-size{syntax:"*";inherits:false;initial-value:97dvh}.viraui__dialog-module__Backdrop_xgFhs{position:fixed;inset:0;z-index:0;transition:opacity var(--duration-fast) var(--easing-standard);backdrop-filter:brightness(90%) blur(5px);opacity:1;&[data-ending-style],&[data-starting-style]{opacity:0}&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength, 1) * var(--duration-fast))}&[data-swiping]:not([data-ending-style]){opacity:calc(1 - var(--drawer-swipe-progress, 0));transition-duration:0s}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__dialog-module__Viewport_kmZN1{position:fixed;inset:0;z-index:4;pointer-events:none;touch-action:none}.viraui__dialog-module__Popup_5qIyj{--bleed:var(--space-wide);--peek:var(--space-medium);--stack-step:0.05;--stack-progress:clamp(0,var(--drawer-swipe-progress,0),1);--stack-peek-offset:max(0px,calc((var(--nested-drawers, 0) - var(--stack-progress)) * var(--peek)));--stack-scale-base:max(0,calc(1 - var(--nested-drawers, 0) * var(--stack-step)));--stack-scale:clamp(0,calc(var(--stack-scale-base) + var(--stack-step) * var(--stack-progress)),1);--stack-shrink:calc(1 - var(--stack-scale));--stack-height:max(0px,calc(var(--drawer-frontmost-height, var(--drawer-height, 0px)) - var(--bleed)));--translate-y:calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px) - var(--stack-peek-offset) - var(--stack-shrink) * var(--stack-height));max-block-size:var(--vui-dialog-max-block-size,97dvh);outline:none;pointer-events:auto;touch-action:none;height:var(--drawer-height,auto);transform-origin:50% calc(100% - var(--bleed));transition:opacity var(--duration-fast) var(--easing-entrance),transform var(--duration-fast) var(--easing-entrance),height var(--duration-fast) var(--easing-entrance);transform:translateY(var(--translate-y)) scale(var(--stack-scale));&[data-nested-drawer-open]{height:calc(var(--stack-height) + var(--bleed))}&[data-starting-style]{opacity:0;transform:translateY(100%)}&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength, 1) * var(--duration-fast))}&[data-ending-style][data-swipe-direction=down]{transform:translateY(100%)}&[data-nested-drawer-swiping]:not([data-ending-style]),&[data-swiping]:not([data-ending-style]){transition-duration:0s}@media (prefers-reduced-motion:reduce){transition:none;&[data-ending-style][data-swipe-direction=down],&[data-starting-style]{opacity:1;transform:translateY(0)}}}.viraui__dialog-module__Handle_nd9SN{margin:0 auto}.viraui__dialog-module__HandleShape_mEg8R{inline-size:var(--space-x-small);block-size:var(--space-x-small);background-color:oklab(from var(--global-contrast) l a b/.3);border-radius:var(--radius-infinite)}.viraui__dialog-module__Header_WnBly{flex-shrink:0;touch-action:none;-webkit-user-select:none;user-select:none}.viraui__dialog-module__Body_9-UgN{min-block-size:0}.viraui__dialog-module__Content_r8lJc{min-block-size:0;overflow:auto;overscroll-behavior:contain;touch-action:auto;padding-block-end:calc(env(safe-area-inset-bottom) + var(--space-medium));transition:opacity var(--duration-fast) var(--easing-standard);@media (prefers-reduced-motion:reduce){transition:none}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open] &{opacity:0}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open][data-nested-drawer-swiping] &{opacity:1}}.viraui__dialog-module__IndentBackground_OEfbh{position:absolute;inset:0}.viraui__dialog-module__Indent_qfiNW{--indent-radius:calc(1rem * (1 - var(--drawer-swipe-progress)));--indent-transition:calc(1 - clamp(0, calc(var(--drawer-swipe-progress) * 100000), 1));transition:transform var(--duration-normal) var(--easing-entrance),border-radius var(--duration-fast) var(--easing-entrance);transition-duration:calc(var(--duration-normal) * var(--indent-transition)),calc(var(--duration-fast) * var(--indent-transition));transform-origin:center top;will-change:transform;&[data-active]{transform:scale(calc(.98 + (.02 * var(--drawer-swipe-progress)))) translateY(calc(.5rem * (1 - var(--drawer-swipe-progress))));border-top-left-radius:var(--indent-radius);border-top-right-radius:var(--indent-radius)}}}@layer viraui.overrides{.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open]{overflow:hidden}.viraui__dialog-module__CloseButton_U-B1r.viraui__dialog-module__CloseButton_U-B1r{position:absolute;top:1rem;right:1rem}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-dialog-max-block-size{syntax:"*";inherits:false;initial-value:97dvh}@property --__dialog-bleed{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-peek{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-stack-step{syntax:"<number>";inherits:false;initial-value:.05}@property --__dialog-stack-progress{syntax:"<number>";inherits:false;initial-value:0}@property --__dialog-stack-peek-offset{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-stack-scale-base{syntax:"<number>";inherits:false;initial-value:1}@property --__dialog-stack-scale{syntax:"<number>";inherits:false;initial-value:1}@property --__dialog-stack-shrink{syntax:"<number>";inherits:false;initial-value:0}@property --__dialog-stack-height{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-translate-y{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-indent-radius{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-indent-transition{syntax:"<number>";inherits:false;initial-value:1}.viraui__dialog-module__Backdrop_xgFhs{position:fixed;inset:0;z-index:0;transition:opacity var(--duration-fast) var(--easing-standard);backdrop-filter:brightness(90%) blur(5px);opacity:1;&[data-ending-style],&[data-starting-style]{opacity:0}&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength, 1) * var(--duration-fast))}&[data-swiping]:not([data-ending-style]){opacity:calc(1 - var(--drawer-swipe-progress, 0));transition-duration:0s}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__dialog-module__Viewport_kmZN1{position:fixed;inset:0;z-index:4;pointer-events:none;touch-action:none}.viraui__dialog-module__Popup_5qIyj{--__dialog-bleed:var(--space-wide);--__dialog-peek:var(--space-medium);--__dialog-stack-progress:clamp(0,var(--drawer-swipe-progress,0),1);--__dialog-stack-peek-offset:max(0px,calc((var(--nested-drawers, 0) - var(--__dialog-stack-progress)) * var(--__dialog-peek)));--__dialog-stack-scale-base:max(0,calc(1 - var(--nested-drawers, 0) * var(--__dialog-stack-step)));--__dialog-stack-scale:clamp(0,calc(var(--__dialog-stack-scale-base) + var(--__dialog-stack-step) * var(--__dialog-stack-progress)),1);--__dialog-stack-shrink:calc(1 - var(--__dialog-stack-scale));--__dialog-stack-height:max(0px,calc(var(--drawer-frontmost-height, var(--drawer-height, 0px)) - var(--__dialog-bleed)));--__dialog-translate-y:calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px) - var(--__dialog-stack-peek-offset) - var(--__dialog-stack-shrink) * var(--__dialog-stack-height));max-block-size:var(--vui-dialog-max-block-size,97dvh);outline:none;pointer-events:auto;touch-action:none;height:var(--drawer-height,auto);transform-origin:50% calc(100% - var(--__dialog-bleed));transition:opacity var(--duration-fast) var(--easing-entrance),transform var(--duration-fast) var(--easing-entrance),height var(--duration-fast) var(--easing-entrance);transform:translateY(var(--__dialog-translate-y)) scale(var(--__dialog-stack-scale));&[data-nested-drawer-open]{height:calc(var(--__dialog-stack-height) + var(--__dialog-bleed))}&[data-starting-style]{opacity:0;transform:translateY(100%)}&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength, 1) * var(--duration-fast))}&[data-ending-style][data-swipe-direction=down]{transform:translateY(100%)}&[data-nested-drawer-swiping]:not([data-ending-style]),&[data-swiping]:not([data-ending-style]){transition-duration:0s}@media (prefers-reduced-motion:reduce){transition:none;&[data-ending-style][data-swipe-direction=down],&[data-starting-style]{opacity:1;transform:translateY(0)}}}.viraui__dialog-module__HandleShape_mEg8R{inline-size:var(--space-x-small);block-size:var(--space-x-small);background-color:oklab(from var(--global-contrast) l a b/.3);border-radius:var(--radius-infinite)}.viraui__dialog-module__Header_WnBly{touch-action:none;-webkit-user-select:none;user-select:none}.viraui__dialog-module__Body_9-UgN{min-block-size:0}.viraui__dialog-module__Content_r8lJc{min-block-size:0;overflow:auto;overscroll-behavior:contain;touch-action:auto;padding-block-end:calc(env(safe-area-inset-bottom) + var(--space-medium));transition:opacity var(--duration-fast) var(--easing-standard);@media (prefers-reduced-motion:reduce){transition:none}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open] &{opacity:0}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open][data-nested-drawer-swiping] &{opacity:1}}.viraui__dialog-module__IndentBackground_OEfbh{position:absolute;inset:0}.viraui__dialog-module__Indent_qfiNW{--__dialog-indent-radius:calc(1rem * (1 - var(--drawer-swipe-progress)));--__dialog-indent-transition:calc(1 - clamp(0, calc(var(--drawer-swipe-progress) * 100000), 1));transition:transform var(--duration-normal) var(--easing-entrance),border-radius var(--duration-fast) var(--easing-entrance);transition-duration:calc(var(--duration-normal) * var(--__dialog-indent-transition)),calc(var(--duration-fast) * var(--__dialog-indent-transition));transform-origin:center top;will-change:transform;&[data-active]{transform:scale(calc(.98 + (.02 * var(--drawer-swipe-progress)))) translateY(calc(.5rem * (1 - var(--drawer-swipe-progress))));border-top-left-radius:var(--__dialog-indent-radius);border-top-right-radius:var(--__dialog-indent-radius)}}}@layer viraui.overrides{.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open]{overflow:hidden}.viraui__dialog-module__CloseButton_U-B1r.viraui__dialog-module__CloseButton_U-B1r{position:absolute;top:1rem;right:1rem}}