@viraui/react 2026.6.5 → 2026.7.0-next.0

package/dist/components/otp-field/otp-field.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{.viraui__otp-field-module__OTPField_8UOfz{--vui-textfield-input-height:var(--space-2xl);--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-m);--vui-field-label-padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2);max-block-size:min-content;&[data-fullwidth=true]{inline-size:100%}&:has([required]) .viraui__otp-field-module__Label_7eZGm:after{content:" ＊";color:var(--highlight-red)}&[data-invalid][data-dirty] .viraui__otp-field-module__SlotCluster_nJxZ4:not(.viraui__otp-field-module__WiggleA_5-MVD,.viraui__otp-field-module__WiggleB_pfeA5){animation:viraui__otp-field-module__OTPFieldWiggleA_gLGT0 var(--duration-normal) var(--easing-wiggle)}}.viraui__otp-field-module__SlotCluster_nJxZ4{&.viraui__otp-field-module__WiggleA_5-MVD{animation:viraui__otp-field-module__OTPFieldWiggleA_gLGT0 var(--duration-normal) var(--easing-wiggle)}&.viraui__otp-field-module__WiggleB_pfeA5{animation:viraui__otp-field-module__OTPFieldWiggleB_0IC0k var(--duration-normal) var(--easing-wiggle)}@media (prefers-reduced-motion:reduce){animation:none}}@keyframes viraui__otp-field-module__OTPFieldWiggleA_gLGT0{0%{translate:var(--space-s)}to{translate:0}}@keyframes viraui__otp-field-module__OTPFieldWiggleB_0IC0k{0%{translate:var(--space-s)}to{translate:0}}.viraui__otp-field-module__Description_pYBbZ{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}}@layer viraui.overrides{.viraui__otp-field-module__Slot_G3aie{text-align:center;padding-inline:0;aspect-ratio:1;&:focus::placeholder{color:#0000}}}

package/dist/components/otp-field/otp-field.d.ts

@@ -0,0 +1,49 @@
+import { FieldRoot } from '@base-ui/react/field';
+import { OTPFieldRoot as PrimitiveOTPFieldRoot } from '@base-ui/react/otp-field';
+import { OTPFieldInputProps } from './otp-field-input';
+import { OTPFieldSeparatorProps } from './otp-field-separator';
+import * as React from 'react';
+/**
+ * Public OTPField root props.
+ *
+ * Field chrome plus Base UI OTP Root. `length` is required and does not spawn Inputs —
+ * list exactly that many `OTPField.Input` children. `render` replaces the OTP primitive
+ * root (slot cluster), not the Field wrapper.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type OTPFieldRootProps = PrimitiveOTPFieldRoot.Props & Omit<FieldRoot.Props, 'ref' | 'render'> & {
+    /**
+     * Visible label rendered with shared internal `FieldLabel`. Names the first slot.
+     *
+     * @defaultValue No label is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Helper copy rendered with `Field.Description` and `Text` while the field is valid.
+     *
+     * @defaultValue No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Error copy rendered with `Field.Error` and `Text` in the same slot as `description`.
+     * Replaces description while the field is invalid and dirty.
+     *
+     * @defaultValue No static error copy is rendered.
+     */
+    error?: React.ReactNode;
+    /**
+     * When `true`, the field is `inline-size: 100%` and the inner slot Stack uses
+     * `fullWidth` + `expandChildren` so slots grow equally.
+     *
+     * @defaultValue false
+     */
+    fullWidth?: boolean;
+};
+type OTPFieldComponent = React.FC<OTPFieldRootProps> & {
+    Root: React.FC<OTPFieldRootProps>;
+    Input: React.FC<OTPFieldInputProps>;
+    Separator: React.FC<OTPFieldSeparatorProps>;
+};
+export declare const OTPField: OTPFieldComponent;
+export {};

package/dist/components/otp-field/otp-field.js

@@ -0,0 +1,79 @@
+"use client";
+import './otp-field.css';
+import { clsx } from "../../core/clsx.js";
+import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
+import { FieldLabel } from "../basic-input/field-label.js";
+import { Stack } from "../stack/stack.js";
+import otp_field_module_default from "./otp-field.module.js";
+import { OTPFieldInput } from "./otp-field-input.js";
+import { OTPFieldSeparator } from "./otp-field-separator.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import * as React from "react";
+import { OTPField } from "@base-ui/react/otp-field";
+//#region src/components/otp-field/otp-field.tsx
+var OTPFieldRoot = ({ children, className, description, dirty, disabled, error, fullWidth = false, invalid, label, name, onValueComplete, onValueInvalid, ref, render, touched, validate, validationDebounceTime, validationMode, ...otpRootProps }) => {
+	const [wigglePass, setWigglePass] = React.useState();
+	const bumpWiggle = () => {
+		setWigglePass((current) => current === "a" ? "b" : "a");
+	};
+	const handleValueInvalid = (value, eventDetails) => {
+		bumpWiggle();
+		onValueInvalid?.(value, eventDetails);
+	};
+	const handleValueComplete = (value, eventDetails) => {
+		if (invalid) bumpWiggle();
+		onValueComplete?.(value, eventDetails);
+	};
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		className: clsx(otp_field_module_default.OTPField, className),
+		"data-fullwidth": fullWidth,
+		dirty,
+		disabled,
+		invalid,
+		name,
+		ref,
+		render: /* @__PURE__ */ jsx(Stack, {
+			expandChildren: true,
+			rowGap: "s"
+		}),
+		touched,
+		validate,
+		validationDebounceTime,
+		validationMode,
+		children: [
+			label && /* @__PURE__ */ jsx(Field.Label, {
+				className: otp_field_module_default.Label,
+				children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
+			}),
+			/* @__PURE__ */ jsx(OTPField.Root, {
+				...otpRootProps,
+				className: clsx(otp_field_module_default.SlotCluster, wigglePass === "a" && otp_field_module_default.WiggleA, wigglePass === "b" && otp_field_module_default.WiggleB),
+				disabled,
+				name,
+				onValueComplete: handleValueComplete,
+				onValueInvalid: handleValueInvalid,
+				render: render ?? /* @__PURE__ */ jsx(Stack, {
+					columnGap: "s",
+					direction: "row",
+					expandChildren: fullWidth,
+					fullWidth,
+					vAlign: "center"
+				}),
+				children
+			}),
+			/* @__PURE__ */ jsx(FieldHelperCopy, {
+				className: otp_field_module_default.Description,
+				description,
+				error
+			})
+		]
+	});
+};
+var OTPField$1 = Object.assign(OTPFieldRoot, {
+	Root: OTPFieldRoot,
+	Input: OTPFieldInput,
+	Separator: OTPFieldSeparator
+});
+//#endregion
+export { OTPField$1 as OTPField };

