@kanso-labs/react-native-kanso-ui 0.9.0 → 0.10.0

package/dist/field/index.js

@@ -10,6 +10,7 @@ import { limitFor } from "../i18n/index.js";
 import { useLocaleOf } from "../i18n/provider.js";
 import { useInsideForm } from "../form/index.js";
 import { fieldStylesOf } from "./styles.js";
+import { FieldChevron } from "./chevron.js";
 import { c } from "react/compiler-runtime";
 import { AccessibilityInfo, Platform, Pressable, Text, TextInput, View, useWindowDimensions } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useDerivedValue, useReducedMotion, withTiming } from "react-native-reanimated";
@@ -26,6 +27,7 @@ const OUTSIDE_BOX = {
 	underLabel: false
 };
 const BoxContext = createContext(OUTSIDE_BOX);
+const SegmentsLineContext = createContext(false);
 const NO_PARTS = [];
 /**
 * How a field's control is described by the line under it: the error while
@@ -50,12 +52,13 @@ function describedBy(id, { characterLimitLabel, description, error, locale, maxL
 }
 /**
 * The box a control sits in, filled or outlined, with its label. Pressed
-* anywhere, it focuses its control. The states it draws are handed to it,
-* since the field around it is what knows them.
+* anywhere, it focuses its control, or runs its `trigger` where the box is
+* the control itself. The states it draws are handed to it, since the field
+* around it is what knows them.
 */
 function FieldBox(t0) {
-	const $ = c(72);
-	const { children, control, end, floatingLabel: t1, isDisabled: t2, isFocused: t3, isInvalid: t4, isPopulated: t5, isRequired: t6, label, leading, trailing, variant: t7 } = t0;
+	const $ = c(77);
+	const { children, control, end, floatingLabel: t1, isDisabled: t2, isFocused: t3, isInvalid: t4, isPopulated: t5, isRequired: t6, label, leading, ref, trailing, trigger, variant: t7 } = t0;
 	const floatingLabel = t1 === void 0 ? true : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
 	const isFocused = t3 === void 0 ? false : t3;
@@ -130,18 +133,23 @@ function FieldBox(t0) {
 	} else t13 = $[20];
 	const disabledContent = t13;
 	const T0 = Pressable;
-	const t14 = false;
-	const t15 = false;
-	const t16 = feedback.handlers.onHoverIn;
-	const t17 = feedback.handlers.onHoverOut;
-	let t18;
-	if ($[21] !== control) {
-		t18 = focusOf(control);
-		$[21] = control;
-		$[22] = t18;
-	} else t18 = $[22];
-	const t19 = composeStyles(styles.box, leading === void 0 ? void 0 : styles.boxLeading, trailing === void 0 ? void 0 : styles.boxTrailing, outlined ? styles.boxOutlined : void 0, isDisabled && !outlined ? styles.boxDisabled : void 0, minHeightOf(outlined ? 2 * spacing.lg + typography.bodyLargeLineHeight * fontScale : 2 * spacing.sm + (typography.bodySmallLineHeight + typography.bodyLargeLineHeight) * fontScale));
-	const t20 = outlined ? /* @__PURE__ */ jsxs(View, {
+	let t14;
+	if ($[21] !== trigger) {
+		t14 = trigger === void 0 ? NOT_A_CONTROL : triggerOf(trigger);
+		$[21] = trigger;
+		$[22] = t14;
+	} else t14 = $[22];
+	const t15 = feedback.handlers.onHoverIn;
+	const t16 = feedback.handlers.onHoverOut;
+	let t17;
+	if ($[23] !== control || $[24] !== trigger?.onPress) {
+		t17 = trigger?.onPress ?? focusOf(control);
+		$[23] = control;
+		$[24] = trigger?.onPress;
+		$[25] = t17;
+	} else t17 = $[25];
+	const t18 = composeStyles(styles.box, trigger === void 0 ? void 0 : styles.boxTrigger, leading === void 0 ? void 0 : styles.boxLeading, trailing === void 0 ? void 0 : styles.boxTrailing, outlined ? styles.boxOutlined : void 0, isDisabled && !outlined ? styles.boxDisabled : void 0, minHeightOf(outlined ? 2 * spacing.lg + typography.bodyLargeLineHeight * fontScale : 2 * spacing.sm + (typography.bodySmallLineHeight + typography.bodyLargeLineHeight) * fontScale));
+	const t19 = outlined ? /* @__PURE__ */ jsxs(View, {
 		"aria-hidden": true,
 		style: styles.outline,
 		children: [
@@ -179,25 +187,25 @@ function FieldBox(t0) {
 		style: styles.indicator,
 		width: rule.width
 	})] });
-	let t21;
-	if ($[23] !== colors.onSurfaceVariant || $[24] !== disabledContent || $[25] !== isDisabled || $[26] !== leading || $[27] !== styles.icon) {
-		t21 = leading === void 0 ? null : /* @__PURE__ */ jsx(View, {
+	let t20;
+	if ($[26] !== colors.onSurfaceVariant || $[27] !== disabledContent || $[28] !== isDisabled || $[29] !== leading || $[30] !== styles.icon) {
+		t20 = leading === void 0 ? null : /* @__PURE__ */ jsx(View, {
 			style: styles.icon,
 			children: /* @__PURE__ */ jsx(IconStyleContext, {
 				value: iconStyleOf(isDisabled ? disabledContent : colors.onSurfaceVariant),
 				children: leading
 			})
 		});
-		$[23] = colors.onSurfaceVariant;
-		$[24] = disabledContent;
-		$[25] = isDisabled;
-		$[26] = leading;
-		$[27] = styles.icon;
-		$[28] = t21;
-	} else t21 = $[28];
-	let t22;
-	if ($[29] !== floated || $[30] !== floatingLabel || $[31] !== isDisabled || $[32] !== isFocused || $[33] !== isInvalid || $[34] !== isRequired || $[35] !== label || $[36] !== variant) {
-		t22 = /* @__PURE__ */ jsx(BoxLabel, {
+		$[26] = colors.onSurfaceVariant;
+		$[27] = disabledContent;
+		$[28] = isDisabled;
+		$[29] = leading;
+		$[30] = styles.icon;
+		$[31] = t20;
+	} else t20 = $[31];
+	let t21;
+	if ($[32] !== floated || $[33] !== floatingLabel || $[34] !== isDisabled || $[35] !== isFocused || $[36] !== isInvalid || $[37] !== isRequired || $[38] !== label || $[39] !== variant) {
+		t21 = /* @__PURE__ */ jsx(BoxLabel, {
 			floated,
 			floatingLabel,
 			isDisabled,
@@ -207,107 +215,109 @@ function FieldBox(t0) {
 			variant,
 			children: label
 		});
-		$[29] = floated;
-		$[30] = floatingLabel;
-		$[31] = isDisabled;
-		$[32] = isFocused;
-		$[33] = isInvalid;
-		$[34] = isRequired;
-		$[35] = label;
-		$[36] = variant;
-		$[37] = t22;
-	} else t22 = $[37];
-	let t23;
-	if ($[38] !== floatingLabel || $[39] !== isRequired || $[40] !== label || $[41] !== outlined || $[42] !== setNotch) {
-		t23 = outlined ? /* @__PURE__ */ jsx(NotchMeasure, {
+		$[32] = floated;
+		$[33] = floatingLabel;
+		$[34] = isDisabled;
+		$[35] = isFocused;
+		$[36] = isInvalid;
+		$[37] = isRequired;
+		$[38] = label;
+		$[39] = variant;
+		$[40] = t21;
+	} else t21 = $[40];
+	let t22;
+	if ($[41] !== floatingLabel || $[42] !== isRequired || $[43] !== label || $[44] !== outlined || $[45] !== setNotch) {
+		t22 = outlined ? /* @__PURE__ */ jsx(NotchMeasure, {
 			floatingLabel,
 			isRequired,
 			onMeasure: setNotch,
 			children: label
 		}) : null;
-		$[38] = floatingLabel;
-		$[39] = isRequired;
-		$[40] = label;
-		$[41] = outlined;
-		$[42] = setNotch;
-		$[43] = t23;
-	} else t23 = $[43];
-	let t24;
-	if ($[44] !== boxControl || $[45] !== children) {
-		t24 = /* @__PURE__ */ jsx(BoxContext, {
+		$[41] = floatingLabel;
+		$[42] = isRequired;
+		$[43] = label;
+		$[44] = outlined;
+		$[45] = setNotch;
+		$[46] = t22;
+	} else t22 = $[46];
+	let t23;
+	if ($[47] !== boxControl || $[48] !== children) {
+		t23 = /* @__PURE__ */ jsx(BoxContext, {
 			value: boxControl,
 			children
 		});
-		$[44] = boxControl;
-		$[45] = children;
-		$[46] = t24;
-	} else t24 = $[46];
-	let t25;
-	if ($[47] !== styles.column || $[48] !== t22 || $[49] !== t23 || $[50] !== t24) {
-		t25 = /* @__PURE__ */ jsxs(View, {
+		$[47] = boxControl;
+		$[48] = children;
+		$[49] = t23;
+	} else t23 = $[49];
+	let t24;
+	if ($[50] !== styles.column || $[51] !== t21 || $[52] !== t22 || $[53] !== t23) {
+		t24 = /* @__PURE__ */ jsxs(View, {
 			style: styles.column,
 			children: [
+				t21,
 				t22,
-				t23,
-				t24
+				t23
 			]
 		});
-		$[47] = styles.column;
-		$[48] = t22;
-		$[49] = t23;
-		$[50] = t24;
-		$[51] = t25;
-	} else t25 = $[51];
-	let t26;
-	if ($[52] !== colors.error || $[53] !== colors.onSurfaceVariant || $[54] !== disabledContent || $[55] !== isDisabled || $[56] !== isInvalid || $[57] !== styles.icon || $[58] !== trailing) {
-		t26 = trailing === void 0 ? null : /* @__PURE__ */ jsx(View, {
+		$[50] = styles.column;
+		$[51] = t21;
+		$[52] = t22;
+		$[53] = t23;
+		$[54] = t24;
+	} else t24 = $[54];
+	let t25;
+	if ($[55] !== colors.error || $[56] !== colors.onSurfaceVariant || $[57] !== disabledContent || $[58] !== isDisabled || $[59] !== isInvalid || $[60] !== styles.icon || $[61] !== trailing) {
+		t25 = trailing === void 0 ? null : /* @__PURE__ */ jsx(View, {
 			style: styles.icon,
 			children: /* @__PURE__ */ jsx(IconStyleContext, {
 				value: iconStyleOf(isDisabled ? disabledContent : isInvalid ? colors.error : colors.onSurfaceVariant),
 				children: trailing
 			})
 		});
-		$[52] = colors.error;
-		$[53] = colors.onSurfaceVariant;
-		$[54] = disabledContent;
-		$[55] = isDisabled;
-		$[56] = isInvalid;
-		$[57] = styles.icon;
-		$[58] = trailing;
-		$[59] = t26;
-	} else t26 = $[59];
-	let t27;
-	if ($[60] !== T0 || $[61] !== end || $[62] !== feedback.handlers.onHoverIn || $[63] !== feedback.handlers.onHoverOut || $[64] !== isDisabled || $[65] !== t18 || $[66] !== t19 || $[67] !== t20 || $[68] !== t21 || $[69] !== t25 || $[70] !== t26) {
-		t27 = /* @__PURE__ */ jsxs(T0, {
-			accessible: t14,
+		$[55] = colors.error;
+		$[56] = colors.onSurfaceVariant;
+		$[57] = disabledContent;
+		$[58] = isDisabled;
+		$[59] = isInvalid;
+		$[60] = styles.icon;
+		$[61] = trailing;
+		$[62] = t25;
+	} else t25 = $[62];
+	let t26;
+	if ($[63] !== T0 || $[64] !== end || $[65] !== feedback.handlers.onHoverIn || $[66] !== feedback.handlers.onHoverOut || $[67] !== isDisabled || $[68] !== ref || $[69] !== t14 || $[70] !== t17 || $[71] !== t18 || $[72] !== t19 || $[73] !== t20 || $[74] !== t24 || $[75] !== t25) {
+		t26 = /* @__PURE__ */ jsxs(T0, {
+			...t14,
 			disabled: isDisabled,
-			focusable: t15,
-			onHoverIn: t16,
-			onHoverOut: t17,
-			onPress: t18,
-			style: t19,
+			onHoverIn: t15,
+			onHoverOut: t16,
+			onPress: t17,
+			ref,
+			style: t18,
 			children: [
+				t19,
 				t20,
-				t21,
-				t25,
+				t24,
 				end,
-				t26
+				t25
 			]
 		});
-		$[60] = T0;
-		$[61] = end;
-		$[62] = feedback.handlers.onHoverIn;
-		$[63] = feedback.handlers.onHoverOut;
-		$[64] = isDisabled;
-		$[65] = t18;
-		$[66] = t19;
-		$[67] = t20;
-		$[68] = t21;
-		$[69] = t25;
-		$[70] = t26;
-		$[71] = t27;
-	} else t27 = $[71];
-	return t27;
+		$[63] = T0;
+		$[64] = end;
+		$[65] = feedback.handlers.onHoverIn;
+		$[66] = feedback.handlers.onHoverOut;
+		$[67] = isDisabled;
+		$[68] = ref;
+		$[69] = t14;
+		$[70] = t17;
+		$[71] = t18;
+		$[72] = t19;
+		$[73] = t20;
+		$[74] = t24;
+		$[75] = t25;
+		$[76] = t26;
+	} else t26 = $[76];
+	return t26;
 }
 /**
 * A field's text control, in a {@link FieldBox}, or in {@link FieldStates}
@@ -317,9 +327,10 @@ function FieldBox(t0) {
 * error role for its caret while the field has an error, and draws a
 * placeholder in the muted role.
 *
-* It is described by its prefix and suffix, ahead of what the field hands it
-* in `described`, so a reader hears the unit the value is read against as a
-* sighted one sees it beside the value: on iOS and Android as its hint, and
+* It is described by what it holds chosen, its prefix and its suffix, ahead
+* of what the field hands it in `described`, so a reader hears the options
+* chosen beside the text and the unit the value is read against as a sighted
+* one sees them on the value's line: on iOS and Android as its hint, and
 * under React Native Web through `aria-describedby`, which drops the hint.
 *
 * `multiline` makes it a text area, `rows` lines of body large tall at the
@@ -332,7 +343,7 @@ function FieldBox(t0) {
 * is therefore handed its `value`.
 */
 function FieldInput(t0) {
-	const $ = c(26);
+	const $ = c(29);
 	let prefix;
 	let props;
 	let suffix;
@@ -341,8 +352,9 @@ function FieldInput(t0) {
 	let t3;
 	let t4;
 	let t5;
+	let t6;
 	if ($[0] !== t0) {
-		({autosize: t1, described: t2, multiline: t3, numeric: t4, prefix, rows: t5, suffix, ...props} = t0);
+		({autosize: t1, chosen: t2, described: t3, multiline: t4, numeric: t5, prefix, rows: t6, suffix, ...props} = t0);
 		$[0] = t0;
 		$[1] = prefix;
 		$[2] = props;
@@ -352,6 +364,7 @@ function FieldInput(t0) {
 		$[6] = t3;
 		$[7] = t4;
 		$[8] = t5;
+		$[9] = t6;
 	} else {
 		prefix = $[1];
 		props = $[2];
@@ -361,12 +374,14 @@ function FieldInput(t0) {
 		t3 = $[6];
 		t4 = $[7];
 		t5 = $[8];
+		t6 = $[9];
 	}
 	const autosize = t1 === void 0 ? true : t1;
-	const described = t2 === void 0 ? NO_PARTS : t2;
-	const multiline = t3 === void 0 ? false : t3;
-	const numeric = t4 === void 0 ? false : t4;
-	const rows = t5 === void 0 ? 1 : t5;
+	const chosen = t2 === void 0 ? "" : t2;
+	const described = t3 === void 0 ? NO_PARTS : t3;
+	const multiline = t4 === void 0 ? false : t4;
+	const numeric = t5 === void 0 ? false : t5;
+	const rows = t6 === void 0 ? 1 : t6;
 	const box = use(BoxContext);
 	const theme = useTheme();
 	const styles = fieldStylesOf(theme);
@@ -379,41 +394,45 @@ function FieldInput(t0) {
 	const caret = box.invalid ? colors.error : colors.primary;
 	const muted = box.disabled ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent) : colors.onSurfaceVariant;
 	const affixed = prefix !== void 0 || suffix !== void 0;
+	const holdsChosen = chosen !== "";
 	const clearance = box.underLabel ? marginTopOf(typography.bodySmallLineHeight * fontScale) : void 0;
 	const affixStyle = composeStyles(role, colorOf(muted));
 	const lines = typography.bodyLargeLineHeight * fontScale * (multiline ? rows : 1);
 	const copied = multiline && autosize && Platform.OS === "web";
 	const extent = multiline && !autosize ? heightOf(lines) : minHeightOf(lines);
-	let t6;
-	if ($[9] !== described || $[10] !== id || $[11] !== prefix || $[12] !== suffix) {
-		t6 = descriptionOf([
+	let t7;
+	if ($[10] !== chosen || $[11] !== described || $[12] !== holdsChosen || $[13] !== id || $[14] !== prefix || $[15] !== suffix) {
+		t7 = descriptionOf([
+			...affixPart(`${id}-chosen`, holdsChosen ? chosen : void 0),
 			...affixPart(`${id}-prefix`, prefix),
 			...affixPart(`${id}-suffix`, suffix),
 			...described
 		]);
-		$[9] = described;
-		$[10] = id;
-		$[11] = prefix;
-		$[12] = suffix;
-		$[13] = t6;
-	} else t6 = $[13];
-	let t7;
-	if ($[14] !== box) {
-		t7 = webStateOf(box);
-		$[14] = box;
-		$[15] = t7;
-	} else t7 = $[15];
+		$[10] = chosen;
+		$[11] = described;
+		$[12] = holdsChosen;
+		$[13] = id;
+		$[14] = prefix;
+		$[15] = suffix;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== box) {
+		t8 = webStateOf(box);
+		$[17] = box;
+		$[18] = t8;
+	} else t8 = $[18];
 	const control = /* @__PURE__ */ jsx(TextInput, {
 		...Platform.OS === "web" ? INHERITS_DIRECTION : void 0,
 		...props,
-		...t6,
 		...t7,
+		...t8,
 		"aria-disabled": box.disabled,
 		cursorColor: caret,
 		multiline,
 		placeholderTextColor: muted,
 		selectionColor: caret,
-		style: composeStyles(role, styles.input, colorOf(content), numeric ? numericOf(mono) : void 0, multiline ? styles.inputMultiline : void 0, copied ? styles.inputOverCopy : extent, affixed || copied ? void 0 : clearance),
+		style: composeStyles(role, styles.input, colorOf(content), numeric ? numericOf(mono) : void 0, multiline ? styles.inputMultiline : void 0, copied ? styles.inputOverCopy : extent, holdsChosen ? minWidthOf(CHOSEN_ROOM * typography.bodyLargeSize * fontScale) : void 0, affixed || copied || holdsChosen ? void 0 : clearance),
 		underlineColorAndroid: "transparent"
 	});
 	if (copied) return /* @__PURE__ */ jsxs(View, {
@@ -424,41 +443,47 @@ function FieldInput(t0) {
 			children: `${props.value ?? ""} `
 		}), control]
 	});
-	if (!affixed) return control;
-	let t8;
-	if ($[16] !== affixStyle || $[17] !== box.floated || $[18] !== id || $[19] !== prefix) {
-		t8 = prefix === void 0 ? null : /* @__PURE__ */ jsx(Affix, {
+	if (!affixed && !holdsChosen) return control;
+	let t9;
+	if ($[19] !== affixStyle || $[20] !== box.floated || $[21] !== id || $[22] !== prefix) {
+		t9 = prefix === void 0 ? null : /* @__PURE__ */ jsx(Affix, {
 			floated: box.floated,
 			id: `${id}-prefix`,
 			style: affixStyle,
 			children: prefix
 		});
-		$[16] = affixStyle;
-		$[17] = box.floated;
-		$[18] = id;
-		$[19] = prefix;
-		$[20] = t8;
-	} else t8 = $[20];
-	let t9;
-	if ($[21] !== affixStyle || $[22] !== box.floated || $[23] !== id || $[24] !== suffix) {
-		t9 = suffix === void 0 ? null : /* @__PURE__ */ jsx(Affix, {
+		$[19] = affixStyle;
+		$[20] = box.floated;
+		$[21] = id;
+		$[22] = prefix;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== affixStyle || $[25] !== box.floated || $[26] !== id || $[27] !== suffix) {
+		t10 = suffix === void 0 ? null : /* @__PURE__ */ jsx(Affix, {
 			floated: box.floated,
 			id: `${id}-suffix`,
 			style: affixStyle,
 			children: suffix
 		});
-		$[21] = affixStyle;
-		$[22] = box.floated;
-		$[23] = id;
-		$[24] = suffix;
-		$[25] = t9;
-	} else t9 = $[25];
+		$[24] = affixStyle;
+		$[25] = box.floated;
+		$[26] = id;
+		$[27] = suffix;
+		$[28] = t10;
+	} else t10 = $[28];
 	return /* @__PURE__ */ jsxs(View, {
 		style: composeStyles(styles.affixLine, clearance),
 		children: [
-			t8,
+			holdsChosen ? /* @__PURE__ */ jsx(Text, {
+				id: `${id}-chosen`,
+				numberOfLines: 1,
+				style: composeStyles(role, colorOf(content), SHRINKS),
+				children: chosen
+			}) : null,
+			t9,
 			control,
-			t9
+			t10
 		]
 	});
 }
@@ -580,6 +605,44 @@ function FieldMessage(t0) {
 	return t12;
 }
 /**
+* A date or a time's segments on the value's line of a {@link FieldBox}, in
+* a row, clearing the label at the top where the box is filled, as a control
+* does: web's `FieldSegments`. One inside another is a row on the outer
+* one's line, which has already cleared the label.
+*/
+function FieldSegments(t0) {
+	const $ = c(6);
+	const { children } = t0;
+	const box = use(BoxContext);
+	const onLine = use(SegmentsLineContext);
+	const theme = useTheme();
+	const styles = fieldStylesOf(theme);
+	const { fontScale } = useWindowDimensions();
+	const T0 = View;
+	const t1 = composeStyles(styles.segments, box.underLabel && !onLine ? marginTopOf(theme.typography.bodySmallLineHeight * fontScale) : void 0);
+	let t2;
+	if ($[0] !== children) {
+		t2 = /* @__PURE__ */ jsx(SegmentsLineContext, {
+			value: true,
+			children
+		});
+		$[0] = children;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== T0 || $[3] !== t1 || $[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			style: t1,
+			children: t2
+		});
+		$[2] = T0;
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+}
+/**
 * Hands a control outside a box the states it is drawn in, for a field that
 * draws a container of its own around the control, as SearchField's bar is.
 * The control takes its colours and the state a screen reader reads from
@@ -618,6 +681,78 @@ function FieldStates(t0) {
 	return t5;
 }
 /**
+* A field's value where it was chosen rather than typed, on the value's line
+* of a {@link FieldBox} whose `trigger` makes the box the control: body
+* large, one line cut short with an ellipsis, clearing the label at the top
+* as a control does. Hidden from a screen reader, which reads the value in
+* the trigger's name.
+*
+* `isPlaceholder` says nothing has been chosen, which takes the muted role;
+* under a floating label at rest it is not drawn until the label floats,
+* exactly as an input's placeholder is, so the two never overlap.
+*
+* On web the value opens with a space, which a browser drops at the start
+* of the line. It keeps the label and the value two words in the box's text,
+* which axe reads as one string with nothing between its parts, and holds to
+* the trigger's name, as WCAG's label in name asks; without it the label
+* runs into the value's first word.
+*/
+function FieldValue(t0) {
+	const $ = c(19);
+	const { children, isPlaceholder: t1 } = t0;
+	const isPlaceholder = t1 === void 0 ? false : t1;
+	const box = use(BoxContext);
+	const theme = useTheme();
+	const { fontScale } = useWindowDimensions();
+	const role = useTypeRole("bodyLarge");
+	const { colors, stateLayerOpacity, typography } = theme;
+	let T0;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== box.disabled || $[1] !== box.floated || $[2] !== box.underLabel || $[3] !== colors || $[4] !== fontScale || $[5] !== isPlaceholder || $[6] !== role || $[7] !== stateLayerOpacity || $[8] !== typography) {
+		const color = isPlaceholder && !box.floated ? "transparent" : box.disabled ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent) : isPlaceholder ? colors.onSurfaceVariant : colors.onSurface;
+		T0 = Text;
+		t2 = true;
+		t3 = 1;
+		t4 = composeStyles(role, colorOf(color), box.underLabel ? marginTopOf(typography.bodySmallLineHeight * fontScale) : void 0);
+		$[0] = box.disabled;
+		$[1] = box.floated;
+		$[2] = box.underLabel;
+		$[3] = colors;
+		$[4] = fontScale;
+		$[5] = isPlaceholder;
+		$[6] = role;
+		$[7] = stateLayerOpacity;
+		$[8] = typography;
+		$[9] = T0;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+	} else {
+		T0 = $[9];
+		t2 = $[10];
+		t3 = $[11];
+		t4 = $[12];
+	}
+	let t5;
+	if ($[13] !== T0 || $[14] !== children || $[15] !== t2 || $[16] !== t3 || $[17] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(T0, {
+			"aria-hidden": t2,
+			numberOfLines: t3,
+			style: t4,
+			children: [Platform.OS === "web" ? " " : null, children]
+		});
+		$[13] = T0;
+		$[14] = children;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t5;
+	} else t5 = $[18];
+	return t5;
+}
+/**
 * Tracks whether the control has focus, around the handlers the field was
 * given, which are called after.
 */
@@ -670,9 +805,14 @@ function useFieldFocus(t0) {
 const ATOMIC = { "aria-atomic": true };
 const HIDDEN = { "aria-hidden": true };
 const INHERITS_DIRECTION = { dir: null };
+const NOT_A_CONTROL = {
+	accessible: false,
+	focusable: false
+};
 const NOT_DRAWN = { display: "none" };
 const OUT_OF_FLOW = { position: "absolute" };
 const SHRINKS = { flexShrink: 1 };
+const CHOSEN_ROOM = 3;
 /**
 * A prefix or a suffix, faded in once the label has floated and out when it
 * comes back to rest, over the label's own `durationShort3`.
@@ -812,6 +952,11 @@ function colorOf(color) {
 function countOf(length, maxLength, locale) {
 	return maxLength === void 0 ? formatCount(length, locale) : `${formatCount(length, locale)}/${formatCount(maxLength, locale)}`;
 }
+/**
+* What describes a control by `parts`, as a field's control is described: the
+* ids of the elements showing them under React Native Web, and their text as
+* the hint VoiceOver and TalkBack read out on iOS and Android.
+*/
 function descriptionOf(parts) {
 	if (Platform.OS === "web") return parts.length === 0 ? void 0 : { "aria-describedby": parts.map((part) => part.id).join(" ") };
 	const said = parts.map((part) => part.text).filter((text) => text !== "");
@@ -819,7 +964,7 @@ function descriptionOf(parts) {
 }
 function focusOf(control) {
 	return () => {
-		control.current?.focus();
+		control?.current?.focus();
 	};
 }
 function heightOf(height) {
@@ -954,6 +1099,17 @@ function FieldStroke(t0) {
 	return t2;
 }
 /**
+* The box as the control: a button named by the trigger and described by the
+* line under the field, which a keyboard and a screen reader reach.
+*/
+function triggerOf({ described = NO_PARTS, onPress: _onPress, ...trigger }) {
+	return {
+		...trigger,
+		...descriptionOf(described),
+		role: "button"
+	};
+}
+/**
 * Says an error on iOS as it arrives, where a live region says nothing. An
 * error the field opened with is not said, and neither is one that has not
 * changed.
@@ -1046,6 +1202,6 @@ function widthTo(onMeasure) {
 	};
 }
 //#endregion
-export { FieldBox, FieldInput, FieldMessage, FieldStates, FieldStroke, describedBy, useErrorAnnouncement, useFieldFocus, useStrokeMotion };
+export { FieldBox, FieldChevron, FieldInput, FieldMessage, FieldSegments, FieldStates, FieldStroke, FieldValue, describedBy, descriptionOf, useErrorAnnouncement, useFieldFocus, useStrokeMotion };
 
 //# sourceMappingURL=index.js.map