@viraui/react 0.0.25 → 0.0.27

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

@@ -3,8 +3,8 @@ import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Avatar } from "../avatar/avatar.js";
 import avatar_group_module_default from "./avatar-group.module.js";
-import { Stack } from "../stack/stack.js";
 import { Text } from "../text/text.js";
+import { Stack } from "../stack/stack.js";
 import { Surface } from "../surface/surface.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/avatar-group/avatar-group.tsx
@@ -42,7 +42,7 @@ var AvatarGroup = ({ avatars, className, direction = "horizontal", maxVisible, o
 					vAlign: "center",
 					hPadding: "medium"
 				}),
-				style: { "--surface-border-radius": "1e5px" },
+				style: { "--vui-surface-border-radius": "1e5px" },
 				children: /* @__PURE__ */ jsx(Text, {
 					whiteSpace: "nowrap",
 					children: overflowText

package/dist/components/avatar-group/avatar-group.module.js

@@ -1,9 +1,15 @@
+//#region src/components/avatar-group/avatar-group.module.css
+var AvatarGroup = "viraui__avatar-group-module__AvatarGroup_zOrR-";
+var AvatarWrapper = "viraui__avatar-group-module__AvatarWrapper_0opqY";
+var OverflowWrapper = "viraui__avatar-group-module__OverflowWrapper_bKv6I";
+var AvatarGroupItem = "viraui__avatar-group-module__AvatarGroupItem_Vvlyh";
+var OverflowPill = "viraui__avatar-group-module__OverflowPill_nMmTD";
 var avatar_group_module_default = {
-	AvatarGroup: "viraui__avatar-group-module__AvatarGroup_zOrR-",
-	AvatarWrapper: "viraui__avatar-group-module__AvatarWrapper_0opqY",
-	OverflowWrapper: "viraui__avatar-group-module__OverflowWrapper_bKv6I",
-	AvatarGroupItem: "viraui__avatar-group-module__AvatarGroupItem_Vvlyh",
-	OverflowPill: "viraui__avatar-group-module__OverflowPill_nMmTD"
+	AvatarGroup,
+	AvatarWrapper,
+	OverflowWrapper,
+	AvatarGroupItem,
+	OverflowPill
 };
 //#endregion
-export { avatar_group_module_default as default };
+export { AvatarGroup, AvatarGroupItem, AvatarWrapper, OverflowPill, OverflowWrapper, avatar_group_module_default as default };

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

@@ -1 +1 @@
-.viraui__basic-input-module__BasicInput_5uE64{--basic-input-background:var(--base-1);--basic-input-color:var(--global-foreground);--basic-input-placeholder-color:var(--global-disabled-foreground);--basic-input-padding-inline:var(--space-small);--basic-input-font-size:var(--font-scale-body-small);--basic-input-border-radius:var(--radius-medium);box-sizing:border-box;margin:0;inline-size:100%;min-inline-size:0;padding-inline:var(--basic-input-padding-inline);font-family:inherit;font-size:var(--basic-input-font-size);font-variation-settings:"wght" 400;color:var(--basic-input-color);background:var(--basic-input-background);border:none;border-radius:var(--basic-input-border-radius);appearance:none;&::-webkit-contacts-auto-fill-button{background-color:var(--basic-input-color)}&::placeholder{color:var(--basic-input-placeholder-color)}&:disabled{--basic-input-background:var(--global-disabled-background);--basic-input-color:var(--global-disabled-foreground);--basic-input-placeholder-color:var(--global-disabled-foreground);cursor:not-allowed}&[data-invalid]{outline-color:oklab(from var(--highlight-red) l a b/.3)}}
+.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)}}

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

@@ -9,18 +9,18 @@ import { Input } from "@base-ui/react/input";
 function usesInputPrimitiveRender(render) {
 	return React.isValidElement(render) && render.type === Input;
 }