package/dist/components/otp-field/otp-field.module.js

@@ -0,0 +1,23 @@
+//#region src/components/otp-field/otp-field.module.css
+var OTPField = "viraui__otp-field-module__OTPField_8UOfz";
+var OTPFieldWiggleA = "viraui__otp-field-module__OTPFieldWiggleA_gLGT0";
+var Label = "viraui__otp-field-module__Label_7eZGm";
+var SlotCluster = "viraui__otp-field-module__SlotCluster_nJxZ4";
+var WiggleA = "viraui__otp-field-module__WiggleA_5-MVD";
+var WiggleB = "viraui__otp-field-module__WiggleB_pfeA5";
+var OTPFieldWiggleB = "viraui__otp-field-module__OTPFieldWiggleB_0IC0k";
+var Description = "viraui__otp-field-module__Description_pYBbZ";
+var Slot = "viraui__otp-field-module__Slot_G3aie";
+var otp_field_module_default = {
+	OTPField,
+	OTPFieldWiggleA,
+	Label,
+	SlotCluster,
+	WiggleA,
+	WiggleB,
+	OTPFieldWiggleB,
+	Description,
+	Slot
+};
+//#endregion
+export { Description, Label, OTPField, OTPFieldWiggleA, OTPFieldWiggleB, Slot, SlotCluster, WiggleA, WiggleB, otp_field_module_default as default };

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

@@ -0,0 +1,2 @@
+export { Prose } from './prose';
+export type { ProseProps } from './prose';

package/dist/components/prose/prose.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-prose-align{syntax:"*";inherits:false;initial-value:start}@property --vui-prose-gap-blocks{syntax:"<length>";inherits:true;initial-value:2em}@property --vui-prose-gap-heading-start{syntax:"<length>";inherits:true;initial-value:1.3em}@property --vui-prose-gap-heading-end{syntax:"<length>";inherits:true;initial-value:.8em}.viraui__prose-module__Prose_8yO9h{--vui-prose-gap-blocks:2em;--vui-prose-gap-heading-start:1.3em;--vui-prose-gap-heading-end:0.8em;&[data-prose-gap=s]{--vui-prose-gap-blocks:1em;--vui-prose-gap-heading-start:0.7em;--vui-prose-gap-heading-end:0.3em}&[data-prose-gap=m]{--vui-prose-gap-blocks:1.5em;--vui-prose-gap-heading-start:1em;--vui-prose-gap-heading-end:0.6em}&[data-prose-has-align=true]{text-align:var(--vui-prose-align)}}.viraui__prose-module__Prose_8yO9h>:is(h1,h2,h3,h4,h5,h6,hgroup,ul,ol,dd,p,figure,img,pre,table,fieldset,blockquote,picture,div):not(:first-child){margin-block:var(--vui-prose-gap-blocks)}.viraui__prose-module__Prose_8yO9h>:is(h1,h2,h3,h4,h5,h6):not(:last-child)+*{margin-block-start:var(--vui-prose-gap-heading-start)}.viraui__prose-module__Prose_8yO9h>:is(h1,h2,h3,h4,h5,h6){margin-block-end:var(--vui-prose-gap-heading-end);text-box:trim-both cap alphabetic}}

