@viraui/react 2026.6.5 → 2026.7.0-next.1

package/dist/components/surface/surface.d.ts

@@ -14,70 +14,70 @@ export type SurfaceBorder = 'all' | 'top' | 'right' | 'bottom' | 'left';
  * Includes standard `div` attributes such as `id`, `role`, `title`, and event handlers,
  * plus Vira-owned container styling controls and Base UI `render` support for replacing the root element.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> & {
     /**
      * Replaces the default `div` root using Base UI render semantics.
      *
-     * @default The surface renders a `div` root.
+     * @defaultValue The surface renders a `div` root.
      */
     render?: useRender.RenderProp;
     /**
      * Ref forwarded to the rendered surface root element.
      *
-     * @default No ref is attached.
+     * @defaultValue No ref is attached.
      */
     ref?: React.Ref<HTMLElement>;
     /**
      * Sets the resting background using a base ramp layer (`1`–`3`), a literal CSS color value, or the named token
      * `primary` (`data-surface-color="primary"`; CSS owns light/dark opacity via `--global-primary`).
      *
-     * @default No background.
+     * @defaultValue No background.
      */
     color?: SurfaceColor;
     /**
      * Sets the hover background on hover-capable pointers using a base ramp layer (`1`–`3`), a literal CSS value, or the
      * named token `primary` (`data-surface-hover-color="primary"`; CSS owns light/dark opacity via `--global-primary`).
      *
-     * @default No hover color override.
+     * @defaultValue No hover color override.
      */
     hoverColor?: SurfaceColor;
     /**
      * Applies the shared contrast border on one or more sides (`'all'`, `'top'`, `'right'`, `'bottom'`, `'left'`).
      * Pass a single side or a list (e.g. `['bottom', 'left']`). Omit for no border.
      *
-     * @default No border.
+     * @defaultValue No border.
      */
     border?: SurfaceBorder | readonly SurfaceBorder[];
     /**
      * Sets the CSS border style when `border` is set.
      *
-     * @default solid
+     * @defaultValue solid
      */
     borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double';
     /**
      * Sets corner radius from the Vira radius token scale, a per-corner `[top-left, top-right, bottom-right, bottom-left]` tuple (`0` for square corners), or `auto` for concentric radii from the nearest ancestor Surface.
      *
-     * @default No radius.
+     * @defaultValue No radius.
      */
     radius?: SurfaceRadiusInput;
     /**
      * Sets inline padding using one token for both sides or a `[start, end]` tuple.
      *
-     * @default No inline padding.
+     * @defaultValue No inline padding.
      */
     hPadding?: SurfacePadding;
     /**
      * Sets block padding using one token for both sides or a `[start, end]` tuple.
      *
-     * @default No block padding.
+     * @defaultValue No block padding.
      */
     vPadding?: SurfacePadding;
     /**
      * Sets root overflow through the `--vui-surface-overflow` custom property.
      *
-     * @default visible
+     * @defaultValue visible
      */
     overflow?: React.CSSProperties['overflow'];
     /**
@@ -89,7 +89,7 @@ export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>
      * Warning: inline-size containment can affect nested layout (e.g. cards inside Masonry).
      * Use only when you need container queries against this specific Surface.
      *
-     * @default false
+     * @defaultValue false
      */
     enableContainer?: boolean;
 };

package/dist/components/switch/switch.d.ts

@@ -9,44 +9,44 @@ import type * as React from 'react';
  * and change handlers, plus optional field copy rendered with the shared Vira
  * field label/helper pattern.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type SwitchProps = SwitchRoot.Props & Omit<FieldRoot.Props, 'ref'> & {
     /**
      * 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;
     /**
      * Error copy rendered with `Field.Error` and `Text` in the same slot as `description`.
      * Replaces description while the field is invalid and dirty.
      *
-     * @default No static error copy is rendered.
+     * @defaultValue No static error copy is rendered.
      */
     error?: React.ReactNode;
     /**
      * Controls the visual switch size.
      *
-     * @default 's'
+     * @defaultValue 's'
      */
     size?: 'm' | 's';
     /**
      * Sets block padding using one token for both sides or a `[start, end]` tuple.
      *
-     * @default No block padding.
+     * @defaultValue No block padding.
      */
     vPadding?: StackProps['vPadding'];
     /**
      * Sets inline padding using one token for both sides or a `[start, end]` tuple.
      *
-     * @default No inline padding.
+     * @defaultValue No inline padding.
      */
     hPadding?: StackProps['hPadding'];
 };

package/dist/components/tabs/tabs-list.d.ts

