@kanso-labs/kanso-ui 0.43.7 → 0.44.1

package/dist/field/index.js

@@ -2,9 +2,9 @@ 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 { focusesControl } from "./press.js";
 import { useInsideForm } from "./root.js";
 import { fieldChromeStyles, groupStyles } from "./styles.js";
+import { focusesControl } from "./press.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext, useId } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -62,7 +62,7 @@ function boxContent(label, children, endInset, floatingLabel, isFocused, isPopul
 * for them. See the outlined variant's note above.
 */
 function BoxContent(t0) {
-	const $ = c(47);
+	const $ = c(50);
 	const { children, endInset, floatingLabel, isFocused, isPopulated, isRequired, label, leading, multiline, state, trailing, trigger, variant } = t0;
 	const read = useFieldPopulated();
 	const populated = isPopulated ?? read;
@@ -74,7 +74,7 @@ function BoxContent(t0) {
 	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, endInset !== "0px" && fieldChromeStyles.outlineEndInset(`calc(${spacing.lg} - ${spacing.xs} + ${endInset})`)),
+			...props(fieldChromeStyles.outline, focused && fieldChromeStyles.outlineFocused, leading !== void 0 && (focused ? fieldChromeStyles.outlineLeadingFocused : fieldChromeStyles.outlineLeading), trailing !== void 0 && (focused ? fieldChromeStyles.outlineTrailingFocused : fieldChromeStyles.outlineTrailing), endInset !== "0px" && fieldChromeStyles.outlineEndInset(`calc(${spacing.lg} - ${spacing.xs} - ${focused ? "2px" : "1px"} + ${endInset})`)),
 			children: /* @__PURE__ */ jsx("legend", {
 				...props(fieldChromeStyles.outlineNotch, floated && fieldChromeStyles.outlineNotchOpen),
 				children: floated ? /* @__PURE__ */ jsxs(Fragment$1, { children: [label, isRequired ? REQUIRED_MARK : null] }) : null
@@ -126,45 +126,49 @@ function BoxContent(t0) {
 		$[24] = t6;
 	} else t6 = $[24];
 	let t7;
-	if ($[25] !== isRequired || $[26] !== label || $[27] !== t5 || $[28] !== t6) {
+	if ($[25] !== isRequired || $[26] !== label || $[27] !== outlined || $[28] !== t5 || $[29] !== t6) {
 		t7 = /* @__PURE__ */ jsx(FieldLabel, {
 			isRequired,
+			outlined,
 			state: t5,
 			...t6,
 			children: label
 		});
 		$[25] = isRequired;
 		$[26] = label;
-		$[27] = t5;
-		$[28] = t6;
-		$[29] = t7;
-	} else t7 = $[29];
+		$[27] = outlined;
+		$[28] = t5;
+		$[29] = t6;
+		$[30] = t7;
+	} else t7 = $[30];
 	let t8;
-	if ($[30] !== children || $[31] !== t4 || $[32] !== t7) {
+	if ($[31] !== children || $[32] !== t4 || $[33] !== t7) {
 		t8 = /* @__PURE__ */ jsxs("div", {
 			...t4,
 			children: [t7, children]
 		});
-		$[30] = children;
-		$[31] = t4;
-		$[32] = t7;
-		$[33] = t8;
-	} else t8 = $[33];
+		$[31] = children;
+		$[32] = t4;
+		$[33] = t7;
+		$[34] = t8;
+	} else t8 = $[34];
 	let t9;
-	if ($[34] !== multiline || $[35] !== outlined || $[36] !== state.isDisabled || $[37] !== state.isInvalid || $[38] !== trailing) {
+	if ($[35] !== focused || $[36] !== multiline || $[37] !== outlined || $[38] !== state.isDisabled || $[39] !== state.isHovered || $[40] !== state.isInvalid || $[41] !== 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),
+			...props(fieldChromeStyles.icon, multiline && fieldChromeStyles.iconMultiline, outlined && fieldChromeStyles.iconOutlined, state.isInvalid && (state.isHovered && !focused ? fieldChromeStyles.iconErrorHovered : fieldChromeStyles.iconError), state.isDisabled && fieldChromeStyles.iconDisabled),
 			children: trailing
 		});
-		$[34] = multiline;
-		$[35] = outlined;
-		$[36] = state.isDisabled;
-		$[37] = state.isInvalid;
-		$[38] = trailing;
-		$[39] = t9;
-	} else t9 = $[39];
+		$[35] = focused;
+		$[36] = multiline;
+		$[37] = outlined;
+		$[38] = state.isDisabled;
+		$[39] = state.isHovered;
+		$[40] = state.isInvalid;
+		$[41] = trailing;
+		$[42] = t9;
+	} else t9 = $[42];
 	let t10;