-var BasicInput = React.forwardRef(function BasicInput({ className, render, ...props }, ref) {
+var BasicInput = React.forwardRef(function BasicInput({ className, render, ...otherProps }, ref) {
 	const mergedClassName = clsx(basic_input_module_default.BasicInput, className);
 	if (usesInputPrimitiveRender(render)) return /* @__PURE__ */ jsx(Input, {
 		ref,
 		className: mergedClassName,
-		...props
+		...otherProps
 	});
 	return /* @__PURE__ */ jsx(Field.Control, {
 		ref,
 		className: mergedClassName,
 		render,
-		...props
+		...otherProps
 	});
 });
 //#endregion

package/dist/components/basic-input/basic-input.module.js

@@ -1,3 +1,5 @@
-var basic_input_module_default = { BasicInput: "viraui__basic-input-module__BasicInput_5uE64" };
+//#region src/components/basic-input/basic-input.module.css
+var BasicInput = "viraui__basic-input-module__BasicInput_5uE64";
+var basic_input_module_default = { BasicInput };
 //#endregion
-export { basic_input_module_default as default };
+export { BasicInput, basic_input_module_default as default };

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

@@ -1 +1 @@
-.viraui__field-label-module__FieldLabel_R9SYf{display:inline;flex-direction:column;align-items:stretch;inline-size:100%;padding-inline:var(--field-label-padding-inline,0)}
+.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)}

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

@@ -1,3 +1,5 @@
-var field_label_module_default = { FieldLabel: "viraui__field-label-module__FieldLabel_R9SYf" };
+//#region src/components/basic-input/field-label.module.css
+var FieldLabel = "viraui__field-label-module__FieldLabel_R9SYf";
+var field_label_module_default = { FieldLabel };
 //#endregion
-export { field_label_module_default as default };
+export { FieldLabel, field_label_module_default as default };

package/dist/components/bleed/bleed.css

@@ -0,0 +1 @@
+.viraui__bleed-module__Bleed_7rnR6{margin:0 calc(var(--vui-bleed-amount, 0) * -1);&[data-bleed-full=true]{width:100vw;margin-left:calc(50% - 50vw)}}

package/dist/components/bleed/bleed.d.ts

@@ -0,0 +1,26 @@
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
+import type * as React from 'react';
+/**
+ * Public Bleed props.
+ *
+ * Includes standard `div` attributes such as `children`, `id`, `className`, and event handlers,
+ * plus Vira-owned inline bleed controls.
+ *
+ * @default Native div pass-through props keep React defaults.
+ */
+export type BleedProps = React.ComponentPropsWithRef<'div'> & IntrinsicViraProps & {
+    /**
+     * Sets the inline bleed amount using a Vira space token.
+     *
+     * @default No bleed is applied.
+     */
+    amount?: ThemeTypes['space'];
+    /**
+     * Bleeds content to the viewport edges and ignores `amount`.
+     *
+     * @default false
+     */
+    full?: boolean;
+};
+export declare const Bleed: React.FC<BleedProps>;

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

@@ -0,0 +1,39 @@
+{
+  "name": "Bleed",
+  "summary": "Layout utility that pulls content past inline padding using negative margins or full viewport bleed.",
+  "whenToUse": [
+    "Edge-to-edge media or dividers inside padded Surface or Stack containers",
+    "Hero bands or callouts that should break out of card padding",
+    "Full-bleed sections that span the viewport width from a centered layout"
+  ],
+  "whenNotToUse": [
+    "Replacing Stack or Surface padding instead of composing with them",
+    "Interactive controls that need their own hit target sizing",
+    "Cases where overflow clipping on the parent should remain strict"
+  ],
+  "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"
+  ],
+  "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"
+  ],
+  "related": ["Stack", "Surface", "Separator"],
+  "properties": {
+    "react": {
+      "amount": {
+        "description": "Sets the inline bleed amount using a Vira space token.",
+        "refCss": "amount"
+      }
+    },
+    "css": {
+      "amount": {
+        "description": "Negative inline margin bleed distance on the root.",
+        "refReact": "amount"
+      }
+    }
+  }
+}

package/dist/components/bleed/bleed.js