package/dist/components/prose/prose.d.ts

@@ -0,0 +1,40 @@
+import { useRender } from '@base-ui/react/use-render';
+import type * as React from 'react';
+type ProseGap = 's' | 'm' | 'l';
+/**
+ * Public Prose props.
+ *
+ * Grouping wrapper for document blocks. Native `div` attributes pass through.
+ * Replace the root with Base UI `render` (for example `article`). No `as` prop.
+ *
+ * @default Native div pass-through props keep React defaults.
+ */
+export type ProseProps = React.ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Em density for heading-aware vertical rhythm (`s` < `m` < `l`).
+     *
+     * @defaultValue 'l'
+     */
+    gap?: ProseGap;
+    /**
+     * Aligns the region using logical alignment values.
+     * Omit so `text-align` inherits from the parent. Title/Text children that omit `align` inherit this value.
+     *
+     * @default Inherits parent `text-align`.
+     */
+    align?: React.CSSProperties['textAlign'];
+    /**
+     * Replaces the default `div` root using Base UI render semantics.
+     *
+     * @default The prose region renders a `div` root.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Ref forwarded to the rendered prose root element.
+     *
+     * @default No ref is attached.
+     */
+    ref?: React.Ref<HTMLElement>;
+};
+export declare const Prose: React.FC<ProseProps>;
+export {};

package/dist/components/prose/prose.js

@@ -0,0 +1,27 @@
+"use client";
+import './prose.css';
+import { clsx } from "../../core/clsx.js";
+import prose_module_default from "./prose.module.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/prose/prose.tsx
+var Prose = ({ align, className, gap = "l", ref, render, style, ...otherProps }) => {
+	const hasAlign = align !== void 0;
+	const dynamicStyle = {
+		...hasAlign && { "--vui-prose-align": align },
+		...style
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: {
+			...otherProps,
+			"data-prose-gap": gap,
+			"data-prose-has-align": hasAlign ? "true" : "false",
+			className: clsx(prose_module_default.Prose, className),
+			style: dynamicStyle
+		}
+	});
+};
+//#endregion
+export { Prose };

package/dist/components/prose/prose.module.js

@@ -0,0 +1,5 @@
+//#region src/components/prose/prose.module.css
+var Prose = "viraui__prose-module__Prose_8yO9h";
+var prose_module_default = { Prose };
+//#endregion
+export { Prose, prose_module_default as default };

package/dist/components/select/select.js

@@ -6,8 +6,8 @@ import { Text } from "../text/text.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
 import { Stack } from "../stack/stack.js";
-import { Elevator } from "../elevator/elevator.js";
 import { Surface } from "../surface/surface.js";
+import { Elevator } from "../elevator/elevator.js";
 import { IconButton } from "../icon-button/icon-button.js";
 import select_module_default from "./select.module.js";
 import { SelectGroup } from "./select-group.js";

package/dist/components/separator/separator.d.ts

@@ -1,4 +1,5 @@
 import { useRender } from '@base-ui/react/use-render';
+import { StackProps } from '../stack';
 import { ThemeTypes } from '@viraui/foundation/vira/types';
 import type * as React from 'react';
 type SeparatorAxisPadding = ThemeTypes['space'] | [ThemeTypes['space'] | 0, ThemeTypes['space'] | 0];
@@ -43,6 +44,12 @@ export type SeparatorProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'childr
      * @default No block padding.
      */
     vPadding?: SeparatorAxisPadding;
