@stackone/malachite 2.68.1 → 2.69.0

package/COMPONENTS.md

@@ -44,6 +44,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`UsageCard`** — A small metered card: a title (optionally a link via `titleLink`, drawn with a trailing arrow), a right-aligned `detail` such as "700/1,000", and a body, usually a `Progress`. Used by `Sidebar.Usage`, and fine on its own, e.g. on a billing page. _Key props:_ `title`, `titleLink`, `detail`, `children`, `aria-label` (required; names the group), `busy` (sets `aria-busy` only).
 - **`Progress`** — Progress bar.
 - **`LoadingBar`** — Indeterminate full-width loading line; the variant colour sweeps across a pale track for work of unknown duration. Toggle `active` rather than unmounting, so the reserved height prevents layout shift. _Key props:_ `active`, `LoadingBarVariant` (`default` | `warning` | `error`), `LoadingBarSize` (`small` | `medium` | `large`), `aria-label`, `aria-labelledby`, `className`, `style`.
+- **`ToastProvider`** — Transient top-centre toasts for the outcome of an action. Wrap the app once in `ToastProvider` and call `useToast().show({ message, variant })` anywhere beneath it. Each toast auto-dismisses, pauses while hovered and dismisses on click; at most three show at once. Toasts are announced through always-mounted live regions (`status` for success, `alert` for error), and the pills themselves are hidden from assistive tech and never take focus, so they cannot fight a dialog's focus trap. The host mounts on the first toast and joins the top layer, so toasts paint above elevated side panels. _Key props:_ `ToastProvider`: `children`, `duration` (ms, default 3000). `useToast()` → `show({ message, variant })`, `ToastVariant` (`success` | `error`, default `success`).
 - **`Spinner`** — Loading spinner.
 - **`Skeleton`** — Loading placeholders. Includes `Skeleton.Avatar` and `Skeleton.Input`. The shimmer stops under `prefers-reduced-motion`, leaving the plain placeholder.
 - **`Tooltip`** — Hover/focus tooltip; also works on disabled controls (see CLAUDE.md). It describes its trigger once shown, so `describesTrigger={false}` where the same sentence is already on screen and referenced — otherwise a screen reader reads it twice. _Key props:_ `text`, `placement`, `delay`, `maxWidth`, `shouldShow`, `triggerAs`, `describesTrigger`, `isShrinkable`, `fill`, `wrapChildren`, `suppressed` (holds the tooltip back, e.g. while the popup its trigger opens is up), `showOnFocus` (false where script can move focus onto the trigger, e.g. an option a panel focuses on open), `focusableTrigger` (makes a trigger that cannot take focus — text, a static `Tag` — a tab stop, so the tooltip is not mouse-only; not for focusable children).

package/dist/components/ToastHost.js

@@ -0,0 +1,59 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useRef as a, useLayoutEffect as n } from "react";
+import { createPortal as c } from "react-dom";
+import { ShadowRootWrapper as l } from "../ShadowRootWrapper.js";
+import d from "./ToastItem.js";
+import { keepAboveOverlayStack as u } from "./overlayBehaviour.js";
+import { ensureToastStyles as h, overlayIdentity as v } from "./portalOverlay.js";
+import { leaveTopLayer as x, raiseToTopLayer as y } from "./topLayer.js";
+const T = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  pointerEvents: "none"
+}, w = ({ toasts: t, duration: m, onDismiss: f }) => {
+  var p;
+  const e = a(null), r = (p = t[t.length - 1]) == null ? void 0 : p.id;
+  n(() => {
+    h();
+  }, []), n(() => {
+    const o = e.current;
+    if (o) {
+      if (r === void 0) {
+        x(o);
+        return;
+      }
+      y(o);
+    }
+  }, [r]);
+  const s = r !== void 0;
+  return n(() => {
+    const o = e.current;
+    if (!(!o || !s))
+      return u(o);
+  }, [s]), c(
+    /* @__PURE__ */ i(
+      l,
+      {
+        hostRef: e,
+        hostStyle: T,
+        hostProps: v("toast"),
+        children: /* @__PURE__ */ i("div", { className: "flex flex-col items-center gap-[8px] px-[16px] pt-[24px]", children: t.map((o) => /* @__PURE__ */ i(
+          d,
+          {
+            toast: o,
+            duration: m,
+            onDismiss: f
+          },
+          o.id
+        )) })
+      }
+    ),
+    document.body
+  );
+};
+export {
+  w as default
+};
+//# sourceMappingURL=ToastHost.js.map

