@multiplatform.one/forms 6.1.0 → 6.3.0

package/dist/cjs/fields/Combobox/index.native.js

@@ -29,8 +29,10 @@ __export(Combobox_exports, {
 module.exports = __toCommonJS(Combobox_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_react_i18next = require("react-i18next");
 var import_react2 = require("@phosphor-icons/react");
 var import_react3 = require("@floating-ui/react");
+var import_react_native = require("react-native");
 var import_tamagui = require("tamagui");
 var import_Chip = require("../../Chip/index.native.js");
 var import_Skeleton = require("../../Skeleton/index.native.js");
@@ -277,10 +279,32 @@ var ComboboxItem = /* @__PURE__ */(0, import_react.memo)(function ComboboxItem2(
         backgroundColor: isSelected ? import_colorRamps.formInputColors.background.base : import_colorRamps.formInputColors.background.focus
       }
     }),
+    ...(option.description ?
+    // Two-line rows need to grow past the size-variant height.
+    {
+      height: "auto",
+      paddingVertical: "$2"
+    } : void 0),
     ...(ctx.knobProps.transition ? {
       animation: ctx.knobProps.transition
     } : void 0),
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+    children: [option.description ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      flex: 1,
+      minWidth: 0,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontFamily: ctx.knobProps.body.fontFamily,
+        fontWeight: ctx.knobProps.body.fontWeight,
+        color: ctx.textColor,
+        numberOfLines: 1,
+        children: option.label
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontFamily: ctx.knobProps.body.fontFamily,
+        fontSize: "$2",
+        color: import_colorRamps.formCommonColors.muted,
+        numberOfLines: 1,
+        children: option.description
+      })]
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       fontFamily: ctx.knobProps.body.fontFamily,
       fontWeight: ctx.knobProps.body.fontWeight,
       color: ctx.textColor,
