@alfadocs/ui-kit 1.54.3 → 1.55.0

package/dist/_chunks/{combobox-DppVSuUm.js → combobox-U5yfO6o0.js}

@@ -1,21 +1,22 @@
-import { jsx as r, jsxs as z } from "react/jsx-runtime";
-import { forwardRef as Ye, useContext as Ze, useMemo as J, useState as Y, useRef as m, useEffect as S, useCallback as Qe } from "react";
-import * as j from "@radix-ui/react-popover";
-import { R as et, _ as g, P as tt } from "./index-4xgbg-sn.js";
-import { c as H } from "./index-D2ZczOXr.js";
-import { useTranslation as st } from "react-i18next";
-import { u as ot, F as rt, b as nt } from "./form-field-context-DtiROUJV.js";
-import { c as it } from "./compose-refs-C0k0tdqF.js";
-import { n as w } from "./normalize-diacritics-BNGbFNlJ.js";
-import { g as at } from "./group-options-BvKhQ3xb.js";
-import { b as lt } from "./menu-row-BAr8bx1I.js";
-import { u as dt } from "./use-controllable-state-BiY4xTzM.js";
+import { jsx as o, jsxs as g, Fragment as Ze } from "react/jsx-runtime";
+import { forwardRef as Qe, useContext as et, useMemo as Y, useState as J, useRef as m, useEffect as R, useCallback as tt } from "react";
+import * as V from "@radix-ui/react-popover";
+import { R as st, _ as x, P as ot } from "./index-4xgbg-sn.js";
+import { c as P } from "./index-D2ZczOXr.js";
+import { useTranslation as rt } from "react-i18next";
+import { u as nt, F as it, b as at } from "./form-field-context-DtiROUJV.js";
+import { c as lt } from "./compose-refs-C0k0tdqF.js";
+import { n as E } from "./normalize-diacritics-BNGbFNlJ.js";
+import { g as dt } from "./group-options-BvKhQ3xb.js";
+import { b as ct } from "./menu-row-BAr8bx1I.js";
+import { O as ut, a as ft, o as mt, b as pt, c as bt } from "./option-row-Dc7BrbK8.js";
+import { u as vt } from "./use-controllable-state-BiY4xTzM.js";
 import { u as Z } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
