@kanso-labs/kanso-ui 0.40.7 → 0.40.8

package/dist/field/index.js

@@ -1,4 +1,5 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { spacing } from "../tokens/design.tokens.stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../styles/merge.js";
 import { useMessages } from "../i18n/index.js";
 import { useInsideForm } from "./root.js";
@@ -35,8 +36,9 @@ const BOX_CONTROLS = {
 	}
 };
 const BoxContext = createContext(OUTSIDE_BOX);
-function boxContent(label, children, floatingLabel, isFocused, isPopulated, isRequired, leading, multiline, trailing, trigger, variant) {
+function boxContent(label, children, endInset, floatingLabel, isFocused, isPopulated, isRequired, leading, multiline, trailing, trigger, variant) {
 	return (state) => /* @__PURE__ */ jsx(BoxContent, {
+		endInset,
 		floatingLabel,
 		isFocused,
 		isPopulated,
@@ -59,8 +61,8 @@ function boxContent(label, children, floatingLabel, isFocused, isPopulated, isRe
 * for them. See the outlined variant's note above.
 */
 function BoxContent(t0) {
-	const $ = c(45);
-	const { children, floatingLabel, isFocused, isPopulated, isRequired, label, leading, multiline, state, trailing, trigger, variant } = t0;
+	const $ = c(47);
+	const { children, endInset, floatingLabel, isFocused, isPopulated, isRequired, label, leading, multiline, state, trailing, trigger, variant } = t0;
 	const read = useFieldPopulated();
 	const populated = isPopulated ?? read;
 	const outlined = variant === "outlined";
@@ -68,98 +70,100 @@ function BoxContent(t0) {
 	const floated = !floatingLabel || focused || populated;
 	const t1 = BOX_CONTROLS[variant][floatingLabel ? "floating" : "fixed"];
 	let t2;
-	if ($[0] !== floated || $[1] !== focused || $[2] !== isRequired || $[3] !== label || $[4] !== leading || $[5] !== outlined || $[6] !== trailing) {
+	if ($[0] !== endInset || $[1] !== floated || $[2] !== focused || $[3] !== isRequired || $[4] !== label || $[5] !== leading || $[6] !== outlined || $[7] !== trailing) {
 		t2 = outlined ? /* @__PURE__ */ jsx("fieldset", {
 			"aria-hidden": "true",
-			...props(fieldChromeStyles.outline, leading !== void 0 && fieldChromeStyles.outlineLeading, trailing !== void 0 && fieldChromeStyles.outlineTrailing, focused && fieldChromeStyles.outlineFocused),
+			...props(fieldChromeStyles.outline, leading !== void 0 && fieldChromeStyles.outlineLeading, trailing !== void 0 && fieldChromeStyles.outlineTrailing, focused && fieldChromeStyles.outlineFocused, endInset !== "0px" && fieldChromeStyles.outlineEndInset(`calc(${spacing.lg} - ${spacing.xs} + ${endInset})`)),
 			children: /* @__PURE__ */ jsx("legend", {
 				...props(fieldChromeStyles.outlineNotch, floated && fieldChromeStyles.outlineNotchOpen),
 				children: floated ? /* @__PURE__ */ jsxs(Fragment$1, { children: [label, isRequired ? REQUIRED_MARK : null] }) : null
 			})
 		}) : null;
-		$[0] = floated;
-		$[1] = focused;
-		$[2] = isRequired;
-		$[3] = label;
-		$[4] = leading;
-		$[5] = outlined;
-		$[6] = trailing;
-		$[7] = t2;
-	} else t2 = $[7];
+		$[0] = endInset;
+		$[1] = floated;
+		$[2] = focused;
+		$[3] = isRequired;
+		$[4] = label;
+		$[5] = leading;
+		$[6] = outlined;
+		$[7] = trailing;
+		$[8] = t2;
+	} else t2 = $[8];
 	let t3;
-	if ($[8] !== leading || $[9] !== multiline || $[10] !== outlined || $[11] !== state.isDisabled) {
+	if ($[9] !== leading || $[10] !== multiline || $[11] !== outlined || $[12] !== state.isDisabled) {
 		t3 = leading === void 0 ? null : /* @__PURE__ */ jsx("span", {
 			...props(fieldChromeStyles.icon, multiline && fieldChromeStyles.iconMultiline, outlined && fieldChromeStyles.iconOutlined, state.isDisabled && fieldChromeStyles.iconDisabled),
 			children: leading
 		});
-		$[8] = leading;
-		$[9] = multiline;
-		$[10] = outlined;
-		$[11] = state.isDisabled;
-		$[12] = t3;
-	} else t3 = $[12];
+		$[9] = leading;
+		$[10] = multiline;
+		$[11] = outlined;
+		$[12] = state.isDisabled;
+		$[13] = t3;
+	} else t3 = $[13];
 	let t4;
-	if ($[13] !== floatingLabel || $[14] !== state.isDisabled) {
+	if ($[14] !== floatingLabel || $[15] !== state.isDisabled) {
 		t4 = props(fieldChromeStyles.column, floatingLabel && fieldChromeStyles.columnFloating, state.isDisabled && (floatingLabel ? fieldChromeStyles.columnDisabledFloating : fieldChromeStyles.columnDisabled));
-		$[13] = floatingLabel;
-		$[14] = state.isDisabled;
-		$[15] = t4;
-	} else t4 = $[15];
+		$[14] = floatingLabel;
+		$[15] = state.isDisabled;
+		$[16] = t4;
+	} else t4 = $[16];
 	let t5;
-	if ($[16] !== focused || $[17] !== state) {
+	if ($[17] !== focused || $[18] !== state) {
 		t5 = withFocus(state, focused);
-		$[16] = focused;
-		$[17] = state;
-		$[18] = t5;
-	} else t5 = $[18];
+		$[17] = focused;
+		$[18] = state;
+		$[19] = t5;
+	} else t5 = $[19];
 	let t6;
-	if ($[19] !== floated || $[20] !== floatingLabel || $[21] !== outlined) {
-		t6 = props(fieldChromeStyles.boxLabel, floatingLabel && floated && fieldChromeStyles.boxLabelFloated, outlined && fieldChromeStyles.boxLabelOutlined, outlined && floated && fieldChromeStyles.boxLabelOutlinedFloated);
-		$[19] = floated;
-		$[20] = floatingLabel;
-		$[21] = outlined;
-		$[22] = t6;
-	} else t6 = $[22];
+	if ($[20] !== endInset || $[21] !== floated || $[22] !== floatingLabel || $[23] !== outlined) {
+		t6 = props(fieldChromeStyles.boxLabel, floatingLabel && floated && fieldChromeStyles.boxLabelFloated, outlined && fieldChromeStyles.boxLabelOutlined, outlined && floated && fieldChromeStyles.boxLabelOutlinedFloated, endInset !== "0px" && fieldChromeStyles.boxLabelEndInset(outlined ? `calc(100% + 2 * ${spacing.xs} - ${endInset})` : `calc(100% - ${endInset})`));
+		$[20] = endInset;
+		$[21] = floated;
+		$[22] = floatingLabel;
+		$[23] = outlined;
+		$[24] = t6;
+	} else t6 = $[24];
 	let t7;
-	if ($[23] !== isRequired || $[24] !== label || $[25] !== t5 || $[26] !== t6) {
+	if ($[25] !== isRequired || $[26] !== label || $[27] !== t5 || $[28] !== t6) {
 		t7 = /* @__PURE__ */ jsx(FieldLabel, {
 			isRequired,
 			state: t5,
 			...t6,
 			children: label
 		});
-		$[23] = isRequired;
-		$[24] = label;
-		$[25] = t5;
-		$[26] = t6;
-		$[27] = t7;
-	} else t7 = $[27];
+		$[25] = isRequired;
+		$[26] = label;
+		$[27] = t5;
+		$[28] = t6;
+		$[29] = t7;
+	} else t7 = $[29];
 	let t8;
-	if ($[28] !== children || $[29] !== t4 || $[30] !== t7) {
+	if ($[30] !== children || $[31] !== t4 || $[32] !== t7) {
 		t8 = /* @__PURE__ */ jsxs("div", {
 			...t4,
 			children: [t7, children]
 		});
-		$[28] = children;
-		$[29] = t4;
-		$[30] = t7;
-		$[31] = t8;
-	} else t8 = $[31];
+		$[30] = children;
+		$[31] = t4;
+		$[32] = t7;
+		$[33] = t8;
+	} else t8 = $[33];
 	let t9;
-	if ($[32] !== multiline || $[33] !== outlined || $[34] !== state.isDisabled || $[35] !== state.isInvalid || $[36] !== trailing) {
+	if ($[34] !== multiline || $[35] !== outlined || $[36] !== state.isDisabled || $[37] !== state.isInvalid || $[38] !== trailing) {
 		t9 = trailing === void 0 ? null : /* @__PURE__ */ jsx("span", {
 			...props(fieldChromeStyles.icon, multiline && fieldChromeStyles.iconMultiline, outlined && fieldChromeStyles.iconOutlined, state.isInvalid && fieldChromeStyles.iconError, state.isDisabled && fieldChromeStyles.iconDisabled),
 			children: trailing
 		});
-		$[32] = multiline;
-		$[33] = outlined;
-		$[34] = state.isDisabled;
-		$[35] = state.isInvalid;
-		$[36] = trailing;
-		$[37] = t9;
-	} else t9 = $[37];
+		$[34] = multiline;
+		$[35] = outlined;
+		$[36] = state.isDisabled;
+		$[37] = state.isInvalid;
+		$[38] = trailing;
+		$[39] = t9;
+	} else t9 = $[39];
 	let t10;
-	if ($[38] !== t1 || $[39] !== t2 || $[40] !== t3 || $[41] !== t8 || $[42] !== t9 || $[43] !== trigger) {
+	if ($[40] !== t1 || $[41] !== t2 || $[42] !== t3 || $[43] !== t8 || $[44] !== t9 || $[45] !== trigger) {
 		t10 = /* @__PURE__ */ jsxs(BoxContext, {
 			value: t1,
 			children: [
@@ -170,14 +174,14 @@ function BoxContent(t0) {
 				t9
 			]
 		});
-		$[38] = t1;
-		$[39] = t2;
-		$[40] = t3;
-		$[41] = t8;
-		$[42] = t9;
-		$[43] = trigger;
-		$[44] = t10;
-	} else t10 = $[44];
+		$[40] = t1;
+		$[41] = t2;
+		$[42] = t3;
+		$[43] = t8;
+		$[44] = t9;
+		$[45] = trigger;
+		$[46] = t10;
+	} else t10 = $[46];
 	return t10;
 }
 function boxStyles(floatingLabel, isFocused, multiline, leading, trailing, variant) {
@@ -185,6 +189,29 @@ function boxStyles(floatingLabel, isFocused, multiline, leading, trailing, varia
 	return (state) => props(fieldChromeStyles.box, floatingLabel ? fieldChromeStyles.boxFloating : fieldChromeStyles.boxFixed, multiline && fieldChromeStyles.boxMultiline, leading && fieldChromeStyles.boxLeading, trailing && fieldChromeStyles.boxTrailing, outlined && fieldChromeStyles.boxOutlined, outlined && floatingLabel && fieldChromeStyles.boxOutlinedFloating, outlined && multiline && fieldChromeStyles.boxOutlinedMultiline, state.isInvalid && (outlined ? fieldChromeStyles.boxOutlinedError : fieldChromeStyles.boxError), outlined && state.isHovered && (state.isInvalid ? fieldChromeStyles.boxOutlinedErrorHovered : fieldChromeStyles.boxOutlinedHovered), isFocused && focusedStyle(outlined, state.isInvalid), state.isDisabled && (outlined ? fieldChromeStyles.boxOutlinedDisabled : fieldChromeStyles.boxDisabled));
 }
 /**
+* The control's `onInput`, which also commits the field's validation while it
+* shows an error, so an edit that fixes the value clears the error as it is
+* typed rather than once focus leaves.
+*
+* React Aria commits a field's validation — the moment a server's error is
+* cleared, or the browser's own is checked again — on the control's native
+* `change` event, and a text control fires that only on blur. So a reader
+* typing the fix saw the error, red and `aria-invalid`, until they tabbed
+* away from a value that was already right. Re-dispatching `change` on input
+* is what commits early, through React Aria's own listener.
+*
+* Only while the field is invalid. A valid field still commits on blur, so
+* nothing new is flagged in the middle of typing a value: an error is shown
+* late and taken back early. React's `onChange` does not run a second time
+* for it, since the value it tracks has not moved since the input.
+*/
+function commitWhileInvalid(isInvalid, onInput) {
+	return (event) => {
+		onInput?.(event);
+		if (isInvalid) event.currentTarget.dispatchEvent(new Event("change", { bubbles: true }));
+	};
+}
+/**
 * The box a control sits in, filled or outlined, with its label. React
 * Aria's `Group`, so
 * the field around it hands down `isDisabled` and `isInvalid` through context
@@ -193,9 +220,10 @@ function boxStyles(floatingLabel, isFocused, multiline, leading, trailing, varia
 * on a button rather than an input — passes the two states itself.
 */
 function FieldBox(t0) {
-	const $ = c(34);
+	const $ = c(36);
 	let T0;
 	let children;
+	let endInset;
 	let floatingLabel;
 	let isFocused;
 	let isPopulated;
@@ -210,18 +238,19 @@ function FieldBox(t0) {
 	let trigger;
 	let variant;
 	if ($[0] !== t0) {
-		const { children: t4, floatingLabel: t5, isFocused: t6, isPopulated: t7, isRequired: t8, label: t9, leading: t10, multiline: t11, trailing: t12, trigger: t13, variant: t14, ...props } = t0;
+		const { children: t4, endInset: t5, floatingLabel: t6, isFocused: t7, isPopulated: t8, isRequired: t9, label: t10, leading: t11, multiline: t12, trailing: t13, trigger: t14, variant: t15, ...props } = t0;
 		children = t4;
-		isPopulated = t7;
-		label = t9;
-		leading = t10;
-		trailing = t12;
-		trigger = t13;
-		floatingLabel = t5 === void 0 ? true : t5;
-		isFocused = t6 === void 0 ? false : t6;
-		isRequired = t8 === void 0 ? false : t8;
-		multiline = t11 === void 0 ? false : t11;
-		variant = t14 === void 0 ? "filled" : t14;
+		isPopulated = t8;
+		label = t10;
+		leading = t11;
+		trailing = t13;
+		trigger = t14;
+		endInset = t5 === void 0 ? "0px" : t5;
+		floatingLabel = t6 === void 0 ? true : t6;
+		isFocused = t7 === void 0 ? false : t7;
+		isRequired = t9 === void 0 ? false : t9;
+		multiline = t12 === void 0 ? false : t12;
+		variant = t15 === void 0 ? "filled" : t15;
 		T0 = Group;
 		t1 = props;
 		t2 = trigger === void 0 ? focusesControl(props.onPointerDown) : props.onPointerDown;
@@ -229,67 +258,70 @@ function FieldBox(t0) {
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = children;
-		$[3] = floatingLabel;
-		$[4] = isFocused;
-		$[5] = isPopulated;
-		$[6] = isRequired;
-		$[7] = label;
-		$[8] = leading;
-		$[9] = multiline;
-		$[10] = t1;
-		$[11] = t2;
-		$[12] = t3;
-		$[13] = trailing;
-		$[14] = trigger;
-		$[15] = variant;
+		$[3] = endInset;
+		$[4] = floatingLabel;
+		$[5] = isFocused;
+		$[6] = isPopulated;
+		$[7] = isRequired;
+		$[8] = label;
+		$[9] = leading;
+		$[10] = multiline;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = trailing;
+		$[15] = trigger;
+		$[16] = variant;
 	} else {
 		T0 = $[1];
 		children = $[2];
-		floatingLabel = $[3];
-		isFocused = $[4];
-		isPopulated = $[5];
-		isRequired = $[6];
-		label = $[7];
-		leading = $[8];
-		multiline = $[9];
-		t1 = $[10];
-		t2 = $[11];
-		t3 = $[12];
-		trailing = $[13];
-		trigger = $[14];
-		variant = $[15];
+		endInset = $[3];
+		floatingLabel = $[4];
+		isFocused = $[5];
+		isPopulated = $[6];
+		isRequired = $[7];
+		label = $[8];
+		leading = $[9];
+		multiline = $[10];
+		t1 = $[11];
+		t2 = $[12];
+		t3 = $[13];
+		trailing = $[14];
+		trigger = $[15];
+		variant = $[16];
 	}
 	let t4;
-	if ($[16] !== children || $[17] !== floatingLabel || $[18] !== isFocused || $[19] !== isPopulated || $[20] !== isRequired || $[21] !== label || $[22] !== leading || $[23] !== multiline || $[24] !== trailing || $[25] !== trigger || $[26] !== variant) {
-		t4 = boxContent(label, children, floatingLabel, isFocused, isPopulated, isRequired, leading, multiline, trailing, trigger, variant);
-		$[16] = children;
-		$[17] = floatingLabel;
-		$[18] = isFocused;
-		$[19] = isPopulated;
-		$[20] = isRequired;
-		$[21] = label;
-		$[22] = leading;
-		$[23] = multiline;
-		$[24] = trailing;
-		$[25] = trigger;
-		$[26] = variant;
-		$[27] = t4;
-	} else t4 = $[27];
+	if ($[17] !== children || $[18] !== endInset || $[19] !== floatingLabel || $[20] !== isFocused || $[21] !== isPopulated || $[22] !== isRequired || $[23] !== label || $[24] !== leading || $[25] !== multiline || $[26] !== trailing || $[27] !== trigger || $[28] !== variant) {
+		t4 = boxContent(label, children, endInset, floatingLabel, isFocused, isPopulated, isRequired, leading, multiline, trailing, trigger, variant);
+		$[17] = children;
+		$[18] = endInset;
+		$[19] = floatingLabel;
+		$[20] = isFocused;
+		$[21] = isPopulated;
+		$[22] = isRequired;
+		$[23] = label;
+		$[24] = leading;
+		$[25] = multiline;
+		$[26] = trailing;
+		$[27] = trigger;
+		$[28] = variant;
+		$[29] = t4;
+	} else t4 = $[29];
 	let t5;
-	if ($[28] !== T0 || $[29] !== t1 || $[30] !== t2 || $[31] !== t3 || $[32] !== t4) {
+	if ($[30] !== T0 || $[31] !== t1 || $[32] !== t2 || $[33] !== t3 || $[34] !== t4) {
 		t5 = /* @__PURE__ */ jsx(T0, {
 			...t1,
 			onPointerDown: t2,
 			...t3,
 			children: t4
 		});
-		$[28] = T0;
-		$[29] = t1;
-		$[30] = t2;
-		$[31] = t3;
-		$[32] = t4;
-		$[33] = t5;
-	} else t5 = $[33];
+		$[30] = T0;
+		$[31] = t1;
+		$[32] = t2;
+		$[33] = t3;
+		$[34] = t4;
+		$[35] = t5;
+	} else t5 = $[35];
 	return t5;
 }
 const PRESSABLE = "a, button, input, textarea, select, [role=\"button\"], [contenteditable=\"true\"]";
@@ -305,76 +337,80 @@ const PRESSABLE = "a, button, input, textarea, select, [role=\"button\"], [conte
 * placeholder it was given in every state.
 */
 function FieldInput(t0) {
-	const $ = c(19);
-	const { numeric: t1, placeholder, prefix, suffix, ...props$3 } = t0;
+	const $ = c(20);
+	const { numeric: t1, placeholder, prefix, suffix, ...props$1 } = t0;
 	const numeric = t1 === void 0 ? false : t1;
 	const box = useContext(BoxContext);
+	const validation = useContext(FieldErrorContext);
 	const T0 = Input;
 	const t2 = placeholder ?? (box.label === "floating" ? " " : void 0);
-	let t3;
+	const t3 = commitWhileInvalid(validation?.isInvalid ?? false, props$1.onInput);
+	let t4;
 	if ($[0] !== box || $[1] !== numeric) {
-		t3 = (state) => props(fieldChromeStyles.input, box.underLabel && fieldChromeStyles.inputUnderLabel, box.label === "floating" && fieldChromeStyles.inputUnderFloatingLabel, numeric && fieldChromeStyles.numeric, state.isDisabled && fieldChromeStyles.inputDisabled);
+		t4 = (state) => props(fieldChromeStyles.input, box.underLabel && fieldChromeStyles.inputUnderLabel, box.label === "floating" && fieldChromeStyles.inputUnderFloatingLabel, numeric && fieldChromeStyles.numeric, state.isDisabled && fieldChromeStyles.inputDisabled);
 		$[0] = box;
 		$[1] = numeric;
-		$[2] = t3;
-	} else t3 = $[2];
-	const t4 = mergeStatefulStyles(t3, props$3);
-	let t5;
-	if ($[3] !== T0 || $[4] !== props$3 || $[5] !== t2 || $[6] !== t4) {
-		t5 = /* @__PURE__ */ jsx(T0, {
+		$[2] = t4;
+	} else t4 = $[2];
+	const t5 = mergeStatefulStyles(t4, props$1);
+	let t6;
+	if ($[3] !== T0 || $[4] !== props$1 || $[5] !== t2 || $[6] !== t3 || $[7] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
 			placeholder: t2,
-			...props$3,
-			...t4
+			...props$1,
+			onInput: t3,
+			...t5
 		});
 		$[3] = T0;
-		$[4] = props$3;
+		$[4] = props$1;
 		$[5] = t2;
-		$[6] = t4;
+		$[6] = t3;
 		$[7] = t5;
-	} else t5 = $[7];
-	const control = t5;
-	if (prefix === void 0 && suffix === void 0) return control;
-	let t6;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = props(fieldChromeStyles.affixLine);
 		$[8] = t6;
 	} else t6 = $[8];
+	const control = t6;
+	if (prefix === void 0 && suffix === void 0) return control;
 	let t7;
-	if ($[9] !== box || $[10] !== prefix) {
-		t7 = prefix === void 0 ? null : /* @__PURE__ */ jsx("span", {
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = props(fieldChromeStyles.affixLine);
+		$[9] = t7;
+	} else t7 = $[9];
+	let t8;
+	if ($[10] !== box || $[11] !== prefix) {
+		t8 = prefix === void 0 ? null : /* @__PURE__ */ jsx("span", {
 			...props(fieldChromeStyles.affix, box.underLabel && fieldChromeStyles.inputUnderLabel),
 			children: prefix
 		});
-		$[9] = box;
-		$[10] = prefix;
-		$[11] = t7;
-	} else t7 = $[11];
-	let t8;
-	if ($[12] !== box || $[13] !== suffix) {
-		t8 = suffix === void 0 ? null : /* @__PURE__ */ jsx("span", {
+		$[10] = box;
+		$[11] = prefix;
+		$[12] = t8;
+	} else t8 = $[12];
+	let t9;
+	if ($[13] !== box || $[14] !== suffix) {
+		t9 = suffix === void 0 ? null : /* @__PURE__ */ jsx("span", {
 			...props(fieldChromeStyles.affix, box.underLabel && fieldChromeStyles.inputUnderLabel),
 			children: suffix
 		});
-		$[12] = box;
-		$[13] = suffix;
-		$[14] = t8;
-	} else t8 = $[14];
-	let t9;
-	if ($[15] !== control || $[16] !== t7 || $[17] !== t8) {
-		t9 = /* @__PURE__ */ jsxs("span", {
-			...t6,
+		$[13] = box;
+		$[14] = suffix;
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== control || $[17] !== t8 || $[18] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("span", {
+			...t7,
 			children: [
-				t7,
+				t8,
 				control,
-				t8
+				t9
 			]
 		});
-		$[15] = control;
-		$[16] = t7;
+		$[16] = control;
 		$[17] = t8;
 		$[18] = t9;
-	} else t9 = $[18];
-	return t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	return t10;
 }
 /**
 * A date or a time's segments, in a {@link FieldBox}: React Aria's
@@ -425,70 +461,74 @@ function FieldSegments(t0) {
 * of the two is taller.
 */
 function FieldTextArea(t0) {
-	const $ = c(17);
+	const $ = c(18);
 	const { autosize: t1, placeholder, ...props$4 } = t0;
 	const autosize = t1 === void 0 ? false : t1;
 	const box = useContext(BoxContext);
 	const context = useSlottedContext(TextAreaContext);
+	const validation = useContext(FieldErrorContext);
 	const value = typeof context?.value === "string" ? context.value : "";
 	const T0 = TextArea;
 	const t2 = placeholder ?? (box.label === "floating" ? " " : void 0);
-	let t3;
+	const t3 = commitWhileInvalid(validation?.isInvalid ?? false, props$4.onInput);
+	let t4;
 	if ($[0] !== autosize || $[1] !== box) {
-		t3 = (state) => props(fieldChromeStyles.input, box.underLabel && fieldChromeStyles.inputUnderLabel, box.label === "floating" && fieldChromeStyles.inputUnderFloatingLabel, fieldChromeStyles.textArea, autosize && fieldChromeStyles.textAreaAutosize, autosize && fieldChromeStyles.autosizeCell, state.isDisabled && fieldChromeStyles.inputDisabled);
+		t4 = (state) => props(fieldChromeStyles.input, box.underLabel && fieldChromeStyles.inputUnderLabel, box.label === "floating" && fieldChromeStyles.inputUnderFloatingLabel, fieldChromeStyles.textArea, autosize && fieldChromeStyles.textAreaAutosize, autosize && fieldChromeStyles.autosizeCell, state.isDisabled && fieldChromeStyles.inputDisabled);
 		$[0] = autosize;
 		$[1] = box;
-		$[2] = t3;
-	} else t3 = $[2];
-	const t4 = mergeStatefulStyles(t3, props$4);
-	let t5;
-	if ($[3] !== T0 || $[4] !== props$4 || $[5] !== t2 || $[6] !== t4) {
-		t5 = /* @__PURE__ */ jsx(T0, {
+		$[2] = t4;
+	} else t4 = $[2];
+	const t5 = mergeStatefulStyles(t4, props$4);
+	let t6;
+	if ($[3] !== T0 || $[4] !== props$4 || $[5] !== t2 || $[6] !== t3 || $[7] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
 			placeholder: t2,
 			...props$4,
-			...t4
+			onInput: t3,
+			...t5
 		});
 		$[3] = T0;
 		$[4] = props$4;
 		$[5] = t2;
-		$[6] = t4;
+		$[6] = t3;
 		$[7] = t5;
-	} else t5 = $[7];
-	const control = t5;
-	if (!autosize) return control;
-	let t6;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = props(fieldChromeStyles.autosize);
 		$[8] = t6;
 	} else t6 = $[8];
+	const control = t6;
+	if (!autosize) return control;
 	let t7;
-	if ($[9] !== box.underLabel) {
-		t7 = props(fieldChromeStyles.input, box.underLabel && fieldChromeStyles.inputUnderLabel, fieldChromeStyles.replica, fieldChromeStyles.autosizeCell);
-		$[9] = box.underLabel;
-		$[10] = t7;
-	} else t7 = $[10];
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = props(fieldChromeStyles.autosize);
+		$[9] = t7;
+	} else t7 = $[9];
 	let t8;
-	if ($[11] !== t7 || $[12] !== value) {
-		t8 = /* @__PURE__ */ jsxs("div", {
+	if ($[10] !== box.underLabel) {
+		t8 = props(fieldChromeStyles.input, box.underLabel && fieldChromeStyles.inputUnderLabel, fieldChromeStyles.replica, fieldChromeStyles.autosizeCell);
+		$[10] = box.underLabel;
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== t8 || $[13] !== value) {
+		t9 = /* @__PURE__ */ jsxs("div", {
 			"aria-hidden": "true",
-			...t7,
+			...t8,
 			children: [value, " "]
 		});
-		$[11] = t7;
-		$[12] = value;
-		$[13] = t8;
-	} else t8 = $[13];
-	let t9;
-	if ($[14] !== control || $[15] !== t8) {
-		t9 = /* @__PURE__ */ jsxs("div", {
-			...t6,
-			children: [control, t8]
+		$[12] = t8;
+		$[13] = value;
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== control || $[16] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			...t7,
+			children: [control, t9]
 		});
-		$[14] = control;
-		$[15] = t8;
+		$[15] = control;
 		$[16] = t9;
-	} else t9 = $[16];
-	return t9;
+		$[17] = t10;
+	} else t10 = $[17];
+	return t10;
 }
 /**
 * The press target over a {@link FieldBox} whose whole surface opens
@@ -538,19 +578,19 @@ function FieldTrigger(props$5) {
 */
 function FieldValue(t0) {
 	const $ = c(3);
-	const { isFocused: t1, isPlaceholder: t2, ...props$1 } = t0;
+	const { isFocused: t1, isPlaceholder: t2, ...props$3 } = t0;
 	const isFocused = t1 === void 0 ? false : t1;
 	const isPlaceholder = t2 === void 0 ? false : t2;
 	const box = useContext(BoxContext);
 	const hidden = isPlaceholder && box.label === "floating" && !isFocused;
-	const t3 = mergeStyles(props(fieldChromeStyles.input, fieldChromeStyles.value, box.underLabel && fieldChromeStyles.inputUnderLabel, isPlaceholder && fieldChromeStyles.valuePlaceholder, hidden && fieldChromeStyles.valuePlaceholderHidden), props$1);
+	const t3 = mergeStyles(props(fieldChromeStyles.input, fieldChromeStyles.value, box.underLabel && fieldChromeStyles.inputUnderLabel, isPlaceholder && fieldChromeStyles.valuePlaceholder, hidden && fieldChromeStyles.valuePlaceholderHidden), props$3);
 	let t4;
-	if ($[0] !== props$1 || $[1] !== t3) {
+	if ($[0] !== props$3 || $[1] !== t3) {
 		t4 = /* @__PURE__ */ jsx("span", {
-			...props$1,
+			...props$3,
 			...t3
 		});
-		$[0] = props$1;
+		$[0] = props$3;
 		$[1] = t3;
 		$[2] = t4;
 	} else t4 = $[2];
@@ -674,7 +714,7 @@ function FieldLabel(t0) {
 * the field's validation state is read for.
 */
 function FieldMessage(t0) {
-	const $ = c(32);
+	const $ = c(34);
 	const { characterCount: t1, characterLimitLabel, description, error, errorId, inset: t2, maxLength, reserve: t3 } = t0;
 	const characterCount = t1 === void 0 ? false : t1;
 	const inset = t2 === void 0 ? true : t2;
@@ -709,7 +749,7 @@ function FieldMessage(t0) {
 		$[5] = t5;
 	} else t5 = $[5];
 	const hidden = t5;
-	if (!invalid && description === void 0 && !characterCount && !(insideForm && reserve)) return hidden;
+	const collapsed = !invalid && description === void 0 && !characterCount && !(insideForm && reserve);
 	const value = input?.value ?? textArea?.value ?? "";
 	const length = String(value).length;
 	const hint = invalid ? void 0 : description;
@@ -754,53 +794,64 @@ function FieldMessage(t0) {
 	} else t8 = $[14];
 	const written = t8;
 	let t9;
-	if ($[15] !== inset) {
-		t9 = props(fieldChromeStyles.message, fieldChromeStyles.messageLine, inset && fieldChromeStyles.messageInset);
-		$[15] = inset;
-		$[16] = t9;
-	} else t9 = $[16];
+	if ($[15] !== collapsed || $[16] !== inset) {
+		t9 = props(fieldChromeStyles.message, fieldChromeStyles.messageLine, inset && fieldChromeStyles.messageInset, collapsed && fieldChromeStyles.messageLineCollapsed);
+		$[15] = collapsed;
+		$[16] = inset;
+		$[17] = t9;
+	} else t9 = $[17];
 	let t10;
-	if ($[17] !== error || $[18] !== validation || $[19] !== written) {
-		t10 = validation === null && error !== void 0 ? written : /* @__PURE__ */ jsx(FieldError, {
-			...props(fieldChromeStyles.message, fieldChromeStyles.messageError),
-			children: error
-		});
-		$[17] = error;
-		$[18] = validation;
-		$[19] = written;
-		$[20] = t10;
-	} else t10 = $[20];
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = props(fieldChromeStyles.messageRegion);
+		$[18] = t10;
+	} else t10 = $[18];
 	let t11;
-	if ($[21] !== characterCount || $[22] !== invalid || $[23] !== length || $[24] !== locale || $[25] !== maxLength) {
-		t11 = characterCount ? /* @__PURE__ */ jsx("span", {
+	if ($[19] !== error || $[20] !== validation || $[21] !== written) {
+		t11 = /* @__PURE__ */ jsx("span", {
+			"aria-atomic": "true",
+			"aria-live": "polite",
+			...t10,
+			children: validation === null && error !== void 0 ? written : /* @__PURE__ */ jsx(FieldError, {
+				...props(fieldChromeStyles.message, fieldChromeStyles.messageError),
+				children: error
+			})
+		});
+		$[19] = error;
+		$[20] = validation;
+		$[21] = written;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== characterCount || $[24] !== invalid || $[25] !== length || $[26] !== locale || $[27] !== maxLength) {
+		t12 = characterCount ? /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			...props(fieldChromeStyles.message, fieldChromeStyles.counter, invalid && fieldChromeStyles.messageError),
 			children: countIn(locale, length, maxLength)
 		}) : null;
-		$[21] = characterCount;
-		$[22] = invalid;
-		$[23] = length;
-		$[24] = locale;
-		$[25] = maxLength;
-		$[26] = t11;
-	} else t11 = $[26];
-	let t12;
-	if ($[27] !== described || $[28] !== t10 || $[29] !== t11 || $[30] !== t9) {
-		t12 = /* @__PURE__ */ jsxs("div", {
+		$[23] = characterCount;
+		$[24] = invalid;
+		$[25] = length;
+		$[26] = locale;
+		$[27] = maxLength;
+		$[28] = t12;
+	} else t12 = $[28];
+	let t13;
+	if ($[29] !== described || $[30] !== t11 || $[31] !== t12 || $[32] !== t9) {
+		t13 = /* @__PURE__ */ jsxs("div", {
 			...t9,
 			children: [
-				t10,
+				t11,
 				described,
-				t11
+				t12
 			]
 		});
-		$[27] = described;
-		$[28] = t10;
-		$[29] = t11;
-		$[30] = t9;
+		$[29] = described;
+		$[30] = t11;
 		$[31] = t12;
-	} else t12 = $[31];
-	return t12;
+		$[32] = t9;
+		$[33] = t13;
+	} else t13 = $[33];
+	return t13;
 }
 /**
 * The same asterisk for a label that is not a field's own — a checkbox's, a