package/dist/components/ToastHost.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastHost.js","sources":["../../src/components/ToastHost.tsx"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport ToastItem from './ToastItem';\nimport { keepAboveOverlayStack } from './overlayBehaviour';\nimport { ensureToastStyles, overlayIdentity } from './portalOverlay';\nimport type { QueuedToast } from './toastTypes';\nimport { leaveTopLayer, raiseToTopLayer } from './topLayer';\n\ninterface ToastHostProps {\n    toasts: QueuedToast[];\n    duration: number;\n    onDismiss: (id: number) => void;\n}\n\nconst HOST_STYLE: React.CSSProperties = {\n    position: 'fixed',\n    top: 0,\n    left: 0,\n    right: 0,\n    pointerEvents: 'none',\n};\n\nconst ToastHost: React.FC<ToastHostProps> = ({ toasts, duration, onDismiss }) => {\n    const hostRef = useRef<HTMLDivElement | null>(null);\n    const newestId = toasts[toasts.length - 1]?.id;\n\n    useLayoutEffect(() => {\n        ensureToastStyles();\n    }, []);\n\n    useLayoutEffect(() => {\n        const host = hostRef.current;\n        if (!host) {\n            return;\n        }\n        if (newestId === undefined) {\n            leaveTopLayer(host);\n            return;\n        }\n        raiseToTopLayer(host);\n    }, [newestId]);\n\n    const visible = newestId !== undefined;\n    useLayoutEffect(() => {\n        const host = hostRef.current;\n        if (!host || !visible) {\n            return;\n        }\n        return keepAboveOverlayStack(host);\n    }, [visible]);\n\n    return createPortal(\n        <ShadowRootWrapper\n            hostRef={hostRef}\n            hostStyle={HOST_STYLE}\n            hostProps={overlayIdentity('toast')}\n        >\n            <div className=\"flex flex-col items-center gap-[8px] px-[16px] pt-[24px]\">\n                {toasts.map((toast) => (\n                    <ToastItem\n                        key={toast.id}\n                        toast={toast}\n                        duration={duration}\n                        onDismiss={onDismiss}\n                    />\n                ))}\n            </div>\n        </ShadowRootWrapper>,\n        document.body,\n    );\n};\n\nexport default ToastHost;\n"],"names":["HOST_STYLE","ToastHost","toasts","duration","onDismiss","hostRef","useRef","newestId","_a","useLayoutEffect","ensureToastStyles","host","leaveTopLayer","raiseToTopLayer","visible","keepAboveOverlayStack","createPortal","jsx","ShadowRootWrapper","overlayIdentity","toast","ToastItem"],"mappings":";;;;;;;;AAeA,MAAMA,IAAkC;AAAA,EACpC,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,eAAe;AACnB,GAEMC,IAAsC,CAAC,EAAE,QAAAC,GAAQ,UAAAC,GAAU,WAAAC,QAAgB;;AAC7E,QAAMC,IAAUC,EAA8B,IAAI,GAC5CC,KAAWC,IAAAN,EAAOA,EAAO,SAAS,CAAC,MAAxB,gBAAAM,EAA2B;AAE5C,EAAAC,EAAgB,MAAM;AAClB,IAAAC,EAAA;AAAA,EACJ,GAAG,CAAA,CAAE,GAELD,EAAgB,MAAM;AAClB,UAAME,IAAON,EAAQ;AACrB,QAAKM,GAGL;AAAA,UAAIJ,MAAa,QAAW;AACxB,QAAAK,EAAcD,CAAI;AAClB;AAAA,MACJ;AACA,MAAAE,EAAgBF,CAAI;AAAA;AAAA,EACxB,GAAG,CAACJ,CAAQ,CAAC;AAEb,QAAMO,IAAUP,MAAa;AAC7B,SAAAE,EAAgB,MAAM;AAClB,UAAME,IAAON,EAAQ;AACrB,QAAI,GAACM,KAAQ,CAACG;AAGd,aAAOC,EAAsBJ,CAAI;AAAA,EACrC,GAAG,CAACG,CAAO,CAAC,GAELE;AAAA,IACH,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,SAAAb;AAAA,QACA,WAAWL;AAAA,QACX,WAAWmB,EAAgB,OAAO;AAAA,QAElC,4BAAC,OAAA,EAAI,WAAU,4DACV,UAAAjB,EAAO,IAAI,CAACkB,MACT,gBAAAH;AAAA,UAACI;AAAA,UAAA;AAAA,YAEG,OAAAD;AAAA,YACA,UAAAjB;AAAA,YACA,WAAAC;AAAA,UAAA;AAAA,UAHKgB,EAAM;AAAA,QAAA,CAKlB,EAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,IAEJ,SAAS;AAAA,EAAA;AAEjB;"}

package/dist/components/ToastItem.js

@@ -0,0 +1,51 @@
+import { jsxs as x, jsx as l } from "react/jsx-runtime";
+import { useState as v, useRef as m, useEffect as p } from "react";
+import g from "./CustomIcons/CheckCircleFilled.js";
+import h from "./CustomIcons/ErrorCircleFilled.js";
+const f = {
+  success: "text-[var(--malachite-text-success,rgb(2,122,66))] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-text-success,rgb(2,122,66))_70%,var(--malachite-tooltip-foreground,rgb(255,255,255)))]",
+  error: "text-[var(--malachite-text-destructive,rgb(237,53,54))] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-text-destructive,rgb(237,53,54))_70%,var(--malachite-tooltip-foreground,rgb(255,255,255)))]"
+}, E = ({ toast: r, duration: u, onDismiss: a }) => {
+  const [i, n] = v(!1), s = m(null), o = m(u);
+  p(() => {
+    const e = s.current;
+    if (!e)
+      return;
+    const t = () => n(!0), c = () => n(!1);
+    return e.addEventListener("pointerenter", t), e.addEventListener("pointerleave", c), () => {
+      e.removeEventListener("pointerenter", t), e.removeEventListener("pointerleave", c);
+    };
+  }, []), p(() => {
+    if (i)
+      return;
+    const e = Date.now(), t = setTimeout(() => a(r.id), o.current);
+    return () => {
+      clearTimeout(t), o.current = Math.max(0, o.current - (Date.now() - e));
+    };
+  }, [i, a, r.id]);
+  const d = r.variant === "error" ? h : g;
+  return (
+    // aria-hidden: the provider's live regions are the announced copy.
+    /* @__PURE__ */ x(
+      "div",
+      {
+        ref: s,
+        "aria-hidden": "true",
+        "data-toast": r.variant,
+        onClick: (e) => {
+          e.stopPropagation(), a(r.id);
+        },
+        className: "pointer-events-auto flex max-w-[480px] cursor-pointer items-start gap-[8px] rounded-[var(--malachite-radius-xxxl,16px)] bg-[var(--malachite-tooltip-background,rgb(59,59,59))] px-[12px] py-[8px] text-[length:var(--malachite-font-size-medium,14px)] leading-[20px] text-[var(--malachite-tooltip-foreground,rgb(255,255,255))] [box-shadow:var(--malachite-tooltip-shadow,0px_0px_10px_0px_rgba(0,0,0,0.2))] animate-[malachite-toast-in_150ms_ease-out] motion-reduce:animate-none",
+        style: { overflowWrap: "anywhere" },
+        children: [
+          /* @__PURE__ */ l(d, { size: 16, className: `mt-[2px] shrink-0 ${f[r.variant]}` }),
+          /* @__PURE__ */ l("span", { children: r.message })
+        ]
+      }
+    )
+  );
+};
+export {
+  E as default
+};
+//# sourceMappingURL=ToastItem.js.map

