asma-ui-core 3.86.0 → 3.86.2

package/dist/components/inputs/slider/StyledSlider.js

@@ -1,123 +1,174 @@
-import { cn as u } from "../../../helpers/cn.js";
-import { HelperRow as ft } from "../../../helpers/HelperRow.js";
-import { useHelperSlot as pt } from "../../../helpers/useHelperSlot.js";
-import y from "./StyledSlider.module.js";
-import { useId as ht, useRef as O, useState as Q } from "react";
-import { jsx as b, jsxs as H } from "react/jsx-runtime";
-var U = (i, l, o) => o === l ? 0 : Math.min(100, Math.max(0, (i - l) / (o - l) * 100)), mt = (i) => Array.isArray(i) ? [i[0] ?? 0, i[1] ?? 0] : null, wt = ({ dataTest: i, min: l = 0, max: o = 100, step: h = 1, value: w, defaultValue: W, disabled: s, size: z = "medium", orientation: C = "horizontal", marks: M, name: Z, className: k, classes: d, slotProps: x, error: v, errorText: tt, helperText: L, reserveHelperText: et, ariaLabel: S, ariaLabelledBy: rt, onChange: A, onChangeCommitted: _ }) => {
-  const j = ht(), n = C === "vertical", a = z === "small" ? 6 : 8, f = O(null), g = O(null), [lt, N] = Q(null), [nt, F] = Q(W ?? l), I = lt ?? w ?? nt, c = mt(I), p = c !== null, B = v ? tt ?? L : L, { show: K, role: ot } = pt("StyledSlider", v, B, et), V = (M === !0 && Number.isFinite(h) && h > 0 && o > l ? Array.from({ length: Math.floor((o - l) / h) + 1 }, (t, r) => ({ value: l + h * r })) : Array.isArray(M) ? M : []).filter((t) => t.value >= l && t.value <= o), X = p ? Math.min(c[0], c[1]) : l, R = p ? Math.max(c[0], c[1]) : I, Y = (t) => p ? t >= X && t <= R : t <= R, $ = p ? U(X, l, o) : 0, q = U(R, l, o) - $, at = n ? {
-    bottom: `${$}%`,
-    height: `${q}%`
+import { cn as c } from "../../../helpers/cn.js";
+import { PlusIcon as yt } from "../../icons/plus-icon/PlusIcon.js";
+import { RemoveIcon as xt } from "../../icons/remove-icon/RemoveIcon.js";
+import { StyledButton as tt } from "../button/StyledButton.js";
+import { HelperRow as Nt } from "../../../helpers/HelperRow.js";
+import { useHelperSlot as Mt } from "../../../helpers/useHelperSlot.js";
+import x from "./StyledSlider.module.js";
+import { useId as Pt, useRef as et, useState as rt } from "react";
+import { jsx as i, jsxs as y } from "react/jsx-runtime";
+var j = (m, l, o) => o === l ? 0 : Math.min(100, Math.max(0, (m - l) / (o - l) * 100)), It = (m) => Array.isArray(m) ? [m[0] ?? 0, m[1] ?? 0] : null, Ut = ({ dataTest: m, min: l = 0, max: o = 100, step: h = 1, value: V, defaultValue: lt, disabled: u, size: B = "medium", orientation: F = "horizontal", marks: A, name: at, className: nt, classes: p, slotProps: R, error: N, errorText: ot, helperText: K, reserveHelperText: ct, fromLabel: T, toLabel: D, showButtons: X, ariaLabel: $, ariaLabelledBy: it, onChange: M, onChangeCommitted: k }) => {
+  const Y = Pt(), a = F === "vertical", s = B === "small" ? 6 : 8, b = et(null), g = et(null), [st, P] = rt(null), [ut, q] = rt(lt ?? l), v = st ?? V ?? ut, n = It(v), d = n !== null, E = N ? ot ?? K : K, { show: G, role: dt } = Mt("StyledSlider", N, E, ct), H = (A === !0 && Number.isFinite(h) && h > 0 && o > l ? Array.from({ length: Math.floor((o - l) / h) + 1 }, (t, r) => ({ value: l + h * r })) : Array.isArray(A) ? A : []).filter((t) => t.value >= l && t.value <= o), J = d ? Math.min(n[0], n[1]) : l, U = d ? Math.max(n[0], n[1]) : v, O = (t) => d ? t >= J && t <= U : t <= U, ft = d ? Math.min(n[0], n[1]) <= l : v <= l, ht = d ? Math.max(n[0], n[1]) >= o : v >= o, z = d ? j(J, l, o) : 0, Q = j(U, l, o) - z, mt = a ? {
+    bottom: `${z}%`,
+    height: `${Q}%`
   } : {
-    left: `${$}%`,
-    width: `${q}%`
-  }, E = (t) => {
-    const r = U(t, l, o);
-    return n ? { bottom: `${r}%` } : { left: `${r}%` };
-  }, T = (t) => {
-    const r = t.currentTarget.getBoundingClientRect(), e = n ? 1 - (t.clientY - (r.top + a)) / (r.height - a * 2) : (t.clientX - (r.left + a)) / (r.width - a * 2), m = l + Math.round(Math.min(1, Math.max(0, e)) * ((o - l) / h)) * h;
-    return Math.min(o, Math.max(l, m));
-  }, ct = (t) => p && Math.abs((c?.[1] ?? l) - t) < Math.abs((c?.[0] ?? l) - t) ? 1 : 0, ut = (t) => {
-    if (s) return;
-    const r = T(t), e = ct(r);
-    f.current = e, g.current = t.pointerId, t.currentTarget.setPointerCapture(t.pointerId);
-    const m = P(r, e);
-    N(m), A?.(t, m, e);
-  }, it = (t) => {
-    if (s || f.current === null || t.pointerId !== g.current) return;
-    const r = f.current, e = P(T(t), r);
-    N(e), A?.(t, e, r);
-  }, st = (t) => {
-    if (s || f.current === null || t.pointerId !== g.current) return;
-    const r = f.current, e = P(T(t), r);
-    w === void 0 && F(e), _?.(t, e), t.currentTarget.hasPointerCapture(t.pointerId) && t.currentTarget.releasePointerCapture(t.pointerId), N(null), f.current = null, g.current = null;
-  }, dt = (t) => {
-    f.current === null || t.pointerId !== g.current || (N(null), f.current = null, g.current = null);
-  }, P = (t, r) => {
-    if (!p) return t;
-    const e = [c?.[0] ?? 0, c?.[1] ?? 0];
+    left: `${z}%`,
+    width: `${Q}%`
+  }, W = (t) => {
+    const r = j(t, l, o);
+    return a ? { bottom: `${r}%` } : { left: `${r}%` };
+  }, C = (t) => {
+    const r = t.currentTarget.getBoundingClientRect(), e = a ? 1 - (t.clientY - (r.top + s)) / (r.height - s * 2) : (t.clientX - (r.left + s)) / (r.width - s * 2), f = l + Math.round(Math.min(1, Math.max(0, e)) * ((o - l) / h)) * h;
+    return Math.min(o, Math.max(l, f));
+  }, pt = (t) => d && Math.abs((n?.[1] ?? l) - t) < Math.abs((n?.[0] ?? l) - t) ? 1 : 0, bt = (t) => {
+    if (u) return;
+    const r = C(t), e = pt(r);
+    b.current = e, g.current = t.pointerId, t.currentTarget.setPointerCapture(t.pointerId);
+    const f = I(r, e);
+    P(f), M?.(t, f, e);
+  }, gt = (t) => {
+    if (u || b.current === null || t.pointerId !== g.current) return;
+    const r = b.current, e = I(C(t), r);
+    P(e), M?.(t, e, r);
+  }, vt = (t) => {
+    if (u || b.current === null || t.pointerId !== g.current) return;
+    const r = b.current, e = I(C(t), r);
+    V === void 0 && q(e), k?.(t, e), t.currentTarget.hasPointerCapture(t.pointerId) && t.currentTarget.releasePointerCapture(t.pointerId), P(null), b.current = null, g.current = null;
+  }, wt = (t) => {
+    b.current === null || t.pointerId !== g.current || (P(null), b.current = null, g.current = null);
+  }, Z = (t) => (r) => {
+    if (u) return;
+    const e = t === "increment" ? h || 1 : -(h || 1);
+    let f = 0, w;
+    d ? (f = t === "increment" ? 1 : 0, w = t === "increment" ? Math.max(n[0], n[1]) : Math.min(n[0], n[1])) : w = v;
+    const L = Math.min(o, Math.max(l, w + e));
+    S(M, r, L, f), S(k, r, L, f);
+  }, I = (t, r) => {
+    if (!d) return t;
+    const e = [n?.[0] ?? 0, n?.[1] ?? 0];
     return e[r] = t, r === 0 && e[0] > e[1] && (e[0] = e[1]), r === 1 && e[1] < e[0] && (e[1] = e[0]), e;
-  }, G = (t, r, e, m) => {
-    const J = P(e, m);
-    w === void 0 && F(J), t && t(r, J, m);
-  }, D = (t, r) => /* @__PURE__ */ b("input", {
+  }, S = (t, r, e, f) => {
+    const w = I(e, f);
+    V === void 0 && q(w), t && t(r, w, f);
+  }, _ = (t, r) => /* @__PURE__ */ i("input", {
     type: "range",
-    "data-testid": p ? `${i}-thumb-${t}` : i,
-    name: Z,
+    "data-testid": d ? `${m}-thumb-${t}` : m,
+    name: at,
     min: l,
     max: o,
     step: h,
     value: r,
-    disabled: s,
-    "aria-orientation": C,
-    "aria-label": typeof S == "function" ? S(t) : S,
-    "aria-labelledby": rt,
-    "aria-invalid": v ? !0 : void 0,
-    "aria-describedby": K ? j : void 0,
-    className: u(y.SliderInput, n ? y.Vertical : y.Horizontal, !n && "z-0", z === "small" && y.Small, s && y.Disabled, d?.thumb, x?.thumb?.className),
-    onChange: (e) => G(A, e, Number(e.currentTarget.value), t),
-    onKeyUp: (e) => G(_, e, Number(e.currentTarget.value), t)
+    disabled: u,
+    "aria-orientation": F,
+    "aria-label": typeof $ == "function" ? $(t) : $,
+    "aria-labelledby": it,
+    "aria-invalid": N ? !0 : void 0,
+    "aria-describedby": G ? Y : void 0,
+    className: c(x.SliderInput, a ? x.Vertical : x.Horizontal, !a && "z-0", B === "small" && x.Small, u && x.Disabled, p?.thumb, R?.thumb?.className),
+    onChange: (e) => S(M, e, Number(e.currentTarget.value), t),
+    onKeyUp: (e) => S(k, e, Number(e.currentTarget.value), t)
   }, t);
-  return /* @__PURE__ */ H("div", {
-    className: u("relative flex", n ? "h-full w-8 flex-col items-center" : "mt-px w-full flex-col", d?.root, k),
-    children: [
-      /* @__PURE__ */ H("div", {
-        className: u("relative", n ? "h-full w-8" : "h-4 w-full", s ? "cursor-default" : "cursor-pointer"),
-        style: { touchAction: "none" },
-        onPointerDown: ut,
-        onPointerMove: it,
-        onPointerUp: st,
-        onPointerCancel: dt,
-        children: [/* @__PURE__ */ H("div", {
-          className: u("absolute", n ? "left-1/2 w-1 -translate-x-1/2" : "top-[calc(50%+6px)] h-1 -translate-y-1/2"),
-          style: n ? {
-            top: a,
-            bottom: a
-          } : {
-            left: a,
-            right: a
-          },
+  return /* @__PURE__ */ y("div", {
+    className: c("flex max-w-[600px] flex-col gap-3", a && "h-full"),
+    children: [!a && (T ?? D) && /* @__PURE__ */ y("div", {
+      className: "grid w-full grid-cols-2 gap-4",
+      children: [!a && T && /* @__PURE__ */ i("span", {
+        className: "min-w-0 break-words text-left font-normal text-delta-800",
+        children: T
+      }), !a && D && /* @__PURE__ */ i("span", {
+        className: "min-w-0 break-words text-right font-normal text-delta-800",
+        children: D
+      })]
+    }), /* @__PURE__ */ y("div", {
+      className: c("flex", !a && "w-full items-start gap-3", a && "h-full flex-col items-center"),
+      children: [
+        !a && X && /* @__PURE__ */ i(tt, {
+          dataTest: "slider-from-button",
+          "aria-label": "Decrease value",
+          className: "-mt-0.5 w-8",
+          variant: "outlined",
+          disabled: u ?? ft,
+          startIcon: /* @__PURE__ */ i(xt, {
+            width: 24,
+            height: 24
+          }),
+          onClick: Z("decrement")
+        }),
+        /* @__PURE__ */ y("div", {
+          className: c("relative flex", a ? "h-full w-8 flex-col items-center" : "mt-px w-full flex-col", p?.root, nt),
           children: [
-            /* @__PURE__ */ b("div", { className: u("absolute inset-0 rounded-full bg-delta-100", d?.rail, x?.rail?.className) }),
-            /* @__PURE__ */ b("div", {
-              className: u("absolute rounded-full", n ? "left-0 w-full" : "top-0 h-full", s ? "bg-delta-200" : "bg-gama-500", d?.track),
-              style: at
+            /* @__PURE__ */ y("div", {
+              className: c("relative", a ? "h-full w-8" : "h-4 w-full", u ? "cursor-default" : "cursor-pointer"),
+              style: { touchAction: "none" },
+              onPointerDown: bt,
+              onPointerMove: gt,
+              onPointerUp: vt,
+              onPointerCancel: wt,
+              children: [/* @__PURE__ */ y("div", {
+                className: c("absolute", a ? "left-1/2 w-1 -translate-x-1/2" : "top-[calc(50%+6px)] h-1 -translate-y-1/2"),
+                style: a ? {
+                  top: s,
+                  bottom: s
+                } : {
+                  left: s,
+                  right: s
+                },
+                children: [
+                  /* @__PURE__ */ i("div", { className: c("absolute inset-0 rounded-full bg-delta-100", p?.rail, R?.rail?.className) }),
+                  /* @__PURE__ */ i("div", {
+                    className: c("absolute rounded-full", a ? "left-0 w-full" : "top-0 h-full", u ? "bg-delta-200" : "bg-gama-500", p?.track),
+                    style: mt
+                  }),
+                  H.map((t) => {
+                    const r = O(t.value);
+                    return /* @__PURE__ */ i("span", {
+                      className: c("absolute z-10 box-border h-2 w-2 -translate-x-1/2 rounded-full border border-solid", a ? "left-1/2 translate-y-1/2" : "top-1/2 -translate-y-1/2", r ? c(u ? "border-delta-200 bg-delta-200" : "border-gama-500 bg-gama-500", p?.markActive) : c("border-delta-300 bg-white", p?.mark)),
+                      style: W(t.value)
+                    }, t.value);
+                  })
+                ]
+              }), d ? [_(0, n[0]), _(1, n[1])] : _(0, v)]
             }),
-            V.map((t) => {
-              const r = Y(t.value);
-              return /* @__PURE__ */ b("span", {
-                className: u("absolute z-10 box-border h-2 w-2 -translate-x-1/2 rounded-full border border-solid", n ? "left-1/2 translate-y-1/2" : "top-1/2 -translate-y-1/2", r ? u(s ? "border-delta-200 bg-delta-200" : "border-gama-500 bg-gama-500", d?.markActive) : u("border-delta-300 bg-white", d?.mark)),
-                style: E(t.value)
-              }, t.value);
+            H.some((t) => t.label != null) && /* @__PURE__ */ i("div", {
+              className: c(a ? "pointer-events-none absolute inset-x-0" : "relative mt-[14px] h-6"),
+              style: a ? {
+                top: s,
+                bottom: s
+              } : {
+                marginLeft: s,
+                marginRight: s
+              },
+              children: H.map((t) => t.label == null ? null : /* @__PURE__ */ i("span", {
+                className: c("absolute text-base font-semibold text-delta-700", a ? "left-[37px] translate-y-1/2" : "-translate-x-1/2", O(t.value) && p?.markLabelActive, p?.markLabel, R?.markLabel?.className),
+                style: W(t.value),
+                children: t.label
+              }, t.value))
+            }),
+            G && /* @__PURE__ */ i(Nt, {
+              id: Y,
+              role: dt,
+              error: N,
+              message: E,
+              className: "m-0 items-center"
             })
           ]
-        }), p ? [D(0, c[0]), D(1, c[1])] : D(0, I)]
-      }),
-      V.some((t) => t.label != null) && /* @__PURE__ */ b("div", {
-        className: u(n ? "pointer-events-none absolute inset-x-0" : "relative mt-[14px] h-6"),
-        style: n ? {
-          top: a,
-          bottom: a
-        } : {
-          marginLeft: a,
-          marginRight: a
-        },
-        children: V.map((t) => t.label == null ? null : /* @__PURE__ */ b("span", {
-          className: u("absolute text-base font-semibold text-delta-700", n ? "left-[37px] translate-y-1/2" : "-translate-x-1/2", Y(t.value) && d?.markLabelActive, d?.markLabel, x?.markLabel?.className),
-          style: E(t.value),
-          children: t.label
-        }, t.value))
-      }),
-      K && /* @__PURE__ */ b(ft, {
-        id: j,
-        role: ot,
-        error: v,
-        message: B,
-        className: "m-0 items-center"
-      })
-    ]
+        }),
+        !a && X && /* @__PURE__ */ i(tt, {
+          dataTest: "slider-to-button",
+          "aria-label": "Increase value",
+          className: "-mt-0.5 w-8",
+          variant: "outlined",
+          disabled: u ?? ht,
+          startIcon: /* @__PURE__ */ i(yt, {
+            width: 24,
+            height: 24
+          }),
+          onClick: Z("increment")
+        })
+      ]
+    })]
   });
 };
 export {
-  wt as StyledSlider
+  Ut as StyledSlider
 };

package/dist/components/navigation/listbox/Listbox.js

@@ -1,80 +1,130 @@
-import { ClickAwayListener as p } from "../../mui-compat/ClickAwayListener.js";
-import { createContext as x, useContext as d, useEffect as b, useMemo as v, useState as m } from "react";
-import { jsx as s } from "react/jsx-runtime";
-var a = x(null), l = () => {
-  const t = d(a);
+import { tabbableWithin as L } from "../../../helpers/focusable.js";
+import { ClickAwayListener as $ } from "../../mui-compat/ClickAwayListener.js";
+import { Children as C, cloneElement as D, createContext as O, isValidElement as g, useCallback as B, useContext as S, useEffect as w, useId as M, useMemo as T, useRef as q, useState as k } from "react";
+import { jsx as x } from "react/jsx-runtime";
+var I = O(null), b = () => {
+  const t = S(I);
   if (!t) throw new Error("Listbox.Button/Options/Option must be rendered inside <Listbox>");
   return t;
-}, f = (t, e) => typeof t == "function" ? t(e) : t;
-function L({ value: t, onChange: e, children: r }) {
-  const [o, n] = m(!1), u = v(() => ({
-    open: o,
+}, h = (t, l) => typeof t == "function" ? t(l) : t;
+function K({ value: t, onChange: l, children: d }) {
+  const [s, u] = k(!1), [n, o] = k(null), r = `listbox-${M()}`, p = q(null), a = B(() => {
+    u(!1), o(null);
+  }, []);
+  w(() => {
+    if (!s) return;
+    const i = (y) => {
+      if (y.key !== "Escape") return;
+      const e = p.current;
+      e?.contains(document.activeElement) && e.querySelector('[role="combobox"]')?.focus(), a();
+    };
+    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+  }, [s, a]);
+  const f = T(() => ({
+    open: s,
     select: (i) => {
-      e(i), n(!1);
+      l(i), a();
     },
-    setOpen: n,
+    setOpen: u,
+    setActiveIndex: o,
+    activeIndex: n,
+    listboxId: r,
     value: t
   }), [
-    o,
+    s,
     t,
-    e
+    l,
+    n,
+    r,
+    a
   ]);
-  return b(() => {
-    if (!o) return;
-    const i = (c) => {
-      c.key === "Escape" && n(!1);
-    };
-    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
-  }, [o]), /* @__PURE__ */ s(a.Provider, {
-    value: u,
-    children: /* @__PURE__ */ s(p, {
-      onClickAway: () => n(!1),
-      children: /* @__PURE__ */ s("div", {
+  return /* @__PURE__ */ x(I.Provider, {
+    value: f,
+    children: /* @__PURE__ */ x($, {
+      onClickAway: a,
+      children: /* @__PURE__ */ x("div", {
+        ref: (i) => {
+          p.current = i;
+        },
+        onBlur: (i) => {
+          i.relatedTarget && !i.currentTarget.contains(i.relatedTarget) && a();
+        },
         className: "relative w-full",
-        children: r
+        children: d
       })
     })
   });
 }
-var y = ({ children: t, className: e, ...r }) => {
-  const { open: o, setOpen: n } = l();
-  return /* @__PURE__ */ s("button", {
+var N = ({ children: t, className: l, onClick: d, onKeyDown: s, ...u }) => {
+  const { activeIndex: n, listboxId: o, open: r, setActiveIndex: p, setOpen: a } = b(), f = () => Array.from(document.querySelectorAll(`#${CSS.escape(o)} [role="option"]:not([aria-disabled="true"])`)), i = (e) => {
+    const c = f();
+    if (c.length === 0) return;
+    const m = c.findIndex((E) => E.id === `${o}-option-${n}`), v = m === -1 ? e === 1 ? 0 : c.length - 1 : Math.min(Math.max(m + e, 0), c.length - 1);
+    p(Number(c[v].dataset.index));
+  };
+  return /* @__PURE__ */ x("button", {
+    ...u,
     type: "button",
-    className: e,
-    onClick: () => n(!o),
-    ...r,
-    children: f(t, { open: o })
+    className: l,
+    onClick: (e) => {
+      d?.(e), e.defaultPrevented || a(!r);
+    },
+    onKeyDown: (e) => {
+      if (s?.(e), !e.defaultPrevented)
+        if (e.key === "ArrowDown" || e.key === "ArrowUp")
+          e.preventDefault(), r ? i(e.key === "ArrowDown" ? 1 : -1) : (a(!0), requestAnimationFrame(() => i(e.key === "ArrowDown" ? 1 : -1)));
+        else if (r && (e.key === "Home" || e.key === "End")) {
+          e.preventDefault();
+          const c = f(), m = c[e.key === "Home" ? 0 : c.length - 1];
+          m && p(Number(m.dataset.index));
+        } else r && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), f().find((c) => c.id === `${o}-option-${n}`)?.click());
+    },
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    "aria-expanded": r,
+    "aria-controls": r ? o : void 0,
+    "aria-activedescendant": r && n !== null ? `${o}-option-${n}` : void 0,
+    children: h(t, { open: r })
   });
-}, k = ({ children: t, className: e }) => {
-  const { open: r } = l();
-  return r ? /* @__PURE__ */ s("div", {
+}, P = ({ children: t, className: l }) => {
+  const { activeIndex: d, listboxId: s, open: u } = b();
+  return w(() => {
+    d !== null && document.getElementById(`${s}-option-${d}`)?.scrollIntoView({ block: "nearest" });
+  }, [d, s]), u ? /* @__PURE__ */ x("div", {
+    id: s,
     role: "listbox",
-    className: e,
-    children: t
+    className: l,
+    children: (() => {
+      let n = 0;
+      return C.toArray(t).map((o) => g(o) && o.type === A ? D(o, { optionIndex: n++ }) : o);
+    })()
   }) : null;
 };
-function w({ value: t, disabled: e, children: r, className: o }) {
-  const n = l(), u = n.value === t, i = () => {
-    e || n.select(t);
+function A({ value: t, disabled: l, children: d, className: s, optionIndex: u = 0 }) {
+  const n = b(), o = n.value === t, r = () => {
+    l || n.select(t);
   };
-  return /* @__PURE__ */ s("div", {
+  return /* @__PURE__ */ x("div", {
+    id: `${n.listboxId}-option-${u}`,
     role: "option",
-    "aria-selected": u,
-    "aria-disabled": e,
-    tabIndex: e ? void 0 : 0,
-    className: o,
-    onClick: i,
-    onKeyDown: (c) => {
-      (c.key === "Enter" || c.key === " ") && (c.preventDefault(), i());
+    "aria-selected": o,
+    "aria-disabled": l,
+    "data-index": u,
+    tabIndex: -1,
+    className: s,
+    onMouseDown: (p) => {
+      const a = p.target;
+      L(p.currentTarget).some((f) => f.contains(a)) || p.preventDefault();
     },
-    children: f(r, { selected: u })
+    onClick: r,
+    children: h(d, { selected: o })
   });
 }
-var h = Object.assign(L, {
-  Button: y,
-  Option: w,
-  Options: k
+var H = Object.assign(K, {
+  Button: N,
+  Option: A,
+  Options: P
 });
 export {
-  h as Listbox
+  H as Listbox
 };

package/dist/components/navigation/menu/StyledMenu.js

@@ -1,30 +1,34 @@
-import { cn as S } from "../../../helpers/cn.js";
-import { StyledPopover as f } from "../../utils/popover/StyledPopover.js";
-import { StyledMenuList as u } from "./StyledMenuList.js";
-import { jsx as p } from "react/jsx-runtime";
-var v = {
+import { cn as u } from "../../../helpers/cn.js";
+import { StyledPopover as c } from "../../utils/popover/StyledPopover.js";
+import { StyledMenuList as S } from "./StyledMenuList.js";
+import { jsx as o } from "react/jsx-runtime";
+var N = {
   border: "1px solid var(--colors-delta-300)",
   boxShadow: "0px 2px 4px 0px rgba(34, 33, 51, 0.15)"
-}, h = ({ open: a, anchorEl: o, onClose: t, anchorOrigin: l, transformOrigin: m, id: d, className: s, sx: x, classes: e, slotProps: r, autoFocus: i = !0, onClick: c, children: n, keepMounted: y }) => /* @__PURE__ */ p(f, {
-  open: a,
-  anchorEl: o,
+}, h = ({ open: p, anchorEl: m, onClose: t, anchorOrigin: l, transformOrigin: i, id: d, className: s, sx: x, classes: a, slotProps: e, autoFocus: n = !0, onClick: y, children: b, keepMounted: f }) => /* @__PURE__ */ o(c, {
+  open: p,
+  anchorEl: m,
   onClose: t,
+  tabIntoContent: !1,
   anchorOrigin: l,
-  transformOrigin: m,
+  transformOrigin: i,
   id: d,
   className: s,
   sx: x,
-  keepMounted: y,
+  keepMounted: f,
   slotProps: { paper: {
-    className: S("rounded", e?.paper, r?.paper?.className),
-    sx: [v, r?.paper?.sx],
-    style: r?.paper?.style
+    className: u("rounded", a?.paper, e?.paper?.className),
+    sx: [N, e?.paper?.sx],
+    style: e?.paper?.style
   } },
-  children: /* @__PURE__ */ p(u, {
-    autoFocus: i,
-    className: e?.list,
-    onClick: c,
-    children: n
+  children: /* @__PURE__ */ o(S, {
+    autoFocus: n,
+    className: a?.list,
+    onClick: y,
+    onKeyDown: (r) => {
+      r.key === "Tab" && r.target.getAttribute("role") === "menuitem" && t?.(r, "tabKeyDown");
+    },
+    children: b
   })
 });
 export {

package/dist/components/navigation/menu/StyledMenuItem.js

@@ -1,7 +1,7 @@
 import { cn as r } from "../../../helpers/cn.js";
-import { resolveSx as y } from "../../../helpers/sx.js";
+import { resolveSx as c } from "../../../helpers/sx.js";
 import { jsx as f } from "react/jsx-runtime";
-var D = ({ children: n, onClick: o, onMouseDown: i, onMouseUp: l, disabled: e, selected: s, dense: m, className: d, classes: a, sx: u, "data-test": p, "data-testid": x, value: c }) => /* @__PURE__ */ f("li", {
+var g = ({ children: n, onClick: o, onMouseDown: i, onMouseUp: s, disabled: e, selected: l, dense: m, className: d, classes: a, sx: u, "data-test": p, "data-testid": x, value: v }) => /* @__PURE__ */ f("li", {
   role: "menuitem",
   "aria-disabled": e ? !0 : void 0,
   tabIndex: -1,
@@ -9,17 +9,17 @@ var D = ({ children: n, onClick: o, onMouseDown: i, onMouseUp: l, disabled: e, s
   "data-testid": x,
   onClick: e ? void 0 : o,
   onMouseDown: e ? void 0 : i,
-  onMouseUp: e ? void 0 : l,
+  onMouseUp: e ? void 0 : s,
   onKeyDown: (t) => {
     e || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), o?.(t));
   },
-  className: r("box-border flex items-center px-4 text-base outline-none", m ? "min-h-8 py-1" : "min-h-10 py-2", "asma-pressable asma-touch-target", e ? "cursor-not-allowed text-delta-300 aria-disabled:text-delta-300" : "cursor-pointer text-delta-700 hover:bg-delta-50", s && r("bg-gama-50", a?.selected), a?.root, d),
+  className: r("box-border flex items-center px-4 text-base outline-none focus-visible:shadow-[inset_3px_0_var(--colors-focus-ring)]", m ? "min-h-8 py-1" : "min-h-10 py-2", "asma-pressable asma-touch-target", e ? "cursor-not-allowed text-delta-300 aria-disabled:text-delta-300" : "cursor-pointer text-delta-700 hover:bg-delta-50", l && r("bg-gama-50", a?.selected), a?.root, d),
   style: {
     fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-    ...y(u)
+    ...c(u)
   },
   children: n
 });
 export {
-  D as StyledMenuItem
+  g as StyledMenuItem
 };

package/dist/components/utils/accordion/base-ui/StyledAccordionDetails.js

@@ -1,27 +1,31 @@
-import n from "./StyledAccordion.module.js";
-import { useAccordionContext as g } from "./AccordionContext.js";
-import { clsx as s } from "clsx";
-import { useEffect as h, useRef as v, useState as x } from "react";
-import { jsx as c } from "react/jsx-runtime";
-var C = ({ children: r, className: i, contentClassName: l, ...a }) => {
-  const { open: d, panelId: m, triggerId: u } = g(), e = v(null), [f, p] = x(0);
-  return h(() => {
-    if (!e.current) return;
-    const t = () => p(e.current?.scrollHeight ?? 0);
+import u from "./StyledAccordion.module.js";
+import { useAccordionContext as h } from "./AccordionContext.js";
+import { clsx as a } from "clsx";
+import { useEffect as x, useLayoutEffect as y, useRef as c, useState as A } from "react";
+import { jsx as d } from "react/jsx-runtime";
+var C = ({ children: s, className: f, contentClassName: m, ...p }) => {
+  const { open: e, panelId: g, triggerId: o } = h(), l = c(null), r = c(null), i = c(e), [v, b] = A(0);
+  return x(() => {
+    if (!r.current) return;
+    const t = () => b(r.current?.scrollHeight ?? 0);
     t();
-    const o = new ResizeObserver(t);
-    return o.observe(e.current), () => o.disconnect();
-  }, [r]), /* @__PURE__ */ c("div", {
-    ...a,
-    id: m,
+    const n = new ResizeObserver(t);
+    return n.observe(r.current), () => n.disconnect();
+  }, [s]), y(() => {
+    const t = l.current, n = i.current && !e && t?.contains(document.activeElement);
+    t?.toggleAttribute("inert", !e), n && document.getElementById(o)?.focus({ preventScroll: !0 }), i.current = e;
+  }, [e, o]), /* @__PURE__ */ d("div", {
+    ref: l,
+    ...p,
+    id: g,
     role: "region",
-    "aria-labelledby": u,
-    className: s(n.Panel, i),
-    style: { "--accordion-panel-height": d ? `${f}px` : "0px" },
-    children: /* @__PURE__ */ c("div", {
-      ref: e,
-      className: s(n.Content, l),
-      children: r
+    "aria-labelledby": o,
+    className: a(u.Panel, f),
+    style: { "--accordion-panel-height": e ? `${v}px` : "0px" },
+    children: /* @__PURE__ */ d("div", {
+      ref: r,
+      className: a(u.Content, m),
+      children: s
     })
   });
 };

package/dist/components/utils/copy-wrapper/CopyWrapper.module.js

@@ -1,6 +1,6 @@
 var p = {
-  "copy-wrapper": "_copy-wrapper_1gjzc_1",
-  "hidden-copy": "_hidden-copy_1gjzc_1"
+  "copy-wrapper": "_copy-wrapper_15hst_1",
+  "hidden-copy": "_hidden-copy_15hst_1"
 };
 export {
   p as default