-	if ($[40] !== t1 || $[41] !== t2 || $[42] !== t3 || $[43] !== t8 || $[44] !== t9 || $[45] !== trigger) {
+	if ($[43] !== t1 || $[44] !== t2 || $[45] !== t3 || $[46] !== t8 || $[47] !== t9 || $[48] !== trigger) {
 		t10 = /* @__PURE__ */ jsxs(BoxContext, {
 			value: t1,
 			children: [
@@ -175,19 +179,19 @@ function BoxContent(t0) {
 				t9
 			]
 		});
-		$[40] = t1;
-		$[41] = t2;
-		$[42] = t3;
-		$[43] = t8;
-		$[44] = t9;
-		$[45] = trigger;
-		$[46] = t10;
-	} else t10 = $[46];
+		$[43] = t1;
+		$[44] = t2;
+		$[45] = t3;
+		$[46] = t8;
+		$[47] = t9;
+		$[48] = trigger;
+		$[49] = t10;
+	} else t10 = $[49];
 	return t10;
 }
 function boxStyles(floatingLabel, isFocused, multiline, leading, trailing, variant) {
 	const outlined = variant === "outlined";
-	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));
+	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), !outlined && state.isHovered && (state.isInvalid ? fieldChromeStyles.boxErrorHovered : fieldChromeStyles.boxHovered), 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
@@ -342,90 +346,92 @@ function FieldBox(t0) {
 * it was in no name and no description, and a reader heard the label alone.
 */
 function FieldInput(t0) {
-	const $ = c(23);
-	const { numeric: t1, placeholder, prefix, suffix, ...props$1 } = t0;
-	const numeric = t1 === void 0 ? false : t1;
+	const $ = c(24);
+	const { leftToRight: t1, numeric: t2, placeholder, prefix, suffix, ...props$3 } = t0;
+	const leftToRight = t1 === void 0 ? false : t1;
+	const numeric = t2 === void 0 ? false : t2;
 	const box = useContext(BoxContext);
 	const validation = useContext(FieldErrorContext);
 	const prefixId = useId();
 	const suffixId = useId();
 	const field = useSlottedContext(InputContext);
-	const describedBy = idsOf(prefix === void 0 ? void 0 : prefixId, suffix === void 0 ? void 0 : suffixId, field?.["aria-describedby"], props$1["aria-describedby"]);
+	const describedBy = idsOf(prefix === void 0 ? void 0 : prefixId, suffix === void 0 ? void 0 : suffixId, field?.["aria-describedby"], props$3["aria-describedby"]);
 	const T0 = Input;
-	const t2 = placeholder ?? (box.label === "floating" ? " " : void 0);
-	const t3 = commitWhileInvalid(validation?.isInvalid ?? false, props$1.onInput);
-	let t4;
-	if ($[0] !== box || $[1] !== numeric) {
-		t4 = (state) => props(fieldChromeStyles.input, box.underLabel && fieldChromeStyles.inputUnderLabel, box.label === "floating" && fieldChromeStyles.inputUnderFloatingLabel, numeric && fieldChromeStyles.numeric, state.isDisabled && fieldChromeStyles.inputDisabled);
+	const t3 = placeholder ?? (box.label === "floating" ? " " : void 0);
+	const t4 = commitWhileInvalid(validation?.isInvalid ?? false, props$3.onInput);
+	let t5;
+	if ($[0] !== box || $[1] !== leftToRight || $[2] !== numeric) {
+		t5 = (state) => props(fieldChromeStyles.input, box.underLabel && fieldChromeStyles.inputUnderLabel, box.label === "floating" && fieldChromeStyles.inputUnderFloatingLabel, numeric && fieldChromeStyles.numeric, leftToRight && fieldChromeStyles.leftToRight, state.isInvalid && fieldChromeStyles.inputInvalid, state.isDisabled && fieldChromeStyles.inputDisabled);
 		$[0] = box;
-		$[1] = numeric;
-		$[2] = t4;
-	} else t4 = $[2];
-	const t5 = mergeStatefulStyles(t4, props$1);
-	let t6;
-	if ($[3] !== T0 || $[4] !== describedBy || $[5] !== props$1 || $[6] !== t2 || $[7] !== t3 || $[8] !== t5) {
-		t6 = /* @__PURE__ */ jsx(T0, {
-			placeholder: t2,
-			...props$1,
+		$[1] = leftToRight;
+		$[2] = numeric;
+		$[3] = t5;
+	} else t5 = $[3];
+	const t6 = mergeStatefulStyles(t5, props$3);
+	let t7;
+	if ($[4] !== T0 || $[5] !== describedBy || $[6] !== props$3 || $[7] !== t3 || $[8] !== t4 || $[9] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T0, {
+			placeholder: t3,
+			...props$3,
 			"aria-describedby": describedBy,
-			onInput: t3,
-			...t5
+			onInput: t4,
+			...t6
 		});
-		$[3] = T0;
-		$[4] = describedBy;
-		$[5] = props$1;
-		$[6] = t2;
+		$[4] = T0;
+		$[5] = describedBy;
+		$[6] = props$3;
 		$[7] = t3;
-		$[8] = t5;
+		$[8] = t4;
 		$[9] = t6;
-	} else t6 = $[9];
-	const control = t6;
-	if (prefix === void 0 && suffix === void 0) return control;
-	let t7;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = props(fieldChromeStyles.affixLine);
 		$[10] = t7;
 	} else t7 = $[10];
+	const control = t7;
+	if (prefix === void 0 && suffix === void 0) return control;
 	let t8;
-	if ($[11] !== box || $[12] !== prefix || $[13] !== prefixId) {
-		t8 = prefix === void 0 ? null : /* @__PURE__ */ jsx("span", {
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = props(fieldChromeStyles.affixLine);
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== box || $[13] !== prefix || $[14] !== prefixId) {
+		t9 = prefix === void 0 ? null : /* @__PURE__ */ jsx("span", {
 			id: prefixId,
 			...props(fieldChromeStyles.affix, box.underLabel && fieldChromeStyles.inputUnderLabel),
 			children: prefix
 		});
-		$[11] = box;
-		$[12] = prefix;
-		$[13] = prefixId;
-		$[14] = t8;
-	} else t8 = $[14];
-	let t9;
-	if ($[15] !== box || $[16] !== suffix || $[17] !== suffixId) {
-		t9 = suffix === void 0 ? null : /* @__PURE__ */ jsx("span", {
+		$[12] = box;
+		$[13] = prefix;
+		$[14] = prefixId;
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== box || $[17] !== suffix || $[18] !== suffixId) {
+		t10 = suffix === void 0 ? null : /* @__PURE__ */ jsx("span", {
 			id: suffixId,
 			...props(fieldChromeStyles.affix, box.underLabel && fieldChromeStyles.inputUnderLabel),
 			children: suffix
 		});
-		$[15] = box;
-		$[16] = suffix;
-		$[17] = suffixId;
-		$[18] = t9;
-	} else t9 = $[18];
-	let t10;
-	if ($[19] !== control || $[20] !== t8 || $[21] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("span", {
-			...t7,
+		$[16] = box;
+		$[17] = suffix;
+		$[18] = suffixId;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== control || $[21] !== t10 || $[22] !== t9) {
+		t11 = /* @__PURE__ */ jsxs("span", {
+			...t8,
 			children: [
-				t8,
+				t9,
 				control,
-				t9
+				t10
 			]
 		});
-		$[19] = control;
-		$[20] = t8;
-		$[21] = t9;
-		$[22] = t10;
-	} else t10 = $[22];
-	return t10;
+		$[20] = control;
+		$[21] = t10;
+		$[22] = t9;
+		$[23] = t11;
+	} else t11 = $[23];
+	return t11;
 }
 /**
 * A date or a time's segments, in a {@link FieldBox}: React Aria's
@@ -488,7 +494,7 @@ function FieldTextArea(t0) {
 	const t3 = commitWhileInvalid(validation?.isInvalid ?? false, props$2.onInput);
 	let t4;
 	if ($[0] !== autosize || $[1] !== box) {
-		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);
+		t4 = (state) => props(fieldChromeStyles.input, box.underLabel && fieldChromeStyles.inputUnderLabel, box.label === "floating" && fieldChromeStyles.inputUnderFloatingLabel, fieldChromeStyles.textArea, autosize && fieldChromeStyles.textAreaAutosize, autosize && fieldChromeStyles.autosizeCell, state.isInvalid && fieldChromeStyles.inputInvalid, state.isDisabled && fieldChromeStyles.inputDisabled);
 		$[0] = autosize;
 		$[1] = box;
 		$[2] = t4;
@@ -555,21 +561,21 @@ function FieldTextArea(t0) {
 * the fill, the underline and the focus indicator, and it lights up while
 * this has focus because the indicator follows focus within.
 */
-function FieldTrigger(props$5) {
+function FieldTrigger(props$4) {
 	const $ = c(5);
 	let t0;
-	if ($[0] !== props$5) {
-		t0 = mergeStatefulStyles(props(fieldChromeStyles.trigger), props$5);
-		$[0] = props$5;
+	if ($[0] !== props$4) {
+		t0 = mergeStatefulStyles(props(fieldChromeStyles.trigger), props$4);
+		$[0] = props$4;
 		$[1] = t0;
 	} else t0 = $[1];
 	let t1;
-	if ($[2] !== props$5 || $[3] !== t0) {
+	if ($[2] !== props$4 || $[3] !== t0) {
 		t1 = /* @__PURE__ */ jsx(Button, {
-			...props$5,
+			...props$4,
 			...t0
 		});
-		$[2] = props$5;
+		$[2] = props$4;
 		$[3] = t0;
 		$[4] = t1;
 	} else t1 = $[4];
@@ -593,19 +599,19 @@ function FieldTrigger(props$5) {
 */
 function FieldValue(t0) {
 	const $ = c(3);
-	const { isFocused: t1, isPlaceholder: t2, ...props$4 } = t0;
+	const { isFocused: t1, isPlaceholder: t2, ...props$1 } = 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$4);
+	const t3 = mergeStyles(props(fieldChromeStyles.input, fieldChromeStyles.value, box.underLabel && fieldChromeStyles.inputUnderLabel, isPlaceholder && fieldChromeStyles.valuePlaceholder, hidden && fieldChromeStyles.valuePlaceholderHidden), props$1);
 	let t4;
-	if ($[0] !== props$4 || $[1] !== t3) {
+	if ($[0] !== props$1 || $[1] !== t3) {
 		t4 = /* @__PURE__ */ jsx("span", {
-			...props$4,
+			...props$1,
 			...t3
 		});
-		$[0] = props$4;
+		$[0] = props$1;
 		$[1] = t3;
 		$[2] = t4;
 	} else t4 = $[2];
@@ -668,18 +674,21 @@ function FieldLabel(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		const { children: t3, isRequired: t4, state: t5, variant: t6, ...props$3 } = t0;
+		const { children: t3, isRequired: t4, outlined: t5, state: t6, variant: t7, ...props$5 } = t0;
 		children = t3;
 		isRequired = t4 === void 0 ? false : t4;
-		const state = t5 === void 0 ? NO_STATE : t5;
-		const variant = t6 === void 0 ? "field" : t6;
-		const { isDisabled: t7, isFocusWithin: t8, isInvalid: t9 } = state;
-		const isDisabled = t7 === void 0 ? false : t7;
-		const isFocusWithin = t8 === void 0 ? false : t8;
-		const isInvalid = t9 === void 0 ? false : t9;
+		const outlined = t5 === void 0 ? false : t5;
+		const state = t6 === void 0 ? NO_STATE : t6;
+		const variant = t7 === void 0 ? "field" : t7;
+		const { isDisabled: t8, isFocusWithin: t9, isHovered: t10, isInvalid: t11 } = state;
+		const isDisabled = t8 === void 0 ? false : t8;
+		const isFocusWithin = t9 === void 0 ? false : t9;
+		const isHovered = t10 === void 0 ? false : t10;
+		const isInvalid = t11 === void 0 ? false : t11;
+		const hovered = !isDisabled && !isFocusWithin && isHovered;
 		T0 = Label;
-		t1 = props$3;
-		t2 = mergeStyles(props(fieldChromeStyles.label, variant === "group" && groupStyles.label, isDisabled && fieldChromeStyles.labelDisabled, isInvalid && fieldChromeStyles.labelError, !isDisabled && !isInvalid && isFocusWithin && fieldChromeStyles.labelFocused), props$3);
+		t1 = props$5;
+		t2 = mergeStyles(props(fieldChromeStyles.label, variant === "group" && groupStyles.label, isDisabled && fieldChromeStyles.labelDisabled, isInvalid && fieldChromeStyles.labelError, !isDisabled && !isInvalid && isFocusWithin && fieldChromeStyles.labelFocused, hovered && isInvalid && fieldChromeStyles.labelErrorHovered, hovered && !isInvalid && outlined && fieldChromeStyles.labelHovered), props$5);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = children;
@@ -720,11 +729,13 @@ function FieldLabel(t0) {
 * the field's validation state is read for.
 */
 function FieldMessage(t0) {
-	const $ = c(34);
-	const { characterCount: t1, characterLimitLabel, description, error, errorId, inset: t2, maxLength, reserve: t3 } = t0;
+	const $ = c(41);
+	const { characterCount: t1, characterLimitLabel, characterLimitReachedLabel, description, error, errorId, indent: t2, inset: t3, isDisabled: t4, maxLength, reserve: t5 } = t0;
 	const characterCount = t1 === void 0 ? false : t1;
-	const inset = t2 === void 0 ? true : t2;
-	const reserve = t3 === void 0 ? true : t3;
+	const indent = t2 === void 0 ? false : t2;
+	const inset = t3 === void 0 ? true : t3;
+	const isDisabled = t4 === void 0 ? false : t4;
+	const reserve = t5 === void 0 ? true : t5;
 	const validation = useContext(FieldErrorContext);
 	const invalid = error !== void 0 || (validation?.isInvalid ?? false);
 	const { locale } = useLocale();
@@ -733,18 +744,18 @@ function FieldMessage(t0) {
 	const textArea = useSlottedContext(TextAreaContext);
 	const insideForm = useInsideForm();
 	const text = useContext(TextContext);
-	let t4;
+	let t6;
 	if ($[0] !== characterLimitLabel || $[1] !== maxLength || $[2] !== messages) {
-		t4 = maxLength === void 0 ? void 0 : characterLimitLabel ?? messages.characterLimit(maxLength);
+		t6 = maxLength === void 0 ? void 0 : characterLimitLabel ?? messages.characterLimit(maxLength);
 		$[0] = characterLimitLabel;
 		$[1] = maxLength;
 		$[2] = messages;
-		$[3] = t4;
-	} else t4 = $[3];
-	const limit = t4;
-	let t5;
+		$[3] = t6;
+	} else t6 = $[3];
+	const limit = t6;
+	let t7;
 	if ($[4] !== limit) {
-		t5 = limit === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, {
+		t7 = limit === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, {
 			elementType: "span",
 			children: /* @__PURE__ */ jsx(Text, {
 				slot: "description",
@@ -752,18 +763,19 @@ function FieldMessage(t0) {
 			})
 		});
 		$[4] = limit;
-		$[5] = t5;
-	} else t5 = $[5];
-	const hidden = t5;
+		$[5] = t7;
+	} else t7 = $[5];
+	const hidden = t7;
 	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;
-	let t6;
-	if ($[6] !== hidden || $[7] !== hint || $[8] !== limit) {
-		t6 = hint === void 0 ? hidden : /* @__PURE__ */ jsxs(Text, {
+	const reached = characterCount && maxLength !== void 0 && length >= maxLength ? characterLimitReachedLabel ?? messages.characterLimitReached : null;
+	let t8;
+	if ($[6] !== hidden || $[7] !== hint || $[8] !== isDisabled || $[9] !== limit) {
+		t8 = hint === void 0 ? hidden : /* @__PURE__ */ jsxs(Text, {
 			slot: "description",
-			...props(fieldChromeStyles.message),
+			...props(fieldChromeStyles.message, isDisabled && fieldChromeStyles.messageDisabled),
 			children: [hint, limit === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, {
 				elementType: "span",
 				children: ` ${limit}`
@@ -771,20 +783,21 @@ function FieldMessage(t0) {
 		});
 		$[6] = hidden;
 		$[7] = hint;
-		$[8] = limit;
-		$[9] = t6;
-	} else t6 = $[9];
-	const described = t6;
+		$[8] = isDisabled;
+		$[9] = limit;
+		$[10] = t8;
+	} else t8 = $[10];
+	const described = t8;
 	const errorSlot = text !== null && typeof text === "object" && "slots" in text && text.slots?.errorMessage !== void 0;
-	let t7;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = props(fieldChromeStyles.message, fieldChromeStyles.messageError);
-		$[10] = t7;
-	} else t7 = $[10];
-	const messageStyles = t7;
-	let t8;
-	if ($[11] !== error || $[12] !== errorId || $[13] !== errorSlot) {
-		t8 = errorSlot ? /* @__PURE__ */ jsx(Text, {
+	let t9;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = props(fieldChromeStyles.message, fieldChromeStyles.messageError);
+		$[11] = t9;
+	} else t9 = $[11];
+	const messageStyles = t9;
+	let t10;
+	if ($[12] !== error || $[13] !== errorId || $[14] !== errorSlot) {
+		t10 = errorSlot ? /* @__PURE__ */ jsx(Text, {
 			slot: "errorMessage",
 			...messageStyles,
 			children: error
@@ -793,71 +806,85 @@ function FieldMessage(t0) {
 			...messageStyles,
 			children: error
 		});
-		$[11] = error;
-		$[12] = errorId;
-		$[13] = errorSlot;
-		$[14] = t8;
-	} else t8 = $[14];
-	const written = t8;
-	let t9;
-	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 ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = props(fieldChromeStyles.messageRegion);
-		$[18] = t10;
-	} else t10 = $[18];
+		$[12] = error;
+		$[13] = errorId;
+		$[14] = errorSlot;
+		$[15] = t10;
+	} else t10 = $[15];
+	const written = t10;
 	let t11;
-	if ($[19] !== error || $[20] !== validation || $[21] !== written) {
-		t11 = /* @__PURE__ */ jsx("span", {
+	if ($[16] !== collapsed || $[17] !== indent || $[18] !== inset) {
+		t11 = props(fieldChromeStyles.message, fieldChromeStyles.messageLine, indent && fieldChromeStyles.messageIndent, inset && fieldChromeStyles.messageInset, collapsed && fieldChromeStyles.messageLineCollapsed);
+		$[16] = collapsed;
+		$[17] = indent;
+		$[18] = inset;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = props(fieldChromeStyles.messageRegion);
+		$[20] = t12;
+	} else t12 = $[20];
+	let t13;
+	if ($[21] !== error || $[22] !== validation || $[23] !== written) {
+		t13 = /* @__PURE__ */ jsx("span", {
 			"aria-atomic": "true",
 			"aria-live": "polite",
-			...t10,
+			...t12,
 			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", {
+		$[21] = error;
+		$[22] = validation;
+		$[23] = written;
+		$[24] = t13;
+	} else t13 = $[24];
+	let t14;
+	if ($[25] !== characterCount || $[26] !== invalid || $[27] !== length || $[28] !== locale || $[29] !== maxLength) {
+		t14 = characterCount ? /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			...props(fieldChromeStyles.message, fieldChromeStyles.counter, invalid && fieldChromeStyles.messageError),
 			children: countIn(locale, length, maxLength)
 		}) : null;
-		$[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,
+		$[25] = characterCount;
+		$[26] = invalid;
+		$[27] = length;
+		$[28] = locale;
+		$[29] = maxLength;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	if ($[31] !== characterCount || $[32] !== maxLength || $[33] !== reached) {
+		t15 = characterCount && maxLength !== void 0 ? /* @__PURE__ */ jsx(VisuallyHidden, {
+			elementType: "output",
+			children: reached
+		}) : null;
+		$[31] = characterCount;
+		$[32] = maxLength;
+		$[33] = reached;
+		$[34] = t15;
+	} else t15 = $[34];
+	let t16;
+	if ($[35] !== described || $[36] !== t11 || $[37] !== t13 || $[38] !== t14 || $[39] !== t15) {
+		t16 = /* @__PURE__ */ jsxs("div", {
+			...t11,
 			children: [
-				t11,
+				t13,
 				described,
-				t12
+				t14,
+				t15
 			]
 		});
-		$[29] = described;
-		$[30] = t11;
-		$[31] = t12;
-		$[32] = t9;
-		$[33] = t13;
-	} else t13 = $[33];
-	return t13;
+		$[35] = described;
+		$[36] = t11;
+		$[37] = t13;
+		$[38] = t14;
+		$[39] = t15;
+		$[40] = t16;
+	} else t16 = $[40];
+	return t16;
 }
 /**
 * The same asterisk for a label that is not a field's own — a checkbox's, a