@viraui/react 0.0.24 → 0.0.26

package/dist/components/switch/switch.guide.json

@@ -19,5 +19,36 @@
     "Rendering a switch without label and without aria-label",
     "Expecting description to stay visible when invalid without an error message"
   ],
-  "related": ["Textfield", "Stack", "Text"]
+  "related": ["Textfield", "Stack", "Text"],
+  "properties": {
+    "react": {
+      "size": {
+        "description": "Controls the visual switch size.",
+        "refCss": "track-block-size"
+      }
+    },
+    "css": {
+      "track-block-size": {
+        "description": "Switch track block size; size presets adjust track and thumb.",
+        "refReact": "size"
+      },
+      "track-radius": {
+        "description": "Switch track corner radius.",
+        "refReact": "size"
+      },
+      "thumb-size": {
+        "description": "Switch thumb size derived from track block size.",
+        "refReact": "size"
+      },
+      "track-background": {
+        "description": "Switch track background color."
+      },
+      "thumb-background": {
+        "description": "Switch thumb background color."
+      },
+      "thumb-inset": {
+        "description": "Inset between thumb and track edges."
+      }
+    }
+  }
 }

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

@@ -3,14 +3,14 @@ import tabs_module_default from "./tabs.module.js";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/tabs/tabs-indicator.tsx
-var TabsIndicator = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(Tabs.Indicator, {
+var TabsIndicator = ({ className, ref, ...otherProps }) => /* @__PURE__ */ jsx(Tabs.Indicator, {
 	render: /* @__PURE__ */ jsx(Surface, {
 		border: "all",
 		radius: "auto",
 		color: 3
 	}),
 	className: tabs_module_default.Indicator,
-	...props
+	...otherProps
 });
 //#endregion
 export { TabsIndicator };

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

@@ -6,7 +6,7 @@ import { TabsIndicator } from "./tabs-indicator.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/tabs/tabs-list.tsx
-var TabsList = ({ children, className, activateOnFocus = true, ref, ...props }) => /* @__PURE__ */ jsx(Tabs.List, {
+var TabsList = ({ children, className, activateOnFocus = true, ref, ...otherProps }) => /* @__PURE__ */ jsx(Tabs.List, {
 	className: clsx(tabs_module_default.List, className),
 	activateOnFocus,
 	render: /* @__PURE__ */ jsx(Surface, {
@@ -16,7 +16,7 @@ var TabsList = ({ children, className, activateOnFocus = true, ref, ...props })
 		radius: "medium",
 		vPadding: "2x-small"
 	}),
-	...props,
+	...otherProps,
 	children: /* @__PURE__ */ jsxs(Stack, {
 		direction: "row",
 		columnGap: "small",

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

@@ -3,10 +3,10 @@ import tabs_module_default from "./tabs.module.js";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/tabs/tabs-panel.tsx
-var TabsPanel = ({ children, className, ref, ...props }) => /* @__PURE__ */ jsx(Tabs.Panel, {
+var TabsPanel = ({ children, className, ref, ...otherProps }) => /* @__PURE__ */ jsx(Tabs.Panel, {
 	ref,
 	className: clsx(tabs_module_default.Panel, className),
-	...props,
+	...otherProps,
 	children
 });
 //#endregion

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

@@ -5,14 +5,14 @@ import tabs_module_default from "./tabs.module.js";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/tabs/tabs-tab.tsx
-var TabsTab = ({ addon, addonPosition = "start", children, className, ...props }) => /* @__PURE__ */ jsx(Tabs.Tab, {
+var TabsTab = ({ addon, addonPosition = "start", children, className, ...otherProps }) => /* @__PURE__ */ jsx(Tabs.Tab, {
 	render: /* @__PURE__ */ jsx(Button, {
 		variant: "flat",
 		addon,
 		addonPosition,
 		className: clsx(tabs_module_default.Item, className)
 	}),
-	...props,
+	...otherProps,
 	children: /* @__PURE__ */ jsx(Text, {
 		tone: "muted",
 		whiteSpace: "nowrap",

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

@@ -2,9 +2,9 @@ import { clsx } from "../../core/clsx.js";
 import tabs_module_default from "./tabs.module.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/tabs/tabs-viewport.tsx
-var TabsViewport = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", {
+var TabsViewport = ({ children, className, ...otherProps }) => /* @__PURE__ */ jsx("div", {
 	className: clsx(tabs_module_default.Viewport, className),
-	...props,
+	...otherProps,
 	children
 });
 //#endregion

package/dist/components/tabs/tabs.css

@@ -1 +1 @@
-.viraui__tabs-module__Tabs_AwbZZ{--tabs-translate-amount:10px;min-block-size:10rem}.viraui__tabs-module__Viewport_15X1I{display:grid;grid-template-columns:minmax(0,1fr);inline-size:100%}.viraui__tabs-module__List_XJorr{position:relative;overflow-x:auto}.viraui__tabs-module__Indicator_UyNUn{position:absolute;pointer-events:none;inset-block-start:var(--active-tab-top);inset-inline-start:var(--active-tab-left);inline-size:var(--active-tab-width);block-size:var(--active-tab-height);transition:inset-inline-start var(--duration-fast) var(--easing-standard),inset-block-start var(--duration-fast) var(--easing-standard),inline-size var(--duration-fast) var(--easing-standard),block-size var(--duration-fast) var(--easing-standard)}.viraui__tabs-module__Item_XZ86Z{position:relative;flex-shrink:0;cursor:pointer;flex-basis:0;transition:none;will-change:auto;&[data-variant]:not(:disabled):active{translate:0 0}&:hover,&[data-disabled]{background:transparent}&[data-disabled]{opacity:.5}&[data-active]{color:var(--global-foreground)}&:focus-visible{border-radius:var(--radius-small);outline-offset:0}}.viraui__tabs-module__Item_XZ86Z[data-active] .viraui__tabs-module__Label_5-8-Y{color:var(--global-foreground)}.viraui__tabs-module__Panel_vkCFI{grid-area:1/1;inline-size:100%;opacity:1;translate:0 0;transition:opacity var(--duration-fast) var(--easing-entrance),translate var(--duration-fast) var(--easing-entrance);&[data-ending-style]{pointer-events:none}&[data-ending-style],&[data-starting-style]{opacity:0}&[data-activation-direction=right][data-starting-style]{translate:var(--tabs-translate-amount) 0}&[data-activation-direction=left][data-starting-style],&[data-activation-direction=right][data-ending-style]{translate:calc(var(--tabs-translate-amount) * -1) 0}&[data-activation-direction=left][data-ending-style]{translate:var(--tabs-translate-amount) 0}&[data-activation-direction=none][data-ending-style],&[data-activation-direction=none][data-starting-style]{translate:0 var(--tabs-translate-amount)}&[hidden]{display:none}@media (prefers-reduced-motion:reduce){transition:none;&[data-ending-style],&[data-starting-style]{opacity:1;translate:0 0}}}
+.viraui__tabs-module__Tabs_AwbZZ{--vui-tabs-translate-amount:10px;min-block-size:10rem}.viraui__tabs-module__Viewport_15X1I{display:grid;grid-template-columns:minmax(0,1fr);inline-size:100%}.viraui__tabs-module__List_XJorr{position:relative;overflow-x:auto}.viraui__tabs-module__Indicator_UyNUn{position:absolute;pointer-events:none;inset-block-start:var(--active-tab-top);inset-inline-start:var(--active-tab-left);inline-size:var(--active-tab-width);block-size:var(--active-tab-height);transition:inset-inline-start var(--duration-fast) var(--easing-standard),inset-block-start var(--duration-fast) var(--easing-standard),inline-size var(--duration-fast) var(--easing-standard),block-size var(--duration-fast) var(--easing-standard)}.viraui__tabs-module__Item_XZ86Z{position:relative;flex-shrink:0;cursor:pointer;flex-basis:0;transition:none;will-change:auto;&[data-variant]:not(:disabled):active{translate:0 0}&:hover{background:#0000}&[data-disabled]{opacity:.5;background:#0000}&[data-active]{color:var(--global-foreground)}&:focus-visible{border-radius:var(--radius-small);outline-offset:0}}.viraui__tabs-module__Item_XZ86Z[data-active] .viraui__tabs-module__Label_5-8-Y{color:var(--global-foreground)}.viraui__tabs-module__Panel_vkCFI{grid-area:1/1;inline-size:100%;opacity:1;translate:0 0;transition:opacity var(--duration-fast) var(--easing-entrance),translate var(--duration-fast) var(--easing-entrance);&[data-ending-style]{pointer-events:none}&[data-ending-style],&[data-starting-style]{opacity:0}&[data-activation-direction=right][data-starting-style]{translate:var(--vui-tabs-translate-amount) 0}&[data-activation-direction=left][data-starting-style],&[data-activation-direction=right][data-ending-style]{translate:calc(var(--vui-tabs-translate-amount) * -1) 0}&[data-activation-direction=left][data-ending-style]{translate:var(--vui-tabs-translate-amount) 0}&[data-activation-direction=none][data-ending-style],&[data-activation-direction=none][data-starting-style]{translate:0 var(--vui-tabs-translate-amount)}&[hidden]{display:none}@media (prefers-reduced-motion:reduce){transition:none;&[data-ending-style],&[data-starting-style]{opacity:1;translate:0 0}}}

package/dist/components/tabs/tabs.guide.json

@@ -19,5 +19,12 @@
     "Using addons as the only visible label for a tab",
     "Trying to compose a separate public `Tabs.Indicator`; the indicator is owned by `Tabs.List`"
   ],
-  "related": ["Surface", "Stack", "Text"]
+  "related": ["Surface", "Stack", "Text"],
+  "properties": {
+    "css": {
+      "translate-amount": {
+        "description": "Panel entry translate distance for tab transitions."
+      }
+    }
+  }
 }

package/dist/components/tabs/tabs.js

@@ -10,14 +10,14 @@ import { jsx } from "react/jsx-runtime";
 import "react";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/tabs/tabs.tsx
-var TabsRootComponent = ({ children, className, listAlignment = "start", ...props }) => /* @__PURE__ */ jsx(Tabs.Root, {
+var TabsRootComponent = ({ children, className, listAlignment = "start", ...otherProps }) => /* @__PURE__ */ jsx(Tabs.Root, {
 	render: /* @__PURE__ */ jsx(Stack, {
 		hAlign: listAlignment,
 		vAlign: "start",
 		fillChildren: false,
 		className: clsx(tabs_module_default.Tabs, className)
 	}),
-	...props,
+	...otherProps,
 	children
 });
 var Tabs$1 = Object.assign(TabsRootComponent, {

package/dist/components/text/text.css

@@ -1 +1 @@
-.viraui__text-module__Text_bS8kv{--text-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--text-align:start;--text-max-width:none;--text-white-space:normal;--text-padding-inline-start:0;--text-padding-inline-end:0;--text-padding-block-start:0;--text-padding-block-end:0;--text-font-family:var(--font-family-body);--text-font-size:clamp(var(--font-scale-body-small),var(--text-medium),var(--font-scale-body-medium));--text-font-weight:400;--text-font-width:100;--text-font-opsz:16;--text-line-height:var(--font-leading-standard);margin:0;min-inline-size:0;max-inline-size:var(--text-max-width);font-family:var(--text-font-family);font-size:var(--text-font-size);line-height:var(--text-line-height);text-align:var(--text-align);white-space:var(--text-white-space);word-break:break-word;font-optical-sizing:auto;font-variation-settings:"wght" var(--text-font-weight),"wdth" var(--text-font-width),"opsz" var(--text-font-opsz);text-box:var(--text-trim) var(--text-trim-type);&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--text-padding-block-start) var(--text-padding-inline-end) var(--text-padding-block-end) var(--text-padding-inline-start)}&[data-text-family=mono]{--text-font-family:var(--font-family-mono)}&[data-text-size=x-large]{--text-font-size:clamp(var(--font-scale-body-large),calc(var(--text-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-body-x-large))}&[data-text-size=large]{--text-font-size:clamp(var(--font-scale-body-medium),calc(var(--text-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-body-large))}&[data-text-size=medium]{--text-font-size:clamp(var(--font-scale-body-small),var(--text-medium),var(--font-scale-body-medium))}&[data-text-size=small]{--text-font-size:clamp(var(--font-scale-body-x-small),calc(var(--text-medium) * pow(var(--font-heading-typescale), -0.1)),var(--font-scale-body-small))}&[data-text-size=x-small]{--text-font-size:var(--font-scale-body-x-small)}&[data-text-weight=light]{--text-font-weight:200}&[data-text-weight=semibold]{--text-font-weight:600}&[data-text-weight=bold]{--text-font-weight:800}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--text-literal-color)}&[data-text-line-height=none]{--text-line-height:0}&[data-text-line-height=x-small]{--text-line-height:var(--font-leading-x-small)}&[data-text-line-height=small]{--text-line-height:var(--font-leading-small)}&[data-text-line-height=large]{--text-line-height:var(--font-leading-large)}}
+.viraui__text-module__Text_bS8kv{--text-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--vui-text-align:start;--vui-text-max-width:none;--vui-text-white-space:normal;--vui-text-padding-inline-start:0;--vui-text-padding-inline-end:0;--vui-text-padding-block-start:0;--vui-text-padding-block-end:0;--vui-text-font-family:var(--font-family-body);--vui-text-font-size:clamp(var(--font-scale-body-small),var(--text-medium),var(--font-scale-body-medium));--vui-text-font-weight:400;--vui-text-font-width:100;--vui-text-font-opsz:16;--vui-text-line-height:var(--font-leading-standard);margin:0;min-inline-size:0;max-inline-size:var(--vui-text-max-width);font-family:var(--vui-text-font-family);font-size:var(--vui-text-font-size);line-height:var(--vui-text-line-height);text-align:var(--vui-text-align);white-space:var(--vui-text-white-space);word-break:break-word;font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-text-font-weight),"wdth" var(--vui-text-font-width),"opsz" var(--vui-text-font-opsz);text-box:var(--vui-text-trim) var(--vui-text-trim-type);&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--vui-text-padding-block-start) var(--vui-text-padding-inline-end) var(--vui-text-padding-block-end) var(--vui-text-padding-inline-start)}&[data-text-family=mono]{--vui-text-font-family:var(--font-family-mono)}&[data-text-size=x-large]{--vui-text-font-size:clamp(var(--font-scale-body-large),calc(var(--text-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-body-x-large))}&[data-text-size=large]{--vui-text-font-size:clamp(var(--font-scale-body-medium),calc(var(--text-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-body-large))}&[data-text-size=medium]{--vui-text-font-size:clamp(var(--font-scale-body-small),var(--text-medium),var(--font-scale-body-medium))}&[data-text-size=small]{--vui-text-font-size:clamp(var(--font-scale-body-x-small),calc(var(--text-medium) * pow(var(--font-heading-typescale), -0.1)),var(--font-scale-body-small))}&[data-text-size=x-small]{--vui-text-font-size:var(--font-scale-body-x-small)}&[data-text-weight=light]{--vui-text-font-weight:200}&[data-text-weight=semibold]{--vui-text-font-weight:600}&[data-text-weight=bold]{--vui-text-font-weight:800}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--vui-text-literal-color)}&[data-text-line-height=none]{--vui-text-line-height:0}&[data-text-line-height=x-small]{--vui-text-line-height:var(--font-leading-x-small)}&[data-text-line-height=small]{--vui-text-line-height:var(--font-leading-small)}&[data-text-line-height=large]{--vui-text-line-height:var(--font-leading-large)}}

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

@@ -16,5 +16,129 @@
     "Choose render when the copy must live on a specific inline or block element"
   ],
   "antiPatterns": ["Using Text for headings instead of Title"],
-  "related": ["Title", "ClampText"]
+  "related": ["Title", "ClampText"],
+  "properties": {
+    "react": {
+      "align": {
+        "description": "Aligns text using logical alignment values.",
+        "refCss": "align"
+      },
+      "maxWidth": {
+        "description": "Constrains the maximum inline size of the rendered text block.",
+        "refCss": "max-width"
+      },
+      "color": {
+        "description": "Applies a literal color escape hatch when semantic tone is not used.",
+        "refCss": "literal-color"
+      },
+      "whiteSpace": {
+        "description": "Controls white-space preservation and wrapping behavior.",
+        "refCss": "white-space"
+      },
+      "weight": {
+        "description": "Numeric variable-font weight override.",
+        "refCss": "font-weight"
+      },
+      "fontWidth": {
+        "description": "Variable-font width axis override.",
+        "refCss": "font-width"
+      },
+      "opticalSize": {
+        "description": "Variable-font optical size axis override.",
+        "refCss": "font-opsz"
+      },
+      "trim": {
+        "description": "Trims text box whitespace at the chosen edge.",
+        "refCss": "trim"
+      },
+      "trimType": {
+        "description": "Selects the text-box trim basis when trim is active.",
+        "refCss": "trim-type"
+      },
+      "hPadding": {
+        "description": "Sets inline padding using one token or a [start, end] tuple."
+      },
+      "vPadding": {
+        "description": "Sets block padding using one token or a [start, end] tuple."
+      },
+      "size": {
+        "description": "Selects a semantic body typography size from the active theme scale.",
+        "refCss": "font-size"
+      },
+      "family": {
+        "description": "Selects the semantic font family for body copy.",
+        "refCss": "font-family"
+      },
+      "lineHeight": {
+        "description": "Controls line height through foundation leading tokens.",
+        "refCss": "line-height"
+      }
+    },
+    "css": {
+      "align": {
+        "description": "Text alignment on the root.",
+        "refReact": "align"
+      },
+      "max-width": {
+        "description": "Max inline size of the text root.",
+        "refReact": "maxWidth"
+      },
+      "literal-color": {
+        "description": "Literal color override on the root.",
+        "refReact": "color"
+      },
+      "white-space": {
+        "description": "White-space behavior on the root.",
+        "refReact": "whiteSpace"
+      },
+      "font-weight": {
+        "description": "Font weight on the root.",
+        "refReact": "weight"
+      },
+      "font-width": {
+        "description": "Font width axis on the root.",
+        "refReact": "fontWidth"
+      },
+      "font-opsz": {
+        "description": "Font optical size axis on the root.",
+        "refReact": "opticalSize"
+      },
+      "trim": {
+        "description": "Text-box trim mode on the root.",
+        "refReact": "trim"
+      },
+      "trim-type": {
+        "description": "Text-box trim basis on the root.",
+        "refReact": "trimType"
+      },
+      "padding-inline-start": {
+        "description": "Inline-start padding when padding is enabled.",
+        "refReact": "hPadding"
+      },
+      "padding-inline-end": {
+        "description": "Inline-end padding when padding is enabled.",
+        "refReact": "hPadding"
+      },
+      "padding-block-start": {
+        "description": "Block-start padding when padding is enabled.",
+        "refReact": "vPadding"
+      },
+      "padding-block-end": {
+        "description": "Block-end padding when padding is enabled.",
+        "refReact": "vPadding"
+      },
+      "font-size": {
+        "description": "Body font size; size prop presets via data attributes.",
+        "refReact": "size"
+      },
+      "font-family": {
+        "description": "Font family; family prop presets via data attributes.",
+        "refReact": "family"
+      },
+      "line-height": {
+        "description": "Line height; lineHeight prop presets via data attributes.",
+        "refReact": "lineHeight"
+      }
+    }
+  }
 }

package/dist/components/text/text.js

@@ -9,17 +9,17 @@ var Text = ({ align = "start", balanced = false, selection = true, className, co
 	const hasPadding = Boolean(hPadding || vPadding);
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
-		"--text-align": align,
-		"--text-max-width": maxWidth ?? "none",
-		"--text-literal-color": color,
-		"--text-white-space": whiteSpace,
-		"--text-trim": trim ? `trim-${trim}` : "initial",
-		"--text-trim-type": trim ? trimType : "initial",
-		...typeof weight === "number" ? { "--text-font-weight": weight } : {},
-		"--text-font-width": fontWidth,
-		"--text-font-opsz": opticalSize,
-		...resolveAxisPadding(hPadding, "--text-padding-inline-start", "--text-padding-inline-end"),
-		...resolveAxisPadding(vPadding, "--text-padding-block-start", "--text-padding-block-end"),
+		"--vui-text-align": align,
+		"--vui-text-max-width": maxWidth ?? "none",
+		"--vui-text-literal-color": color,
+		"--vui-text-white-space": whiteSpace,
+		"--vui-text-trim": trim ? `trim-${trim}` : "initial",
+		"--vui-text-trim-type": trim ? trimType : "initial",
+		...typeof weight === "number" && { "--vui-text-font-weight": weight },
+		"--vui-text-font-width": fontWidth,
+		"--vui-text-font-opsz": opticalSize,
+		...resolveAxisPadding(hPadding, "--vui-text-padding-inline-start", "--vui-text-padding-inline-end"),
+		...resolveAxisPadding(vPadding, "--vui-text-padding-block-start", "--vui-text-padding-block-end"),
 		...style
 	};
 	return useRender({

package/dist/components/textarea/textarea.css

@@ -1 +1 @@
-.viraui__textarea-module__Textarea_mtOUG{--textarea-min-block-size:calc(var(--space-x-large) * 2);--textarea-padding-block:var(--space-small);--textarea-input-border-radius:var(--radius-small);--field-label-padding-inline:calc(var(--textarea-input-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textarea-module__Label_5dOso:after{content:" ＊";color:var(--highlight-red)}}.viraui__textarea-module__CustomBasicInput_Ce7yA{--basic-input-border-radius:var(--textarea-input-border-radius);border:1px solid var(--global-contrast);min-block-size:var(--textarea-min-block-size);padding-block:var(--textarea-padding-block);line-height:1.4;resize:none;&[data-resize=vertical]{resize:vertical}&[data-resize=both]{resize:both}&[data-invalid]{border-color:var(--highlight-red)}&:disabled,&[data-disabled]{border-color:transparent}}.viraui__textarea-module__Description_er3zI{padding-inline:calc(var(--textarea-input-border-radius) / 2)}
+.viraui__textarea-module__Textarea_mtOUG{--vui-textarea-min-block-size:calc(var(--space-x-large) * 2);--vui-textarea-padding-block:var(--space-small);--vui-textarea-input-border-radius:var(--radius-small);--vui-field-label-padding-inline:calc(var(--vui-textarea-input-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textarea-module__Label_5dOso:after{content:" ＊";color:var(--highlight-red)}}.viraui__textarea-module__CustomBasicInput_Ce7yA{--vui-basic-input-border-radius:var(--vui-textarea-input-border-radius);border:1px solid var(--global-contrast);min-block-size:var(--vui-textarea-min-block-size);padding-block:var(--vui-textarea-padding-block);line-height:1.4;resize:none;&[data-resize=vertical]{resize:vertical}&[data-resize=both]{resize:both}&[data-invalid]{border-color:var(--highlight-red)}&:disabled,&[data-disabled]{border-color:#0000}}.viraui__textarea-module__Description_er3zI{padding-inline:calc(var(--vui-textarea-input-border-radius) / 2)}

package/dist/components/textarea/textarea.guide.json

@@ -18,5 +18,18 @@
     "Prefer resize modes that do not hide required content from keyboard users"
   ],
   "antiPatterns": ["Using Textarea for single-line values", "Expecting unsupported size or variant props"],
-  "related": ["Fieldset", "Textfield", "Text"]
+  "related": ["Fieldset", "Textfield", "Text"],
+  "properties": {
+    "css": {
+      "min-block-size": {
+        "description": "Minimum block size of the textarea field root."
+      },
+      "padding-block": {
+        "description": "Block padding applied through the textarea root."
+      },
+      "input-border-radius": {
+        "description": "Corner radius for the textarea control group."
+      }
+    }
+  }
 }

package/dist/components/textfield/textfield.css

@@ -1 +1 @@
-.viraui__textfield-module__Textfield_o-70A{--input-height:var(--space-x-large);--control-group-background:var(--base-1);--control-group-color:var(--global-foreground);--control-group-border-color:var(--global-contrast);--control-group-border-radius:var(--radius-medium);--field-label-padding-inline:calc(var(--control-group-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textfield-module__Label_5rjr0:after{content:" ＊";color:var(--highlight-red)}}.viraui__textfield-module__ControlGroup_2W-OC{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--input-height);background:var(--control-group-background);border:1px solid var(--control-group-border-color);border-radius:var(--control-group-border-radius);&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:focus-visible),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-invalid]){--control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:disabled),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-disabled]){--control-group-background:var(--global-disabled-background);--control-group-border-color:transparent;box-shadow:none;cursor:not-allowed}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=start])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-start:var(--space-x-small)}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=end])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-end:var(--space-x-small)}}.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;min-inline-size:0;block-size:100%;line-height:1.2;border:none;background:transparent;box-shadow:none;border-radius:inherit;&:focus-visible{outline:none}&:disabled{cursor:not-allowed}}.viraui__textfield-module__Addon_kK1ef{min-inline-size:var(--space-x-large)}.viraui__textfield-module__Description_8Qxot{padding-inline:calc(var(--control-group-border-radius) / 2)}
+.viraui__textfield-module__Textfield_o-70A{--vui-textfield-input-height:var(--space-x-large);--vui-textfield-control-group-background:var(--base-1);--vui-textfield-control-group-color:var(--global-foreground);--vui-textfield-control-group-border-color:var(--global-contrast);--vui-textfield-control-group-border-radius:var(--radius-medium);--vui-field-label-padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textfield-module__Label_5rjr0:after{content:" ＊";color:var(--highlight-red)}}.viraui__textfield-module__ControlGroup_2W-OC{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-textfield-input-height);background:var(--vui-textfield-control-group-background);border:1px solid var(--vui-textfield-control-group-border-color);border-radius:var(--vui-textfield-control-group-border-radius);&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:focus-visible),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-invalid]){--vui-textfield-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:disabled),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-disabled]){--vui-textfield-control-group-background:var(--global-disabled-background);--vui-textfield-control-group-border-color:#0000;box-shadow:none;cursor:not-allowed}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=start])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-start:var(--space-x-small)}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=end])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-end:var(--space-x-small)}}.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;min-inline-size:0;block-size:100%;line-height:1.2;border:none;background:#0000;box-shadow:none;border-radius:inherit;&:focus-visible{outline:none}&:disabled{cursor:not-allowed}}.viraui__textfield-module__Addon_kK1ef{min-inline-size:var(--space-x-large)}.viraui__textfield-module__Description_8Qxot{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}

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

@@ -22,5 +22,24 @@
     "Passing unsupported size or variant props",
     "Expecting a focus ring when focus is only on addon controls"
   ],
-  "related": ["Fieldset", "Textarea", "Select", "Text"]
+  "related": ["Fieldset", "Textarea", "Select", "Text"],
+  "properties": {
+    "css": {
+      "input-height": {
+        "description": "Textfield control group block size."
+      },
+      "control-group-background": {
+        "description": "Textfield control group background."
+      },
+      "control-group-color": {
+        "description": "Textfield control group foreground color."
+      },
+      "control-group-border-color": {
+        "description": "Textfield control group border color."
+      },
+      "control-group-border-radius": {
+        "description": "Textfield control group corner radius."
+      }
+    }
+  }
 }

package/dist/components/title/title.css

@@ -1 +1 @@
-.viraui__title-module__Title_CXMUX{--title-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1));--title-font-family:var(--font-family-heading);--title-font-weight:500;--title-font-width:100;--title-font-opsz:16;--title-line-height:var(--font-leading-standard);--title-letter-spacing:-0.03em;--title-align:start;--title-max-width:none;--title-white-space:normal;--title-padding-inline-start:0;--title-padding-inline-end:0;--title-padding-block-start:0;--title-padding-block-end:0;margin:0;max-inline-size:var(--title-max-width);font-family:var(--title-font-family);font-size:var(--title-font-size);line-height:var(--title-line-height);letter-spacing:var(--title-letter-spacing);text-align:var(--title-align);white-space:var(--title-white-space);word-break:break-word;font-optical-sizing:auto;font-variation-settings:"wght" var(--title-font-weight),"wdth" var(--title-font-width),"opsz" var(--title-font-opsz);text-box:var(--title-trim) var(--title-trim-type);display:inline-flex;&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--title-padding-block-start) var(--title-padding-inline-end) var(--title-padding-block-end) var(--title-padding-inline-start)}&[data-title-level=display]{--title-font-size:clamp(var(--font-scale-h1),calc(var(--font-scale-h1) + 4.643cqi - 0.9286rem),var(--font-scale-display))}&[data-title-level=h1]{--title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1))}&[data-title-level=h2]{--title-font-size:clamp(var(--font-scale-h3),calc(var(--title-medium) * pow(var(--font-heading-typescale), 4)),var(--font-scale-h2))}&[data-title-level=h3]{--title-font-size:clamp(var(--font-scale-h4),calc(var(--title-medium) * pow(var(--font-heading-typescale), 3)),var(--font-scale-h3))}&[data-title-level=h4]{--title-font-size:clamp(var(--font-scale-h5),calc(var(--title-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-h4))}&[data-title-level=h5]{--title-font-size:clamp(var(--font-scale-h6),calc(var(--title-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-h5));--title-letter-spacing:-0.02em}&[data-title-level=h6]{--title-font-size:clamp(var(--font-scale-body-medium),var(--title-medium),var(--font-scale-h6));--title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--title-literal-color)}&[data-title-line-height=none]{--title-line-height:0}&[data-title-line-height=x-small]{--title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--title-line-height:var(--font-leading-large)}}
+.viraui__title-module__Title_CXMUX{--title-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--vui-title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1));--vui-title-font-family:var(--font-family-heading);--vui-title-font-weight:500;--vui-title-font-width:100;--vui-title-font-opsz:16;--vui-title-line-height:var(--font-leading-standard);--vui-title-letter-spacing:-0.03em;--vui-title-align:start;--vui-title-max-width:none;--vui-title-white-space:normal;--vui-title-padding-inline-start:0;--vui-title-padding-inline-end:0;--vui-title-padding-block-start:0;--vui-title-padding-block-end:0;margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--vui-title-letter-spacing);text-align:var(--vui-title-align);white-space:var(--vui-title-white-space);word-break:break-word;font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-title-font-weight),"wdth" var(--vui-title-font-width),"opsz" var(--vui-title-font-opsz);text-box:var(--vui-title-trim) var(--vui-title-trim-type);display:inline-flex;&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--vui-title-padding-block-start) var(--vui-title-padding-inline-end) var(--vui-title-padding-block-end) var(--vui-title-padding-inline-start)}&[data-title-level=display]{--vui-title-font-size:clamp(var(--font-scale-h1),calc(var(--font-scale-h1) + 4.643cqi - 0.9286rem),var(--font-scale-display))}&[data-title-level=h1]{--vui-title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1))}&[data-title-level=h2]{--vui-title-font-size:clamp(var(--font-scale-h3),calc(var(--title-medium) * pow(var(--font-heading-typescale), 4)),var(--font-scale-h2))}&[data-title-level=h3]{--vui-title-font-size:clamp(var(--font-scale-h4),calc(var(--title-medium) * pow(var(--font-heading-typescale), 3)),var(--font-scale-h3))}&[data-title-level=h4]{--vui-title-font-size:clamp(var(--font-scale-h5),calc(var(--title-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-h4))}&[data-title-level=h5]{--vui-title-font-size:clamp(var(--font-scale-h6),calc(var(--title-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-h5));--vui-title-letter-spacing:-0.02em}&[data-title-level=h6]{--vui-title-font-size:clamp(var(--font-scale-body-medium),var(--title-medium),var(--font-scale-h6));--vui-title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--vui-title-literal-color)}&[data-title-line-height=none]{--vui-title-line-height:0}&[data-title-line-height=x-small]{--vui-title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--vui-title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--vui-title-line-height:var(--font-leading-large)}}