package/dist/components/ToastItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastItem.js","sources":["../../src/components/ToastItem.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport CheckCircleFilled from './CustomIcons/CheckCircleFilled';\nimport ErrorCircleFilled from './CustomIcons/ErrorCircleFilled';\nimport type { QueuedToast, ToastVariant } from './toastTypes';\n\n// The plain status tokens fall under 3:1 on the pill; the mix clears it in both themes.\nconst ICON_COLOR: Record<ToastVariant, string> = {\n    success:\n        'text-[var(--malachite-text-success,rgb(2,122,66))] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-text-success,rgb(2,122,66))_70%,var(--malachite-tooltip-foreground,rgb(255,255,255)))]',\n    error: 'text-[var(--malachite-text-destructive,rgb(237,53,54))] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-text-destructive,rgb(237,53,54))_70%,var(--malachite-tooltip-foreground,rgb(255,255,255)))]',\n};\n\ninterface ToastItemProps {\n    toast: QueuedToast;\n    duration: number;\n    onDismiss: (id: number) => void;\n}\n\nconst ToastItem: React.FC<ToastItemProps> = ({ toast, duration, onDismiss }) => {\n    const [paused, setPaused] = useState(false);\n    const ref = useRef<HTMLDivElement>(null);\n    const remaining = useRef(duration);\n\n    // React's onPointerEnter never fires across this portal's shadow boundary.\n    useEffect(() => {\n        const el = ref.current;\n        if (!el) {\n            return;\n        }\n        const pause = () => setPaused(true);\n        const resume = () => setPaused(false);\n        el.addEventListener('pointerenter', pause);\n        el.addEventListener('pointerleave', resume);\n        return () => {\n            el.removeEventListener('pointerenter', pause);\n            el.removeEventListener('pointerleave', resume);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (paused) {\n            return;\n        }\n        const startedAt = Date.now();\n        const timeout = setTimeout(() => onDismiss(toast.id), remaining.current);\n        return () => {\n            clearTimeout(timeout);\n            remaining.current = Math.max(0, remaining.current - (Date.now() - startedAt));\n        };\n    }, [paused, onDismiss, toast.id]);\n\n    const Icon = toast.variant === 'error' ? ErrorCircleFilled : CheckCircleFilled;\n\n    return (\n        // aria-hidden: the provider's live regions are the announced copy.\n        <div\n            ref={ref}\n            aria-hidden=\"true\"\n            data-toast={toast.variant}\n            onClick={(event) => {\n                // A portal bubbles through the React tree, to the provider's ancestors.\n                event.stopPropagation();\n                onDismiss(toast.id);\n            }}\n            className=\"pointer-events-auto flex max-w-[480px] cursor-pointer items-start gap-[8px] rounded-[var(--malachite-radius-xxxl,16px)] bg-[var(--malachite-tooltip-background,rgb(59,59,59))] px-[12px] py-[8px] text-[length:var(--malachite-font-size-medium,14px)] leading-[20px] text-[var(--malachite-tooltip-foreground,rgb(255,255,255))] [box-shadow:var(--malachite-tooltip-shadow,0px_0px_10px_0px_rgba(0,0,0,0.2))] animate-[malachite-toast-in_150ms_ease-out] motion-reduce:animate-none\"\n            style={{ overflowWrap: 'anywhere' }}\n        >\n            <Icon size={16} className={`mt-[2px] shrink-0 ${ICON_COLOR[toast.variant]}`} />\n            <span>{toast.message}</span>\n        </div>\n    );\n};\n\nexport default ToastItem;\n"],"names":["ICON_COLOR","ToastItem","toast","duration","onDismiss","paused","setPaused","useState","ref","useRef","remaining","useEffect","el","pause","resume","startedAt","timeout","Icon","ErrorCircleFilled","CheckCircleFilled","jsxs","event","jsx"],"mappings":";;;;AAMA,MAAMA,IAA2C;AAAA,EAC7C,SACI;AAAA,EACJ,OAAO;AACX,GAQMC,IAAsC,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,WAAAC,QAAgB;AAC5E,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAMC,EAAuB,IAAI,GACjCC,IAAYD,EAAON,CAAQ;AAGjC,EAAAQ,EAAU,MAAM;AACZ,UAAMC,IAAKJ,EAAI;AACf,QAAI,CAACI;AACD;AAEJ,UAAMC,IAAQ,MAAMP,EAAU,EAAI,GAC5BQ,IAAS,MAAMR,EAAU,EAAK;AACpC,WAAAM,EAAG,iBAAiB,gBAAgBC,CAAK,GACzCD,EAAG,iBAAiB,gBAAgBE,CAAM,GACnC,MAAM;AACT,MAAAF,EAAG,oBAAoB,gBAAgBC,CAAK,GAC5CD,EAAG,oBAAoB,gBAAgBE,CAAM;AAAA,IACjD;AAAA,EACJ,GAAG,CAAA,CAAE,GAELH,EAAU,MAAM;AACZ,QAAIN;AACA;AAEJ,UAAMU,IAAY,KAAK,IAAA,GACjBC,IAAU,WAAW,MAAMZ,EAAUF,EAAM,EAAE,GAAGQ,EAAU,OAAO;AACvE,WAAO,MAAM;AACT,mBAAaM,CAAO,GACpBN,EAAU,UAAU,KAAK,IAAI,GAAGA,EAAU,WAAW,KAAK,IAAA,IAAQK,EAAU;AAAA,IAChF;AAAA,EACJ,GAAG,CAACV,GAAQD,GAAWF,EAAM,EAAE,CAAC;AAEhC,QAAMe,IAAOf,EAAM,YAAY,UAAUgB,IAAoBC;AAE7D;AAAA;AAAA,IAEI,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAZ;AAAA,QACA,eAAY;AAAA,QACZ,cAAYN,EAAM;AAAA,QAClB,SAAS,CAACmB,MAAU;AAEhB,UAAAA,EAAM,gBAAA,GACNjB,EAAUF,EAAM,EAAE;AAAA,QACtB;AAAA,QACA,WAAU;AAAA,QACV,OAAO,EAAE,cAAc,WAAA;AAAA,QAEvB,UAAA;AAAA,UAAA,gBAAAoB,EAACL,GAAA,EAAK,MAAM,IAAI,WAAW,qBAAqBjB,EAAWE,EAAM,OAAO,CAAC,GAAA,CAAI;AAAA,UAC7E,gBAAAoB,EAAC,QAAA,EAAM,UAAApB,EAAM,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA;AAGjC;"}