@@ -0,0 +1,24 @@
+import './bleed.css';
+import { clsx } from "../../core/clsx.js";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import bleed_module_default from "./bleed.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/bleed/bleed.tsx
+var Bleed = ({ amount, children, className, full = false, ref, style, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const dynamicStyle = {
+		...amount && !full && { "--vui-bleed-amount": `var(--space-${amount})` },
+		...style
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...componentProps,
+		...intrinsicAttributes,
+		ref,
+		className: clsx(bleed_module_default.Bleed, className),
+		"data-bleed-full": full ? "true" : void 0,
+		style: dynamicStyle,
+		children
+	});
+};
+//#endregion
+export { Bleed };

package/dist/components/bleed/bleed.module.js

@@ -0,0 +1,5 @@
+//#region src/components/bleed/bleed.module.css
+var Bleed = "viraui__bleed-module__Bleed_7rnR6";
+var bleed_module_default = { Bleed };
+//#endregion
+export { Bleed, bleed_module_default as default };

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

@@ -0,0 +1,2 @@
+export { Bleed } from './bleed';
+export type { BleedProps } from './bleed';

package/dist/components/button/button.css

@@ -1 +1 @@
-.viraui__button-module__Button_oPhrP{--button-background:var(--global-primary);--button-color:var(--base-1);--button-height:var(--space-x-large);--button-padding-inline:var(--space-small);--button-padding-block:var(--space-small);--button-spinner-color:currentColor;--button-icon-size:1.125em;--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(--button-height);block-size:var(--button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--button-padding-block) var(--button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid #0000;background:var(--button-background);color:var(--button-color);font-size:var(--font-scale-body-medium);border-radius:var(--button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled):active{translate:0 1px}&[data-pill=true]{border-radius:var(--radius-infinite);&[data-addon-position=end]{padding-inline-end:calc(var(--button-padding-inline) / 2)}&[data-addon-position=start]{padding-inline-start:calc(var(--button-padding-inline) / 2)}}&[data-size=big]{--button-height:var(--space-2x-large);--button-padding-inline:var(--space-medium);--button-padding-block:var(--space-small);--button-icon-size:1.125em;--button-radius:var(--radius-medium)}&[data-size=small]{--button-height:var(--space-large);--button-padding-inline:var(--space-small);--button-padding-block:var(--space-x-small);--button-icon-size:1em;--button-radius:var(--radius-small);gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--button-background:var(--global-primary);--button-color:contrast-color(var(--global-primary));&:hover{--button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--button-background:var(--global-contrast);--button-color:var(--base-6);background-clip:unset;&:hover{--button-background:oklab(from var(--global-contrast) l a b/calc(alpha + 0.03))}}&[data-variant=flat]{--button-background:#0000;--button-color:var(--base-5);&:hover{--button-background:var(--global-contrast);--button-color:var(--base-7)}}&[data-variant=destructive]{--button-background:oklab(from var(--highlight-red) l a b/12%);--button-color:var(--highlight-red);&:hover{--button-background:oklab(from var(--highlight-red) l a b/30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--button-padding-block);padding-inline:var(--button-padding-block);inline-size:var(--button-height);min-inline-size:var(--button-height);max-inline-size:var(--button-height);aspect-ratio:1/1}&:disabled,&:disabled:hover,&[aria-disabled=true]{--button-background:var(--global-disabled-background);--button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none}&[data-loading=true][data-disabled]{pointer-events:none;border:0;box-shadow:none;--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(--button-icon-size);inline-size:var(--button-icon-size);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none}
+.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-spinner-color:currentColor;--vui-button-icon-size:1.125em;--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-theme: 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}

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

@@ -5,7 +5,8 @@
     "Labeled actions with text and optional leading or trailing addon",
     "Primary, secondary, flat, or destructive visual treatments",
     "Capsule-shaped actions via pill when a fully rounded button fits the layout",
-    "Async actions that need a stable width while loading"
+    "Async actions that need a stable width while loading",
+    "Primary Chip addons inside a primary Button — set data-theme=\"inverted\" on the Chip so its background contrasts the button fill"
   ],
   "whenNotToUse": ["Icon-only actions without a visible label — use IconButton", "Navigation or non-button semantics"],
   "accessibility": [
@@ -16,7 +17,36 @@
   "antiPatterns": [
     "Using Button without children as icon-only — prefer IconButton",
     "Duplicating icon size on every addon slot — Button CSS sizes SVG descendants",
-    "Mixing pill with custom border-radius overrides that fight data-pill styling"
+    "Mixing pill with custom border-radius overrides that fight data-pill styling",
+    "Primary Chip addon inside a primary Button without data-theme=\"inverted\" — chip background matches the button fill and disappears"
   ],
-  "related": ["IconButton", "Icon", "Spinner", "Chip"]
+  "related": ["IconButton", "Icon", "Spinner", "Chip"],
+  "properties": {
+    "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."
+      },
+      "padding-inline": {
+        "description": "Horizontal padding 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."
+      },
+      "radius": {
+        "description": "Corner radius; pill sets infinite radius via data-pill."
+      }
+    }
+  }
 }