+    /**
+     * Caps the Stack wrapper inline size.
+     *
+     * @default No max width constraint.
+     */
+    maxWidth?: StackProps['maxWidth'];
     /**
      * Sets the line thickness preset.
      *

package/dist/components/separator/separator.js

@@ -10,7 +10,7 @@ var separatorSizeValues = {
 	m: 2,
 	l: 3
 };
-var Separator = ({ className, hPadding, orientation = "horizontal", ref, render, size = "s", style, variant = "solid", vPadding, ...otherProps }) => {
+var Separator = ({ className, hPadding, maxWidth, orientation = "horizontal", ref, render, size = "s", style, variant = "solid", vPadding, ...otherProps }) => {
 	const dynamicStyle = {
 		"--vui-separator-size": `${separatorSizeValues[size]}px`,
 		"--vui-separator-border-style": variant,
@@ -30,6 +30,7 @@ var Separator = ({ className, hPadding, orientation = "horizontal", ref, render,
 		...otherProps,
 		direction: orientation === "vertical" ? "row" : "column",
 		hPadding,
+		maxWidth,
 		vAlign: orientation === "vertical" ? "stretch" : "initial",
 		vPadding,
 		children: line

package/dist/components/text/text.css

@@ -2,4 +2,4 @@
     var(--__text-size-min),
     calc(var(--__text-size-min) + (var(--__text-size-max) - var(--__text-size-min)) * var(--__text-fluid)),
     var(--__text-size-max)
-  );--vui-text-font-family:var(--font-family-body);--vui-text-line-height:var(--font-leading-m);margin: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);letter-spacing:var(--vui-text-letter-spacing);text-transform:var(--vui-text-text-transform);white-space:var(--vui-text-white-space);word-break:break-word;font-weight:var(--vui-text-font-weight);font-stretch:calc(var(--vui-text-font-width) * 1%);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="4xl"]{--__text-size-min:var(--font-scale-body-3xl);--__text-size-max:var(--font-scale-body-4xl)}&[data-text-size="3xl"]{--__text-size-min:var(--font-scale-body-2xl);--__text-size-max:var(--font-scale-body-3xl)}&[data-text-size="2xl"]{--__text-size-min:var(--font-scale-body-xl);--__text-size-max:var(--font-scale-body-2xl)}&[data-text-size=xl]{--__text-size-min:var(--font-scale-body-l);--__text-size-max:var(--font-scale-body-xl)}&[data-text-size=l]{--__text-size-min:var(--font-scale-body-m);--__text-size-max:var(--font-scale-body-l)}&[data-text-size=s]{--__text-size-max:var(--font-scale-body-s)}&[data-text-size=s],&[data-text-size=xs]{--__text-size-min:var(--font-scale-body-xs)}&[data-text-size=xs]{--__text-size-max:var(--font-scale-body-xs)}& .viraui__text-module__Text_bS8kv:not([data-text-size]){font-size:inherit}& .viraui__text-module__Text_bS8kv:not([data-text-line-height]){line-height:inherit}&[data-text-fluid=false]{--vui-text-font-size:var(--__text-size-max)}@container root style(--effect-fluid-typography: initial){--vui-text-font-size:var(--__text-size-max)}&[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=primary]{color:var(--global-primary)}&[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=xs]{--vui-text-line-height:var(--font-leading-xs)}&[data-text-line-height=s]{--vui-text-line-height:var(--font-leading-s)}&[data-text-line-height=m]{--vui-text-line-height:var(--font-leading-m)}&[data-text-line-height=l]{--vui-text-line-height:var(--font-leading-l)}}}
+  );--vui-text-font-family:var(--font-family-body);--vui-text-line-height:var(--font-leading-m);margin: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);letter-spacing:var(--vui-text-letter-spacing);text-transform:var(--vui-text-text-transform);white-space:var(--vui-text-white-space);word-break:break-word;font-weight:var(--vui-text-font-weight);font-stretch:calc(var(--vui-text-font-width) * 1%);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-align=true]{text-align:var(--vui-text-align)}&[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="4xl"]{--__text-size-min:var(--font-scale-body-3xl);--__text-size-max:var(--font-scale-body-4xl)}&[data-text-size="3xl"]{--__text-size-min:var(--font-scale-body-2xl);--__text-size-max:var(--font-scale-body-3xl)}&[data-text-size="2xl"]{--__text-size-min:var(--font-scale-body-xl);--__text-size-max:var(--font-scale-body-2xl)}&[data-text-size=xl]{--__text-size-min:var(--font-scale-body-l);--__text-size-max:var(--font-scale-body-xl)}&[data-text-size=l]{--__text-size-min:var(--font-scale-body-m);--__text-size-max:var(--font-scale-body-l)}&[data-text-size=s]{--__text-size-max:var(--font-scale-body-s)}&[data-text-size=s],&[data-text-size=xs]{--__text-size-min:var(--font-scale-body-xs)}&[data-text-size=xs]{--__text-size-max:var(--font-scale-body-xs)}& .viraui__text-module__Text_bS8kv:not([data-text-size]){font-size:inherit}& .viraui__text-module__Text_bS8kv:not([data-text-line-height]){line-height:inherit}&[data-text-fluid=false]{--vui-text-font-size:var(--__text-size-max)}@container root style(--effect-fluid-typography: initial){--vui-text-font-size:var(--__text-size-max)}&[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=primary]{color:var(--global-primary)}&[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=xs]{--vui-text-line-height:var(--font-leading-xs)}&[data-text-line-height=s]{--vui-text-line-height:var(--font-leading-s)}&[data-text-line-height=m]{--vui-text-line-height:var(--font-leading-m)}&[data-text-line-height=l]{--vui-text-line-height:var(--font-leading-l)}}}

package/dist/components/text/text.d.ts

@@ -68,8 +68,9 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
     lineHeight?: 'none' | 'xs' | 's' | 'm' | 'l';
     /**
      * Aligns text using logical alignment values.
+     * Omit so `text-align` inherits from the parent.
      *
-     * @default 'start'
+     * @default Inherits parent `text-align`.
      */
     align?: React.CSSProperties['textAlign'];
     /**

package/dist/components/text/text.js

@@ -4,10 +4,11 @@ import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
 import text_module_default from "./text.module.js";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/text/text.tsx
-var Text = ({ align = "start", balanced = false, selection = true, className, color, family = "body", fluid = false, fontWidth, hPadding, lineHeight, maxWidth, opticalSize, ref, render, size, style, tone, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight = "regular", whiteSpace = "normal", ...otherProps }) => {
+var Text = ({ align, balanced = false, selection = true, className, color, family = "body", fluid = false, fontWidth, hPadding, lineHeight, maxWidth, opticalSize, ref, render, size, style, tone, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight = "regular", whiteSpace = "normal", ...otherProps }) => {
+	const hasAlign = align !== void 0;
 	const hasPadding = Boolean(hPadding || vPadding);
 	const dynamicStyle = {
-		"--vui-text-align": align,
+		...hasAlign && { "--vui-text-align": align },
 		"--vui-text-max-width": maxWidth ?? "none",
 		"--vui-text-literal-color": color,
 		"--vui-text-white-space": whiteSpace,
@@ -36,6 +37,7 @@ var Text = ({ align = "start", balanced = false, selection = true, className, co
 			"data-text-balanced": balanced ? "true" : "false",
 			"data-text-selection": selection ? "true" : "false",
 			"data-text-fluid": fluid ? "true" : "false",
+			"data-text-has-align": hasAlign ? "true" : "false",
 			"data-text-has-padding": hasPadding ? "true" : "false",
 			"data-text-has-literal-color": color ? "true" : "false",
 			className: clsx(text_module_default.Text, className),

package/dist/components/textfield/textfield.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textfield-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textfield-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textfield-module__Textfield_o-70A{--vui-textfield-input-height:var(--space-2xl);--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-m);--vui-field-label-padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2);max-block-size:min-content;&[data-fullwidth=true]{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%;block-size:round(to-zero,var(--vui-textfield-input-height),2px);background:var(--vui-textfield-control-group-background);color:var(--vui-textfield-control-group-color);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][data-dirty]){--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;--vui-textfield-control-group-color:var(--global-disabled-foreground);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-xs)}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=end])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-end:var(--space-xs)}}.viraui__textfield-module__Addon_kK1ef{min-inline-size:var(--space-xl)}.viraui__textfield-module__Description_8Qxot{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}}@layer viraui.overrides{.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;block-size:100%;line-height:1.2;background:#0000;border-radius:inherit;&:not(:-webkit-autofill){box-shadow:none}&:focus-visible{outline:none}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textfield-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textfield-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textfield-module__ControlOnly_22bXm,.viraui__textfield-module__Textfield_o-70A{--vui-textfield-input-height:var(--space-2xl);--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-m)}.viraui__textfield-module__Textfield_o-70A{--vui-field-label-padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2);max-block-size:min-content;&[data-fullwidth=true]{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%;block-size:round(to-zero,var(--vui-textfield-input-height),2px);background:var(--vui-textfield-control-group-background);color:var(--vui-textfield-control-group-color);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),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:focus-visible),&:not(.viraui__textfield-module__ControlOnly_22bXm):has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-invalid][data-dirty]){--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;--vui-textfield-control-group-color:var(--global-disabled-foreground);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-xs)}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=end])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-end:var(--space-xs)}}.viraui__textfield-module__ControlOnly_22bXm{inline-size:max-content;min-inline-size:0}.viraui__textfield-module__Addon_kK1ef{min-inline-size:var(--space-xl)}.viraui__textfield-module__Description_8Qxot{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}}@layer viraui.overrides{.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;block-size:100%;line-height:1.2;background:#0000;border-radius:inherit;&:not(:-webkit-autofill){box-shadow:none}&:focus,&:focus-visible{outline:none}}}

package/dist/components/textfield/textfield.d.ts

@@ -6,22 +6,22 @@ import type * as React from 'react';
  * Public Textfield props.
  *
  * Includes Base UI input props such as `value`, `defaultValue`, `placeholder`, `disabled`,
- * and event handlers, plus optional `label`, `description`, and `error` copy rendered with
- * `Text` inside a `Stack` field layout.
+ * `size`, and event handlers, plus optional `label`, `description`, and `error` copy rendered with
+ * `Text` inside a `Stack` field layout. `controlOnly` skips Field chrome for compose inside another Field.
  *
  * @default Base UI pass-through props keep upstream defaults.
  */
