@eifi1/ui-kit 0.4.1 → 0.5.0

package/dist/components/combobox.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment, useId, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
@@ -8,7 +9,9 @@ import { useDropdown } from "./dropdown.js";
 import { useAnchoredPanel } from "../hooks/use-anchored-panel.js";
 import { useMediaQuery } from "../hooks/use-media-query.js";
 import { PickerSheet, SHEET_ROW_CLASS } from "./picker-sheet.js";
-const LIST_CLASS = "max-h-64 overflow-y-auto rounded-md border border-slate-200 bg-white py-1 shadow-lg dark:border-slate-700 dark:bg-slate-900";
+import { useActiveOptionScroll } from "./combobox-core.js";
+import { DEFAULT_COMBOBOX_LABELS, useKitLabels } from "../i18n/kit-labels.js";
+const LIST_CLASS = "max-h-64 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] py-1 shadow-lg";
 function usePrimaryPressOnly() {
   const auxPress = useRef(false);
   return {
@@ -24,6 +27,7 @@ function usePrimaryPressOnly() {
   };
 }
 function SuggestionList({
+  id,
   anchorRef,
   panelRef,
   children
@@ -37,15 +41,15 @@ function SuggestionList({
         ref: panelRef,
         className: "fixed z-50",
         style: { top, left: rect.left, width: rect.width },
-        children: /* @__PURE__ */ jsx("ul", { role: "listbox", className: LIST_CLASS, style: { maxHeight }, children })
+        children: /* @__PURE__ */ jsx("ul", { id, role: "listbox", className: LIST_CLASS, style: { maxHeight }, children })
       }
     ),
     document.body
   );
 }
 const rowClass = (isActive) => cn(
-  "block w-full truncate px-3 py-1.5 text-left text-sm text-slate-900 dark:text-slate-100",
-  isActive ? "bg-slate-100 dark:bg-slate-800" : "hover:bg-slate-50 dark:hover:bg-slate-800"
+  "block w-full truncate px-3 py-1.5 text-left text-sm text-[var(--text-primary)]",
+  isActive ? "bg-[var(--bg-active)]" : "hover:bg-[var(--bg-hover)]"
 );
 function Combobox({
   value,
@@ -65,10 +69,13 @@ function Combobox({
   autoFocus,
   onBlur,
   onSubmit,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  ...rest
 }) {
   const generated = useId();
   const fieldId = id ?? generated;
+  const listboxId = `${generated}-listbox`;
+  const optionId = (index) => `${generated}-option-${index}`;
   const isPhone = useMediaQuery(PHONE_QUERY, false);
   const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone });
   const primaryOnly = usePrimaryPressOnly();
@@ -100,194 +107,230 @@ function Combobox({
     }
     return [...byGroup.values()].flat();
   }, [options, query, groupBy, maxSuggestions, isPhone]);
+  const groupHeadings = useMemo(() => {
+    if (!groupBy) return null;
+    const heads = /* @__PURE__ */ new Map();
+    let prev;
+    matches.forEach((o, i) => {
+      const group = groupBy(o);
+      if (group != null && group !== prev) heads.set(i, group);
+      prev = group;
+    });
+    return heads;
+  }, [matches, groupBy]);
   const commit = (v) => {
     onChange(v);
     setOpen(false);
     setActive(-1);
     setTyping(false);
   };
+  const activeId = !isPhone && active >= 0 && active < matches.length ? optionId(active) : void 0;
+  useActiveOptionScroll(activeId);
   const typed = value.trim();
   const createRow = createLabel && typed.length > 0 && !options.some((o) => o.toLowerCase() === typed.toLowerCase()) ? createLabel(typed) : null;
-  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: cn("relative", className), children: [
-    label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
-    /* @__PURE__ */ jsxs("div", { ref: fieldRef, className: "relative", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id: fieldId,
-          value,
-          placeholder,
-          "aria-label": ariaLabel ?? label,
-          role: "combobox",
-          "aria-expanded": open,
-          "aria-autocomplete": "list",
-          "aria-invalid": invalid || void 0,
-          autoComplete: "off",
-          autoFocus,
-          onBlur,
-          onMouseDown: primaryOnly.onMouseDown,
-          onFocus: () => {
-            if (primaryOnly.fromAuxButton()) return;
-            setOpen(true);
-            setTyping(false);
-            if (isPhone) sheetInputRef.current?.focus();
-          },
-          onClick: () => {
-            setOpen(true);
-            setTyping(false);
-          },
-          inputMode: isPhone ? "none" : void 0,
-          onChange: (e) => {
-            onChange(e.target.value);
-            setOpen(true);
-            setActive(-1);
-            setTyping(true);
-          },
-          onKeyDown: (e) => {
-            if (e.key === "ArrowDown") {
-              e.preventDefault();
+  return (
+    // `rest` dresses the outer box — a `data-tour` anchor, a test id, a form-level
+    // `aria-describedby`. Not the NAME: that belongs on the <input> below, which is
+    // the combobox a reader meets. Spread FIRST, so the field's ARIA and the
+    // handlers carrying live #309 and dev#549 cannot be replaced from outside.
+    /* @__PURE__ */ jsxs("div", { ...rest, ref: wrapperRef, className: cn("relative", className), children: [
+      label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
+      /* @__PURE__ */ jsxs("div", { ref: fieldRef, className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: fieldId,
+            value,
+            placeholder,
+            "aria-label": ariaLabel ?? label,
+            role: "combobox",
+            "aria-expanded": open,
+            "aria-controls": listboxId,
+            "aria-activedescendant": activeId,
+            "aria-autocomplete": "list",
+            "aria-invalid": invalid || void 0,
+            autoComplete: "off",
+            autoFocus,
+            onBlur,
+            onMouseDown: primaryOnly.onMouseDown,
+            onFocus: () => {
+              if (primaryOnly.fromAuxButton()) return;
               setOpen(true);
-              setActive((i) => Math.min(i + 1, matches.length - 1));
-            } else if (e.key === "ArrowUp") {
-              e.preventDefault();
-              setActive((i) => Math.max(i - 1, 0));
-            } else if (e.key === "Enter") {
-              if (open && active >= 0 && active < matches.length) {
+              setTyping(false);
+              if (isPhone) sheetInputRef.current?.focus();
+            },
+            onClick: () => {
+              setOpen(true);
+              setTyping(false);
+            },
+            inputMode: isPhone ? "none" : void 0,
+            onChange: (e) => {
+              onChange(e.target.value);
+              setOpen(true);
+              setActive(-1);
+              setTyping(true);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "ArrowDown") {
+                e.preventDefault();
+                setOpen(true);
+                setActive((i) => Math.min(i + 1, matches.length - 1));
+              } else if (e.key === "ArrowUp") {
                 e.preventDefault();
-                commit(matches[active]);
-              } else {
-                if (onSubmit) e.preventDefault();
+                setActive((i) => Math.max(i - 1, 0));
+              } else if (e.key === "Enter") {
+                if (open && active >= 0 && active < matches.length) {
+                  e.preventDefault();
+                  commit(matches[active]);
+                } else {
+                  if (onSubmit) e.preventDefault();
+                  setOpen(false);
+                  onSubmit?.();
+                }
+              } else if (e.key === "Escape") {
+                setOpen(false);
+                setActive(-1);
+              } else if (e.key === "Tab") {
                 setOpen(false);
-                onSubmit?.();
+                setActive(-1);
               }
-            } else if (e.key === "Escape") {
-              setOpen(false);
-              setActive(-1);
-            }
-          },
-          className: cn(FIELD_BASE, label !== void 0 && FIELD_FLOATING_PAD, "pr-9", invalid && FIELD_INVALID)
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        ChevronDown,
-        {
-          "aria-hidden": true,
-          onMouseDown: (e) => {
-            e.preventDefault();
-            setOpen((o) => !o);
-          },
-          className: "absolute right-2.5 top-1/2 size-4 -translate-y-1/2 cursor-pointer text-slate-400 dark:text-slate-500"
-        }
-      )
-    ] }),
-    isPhone && /* @__PURE__ */ jsx(
-      PickerSheet,
-      {
-        open,
-        onClose: () => setOpen(false),
-        title: label,
-        query: value,
-        onQueryChange: (v) => {
-          onChange(v);
-          setTyping(true);
-        },
-        searchPlaceholder: searchPlaceholder ?? placeholder,
-        inputRef: sheetInputRef,
-        closeLabel,
-        children: /* @__PURE__ */ jsxs("ul", { role: "listbox", children: [
-          createRow && /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": false, children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => commit(typed),
-              className: cn(SHEET_ROW_CLASS, "font-medium text-teal-700 dark:text-teal-300"),
-              children: createRow
-            }
-          ) }),
-          matches.map((o) => {
-            const group = groupBy?.(o);
-            const startsGroup = group != null && group !== (matches[matches.indexOf(o) - 1] && groupBy?.(matches[matches.indexOf(o) - 1]));
-            return /* @__PURE__ */ jsxs(Fragment, { children: [
-              startsGroup && /* @__PURE__ */ jsx(
-                "li",
-                {
-                  role: "presentation",
-                  className: "px-4 pb-0.5 pt-3 text-[11px] font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400",
-                  children: group
-                }
-              ),
-              /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": o === value, children: /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => commit(o),
-                  className: cn(
-                    SHEET_ROW_CLASS,
-                    optionAdornment && "flex items-center justify-between gap-2"
-                  ),
-                  children: [
-                    optionAdornment ? /* @__PURE__ */ jsx("span", { className: "truncate", children: o }) : o,
-                    optionAdornment?.(o)
-                  ]
-                }
-              ) })
-            ] }, o);
-          })
-        ] })
-      }
-    ),
-    !isPhone && open && (matches.length > 0 || createRow) && /* @__PURE__ */ jsxs(SuggestionList, { anchorRef: fieldRef, panelRef, children: [
-      createRow && /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": false, children: /* @__PURE__ */ jsx(
-        "button",
+            },
+            className: cn(FIELD_BASE, label !== void 0 && FIELD_FLOATING_PAD, "pr-9", invalid && FIELD_INVALID)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            "aria-hidden": true,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              setOpen((o) => !o);
+            },
+            className: "absolute right-2.5 top-1/2 size-4 -translate-y-1/2 cursor-pointer text-[var(--text-placeholder)]"
+          }
+        )
+      ] }),
+      isPhone && /* @__PURE__ */ jsx(
+        PickerSheet,
         {
-          type: "button",
-          onMouseDown: (e) => {
-            e.preventDefault();
-            commit(typed);
+          open,
+          onClose: () => setOpen(false),
+          title: label,
+          query: value,
+          onQueryChange: (v) => {
+            onChange(v);
+            setTyping(true);
           },
-          className: cn(rowClass(false), "font-medium text-teal-700 dark:text-teal-300"),
-          children: createRow
+          searchPlaceholder: searchPlaceholder ?? placeholder,
+          inputRef: sheetInputRef,
+          closeLabel,
+          children: /* @__PURE__ */ jsxs("ul", { id: listboxId, role: "listbox", children: [
+            createRow && // `role="option"` rides the BUTTON, not the <li> around it: an option
+            // may not contain a separately focusable control, and the button is
+            // what a pointer presses. Same shape `CommandPalette` has always had.
+            /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": false,
+                onClick: () => commit(typed),
+                className: cn(SHEET_ROW_CLASS, "font-medium text-[var(--brand)]"),
+                children: createRow
+              }
+            ) }),
+            matches.map((o, i) => {
+              const group = groupHeadings?.get(i);
+              return /* @__PURE__ */ jsxs(Fragment, { children: [
+                group !== void 0 && /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    role: "presentation",
+                    className: "px-4 pb-0.5 pt-3 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]",
+                    children: group
+                  }
+                ),
+                /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": o === value,
+                    onClick: () => commit(o),
+                    className: cn(
+                      SHEET_ROW_CLASS,
+                      optionAdornment && "flex items-center justify-between gap-2"
+                    ),
+                    children: [
+                      optionAdornment ? /* @__PURE__ */ jsx("span", { className: "truncate", children: o }) : o,
+                      optionAdornment?.(o)
+                    ]
+                  }
+                ) })
+              ] }, o);
+            })
+          ] })
         }