package/dist/components/button/button.js

@@ -4,9 +4,9 @@ import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props
 import { Spinner } from "../spinner/spinner.js";
 import button_module_default from "./button.module.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
 import * as React from "react";
-import { Button } from "@base-ui/react/button";
 //#region src/components/button/button.tsx
 var spinnerDimensionsBySize = {
 	small: "small",

package/dist/components/button/button.module.js

@@ -1,7 +1,11 @@
+//#region src/components/button/button.module.css
+var Button = "viraui__button-module__Button_oPhrP";
+var Content = "viraui__button-module__Content_w-pX-";
+var SpinnerOverlay = "viraui__button-module__SpinnerOverlay_vKqw1";
 var button_module_default = {
-	Button: "viraui__button-module__Button_oPhrP",
-	Content: "viraui__button-module__Content_w-pX-",
-	SpinnerOverlay: "viraui__button-module__SpinnerOverlay_vKqw1"
+	Button,
+	Content,
+	SpinnerOverlay
 };
 //#endregion
-export { button_module_default as default };
+export { Button, Content, SpinnerOverlay, button_module_default as default };

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

@@ -2,8 +2,8 @@ import { Stack } from "../stack/stack.js";
 import { jsx } from "react/jsx-runtime";
 import { CheckboxGroup } from "@base-ui/react";
 //#region src/components/checkbox/checkbox-group.tsx
-var CheckboxGroup$1 = ({ children, className, ...props }) => /* @__PURE__ */ jsx(CheckboxGroup, {
-	...props,
+var CheckboxGroup$1 = ({ children, className, ...otherProps }) => /* @__PURE__ */ jsx(CheckboxGroup, {
+	...otherProps,
 	className,
 	render: /* @__PURE__ */ jsx(Stack, {
 		fillChildren: false,

package/dist/components/checkbox/checkbox.css

@@ -1 +1 @@
-.viraui__checkbox-module__Checkbox_3oGip{&:has([required]) .viraui__checkbox-module__Label_n9HL7:after{content:" ＊";color:var(--highlight-red)}}.viraui__checkbox-module__CheckboxRoot_PeyF5{--checkbox-size:var(--space-medium);--checkbox-radius:var(--radius-x-small);--checkbox-background:var(--global-contrast);--checkbox-border-color:#0000;--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(--checkbox-border-color);inline-size:var(--checkbox-size);block-size:var(--checkbox-size);background:var(--checkbox-background);border-radius:var(--checkbox-radius);&[data-size=regular]{--checkbox-size:var(--space-large);--checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]),&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--checkbox-background:var(--global-primary);--checkbox-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--checkbox-border-color:var(--highlight-red);--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] &{--checkbox-background:var(--global-disabled-background);--checkbox-border-color:#0000;--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(--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}
+.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-border-color:#0000;--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]),&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--vui-checkbox-background:var(--global-primary);--vui-checkbox-border-color:var(--global-primary);box-shadow:none}&[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}

package/dist/components/checkbox/checkbox.js

@@ -1,9 +1,9 @@
 import './checkbox.css';
 import { clsx } from "../../core/clsx.js";
-import { Stack } from "../stack/stack.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
 import checkbox_module_default from "./checkbox.module.js";
+import { Stack } from "../stack/stack.js";
 import { Icon } from "../icon/icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";

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

@@ -1,11 +1,19 @@
+//#region src/components/checkbox/checkbox.module.css
+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 = {
-	Checkbox: "viraui__checkbox-module__Checkbox_3oGip",
-	Label: "viraui__checkbox-module__Label_n9HL7",
-	CheckboxRoot: "viraui__checkbox-module__CheckboxRoot_PeyF5",
-	Indicator: "viraui__checkbox-module__Indicator_C-k-l",
-	Icon: "viraui__checkbox-module__Icon_926Sa",
-	MinusIcon: "viraui__checkbox-module__MinusIcon_Q57pY",
-	CheckIcon: "viraui__checkbox-module__CheckIcon_XqUcs"
+	Checkbox,
+	Label,
+	CheckboxRoot,
+	Indicator,
+	Icon,
+	MinusIcon,
+	CheckIcon
 };
 //#endregion
-export { checkbox_module_default as default };
+export { CheckIcon, Checkbox, CheckboxRoot, Icon, Indicator, Label, MinusIcon, checkbox_module_default as default };

package/dist/components/chip/chip.css

@@ -1 +1 @@
-.viraui__chip-module__Chip_2D18T{--chip-background:var(--global-primary);--chip-border-color:#0000;--chip-color:contrast-color(var(--global-primary));--chip-height:var(--space-large);--chip-icon-size:0.9em;--chip-color-bg-opacity:13%;--chip-color-border-opacity:0%;min-block-size:var(--chip-height);block-size:var(--chip-height);border:1px solid var(--chip-border-color);border-radius:var(--radius-infinite);background:var(--chip-background);color:var(--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]{--chip-background:var(--global-primary);--chip-color:contrast-color(var(--global-primary))}&[data-variant=secondary]{--chip-background:var(--global-contrast);--chip-color:var(--base-6)}&[data-variant=outline]{--chip-background:#0000;--chip-border-color:oklab(from var(--global-contrast) l a b/0.2);--chip-color:var(--base-6)}&[data-variant=gray]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-gray)}&[data-variant=slate]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-slate)}&[data-variant=yellow]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-yellow)}&[data-variant=green]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-green)}&[data-variant=blue]{--chip-color:var(--highlight-blue)}&[data-variant=blue],&[data-variant=red]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity))}&[data-variant=red]{--chip-color:var(--highlight-red)}&[data-variant=cyan]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-cyan)}&[data-variant=purple]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-purple)}&[data-variant=indigo]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-indigo)}&[data-variant=acid]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-acid)}&[data-variant=salmon]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-salmon)}&[data-variant=magenta]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--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(--chip-icon-size);block-size:var(--chip-icon-size)}}.viraui__chip-module__Label_Hdx7l{display:inline-block;min-inline-size:0;overflow:hidden;text-overflow:ellipsis}
+.viraui__chip-module__Chip_2D18T{--vui-chip-background:var(--global-primary);--vui-chip-border-color:#0000;--vui-chip-color:contrast-color(var(--global-primary));--vui-chip-height:var(--space-large);--vui-chip-icon-size:0.9em;--vui-chip-color-bg-opacity:13%;--vui-chip-color-border-opacity:0%;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}

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

@@ -22,5 +22,30 @@
     "Introducing custom size variants instead of the fixed compact height",
     "Re-adding a one-off destructive variant instead of using the red highlight color"
   ],
-  "related": ["Button", "Icon", "IconButton", "Stack", "Text"]
+  "related": ["Button", "Icon", "IconButton", "Stack", "Text"],
+  "properties": {
+    "css": {
+      "background": {
+        "description": "Chip fill; variant presets via data attributes."
+      },
+      "border-color": {
+        "description": "Chip border color."
+      },
+      "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."
+      }
+    }
+  }
 }

package/dist/components/chip/chip.module.js

@@ -1,8 +1,13 @@
+//#region src/components/chip/chip.module.css
+var Chip = "viraui__chip-module__Chip_2D18T";
+var Content = "viraui__chip-module__Content_7mLuL";
+var IconSlot = "viraui__chip-module__IconSlot_9N5vD";
+var Label = "viraui__chip-module__Label_Hdx7l";
 var chip_module_default = {
-	Chip: "viraui__chip-module__Chip_2D18T",
-	Content: "viraui__chip-module__Content_7mLuL",
-	IconSlot: "viraui__chip-module__IconSlot_9N5vD",
-	Label: "viraui__chip-module__Label_Hdx7l"
+	Chip,
+	Content,
+	IconSlot,
+	Label
 };
 //#endregion
-export { chip_module_default as default };
+export { Chip, Content, IconSlot, Label, chip_module_default as default };

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

@@ -1 +1 @@
-.viraui__clamp-text-module__ClampText_Whnkd{display:-webkit-box;-webkit-line-clamp:var(--clamp-text-rows,1);-webkit-box-orient:vertical;overflow:hidden;&[data-clamp-text-inline=true]{display:-webkit-inline-box}}
+.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}}

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

@@ -19,5 +19,19 @@
     "Using ClampText as a heading primitive without Title render",
     "Expecting children-driven sizing instead of rows"
   ],
-  "related": ["Text", "Title"]
+  "related": ["Text", "Title"],
+  "properties": {
+    "react": {
+      "rows": {
+        "description": "Sets how many lines of text remain visible before truncation.",
+        "refCss": "rows"
+      }
+    },
+    "css": {
+      "rows": {
+        "description": "WebKit line-clamp row count on the root.",
+        "refReact": "rows"
+      }
+    }
+  }
 }

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

@@ -8,7 +8,7 @@ import { useMemo } from "react";
 //#region src/components/clamp-text/clamp-text.tsx
 var ClampText = ({ className, inline = false, ref, render, rows = 1, style, ...otherProps }) => {
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
-	const dynamicStyle = useMemo(() => ({ "--clamp-text-rows": rows }), [rows]);
+	const dynamicStyle = useMemo(() => ({ "--vui-clamp-text-rows": rows }), [rows]);
 	return useRender({
 		defaultTagName: "span",
 		render,

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

@@ -1,3 +1,5 @@
-var clamp_text_module_default = { ClampText: "viraui__clamp-text-module__ClampText_Whnkd" };
+//#region src/components/clamp-text/clamp-text.module.css
+var ClampText = "viraui__clamp-text-module__ClampText_Whnkd";
+var clamp_text_module_default = { ClampText };
 //#endregion
-export { clamp_text_module_default as default };
+export { ClampText, clamp_text_module_default as default };

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

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react";
 //#region src/components/dialog/dialog-close.tsx
-var DialogClose = ({ ref, ...props }) => /* @__PURE__ */ jsx(Drawer.Close, {
+var DialogClose = ({ ref, ...otherProps }) => /* @__PURE__ */ jsx(Drawer.Close, {
 	ref,
-	...props
+	...otherProps
 });
 //#endregion
 export { DialogClose };

package/dist/components/dialog/dialog-indent-background.js

@@ -3,8 +3,8 @@ import dialog_module_default from "./dialog.module.js";
 import { jsx } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react";
 //#region src/components/dialog/dialog-indent-background.tsx
-var DialogIndentBackground = ({ className, ...props }) => /* @__PURE__ */ jsx(Drawer.IndentBackground, {
-	...props,
+var DialogIndentBackground = ({ className, ...otherProps }) => /* @__PURE__ */ jsx(Drawer.IndentBackground, {
+	...otherProps,
 	className: clsx(dialog_module_default.IndentBackground, className)
 });
 //#endregion

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

@@ -3,8 +3,8 @@ import dialog_module_default from "./dialog.module.js";
 import { jsx } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react";
 //#region src/components/dialog/dialog-indent.tsx
-var DialogIndent = ({ className, ...props }) => /* @__PURE__ */ jsx(Drawer.Indent, {
-	...props,
+var DialogIndent = ({ className, ...otherProps }) => /* @__PURE__ */ jsx(Drawer.Indent, {
+	...otherProps,
 	className: clsx(dialog_module_default.Indent, className)
 });
 //#endregion

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

@@ -1,8 +1,8 @@
+import { Text } from "../text/text.js";
 import { Stack } from "../stack/stack.js";
 import dialog_module_default from "./dialog.module.js";
-import { IconButton } from "../icon-button/icon-button.js";
-import { Text } from "../text/text.js";
 import { Icon } from "../icon/icon.js";
+import { IconButton } from "../icon-button/icon-button.js";
 import { Surface } from "../surface/surface.js";
 import { Title } from "../title/title.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -19,7 +19,7 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 	className: dialog_module_default.Viewport,
 	children: /* @__PURE__ */ jsxs(Drawer.Popup, {
 		className: dialog_module_default.Popup,
-		style: { "--dialog-max-block-size": maxHeight },
+		style: { "--vui-dialog-max-block-size": maxHeight },
 		render: /* @__PURE__ */ jsx(Surface, {
 			border: "top",
 			render: /* @__PURE__ */ jsx(Stack, { hAlign: "center" }),

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

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react";
 //#region src/components/dialog/dialog-trigger.tsx
-var DialogTrigger = ({ ref, ...props }) => /* @__PURE__ */ jsx(Drawer.Trigger, {
+var DialogTrigger = ({ ref, ...otherProps }) => /* @__PURE__ */ jsx(Drawer.Trigger, {
 	ref,
-	...props
+	...otherProps
 });
 //#endregion
 export { DialogTrigger };

package/dist/components/dialog/dialog.css

@@ -1 +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-swiping]{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(--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));overflow:hidden}&[data-starting-style]{opacity:0}&[data-ending-style][data-swipe-direction=down],&[data-starting-style]{transform:translateY(100%)}&[data-nested-drawer-swiping],&[data-swiping]{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__CloseButton_U-B1r.viraui__dialog-module__CloseButton_U-B1r{position:absolute;top:1rem;right:1rem}.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 .4s cubic-bezier(.32,.72,0,1),border-radius .25s cubic-bezier(.32,.72,0,1);transition-duration:calc(.4s * var(--indent-transition)),calc(.25s * 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)}}
+.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-swiping]{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));overflow:hidden}&[data-starting-style]{opacity:0}&[data-ending-style][data-swipe-direction=down],&[data-starting-style]{transform:translateY(100%)}&[data-nested-drawer-swiping],&[data-swiping]{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__CloseButton_U-B1r.viraui__dialog-module__CloseButton_U-B1r{position:absolute;top:1rem;right:1rem}.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 .4s cubic-bezier(.32,.72,0,1),border-radius .25s cubic-bezier(.32,.72,0,1);transition-duration:calc(.4s * var(--indent-transition)),calc(.25s * 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)}}

package/dist/components/dialog/dialog.d.ts

@@ -10,19 +10,20 @@ import type * as React from 'react';
  *
  * Groups `Dialog.Trigger`, `Dialog.Sheet`, `Dialog.Close`, `Dialog.Provider`,
  * `Dialog.Indent`, and `Dialog.IndentBackground` under Base UI Drawer parts.
+ * Portal, backdrop, viewport, popup, title, description, and content parts are
+ * internal to `Dialog.Sheet` and are not exposed on `Dialog`.
  *
  * @default Base UI pass-through props keep upstream defaults.
  */
 export type DialogProps = DrawerRoot.Props;
 export type DialogSnapPoint = DrawerRoot.SnapPoint;
 export type DialogProviderProps = DrawerProvider.Props;
-type DialogComponent = React.FC<DialogProps> & {
-    Trigger: React.FC<DialogTriggerProps>;
+type DialogComponent = React.FC<DialogProps> & Omit<typeof PrimitiveDrawer, 'Portal' | 'Backdrop' | 'Viewport' | 'Popup' | 'Title' | 'Description' | 'Content' | 'SwipeArea' | 'VirtualKeyboardProvider' | 'createHandle' | 'Handle' | 'Root'> & {
     Sheet: React.FC<DialogSheetProps>;
-    Close: React.FC<DialogCloseProps>;
-    Provider: typeof PrimitiveDrawer.Provider;
     Indent: React.FC<DialogIndentProps>;
     IndentBackground: React.FC<DialogIndentBackgroundProps>;
+    Trigger: React.FC<DialogTriggerProps>;
+    Close: React.FC<DialogCloseProps>;
 };
 export declare const Dialog: DialogComponent;
 export {};