@dloizides/ui-forms 1.9.0 → 1.11.1

package/dist/index.mjs

@@ -1,19 +1,57 @@
-import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
-import { StyleSheet, Platform, TextInput, View, Text, Switch, Pressable, TouchableOpacity } from 'react-native';
+import React2, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import { Platform, StyleSheet, TextInput, View, Text, Switch, Pressable, TouchableOpacity } from 'react-native';
 import { useUi } from '@dloizides/ui-feedback';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button } from '@dloizides/ui-buttons';
+import { MIN_TOUCH_TARGET_PX } from '@dloizides/a11y';
 
 // src/Field/Field.tsx
+function attachControlId(child, candidateId, describedById) {
+  if (!React2.isValidElement(child) || child.type === React2.Fragment) {
+    return { node: child };
+  }
+  const props = child.props;
+  const existing = props.id ?? props.nativeID;
+  const element = child;
+  const controlId = existing !== void 0 && existing !== "" ? existing : candidateId;
+  const injected = { id: controlId };
+  if (describedById !== void 0 && props.describedById === void 0) {
+    injected.describedById = describedById;
+  }
+  return { node: React2.cloneElement(element, injected), controlId };
+}
+var IS_WEB = Platform.OS === "web";
+function isAttributeHost(node) {
+  return typeof node === "object" && node !== null && typeof node.setAttribute === "function";
+}
+function useHtmlFor(controlId) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const node = ref.current;
+    if (!IS_WEB || !isAttributeHost(node)) return;
+    const target = controlId !== void 0 && controlId !== "" ? node.ownerDocument?.getElementById(controlId) : null;
+    if (target === null || target === void 0) {
+      node.removeAttribute("for");
+      return;
+    }
+    node.setAttribute("for", controlId);
+  }, [controlId]);
+  return ref;
+}
+var IS_WEB2 = Platform.OS === "web";
 function FieldLabel({
   label,
   marker,
   optionalLabel,
+  controlId,
+  labelId,
   style,
   requiredMarkStyle,
   optionalMarkStyle
 }) {
-  return /* @__PURE__ */ jsxs(Text, { style, children: [
+  const webProps = IS_WEB2 ? { role: "label" } : {};
+  const labelRef = useHtmlFor(controlId);
+  return /* @__PURE__ */ jsxs(Text, { id: labelId, ref: labelRef, style, ...webProps, children: [
     label,
     " ",
     marker === "required" ? (
@@ -90,15 +128,15 @@ var labelVariantStyles = StyleSheet.create({
 function resolveLabelVariantStyle(variant) {
   return variant === "control" ? labelVariantStyles.control : labelVariantStyles.field;
 }
-var FormGridContext = React.createContext(null);
-var GapOwnedContext = React.createContext(false);
+var FormGridContext = React2.createContext(null);
+var GapOwnedContext = React2.createContext(false);
 var FormGridProvider = FormGridContext.Provider;
 var GapOwnedProvider = GapOwnedContext.Provider;
 function useFormGridMetrics() {
-  return React.useContext(FormGridContext);
+  return React2.useContext(FormGridContext);
 }
 function useIsGapOwned() {
-  return React.useContext(GapOwnedContext);
+  return React2.useContext(GapOwnedContext);
 }
 var ERROR_FONT_SIZE = 12;
 var HINT_FONT_SIZE = 12;
@@ -116,10 +154,15 @@ var styles = StyleSheet.create({
 });
 var fieldSeq = 0;
 function useFieldIds() {
-  const [ids] = React.useState(() => {
+  const [ids] = React2.useState(() => {
     fieldSeq += 1;
     const seq = String(fieldSeq);
-    return { hintId: `field-hint-${seq}`, errorId: `field-error-${seq}` };
+    return {
+      hintId: `field-hint-${seq}`,
+      errorId: `field-error-${seq}`,
+      controlId: `field-control-${seq}`,
+      labelId: `field-label-${seq}`
+    };
   });
   return ids;
 }
@@ -157,8 +200,8 @@ var Field = ({
   const labelText = label ?? "";
   const hasLabel = labelText !== "";
   const marker = resolveFieldMarker(required, optional);
-  const { hintId, errorId } = useFieldIds();
-  const themeStyles = React.useMemo(
+  const { hintId, errorId, controlId, labelId } = useFieldIds();
+  const themeStyles = React2.useMemo(
     () => ({
       label: { color: colors.textSecondary },
       requiredMark: { color: errorColor },
@@ -170,12 +213,16 @@ var Field = ({
     [colors.textSecondary, errorColor]
   );
   const describedById = joinDescribedBy(hasHint ? hintId : void 0, hasError ? errorId : void 0);
-  const control = typeof children === "function" ? children({ describedById, hasError }) : children;
+  const isRenderChild = typeof children === "function";
+  const attached = isRenderChild ? { node: children({ describedById, hasError, controlId, labelId }), controlId } : attachControlId(children, controlId, describedById);
+  const control = attached.node;
   return /* @__PURE__ */ jsxs(View, { style: [spacingStyles.container, containerStyle], testID, children: [
     hasLabel ? /* @__PURE__ */ jsx(
       FieldLabel,
       {
+        controlId: attached.controlId,
         label: labelText,
+        labelId,
         marker,
         optionalLabel,
         optionalMarkStyle: [styles.optionalMark, themeStyles.optionalMark],
@@ -205,7 +252,7 @@ var FormGrid = ({
   style,
   testID
 }) => {
-  const metrics = React.useMemo(() => ({ minWidth, basis }), [minWidth, basis]);
+  const metrics = React2.useMemo(() => ({ minWidth, basis }), [minWidth, basis]);
   return /* @__PURE__ */ jsx(FormGridProvider, { value: metrics, children: /* @__PURE__ */ jsx(GapOwnedProvider, { value: true, children: /* @__PURE__ */ jsx(View, { style: [styles2.grid, { gap }, style], testID, children }) }) });
 };
 var GROW = 1;
@@ -240,7 +287,7 @@ var styles3 = StyleSheet.create({
 });
 var sectionSeq = 0;
 function useSectionLegendId() {
-  const [id] = React.useState(() => {
+  const [id] = React2.useState(() => {
     sectionSeq += 1;
     return `form-section-legend-${String(sectionSeq)}`;
   });
@@ -327,7 +374,90 @@ var FormActions = ({
     }
   )
 ] });
-var IS_WEB = Platform.OS === "web";
+var FIELD_GAP = 4;
+var LABEL_FONT = 11;
+var LABEL_LETTER_SPACING = 0.4;
+var INPUT_RADIUS = 8;
+var INPUT_PAD_H = 12;
+var INPUT_PAD_V = 10;
+var INPUT_FONT = 14;
+var INPUT_BORDER = 1;
+var DATE_ROW_GAP = 8;
+var CHEVRON_FONT = 10;
+var MENU_TOP_GAP = 4;
+var MENU_RADIUS = 8;
+var MENU_PAD_V = 4;
+var MENU_OPT_PAD_H = 12;
+var MENU_OPT_PAD_V = 8;
+var MENU_MIN_WIDTH = 160;
+var MENU_MAX_HEIGHT = 260;
+var MENU_Z = 1e3;
+var MENU_ELEVATION = 8;
+var MENU_BOX_SHADOW = "0px 2px 8px rgba(0, 0, 0, 0.15)";
+var OPTION_FONT = 14;
+var ERROR_FONT = 12;
+var ERROR_GAP = 3;
+var controlStyles = StyleSheet.create({
+  /**
+   * The shared bordered box every dense text control renders in.
+   *
+   * `minHeight` is the kit floor: padding alone produced a ~38px box, and a bare input with no
+   * box style at all measured **19px** in production. Height is a hit-target guarantee, so it
+   * is stated rather than left to emerge from font size + padding.
+   */
+  input: {
+    borderWidth: INPUT_BORDER,
+    borderRadius: INPUT_RADIUS,
+    paddingHorizontal: INPUT_PAD_H,
+    paddingVertical: INPUT_PAD_V,
+    fontSize: INPUT_FONT,
+    minHeight: MIN_TOUCH_TARGET_PX
+  },
+  /** The select trigger: a bordered field box matching the text inputs + a chevron. */
+  selectTrigger: {
+    minHeight: MIN_TOUCH_TARGET_PX,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: DATE_ROW_GAP,
+    borderWidth: INPUT_BORDER,
+    borderRadius: INPUT_RADIUS,
+    paddingHorizontal: INPUT_PAD_H,
+    paddingVertical: INPUT_PAD_V
+  },
+  selectTriggerText: { fontSize: INPUT_FONT, flexShrink: 1 },
+  chevron: { fontSize: CHEVRON_FONT },
+  dateRow: { flexDirection: "row", gap: DATE_ROW_GAP },
+  dateCol: { gap: FIELD_GAP, flex: 1 },
+  /**
+   * The micro-caption above a sub-control (a date range's From/To) and beside a switch. Note it
+   * is deliberately NOT the `control` label voice: it carries no `700`/uppercase, because it
+   * names a HALF of a control that already has a `control`-voice label above it. Uppercasing it
+   * too would make one field shout twice.
+   */
+  subLabel: { fontSize: LABEL_FONT, letterSpacing: LABEL_LETTER_SPACING },
+  /** Positioning context for a floating `AnchoredMenu` (`position:absolute; top:100%`). */
+  anchor: { position: "relative" },
+  menu: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    marginTop: MENU_TOP_GAP,
+    minWidth: MENU_MIN_WIDTH,
+    maxHeight: MENU_MAX_HEIGHT,
+    borderWidth: INPUT_BORDER,
+    borderRadius: MENU_RADIUS,
+    paddingVertical: MENU_PAD_V,
+    zIndex: MENU_Z,
+    boxShadow: MENU_BOX_SHADOW,
+    elevation: MENU_ELEVATION,
+    overflow: "hidden"
+  },
+  option: { paddingHorizontal: MENU_OPT_PAD_H, paddingVertical: MENU_OPT_PAD_V },
+  optionText: { fontSize: OPTION_FONT },
+  error: { fontSize: ERROR_FONT, marginTop: ERROR_GAP }
+});
+var IS_WEB3 = Platform.OS === "web";
 var TRANSITION_PROPERTY = "border-color, background-color, box-shadow";
 var TRANSITION_DURATION = "0.14s";
 var TRANSITION_TIMING = "ease";
@@ -342,7 +472,7 @@ var GREEN_START = 3;
 var BLUE_START = 5;
 var CHANNEL_END_OFFSET = 2;
 function prefersReducedMotion() {
-  if (!IS_WEB || typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  if (!IS_WEB3 || typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 function withAlpha(color, alpha) {
@@ -385,7 +515,7 @@ function useThemedInput(options = {}) {
     const borderColor = isFocused ? focusBorder : isHovered ? withAlpha(colors.text, HOVER_BORDER_ALPHA) : restBorder;
     const backgroundColor = isFocused ? colors.surface : colors.surfaceElevated;
     const base = { color: colors.text, borderColor, backgroundColor };
-    if (!IS_WEB) return base;
+    if (!IS_WEB3) return base;
     const ringColor = hasError ? errorColor : primary;
     const ring = isFocused ? `0 0 0 ${FOCUS_RING_WIDTH}px ${withAlpha(ringColor, FOCUS_RING_ALPHA)}` : "none";
     const webStyle = {
@@ -410,7 +540,7 @@ function useThemedInput(options = {}) {
   ]);
   const focusBind = useMemo(() => ({ onFocus: handleFocus, onBlur: handleBlur }), [handleFocus, handleBlur]);
   const hoverBind = useMemo(
-    () => IS_WEB ? { onMouseEnter: handleHoverIn, onMouseLeave: handleHoverOut } : {},
+    () => IS_WEB3 ? { onMouseEnter: handleHoverIn, onMouseLeave: handleHoverOut } : {},
     [handleHoverIn, handleHoverOut]
   );
   return {
@@ -422,19 +552,44 @@ function useThemedInput(options = {}) {
     hoverBind
   };
 }
-var IS_WEB2 = Platform.OS === "web";
-var ThemedTextInput = React.forwardRef(function ThemedTextInput2({ hasError = false, describedById, requiredField = false, onFocus, onBlur, style, placeholderTextColor, ...rest }, ref) {
+var IS_WEB4 = Platform.OS === "web";
+function webFieldA11y({ describedById, hasError = false, required = false }) {
+  if (!IS_WEB4) {
+    return {};
+  }
+  return {
+    "aria-invalid": hasError ? true : void 0,
+    "aria-describedby": describedById,
+    "aria-required": required ? true : void 0
+  };
+}
+var MULTILINE_MIN_HEIGHT = 96;
+var boxStyles = StyleSheet.create({
+  multiline: {
+    minHeight: MULTILINE_MIN_HEIGHT,
+    textAlignVertical: "top"
+  }
+});
+var ThemedTextInput = React2.forwardRef(function ThemedTextInput2({
+  hasError = false,
+  describedById,
+  requiredField = false,
+  unstyledBox = false,
+  onFocus,
+  onBlur,
+  style,
+  placeholderTextColor,
+  ...rest
+}, ref) {
   const {
     style: themedStyle,
     placeholderTextColor: themedPlaceholder,
     focusBind,
     hoverBind
   } = useThemedInput({ hasError, onFocus, onBlur });
-  const webA11y = IS_WEB2 ? {
-    "aria-invalid": hasError ? true : void 0,
-    "aria-describedby": describedById,
-    "aria-required": requiredField ? true : void 0
-  } : {};
+  const webA11y = webFieldA11y({ describedById, hasError, required: requiredField });
+  const boxStyle = unstyledBox ? null : controlStyles.input;
+  const multilineStyle = rest.multiline === true && !unstyledBox ? boxStyles.multiline : null;
   return /* @__PURE__ */ jsx(
     TextInput,
     {
@@ -445,37 +600,25 @@ var ThemedTextInput = React.forwardRef(function ThemedTextInput2({ hasError = fa
       ...hoverBind,
       onFocus: focusBind.onFocus,
       onBlur: focusBind.onBlur,
-      style: [style, themedStyle]
+      style: [boxStyle, multilineStyle, style, themedStyle]
     }
   );
 });
-var INPUT_PADDING_V = 10;
-var INPUT_PADDING_H = 12;
-var INPUT_BORDER_RADIUS = 8;
-var INPUT_BORDER_WIDTH = 1;
-var styles5 = StyleSheet.create({
-  input: {
-    paddingVertical: INPUT_PADDING_V,
-    paddingHorizontal: INPUT_PADDING_H,
-    borderRadius: INPUT_BORDER_RADIUS,
-    borderWidth: INPUT_BORDER_WIDTH
-  }
-});
 var FormField = ({
   label,
   required = false,
   error,
   containerStyle,
   ...textInputProps
-}) => /* @__PURE__ */ jsx(Field, { containerStyle, error, label, required, children: ({ describedById, hasError }) => /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ jsx(Field, { containerStyle, error, label, required, children: ({ describedById, hasError, controlId }) => /* @__PURE__ */ jsx(
   ThemedTextInput,
   {
     accessibilityHint: `Enter ${label}`,
     accessibilityLabel: label,
     describedById,
     hasError,
+    id: controlId,
     requiredField: required,
-    style: styles5.input,
     testID: "form-field-input",
     ...textInputProps
   }
@@ -513,7 +656,7 @@ function withAlpha2(hex, alpha) {
   const isValid = !Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b);
   return isValid ? `rgba(${r}, ${g}, ${b}, ${alpha})` : hex;
 }
-var styles6 = StyleSheet.create({
+var styles5 = StyleSheet.create({
   chipContainer: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -565,7 +708,7 @@ function OutlineChip({
   ariaPressed,
   onPress
 }) {
-  const [hovered, setHovered] = React.useState(false);
+  const [hovered, setHovered] = React2.useState(false);
   const active = selected || hovered;
   const borderColor = active ? colors.primary : colors.border;
   const backgroundColor = selected ? colors.tint : colors.muted;
@@ -584,7 +727,7 @@ function OutlineChip({
       onHoverIn: () => setHovered(true),
       onHoverOut: () => setHovered(false),
       onPress,
-      children: /* @__PURE__ */ jsx(View, { style: [styles6.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsx(Text, { style: [styles6.chipText, styles6.chipTextOutline, { color: textColor }], children: option.label }) })
+      children: /* @__PURE__ */ jsx(View, { style: [styles5.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsx(Text, { style: [styles5.chipText, styles5.chipTextOutline, { color: textColor }], children: option.label }) })
     }
   );
 }
@@ -612,15 +755,10 @@ function SolidChip({
       hitSlop: CHIP_HIT_SLOP,
       testID,
       onPress,
-      children: /* @__PURE__ */ jsx(View, { style: [styles6.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsx(Text, { style: [styles6.chipText, { color: textColor }], children: option.label }) })
+      children: /* @__PURE__ */ jsx(View, { style: [styles5.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsx(Text, { style: [styles5.chipText, { color: textColor }], children: option.label }) })
     }
   );
 }
-var IS_WEB3 = Platform.OS === "web";
-function groupA11yProps(describedById, hasError) {
-  if (!IS_WEB3) return {};
-  return { "aria-invalid": hasError ? true : void 0, "aria-describedby": describedById };
-}
 var ChipSelector = ({
   label,
   options,
@@ -639,7 +777,7 @@ var ChipSelector = ({
 }) => {
   const { theme } = useUi();
   const { colors, palette } = theme;
-  const chipColors = React.useMemo(() => {
+  const chipColors = React2.useMemo(() => {
     const primary = palette.primary["500"];
     return {
       border: colors.border,
@@ -682,12 +820,12 @@ var ChipSelector = ({
       required,
       spacing,
       testID,
-      children: ({ describedById, hasError }) => /* @__PURE__ */ jsx(View, { style: styles6.chipContainer, ...groupA11yProps(describedById, hasError), children: options.map(renderChip) })
+      children: ({ describedById, hasError }) => /* @__PURE__ */ jsx(View, { style: styles5.chipContainer, ...webFieldA11y({ describedById, hasError }), children: options.map(renderChip) })
     }
   );
 };
 var DESCRIPTION_FONT_SIZE2 = 12;
-var styles7 = StyleSheet.create({
+var styles6 = StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -718,7 +856,7 @@ var FormSwitch = ({
   const { theme } = useUi();
   const { colors } = theme;
   const hasDescription = typeof description === "string" && description !== "";
-  const themeStyles = React.useMemo(() => {
+  const themeStyles = React2.useMemo(() => {
     const labelStyle = { color: colors.text };
     const descriptionStyle = { color: colors.textSecondary };
     return { label: labelStyle, description: descriptionStyle };
@@ -727,13 +865,13 @@ var FormSwitch = ({
     View,
     {
       style: [
-        styles7.container,
+        styles6.container,
         containerStyle
       ],
       children: [
-        /* @__PURE__ */ jsxs(View, { style: styles7.textColumn, children: [
-          /* @__PURE__ */ jsx(Text, { style: [styles7.label, themeStyles.label], children: label }),
-          hasDescription ? /* @__PURE__ */ jsx(Text, { style: [styles7.description, themeStyles.description], children: description }) : null
+        /* @__PURE__ */ jsxs(View, { style: styles6.textColumn, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles6.label, themeStyles.label], children: label }),
+          hasDescription ? /* @__PURE__ */ jsx(Text, { style: [styles6.description, themeStyles.description], children: description }) : null
         ] }),
         /* @__PURE__ */ jsx(
           Switch,
@@ -758,7 +896,7 @@ var BOX_SIZE = 20;
 var BOX_RADIUS = 5;
 var CHECK_FONT_SIZE = 14;
 var DISABLED_OPACITY = 0.5;
-var styles8 = StyleSheet.create({
+var styles7 = StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -809,7 +947,7 @@ var FormCheckbox = ({
   const brand = palette.primary["500"];
   const hintText = typeof hint === "string" && hint !== "" ? hint : description;
   const hasHint = typeof hintText === "string" && hintText !== "";
-  const themeStyles = React.useMemo(() => {
+  const themeStyles = React2.useMemo(() => {
     const boxOn = { backgroundColor: brand, borderColor: brand };
     const boxOff = { backgroundColor: "transparent", borderColor: colors.border };
     const labelStyle = { color: colors.text };
@@ -840,101 +978,26 @@ var FormCheckbox = ({
       disabled,
       onPress: toggle,
       role: "checkbox",
-      style: [styles8.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
+      style: [styles7.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
       testID,
       ...keyboardProps,
       children: [
-        /* @__PURE__ */ jsx(View, { style: [styles8.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsx(Text, { style: [styles8.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
-        /* @__PURE__ */ jsxs(View, { style: styles8.textColumn, children: [
-          /* @__PURE__ */ jsx(Text, { style: [styles8.label, themeStyles.label], children: label }),
-          hasHint ? /* @__PURE__ */ jsx(Text, { style: [styles8.hint, themeStyles.hint], children: hintText }) : null
+        /* @__PURE__ */ jsx(View, { style: [styles7.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsx(Text, { style: [styles7.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
+        /* @__PURE__ */ jsxs(View, { style: styles7.textColumn, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles7.label, themeStyles.label], children: label }),
+          hasHint ? /* @__PURE__ */ jsx(Text, { style: [styles7.hint, themeStyles.hint], children: hintText }) : null
         ] })
       ]
     }
   );
 };
-var FIELD_GAP = 4;
-var LABEL_FONT = 11;
-var LABEL_LETTER_SPACING = 0.4;
-var INPUT_RADIUS = 8;
-var INPUT_PAD_H = 12;
-var INPUT_PAD_V = 10;
-var INPUT_FONT = 14;
-var INPUT_BORDER = 1;
-var DATE_ROW_GAP = 8;
-var CHEVRON_FONT = 10;
-var MENU_TOP_GAP = 4;
-var MENU_RADIUS = 8;
-var MENU_PAD_V = 4;
-var MENU_OPT_PAD_H = 12;
-var MENU_OPT_PAD_V = 8;
-var MENU_MIN_WIDTH = 160;
-var MENU_MAX_HEIGHT = 260;
-var MENU_Z = 1e3;
-var MENU_ELEVATION = 8;
-var MENU_BOX_SHADOW = "0px 2px 8px rgba(0, 0, 0, 0.15)";
-var OPTION_FONT = 14;
-var ERROR_FONT = 12;
-var ERROR_GAP = 3;
-var controlStyles = StyleSheet.create({
-  /** The shared bordered box every dense text control renders in. */
-  input: {
-    borderWidth: INPUT_BORDER,
-    borderRadius: INPUT_RADIUS,
-    paddingHorizontal: INPUT_PAD_H,
-    paddingVertical: INPUT_PAD_V,
-    fontSize: INPUT_FONT
-  },
-  /** The select trigger: a bordered field box matching the text inputs + a chevron. */
-  selectTrigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: DATE_ROW_GAP,
-    borderWidth: INPUT_BORDER,
-    borderRadius: INPUT_RADIUS,
-    paddingHorizontal: INPUT_PAD_H,
-    paddingVertical: INPUT_PAD_V
-  },
-  selectTriggerText: { fontSize: INPUT_FONT, flexShrink: 1 },
-  chevron: { fontSize: CHEVRON_FONT },
-  dateRow: { flexDirection: "row", gap: DATE_ROW_GAP },
-  dateCol: { gap: FIELD_GAP, flex: 1 },
-  /**
-   * The micro-caption above a sub-control (a date range's From/To) and beside a switch. Note it
-   * is deliberately NOT the `control` label voice: it carries no `700`/uppercase, because it
-   * names a HALF of a control that already has a `control`-voice label above it. Uppercasing it
-   * too would make one field shout twice.
-   */
-  subLabel: { fontSize: LABEL_FONT, letterSpacing: LABEL_LETTER_SPACING },
-  /** Positioning context for a floating `AnchoredMenu` (`position:absolute; top:100%`). */
-  anchor: { position: "relative" },
-  menu: {
-    position: "absolute",
-    top: "100%",
-    left: 0,
-    marginTop: MENU_TOP_GAP,
-    minWidth: MENU_MIN_WIDTH,
-    maxHeight: MENU_MAX_HEIGHT,
-    borderWidth: INPUT_BORDER,
-    borderRadius: MENU_RADIUS,
-    paddingVertical: MENU_PAD_V,
-    zIndex: MENU_Z,
-    boxShadow: MENU_BOX_SHADOW,
-    elevation: MENU_ELEVATION,
-    overflow: "hidden"
-  },
-  option: { paddingHorizontal: MENU_OPT_PAD_H, paddingVertical: MENU_OPT_PAD_V },
-  optionText: { fontSize: OPTION_FONT },
-  error: { fontSize: ERROR_FONT, marginTop: ERROR_GAP }
-});
-var IS_WEB4 = typeof document !== "undefined";
+var IS_WEB5 = typeof document !== "undefined";
 var ESCAPE_KEY = "Escape";
 var ACTIVE_WEIGHT = "700";
 var IDLE_WEIGHT = "400";
 function useDismiss(anchorRef, menuRef, onDismiss) {
   useEffect(() => {
-    if (!IS_WEB4) return void 0;
+    if (!IS_WEB5) return void 0;
     const onMouseDown = (event) => {
       const anchorNode = anchorRef.current;
       const menuNode = menuRef.current;
@@ -964,7 +1027,7 @@ function AnchoredMenu({
   testID,
   anchorRef
 }) {
-  const menuRef = React.useRef(null);
+  const menuRef = React2.useRef(null);
   useDismiss(anchorRef, menuRef, onDismiss);
   return /* @__PURE__ */ jsx(
     View,
@@ -1003,6 +1066,7 @@ function SelectControl({
   placeholder = "",
   accessibilityLabel,
   accessibilityHint,
+  labelledById,
   optionHint = "",
   style,
   testID
@@ -1037,6 +1101,7 @@ function SelectControl({
         accessibilityHint,
         accessibilityState: { expanded: isOpen },
         "aria-expanded": isOpen,
+        "aria-labelledby": labelledById,
         onPress: toggle,
         style: [controlStyles.selectTrigger, { borderColor: colors.border, backgroundColor: colors.surface }],
         testID: `${testID}-trigger`,