package/dist/components/title/title.guide.json

@@ -19,5 +19,127 @@
     "Letting level force the HTML tag instead of choosing render explicitly",
     "Using Title for long body paragraphs"
   ],
-  "related": ["Text", "ClampText"]
+  "related": ["Text", "ClampText"],
+  "properties": {
+    "react": {
+      "align": {
+        "description": "Aligns text using logical alignment values.",
+        "refCss": "align"
+      },
+      "maxWidth": {
+        "description": "Constrains the maximum inline size of the rendered title block.",
+        "refCss": "max-width"
+      },
+      "color": {
+        "description": "Applies a literal color escape hatch when semantic tone is not used.",
+        "refCss": "literal-color"
+      },
+      "whiteSpace": {
+        "description": "Controls white-space preservation and wrapping behavior.",
+        "refCss": "white-space"
+      },
+      "weight": {
+        "description": "Numeric variable-font weight override.",
+        "refCss": "font-weight"
+      },
+      "fontWidth": {
+        "description": "Variable-font width axis override.",
+        "refCss": "font-width"
+      },
+      "opticalSize": {
+        "description": "Variable-font optical size axis override.",
+        "refCss": "font-opsz"
+      },
+      "trim": {
+        "description": "Trims text box whitespace at the chosen edge.",
+        "refCss": "trim"
+      },
+      "trimType": {
+        "description": "Selects the text-box trim basis when trim is active.",
+        "refCss": "trim-type"
+      },
+      "hPadding": {
+        "description": "Sets inline padding using one token or a [start, end] tuple."
+      },
+      "vPadding": {
+        "description": "Sets block padding using one token or a [start, end] tuple."
+      },
+      "level": {
+        "description": "Selects the visual heading preset; does not change semantic heading level.",
+        "refCss": "font-size"
+      },
+      "lineHeight": {
+        "description": "Controls line height through foundation leading tokens.",
+        "refCss": "line-height"
+      }
+    },
+    "css": {
+      "align": {
+        "description": "Title alignment on the root.",
+        "refReact": "align"
+      },
+      "max-width": {
+        "description": "Max inline size of the title root.",
+        "refReact": "maxWidth"
+      },
+      "literal-color": {
+        "description": "Literal color override on the root.",
+        "refReact": "color"
+      },
+      "white-space": {
+        "description": "White-space behavior on the root.",
+        "refReact": "whiteSpace"
+      },
+      "font-weight": {
+        "description": "Font weight on the root.",
+        "refReact": "weight"
+      },
+      "font-width": {
+        "description": "Font width axis on the root.",
+        "refReact": "fontWidth"
+      },
+      "font-opsz": {
+        "description": "Font optical size axis on the root.",
+        "refReact": "opticalSize"
+      },
+      "trim": {
+        "description": "Text-box trim mode on the root.",
+        "refReact": "trim"
+      },
+      "trim-type": {
+        "description": "Text-box trim basis on the root.",
+        "refReact": "trimType"
+      },
+      "padding-inline-start": {
+        "description": "Inline-start padding when padding is enabled.",
+        "refReact": "hPadding"
+      },
+      "padding-inline-end": {
+        "description": "Inline-end padding when padding is enabled.",
+        "refReact": "hPadding"
+      },
+      "padding-block-start": {
+        "description": "Block-start padding when padding is enabled.",
+        "refReact": "vPadding"
+      },
+      "padding-block-end": {
+        "description": "Block-end padding when padding is enabled.",
+        "refReact": "vPadding"
+      },
+      "font-size": {
+        "description": "Heading font size; level prop presets via data attributes.",
+        "refReact": "level"
+      },
+      "line-height": {
+        "description": "Line height; lineHeight prop presets via data attributes.",
+        "refReact": "lineHeight"
+      },
+      "letter-spacing": {
+        "description": "Heading letter spacing; level presets adjust this."
+      },
+      "font-family": {
+        "description": "Heading font family on the root."
+      }
+    }
+  }
 }