@@ -303,10 +327,15 @@ function FloatingComboboxCore(param) {
     emptyMessage,
     onSearch,
     loading,
+    searchError,
+    valueLabel,
+    clearable,
     onLoadMore,
     hasMore,
     disabled,
     id,
+    "aria-label": ariaLabel,
+    hasLabel,
     tabIndexOverride,
     popoverWidth,
     trigger: triggerRender,
@@ -322,7 +351,11 @@ function FloatingComboboxCore(param) {
     onOpenChange
   } = param;
   var _ref;
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   var [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
   var open = openProp !== void 0 ? openProp : internalOpen;
   var setOpen = (0, import_react.useCallback)(function (nextOpen) {
@@ -956,6 +989,9 @@ function FloatingComboboxCore(param) {
   boxEventProps.role = "combobox";
   boxEventProps["aria-haspopup"] = "listbox";
   boxEventProps["aria-expanded"] = open;
+  if (id) boxEventProps.id = id;
+  if (ariaLabel) boxEventProps["aria-label"] = ariaLabel;else if (hasLabel && id) boxEventProps["aria-labelledby"] = `${id}-label`;else if (placeholder) boxEventProps["aria-label"] = placeholder;
+  if (describedBy) boxEventProps["aria-describedby"] = describedBy;
   var totalNavigableItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
   var createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
   var handleItemKeyDown = (0, import_react.useCallback)(function (e, _index) {
@@ -1022,6 +1058,7 @@ function FloatingComboboxCore(param) {
         setOpen(false);
       }
     } else if (event.key === "Escape") {
+      event.preventDefault();
       setOpen(false);
     }
   }, [sortedFiltered, activeIndex, handleSelect, handleCreate, totalNavigableItems, createOptionIndex, showCreateOption, multiple]);
@@ -1060,18 +1097,35 @@ function FloatingComboboxCore(param) {
       return cancelAnimationFrame(rafId);
     };
   }, [activeIndex, multiple ? value : void 0]);
-  var triggerContent = triggerRender ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+  var triggerContent = triggerRender ?
+  // Stretch so custom triggers (e.g. Awesomebar) can own their height
+  // instead of collapsing inside a shrink-wrapped View (SB-M-1703).
+  /* @__PURE__ */
+  (0, import_jsx_runtime.jsx)(import_tamagui.View, {
     ...boxEventProps,
     "data-testid": "combobox-trigger",
+    width: "100%",
+    alignSelf: "stretch",
+    flexShrink: 0,
+    style: {
+      display: "flex",
+      alignItems: "stretch",
+      width: "100%"
+    },
     children: triggerRender(multiple ? selectedOptions : selectedOption, open)
   }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
     ...boxEventProps,
     "data-testid": "combobox-trigger",
+    // LC-40: Box washes its own chrome when disabled — no opacity dim here
+    // (it stacked with the wash and pushed the value text below AA).
     cursor: disabled ? "not-allowed" : "pointer",
-    opacity: disabled ? 0.5 : 1,
     disabled,
     size: knobProps.sizeToken,
-    ...(inTableCell ? {} : {
+    ...(inTableCell ?
+    // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
+    {
+      minHeight: 44
+    } : {
       borderRadius: knobProps.borderRadius.borderRadius,
       borderWidth: knobProps.borderRadius.borderWidth
     }),
@@ -1081,7 +1135,6 @@ function FloatingComboboxCore(param) {
       flex: 1,
       paddingHorizontal: "$3",
       paddingVertical: "$2",
-      id,
       justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
       alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
       children: multiple && selectedValues.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
@@ -1110,13 +1163,38 @@ function FloatingComboboxCore(param) {
       }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
         fontFamily: knobProps.body.fontFamily,
         fontWeight: knobProps.body.fontWeight,
-        color: selectedOption ? textColor : import_colorRamps.formCommonColors.muted,
+        color: selectedOption || !multiple && value && valueLabel ? textColor : import_colorRamps.formCommonColors.muted,
         numberOfLines: 1,
         userSelect: "none",
-        children: (_ref = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref !== void 0 ? _ref : placeholder
+        children: (_ref = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref !== void 0 ? _ref : !multiple && value && valueLabel ? valueLabel : placeholder
+      })
+    }), clearable && !multiple && !disabled && typeof value === "string" && value !== "" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      paddingInlineEnd: "$1",
+      alignSelf: "center",
+      cursor: "pointer",
+      role: "button",
+      tabIndex: -1,
+      "aria-label": t("Clear"),
+      opacity: 0.6,
+      hoverStyle: {
+        opacity: 1
+      },
+      // useClick opens on mousedown at the trigger — swallow it so
+      // clearing never toggles the dropdown.
+      onMouseDown: function onMouseDown(e) {
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      onPress: function onPress(e) {
+        var _e_stopPropagation;
+        (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("");
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
+        size: 14
       })
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      paddingRight: "$2",
+      paddingInlineEnd: "$2",
       alignSelf: "center",
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
         size: 16
@@ -1209,7 +1287,17 @@ function FloatingComboboxCore(param) {
             scrollRef: listScrollRef,
             visible: panel.arrowUp,
             arrowScrollDirRef: panel.arrowScrollDirRef
-          }), sortedFiltered.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.Fragment, {
+          }), searchError ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            ...knobProps.panelPadding,
+            alignItems: "center",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              color: import_colorRamps.formCommonColors.error,
+              fontSize: "$3",
+              fontFamily: knobProps.body.fontFamily,
+              fontWeight: knobProps.body.fontWeight,
+              children: searchError
+            })
+          }) : sortedFiltered.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.Fragment, {
             children: [multiple ? sortedFiltered.map(function (option, index) {
               return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ComboboxItem, {
                 option,
@@ -1290,6 +1378,16 @@ function FloatingComboboxCore(param) {
               flex: 1,
               children: createLabel.replace("{value}", filter.trim())
             })]
+          }) : loading ?
+          // Async search in flight with nothing loaded yet: a bounded
+          // loading row — never a premature "no results".
+          /* @__PURE__ */
+          (0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            ...knobProps.panelPadding,
+            alignItems: "center",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Spinner.Spinner, {
+              size: "small"
+            })
           }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
             ...knobProps.panelPadding,
             alignItems: "center",