-      ) }),
-      matches.map((o, i) => {
-        const group = groupBy?.(o);
-        const startsGroup = group != null && group !== (matches[i - 1] && groupBy?.(matches[i - 1]));
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          startsGroup && /* @__PURE__ */ jsx(
-            "li",
-            {
-              role: "presentation",
-              className: "px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500 first:pt-1 dark:text-slate-400",
-              children: group
-            }
-          ),
-          /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": i === active, children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onMouseDown: (e) => {
-                e.preventDefault();
-                commit(o);
-              },
-              onMouseEnter: () => setActive(i),
-              className: cn(
-                rowClass(i === active),
-                group != null && "pl-6",
-                // A row with a badge is a flex row so the label truncates and the
-                // badge keeps its width; without one it stays the plain block the
-                // other lists render, so nothing shifts for callers that pass none.
-                optionAdornment && "flex items-center justify-between gap-2"
-              ),
-              children: [
-                optionAdornment ? /* @__PURE__ */ jsx("span", { className: "truncate", children: o }) : o,
-                optionAdornment?.(o)
-              ]
-            }
-          ) })
-        ] }, o);
-      })
+      ),
+      !isPhone && open && (matches.length > 0 || createRow) && /* @__PURE__ */ jsxs(SuggestionList, { id: listboxId, anchorRef: fieldRef, panelRef, children: [
+        createRow && /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": false,
+            tabIndex: -1,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              commit(typed);
+            },
+            className: cn(rowClass(false), "font-medium text-[var(--brand)]"),
+            children: createRow
+          }
+        ) }),
+        matches.map((o, i) => {
+          const group = groupHeadings?.get(i);
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            group !== void 0 && /* @__PURE__ */ jsx(
+              "li",
+              {
+                role: "presentation",
+                className: "px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1",
+                children: group
+              }
+            ),
+            /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                id: optionId(i),
+                role: "option",
+                "aria-selected": o === value,
+                tabIndex: -1,
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  commit(o);
+                },
+                onMouseEnter: () => setActive(i),
+                className: cn(
+                  rowClass(i === active),
+                  group != null && "pl-6",
+                  // A row with a badge is a flex row so the label truncates and the
+                  // badge keeps its width; without one it stays the plain block the
+                  // other lists render, so nothing shifts for callers that pass none.
+                  optionAdornment && "flex items-center justify-between gap-2"
+                ),
+                children: [
+                  optionAdornment ? /* @__PURE__ */ jsx("span", { className: "truncate", children: o }) : o,
+                  optionAdornment?.(o)
+                ]
+              }
+            ) })
+          ] }, o);
+        })
+      ] })
     ] })