-export type TextfieldProps = PrimitiveInput.Props & FieldRoot.Props & {
+export type TextfieldProps = PrimitiveInput.Props & Omit<FieldRoot.Props, 'render' | keyof PrimitiveInput.Props> & {
     /**
      * Visible label rendered with shared internal `FieldLabel`.
      *
-     * @default No label is rendered.
+     * @defaultValue No label is rendered.
      */
     label?: React.ReactNode;
     /**
      * Helper copy rendered with `Field.Description` and `Text` while the field is valid.
      *
-     * @default No description is rendered.
+     * @defaultValue No description is rendered.
      */
     description?: React.ReactNode;
     /**
@@ -29,34 +29,42 @@ export type TextfieldProps = PrimitiveInput.Props & FieldRoot.Props & {
      * Replaces description while the field is invalid and dirty. Validation messages from `validate`
      * are shown by `Field.Error` even when this prop is omitted.
      *
-     * @default No static error copy is rendered.
+     * @defaultValue No static error copy is rendered.
      */
     error?: React.ReactNode;
     /**
      * Leading decoration (prefix text, icon). Not a second field control.
      *
-     * @default No start addon is rendered.
+     * @defaultValue No start addon is rendered.
      */
     startAddon?: React.ReactNode;
     /**
      * Trailing decoration (icon, button). Buttons must use `type="button"`.
      *
-     * @default No end addon is rendered.
+     * @defaultValue No end addon is rendered.
      */
     endAddon?: React.ReactNode;
     /**
      * When `true`, sets `field-sizing: content` so the control grows inline with its value.
      * Block chrome stays `var(--vui-textfield-input-height)`. Omitted / `false` keeps the browser fixed default.
      *
-     * @default undefined (browser fixed)
+     * @defaultValue undefined (browser fixed)
      */
     fitContent?: BasicInputProps['fitContent'];
     /**
      * When `true`, root and control group take `inline-size: 100%`.
      * Prefer this prop over CSS `width: 100%` / `w-full` on the Textfield root.
      *
-     * @default false
+     * @defaultValue false
      */
     fullWidth?: boolean;
+    /**
+     * When `true`, skip `Field.Root` / label / helper. Control group + input only.
+     * Use inside another Field (OTP slots). Native `size` and `fitContent` still apply.
+     * `label`, `description`, and `error` are ignored.
+     *
+     * @defaultValue false
+     */
+    controlOnly?: boolean;
 };
 export declare const Textfield: React.FC<TextfieldProps>;

package/dist/components/textfield/textfield.js

@@ -10,46 +10,50 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Input } from "@base-ui/react/input";
 //#region src/components/textfield/textfield.tsx