@@ -1332,6 +1430,10 @@ var comboboxSearchHeader = function comboboxSearchHeader2(knobProps, filter, set
       unstyled: true,
       flex: 1,
       placeholder: searchPlaceholder,
+      // iOS VoiceOver: name the search box (placeholder alone is value-only).
+      ...(!import_tamagui.isWeb ? {
+        accessibilityLabel: searchPlaceholder
+      } : void 0),
       value: filter,
       onChangeText: setFilter,
       onKeyDown,
@@ -1364,10 +1466,15 @@ function NativeComboboxCore(param) {
     emptyMessage,
     onSearch,
     loading,
+    searchError,
+    valueLabel,
+    clearable,
     onLoadMore,
     hasMore,
     disabled,
     id,
+    "aria-label": ariaLabel,
+    hasLabel,
     trigger: triggerRender,
     knobProps,
     multiple,
@@ -1380,9 +1487,13 @@ function NativeComboboxCore(param) {
     open: openProp,
     onOpenChange
   } = param;
-  var _ref, _knobProps_transition, _ref1;
+  var _ref, _knobProps_transition, _ref1, _ref2;
   var _theme_color7;
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   var [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
   var open = openProp !== void 0 ? openProp : internalOpen;
   var setOpen = (0, import_react.useCallback)(function (nextOpen) {
@@ -1396,6 +1507,7 @@ function NativeComboboxCore(param) {
   var filter = searchValue !== void 0 ? searchValue : internalFilter;
   var [activeIndex, setActiveIndex] = (0, import_react.useState)(0);
   var listRef = (0, import_react.useRef)(null);
+  var fieldA11y = (0, import_fieldLayout.useFieldA11y)();
   var textColor = knobProps.textAccentColor;
   var theme = (0, import_tamagui.useTheme)();
   var mutedColor = (_ref = (_theme_color7 = theme.color7) === null || _theme_color7 === void 0 ? void 0 : _theme_color7.val) !== null && _ref !== void 0 ? _ref : "$color7";
@@ -1482,7 +1594,7 @@ function NativeComboboxCore(param) {
     }
     setInternalFilter("");
   }, [onCreate, filter, multiple, value, onValueChange]);
-  var hasScrollableContent = filtered.length > 6;
+  var hasScrollableContent = Boolean(onSearch) || filtered.length > 6;
   var sheetTransition = (_knobProps_transition = knobProps.transition) !== null && _knobProps_transition !== void 0 ? _knobProps_transition : "medium";
   var sortedFiltered = (0, import_react.useMemo)(function () {
     if (filter.trim()) return filtered;
@@ -1621,53 +1733,106 @@ function NativeComboboxCore(param) {
     if (!val) onBlur === null || onBlur === void 0 ? void 0 : onBlur();
   }, [onBlur]);
   var searchHeader = hideSearch ? void 0 : comboboxSearchHeader(knobProps, filter, setInternalFilter, searchPlaceholder, textColor, mutedColor, loading !== null && loading !== void 0 ? loading : false, handleSearchKeyDown);
-  var listContent = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+  var listContent =
+  // tabIndex/onKeyDown are web-only: on iOS tabIndex makes the container an
+  // accessibility element, which merges every option into one unactionable
+  // VoiceOver blob.
+  /* @__PURE__ */
+  (0, import_jsx_runtime.jsxs)(import_tamagui.View, {
     ref: listRef,
-    tabIndex: 0,
-    onKeyDown: handleListKeyDown,
+    ...(import_tamagui.isWeb ? {
+      tabIndex: 0,
+      onKeyDown: handleListKeyDown
+    } : void 0),
     outlineStyle: "none",
-    flex: 1,
-    children: [sortedFiltered.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [
+    // Native sheet: flex={1} inside FloatingPanel ScrollView collapses rows.
+    searchError ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        color: import_colorRamps.formCommonColors.error,
+        fontSize: "$3",
+        fontFamily: knobProps.body.fontFamily,
+        fontWeight: knobProps.body.fontWeight,
+        children: searchError
+      })
+    }) : sortedFiltered.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
       children: [sortedFiltered.map(function (option, i) {
         var selected = isSelectedFn(option.value);
         var active = i === activeIndex;
         var prevGroup = i > 0 ? sortedFiltered[i - 1].group : void 0;
         var showGroupHeader = option.group && option.group !== prevGroup;
+        var optionRow = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: "$2",
+          paddingHorizontal: "$3",
+          ...(option.description ? {
+            minHeight: knobProps.sizeToken,
+            paddingVertical: "$2"
+          } : {
+            height: knobProps.sizeToken
+          }),
+          onPress: import_tamagui.isWeb ? function () {
+            return handleSelect(option);
+          } : void 0,
+          onMouseEnter: function onMouseEnter() {
+            return setActiveIndex(i);
+          },
+          ...(!import_tamagui.isWeb ? {
+            pointerEvents: "none"
+          } : {}),
+          hoverStyle: activeIndex != null ? {
+            backgroundColor: active ? import_colorRamps.formInputColors.background.focus : selected ? import_colorRamps.formInputColors.background.base : "transparent"
+          } : {
+            backgroundColor: selected ? import_colorRamps.formInputColors.background.base : import_colorRamps.formInputColors.background.focus
+          },
+          backgroundColor: active ? import_colorRamps.formInputColors.background.focus : selected ? import_colorRamps.formInputColors.background.base : "transparent",
+          pressStyle: {
+            backgroundColor: import_colorRamps.formInputColors.background.focus
+          },
+          children: [option.description ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            flex: 1,
+            minWidth: 0,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontFamily: knobProps.body.fontFamily,
+              fontWeight: knobProps.body.fontWeight,
+              color: textColor,
+              numberOfLines: 1,
+              children: option.label
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontFamily: knobProps.body.fontFamily,
+              fontSize: "$2",
+              color: import_colorRamps.formCommonColors.muted,
+              numberOfLines: 1,
+              children: option.description
+            })]
+          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontFamily: knobProps.body.fontFamily,
+            fontWeight: knobProps.body.fontWeight,
+            color: textColor,
+            numberOfLines: 1,
+            flex: 1,
+            children: option.label
+          }), selected && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CheckIcon, {
+            size: 14
+          })]
+        });
         return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
           children: [showGroupHeader && /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
             color: textColor,
             children: option.group
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-            flexDirection: "row",
-            alignItems: "center",
-            gap: "$2",
-            paddingHorizontal: "$3",
-            height: knobProps.sizeToken,
+          }), import_tamagui.isWeb ? optionRow : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
             onPress: function onPress() {
               return handleSelect(option);
             },