package/dist/components/ToastProvider.js

@@ -0,0 +1,54 @@
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { useState as i, useRef as v, useCallback as u, useEffect as D, useMemo as E } from "react";
+import _ from "./ToastHost.js";
+import { ToastContext as x } from "./toastContext.js";
+import { TOAST_ANNOUNCEMENT_LIFETIME_MS as I, TOAST_DEFAULT_DURATION_MS as M } from "./toastTypes.js";
+const N = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  padding: 0,
+  border: 0,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  clipPath: "inset(50%)",
+  whiteSpace: "nowrap"
+}, C = ({
+  children: p,
+  duration: f = M
+}) => {
+  const [h, r] = i([]), [a, c] = i(
+    []
+  ), [T, w] = i(!1), l = v(0), d = u(({ message: t, variant: s = "success" }) => {
+    l.current += 1;
+    const e = { id: l.current, message: t, variant: s };
+    r((o) => [...o, e].slice(-3)), c((o) => [...o, { ...e, announcedAt: Date.now() }]), w(!0);
+  }, []), A = u((t) => {
+    r((s) => s.filter((e) => e.id !== t));
+  }, []);
+  D(() => {
+    const t = a[0];
+    if (!t)
+      return;
+    const s = setTimeout(
+      () => c((e) => e.filter((o) => o.id !== t.id)),
+      Math.max(0, t.announcedAt + I - Date.now())
+    );
+    return () => clearTimeout(s);
+  }, [a]);
+  const S = E(() => ({ show: d }), [d]);
+  return /* @__PURE__ */ m(x.Provider, { value: S, children: [
+    p,
+    /* @__PURE__ */ m("div", { style: N, children: [
+      /* @__PURE__ */ n("span", { role: "status", "aria-atomic": "false", children: a.filter((t) => t.variant === "success").map((t) => /* @__PURE__ */ n("span", { children: t.message }, t.id)) }),
+      /* @__PURE__ */ n("span", { role: "alert", "aria-atomic": "false", children: a.filter((t) => t.variant === "error").map((t) => /* @__PURE__ */ n("span", { children: t.message }, t.id)) })
+    ] }),
+    T && /* @__PURE__ */ n(_, { toasts: h, duration: f, onDismiss: A })
+  ] });
+};
+export {
+  C as ToastProvider,
+  C as default
+};
+//# sourceMappingURL=ToastProvider.js.map