-var Textfield = ({ className, description, dirty, disabled, endAddon, error, fitContent, fullWidth = false, invalid, label, name, ref, startAddon, touched, validate, validationDebounceTime, validationMode, ...inputProps }) => /* @__PURE__ */ jsxs(Field.Root, {
-	className: clsx(textfield_module_default.Textfield, className),
-	dirty,
-	disabled,
-	invalid,
-	name,
-	touched,
-	validate,
-	validationDebounceTime,
-	validationMode,
-	"data-fullwidth": fullWidth,
-	render: /* @__PURE__ */ jsx(Stack, {
-		expandChildren: true,
-		rowGap: "s"
-	}),
-	children: [
-		label && /* @__PURE__ */ jsx(Field.Label, {
-			className: textfield_module_default.Label,
-			children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
+var Textfield = ({ className, controlOnly = false, description, dirty, disabled, endAddon, error, fitContent, fullWidth = false, invalid, label, name, ref, render, startAddon, touched, validate, validationDebounceTime, validationMode, ...inputProps }) => {
+	const control = /* @__PURE__ */ jsx(InputControlGroup, {
+		addonClassName: textfield_module_default.Addon,
+		controlGroupClassName: clsx(textfield_module_default.ControlGroup, controlOnly && textfield_module_default.ControlOnly),
+		endAddon,
+		startAddon,
+		children: /* @__PURE__ */ jsx(BasicInput, {
+			...inputProps,
+			ref,
+			className: clsx(textfield_module_default.CustomBasicInput, controlOnly && className),
+			disabled,
+			fitContent,
+			render: render ?? /* @__PURE__ */ jsx(Input, {})
+		})
+	});
+	if (controlOnly) return control;
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		className: clsx(textfield_module_default.Textfield, className),
+		"data-fullwidth": fullWidth,
+		dirty,
+		disabled,
+		invalid,
+		name,
+		render: /* @__PURE__ */ jsx(Stack, {
+			expandChildren: true,
+			rowGap: "s"
 		}),
-		/* @__PURE__ */ jsx(InputControlGroup, {
-			addonClassName: textfield_module_default.Addon,
-			controlGroupClassName: textfield_module_default.ControlGroup,
-			endAddon,
-			startAddon,
-			children: /* @__PURE__ */ jsx(BasicInput, {
-				...inputProps,
-				ref,
-				className: textfield_module_default.CustomBasicInput,
-				disabled,
-				fitContent,
-				render: /* @__PURE__ */ jsx(Input, {})
+		touched,
+		validate,
+		validationDebounceTime,
+		validationMode,
+		children: [
+			label && /* @__PURE__ */ jsx(Field.Label, {
+				className: textfield_module_default.Label,
+				children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
+			}),
+			control,
+			/* @__PURE__ */ jsx(FieldHelperCopy, {
+				className: textfield_module_default.Description,
+				description,
+				error
 			})
-		}),
-		/* @__PURE__ */ jsx(FieldHelperCopy, {
-			className: textfield_module_default.Description,
-			description,
-			error
-		})
-	]
-});
+		]
+	});
+};
 //#endregion
 export { Textfield };

package/dist/components/textfield/textfield.module.js

@@ -1,5 +1,6 @@
 //#region src/components/textfield/textfield.module.css
 var Textfield = "viraui__textfield-module__Textfield_o-70A";
+var ControlOnly = "viraui__textfield-module__ControlOnly_22bXm";
 var Label = "viraui__textfield-module__Label_5rjr0";
 var ControlGroup = "viraui__textfield-module__ControlGroup_2W-OC";
 var CustomBasicInput = "viraui__textfield-module__CustomBasicInput_oHgtd";
@@ -7,6 +8,7 @@ var Addon = "viraui__textfield-module__Addon_kK1ef";
 var Description = "viraui__textfield-module__Description_8Qxot";
 var textfield_module_default = {
 	Textfield,
+	ControlOnly,
 	Label,
 	ControlGroup,
 	CustomBasicInput,
@@ -14,4 +16,4 @@ var textfield_module_default = {
 	Description
 };
 //#endregion
-export { Addon, ControlGroup, CustomBasicInput, Description, Label, Textfield, textfield_module_default as default };
+export { Addon, ControlGroup, ControlOnly, CustomBasicInput, Description, Label, Textfield, textfield_module_default as default };

package/dist/components/title/title.css

@@ -2,4 +2,4 @@
     var(--__title-size-min),
     calc(var(--__title-size-min) + (var(--__title-size-max) - var(--__title-size-min)) * var(--__title-fluid)),
     var(--__title-size-max)
-  );--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-m);--__title-letter-spacing:-0.03em;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(--__title-letter-spacing);text-transform:var(--vui-title-text-transform);text-align:var(--vui-title-align);white-space:var(--vui-title-white-space);word-break:break-word;font-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);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-has-tracking=true]{letter-spacing:var(--vui-title-letter-spacing)}&[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-size=display]{--__title-size-min:var(--font-scale-h1);--__title-size-max:var(--font-scale-display)}&[data-title-size="2"]{--__title-size-min:var(--font-scale-h3);--__title-size-max:var(--font-scale-h2)}&[data-title-size="3"]{--__title-size-min:var(--font-scale-h4);--__title-size-max:var(--font-scale-h3)}&[data-title-size="4"]{--__title-size-min:var(--font-scale-h5);--__title-size-max:var(--font-scale-h4)}&[data-title-size="5"]{--__title-size-min:var(--font-scale-h6);--__title-size-max:var(--font-scale-h5);--__title-letter-spacing:-0.02em}&[data-title-size="6"]{--__title-size-min:var(--font-scale-body-m);--__title-size-max:var(--font-scale-h6);--__title-letter-spacing:-0.02em}&[data-title-fluid=false]{--vui-title-font-size:var(--__title-size-max)}@container root style(--effect-fluid-typography: initial){--vui-title-font-size:var(--__title-size-max)}&[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=xs]{--vui-title-line-height:var(--font-leading-xs)}&[data-title-line-height=s]{--vui-title-line-height:var(--font-leading-s)}&[data-title-line-height=m]{--vui-title-line-height:var(--font-leading-m)}&[data-title-line-height=l]{--vui-title-line-height:var(--font-leading-l)}}}
+  );--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-m);--__title-letter-spacing:-0.03em;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(--__title-letter-spacing);text-transform:var(--vui-title-text-transform);white-space:var(--vui-title-white-space);word-break:break-word;font-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);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-has-align=true]{text-align:var(--vui-title-align)}&[data-title-has-tracking=true]{letter-spacing:var(--vui-title-letter-spacing)}&[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-size=display]{--__title-size-min:var(--font-scale-h1);--__title-size-max:var(--font-scale-display)}&[data-title-size="2"]{--__title-size-min:var(--font-scale-h3);--__title-size-max:var(--font-scale-h2)}&[data-title-size="3"]{--__title-size-min:var(--font-scale-h4);--__title-size-max:var(--font-scale-h3)}&[data-title-size="4"]{--__title-size-min:var(--font-scale-h5);--__title-size-max:var(--font-scale-h4)}&[data-title-size="5"]{--__title-size-min:var(--font-scale-h6);--__title-size-max:var(--font-scale-h5);--__title-letter-spacing:-0.02em}&[data-title-size="6"]{--__title-size-min:var(--font-scale-body-m);--__title-size-max:var(--font-scale-h6);--__title-letter-spacing:-0.02em}&[data-title-fluid=false]{--vui-title-font-size:var(--__title-size-max)}@container root style(--effect-fluid-typography: initial){--vui-title-font-size:var(--__title-size-max)}&[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=xs]{--vui-title-line-height:var(--font-leading-xs)}&[data-title-line-height=s]{--vui-title-line-height:var(--font-leading-s)}&[data-title-line-height=m]{--vui-title-line-height:var(--font-leading-m)}&[data-title-line-height=l]{--vui-title-line-height:var(--font-leading-l)}}}