-            onMouseEnter: function onMouseEnter() {
-              return setActiveIndex(i);
-            },
-            hoverStyle: activeIndex != null ? {
-              backgroundColor: active ? import_colorRamps.formInputColors.background.focus : selected ? import_colorRamps.formInputColors.background.base : "transparent"
-            } : {
-              backgroundColor: selected ? import_colorRamps.formInputColors.background.base : import_colorRamps.formInputColors.background.focus
-            },
-            backgroundColor: active ? import_colorRamps.formInputColors.background.focus : selected ? import_colorRamps.formInputColors.background.base : "transparent",
-            pressStyle: {
-              backgroundColor: import_colorRamps.formInputColors.background.focus
+            accessibilityRole: "button",
+            accessibilityLabel: option.label,
+            accessibilityState: {
+              selected
             },
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontFamily: knobProps.body.fontFamily,
-              fontWeight: knobProps.body.fontWeight,
-              color: textColor,
-              numberOfLines: 1,
-              flex: 1,
-              children: option.label
-            }), selected && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CheckIcon, {
-              size: 14
-            })]
+            children: optionRow
           })]
         }, option.value);
       }), showCreateOption && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
@@ -1731,6 +1896,16 @@ function NativeComboboxCore(param) {
         flex: 1,
         children: createLabel.replace("{value}", filter.trim())
       })]
+    }) : loading ?
+    // Async search in flight with nothing loaded yet: a bounded loading
+    // row — never a premature "no results".
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Spinner.Spinner, {
+        size: "small"
+      })
     }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       ...knobProps.panelPadding,
       alignItems: "center",
@@ -1751,18 +1926,53 @@ function NativeComboboxCore(param) {
   });
   var triggerContent = triggerRender ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     "data-testid": "combobox-trigger",
+    width: "100%",
+    alignSelf: "stretch",
+    flexShrink: 0,
+    style: {
+      display: "flex",
+      alignItems: "stretch",
+      width: "100%"
+    },
     children: triggerRender(multiple ? selectedOptions : selectedOption, open)
   }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
     "data-testid": "combobox-trigger",