package/dist/components/ToastProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.js","sources":["../../src/components/ToastProvider.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport ToastHost from './ToastHost';\nimport { ToastContext } from './toastContext';\nimport {\n    type QueuedToast,\n    TOAST_ANNOUNCEMENT_LIFETIME_MS,\n    TOAST_DEFAULT_DURATION_MS,\n    TOAST_MAX_VISIBLE,\n    type ToastOptions,\n} from './toastTypes';\n\n// Outside any shadow root, so Tailwind's sr-only is not available.\nconst VISUALLY_HIDDEN: React.CSSProperties = {\n    position: 'absolute',\n    width: 1,\n    height: 1,\n    margin: -1,\n    padding: 0,\n    border: 0,\n    overflow: 'hidden',\n    clip: 'rect(0 0 0 0)',\n    clipPath: 'inset(50%)',\n    whiteSpace: 'nowrap',\n};\n\nexport interface ToastProviderProps {\n    children?: React.ReactNode;\n    /** How long each toast stays, in ms. Defaults to 3000. */\n    duration?: number;\n}\n\nconst ToastProvider: React.FC<ToastProviderProps> = ({\n    children,\n    duration = TOAST_DEFAULT_DURATION_MS,\n}) => {\n    const [toasts, setToasts] = useState<QueuedToast[]>([]);\n    const [announcements, setAnnouncements] = useState<(QueuedToast & { announcedAt: number })[]>(\n        [],\n    );\n    const [hasShown, setHasShown] = useState(false);\n    const nextId = useRef(0);\n\n    const show = useCallback(({ message, variant = 'success' }: ToastOptions) => {\n        nextId.current += 1;\n        const toast: QueuedToast = { id: nextId.current, message, variant };\n        setToasts((previous) => [...previous, toast].slice(-TOAST_MAX_VISIBLE));\n        setAnnouncements((previous) => [...previous, { ...toast, announcedAt: Date.now() }]);\n        setHasShown(true);\n    }, []);\n\n    const dismiss = useCallback((id: number) => {\n        setToasts((previous) => previous.filter((toast) => toast.id !== id));\n    }, []);\n\n    useEffect(() => {\n        const oldest = announcements[0];\n        if (!oldest) {\n            return;\n        }\n        const timeout = setTimeout(\n            () =>\n                setAnnouncements((previous) => previous.filter((entry) => entry.id !== oldest.id)),\n            Math.max(0, oldest.announcedAt + TOAST_ANNOUNCEMENT_LIFETIME_MS - Date.now()),\n        );\n        return () => clearTimeout(timeout);\n    }, [announcements]);\n\n    const api = useMemo(() => ({ show }), [show]);\n\n    return (\n        <ToastContext.Provider value={api}>\n            {children}\n            {/* A region added with its text is not announced; status and alert default to atomic. */}\n            <div style={VISUALLY_HIDDEN}>\n                <span role=\"status\" aria-atomic=\"false\">\n                    {announcements\n                        .filter((entry) => entry.variant === 'success')\n                        .map((entry) => (\n                            <span key={entry.id}>{entry.message}</span>\n                        ))}\n                </span>\n                <span role=\"alert\" aria-atomic=\"false\">\n                    {announcements\n                        .filter((entry) => entry.variant === 'error')\n                        .map((entry) => (\n                            <span key={entry.id}>{entry.message}</span>\n                        ))}\n                </span>\n            </div>\n            {hasShown && <ToastHost toasts={toasts} duration={duration} onDismiss={dismiss} />}\n        </ToastContext.Provider>\n    );\n};\n\nexport { ToastProvider };\nexport default ToastProvider;\n"],"names":["VISUALLY_HIDDEN","ToastProvider","children","duration","TOAST_DEFAULT_DURATION_MS","toasts","setToasts","useState","announcements","setAnnouncements","hasShown","setHasShown","nextId","useRef","show","useCallback","message","variant","toast","previous","dismiss","id","useEffect","oldest","timeout","entry","TOAST_ANNOUNCEMENT_LIFETIME_MS","api","useMemo","jsxs","ToastContext","jsx","ToastHost"],"mappings":";;;;;AAYA,MAAMA,IAAuC;AAAA,EACzC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AAAA,EACV,YAAY;AAChB,GAQMC,IAA8C,CAAC;AAAA,EACjD,UAAAC;AAAA,EACA,UAAAC,IAAWC;AACf,MAAM;AACF,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAwB,CAAA,CAAE,GAChD,CAACC,GAAeC,CAAgB,IAAIF;AAAA,IACtC,CAAA;AAAA,EAAC,GAEC,CAACG,GAAUC,CAAW,IAAIJ,EAAS,EAAK,GACxCK,IAASC,EAAO,CAAC,GAEjBC,IAAOC,EAAY,CAAC,EAAE,SAAAC,GAAS,SAAAC,IAAU,gBAA8B;AACzE,IAAAL,EAAO,WAAW;AAClB,UAAMM,IAAqB,EAAE,IAAIN,EAAO,SAAS,SAAAI,GAAS,SAAAC,EAAA;AAC1D,IAAAX,EAAU,CAACa,MAAa,CAAC,GAAGA,GAAUD,CAAK,EAAE,MAAM,EAAkB,CAAC,GACtET,EAAiB,CAACU,MAAa,CAAC,GAAGA,GAAU,EAAE,GAAGD,GAAO,aAAa,KAAK,IAAA,EAAI,CAAG,CAAC,GACnFP,EAAY,EAAI;AAAA,EACpB,GAAG,CAAA,CAAE,GAECS,IAAUL,EAAY,CAACM,MAAe;AACxC,IAAAf,EAAU,CAACa,MAAaA,EAAS,OAAO,CAACD,MAAUA,EAAM,OAAOG,CAAE,CAAC;AAAA,EACvE,GAAG,CAAA,CAAE;AAEL,EAAAC,EAAU,MAAM;AACZ,UAAMC,IAASf,EAAc,CAAC;AAC9B,QAAI,CAACe;AACD;AAEJ,UAAMC,IAAU;AAAA,MACZ,MACIf,EAAiB,CAACU,MAAaA,EAAS,OAAO,CAACM,MAAUA,EAAM,OAAOF,EAAO,EAAE,CAAC;AAAA,MACrF,KAAK,IAAI,GAAGA,EAAO,cAAcG,IAAiC,KAAK,KAAK;AAAA,IAAA;AAEhF,WAAO,MAAM,aAAaF,CAAO;AAAA,EACrC,GAAG,CAAChB,CAAa,CAAC;AAElB,QAAMmB,IAAMC,EAAQ,OAAO,EAAE,MAAAd,MAAS,CAACA,CAAI,CAAC;AAE5C,SACI,gBAAAe,EAACC,EAAa,UAAb,EAAsB,OAAOH,GACzB,UAAA;AAAA,IAAAzB;AAAA,IAED,gBAAA2B,EAAC,OAAA,EAAI,OAAO7B,GACR,UAAA;AAAA,MAAA,gBAAA+B,EAAC,QAAA,EAAK,MAAK,UAAS,eAAY,SAC3B,UAAAvB,EACI,OAAO,CAACiB,MAAUA,EAAM,YAAY,SAAS,EAC7C,IAAI,CAACA,MACF,gBAAAM,EAAC,QAAA,EAAqB,YAAM,QAAA,GAAjBN,EAAM,EAAmB,CACvC,EAAA,CACT;AAAA,MACA,gBAAAM,EAAC,QAAA,EAAK,MAAK,SAAQ,eAAY,SAC1B,UAAAvB,EACI,OAAO,CAACiB,MAAUA,EAAM,YAAY,OAAO,EAC3C,IAAI,CAACA,MACF,gBAAAM,EAAC,QAAA,EAAqB,YAAM,QAAA,GAAjBN,EAAM,EAAmB,CACvC,EAAA,CACT;AAAA,IAAA,GACJ;AAAA,IACCf,KAAY,gBAAAqB,EAACC,GAAA,EAAU,QAAA3B,GAAgB,UAAAF,GAAoB,WAAWiB,EAAA,CAAS;AAAA,EAAA,GACpF;AAER;"}