-  ] });
+  );
 }
 function InlineEntityCombobox({
   value,
@@ -305,10 +348,13 @@ function InlineEntityCombobox({
   clearable,
   clearLabel,
   invalid,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  ...rest
 }) {
   const generated = useId();
   const fieldId = id ?? generated;
+  const listboxId = `${generated}-listbox`;
+  const optionId = (index) => `${generated}-option-${index}`;
   const isPhone = useMediaQuery(PHONE_QUERY, false);
   const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone });
   const primaryOnly = usePrimaryPressOnly();
@@ -317,6 +363,11 @@ function InlineEntityCombobox({
   const sheetInputRef = useRef(null);
   const fieldRef = useRef(null);
   const [sheetQuery, setSheetQuery] = useState("");
+  const labels = useKitLabels("combobox", DEFAULT_COMBOBOX_LABELS, {
+    search: searchPlaceholder,
+    noResults: emptyLabel,
+    clear: clearLabel
+  });
   const selected = useMemo(
     () => value == null ? null : options.find((o) => o.value === value) ?? null,
     [options, value]
@@ -330,10 +381,10 @@ function InlineEntityCombobox({
     if (query) {
       const hit = (s) => s?.toLowerCase().includes(query) ?? false;
       const starts = options.filter((o) => o.label.toLowerCase().startsWith(query));
-      const rest = options.filter(
+      const rest2 = options.filter(
         (o) => !o.label.toLowerCase().startsWith(query) && (hit(o.label) || hit(o.sublabel) || hit(o.group))
       );
-      ranked = [...starts, ...rest];
+      ranked = [...starts, ...rest2];
     }
     if (!ranked.some((o) => o.group)) return ranked;
     const blocks = /* @__PURE__ */ new Map();
@@ -344,6 +395,8 @@ function InlineEntityCombobox({
     }
     return [...blocks.values()].flat();
   }, [options, query]);
+  const activeId = !isPhone && active >= 0 && active < matches.length ? optionId(active) : void 0;
+  useActiveOptionScroll(activeId);
   const close = () => {
     setOpen(false);
     setActive(-1);
@@ -368,180 +421,196 @@ function InlineEntityCombobox({
     }
     close();
   };
-  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: cn("relative", className), children: [
-    label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
-    /* @__PURE__ */ jsxs("div", { ref: fieldRef, className: "relative", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id: fieldId,
-          value: shown,
-          placeholder,
-          "aria-label": ariaLabel ?? (typeof label === "string" ? label : void 0),
-          role: "combobox",
-          "aria-expanded": open,
-          "aria-autocomplete": "list",
-          "aria-invalid": invalid || void 0,
-          autoComplete: "off",
-          disabled,
-          autoFocus,
-          inputMode: isPhone ? "none" : void 0,
-          onMouseDown: primaryOnly.onMouseDown,
-          onFocus: (e) => {
-            if (primaryOnly.fromAuxButton()) return;
-            setText(shown);
-            e.currentTarget.select();
-            setOpen(true);
-            if (isPhone) sheetInputRef.current?.focus();
-          },
-          onBlur: () => {
-            if (!isPhone) reconcile();
-          },
-          onChange: (e) => {
-            setText(e.target.value);
-            setOpen(true);
-            setActive(-1);
-          },
-          onKeyDown: (e) => {
-            if (e.key === "ArrowDown") {
-              e.preventDefault();
+  return (
+    // `rest` dresses the outer box — a `data-tour` anchor, a test id, a form-level
+    // `aria-describedby`. Not the NAME: that belongs on the <input> below, which is
+    // the combobox a reader meets. Spread FIRST, so the field's ARIA and the
+    // handlers carrying live #309 and dev#549 cannot be replaced from outside.
+    /* @__PURE__ */ jsxs("div", { ...rest, ref: wrapperRef, className: cn("relative", className), children: [
+      label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
+      /* @__PURE__ */ jsxs("div", { ref: fieldRef, className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: fieldId,
+            value: shown,
+            placeholder,
+            "aria-label": ariaLabel ?? (typeof label === "string" ? label : void 0),
+            role: "combobox",
+            "aria-expanded": open,
+            "aria-controls": listboxId,
+            "aria-activedescendant": activeId,
+            "aria-autocomplete": "list",
+            "aria-invalid": invalid || void 0,
+            autoComplete: "off",
+            disabled,
+            autoFocus,
+            inputMode: isPhone ? "none" : void 0,
+            onMouseDown: primaryOnly.onMouseDown,
+            onFocus: (e) => {
+              if (primaryOnly.fromAuxButton()) return;
+              setText(shown);
+              e.currentTarget.select();
               setOpen(true);
-              setActive((i) => Math.min(i + 1, matches.length - 1));
-            } else if (e.key === "ArrowUp") {
-              e.preventDefault();
-              setActive((i) => Math.max(i - 1, 0));
-            } else if (e.key === "Enter") {
-              if (open && active >= 0 && active < matches.length) {
+              if (isPhone) sheetInputRef.current?.focus();
+            },
+            onBlur: () => {
+              if (!isPhone) reconcile();
+            },
+            onChange: (e) => {
+              setText(e.target.value);
+              setOpen(true);
+              setActive(-1);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "ArrowDown") {
                 e.preventDefault();
-                commit(matches[active]);
-              } else {
+                setOpen(true);
+                setActive((i) => Math.min(i + 1, matches.length - 1));
+              } else if (e.key === "ArrowUp") {
+                e.preventDefault();
+                setActive((i) => Math.max(i - 1, 0));
+              } else if (e.key === "Enter") {
+                if (open && active >= 0 && active < matches.length) {
+                  e.preventDefault();
+                  commit(matches[active]);
+                } else {
+                  reconcile();
+                }
+              } else if (e.key === "Escape") {
+                setText(null);
+                close();
+              } else if (e.key === "Tab") {
                 reconcile();
               }
-            } else if (e.key === "Escape") {
-              setText(null);
-              close();
-            }
-          },
-          className: cn(FIELD_BASE, label !== void 0 && FIELD_FLOATING_PAD, "pr-9", invalid && FIELD_INVALID)
-        }
-      ),
-      showClear ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          tabIndex: -1,
-          "aria-label": clearLabel ?? "Clear",
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: () => {
-            setText(null);
-            close();
-            onChange(null);
-          },
-          className: cn(
-            "absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400",
-            "hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300"
-          ),
-          children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-4" })
-        }
-      ) : /* @__PURE__ */ jsx(
-        ChevronDown,
-        {
-          "aria-hidden": true,
-          onMouseDown: (e) => {
-            e.preventDefault();
-            setOpen((o) => !o);
-          },
-          className: cn(
-            "absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-slate-400 dark:text-slate-500",
-            disabled ? "opacity-50" : "cursor-pointer"
-          )
-        }
-      )
-    ] }),
-    isPhone && /* @__PURE__ */ jsx(
-      PickerSheet,
-      {
-        open,
-        onClose: reconcile,
-        title: label,
-        query: sheetQuery,
-        onQueryChange: (v) => {
-          setSheetQuery(v);
-          setActive(-1);
-        },
-        searchPlaceholder: searchPlaceholder ?? placeholder,
-        inputRef: sheetInputRef,
-        closeLabel,
-        children: /* @__PURE__ */ jsxs("ul", { role: "listbox", children: [
-          matches.map((o, i) => (
-            // Keyed by group AND value, like combobox-core.tsx: an option may
-            // deliberately appear twice (see `reconcile`), and a bare value key
-            // would collide.
-            /* @__PURE__ */ jsxs(Fragment, { children: [
-              o.group && o.group !== matches[i - 1]?.group && /* @__PURE__ */ jsx(
-                "li",
-                {
-                  role: "presentation",
-                  className: "px-4 pb-0.5 pt-3 text-[11px] font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400",
-                  children: o.group
-                }
-              ),
-              /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": o.value === value, children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => commit(o),
-                  className: cn(SHEET_ROW_CLASS, o.value === value && "font-medium"),
-                  children: o.label
-                }
-              ) })
-            ] }, `${o.group ?? ""}|${String(o.value)}`)
-          )),
-          matches.length === 0 && emptyLabel && /* @__PURE__ */ jsx("li", { className: "px-4 py-3 text-sm text-slate-500 dark:text-slate-400", children: emptyLabel })
-        ] })
-      }
-    ),
-    !isPhone && open && matches.length > 0 && /* @__PURE__ */ jsx(SuggestionList, { anchorRef: fieldRef, panelRef, children: matches.map((o, i) => (
-      // A group heading is emitted at each group boundary rather than repeating
-      // the group on every row (feedback #136). `matches` is group-contiguous,
-      // so comparing with the previous row is enough. Fragment key sits here;
-      // the heading and the option carry their own list semantics — keyed by
-      // group AND value, because an option may deliberately appear twice (see
-      // `reconcile`).
-      /* @__PURE__ */ jsxs(Fragment, { children: [
-        o.group && o.group !== matches[i - 1]?.group && /* @__PURE__ */ jsx(
-          "li",
-          {
-            role: "presentation",
-            className: "px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500 first:pt-1 dark:text-slate-400",
-            children: o.group
+            },
+            className: cn(FIELD_BASE, label !== void 0 && FIELD_FLOATING_PAD, "pr-9", invalid && FIELD_INVALID)
           }
         ),
-        /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": o.value === value, children: /* @__PURE__ */ jsxs(
+        showClear ? /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
+            tabIndex: -1,
+            "aria-label": labels.clear,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => {
+              setText(null);
+              close();
+              onChange(null);
+            },
+            className: cn(
+              "absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)]",
+              "hover:text-[var(--text-secondary)]"
+            ),
+            children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-4" })
+          }
+        ) : /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            "aria-hidden": true,
             onMouseDown: (e) => {
               e.preventDefault();
-              commit(o);
+              setOpen((o) => !o);
             },
-            onMouseEnter: () => setActive(i),
             className: cn(
-              rowClass(i === active),
-              // Indented under its heading, so the hierarchy is readable at a
-              // glance instead of inferred from grey trailing text.
-              o.group && "pl-6",
-              o.value === value && "font-medium"
-            ),
-            children: [
-              o.label,
-              o.sublabel && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-slate-400 dark:text-slate-500", children: o.sublabel })
-            ]
+              "absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
+              disabled ? "opacity-50" : "cursor-pointer"
+            )
           }
-        ) })
-      ] }, `${o.group ?? ""}|${String(o.value)}`)
-    )) })
-  ] });
+        )
+      ] }),
+      isPhone && /* @__PURE__ */ jsx(
+        PickerSheet,
+        {
+          open,
+          onClose: reconcile,
+          title: label,
+          query: sheetQuery,
+          onQueryChange: (v) => {
+            setSheetQuery(v);
+            setActive(-1);
+          },
+          searchPlaceholder: searchPlaceholder ?? placeholder ?? labels.search,
+          inputRef: sheetInputRef,
+          closeLabel,
+          children: /* @__PURE__ */ jsxs("ul", { id: listboxId, role: "listbox", children: [
+            matches.map((o, i) => (
+              // Keyed by group AND value, like combobox-core.tsx: an option may
+              // deliberately appear twice (see `reconcile`), and a bare value key
+              // would collide.
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                o.group && o.group !== matches[i - 1]?.group && /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    role: "presentation",
+                    className: "px-4 pb-0.5 pt-3 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]",
+                    children: o.group
+                  }
+                ),
+                /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": o.value === value,
+                    onClick: () => commit(o),
+                    className: cn(SHEET_ROW_CLASS, o.value === value && "font-medium"),
+                    children: o.label
+                  }
+                ) })
+              ] }, `${o.group ?? ""}|${String(o.value)}`)
+            )),
+            matches.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-4 py-3 text-sm text-[var(--text-muted)]", children: labels.noResults })
+          ] })
+        }
+      ),
+      !isPhone && open && matches.length > 0 && /* @__PURE__ */ jsx(SuggestionList, { id: listboxId, anchorRef: fieldRef, panelRef, children: matches.map((o, i) => (
+        // A group heading is emitted at each group boundary rather than repeating
+        // the group on every row (feedback #136). `matches` is group-contiguous,
+        // so comparing with the previous row is enough. Fragment key sits here;
+        // the heading and the option carry their own list semantics — keyed by
+        // group AND value, because an option may deliberately appear twice (see
+        // `reconcile`).
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          o.group && o.group !== matches[i - 1]?.group && /* @__PURE__ */ jsx(
+            "li",
+            {
+              role: "presentation",
+              className: "px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1",
+              children: o.group
+            }
+          ),
+          /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              id: optionId(i),
+              role: "option",
+              "aria-selected": o.value === value,
+              tabIndex: -1,
+              onMouseDown: (e) => {
+                e.preventDefault();
+                commit(o);
+              },
+              onMouseEnter: () => setActive(i),
+              className: cn(
+                rowClass(i === active),
+                // Indented under its heading, so the hierarchy is readable at a
+                // glance instead of inferred from grey trailing text.
+                o.group && "pl-6",
+                o.value === value && "font-medium"
+              ),
+              children: [
+                o.label,
+                o.sublabel && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-[var(--text-placeholder)]", children: o.sublabel })
+              ]
+            }
+          ) })
+        ] }, `${o.group ?? ""}|${String(o.value)}`)
+      )) })
+    ] })
+  );
 }
 export {
   Combobox,