package/dist/components/title/title.d.ts

@@ -55,8 +55,9 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
     lineHeight?: 'none' | 'xs' | 's' | 'm' | 'l';
     /**
      * Aligns text using logical alignment values.
+     * Omit so `text-align` inherits from the parent.
      *
-     * @default 'start'
+     * @default Inherits parent `text-align`.
      */
     align?: React.CSSProperties['textAlign'];
     /**

package/dist/components/title/title.js

@@ -4,11 +4,12 @@ import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
 import title_module_default from "./title.module.js";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/title/title.tsx
-var Title = ({ align = "start", balanced = false, selection = true, className, color, fluid = true, fontWidth, hPadding, size = "1", lineHeight = "m", maxWidth, opticalSize, ref, render, style, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", ...otherProps }) => {
+var Title = ({ align, balanced = false, selection = true, className, color, fluid = true, fontWidth, hPadding, size = "1", lineHeight = "m", maxWidth, opticalSize, ref, render, style, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", ...otherProps }) => {
+	const hasAlign = align !== void 0;
 	const hasPadding = Boolean(hPadding || vPadding);
 	const hasTracking = tracking !== void 0;
 	const dynamicStyle = {
-		"--vui-title-align": align,
+		...hasAlign && { "--vui-title-align": align },
 		"--vui-title-max-width": maxWidth ?? "none",
 		"--vui-title-literal-color": color,
 		"--vui-title-white-space": whiteSpace,
@@ -34,6 +35,7 @@ var Title = ({ align = "start", balanced = false, selection = true, className, c
 			"data-title-balanced": balanced ? "true" : "false",
 			"data-title-selection": selection ? "true" : "false",
 			"data-title-fluid": fluid ? "true" : "false",
+			"data-title-has-align": hasAlign ? "true" : "false",
 			"data-title-has-padding": hasPadding ? "true" : "false",
 			"data-title-has-literal-color": color ? "true" : "false",
 			"data-title-has-tracking": hasTracking ? "true" : "false",

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

@@ -1,8 +1,8 @@
 import { clsx } from "../../core/clsx.js";
 import { Text } from "../text/text.js";
 import { Stack } from "../stack/stack.js";
-import { Button } from "../button/button.js";
 import { Surface } from "../surface/surface.js";
+import { Button } from "../button/button.js";
 import toast_module_default from "./toast.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toast } from "@base-ui/react/toast";