package/dist/components/overlayBehaviour.js

@@ -1,119 +1,123 @@
 import { useSyncExternalStore as b, useRef as f, useCallback as N, useEffect as E, useLayoutEffect as m } from "react";
-import { getDeepActiveElement as k, containsComposed as F } from "./activeElement.js";
-import { pushEscapeLayer as K } from "./escapeLayers.js";
-import { FOCUS_RING as W } from "./focusRing.js";
-import { nextLayerTicket as V, popupLayerHolding as Y } from "./overlayLayers.js";
-import { useOwnedByPopover as j } from "./popoverTree.js";
-import { OVERLAY_Z_BASE as R, ensureElevatedOverlayStyles as Z } from "./portalOverlay.js";
-import { lockBodyScroll as $ } from "./scrollLock.js";
-import { leaveTopLayer as U, raiseToTopLayer as q } from "./topLayer.js";
-const Ot = `flex shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-[4px] text-[var(--malachite-text-secondary)] hover:text-[var(--malachite-text-primary)] transition-colors ${W}`, J = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, [tabindex]:not([tabindex="-1"])', Q = (t) => t.assignedSlot ?? t.parentElement ?? (t.parentNode instanceof ShadowRoot ? t.parentNode.host : null), X = (t) => Array.from(t.children).find((o) => o.tagName === "SUMMARY"), tt = () => {
-  const t = /* @__PURE__ */ new Map(), o = (n) => {
-    const e = t.get(n);
-    if (e)
-      return e;
-    const { display: a, visibility: r, contentVisibility: s } = getComputedStyle(n), c = Q(n), d = c ? o(c) : null, h = c instanceof HTMLDetailsElement && !c.open && X(c) !== n, l = {
-      hidden: n.hasAttribute("inert") || a === "none" || h || !!(d && (d.hidden || d.hidesContent)),
+import { getDeepActiveElement as R, containsComposed as B } from "./activeElement.js";
+import { pushEscapeLayer as V } from "./escapeLayers.js";
+import { FOCUS_RING as Y } from "./focusRing.js";
+import { nextLayerTicket as j, popupLayerHolding as Z } from "./overlayLayers.js";
+import { useOwnedByPopover as $ } from "./popoverTree.js";
+import { OVERLAY_Z_BASE as _, ensureElevatedOverlayStyles as q } from "./portalOverlay.js";
+import { lockBodyScroll as J } from "./scrollLock.js";
+import { leaveTopLayer as G, raiseToTopLayer as M } from "./topLayer.js";
+const Tt = `flex shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-[4px] text-[var(--malachite-text-secondary)] hover:text-[var(--malachite-text-primary)] transition-colors ${Y}`, Q = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, [tabindex]:not([tabindex="-1"])', X = (t) => t.assignedSlot ?? t.parentElement ?? (t.parentNode instanceof ShadowRoot ? t.parentNode.host : null), tt = (t) => Array.from(t.children).find((o) => o.tagName === "SUMMARY"), et = () => {
+  const t = /* @__PURE__ */ new Map(), o = (e) => {
+    const n = t.get(e);
+    if (n)
+      return n;
+    const { display: a, visibility: r, contentVisibility: s } = getComputedStyle(e), c = X(e), d = c ? o(c) : null, h = c instanceof HTMLDetailsElement && !c.open && tt(c) !== e, l = {
+      hidden: e.hasAttribute("inert") || a === "none" || h || !!(d && (d.hidden || d.hidesContent)),
       invisible: r === "hidden" || r === "collapse",
       hidesContent: s === "hidden"
     };
-    return t.set(n, l), l;
+    return t.set(e, l), l;
   };
   return o;
 }, nt = (t, o) => {
   if (t.tabIndex < 0 || t.matches(":disabled"))
     return !1;
-  const { hidden: n, invisible: e } = o(t);
-  return !n && !e;
-}, _ = (t) => t instanceof HTMLInputElement && t.type === "radio" && t.name !== "", et = (t, o) => {
-  if (!_(t))
+  const { hidden: e, invisible: n } = o(t);
+  return !e && !n;
+}, v = (t) => t instanceof HTMLInputElement && t.type === "radio" && t.name !== "", ot = (t, o) => {
+  if (!v(t))
     return !1;
-  const n = o.filter(
-    (e) => _(e) && e.name === t.name && e.form === t.form
+  const e = o.filter(
+    (n) => v(n) && n.name === t.name && n.form === t.form
   );
-  return (n.find((e) => e.checked) ?? n[0]) !== t;
-}, ot = (t, o) => t.map((n, e) => ({ element: n, index: e, tabIndex: o(n) })).sort((n, e) => n.tabIndex !== e.tabIndex ? n.tabIndex === 0 ? 1 : e.tabIndex === 0 ? -1 : n.tabIndex - e.tabIndex : n.index - e.index).map(({ element: n }) => n), x = (t) => t instanceof HTMLSlotElement && t.getRootNode() instanceof ShadowRoot, I = (t, o = []) => {
-  for (const n of t)
-    o.push(n), !n.shadowRoot && !x(n) && I(n.children, o);
+  return (e.find((n) => n.checked) ?? e[0]) !== t;
+}, rt = (t, o) => t.map((e, n) => ({ element: e, index: n, tabIndex: o(e) })).sort((e, n) => e.tabIndex !== n.tabIndex ? e.tabIndex === 0 ? 1 : n.tabIndex === 0 ? -1 : e.tabIndex - n.tabIndex : e.index - n.index).map(({ element: e }) => e), x = (t) => t instanceof HTMLSlotElement && t.getRootNode() instanceof ShadowRoot, O = (t, o = []) => {
+  for (const e of t)
+    o.push(e), !e.shadowRoot && !x(e) && O(e.children, o);
   return o;
 }, L = (t, o) => {
-  const n = t.filter(
-    (r) => r instanceof HTMLElement && r.matches(J) && nt(r, o)
-  ), e = new Set(
-    n.filter((r) => !et(r, n))
+  const e = t.filter(
+    (r) => r instanceof HTMLElement && r.matches(Q) && nt(r, o)
+  ), n = new Set(
+    e.filter((r) => !ot(r, e))
   ), a = t.filter(
-    (r) => e.has(r) || r.shadowRoot || x(r)
+    (r) => n.has(r) || r.shadowRoot || x(r)
   );
-  return ot(
+  return rt(
     a,
-    (r) => e.has(r) ? r.tabIndex : 0
+    (r) => n.has(r) ? r.tabIndex : 0
   ).flatMap((r) => {
     if (x(r))
-      return L(I(r.assignedElements({ flatten: !0 })), o);
+      return L(O(r.assignedElements({ flatten: !0 })), o);
     const s = r.shadowRoot;
     if (s && Number.parseInt(r.getAttribute("tabindex") ?? "", 10) < 0)
       return [];
-    const c = e.has(r) && !(s != null && s.delegatesFocus) ? [r] : [];
-    return s ? [...c, ...L(I(s.children), o)] : c;
+    const c = n.has(r) && !(s != null && s.delegatesFocus) ? [r] : [];
+    return s ? [...c, ...L(O(s.children), o)] : c;
   });
-}, C = (t) => L(I(t.children), tt()), rt = (t, o) => {
-  const n = (r) => {
+}, C = (t) => L(O(t.children), et()), st = (t, o) => {
+  const e = (r) => {
     const s = [r];
     for (let c = r.getRootNode(); c instanceof ShadowRoot; c = c.host.getRootNode())
       s.push(c.host);
     return s;
-  }, e = n(t), a = n(o);
-  for (const r of e) {
+  }, n = e(t), a = e(o);
+  for (const r of n) {
     const s = a.find((c) => c.getRootNode() === r.getRootNode());
     if (s)
       return r !== s ? r.compareDocumentPosition(s) : r === t ? Node.DOCUMENT_POSITION_FOLLOWING : Node.DOCUMENT_POSITION_PRECEDING;
   }
   return Node.DOCUMENT_POSITION_DISCONNECTED;
-}, st = (t) => C(t)[0] ?? null, u = [], p = /* @__PURE__ */ new Set(), w = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map(), D = /* @__PURE__ */ new Set(), ct = () => {
+}, ct = (t) => C(t)[0] ?? null, u = [], p = /* @__PURE__ */ new Set(), k = /* @__PURE__ */ new Map(), w = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Set(), at = () => {
 };
 let y = [];
-const at = () => {
-  const t = p.size ? u.map((n) => {
-    var e;
-    return (e = w.get(n)) == null ? void 0 : e();
-  }).filter((n) => !!n) : [];
-  if (t.length === y.length && t.every((n, e) => n === y[e]))
+const D = /* @__PURE__ */ new Set(), it = () => {
+  const t = p.size ? u.map((e) => {
+    var n;
+    return (n = k.get(e)) == null ? void 0 : n();
+  }).filter((e) => !!e) : [];
+  if (t.length === y.length && t.every((e, n) => e === y[n]))
     return;
   const o = new Set(t);
-  for (const n of y)
-    o.has(n) || U(n);
-  for (const n of t)
-    q(n);
+  for (const e of y)
+    o.has(e) || G(e);
+  for (const e of t)
+    M(e);
   y = t;
-}, O = () => {
-  for (const t of D)
-    t();
-}, B = (t) => (D.add(t), () => {
+  for (const e of D)
+    M(e);
+}, Nt = (t) => (D.add(t), () => {
   D.delete(t);
-}), M = (t, o, n, e) => {
-  const a = e[0], r = e[e.length - 1], s = F(n, o);
-  if (o && s && o !== n && !e.includes(o)) {
+}), I = () => {
+  for (const t of g)
+    t();
+}, P = (t) => (g.add(t), () => {
+  g.delete(t);
+}), A = (t, o, e, n) => {
+  const a = n[0], r = n[n.length - 1], s = B(e, o);
+  if (o && s && o !== e && !n.includes(o)) {
     const c = t.shiftKey ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;
-    e.some((d) => rt(o, d) & c) || (t.preventDefault(), (t.shiftKey ? r : a).focus());
+    n.some((d) => st(o, d) & c) || (t.preventDefault(), (t.shiftKey ? r : a).focus());
     return;
   }
-  t.shiftKey ? (!s || o === a || o === n) && (t.preventDefault(), r.focus()) : (!s || o === r || o === n) && (t.preventDefault(), a.focus());
-}, v = (t) => {
+  t.shiftKey ? (!s || o === a || o === e) && (t.preventDefault(), r.focus()) : (!s || o === r || o === e) && (t.preventDefault(), a.focus());
+}, F = (t) => {
   if (t.key !== "Tab" || t.defaultPrevented)
     return;
-  let o = null, n = 0;
+  let o = null, e = 0;
   for (let s = u.length - 1; s >= 0 && !o; s -= 1)
-    o = u[s](), o && (n = g.get(u[s]) ?? 0);
+    o = u[s](), o && (e = w.get(u[s]) ?? 0);
   if (!o)
     return;
-  const e = k(), a = e ? Y(e) : null;
-  if (e && a && a.ticket > n) {
+  const n = R(), a = n ? Z(n) : null;
+  if (n && a && a.ticket > e) {
     const s = a.popup.shadowRoot ?? a.popup, c = C(s);
     if (c.length === 0) {
       t.preventDefault();
       return;
     }
-    M(t, e, s, c);
+    A(t, n, s, c);
     return;
   }
   const r = C(o);
@@ -121,35 +125,35 @@ const at = () => {
     t.preventDefault(), o.focus();
     return;
   }
-  M(t, e, o, r);
-}, it = (t, o) => (u.length === 0 && document.addEventListener("keydown", v), u.push(t), w.set(t, o), g.set(t, V()), O(), () => {
-  const n = u.lastIndexOf(t);
-  n !== -1 && u.splice(n, 1), p.delete(t), w.delete(t), g.delete(t);
-  const e = o();
-  e && U(e), u.length === 0 && document.removeEventListener("keydown", v), O();
-}), Tt = () => b(
-  B,
+  A(t, n, o, r);
+}, ut = (t, o) => (u.length === 0 && document.addEventListener("keydown", F), u.push(t), k.set(t, o), w.set(t, j()), I(), () => {
+  const e = u.lastIndexOf(t);
+  e !== -1 && u.splice(e, 1), p.delete(t), k.delete(t), w.delete(t);
+  const n = o();
+  n && G(n), u.length === 0 && document.removeEventListener("keydown", F), I();
+}), Et = () => b(
+  P,
   () => u.length > 0,
   () => !1
-), A = (t, o) => {
+), U = (t, o) => {
   if (o === "content") {
-    const n = k();
-    if (F(t, n))
+    const e = R();
+    if (B(t, e))
       return;
-    (st(t) ?? t).focus();
+    (ct(t) ?? t).focus();
     return;
   }
   t.focus();
-}, Nt = ({
+}, mt = ({
   open: t,
   onClose: o,
-  elevated: n = !1,
-  hostRef: e,
+  elevated: e = !1,
+  hostRef: n,
   initialFocus: a = "panel"
 }) => {
   const r = f(null), s = f(() => r.current).current;
-  j(
-    N(() => (e == null ? void 0 : e.current) ?? r.current, [e]),
+  $(
+    N(() => (n == null ? void 0 : n.current) ?? r.current, [n]),
     t
   );
   const c = f(null), d = f(null), h = f(a), l = f(o);
@@ -157,7 +161,7 @@ const at = () => {
     l.current = o;
   }, [o]), E(() => {
     if (t)
-      return c.current = k(), () => {
+      return c.current = R(), () => {
         const i = c.current;
         c.current = null, i != null && i.isConnected && i.focus();
       };
@@ -165,20 +169,20 @@ const at = () => {
     if (!t)
       return;
     d.current = s;
-    const i = K(() => l.current()), H = $(), z = it(s, () => (e == null ? void 0 : e.current) ?? null);
-    return r.current && A(r.current, h.current), () => {
-      d.current = null, z(), i(), H();
+    const i = V(() => l.current()), K = J(), W = ut(s, () => (n == null ? void 0 : n.current) ?? null);
+    return r.current && U(r.current, h.current), () => {
+      d.current = null, W(), i(), K();
     };
-  }, [t, e, s]), m(() => {
-    if (!(!t || !n))
-      return p.add(s), O(), () => {
-        p.delete(s), O();
+  }, [t, n, s]), m(() => {
+    if (!(!t || !e))
+      return p.add(s), I(), () => {
+        p.delete(s), I();
       };
-  }, [t, n, s]);
+  }, [t, e, s]);
   const T = N(
-    (i) => t ? B(i) : ct,
+    (i) => t ? P(i) : at,
     [t]
-  ), G = b(
+  ), H = b(
     T,
     // Gated on `open` so an overlay fading out stops claiming modal. Before it registers
     // it is the one about to go on top, or aria-modal would drop for a frame on open.
@@ -186,29 +190,30 @@ const at = () => {
     () => !0
   ), S = b(
     T,
-    () => t && (n || p.size > 0),
+    () => t && (e || p.size > 0),
     () => !1
-  ), P = b(
+  ), z = b(
     T,
     () => {
       const i = d.current;
-      return R + (t && i ? Math.max(0, u.indexOf(i)) : 0);
+      return _ + (t && i ? Math.max(0, u.indexOf(i)) : 0);
     },
-    () => R
+    () => _
   );
   return m(() => {
-    S && Z();
+    S && q();
   }, [S]), m(() => {
-    at();
+    it();
   }), { ref: N((i) => {
-    r.current = i, i && A(i, h.current);
-  }, []), isTopmost: G, zIndex: S ? void 0 : P, elevated: S };
+    r.current = i, i && U(i, h.current);
+  }, []), isTopmost: H, zIndex: S ? void 0 : z, elevated: S };
 };
 export {
-  J as FOCUSABLE_SELECTOR,
-  Ot as OVERLAY_ICON_BUTTON_CLASSES,
-  st as firstTabStopIn,
-  Tt as useHasOpenOverlay,
-  Nt as useOverlayBehaviour
+  Q as FOCUSABLE_SELECTOR,
+  Tt as OVERLAY_ICON_BUTTON_CLASSES,
+  ct as firstTabStopIn,
+  Nt as keepAboveOverlayStack,
+  Et as useHasOpenOverlay,
+  mt as useOverlayBehaviour
 };
 //# sourceMappingURL=overlayBehaviour.js.map