package/dist/components/title/title.js

@@ -9,17 +9,17 @@ var Title = ({ align = "start", balanced = false, selection = true, className, c
 	const hasPadding = Boolean(hPadding || vPadding);
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
-		"--title-align": align,
-		"--title-max-width": maxWidth ?? "none",
-		"--title-literal-color": color,
-		"--title-white-space": whiteSpace,
-		"--title-trim": trim ? `trim-${trim}` : "initial",
-		"--title-trim-type": trim ? trimType : "initial",
-		...typeof weight === "number" ? { "--title-font-weight": weight } : {},
-		"--title-font-width": fontWidth,
-		"--title-font-opsz": opticalSize,
-		...resolveAxisPadding(hPadding, "--title-padding-inline-start", "--title-padding-inline-end"),
-		...resolveAxisPadding(vPadding, "--title-padding-block-start", "--title-padding-block-end"),
+		"--vui-title-align": align,
+		"--vui-title-max-width": maxWidth ?? "none",
+		"--vui-title-literal-color": color,
+		"--vui-title-white-space": whiteSpace,
+		"--vui-title-trim": trim ? `trim-${trim}` : "initial",
+		"--vui-title-trim-type": trim ? trimType : "initial",
+		...typeof weight === "number" && { "--vui-title-font-weight": weight },
+		"--vui-title-font-width": fontWidth,
+		"--vui-title-font-opsz": opticalSize,
+		...resolveAxisPadding(hPadding, "--vui-title-padding-inline-start", "--vui-title-padding-inline-end"),
+		...resolveAxisPadding(vPadding, "--vui-title-padding-block-start", "--vui-title-padding-block-end"),
 		...style
 	};
 	return useRender({

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

@@ -0,0 +1,2 @@
+export { Toast } from './toast';
+export type { ToastActionProps, ToastBannerProps, ToastObject, ToastViewportProps } from './toast';

package/dist/components/toast/toast-action.d.ts

@@ -0,0 +1,9 @@
+import { ToastAction as ToastActionNamespace } from '@base-ui/react/toast';
+import type * as React from 'react';
+/**
+ * Public Toast.Action props.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type ToastActionProps = ToastActionNamespace.Props;
+export declare const ToastAction: React.FC<ToastActionProps>;

package/dist/components/toast/toast-action.js

@@ -0,0 +1,10 @@
+import { Button } from "../button/button.js";
+import { jsx } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/toast/toast-action.tsx
+var ToastAction = ({ render, ...otherProps }) => /* @__PURE__ */ jsx(Toast.Action, {
+	render: render ?? /* @__PURE__ */ jsx(Button, { variant: "secondary" }),
+	...otherProps
+});
+//#endregion
+export { ToastAction };