@@ -6,7 +6,7 @@ import type * as React from 'react';
  * Wraps Base UI `Tabs.List` in a compact `Surface`, lays out items with `Stack`,
  * and renders the active tab indicator internally.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type TabsListProps = TabsListPrimitive.Props;
 export declare const TabsList: React.FC<TabsListProps>;

package/dist/components/tabs/tabs-panel.d.ts

@@ -5,7 +5,7 @@ import type * as React from 'react';
  *
  * Base UI `Tabs.Panel` with entry slide/fade animation.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type TabsPanelProps = TabsPanelPrimitive.Props;
 export declare const TabsPanel: React.FC<TabsPanelProps>;

package/dist/components/tabs/tabs-tab.d.ts

@@ -5,19 +5,19 @@ import type * as React from 'react';
  *
  * Wraps Base UI `Tabs.Tab` with optional decorative addon layout.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type TabsTabProps = TabsTabPrimitive.Props & {
     /**
      * Decorative addon rendered alongside the tab label.
      *
-     * @default No addon is rendered.
+     * @defaultValue No addon is rendered.
      */
     addon?: React.ReactNode;
     /**
      * Controls whether the addon appears before or after the label.
      *
-     * @default 'start'
+     * @defaultValue 'start'
      */
     addonPosition?: 'start' | 'end';
 };

package/dist/components/tabs/tabs.d.ts

@@ -11,13 +11,13 @@ import * as React from 'react';
  * Includes Base UI tabs root props such as `value`, `defaultValue`, `orientation`,
  * and `onValueChange`.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type TabsProps = TabsRoot.Props & {
     /**
      * Horizontal alignment of tab list within root Stack.
      *
-     * @default 'start'
+     * @defaultValue 'start'
      */
     listAlignment?: Extract<StackProps['hAlign'], 'start' | 'center' | 'end' | 'stretch'>;
 };

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

@@ -9,19 +9,19 @@ type TextAxisPadding = TextSpace | [TextSpace | 0, TextSpace | 0];
  * Includes standard inline text attributes such as `children`, `id`, `title`, and event handlers,
  * plus Vira-owned body typography, color, and layout controls.
  *
