@viraui/react 2026.2.4 → 2026.2.6

package/dist/components/autocomplete/autocomplete.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-autocomplete-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-autocomplete-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-autocomplete-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-autocomplete-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-autocomplete-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-autocomplete-list-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-autocomplete-list-padding{syntax:"<length>";inherits:true;initial-value:0}@property --__autocomplete-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__autocomplete-module__Autocomplete_WfXkD{--vui-autocomplete-input-height:var(--space-2x-large);--vui-autocomplete-control-group-background:var(--base-1);--vui-autocomplete-control-group-color:var(--global-foreground);--vui-autocomplete-control-group-border-color:var(--global-contrast);--vui-autocomplete-control-group-border-radius:var(--radius-medium);--vui-field-label-padding-inline:calc(var(--vui-autocomplete-control-group-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__autocomplete-module__Label_aOSjz:after{content:" ＊";color:var(--highlight-red)}}.viraui__autocomplete-module__ControlGroup_AUq7O{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-autocomplete-input-height);background:var(--vui-autocomplete-control-group-background);color:var(--vui-autocomplete-control-group-color);border:1px solid var(--vui-autocomplete-control-group-border-color);border-radius:var(--vui-autocomplete-control-group-border-radius);&:has(.viraui__autocomplete-module__CustomBasicInput_k7dx4:focus-visible),&:has(.viraui__autocomplete-module__CustomBasicInput_k7dx4[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__autocomplete-module__CustomBasicInput_k7dx4[data-invalid]){--vui-autocomplete-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__autocomplete-module__CustomBasicInput_k7dx4:disabled),&:has(.viraui__autocomplete-module__CustomBasicInput_k7dx4[data-disabled]){--vui-autocomplete-control-group-background:var(--global-disabled-background);--vui-autocomplete-control-group-border-color:#0000;--vui-autocomplete-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}&:has(.viraui__autocomplete-module__Addon_6ajrr[data-position=start])>.viraui__autocomplete-module__CustomBasicInput_k7dx4{padding-inline-start:var(--space-x-small)}&:has(.viraui__autocomplete-module__Addon_6ajrr[data-position=end])>.viraui__autocomplete-module__CustomBasicInput_k7dx4{padding-inline-end:var(--space-x-small)}}.viraui__autocomplete-module__Addon_6ajrr{min-inline-size:var(--space-x-large)}.viraui__autocomplete-module__Description_cr8U6{padding-inline:calc(var(--vui-autocomplete-control-group-border-radius) / 2)}.viraui__autocomplete-module__AutocompletePopup_nF49j{--vui-autocomplete-list-border-radius:var(--radius-medium);--vui-autocomplete-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__autocomplete-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__autocomplete-list-appear-offset)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__autocomplete-list-appear-offset) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__autocomplete-list-appear-offset) * -1) 0}}.viraui__autocomplete-module__PopupChrome_573fy{box-sizing:border-box;max-block-size:var(--available-height);overscroll-behavior:contain}.viraui__autocomplete-module__List_Tl5j1{box-sizing:border-box;inline-size:100%;scroll-padding-block:var(--vui-autocomplete-list-padding);&:focus,&:focus-visible{outline:none}}.viraui__autocomplete-module__Empty_Xa34u:not(:empty),.viraui__autocomplete-module__Status_XLDvE:not(:empty){padding-inline:var(--space-small);padding-block:var(--space-small)}.viraui__autocomplete-module__ItemRow_ab22I{min-block-size:var(--space-x-large)}}@layer viraui.overrides{.viraui__autocomplete-module__CustomBasicInput_k7dx4{flex:1 1 auto;block-size:100%;line-height:1.2;background:#0000;box-shadow:none;border-radius:inherit;&:focus-visible{outline:none}}.viraui__autocomplete-module__Item_TmEz2{cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-autocomplete-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-autocomplete-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-autocomplete-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-autocomplete-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-autocomplete-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-autocomplete-list-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-autocomplete-list-padding{syntax:"<length>";inherits:true;initial-value:0}@property --__autocomplete-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__autocomplete-module__Autocomplete_WfXkD{--vui-autocomplete-input-height:var(--space-2x-large);--vui-autocomplete-control-group-background:var(--base-1);--vui-autocomplete-control-group-color:var(--global-foreground);--vui-autocomplete-control-group-border-color:var(--global-contrast);--vui-autocomplete-control-group-border-radius:var(--radius-medium);--vui-field-label-padding-inline:calc(var(--vui-autocomplete-control-group-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__autocomplete-module__Label_aOSjz:after{content:" ＊";color:var(--highlight-red)}}.viraui__autocomplete-module__ControlGroup_AUq7O{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-autocomplete-input-height);background:var(--vui-autocomplete-control-group-background);color:var(--vui-autocomplete-control-group-color);border:1px solid var(--vui-autocomplete-control-group-border-color);border-radius:var(--vui-autocomplete-control-group-border-radius);&:has(.viraui__autocomplete-module__CustomBasicInput_k7dx4:focus-visible),&:has(.viraui__autocomplete-module__CustomBasicInput_k7dx4[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__autocomplete-module__CustomBasicInput_k7dx4[data-invalid][data-dirty]){--vui-autocomplete-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__autocomplete-module__CustomBasicInput_k7dx4:disabled),&:has(.viraui__autocomplete-module__CustomBasicInput_k7dx4[data-disabled]){--vui-autocomplete-control-group-background:var(--global-disabled-background);--vui-autocomplete-control-group-border-color:#0000;--vui-autocomplete-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}&:has(.viraui__autocomplete-module__Addon_6ajrr[data-position=start])>.viraui__autocomplete-module__CustomBasicInput_k7dx4{padding-inline-start:var(--space-x-small)}&:has(.viraui__autocomplete-module__Addon_6ajrr[data-position=end])>.viraui__autocomplete-module__CustomBasicInput_k7dx4{padding-inline-end:var(--space-x-small)}}.viraui__autocomplete-module__Addon_6ajrr{min-inline-size:var(--space-x-large)}.viraui__autocomplete-module__Description_cr8U6{padding-inline:calc(var(--vui-autocomplete-control-group-border-radius) / 2)}.viraui__autocomplete-module__AutocompletePopup_nF49j{--vui-autocomplete-list-border-radius:var(--radius-medium);--vui-autocomplete-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__autocomplete-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__autocomplete-list-appear-offset)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__autocomplete-list-appear-offset) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__autocomplete-list-appear-offset) * -1) 0}}.viraui__autocomplete-module__PopupChrome_573fy{box-sizing:border-box;max-block-size:var(--available-height);overscroll-behavior:contain}.viraui__autocomplete-module__List_Tl5j1{box-sizing:border-box;inline-size:100%;scroll-padding-block:var(--vui-autocomplete-list-padding);&:focus,&:focus-visible{outline:none}}.viraui__autocomplete-module__Empty_Xa34u:not(:empty),.viraui__autocomplete-module__Status_XLDvE:not(:empty){padding-inline:var(--space-small);padding-block:var(--space-small)}.viraui__autocomplete-module__ItemRow_ab22I{min-block-size:var(--space-x-large)}}@layer viraui.overrides{.viraui__autocomplete-module__CustomBasicInput_k7dx4{flex:1 1 auto;block-size:100%;line-height:1.2;background:#0000;box-shadow:none;border-radius:inherit;&:focus-visible{outline:none}}.viraui__autocomplete-module__Item_TmEz2{cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}}

package/dist/components/autocomplete/autocomplete.d.ts

@@ -28,7 +28,7 @@ export type AutocompleteProps = Omit<AutocompleteRoot.Props<any>, 'children'> &
     description?: React.ReactNode;
     /**
      * Error copy rendered with `Field.Error` and `Text` in the same slot as `description`.
-     * Replaces description while the field is invalid.
+     * Replaces description while the field is invalid and dirty.
      *
      * @default No static error copy is rendered.
      */

package/dist/components/autocomplete/autocomplete.guide.json

@@ -44,7 +44,7 @@
         "description": "Trailing decoration (icon, button). Buttons must use `type=\"button\"`."
       },
       "error": {
-        "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while the field is invalid."
+        "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while the field is invalid and dirty."
       },
       "fitContent": {
         "description": "When `true`, sets `field-sizing: content` so the control grows inline with its value. Block chrome stays `var(--vui-autocomplete-input-height)`. Omitted / `false` keeps the browser fixed default.",

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

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

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

@@ -6,9 +6,7 @@ import { Field } from "@base-ui/react/field";
 import { Input } from "@base-ui/react/input";
 import * as React from "react";
 //#region src/components/basic-input/basic-input.tsx
-function usesInputPrimitiveRender(render) {
-	return React.isValidElement(render) && render.type === Input;
-}
+var usesInputPrimitiveRender = (render) => React.isValidElement(render) && render.type === Input;
 var BasicInput = React.forwardRef(function BasicInput({ className, render, fitContent, ...otherProps }, ref) {
 	const mergedClassName = clsx(basic_input_module_default.BasicInput, className);
 	const sizingProps = { ...fitContent && { "data-sizing": "content" } };

package/dist/components/basic-input/field-helper-copy.d.ts

@@ -6,9 +6,10 @@ type FieldHelperCopyProps = {
 };
 /**
  * Renders field helper copy in the shared `Description` slot via `Field.Validity`.
- * Static `error` replaces `description` only while invalid and `error` is set.
- * `description` stays visible when invalid if `error` is omitted.
- * `validate` / native messages render through `Field.Error` when there is no `description`.
+ * Static `error` replaces `description` only while invalid, dirty, and `error` is set.
+ * `description` stays visible when invalid if `error` is omitted or the field is not dirty.
+ * `validate` / native messages render through `Field.Error` when there is no `description`
+ * and the field is invalid and dirty.
  */
 export declare const FieldHelperCopy: React.FC<FieldHelperCopyProps>;
 export {};

package/dist/components/basic-input/field-helper-copy.js

@@ -1,43 +1,48 @@
 import { Text } from "../text/text.js";
 import { jsx } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
+import { useFieldRootContext } from "@base-ui/react/internals/field-root-context";
 //#region src/components/basic-input/field-helper-copy.tsx
 /**
 * Renders field helper copy in the shared `Description` slot via `Field.Validity`.
-* Static `error` replaces `description` only while invalid and `error` is set.
-* `description` stays visible when invalid if `error` is omitted.
-* `validate` / native messages render through `Field.Error` when there is no `description`.
+* Static `error` replaces `description` only while invalid, dirty, and `error` is set.
+* `description` stays visible when invalid if `error` is omitted or the field is not dirty.
+* `validate` / native messages render through `Field.Error` when there is no `description`
+* and the field is invalid and dirty.
 */
-var FieldHelperCopy = ({ className, description, error }) => /* @__PURE__ */ jsx(Field.Validity, { children: (validity) => {
-	const isInvalid = validity.validity.valid === false;
-	if (isInvalid && error) return /* @__PURE__ */ jsx(Field.Error, {
-		className,
-		match: true,
-		render: /* @__PURE__ */ jsx(Text, {
-			selection: false,
-			size: "small",
-			tone: "danger"
-		}),
-		children: error
-	});
-	if (description) return /* @__PURE__ */ jsx(Field.Description, {
-		className,
-		render: /* @__PURE__ */ jsx(Text, {
-			selection: false,
-			size: "small",
-			tone: "muted"
-		}),
-		children: description
-	});
-	if (isInvalid) return /* @__PURE__ */ jsx(Field.Error, {
-		className,
-		render: /* @__PURE__ */ jsx(Text, {
-			selection: false,
-			size: "small",
-			tone: "danger"
-		})
-	});
-	return null;
-} });
+var FieldHelperCopy = ({ className, description, error }) => {
+	const { state } = useFieldRootContext(false);
+	return /* @__PURE__ */ jsx(Field.Validity, { children: (validity) => {
+		const isInvalid = validity.validity.valid === false && state.dirty;
+		if (isInvalid && error) return /* @__PURE__ */ jsx(Field.Error, {
+			className,
+			match: true,
+			render: /* @__PURE__ */ jsx(Text, {
+				selection: false,
+				size: "small",
+				tone: "danger"
+			}),
+			children: error
+		});
+		if (description) return /* @__PURE__ */ jsx(Field.Description, {
+			className,
+			render: /* @__PURE__ */ jsx(Text, {
+				selection: false,
+				size: "small",
+				tone: "muted"
+			}),
+			children: description
+		});
+		if (isInvalid) return /* @__PURE__ */ jsx(Field.Error, {
+			className,
+			render: /* @__PURE__ */ jsx(Text, {
+				selection: false,
+				size: "small",
+				tone: "danger"
+			})
+		});
+		return null;
+	} });
+};
 //#endregion
 export { FieldHelperCopy };

package/dist/components/select/select.d.ts

@@ -28,7 +28,7 @@ export type SelectProps = SelectRoot.Props<string> & Omit<FieldRoot.Props, 'ref'
     description?: React.ReactNode;
     /**
      * Error copy rendered with `Field.Error` and `Text` in the same slot as `description`.
-     * Replaces description while the field is invalid.
+     * Replaces description while the field is invalid and dirty.
      *
      * @default No static error copy is rendered.
      */

package/dist/components/select/select.guide.json

@@ -45,7 +45,7 @@
         "description": "Helper copy rendered with `Field.Description` and `Text` while the field is valid."
       },
       "error": {
-        "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while the field is invalid."
+        "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while the field is invalid and dirty."
       },
       "Group.label": {
         "description": "Accessible group label rendered with `Select.GroupLabel`."

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

@@ -26,7 +26,7 @@ export type SwitchProps = SwitchRoot.Props & Omit<FieldRoot.Props, 'ref'> & {
     description?: React.ReactNode;
     /**
      * Error copy rendered with `Field.Error` and `Text` in the same slot as `description`.
-     * Replaces description while the field is invalid.
+     * Replaces description while the field is invalid and dirty.
      *
      * @default No static error copy is rendered.
      */

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

@@ -28,7 +28,7 @@
         "description": "Helper copy rendered with `Field.Description` and `Text` while the field is valid."
       },
       "error": {
-        "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while the field is invalid."
+        "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while the field is invalid and dirty."
       },
       "hPadding": {
         "description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."

package/dist/components/textarea/textarea.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textarea-min-block-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textarea-padding-block{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textarea-input-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.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%;&:not(:has([data-sizing=content])){max-block-size:min-content}&:has([required]) .viraui__textarea-module__Label_5dOso:after{content:" ＊";color:var(--highlight-red)}}.viraui__textarea-module__Description_er3zI{padding-inline:var(--vui-field-label-padding-inline)}}@layer viraui.overrides{.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=horizontal]{resize:horizontal}&[data-resize=both]{resize:both}&[data-resize=block]{resize:block}&[data-resize=inline]{resize:inline}&[data-invalid]{border-color:var(--highlight-red)}&:disabled,&[data-disabled]{border-color:#0000}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textarea-min-block-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textarea-padding-block{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textarea-input-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.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%;&:not(:has([data-sizing=content])){max-block-size:min-content}&:has([required]) .viraui__textarea-module__Label_5dOso:after{content:" ＊";color:var(--highlight-red)}}.viraui__textarea-module__Description_er3zI{padding-inline:var(--vui-field-label-padding-inline)}}@layer viraui.overrides{.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=horizontal]{resize:horizontal}&[data-resize=both]{resize:both}&[data-resize=block]{resize:block}&[data-resize=inline]{resize:inline}&[data-invalid][data-dirty]{border-color:var(--highlight-red)}&:disabled,&[data-disabled]{border-color:#0000}}}

package/dist/components/textarea/textarea.d.ts

@@ -25,7 +25,7 @@ export type TextareaProps = React.ComponentPropsWithRef<'textarea'> & Omit<Field
     description?: React.ReactNode;
     /**
      * Error copy rendered with `Field.Error` and `Text` in the same slot as `description`.
-     * Replaces description while the field is invalid. Validation messages from `validate`
+     * 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.

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

@@ -28,7 +28,7 @@
         "description": "Helper copy rendered with `Field.Description` and `Text` while the field is valid."
       },
       "error": {
-        "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while the field is invalid. Validation messages from `validate` are shown by `Field.Error` even when this prop is omitted."
+        "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while the field is invalid and dirty. Validation messages from `validate` are shown by `Field.Error` even when this prop is omitted (also requires dirty)."
       },
       "fitContent": {
         "description": "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."

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-2x-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);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:var(--vui-textfield-input-height);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]){--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-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__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)}}@layer viraui.overrides{.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;block-size:100%;line-height:1.2;background:#0000;box-shadow:none;border-radius:inherit;&: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__Textfield_o-70A{--vui-textfield-input-height:var(--space-2x-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);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:var(--vui-textfield-input-height);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-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__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)}}@layer viraui.overrides{.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;block-size:100%;line-height:1.2;background:#0000;box-shadow:none;border-radius:inherit;&:focus-visible{outline:none}}}

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

@@ -26,7 +26,7 @@ export type TextfieldProps = PrimitiveInput.Props & FieldRoot.Props & {
     description?: React.ReactNode;
     /**
      * Error copy rendered with `Field.Error` and `Text` in the same slot as `description`.
-     * Replaces description while the field is invalid. Validation messages from `validate`
+     * 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.

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

@@ -34,7 +34,7 @@
         "description": "Trailing decoration (icon, button). Buttons must use `type=\"button\"`."
       },
       "error": {
-        "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while the field is invalid. Validation messages from `validate` are shown by `Field.Error` even when this prop is omitted."
+        "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while the field is invalid and dirty. Validation messages from `validate` are shown by `Field.Error` even when this prop is omitted (also requires dirty)."
       },
       "fitContent": {
         "description": "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."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.2.4",
+  "version": "2026.2.6",
   "private": false,
   "files": [
     "dist"
@@ -35,7 +35,7 @@
     "unplugin-dts": "1.0.3",
     "vite": "8.2.2",
     "vite-plugin-static-copy": "4.1.1",
-    "@viraui/foundation": "2026.2.4",
+    "@viraui/foundation": "2026.2.6",
     "@viraui/icons": "2026.0.2",
     "@viraui/postcss-config": "2026.0.0",
     "@viraui/tsconfig": "2026.0.0"