+    // LC-40: Box washes its own chrome when disabled — no opacity dim here
+    // (it stacked with the wash and pushed the value text below AA).
     cursor: disabled ? "not-allowed" : "pointer",
-    opacity: disabled ? 0.5 : 1,
     disabled,
     size: knobProps.sizeToken,
-    ...(inTableCell ? {} : {
+    ...(inTableCell ?
+    // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
+    {
+      minHeight: 44
+    } : {
       borderRadius: knobProps.borderRadius.borderRadius,
       borderWidth: knobProps.borderRadius.borderWidth
     }),
-    tabIndex: disabled ? -1 : 0,
+    id,
+    // Web: the box is the combobox control (ARIA + keyboard). Native:
+    // FloatingPanel's trigger Pressable (triggerA11y) is the single
+    // accessible node — role/aria props here surface the box as a
+    // duplicate TalkBack stop on Android, so exclude it from the tree
+    // (descendants stay reachable; "no", not "no-hide-descendants").
+    ...(import_tamagui.isWeb ? {
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      // Standalone (no label): fall back to placeholder for the name
+      "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : !hasLabel ? placeholder : void 0,
+      "aria-labelledby": !ariaLabel && hasLabel && id ? `${id}-label` : void 0,
+      "aria-describedby": describedBy,
+      tabIndex: disabled ? -1 : 0
+    } : {
+      importantForAccessibility: "no"
+    }),
+    // Web: trigger owns toggle. Native: FloatingPanel.native owns open
+    // (avoid double-toggle that batches open then immediately closed).
+    onPress: import_tamagui.isWeb && !disabled ? function () {
+      return handleOpenChange(!open);
+    } : void 0,
     onKeyDown: function onKeyDown(e) {
       if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) || e.code === "Space") {
         e.preventDefault();
@@ -1773,7 +1983,6 @@ function NativeComboboxCore(param) {
       flex: 1,
       paddingHorizontal: "$3",
       paddingVertical: "$2",
-      id,
       justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
       alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
       children: multiple && selectedValues.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
@@ -1802,23 +2011,51 @@ function NativeComboboxCore(param) {
       }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
         fontFamily: knobProps.body.fontFamily,
         fontWeight: knobProps.body.fontWeight,
-        color: selectedOption ? textColor : import_colorRamps.formCommonColors.muted,
+        color: selectedOption || !multiple && value && valueLabel ? textColor : import_colorRamps.formCommonColors.muted,
         numberOfLines: 1,
-        children: (_ref1 = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref1 !== void 0 ? _ref1 : placeholder
+        children: (_ref1 = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref1 !== void 0 ? _ref1 : !multiple && value && valueLabel ? valueLabel : placeholder
+      })
+    }), clearable && !multiple && !disabled && typeof value === "string" && value !== "" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      paddingInlineEnd: "$1",
+      alignSelf: "center",
+      cursor: "pointer",
+      role: "button",
+      tabIndex: -1,
+      "aria-label": t("Clear"),
+      opacity: 0.6,
+      hoverStyle: {
+        opacity: 1
+      },
+      onPress: function onPress(e) {
+        var _e_stopPropagation;
+        (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("");
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
+        size: 14
       })
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      paddingRight: "$2",
+      paddingInlineEnd: "$2",
       alignSelf: "center",
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
         size: 16
       })
     })]
   });