-import { I as ct, a as Q, d as ee, c as ut } from "./input-surface-xyERuLU_.js";
-import { u as ft } from "./registry-DvAUVLHh.js";
-import { X as mt } from "./x-B5YnXwCz.js";
-import { C as pt } from "./check-DrFSN__t.js";
-const bt = {
+import { I as ht, a as Q, d as ee, c as gt } from "./input-surface-iBmxVBfr.js";
+import { u as xt } from "./registry-DvAUVLHh.js";
+import { X as yt } from "./x-B5YnXwCz.js";
+import { C as St } from "./check-DrFSN__t.js";
+const Nt = {
   id: "combobox",
   // Persisted single choice (value state + set_value) → select_single + set_value,
   // plus type-to-filter and open/close of the option list.
@@ -122,7 +123,7 @@ const bt = {
       description: "Each option emits its value as data-option-id."
     }
   }
-}, vt = H(
+}, Rt = P(
   [
     "ds:peer ds:w-full ds:bg-transparent ds:text-foreground ds:placeholder:text-muted-foreground",
     "ds:outline-none ds:border-0",
@@ -140,10 +141,10 @@ const bt = {
       size: "md"
     }
   }
-), ht = H(
+), Et = P(
   [
     "ds:group ds:relative ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)] ds:w-full",
-    ut
+    gt
   ].join(" "),
   {
     variants: {
@@ -152,16 +153,19 @@ const bt = {
         md: `${Q.md} ${ee.md}`,
         lg: `${Q.lg} ${ee.lg}`
       },
-      tone: ct
+      tone: ht
     },
     defaultVariants: {
       size: "md",
       tone: "default"
     }
   }
-), gt = H(
+), wt = P(
   [
     "ds:z-[var(--z-popover)] ds:overflow-hidden ds:w-[var(--radix-popover-trigger-width)]",
+    // A guard: the list is as wide as the field, so only a field that is
+    // itself wider than the screen could take it past the edge.
+    "ds:max-w-[var(--radix-popover-content-available-width)]",
     "ds:rounded-[var(--radius-md)] ds:border ds:border-border ds:bg-background ds:text-foreground",
     "ds:shadow-[var(--shadow-lg)]",
     "ds:animate-in ds:fade-in ds:zoom-in-95",
@@ -171,12 +175,12 @@ const bt = {
     "ds:data-[side=top]:slide-in-from-bottom-2",
     "ds:motion-reduce:animate-none"
   ].join(" ")
-), be = H(
+), ve = P(
   [
     "ds:relative ds:flex ds:cursor-pointer ds:items-center ds:gap-[var(--spacing-sm)]",
     "ds:rounded-[var(--radius-sm)]",
     "ds:text-foreground ds:outline-none ds:select-none",
-    lt.selected,
+    ct.selected,
     "ds:aria-disabled:pointer-events-none ds:aria-disabled:opacity-50"
   ].join(" "),
   {
@@ -191,133 +195,134 @@ const bt = {
       size: "md"
     }
   }
-), xt = [
+), _t = [
   "ds:ps-3 ds:pe-3 ds:py-1.5",
   "type-eyebrow ds:text-muted-foreground"
-].join(" "), yt = "ds:max-h-[18rem] ds:overflow-y-auto ds:p-[var(--spacing-xs)]", Rt = "ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", St = {
+].join(" "), It = "ds:max-h-[18rem] ds:overflow-y-auto ds:p-[var(--spacing-xs)]", kt = "ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", zt = {
   sm: "ds:size-3.5",
   md: "ds:size-4",
   lg: "ds:size-5"
 };
-function wt({
+function At({
   search: n,
   label: d,
-  iconClass: P,
-  size: $,
-  onSelect: q
+  iconClass: $,
+  size: j,
+  onSelect: H
 }) {
-  return tt((O) => O.filtered.count) > 0 ? null : /* @__PURE__ */ z(
-    g.Item,
+  return ot((q) => q.filtered.count) > 0 ? null : /* @__PURE__ */ g(
+    x.Item,
     {
       value: `__combobox-create__${n}`,
       keywords: [],
       forceMount: !0,
-      onSelect: () => q(n),
-      className: be({ size: $ }),
+      onSelect: () => H(n),
+      className: ve({ size: j }),
       children: [
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ o(
           "span",
           {
             "aria-hidden": "true",
-            className: `ds:inline-flex ds:items-center ds:justify-center ${P}`
+            className: `ds:inline-flex ds:items-center ds:justify-center ${$}`
           }
         ),
-        /* @__PURE__ */ r("span", { className: "ds:flex-1 ds:truncate", children: d })
+        /* @__PURE__ */ o("span", { className: "ds:flex-1 ds:truncate", children: d })
       ]
     }
   );
 }
-const ve = Ye(
+const he = Qe(
   function({
     options: d,
-    value: P,
-    defaultValue: $,
-    onValueChange: q,
+    value: $,
+    defaultValue: j,
+    onValueChange: H,
     placeholder: te,
-    clearable: O = !1,
-    disabled: he,
-    readOnly: ge,
-    required: xe,
-    name: ye,
+    clearable: q = !1,
+    disabled: ge,
+    readOnly: xe,
+    required: ye,
+    name: Se,
     id: se,
-    size: N = "md",
-    tone: Re = "default",
+    size: w = "md",
+    tone: Ne = "default",
     filter: B,
-    allowCreate: Se = !1,
-    onCreate: U,
+    allowCreate: Re = !1,
+    onCreate: L,
     open: oe,
-    onOpenChange: x,
+    onOpenChange: y,
     onQueryChange: a,
-    emptyMessage: we,
-    className: Ne,
+    emptyMessage: Ee,
+    className: we,
     "aria-label": re,
-    "aria-invalid": Ee,
-    "aria-describedby": ke,
-    autoComplete: _,
-    matchAutofill: ne
-  }, Ie) {
-    const { t: E } = st("ui"), y = ot(), F = Ze(rt) !== null, [ze, A] = dt({
-      value: P,
-      defaultValue: $ ?? "",
-      onChange: q
-    }), b = ze ?? "", K = J(
+    "aria-invalid": _e,
+    "aria-describedby": Ie,
+    autoComplete: z,
+    matchAutofill: ne,
+    wrapOptionLabels: ie = !1
+  }, ke) {
+    const { t: _ } = rt("ui"), S = nt(), A = et(it) !== null, [ze, C] = vt({
+      value: $,
+      defaultValue: j ?? "",
+      onChange: H
+    }), b = ze ?? "", U = Y(
       () => d.find((e) => e.value === b),
       [d, b]
-    ), f = (K == null ? void 0 : K.label) ?? "", [p, c] = Y(f), [_e, ie] = Y(!1), D = oe !== void 0, i = D ? oe : _e, k = m(!1), C = f !== "" && p === f, R = m(null), ae = m(null), le = m(null);
-    nt(y, R);
-    const [Fe, Ae] = Y(0), de = m(!1);
+    ), f = (U == null ? void 0 : U.label) ?? "", [p, c] = J(f), [Ae, ae] = J(!1), D = oe !== void 0, i = D ? oe : Ae, I = m(!1), F = f !== "" && p === f, N = m(null), le = m(null), de = m(null);
+    at(S, N);
+    const [Ce, De] = J(0), ce = m(!1);
     Z(() => {
-      if (!de.current) {
-        de.current = !0;
+      if (!ce.current) {
+        ce.current = !0;
         return;
       }
-      C && Ae((e) => e + 1);
-    }, [C]);
+      F && De((e) => e + 1);
+    }, [F]);
     const T = m(!1);
-    S(() => {
+    R(() => {
       T.current = !1;
     }, [p, i]);
-    const M = m(!1);
+    const K = m(!1);
     Z(() => {
-      if (!i || !C || !b) return;
-      const e = le.current, t = e == null ? void 0 : e.querySelector(
+      if (!i || !F || !b) return;
+      const e = de.current, t = e == null ? void 0 : e.querySelector(
         `[data-option-id="${CSS.escape(b)}"]`
       );
       if (!e || !t) return;
-      const o = e.getBoundingClientRect(), l = t.getBoundingClientRect(), s = e.offsetHeight > 0 ? o.height / e.offsetHeight : 1, h = (l.top - o.top) / (s || 1), Je = l.height / (s || 1);
-      e.scrollTop += h - (e.clientHeight - Je) / 2, M.current = !0;
+      const r = e.getBoundingClientRect(), l = t.getBoundingClientRect(), s = e.offsetHeight > 0 ? r.height / e.offsetHeight : 1, h = (l.top - r.top) / (s || 1), Je = l.height / (s || 1);
+      e.scrollTop += h - (e.clientHeight - Je) / 2, K.current = !0;
       try {
         t.dispatchEvent(new PointerEvent("pointermove", { bubbles: !0 }));
       } finally {
-        M.current = !1;
+        K.current = !1;
       }
     }, [i]);
-    const V = _ && _ !== "off" ? _ : void 0;
+    const O = z && z !== "off" ? z : void 0;
     Z(() => {
-      const e = R.current;
-      e && (e.setAttribute("aria-expanded", String(i)), V && e.setAttribute("autocomplete", V));
+      const e = N.current;
+      e && (e.setAttribute("aria-expanded", String(i)), O && e.setAttribute("autocomplete", O));
     });
-    const L = m(!1);
-    S(() => {
-      const e = R.current;
-      if (!e || !V) return;
-      const t = (o) => {
-        const l = o.inputType;
-        L.current = !l || l === "insertReplacementText";
+    const M = m(!1);
+    R(() => {
+      const e = N.current;
+      if (!e || !O) return;
+      const t = (r) => {
+        const l = r.inputType;
+        M.current = !l || l === "insertReplacementText";
       };
       return e.addEventListener("input", t), () => e.removeEventListener("input", t);
-    }, [V]), S(() => {
+    }, [O]), R(() => {
       i || c(f);
     }, [f, i]);
-    const I = (F ? y.disabled : !1) || !!he, v = !!ge, De = (F ? y.required : !1) || !!xe, ce = F ? y.invalid : !!Ee, Ce = ce ? "error" : Re, Te = F && y.describedBy ? y.describedBy : ke, ue = te ?? E("inputs.combobox.placeholder", "Search…"), Ve = J(
-      () => (e, t, o) => {
-        if (k.current || f !== "" && t === f) return 1;
-        const l = w(e), s = w(t), h = o == null ? void 0 : o.map(w);
+    const k = (A ? S.disabled : !1) || !!ge, v = !!xe, Fe = (A ? S.required : !1) || !!ye, ue = A ? S.invalid : !!_e, Te = ue ? "error" : Ne, Oe = A && S.describedBy ? S.describedBy : Ie, fe = te ?? _("inputs.combobox.placeholder", "Search…"), Ve = Y(
+      () => (e, t, r) => {
+        if (I.current || f !== "" && t === f) return 1;
+        const l = E(e), s = E(t), h = r == null ? void 0 : r.map(E);
         return B ? B(
           l,
           s,
           (h == null ? void 0 : h[0]) ?? ""
-        ) : et(
+        ) : st(
           l,
           s,
           h
@@ -325,57 +330,57 @@ const ve = Ye(
       },
       [B, f]
     ), G = (e) => {
-      A(e);
+      C(e);
     }, u = (e) => {
-      D || ie(e), x == null || x(e);
-    }, je = (e) => {
-      const t = d.find((o) => o.value === e);
-      G(e), c((t == null ? void 0 : t.label) ?? ""), u(!1);
-    }, He = (e) => {
-      U == null || U(e), u(!1);
+      D || ae(e), y == null || y(e);
     }, Pe = (e) => {
+      const t = d.find((r) => r.value === e);
+      G(e), c((t == null ? void 0 : t.label) ?? ""), u(!1);
+    }, $e = (e) => {
+      L == null || L(e), u(!1);
+    }, je = (e) => {
       var l;
-      const t = w(e.trim());
+      const t = E(e.trim());
       if (!t) return;
-      const o = ne ? ne(e.trim()) : (l = d.find(
-        (s) => w(s.value) === t || w(s.label) === t
+      const r = ne ? ne(e.trim()) : (l = d.find(
+        (s) => E(s.value) === t || E(s.label) === t
       )) == null ? void 0 : l.value;
-      return d.find((s) => s.value === o && !s.disabled);
-    }, $e = (e) => {
+      return d.find((s) => s.value === r && !s.disabled);
+    }, He = (e) => {
       if (!v) {
-        if (L.current) {
-          L.current = !1;
-          const t = Pe(e);
+        if (M.current) {
+          M.current = !1;
+          const t = je(e);
           if (t) {
             G(t.value), c(t.label), i && u(!1);
             return;
           }
-          if (document.activeElement !== R.current) {
+          if (document.activeElement !== N.current) {
             c(f);
             return;
           }
         }
-        c(e), k.current || a == null || a(e), !i && e.length > 0 && !k.current && u(!0);
+        c(e), I.current || a == null || a(e), !i && e.length > 0 && !I.current && u(!0);
       }
     }, qe = () => {
-      !I && !v && u(!0);
-    }, Oe = () => {
-      !i && !I && !v && u(!0);
+      !k && !v && u(!0);
     }, Be = () => {
-      k.current = !0;
+      !i && !k && !v && u(!0);
+    }, Le = () => {
+      I.current = !0;
     }, Ue = () => {
       var t;
-      if (k.current = !1, v) return;
-      const e = ((t = R.current) == null ? void 0 : t.value) ?? "";
+      if (I.current = !1, v) return;
+      const e = ((t = N.current) == null ? void 0 : t.value) ?? "";
       c(e), a == null || a(e), e.length > 0 && u(!0);
     }, Ke = (e) => {
       if (!e.nativeEvent.isComposing) {
-        if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !i && !I && !v) {
+        if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !i && !k && !v) {
           e.preventDefault(), u(!0);
           return;
         }
         if ((e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End" || /* cmdk's own Ctrl+N, J, P and K move the highlight too. */
-        e.ctrlKey && ["n", "j", "p", "k"].includes(e.key)) && (T.current = !0), e.key === "Enter" && (!i || !T.current && (C || p === ""))) {
+        e.ctrlKey && ["n", "j", "p", "k"].includes(e.key)) && (T.current = !0), e.key === "Enter" && (!i || !T.current && (F || p === ""))) {
           e.preventDefault(), i && u(!1);
           return;
         }
@@ -383,98 +388,98 @@ const ve = Ye(
       }
     }, Me = (e) => {
       var t;
-      e.preventDefault(), e.stopPropagation(), G(""), c(""), a == null || a(""), u(!0), (t = R.current) == null || t.focus();
-    }, Le = (e) => {
+      e.preventDefault(), e.stopPropagation(), G(""), c(""), a == null || a(""), u(!0), (t = N.current) == null || t.focus();
+    }, Ge = (e) => {
       v && e || (u(e), e || c(f));
-    }, fe = m(b);
-    S(() => {
-      fe.current = b;
+    }, me = m(b);
+    R(() => {
+      me.current = b;
     }, [b]);
-    const me = m(p);
-    S(() => {
-      me.current = p;
+    const pe = m(p);
+    R(() => {
+      pe.current = p;
     }, [p]);
-    const pe = m(i);
-    S(() => {
-      pe.current = i;
+    const be = m(i);
+    R(() => {
+      be.current = i;
     }, [i]);
-    const W = Qe(
+    const W = tt(
       (e) => {
-        D || ie(e), x == null || x(e);
+        D || ae(e), y == null || y(e);
       },
-      [D, x]
-    ), Ge = J(
+      [D, y]
+    ), We = Y(
       () => ({
-        getValue: () => fe.current || null,
-        getQuery: () => me.current,
-        getIsOpen: () => pe.current,
+        getValue: () => me.current || null,
+        getQuery: () => pe.current,
+        getIsOpen: () => be.current,
         setValue: (e) => {
           const t = e ?? "";
-          A(t);
-          const o = d.find((l) => l.value === t);
-          c((o == null ? void 0 : o.label) ?? "");
+          C(t);
+          const r = d.find((l) => l.value === t);
+          c((r == null ? void 0 : r.label) ?? "");
         },
         setQuery: (e) => {
           c(e), a == null || a(e);
         },
         clear: () => {
-          A(""), c(""), a == null || a("");
+          C(""), c(""), a == null || a("");
         },
         open: () => W(!0),
         close: () => W(!1)
       }),
-      [A, d, W, a]
+      [C, d, W, a]
     );
-    ft(bt, Ge, se);
-    const We = O && !!b && !I && !v, Xe = at(d), X = St[N];
-    return /* @__PURE__ */ r(j.Root, { open: i, onOpenChange: Le, children: /* @__PURE__ */ z(
-      g,
+    xt(Nt, We, se);
+    const Xe = q && !!b && !k && !v, Ye = dt(d), X = zt[w];
+    return /* @__PURE__ */ o(V.Root, { open: i, onOpenChange: Ge, children: /* @__PURE__ */ g(
+      x,
       {
         filter: Ve,
         shouldFilter: !0,
         loop: !0,
-        label: re ?? (y.label || ue),
+        label: re ?? (S.label || fe),
         className: "ds:w-full",
         children: [
-          /* @__PURE__ */ r(j.Anchor, { asChild: !0, children: /* @__PURE__ */ z(
+          /* @__PURE__ */ o(V.Anchor, { asChild: !0, children: /* @__PURE__ */ g(
             "div",
             {
-              ref: ae,
-              className: ht({
-                size: N,
-                tone: Ce,
-                className: Ne
+              ref: le,
+              className: Et({
+                size: w,
+                tone: Te,
+                className: we
               }),
               "data-component": "combobox",
               "data-component-id": se,
               children: [
-                /* @__PURE__ */ r(
-                  g.Input,
+                /* @__PURE__ */ o(
+                  x.Input,
                   {
-                    ref: it(Ie, R),
+                    ref: lt(ke, N),
                     value: p,
-                    onValueChange: $e,
-                    name: ye,
-                    placeholder: ue,
-                    disabled: I,
+                    onValueChange: He,
+                    name: Se,
+                    placeholder: fe,
+                    disabled: k,
                     readOnly: v,
-                    required: De,
-                    autoComplete: _,
-                    "aria-describedby": Te,
-                    "aria-invalid": ce || void 0,
+                    required: Fe,
+                    autoComplete: z,
+                    "aria-describedby": Oe,
+                    "aria-invalid": ue || void 0,
                     onFocus: qe,
-                    onClick: Oe,
+                    onClick: Be,
                     onKeyDown: Ke,
-                    onCompositionStart: Be,
+                    onCompositionStart: Le,
                     onCompositionEnd: Ue,
-                    className: vt({ size: N })
+                    className: Rt({ size: w })
                   }
                 ),
-                We ? /* @__PURE__ */ r(
+                Xe ? /* @__PURE__ */ o(
                   "button",
                   {
                     type: "button",
-                    "aria-label": E("inputs.combobox.clear", "Clear selection"),
+                    "aria-label": _("inputs.combobox.clear", "Clear selection"),
                     onClick: Me,
                     onPointerDown: (e) => e.stopPropagation(),
                     className: [
@@ -487,65 +492,65 @@ const ve = Ye(
                       /* A 24px hit area with no visual change. */
                       "ds:relative ds:before:absolute ds:before:inset-[calc(var(--spacing-xs)*-1)] ds:before:content-['']"
                     ].join(" "),
-                    children: /* @__PURE__ */ r(mt, { "aria-hidden": "true", className: "ds:size-3.5" })
+                    children: /* @__PURE__ */ o(yt, { "aria-hidden": "true", className: "ds:size-3.5" })
                   }
                 ) : null
               ]
             }
           ) }),
-          /* @__PURE__ */ r(j.Portal, { forceMount: !0, children: /* @__PURE__ */ r(
-            j.Content,
+          /* @__PURE__ */ o(V.Portal, { forceMount: !0, children: /* @__PURE__ */ o(
+            V.Content,
             {
               forceMount: !0,
               hidden: !i,
-              "aria-label": re ?? E("inputs.combobox.popupLabel", "Options"),
+              "aria-label": re ?? _("inputs.combobox.popupLabel", "Options"),
               onOpenAutoFocus: (e) => e.preventDefault(),
               onCloseAutoFocus: (e) => e.preventDefault(),
               onInteractOutside: (e) => {
-                var o;
+                var r;
                 const t = e.target;
-                t && ((o = ae.current) != null && o.contains(t)) && e.preventDefault();
+                t && ((r = le.current) != null && r.contains(t)) && e.preventDefault();
               },
               sideOffset: 4,
               align: "start",
-              className: gt(),
-              children: /* @__PURE__ */ z(
-                g.List,
+              className: wt(),
+              children: /* @__PURE__ */ g(
+                x.List,
                 {
-                  ref: le,
-                  className: yt,
+                  ref: de,
+                  className: It,
                   onPointerMove: () => {
-                    M.current || (T.current = !0);
+                    K.current || (T.current = !0);
                   },
                   onMouseDown: (e) => e.preventDefault(),
                   children: [
-                    /* @__PURE__ */ r(g.Empty, { className: Rt, children: /* @__PURE__ */ r("div", { role: "option", "aria-selected": !1, "aria-disabled": "true", children: we ?? E("inputs.combobox.empty", "No results found") }) }),
-                    Xe.map(({ group: e, items: t }, o) => {
+                    /* @__PURE__ */ o(x.Empty, { className: kt, children: /* @__PURE__ */ o("div", { role: "option", "aria-selected": !1, "aria-disabled": "true", children: Ee ?? _("inputs.combobox.empty", "No results found") }) }),
+                    Ye.map(({ group: e, items: t }, r) => {
                       const l = t.map((s) => {
                         const h = s.value === b;
-                        return /* @__PURE__ */ z(
-                          g.Item,
+                        return /* @__PURE__ */ g(
+                          x.Item,
                           {
                             value: s.value,
                             "data-option-id": s.value,
                             keywords: [s.label],
                             disabled: s.disabled,
-                            onSelect: je,
-                            className: be({ size: N }),
+                            onSelect: Pe,
+                            className: ve({ size: w }),
                             children: [
-                              /* @__PURE__ */ r(
+                              /* @__PURE__ */ o(
                                 "span",
                                 {
                                   "aria-hidden": "true",
                                   className: `ds:inline-flex ds:items-center ds:justify-center ${X}`,
-                                  children: h ? /* @__PURE__ */ r(pt, { className: X }) : null
+                                  children: h ? /* @__PURE__ */ o(St, { className: X }) : null
                                 }
                               ),
                               s.startAdornment ? (
                                 // Decorative by contract — the option's accessible
                                 // name comes from its label. Hide so a text-bearing
                                 // adornment can't leak into the computed name.
-                                /* @__PURE__ */ r(
+                                /* @__PURE__ */ o(
                                   "span",
                                   {
                                     "aria-hidden": "true",
@@ -554,45 +559,84 @@ const ve = Ye(
                                   }
                                 )
                               ) : null,
-                              /* @__PURE__ */ r("span", { className: "ds:flex-1 ds:truncate", children: s.label }),
-                              s.description ? /* @__PURE__ */ r("span", { className: "type-meta ds:text-muted-foreground", children: s.description }) : null,
-                              s.endContent ? (
-                                // Deliberately NOT aria-hidden — unlike
-                                // `startAdornment`, this slot carries meaning
-                                // (a price, a count) and must reach the
-                                // option's accessible name. `ms-auto` pins it
-                                // to the inline-end and flips under RTL.
-                                /* @__PURE__ */ r("span", { className: "ds:inline-flex ds:items-center ds:ms-auto ds:shrink-0", children: s.endContent })
-                              ) : null
+                              s.description || ie ? (
+                                // Stacked: the label and its end content on one
+                                // row, the description on a line of its own
+                                // under them. In this DOM order the option's
+                                // name reads label, end content, description.
+                                /* @__PURE__ */ g(
+                                  "span",
+                                  {
+                                    className: `${ut} ds:py-[var(--spacing-xs)]`,
+                                    children: [
+                                      /* @__PURE__ */ g("span", { className: ft, children: [
+                                        /* @__PURE__ */ o(
+                                          "span",
+                                          {
+                                            className: mt({
+                                              wrap: ie,
+                                              className: "ds:flex-1"
+                                            }),
+                                            children: s.label
+                                          }
+                                        ),
+                                        s.endContent ? (
+                                          // Announced, as below.
+                                          /* @__PURE__ */ o("span", { className: pt, children: s.endContent })
+                                        ) : null
+                                      ] }),
+                                      s.description ? /* @__PURE__ */ o(
+                                        "span",
+                                        {
+                                          className: bt({
+                                            tone: s.descriptionTone
+                                          }),
+                                          children: s.description
+                                        }
+                                      ) : null
+                                    ]
+                                  }
+                                )
+                              ) : /* @__PURE__ */ g(Ze, { children: [
+                                /* @__PURE__ */ o("span", { className: "ds:flex-1 ds:truncate", children: s.label }),
+                                s.endContent ? (
+                                  // Deliberately NOT aria-hidden — unlike
+                                  // `startAdornment`, this slot carries meaning
+                                  // (a price, a count) and must reach the
+                                  // option's accessible name. `ms-auto` pins it
+                                  // to the inline-end and flips under RTL.
+                                  /* @__PURE__ */ o("span", { className: "ds:inline-flex ds:items-center ds:ms-auto ds:shrink-0", children: s.endContent })
+                                ) : null
+                              ] })
                             ]
                           },
                           `${s.value}\0${s.label}`
                         );
                       });
-                      return e ? /* @__PURE__ */ r(
-                        g.Group,
+                      return e ? /* @__PURE__ */ o(
+                        x.Group,
                         {
-                          heading: /* @__PURE__ */ r("span", { className: xt, children: e }),
+                          heading: /* @__PURE__ */ o("span", { className: _t, children: e }),
                           children: l
                         },
                         `group-${e}`
-                      ) : /* @__PURE__ */ r(g.Group, { children: l }, `group-${o}`);
+                      ) : /* @__PURE__ */ o(x.Group, { children: l }, `group-${r}`);
                     }),
-                    Se && p.length > 0 ? /* @__PURE__ */ r(
-                      wt,
+                    Re && p.length > 0 ? /* @__PURE__ */ o(
+                      At,
                       {
                         search: p,
-                        label: E("inputs.combobox.create", 'Create "{{value}}"', {
+                        label: _("inputs.combobox.create", 'Create "{{value}}"', {
                           value: p
                         }),
                         iconClass: X,
-                        size: N,
-                        onSelect: He
+                        size: w,
+                        onSelect: $e
                       }
                     ) : null
                   ]
                 },
-                Fe
+                Ce
               )
             }
           ) })
@@ -601,14 +645,14 @@ const ve = Ye(
     ) });
   }
 );
-ve.displayName = "Combobox";
-const qt = ve;
+he.displayName = "Combobox";
+const Wt = he;
 export {
-  qt as C,
-  gt as a,
-  vt as b,
-  bt as c,
-  be as d,
-  ht as e
+  Wt as C,
+  wt as a,
+  Rt as b,
+  Nt as c,
+  ve as d,
+  Et as e
 };
-//# sourceMappingURL=combobox-DppVSuUm.js.map
+//# sourceMappingURL=combobox-U5yfO6o0.js.map