- * @default Base HTML pass-through props keep upstream defaults.
+ * @defaultValue Base HTML pass-through props keep upstream defaults.
  */
 export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
     /**
      * Replaces the default `span` root using Base UI render semantics.
      *
-     * @default The text renders a `span` root.
+     * @defaultValue The text renders a `span` root.
      */
     render?: useRender.RenderProp;
     /**
      * Ref forwarded to the rendered text root element.
      *
-     * @default No ref is attached.
+     * @defaultValue No ref is attached.
      */
     ref?: React.Ref<HTMLElement>;
     /**
@@ -29,19 +29,19 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
      * (`4xl` | `3xl` | `2xl` | `xl` | `l` | `m` | `s` | `xs`).
      * Omit when nested in Text so font-size inherits the outer Text size.
      *
-     * @default 'm' on root Text (CSS); inherit when nested and omitted
+     * @defaultValue 'm' on root Text (CSS); inherit when nested and omitted
      */
     size?: '4xl' | '3xl' | '2xl' | 'xl' | 'l' | 'm' | 's' | 'xs';
     /**
      * Selects the semantic font family for body copy and inline code-like text.
      *
-     * @default 'body'
+     * @defaultValue 'body'
      */
     family?: 'body' | 'mono';
     /**
      * Selects a semantic weight keyword or a numeric weight (`font-weight` + `wght` axis).
      *
-     * @default 'regular'
+     * @defaultValue 'regular'
      */
     weight?: 'light' | 'regular' | 'semibold' | 'bold' | number;
     /**
@@ -50,101 +50,102 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
      * `interactive` → `--global-interactive-text`; `positive` / `informative` / `danger` / `warning`
      * → `--highlight-green` / `--highlight-blue` / `--highlight-red` / `--highlight-yellow`.
      *
-     * @default No semantic tone override.
+     * @defaultValue No semantic tone override.
      */
     tone?: 'default' | 'primary' | 'muted' | 'interactive' | 'positive' | 'informative' | 'danger' | 'warning';
     /**
      * Applies a custom color as an escape hatch when semantic `tone` is not used.
      *
-     * @default No literal color override.
+     * @defaultValue No literal color override.
      */
     color?: string;
     /**
      * Controls line height through foundation leading tokens.
      * Omit when nested in Text so line-height inherits the outer Text.
      *
-     * @default 'm' on root Text (CSS); inherit when nested and omitted
+     * @defaultValue 'm' on root Text (CSS); inherit when nested and omitted
      */
     lineHeight?: 'none' | 'xs' | 's' | 'm' | 'l';
     /**
      * Aligns text using logical alignment values.
+     * Omit so `text-align` inherits from the parent.
      *
-     * @default 'start'
+     * @defaultValue Inherits parent `text-align`.
      */
     align?: React.CSSProperties['textAlign'];
     /**
      * Constrains the maximum inline size of the rendered text block.
      *
-     * @default No max width constraint.
+     * @defaultValue No max width constraint.
      */
     maxWidth?: string;
     /**
      * Controls white-space preservation and wrapping behavior.
      *
-     * @default 'normal'
+     * @defaultValue 'normal'
      */
     whiteSpace?: React.CSSProperties['whiteSpace'];
     /**
      * Sets letter-spacing on the rendered copy. Prefer this prop over CSS
      * `letter-spacing` on the same Text root.
      *
-     * @default No letter-spacing override.
+     * @defaultValue No letter-spacing override.
      */
     tracking?: React.CSSProperties['letterSpacing'];
     /**
      * Applies `text-transform` on the rendered copy. Prefer this prop over CSS
      * `text-transform` on the same Text root.
      *
-     * @default No text-transform override.
+     * @defaultValue No text-transform override.
      */
     transform?: React.CSSProperties['textTransform'];
     /**
      * Enables balanced wrapping for block-like copy.
      *
-     * @default false
+     * @defaultValue false
      */
     balanced?: boolean;
     /**
      * Enables text selection on the rendered copy.
      *
-     * @default true
+     * @defaultValue true
      */
     selection?: boolean;
     /**
      * Sets inline padding using one token for both sides or a `[start, end]` tuple.
      *
-     * @default No inline padding.
+     * @defaultValue No inline padding.
      */
     hPadding?: TextAxisPadding;
     /**
      * Sets block padding using one token for both sides or a `[start, end]` tuple.
      *
-     * @default No block padding.
+     * @defaultValue No block padding.
      */
     vPadding?: TextAxisPadding;
     /**
      * Trims text box whitespace at the chosen edge when the browser supports `text-box`.
      * Pass `false` to disable text-box trim.
      *
-     * @default 'both'
+     * @defaultValue 'both'
      */
     trim?: 'start' | 'end' | 'both' | false;
     /**
      * Selects the `text-box` trim basis when `trim` is active.
      *
-     * @default 'cap alphabetic'
+     * @defaultValue 'cap alphabetic'
      */
     trimType?: string;
     /**
      * Overrides font width as a percentage (100 = normal); maps to `font-stretch` and `wdth`.
      *
-     * @default No width override.
+     * @defaultValue No width override.
      */
     fontWidth?: number;
     /**
      * Overrides the optical size (`opsz`) axis on variable fonts; static fonts keep `font-optical-sizing: auto`.
      *
-     * @default No optical size override.
+     * @defaultValue No optical size override.
      */
     opticalSize?: number;
     /**
@@ -152,7 +153,7 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
      * Default locks at this size’s `--font-scale-body-*` token (UI chrome stays stable).
      * Pass `true` for fluid page/body copy. Theme `--effect-fluid-typography: initial` still locks all Text globally.
      *
-     * @default false
+     * @defaultValue false
      */
     fluid?: boolean;
 };

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/textarea/textarea.d.ts

@@ -8,19 +8,19 @@ import type * as React from 'react';
  * `rows`, and event handlers on `Field.Control` (`render={<textarea />}`), plus optional
  * `label`, `description`, and `error` copy rendered with `Text` inside a `Stack` field layout.
  *
- * @default Base UI `Field.Root` pass-through props keep upstream defaults.
+ * @defaultValue Base UI `Field.Root` pass-through props keep upstream defaults.
  */
 export type TextareaProps = React.ComponentPropsWithRef<'textarea'> & Omit<FieldRoot.Props, 'ref'> & {
     /**
      * 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;
     /**
@@ -28,7 +28,7 @@ export type TextareaProps = React.ComponentPropsWithRef<'textarea'> & Omit<Field
      * 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;
     /**
@@ -36,14 +36,14 @@ export type TextareaProps = React.ComponentPropsWithRef<'textarea'> & Omit<Field
      * (`none`); accepts any valid `CSSProperties['resize']` value such as `"vertical"`, `"horizontal"`,
      * or `"both"`.
      *
-     * @default undefined (no resize)
+     * @defaultValue undefined (no resize)
      */
     resize?: React.CSSProperties['resize'];
     /**
      * When `true`, sets `field-sizing: content` so the control grows with its value.
      * Still respects `min-block-size` and `resize`. Omitted / `false` keeps the browser fixed default.
      *
-     * @default undefined (browser fixed)
+     * @defaultValue undefined (browser fixed)
      */
     fitContent?: BasicInputProps['fitContent'];
 };

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.
+ * @defaultValue 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>;