+  var triggerValueText = multiple ? selectedValues.length > 0 ? selectedValues.map(getLabel).join(", ") : placeholder : (_ref2 = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref2 !== void 0 ? _ref2 : placeholder;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
     open,
     onOpenChange: handleOpenChange,
     sheet: true,
+    // Search-driven comboboxes open the sheet tall: results stream in as
+    // the user types, so a content-fit sheet would open as a sliver.
+    sheetFill: Boolean(onSearch),
     trigger: triggerContent,
+    triggerA11y: {
+      label: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : fieldA11y === null || fieldA11y === void 0 ? void 0 : fieldA11y.label,
+      value: triggerValueText,
+      hint: fieldA11y === null || fieldA11y === void 0 ? void 0 : fieldA11y.description
+    },
     header: searchHeader,
     scrollable: hasScrollableContent,
     disabled,
@@ -1846,12 +2083,16 @@ function Combobox(param) {
     options,
     value: valueProp,
     defaultValue,
+    onChange,
     onValueChange,
-    placeholder = "Select...",
-    searchPlaceholder = "Search...",
-    emptyMessage = "No results found.",
+    placeholder: placeholderProp,
+    searchPlaceholder: searchPlaceholderProp,
+    emptyMessage: emptyMessageProp,
     onSearch,
     loading,
+    searchError,
+    valueLabel,
+    clearable,
     onLoadMore,
     hasMore,
     trigger,
@@ -1881,8 +2122,16 @@ function Combobox(param) {
     searchValue,
     open,
     onOpenChange,
+    "aria-label": ariaLabel,
     ...rest
   } = param;
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  var placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : t("Select...");
+  var hasLabel = Boolean(label);
+  var searchPlaceholder = searchPlaceholderProp !== null && searchPlaceholderProp !== void 0 ? searchPlaceholderProp : t("Search...");
+  var emptyMessage = emptyMessageProp !== null && emptyMessageProp !== void 0 ? emptyMessageProp : t("No results found.");
   var {
     resolvedForm,
     knobProps,
@@ -1893,6 +2142,8 @@ function Combobox(param) {
     compact
   });
   var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  var [uncontrolledValue, setUncontrolledValue] = (0, import_react.useState)(defaultValue);
+  var isControlled = valueProp !== void 0;
   var viewportGtSm = (0, import_FloatingPanel.useViewportGtSm)();
   var effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
   var shouldUseSheet = !import_tamagui.isWeb || !effectiveGtSm;
@@ -1935,7 +2186,7 @@ function Combobox(param) {
     var selected = options.find(function (option) {
       return option.value === sv;
     });
-    var displayText = (_ref = selected === null || selected === void 0 ? void 0 : selected.label) !== null && _ref !== void 0 ? _ref : sv || "-";
+    var displayText = (_ref = selected === null || selected === void 0 ? void 0 : selected.label) !== null && _ref !== void 0 ? _ref : sv ? valueLabel !== null && valueLabel !== void 0 ? valueLabel : sv : "-";
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       fontSize: knobProps.sizeToken,
       color: textColor,
@@ -1955,6 +2206,7 @@ function Combobox(param) {
       onValueChange: function onValueChange1(value) {
         if (disabled) return;
         handleValueChange === null || handleValueChange === void 0 ? void 0 : handleValueChange(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value);
       },
       onBlur: handleBlur,
@@ -1963,10 +2215,15 @@ function Combobox(param) {
       emptyMessage,
       onSearch,
       loading,
+      searchError,
+      valueLabel,
+      clearable,
       onLoadMore,
       hasMore,
       disabled,
       id,
+      "aria-label": ariaLabel,
+      hasLabel,
       tabIndexOverride: tabIndexProp,
       popoverWidth,
       trigger,
@@ -1983,7 +2240,7 @@ function Combobox(param) {
     });
   };
   if (trigger) {
-    return renderComboboxContent(valueProp, onValueChange, onBlur);
+    return renderComboboxContent(valueProp !== null && valueProp !== void 0 ? valueProp : uncontrolledValue, isControlled ? void 0 : setUncontrolledValue, onBlur);
   }
   if (!resolvedForm || !name) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
@@ -1995,10 +2252,13 @@ function Combobox(param) {
       required,
       size: sizeProp,
       knobProps,
+      // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
+      // the sibling label/helper readable) — it needs the disabled state.
+      disabled,
       ...rest,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
         size: sizeProp || knobProps.sizeToken,
-        children: renderComboboxContent(valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue, onValueChange, onBlur)
+        children: renderComboboxContent(valueProp !== null && valueProp !== void 0 ? valueProp : uncontrolledValue, isControlled ? void 0 : setUncontrolledValue, onBlur)
       })
     });
   }
@@ -2018,6 +2278,8 @@ function Combobox(param) {
         required,
         size: sizeProp,
         knobProps,
+        // LC-40: see standalone branch — FieldLayout carries dimWhole.
+        disabled,
         ...rest,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
           size: sizeProp || knobProps.sizeToken,