asma-ui-core 3.86.0 → 3.86.2

package/dist/components/utils/popover/StyledPopover.js

@@ -1,74 +1,124 @@
-import { cn as E } from "../../../helpers/cn.js";
-import { resolveSx as d } from "../../../helpers/sx.js";
-import { TOP_LAYER_PROPS as M, TOP_LAYER_RESET_STYLE as z, getOpenModalDialogAncestor as D, shouldUsePopoverTopLayer as N, useTopLayerRef as U } from "../../../hooks/useTopLayer.hook.js";
-import { useEffect as k, useMemo as C, useState as m } from "react";
-import { jsx as v } from "react/jsx-runtime";
-import { FloatingPortal as Y, autoUpdate as H, flip as K, offset as $, shift as j, useDismiss as I, useFloating as q, useInteractions as B, useMergeRefs as G } from "@floating-ui/react";
-var J = {
+import { cn as Y } from "../../../helpers/cn.js";
+import { resolveSx as R } from "../../../helpers/sx.js";
+import { tabbableWithin as y } from "../../../helpers/focusable.js";
+import { TOP_LAYER_PROPS as W, TOP_LAYER_RESET_STYLE as $, getOpenModalDialogAncestor as j, shouldUsePopoverTopLayer as q, useTopLayerRef as B } from "../../../hooks/useTopLayer.hook.js";
+import { useEffect as P, useMemo as G, useRef as J, useState as h } from "react";
+import { jsx as T } from "react/jsx-runtime";
+import { FloatingPortal as Q, autoUpdate as V, flip as X, offset as Z, shift as C, useDismiss as ee, useFloating as te, useInteractions as oe, useMergeRefs as ne } from "@floating-ui/react";
+var re = {
   vertical: "bottom",
   horizontal: "left"
-}, Q = {
+}, se = {
   vertical: "top",
   horizontal: "left"
-}, V = (e, o) => `${o.vertical === "bottom" ? "top" : o.vertical === "top" ? "bottom" : e.vertical === "top" ? "top" : "bottom"}${e.horizontal === "left" ? "-start" : e.horizontal === "right" ? "-end" : ""}`, re = ({ open: e, anchorEl: o, onClose: g, anchorOrigin: f = J, transformOrigin: c = Q, id: y, className: h, sx: P, slotProps: a, onClick: R, children: _, keepMounted: x = !1 }) => {
-  const T = C(() => V(f, c), [f, c]), [u, w] = m(e);
-  e && !u && w(!0);
-  const i = e || x && u, n = D(o), [l, L] = m(n);
-  o && l !== n && L(n);
-  const { refs: p, floatingStyles: S, context: b } = q({
-    open: e,
-    placement: T,
+}, ie = (o, t) => `${t.vertical === "bottom" ? "top" : t.vertical === "top" ? "bottom" : o.vertical === "top" ? "top" : "bottom"}${o.horizontal === "left" ? "-start" : o.horizontal === "right" ? "-end" : ""}`, ve = ({ open: o, anchorEl: t, onClose: u, anchorOrigin: b = re, transformOrigin: L = se, id: x, className: D, sx: K, slotProps: l, onClick: S, children: _, keepMounted: E = !1, tabIntoContent: d = !0 }) => {
+  const F = G(() => ie(b, L), [b, L]), [w, O] = h(o), c = J(!1);
+  o && !w && O(!0);
+  const m = o || E && w, p = j(t), [v, k] = h(p);
+  t && v !== p && k(p);
+  const { refs: a, floatingStyles: M, context: A } = te({
+    open: o,
+    placement: F,
     strategy: "fixed",
-    whileElementsMounted: H,
-    elements: { reference: o ?? void 0 },
+    whileElementsMounted: V,
+    elements: { reference: t ?? void 0 },
     middleware: [
-      $(4),
-      K({ padding: 8 }),
-      j({ padding: 8 })
+      Z(4),
+      X({ padding: 8 }),
+      C({ padding: 8 })
     ],
-    onOpenChange: (t, s, O) => {
-      t || g?.(s ?? {}, O === "escape-key" ? "escapeKeyDown" : "backdropClick");
+    onOpenChange: (e, r, n) => {
+      e || u?.(r ?? {}, n === "escape-key" ? "escapeKeyDown" : "backdropClick");
     }
-  }), { getFloatingProps: A } = B([I(b, {
-    outsidePress: (t) => {
-      const s = t.target;
-      return !(o instanceof Element && s instanceof Node && o.contains(s));
+  }), { getFloatingProps: N } = oe([ee(A, {
+    outsidePress: (e) => {
+      const r = e.target;
+      return !(t instanceof Element && r instanceof Node && t.contains(r));
     },
     escapeKey: !0
-  })]), r = N(l), F = G([U(p.setFloating, r)]);
-  return k(() => {
-    if (!i || !r) return;
-    const t = p.floating.current;
-    if (!(!t || typeof t.showPopover != "function"))
+  })]), f = q(v), z = ne([B(a.setFloating, f)]);
+  P(() => {
+    if (!o) return;
+    const e = t instanceof HTMLElement ? t : null, r = () => a.floating.current?.contains(document.activeElement) ?? !1;
+    let n = r();
+    const s = () => {
+      n = r();
+    };
+    return document.addEventListener("focusin", s), () => {
+      document.removeEventListener("focusin", s);
+      const i = document.activeElement, g = !i || i === document.body || r();
+      n && g && e?.isConnected && e.focus({ preventScroll: !0 });
+    };
+  }, [
+    o,
+    t,
+    a.floating
+  ]), P(() => {
+    if (!o) return;
+    const e = (n) => {
+      if (c.current = n.key === "Tab", !d || !c.current || n.shiftKey || n.defaultPrevented) return;
+      const s = a.floating.current;
+      if (!s || !(t instanceof Element) || !t.contains(document.activeElement)) return;
+      const [i] = y(s);
+      i && (n.preventDefault(), i.focus({ preventScroll: !0 }), c.current = !1);
+    }, r = (n) => {
+      const s = n.target, i = s instanceof Node && ((a.floating.current?.contains(s) ?? !1) || t instanceof Element && t.contains(s));
+      c.current && !i && u?.(n, "tabKeyDown"), c.current = !1;
+    };
+    return document.addEventListener("keydown", e, !0), document.addEventListener("focusin", r), () => {
+      document.removeEventListener("keydown", e, !0), document.removeEventListener("focusin", r);
+    };
+  }, [
+    o,
+    t,
+    u,
+    a.floating,
+    d
+  ]);
+  const H = o ? N({
+    onClick: S,
+    onKeyDown: (e) => {
+      if (e.key !== "Tab" || e.defaultPrevented || !(t instanceof HTMLElement)) return;
+      const r = e.currentTarget, n = y(r), s = n.indexOf(document.activeElement);
+      if (s === -1 || (e.shiftKey ? s !== 0 : s !== n.length - 1)) return;
+      e.preventDefault();
+      const i = y(document).filter((I) => !r.contains(I)), g = i[i.indexOf(t) + (e.shiftKey ? -1 : 1)], U = (d && e.shiftKey ? void 0 : g) ?? t;
+      c.current = !1, U.focus({ preventScroll: !0 }), u?.(e, "tabKeyDown");
+    }
+  }) : {};
+  return P(() => {
+    if (!m || !f) return;
+    const e = a.floating.current;
+    if (!(!e || typeof e.showPopover != "function"))
       try {
-        e && !t.matches(":popover-open") && t.showPopover(), !e && t.matches(":popover-open") && t.hidePopover();
+        o && !e.matches(":popover-open") && e.showPopover(), !o && e.matches(":popover-open") && e.hidePopover();
       } catch {
       }
   }, [
-    e,
-    i,
-    r,
-    p.floating
-  ]), i ? /* @__PURE__ */ v(Y, {
-    root: l,
-    children: /* @__PURE__ */ v("div", {
-      ref: F,
-      id: y,
-      ...r ? M : {},
+    o,
+    m,
+    f,
+    a.floating
+  ]), m ? /* @__PURE__ */ T(Q, {
+    root: v,
+    children: /* @__PURE__ */ T("div", {
+      ref: z,
+      id: x,
+      ...f ? W : {},
       style: {
-        ...r ? z : {},
-        ...e ? S : {},
-        ...d(P),
-        ...d(a?.paper?.sx),
-        ...a?.paper?.style,
-        ...e ? null : { display: "none" }
+        ...f ? $ : {},
+        ...o ? M : {},
+        ...R(K),
+        ...R(l?.paper?.sx),
+        ...l?.paper?.style,
+        ...o ? null : { display: "none" }
       },
-      ...e ? A({ onClick: R }) : {},
-      className: E("z-[1300] overflow-auto rounded bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.15)]", h ?? "my-1", a?.paper?.className),
+      ...H,
+      className: Y("z-[1300] overflow-auto rounded bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.15)]", D ?? "my-1", l?.paper?.className),
       children: _
     })
   }) : null;
 };
 export {
-  re as StyledPopover
+  ve as StyledPopover
 };

package/dist/datetime/components/date-picker/StyledDatePicker.js

@@ -1,54 +1,60 @@
-import { setPickerPosition as f } from "./helpers.js";
+import { setPickerPosition as P } from "./helpers.js";
 import { StyledDayPicker as k } from "./components/StyledDayPicker.js";
-import { StyledCalendarPicker as u } from "./components/StyledCalendarPicker.js";
-import { DatePickerInputIndex as x } from "./components/DatePickerInputIndex.js";
-import { useIsMobileView as v } from "../../hooks/useWindowWidthSize.hook.js";
-import { StyledDrawer as C } from "../../../components/navigation/drawer/StyledDrawer.js";
-import { useBackNavigationClose as b } from "../../hooks/useBackNavigationClose.hook.js";
-import { useState as a } from "react";
-import { Fragment as h, jsx as o, jsxs as y } from "react/jsx-runtime";
-var E = (p) => {
-  const s = v(), [e, n] = a(null), [c, m] = a(!1), [d, i] = a(!1), P = (l) => {
-    n(l.currentTarget), f(l, m);
-  }, r = () => {
-    i(!0), n(null);
+import { StyledCalendarPicker as v } from "./components/StyledCalendarPicker.js";
+import { DatePickerInputIndex as y } from "./components/DatePickerInputIndex.js";
+import { useIsMobileView as x } from "../../hooks/useWindowWidthSize.hook.js";
+import { StyledDrawer as b } from "../../../components/navigation/drawer/StyledDrawer.js";
+import { useBackNavigationClose as h } from "../../hooks/useBackNavigationClose.hook.js";
+import { useEffect as C, useState as a } from "react";
+import { Fragment as E, jsx as t, jsxs as w } from "react/jsx-runtime";
+var L = (m) => {
+  const s = x(), [e, i] = a(null), [p, d] = a(!1), [f, c] = a(!1), u = (r) => {
+    i(r.currentTarget), P(r, d);
+  }, o = () => {
+    c(!0), i(null);
   };
-  b({
+  C(() => {
+    if (!e) return;
+    const r = (l) => {
+      document.activeElement === e && (l.key === "Escape" || l.key === "Tab") && o();
+    };
+    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
+  }, [e]), h({
     open: !!e,
-    onClose: r
+    onClose: o
   });
-  const t = {
-    ...p,
-    validateOnCalendarClose: d,
-    onValidatedOnce: () => i(!1)
+  const n = {
+    ...m,
+    validateOnCalendarClose: f,
+    onValidatedOnce: () => c(!1)
   };
-  return /* @__PURE__ */ y(h, { children: [
-    /* @__PURE__ */ o(x, {
-      datePickerProps: t,
-      onClick: P
+  return /* @__PURE__ */ w(E, { children: [
+    /* @__PURE__ */ t(y, {
+      datePickerProps: n,
+      onClick: u
     }),
-    !s && /* @__PURE__ */ o(u, {
-      datePickerProps: { ...t },
+    !s && /* @__PURE__ */ t(v, {
+      datePickerProps: { ...n },
       popoverProps: {
         open: !!e,
         anchorEl: e,
-        onClose: r
+        onClose: o
       },
-      positionAbove: c
+      positionAbove: p
     }),
-    s && /* @__PURE__ */ o(C, {
+    s && /* @__PURE__ */ t(b, {
       anchor: "bottom",
       open: !!e,
-      onClose: r,
+      onClose: o,
       anchorEl: e,
-      children: /* @__PURE__ */ o("div", {
+      children: /* @__PURE__ */ t("div", {
         className: "mx-auto max-w-[360px] px-2 pb-[max(1.5rem,env(safe-area-inset-bottom))]",
-        children: /* @__PURE__ */ o(k, {
-          datePickerProps: { ...t },
+        children: /* @__PURE__ */ t(k, {
+          datePickerProps: { ...n },
           popoverProps: {
             open: !!e,
             anchorEl: e,
-            onClose: r
+            onClose: o
           }
         })
       })
@@ -56,5 +62,5 @@ var E = (p) => {
   ] });
 };
 export {
-  E as StyledDatePicker
+  L as StyledDatePicker
 };

package/dist/datetime/components/date-picker/components/StyledCalendarPicker.js

@@ -1,12 +1,13 @@
-import { StyledPopover as n } from "../../../../components/utils/popover/StyledPopover.js";
+import { StyledPopover as i } from "../../../../components/utils/popover/StyledPopover.js";
 import { StyledDayPicker as c } from "./StyledDayPicker.js";
 import { jsx as r } from "react/jsx-runtime";
 var h = ({ datePickerProps: e, popoverProps: t, positionAbove: o }) => {
-  const { open: l, anchorEl: i, onClose: a } = t;
-  return /* @__PURE__ */ r(n, {
+  const { open: l, anchorEl: n, onClose: a } = t;
+  return /* @__PURE__ */ r(i, {
     open: l,
-    anchorEl: i,
+    anchorEl: n,
     onClose: a,
+    tabIntoContent: !1,
     anchorOrigin: {
       vertical: o ? "top" : 50,
       horizontal: "left"

package/dist/datetime/components/time-picker/StyledTimePicker.js

@@ -1,90 +1,103 @@
-import { useIsMobileView as N } from "../../hooks/useWindowWidthSize.hook.js";
-import { StyledDrawer as E } from "../../../components/navigation/drawer/StyledDrawer.js";
+import { useIsMobileView as O } from "../../hooks/useWindowWidthSize.hook.js";
+import { StyledDrawer as D } from "../../../components/navigation/drawer/StyledDrawer.js";
 import { useBackNavigationClose as I } from "../../hooks/useBackNavigationClose.hook.js";
 import { usePopupState as j } from "../../../hooks/usePopupState.js";
-import { ClickAwayListener as D } from "../../../components/mui-compat/ClickAwayListener.js";
-import { TimePickerPanel as L } from "./components/TimePickerPanel.js";
-import { TimePickerPopper as O } from "./TimePickerPopper.js";
+import { ClickAwayListener as A } from "../../../components/mui-compat/ClickAwayListener.js";
+import { TimePickerPanel as B } from "./components/TimePickerPanel.js";
+import { TimePickerPopper as M } from "./TimePickerPopper.js";
 import { getTimeFromValue as S } from "./helpers/getTimeFromValue.js";
-import { TimePickerInput as B } from "./TimePickerInput.js";
-import { useState as h } from "react";
-import { jsx as o, jsxs as T } from "react/jsx-runtime";
-import { format as v, isBefore as M, isValid as A } from "date-fns";
-var Z = (i) => {
-  const { value: a, onSelect: r, notBeforeTime: m } = i, e = j({
+import { TimePickerInput as F } from "./TimePickerInput.js";
+import { useEffect as K, useState as v } from "react";
+import { jsx as o, jsxs as C } from "react/jsx-runtime";
+import { format as y, isBefore as q, isValid as z } from "date-fns";
+var te = (n) => {
+  const { value: a, onSelect: r, notBeforeTime: u } = n, t = j({
     variant: "popper",
     popupId: "time-picker-popper"
-  }), V = N();
+  }), c = O();
   I({
-    open: V && e.isOpen,
-    onClose: e.close
+    open: c && t.isOpen,
+    onClose: t.close
   });
-  const x = a ? v(a, "HH:mm") : "", [C, s] = h(x), [P, l] = h(!1), [b, n] = h(!0), c = P ? C : x, u = (t) => !t || !m || !A(m) || !M(t, m), k = c.length === 5 ? S(c, a) : null, g = k ? u(k) : !0, H = (t) => {
-    const p = t.target.value;
-    if (l(!0), s(p), p.length !== 5) {
-      n(!1);
+  const { isOpen: k, anchorEl: V, close: w } = t;
+  K(() => {
+    if (!k || c) return;
+    const e = (i) => {
+      V?.contains(document.activeElement) && (i.key === "Escape" || i.key === "Tab") && w();
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [
+    k,
+    V,
+    w,
+    c
+  ]);
+  const E = a ? y(a, "HH:mm") : "", [b, m] = v(E), [g, l] = v(!1), [H, s] = v(!0), p = g ? b : E, f = (e) => !e || !u || !z(u) || !q(e, u), x = p.length === 5 ? S(p, a) : null, L = x ? f(x) : !0, N = (e) => {
+    const i = e.target.value;
+    if (l(!0), m(i), i.length !== 5) {
+      s(!1);
       return;
     }
-    const d = S(p, a);
-    if (!d) {
-      r(void 0), n(!1);
+    const h = S(i, a);
+    if (!h) {
+      r(void 0), s(!1);
       return;
     }
-    n(!0), u(d) ? (r(d), l(!1), e.close()) : r(void 0);
-  }, w = (t) => {
-    if (n(!0), u(t)) {
-      r(t), s(t ? v(t, "HH:mm") : ""), l(!1);
+    s(!0), f(h) ? (r(h), l(!1), t.close()) : r(void 0);
+  }, T = (e) => {
+    if (s(!0), f(e)) {
+      r(e), m(e ? y(e, "HH:mm") : ""), l(!1);
       return;
     }
-    r(void 0), s(t ? v(t, "HH:mm") : ""), l(!0);
-  }, y = () => {
-    r(void 0), s(""), l(!1), n(!0);
-  }, f = /* @__PURE__ */ o(B, {
-    ...i,
-    popupState: e,
-    localValue: c,
-    isValidTime: b,
-    isValidEndTime: g,
-    handleChange: H
+    r(void 0), m(e ? y(e, "HH:mm") : ""), l(!0);
+  }, P = () => {
+    r(void 0), m(""), l(!1), s(!0);
+  }, d = /* @__PURE__ */ o(F, {
+    ...n,
+    popupState: t,
+    localValue: p,
+    isValidTime: H,
+    isValidEndTime: L,
+    handleChange: N
   });
-  return i.disabled || i.readOnly ? f : V ? /* @__PURE__ */ T("div", {
+  return n.disabled || n.readOnly ? d : c ? /* @__PURE__ */ C("div", {
     className: "relative h-auto w-auto",
     children: [/* @__PURE__ */ o("div", {
       className: "m-0 flex h-fit items-center justify-center p-0",
-      children: f
-    }), /* @__PURE__ */ o(E, {
+      children: d
+    }), /* @__PURE__ */ o(D, {
       anchor: "bottom",
-      open: e.isOpen,
-      onClose: e.close,
-      anchorEl: e.anchorEl,
+      open: t.isOpen,
+      onClose: t.close,
+      anchorEl: t.anchorEl,
       children: /* @__PURE__ */ o("div", {
         className: "mx-auto w-full max-w-[360px] px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-2",
-        children: /* @__PURE__ */ o(L, {
-          dataTest: i.dataTest,
+        children: /* @__PURE__ */ o(B, {
+          dataTest: n.dataTest,
           value: a,
-          onSelect: w,
-          handleClear: y,
-          onConfirm: e.close
+          onSelect: T,
+          handleClear: P,
+          onConfirm: t.close
         })
       })
     })]
-  }) : /* @__PURE__ */ o(D, {
+  }) : /* @__PURE__ */ o(A, {
     mouseEvent: "onMouseDown",
-    onClickAway: e.close,
-    children: /* @__PURE__ */ T("div", {
+    onClickAway: t.close,
+    children: /* @__PURE__ */ C("div", {
       className: "relative h-auto w-auto",
       children: [/* @__PURE__ */ o("div", {
         className: "m-0 flex h-fit items-center justify-center p-0",
-        children: f
-      }), e.isOpen && /* @__PURE__ */ o(O, {
-        ...i,
-        popupState: e,
-        handleClear: y,
-        onSelect: w
+        children: d
+      }), t.isOpen && /* @__PURE__ */ o(M, {
+        ...n,
+        popupState: t,
+        handleClear: P,
+        onSelect: T
       })]
     })
   });
 };
 export {
-  Z as StyledTimePicker
+  te as StyledTimePicker
 };

package/dist/helpers/focusable.js

@@ -0,0 +1,5 @@
+var a = (r) => r.tabIndex >= 0 && !r.matches(":disabled") && !r.closest("[inert]") && (r.checkVisibility?.() ?? !0), b = (r) => Array.from(r.querySelectorAll("*")).filter(a), i = (r) => a(r) ? r : Array.from(r.querySelectorAll("*")).find(a) ?? null;
+export {
+  i as firstTabbable,
+  b as tabbableWithin
+};

package/dist/hooks/useFocusTrap.hook.js

@@ -1,34 +1,39 @@
-import { useEffect as d } from "react";
-var m = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])', b = (c, u, a) => {
+import { tabbableWithin as p } from "../helpers/focusable.js";
+import { useEffect as d, useRef as y } from "react";
+var E = (c, i, s) => {
+  const f = y(s);
   d(() => {
+    f.current = s;
+  }, [s]), d(() => {
     if (!c) return;
-    const t = u.current;
+    const t = i.current;
     if (!t) return;
-    const r = document.activeElement, l = requestAnimationFrame(() => {
-      t.focus({ preventScroll: !0 });
-    }), i = (e) => {
+    const n = document.activeElement, a = t.getAttribute("tabindex");
+    t.setAttribute("tabindex", "-1");
+    const b = requestAnimationFrame(() => {
+      (!n || !t.contains(n)) && t.focus({ preventScroll: !0 });
+    }), l = (e) => {
       if (e.key === "Escape") {
-        a?.();
+        f.current?.();
         return;
       }
       if (e.key !== "Tab") return;
-      const n = Array.from(t.querySelectorAll(m));
-      if (n.length === 0) {
+      const r = p(t);
+      if (r.length === 0) {
         e.preventDefault();
         return;
       }
-      const s = n[0], f = n[n.length - 1], o = document.activeElement;
-      e.shiftKey && (o === s || o === t) ? (e.preventDefault(), f?.focus()) : (!e.shiftKey && o === f || !e.shiftKey && o === t) && (e.preventDefault(), s?.focus());
+      const u = r[0], m = r[r.length - 1], o = document.activeElement;
+      e.shiftKey && (o === u || o === t) ? (e.preventDefault(), m?.focus()) : (!e.shiftKey && o === m || !e.shiftKey && o === t) && (e.preventDefault(), u?.focus());
     };
-    return document.addEventListener("keydown", i), () => {
-      cancelAnimationFrame(l), document.removeEventListener("keydown", i), r && document.contains(r) && r.focus();
+    return document.addEventListener("keydown", l), () => {
+      cancelAnimationFrame(b), document.removeEventListener("keydown", l), a === null ? t.removeAttribute("tabindex") : t.setAttribute("tabindex", a), requestAnimationFrame(() => {
+        const e = document.activeElement;
+        (!e || e === document.body) && n && document.contains(n) && n.focus({ preventScroll: !0 });
+      });
     };
-  }, [
-    c,
-    u,
-    a
-  ]);
+  }, [c, i]);
 };
 export {
-  b as useFocusTrap
+  E as useFocusTrap
 };

package/dist/src/components/data-display/chip/StyledChip.d.ts

@@ -47,6 +47,8 @@ export interface StyledChipProps {
     classes?: ChipClasses;
     sx?: unknown;
     tabIndex?: number;
+    /** Removes the delete affordance from sequential navigation when its owner has a keyboard equivalent. */
+    deleteButtonTabIndex?: number;
     'aria-label'?: string;
     /** Overrides the default `role="button"`/no-role logic — for `StyledInteractiveChip`'s
      * checkbox/radio chip, whose inner control is `decorative`/`aria-hidden` (a real, even hidden,

package/dist/src/components/inputs/dynamic-select/StyledDynamicSelect.d.ts

@@ -9,9 +9,8 @@ import { StyledDynamicSelectComponent } from './types';
  * **Multiple**) to a representation, which this component's thresholds reproduce exactly:
  * - **≤5 → Chips select** (`DynamicInteractiveChipGroup`): `StyledInteractiveChip` radio (single)
  *   or checkbox (multiple) chips; long labels stack vertically; "Clear selection" link + helper row.
- * - **>5 & ≤10 → Select (dropdown)**: outlined `StyledInputField` trigger + `Menus` list, typing
- *   disabled (caret hidden, keyboard blocked).
- * - **>10 → Autocomplete**: same trigger + scrollable `Menus` list with type-ahead search.
+ * - **>5 → Autocomplete**: outlined `StyledInputField` trigger + scrollable `Menus` list with
+ *   type-ahead search.
  * Each representation is composed from components already aligned to their own Figma nodes (Chip
  * `13248-31089`, Input field `15561-37391`, Menus `16073-19226`, Autocomplete `20474-27966`), so
  * parity here is the mode routing + the shared title/clear/helper chrome, not a bespoke visual.
@@ -25,7 +24,7 @@ import { StyledDynamicSelectComponent } from './types';
  *   Long labels automatically switch to a vertical stacked layout.
  *   When `!required` and a value is selected, a "Clear selection" button is shown.
  * - `0 or 6+ options` → renders as a searchable autocomplete (`DynamicSelectAutocomplete`).
- *   Typing is disabled when there are ≤10 options (caret hidden, keyboard blocked).
+ *   All autocomplete option counts remain filterable and keyboard-operable.
  *
  * **Option types:**
  * Options can be primitives (`string | number | boolean`) or objects. When using objects,

package/dist/src/components/inputs/dynamic-select/components/DynamicSelectAutocomplete.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/inputs/phone-field/CountryCodeOptions.d.ts

@@ -4,7 +4,7 @@ export interface CountryCodeOptionsProps {
     /** Already filtered — the caller owns the query. */
     visible: readonly PhoneCountryChoice[];
     selectedIso2: string;
-    activeIndex: number;
+    activeIndex: number | null;
     optionId: (index: number) => string;
     onSelect: (iso2: string) => void;
     listId: string;

package/dist/src/components/inputs/phone-field/useCountryPicker.d.ts

@@ -10,13 +10,16 @@ export interface UseCountryPickerOptions {
     selectedIso2: string;
     query: string;
     listId: string;
-    onSelect: (iso2: string) => void;
+    onSelect: (iso2: string, close?: boolean) => void;
     onDismiss: () => void;
 }
 export interface CountryPicker {
     visible: readonly PhoneCountryChoice[];
-    activeIndex: number;
+    activeIndex: number | null;
     optionId: (index: number) => string;
+    openWithKeyboard: (direction: -1 | 1) => void;
+    select: (iso2: string) => void;
+    dismiss: () => void;
     handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
 }
 /**

package/dist/src/components/inputs/slider/StyledSlider.d.ts

@@ -50,6 +50,9 @@ export interface StyledSliderProps {
     errorText?: string;
     helperText?: string;
     reserveHelperText?: boolean;
+    fromLabel?: ReactNode;
+    toLabel?: ReactNode;
+    showButtons?: boolean;
     /** Accessible name for the thumb input(s) — there is no visible label to derive it from
      * (axe `label`). A function receives the thumb index (0, or 0/1 for a two-thumb range) so each
      * thumb of a range slider can get a distinct name. */
@@ -67,5 +70,5 @@ export interface StyledSliderProps {
  * CI is the visual gate. Upgrade path: tune the 8px thumb inset if a diff shows misalignment.
  * TASK-204.
  */
-export declare const StyledSlider: ({ dataTest, min, max, step, value, defaultValue, disabled, size, orientation, marks, name, className, classes, slotProps, error, errorText, helperText, reserveHelperText, ariaLabel, ariaLabelledBy, onChange, onChangeCommitted, }: StyledSliderProps) => JSX.Element;
+export declare const StyledSlider: ({ dataTest, min, max, step, value, defaultValue, disabled, size, orientation, marks, name, className, classes, slotProps, error, errorText, helperText, reserveHelperText, fromLabel, toLabel, showButtons, ariaLabel, ariaLabelledBy, onChange, onChangeCommitted, }: StyledSliderProps) => JSX.Element;
 export {};

package/dist/src/components/navigation/listbox/Listbox.d.ts

@@ -5,16 +5,17 @@ declare function ListboxRoot<T>({ value, onChange, children, }: {
     onChange: (value: T) => void;
     children: ReactNode;
 }): JSX.Element;
-declare function ListboxOption<T>({ value, disabled, children, className, }: {
+declare function ListboxOption<T>({ value, disabled, children, className, optionIndex, }: {
     value: T;
     disabled?: boolean;
     children: RenderProp<{
         selected: boolean;
     }>;
     className?: string;
+    optionIndex?: number;
 }): JSX.Element;
 export declare const Listbox: typeof ListboxRoot & {
-    Button: ({ children, className, ...rest }: {
+    Button: ({ children, className, onClick, onKeyDown, ...rest }: {
         children: RenderProp<{
             open: boolean;
         }>;