@multiplatform.one/forms 7.7.4 → 7.8.0

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

@@ -32,7 +32,9 @@ var import_react3 = require("@floating-ui/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_react_native = require("react-native-web");
 var import_tamagui = require("tamagui");
+var import_Button = require("../../Button/index.cjs");
 var import_Chip = require("../../Chip/index.cjs");
+var import_pickerTriggerContract = require("../../shared/pickerTriggerContract.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_InputParts = require("../../InputParts/index.cjs");
@@ -200,7 +202,7 @@ const ComboboxItem = (0, import_react.memo)(function ComboboxItem2({
     active: isActive,
     "aria-selected": isSelected,
     "data-state": isSelected ? "active" : "inactive",
-    size: ctx.knobProps.sizeToken,
+    height: ctx.knobProps.control.height,
     ...listItemRingProps(Boolean(keyboardRing)),
     ...(suppressHover ? {
       hoverStyle: {
@@ -272,6 +274,7 @@ function FloatingComboboxCore({
   tabIndexOverride,
   popoverWidth,
   trigger: triggerRender,
+  triggerSizing = "stretch",
   knobProps,
   multiple,
   selectedOrder,
@@ -966,7 +969,7 @@ function FloatingComboboxCore({
   (0, import_jsx_runtime.jsx)(import_tamagui.View, {
     ...boxEventProps,
     "data-testid": "combobox-trigger",
-    width: "100%",
+    width: triggerSizing === "content" ? "auto" : "100%",
     alignSelf: "stretch",
     flexShrink: 0,
     outlineWidth: 0,
@@ -976,7 +979,7 @@ function FloatingComboboxCore({
     style: {
       display: "flex",
       alignItems: "stretch",
-      width: "100%"
+      width: triggerSizing === "content" ? "auto" : "100%"
     },
     children: triggerRender(multiple ? selectedOptions : selectedOption, open)
   }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
@@ -986,18 +989,12 @@ function FloatingComboboxCore({
     disabled,
     size: knobProps.sizeToken,
     suppressFocusRing: open && !multiple,
+    ...(0, import_pickerTriggerContract.pickerTriggerContract)(knobProps.control.height),
     ...(inTableCell ?
-    // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
-    {
-      minHeight: 44
-    } : {
+    // Chromeless in cells.
+    {} : {
       borderRadius: knobProps.borderRadius.borderRadius,
-      borderWidth: knobProps.borderRadius.borderWidth,
-      // LC-54 PRESS-FLOOR: compact/small size tokens render a sub-44
-      // trigger (the 36px "Allocated To" quick filter breaking the
-      // list's 44px control row) — same floor the house Select holds
-      // on both its trigger variants.
-      minHeight: 44
+      borderWidth: knobProps.borderRadius.borderWidth
     }),
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.SyncFocusToOpen, {
       open
@@ -1026,6 +1023,7 @@ function FloatingComboboxCore({
           children: getLabel(v)
         }, v))
       }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.controlType,
         fontFamily: knobProps.body.fontFamily,
         fontWeight: knobProps.body.fontWeight,
         color: selectedOption || !multiple && value && valueLabel ? textColor : import_colorRamps.formCommonColors.muted,
@@ -1033,11 +1031,15 @@ function FloatingComboboxCore({
         userSelect: "none",
         children: selectedOption?.label ?? (!multiple && value && valueLabel ? valueLabel : placeholder)
       })
-    }), clearable && !multiple && !disabled && typeof value === "string" && value !== "" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      paddingInlineEnd: "$1",
+    }), clearable && !multiple && !disabled && typeof value === "string" && value !== "" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      size: knobProps.control.height,
+      chromeless: true,
+      ...(0, import_pickerTriggerContract.pickerTriggerContract)(knobProps.control.height),
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
+        size: 14
+      }),
       alignSelf: "center",
       cursor: "pointer",
-      role: "button",
       tabIndex: -1,
       "aria-label": t("Clear"),
       opacity: 0.6,
@@ -1051,10 +1053,7 @@ function FloatingComboboxCore({
       onPress: e => {
         e.stopPropagation?.();
         onValueChange?.("");
-      },
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
-        size: 14
-      })
+      }
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       paddingInlineEnd: "$2",
       alignSelf: "center",
@@ -1184,7 +1183,7 @@ function FloatingComboboxCore({
               id: comboboxOptionId(id, createOptionIndex),
               selected: false,
               active: createOptionIndex === activeIndex,
-              size: knobProps.sizeToken,
+              height: knobProps.control.height,
               "data-combobox-index": createOptionIndex,
               "data-active": createOptionIndex === activeIndex,
               ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
@@ -1214,7 +1213,7 @@ function FloatingComboboxCore({
             id: comboboxOptionId(id, createOptionIndex),
             selected: false,
             active: createOptionIndex === activeIndex,
-            size: knobProps.sizeToken,
+            height: knobProps.control.height,
             "data-combobox-index": createOptionIndex,
             "data-active": createOptionIndex === activeIndex,
             ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
@@ -1283,7 +1282,7 @@ const comboboxSearchHeader = (knobProps, filter, setFilter, searchPlaceholder, t
   alignItems: "center",
   gap: "$2",
   paddingHorizontal: "$3",
-  height: knobProps.sizeToken,
+  height: knobProps.control.height,
   borderBottomWidth: 1,
   borderBottomColor: import_colorRamps.formCommonColors.divider,
   children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.MagnifyingGlassIcon, {
@@ -1334,6 +1333,7 @@ function NativeComboboxCore({
   "aria-label": ariaLabel,
   hasLabel,
   trigger: triggerRender,
+  triggerSizing = "stretch",
   knobProps,
   multiple,
   selectedOrder,
@@ -1605,10 +1605,10 @@ function NativeComboboxCore({
           "data-active": active,
           ...listItemRingProps(active && listKeyboardRing),
           ...(option.description ? {
-            minHeight: knobProps.sizeToken,
+            minHeight: knobProps.control.height,
             paddingVertical: "$2"
           } : {
-            height: knobProps.sizeToken
+            height: knobProps.control.height
           }),
           onPress: import_tamagui.isWeb ? () => handleSelect(option) : void 0,
           onMouseEnter: () => {
@@ -1675,7 +1675,7 @@ function NativeComboboxCore({
         alignItems: "center",
         gap: "$2",
         paddingHorizontal: "$3",
-        height: knobProps.sizeToken,
+        height: knobProps.control.height,
         role: "option",
         id: comboboxOptionId(id, createOptionIndex),
         "data-combobox-index": createOptionIndex,
@@ -1712,7 +1712,7 @@ function NativeComboboxCore({
       alignItems: "center",
       gap: "$2",
       paddingHorizontal: "$3",
-      height: knobProps.sizeToken,
+      height: knobProps.control.height,
       role: "option",
       id: comboboxOptionId(id, createOptionIndex),
       "data-combobox-index": createOptionIndex,
@@ -1771,9 +1771,34 @@ function NativeComboboxCore({
       })
     })]
   });
+  const triggerProps = {
+    id,
+    ...(import_tamagui.isWeb ? {
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      "aria-controls": listboxId,
+      "aria-activedescendant": hideSearch ? activeDescendant : void 0,
+      "aria-autocomplete": hideSearch ? "list" : void 0,
+      "aria-label": ariaLabel ?? (!hasLabel ? placeholder : void 0),
+      "aria-describedby": describedBy,
+      tabIndex: disabled ? -1 : 0
+    } : {
+      importantForAccessibility: "no"
+    }),
+    onPress: import_tamagui.isWeb && !disabled ? () => handleOpenChange(true) : void 0,
+    onKeyDown: event => {
+      if (disabled) return;
+      if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(event.key) || event.code === "Space") {
+        event.preventDefault();
+        setKeyboardNav(true);
+        if (!open) handleOpenChange(true);
+      }
+    }
+  };
   const triggerContent = triggerRender ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     "data-testid": "combobox-trigger",
-    width: "100%",
+    width: triggerSizing === "content" ? "auto" : "100%",
     alignSelf: "stretch",
     flexShrink: 0,
     outlineWidth: 0,
@@ -1783,8 +1808,9 @@ function NativeComboboxCore({
     style: {
       display: "flex",
       alignItems: "stretch",
-      width: "100%"
+      width: triggerSizing === "content" ? "auto" : "100%"
     },
+    ...triggerProps,
     children: triggerRender(multiple ? selectedOptions : selectedOption, open)
   }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
     "data-testid": "combobox-trigger",
@@ -1792,39 +1818,14 @@ function NativeComboboxCore({
     disabled,
     size: knobProps.sizeToken,
     suppressFocusRing: open && !multiple,
+    ...(0, import_pickerTriggerContract.pickerTriggerContract)(knobProps.control.height),
     ...(inTableCell ?
-    // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
-    {
-      minHeight: 44
-    } : {
+    // Chromeless in cells.
+    {} : {
       borderRadius: knobProps.borderRadius.borderRadius,
       borderWidth: knobProps.borderRadius.borderWidth
     }),
-    id,
-    ...(import_tamagui.isWeb ? {
-      role: "combobox",
-      "aria-haspopup": "listbox",
-      "aria-expanded": open,
-      "aria-controls": listboxId,
-      "aria-activedescendant": hideSearch ? activeDescendant : void 0,
-      "aria-autocomplete": hideSearch ? "list" : void 0,
-      // Standalone (no label): fall back to placeholder for the name.
-      // Labelled: the sibling Label wires `aria-labelledby` onto this id
-      // itself — naming it here too doubles the spoken name.
-      "aria-label": ariaLabel ?? (!hasLabel ? placeholder : void 0),
-      "aria-describedby": describedBy,
-      tabIndex: disabled ? -1 : 0
-    } : {
-      importantForAccessibility: "no"
-    }),
-    onPress: import_tamagui.isWeb && !disabled ? () => handleOpenChange(!open) : void 0,
-    onKeyDown: e => {
-      if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) || e.code === "Space") {
-        e.preventDefault();
-        setKeyboardNav(true);
-        if (!open) handleOpenChange(true);
-      }
-    },
+    ...triggerProps,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       flex: 1,
       paddingHorizontal: "$3",
@@ -1850,30 +1851,13 @@ function NativeComboboxCore({
           children: getLabel(v)
         }, v))
       }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.controlType,
         fontFamily: knobProps.body.fontFamily,
         fontWeight: knobProps.body.fontWeight,
         color: selectedOption || !multiple && value && valueLabel ? textColor : import_colorRamps.formCommonColors.muted,
         numberOfLines: 1,
         children: selectedOption?.label ?? (!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: e => {
-        e.stopPropagation?.();
-        onValueChange?.("");
-      },
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
-        size: 14
-      })
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       paddingInlineEnd: "$2",
       alignSelf: "center",
@@ -1890,6 +1874,18 @@ function NativeComboboxCore({
     sheet: true,
     sheetFill: Boolean(onSearch),
     trigger: triggerContent,
+    triggerSizing,
+    triggerEnd: clearable && !multiple && !disabled && typeof value === "string" && value !== "" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      size: knobProps.sizeToken,
+      chromeless: true,
+      minWidth: 44,
+      minHeight: 44,
+      "aria-label": t("Clear"),
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
+        size: 14
+      }),
+      onPress: () => onValueChange?.("")
+    }) : void 0,
     triggerA11y: {
       label: ariaLabel ?? fieldA11y?.label,
       value: triggerValueText,
@@ -1934,6 +1930,7 @@ function Combobox({
   onLoadMore,
   hasMore,
   trigger,
+  triggerSizing,
   name,
   form: formProp,
   validators,
@@ -2057,6 +2054,7 @@ function Combobox({
       tabIndexOverride: tabIndexProp,
       popoverWidth,
       trigger,
+      triggerSizing,
       knobProps,
       multiple,
       selectedOrder,

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

@@ -35,7 +35,9 @@ var import_react3 = require("@floating-ui/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_react_native = require("react-native");
 var import_tamagui = require("tamagui");
+var import_Button = require("../../Button/index.native.js");
 var import_Chip = require("../../Chip/index.native.js");
+var import_pickerTriggerContract = require("../../shared/pickerTriggerContract.native.js");
 var import_Skeleton = require("../../Skeleton/index.native.js");
 var import_fieldLayout = require("../../fieldLayout.native.js");
 var import_InputParts = require("../../InputParts/index.native.js");
@@ -292,7 +294,7 @@ var ComboboxItem = /* @__PURE__ */(0, import_react.memo)(function ComboboxItem2(
     active: isActive,
     "aria-selected": isSelected,
     "data-state": isSelected ? "active" : "inactive",
-    size: ctx.knobProps.sizeToken,
+    height: ctx.knobProps.control.height,
     ...listItemRingProps(Boolean(keyboardRing)),
     ...(suppressHover ? {
       hoverStyle: {
@@ -365,6 +367,7 @@ function FloatingComboboxCore(param) {
     tabIndexOverride,
     popoverWidth,
     trigger: triggerRender,
+    triggerSizing = "stretch",
     knobProps,
     multiple,
     selectedOrder,
@@ -1150,7 +1153,7 @@ function FloatingComboboxCore(param) {
   (0, import_jsx_runtime.jsx)(import_tamagui.View, {
     ...boxEventProps,
     "data-testid": "combobox-trigger",
-    width: "100%",
+    width: triggerSizing === "content" ? "auto" : "100%",
     alignSelf: "stretch",
     flexShrink: 0,
     outlineWidth: 0,
@@ -1160,7 +1163,7 @@ function FloatingComboboxCore(param) {
     style: {
       display: "flex",
       alignItems: "stretch",
-      width: "100%"
+      width: triggerSizing === "content" ? "auto" : "100%"
     },
     children: triggerRender(multiple ? selectedOptions : selectedOption, open)
   }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
@@ -1177,18 +1180,12 @@ function FloatingComboboxCore(param) {
     // attaches below instead (MPO-38), leaving the trigger on screen and
     // focusable, so it keeps its ring.
     suppressFocusRing: open && !multiple,
+    ...(0, import_pickerTriggerContract.pickerTriggerContract)(knobProps.control.height),
     ...(inTableCell ?
-    // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
-    {
-      minHeight: 44
-    } : {
+    // Chromeless in cells.
+    {} : {
       borderRadius: knobProps.borderRadius.borderRadius,
-      borderWidth: knobProps.borderRadius.borderWidth,
-      // LC-54 PRESS-FLOOR: compact/small size tokens render a sub-44
-      // trigger (the 36px "Allocated To" quick filter breaking the
-      // list's 44px control row) — same floor the house Select holds
-      // on both its trigger variants.
-      minHeight: 44
+      borderWidth: knobProps.borderRadius.borderWidth
     }),
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.SyncFocusToOpen, {
       open
@@ -1222,6 +1219,7 @@ function FloatingComboboxCore(param) {
           }, v);
         })
       }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.controlType,
         fontFamily: knobProps.body.fontFamily,
         fontWeight: knobProps.body.fontWeight,
         color: selectedOption || !multiple && value && valueLabel ? textColor : import_colorRamps.formCommonColors.muted,
@@ -1229,11 +1227,15 @@ function FloatingComboboxCore(param) {
         userSelect: "none",
         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",
+    }), clearable && !multiple && !disabled && typeof value === "string" && value !== "" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      size: knobProps.control.height,
+      chromeless: true,
+      ...(0, import_pickerTriggerContract.pickerTriggerContract)(knobProps.control.height),
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
+        size: 14
+      }),
       alignSelf: "center",
       cursor: "pointer",
-      role: "button",
       tabIndex: -1,
       "aria-label": t("Clear"),
       opacity: 0.6,
@@ -1250,10 +1252,7 @@ function FloatingComboboxCore(param) {
         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, {
       paddingInlineEnd: "$2",
       alignSelf: "center",
@@ -1390,7 +1389,7 @@ function FloatingComboboxCore(param) {
               id: comboboxOptionId(id, createOptionIndex),
               selected: false,
               active: createOptionIndex === activeIndex,
-              size: knobProps.sizeToken,
+              height: knobProps.control.height,
               "data-combobox-index": createOptionIndex,
               "data-active": createOptionIndex === activeIndex,
               ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
@@ -1420,7 +1419,7 @@ function FloatingComboboxCore(param) {
             id: comboboxOptionId(id, createOptionIndex),
             selected: false,
             active: createOptionIndex === activeIndex,
-            size: knobProps.sizeToken,
+            height: knobProps.control.height,
             "data-combobox-index": createOptionIndex,
             "data-active": createOptionIndex === activeIndex,
             ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
@@ -1490,7 +1489,7 @@ var comboboxSearchHeader = function comboboxSearchHeader2(knobProps, filter, set
     alignItems: "center",
     gap: "$2",
     paddingHorizontal: "$3",
-    height: knobProps.sizeToken,
+    height: knobProps.control.height,
     borderBottomWidth: 1,
     borderBottomColor: import_colorRamps.formCommonColors.divider,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.MagnifyingGlassIcon, {
@@ -1546,6 +1545,7 @@ function NativeComboboxCore(param) {
     "aria-label": ariaLabel,
     hasLabel,
     trigger: triggerRender,
+    triggerSizing = "stretch",
     knobProps,
     multiple,
     selectedOrder,
@@ -1878,10 +1878,10 @@ function NativeComboboxCore(param) {
           "data-active": active,
           ...listItemRingProps(active && listKeyboardRing),
           ...(option.description ? {
-            minHeight: knobProps.sizeToken,
+            minHeight: knobProps.control.height,
             paddingVertical: "$2"
           } : {
-            height: knobProps.sizeToken
+            height: knobProps.control.height
           }),
           onPress: import_tamagui.isWeb ? function () {
             return handleSelect(option);
@@ -1952,7 +1952,7 @@ function NativeComboboxCore(param) {
         alignItems: "center",
         gap: "$2",
         paddingHorizontal: "$3",
-        height: knobProps.sizeToken,
+        height: knobProps.control.height,
         role: "option",
         id: comboboxOptionId(id, createOptionIndex),
         "data-combobox-index": createOptionIndex,
@@ -1989,7 +1989,7 @@ function NativeComboboxCore(param) {
       alignItems: "center",
       gap: "$2",
       paddingHorizontal: "$3",
-      height: knobProps.sizeToken,
+      height: knobProps.control.height,
       role: "option",
       id: comboboxOptionId(id, createOptionIndex),
       "data-combobox-index": createOptionIndex,
@@ -2048,9 +2048,36 @@ function NativeComboboxCore(param) {
       })
     })]
   });
+  var triggerProps = {
+    id,
+    ...(import_tamagui.isWeb ? {
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      "aria-controls": listboxId,
+      "aria-activedescendant": hideSearch ? activeDescendant : void 0,
+      "aria-autocomplete": hideSearch ? "list" : void 0,
+      "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : !hasLabel ? placeholder : void 0,
+      "aria-describedby": describedBy,
+      tabIndex: disabled ? -1 : 0
+    } : {
+      importantForAccessibility: "no"
+    }),
+    onPress: import_tamagui.isWeb && !disabled ? function () {
+      return handleOpenChange(true);
+    } : void 0,
+    onKeyDown: function onKeyDown(event) {
+      if (disabled) return;
+      if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(event.key) || event.code === "Space") {
+        event.preventDefault();
+        setKeyboardNav(true);
+        if (!open) handleOpenChange(true);
+      }
+    }
+  };
   var triggerContent = triggerRender ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     "data-testid": "combobox-trigger",
-    width: "100%",
+    width: triggerSizing === "content" ? "auto" : "100%",
     alignSelf: "stretch",
     flexShrink: 0,
     outlineWidth: 0,
@@ -2060,8 +2087,9 @@ function NativeComboboxCore(param) {
     style: {
       display: "flex",
       alignItems: "stretch",
-      width: "100%"
+      width: triggerSizing === "content" ? "auto" : "100%"
     },
+    ...triggerProps,
     children: triggerRender(multiple ? selectedOptions : selectedOption, open)
   }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
     "data-testid": "combobox-trigger",
@@ -2075,48 +2103,14 @@ function NativeComboboxCore(param) {
     // paint — it would ghost around the panel's corners. A multi-select
     // panel attaches below instead (MPO-38), so it keeps its ring.
     suppressFocusRing: open && !multiple,
+    ...(0, import_pickerTriggerContract.pickerTriggerContract)(knobProps.control.height),
     ...(inTableCell ?
-    // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
-    {
-      minHeight: 44
-    } : {
+    // Chromeless in cells.
+    {} : {
       borderRadius: knobProps.borderRadius.borderRadius,
       borderWidth: knobProps.borderRadius.borderWidth
     }),
-    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,
-      "aria-controls": listboxId,
-      "aria-activedescendant": hideSearch ? activeDescendant : void 0,
-      "aria-autocomplete": hideSearch ? "list" : void 0,
-      // Standalone (no label): fall back to placeholder for the name.
-      // Labelled: the sibling Label wires `aria-labelledby` onto this id
-      // itself — naming it here too doubles the spoken name.
-      "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : !hasLabel ? placeholder : 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();
-        setKeyboardNav(true);
-        if (!open) handleOpenChange(true);
-      }
-    },
+    ...triggerProps,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       flex: 1,
       paddingHorizontal: "$3",
@@ -2147,31 +2141,13 @@ function NativeComboboxCore(param) {
           }, v);
         })
       }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.controlType,
         fontFamily: knobProps.body.fontFamily,
         fontWeight: knobProps.body.fontWeight,
         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 : !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, {
       paddingInlineEnd: "$2",
       alignSelf: "center",
@@ -2190,6 +2166,20 @@ function NativeComboboxCore(param) {
     // the user types, so a content-fit sheet would open as a sliver.
     sheetFill: Boolean(onSearch),
     trigger: triggerContent,
+    triggerSizing,
+    triggerEnd: clearable && !multiple && !disabled && typeof value === "string" && value !== "" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      size: knobProps.sizeToken,
+      chromeless: true,
+      minWidth: 44,
+      minHeight: 44,
+      "aria-label": t("Clear"),
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
+        size: 14
+      }),
+      onPress: function onPress() {
+        return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("");
+      }
+    }) : void 0,
     triggerA11y: {
       label: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : fieldA11y === null || fieldA11y === void 0 ? void 0 : fieldA11y.label,
       value: triggerValueText,
@@ -2235,6 +2225,7 @@ function Combobox(param) {
     onLoadMore,
     hasMore,
     trigger,
+    triggerSizing,
     name,
     form: formProp,
     validators,
@@ -2367,6 +2358,7 @@ function Combobox(param) {
       tabIndexOverride: tabIndexProp,
       popoverWidth,
       trigger,
+      triggerSizing,
       knobProps,
       multiple,
       selectedOrder,