@boost33/ui 0.8.1 → 0.9.0

package/dist/components/Backdrop/BackdropLists.module.css.js

@@ -0,0 +1,114 @@
+const t = "_srOnly_1mwtw_6", o = "_list_1mwtw_17", w = "_listCard_1mwtw_30", _ = "_listInCard_1mwtw_34", e = "_row_1mwtw_38", r = "_rowInteractive_1mwtw_54", n = "_rowSelected_1mwtw_58", c = "_rowLeading_1mwtw_72", a = "_rowText_1mwtw_78", l = "_rowTitle_1mwtw_86", s = "_rowDescription_1mwtw_87", i = "_rowTarget_1mwtw_107", m = "_rowMeta_1mwtw_141", v = "_rowMetaUnread_1mwtw_153", k = "_rowUnread_1mwtw_158", d = "_rowStatus_1mwtw_166", u = "_rowValue_1mwtw_171", b = "_rowFigure_1mwtw_180", C = "_rowValueCaption_1mwtw_188", p = "_rowAction_1mwtw_195", g = "_rowChevron_1mwtw_200", S = "_kv_1mwtw_208", I = "_kvOpen_1mwtw_216", T = "_kvRow_1mwtw_220", h = "_kvLabel_1mwtw_230", y = "_kvValue_1mwtw_234", L = "_kvFigure_1mwtw_242", V = "_kvCaption_1mwtw_247", A = "_kvInline_1mwtw_254", B = "_kvStacked_1mwtw_271", F = "_table_1mwtw_288", M = "_caption_1mwtw_297", O = "_selectCol_1mwtw_305", U = "_th_1mwtw_309", x = "_td_1mwtw_310", D = "_tableSticky_1mwtw_337", E = "_alignEnd_1mwtw_344", R = "_sortButton_1mwtw_353", f = "_sortButtonActive_1mwtw_368", j = "_sortIcon_1mwtw_377", q = "_numeric_1mwtw_390", z = "_selectCell_1mwtw_395", G = "_tr_1mwtw_403", H = "_tableInteractive_1mwtw_407", J = "_trSelected_1mwtw_411", K = "_cellTarget_1mwtw_432", N = "_skeleton_1mwtw_460", P = "_emptyCell_1mwtw_476", Q = "_toolbar_1mwtw_482", W = "_toolbarLead_1mwtw_491", X = "_toolbarTrail_1mwtw_492", Y = "_toolbarChips_1mwtw_493", Z = "_toolbarSearch_1mwtw_513", $ = "_toolbarCount_1mwtw_518", tt = {
+  srOnly: t,
+  list: o,
+  listCard: w,
+  listInCard: _,
+  row: e,
+  rowInteractive: r,
+  rowSelected: n,
+  rowLeading: c,
+  rowText: a,
+  rowTitle: l,
+  rowDescription: s,
+  rowTarget: i,
+  rowMeta: m,
+  rowMetaUnread: v,
+  rowUnread: k,
+  rowStatus: d,
+  rowValue: u,
+  rowFigure: b,
+  rowValueCaption: C,
+  rowAction: p,
+  rowChevron: g,
+  kv: S,
+  kvOpen: I,
+  kvRow: T,
+  kvLabel: h,
+  kvValue: y,
+  kvFigure: L,
+  kvCaption: V,
+  kvInline: A,
+  kvStacked: B,
+  table: F,
+  caption: M,
+  selectCol: O,
+  th: U,
+  td: x,
+  tableSticky: D,
+  alignEnd: E,
+  sortButton: R,
+  sortButtonActive: f,
+  sortIcon: j,
+  numeric: q,
+  selectCell: z,
+  tr: G,
+  tableInteractive: H,
+  trSelected: J,
+  cellTarget: K,
+  skeleton: N,
+  emptyCell: P,
+  toolbar: Q,
+  toolbarLead: W,
+  toolbarTrail: X,
+  toolbarChips: Y,
+  toolbarSearch: Z,
+  toolbarCount: $
+};
+export {
+  E as alignEnd,
+  M as caption,
+  K as cellTarget,
+  tt as default,
+  P as emptyCell,
+  S as kv,
+  V as kvCaption,
+  L as kvFigure,
+  A as kvInline,
+  h as kvLabel,
+  I as kvOpen,
+  T as kvRow,
+  B as kvStacked,
+  y as kvValue,
+  o as list,
+  w as listCard,
+  _ as listInCard,
+  q as numeric,
+  e as row,
+  p as rowAction,
+  g as rowChevron,
+  s as rowDescription,
+  b as rowFigure,
+  r as rowInteractive,
+  c as rowLeading,
+  m as rowMeta,
+  v as rowMetaUnread,
+  n as rowSelected,
+  d as rowStatus,
+  i as rowTarget,
+  a as rowText,
+  l as rowTitle,
+  k as rowUnread,
+  u as rowValue,
+  C as rowValueCaption,
+  z as selectCell,
+  O as selectCol,
+  N as skeleton,
+  R as sortButton,
+  f as sortButtonActive,
+  j as sortIcon,
+  t as srOnly,
+  F as table,
+  H as tableInteractive,
+  D as tableSticky,
+  x as td,
+  U as th,
+  Q as toolbar,
+  Y as toolbarChips,
+  $ as toolbarCount,
+  W as toolbarLead,
+  Z as toolbarSearch,
+  X as toolbarTrail,
+  G as tr,
+  J as trSelected
+};
+//# sourceMappingURL=BackdropLists.module.css.js.map

package/dist/components/Backdrop/BackdropLists.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropLists.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Backdrop/BackdropOverlays.d.ts

@@ -0,0 +1,175 @@
+import { CSSProperties, ElementType, ReactElement, ReactNode } from 'react';
+export type BackdropPopoverWidth = 'help' | 'account' | 'tokens' | 'mission' | 'allApps' | 'auto';
+export interface BackdropPopoverProps {
+    children: ReactNode;
+    /** The panel's accessible name ("Account", "Token balance"). */
+    label: string;
+    /** Paper's widths per popover; `auto` sizes to content. */
+    width?: BackdropPopoverWidth;
+    /** `menu`: 6px around a list of rows. `card`: 20px around free content. `none`. */
+    padding?: 'menu' | 'card' | 'none';
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function BackdropPopover({ children, label, width, padding, className, style }: BackdropPopoverProps): import("react").JSX.Element;
+export interface BackdropPopoverAnchorProps {
+    /**
+     * The opener (a strip chip, the avatar, a "…" button): one element that
+     * renders a focusable control and passes `ref`, `aria-expanded`,
+     * `aria-controls`, `onClick` and `onKeyDown` through to it, as every Backdrop
+     * button does. Its pressed state follows `aria-expanded`, which this sets.
+     */
+    trigger: ReactElement<Record<string, unknown>>;
+    /** The panel, shown while the anchor is open. */
+    popover?: ReactNode;
+    /** Controlled open state. Omit it and the anchor keeps its own. */
+    open?: boolean;
+    /** Starting state when uncontrolled: a story draws the panel open with this. */
+    defaultOpen?: boolean;
+    /** Every open and close, including Escape, an outside click and focus leaving. */
+    onOpenChange?: (open: boolean) => void;
+    /** Align the panel's start or end edge with the opener's (round 6: "aligned to its edge"). */
+    align?: 'start' | 'end';
+    /** Open beside the opener rather than under it (the rail's All apps tile). */
+    side?: 'bottom' | 'right';
+    /**
+     * This panel's key in a surrounding BackdropChrome. Its open state is then
+     * the chrome's: opening it closes any other chrome panel, a modal dialog
+     * closes it, and `useBackdropPanel(panel)` opens it from anywhere. Takes
+     * precedence over `open`; `onOpenChange` still hears every change. Ignored
+     * outside a BackdropChrome.
+     */
+    panel?: string;
+    className?: string;
+}
+/**
+ * Where an arrow key moves focus inside an open Backdrop panel, as an index into
+ * its tab stops, or null when the key is not one the panel handles. `current`
+ * is -1 when focus is on nothing in the list. The ADR-0010 disclosure rule: Up
+ * and Down move in DOM order and stop at the ends, Home and End jump to them,
+ * and Tab is left alone.
+ */
+export declare function backdropArrowTarget(key: string, current: number, count: number): number | null;
+export declare function BackdropPopoverAnchor({ trigger, popover, open, defaultOpen, onOpenChange, align, side, panel, className, }: BackdropPopoverAnchorProps): import("react").JSX.Element;
+export interface BackdropMenuRow {
+    key: string;
+    label: ReactNode;
+    /** 18px stroke icon. */
+    icon?: ReactNode;
+    href?: string;
+    onClick?: () => void;
+    /** Right-hand content: a badge, a shortcut, a segmented control. */
+    trailing?: ReactNode;
+    /** Show the hover ground, for a story of the hover state. */
+    highlighted?: boolean;
+    /** Render the row as a static line holding `trailing` (the Language row). */
+    static?: boolean;
+    /** Draw a divider above this row. */
+    dividerBefore?: boolean;
+    /** The current choice (a selected option in a filter list). */
+    selected?: boolean;
+}
+export interface BackdropMenuListProps {
+    rows: BackdropMenuRow[];
+    linkComponent?: ElementType;
+    className?: string;
+}
+export declare function BackdropMenuList({ rows, linkComponent: Link, className }: BackdropMenuListProps): import("react").JSX.Element;
+export interface BackdropSegmentedOption {
+    value: string;
+    label: ReactNode;
+    /** Leading 16px stroke icon. Decorative: the label names the segment. */
+    icon?: ReactNode;
+}
+/**
+ * `default`: the 30px track that sits inside a menu row (the Language row).
+ * `lg`: a 40px track, the height a control stands at in a form row (ADR-0017, D4).
+ */
+export type BackdropSegmentedSize = 'default' | 'lg';
+export interface BackdropSegmentedProps {
+    /** The group's name ("Language"). */
+    label: string;
+    options: BackdropSegmentedOption[];
+    value: string;
+    onValueChange?: (value: string) => void;
+    size?: BackdropSegmentedSize;
+    className?: string;
+}
+/** Two or three exclusive options in a sunken track (English | Français). */
+export declare function BackdropSegmented({ label, options, value, onValueChange, size, className }: BackdropSegmentedProps): import("react").JSX.Element;
+export type BackdropDialogWidth = 'form' | 'search' | 'settings';
+export interface BackdropDialogSection {
+    key: string;
+    label: ReactNode;
+    /** The section on show. Exactly one entry should carry it. */
+    active?: boolean;
+}
+export interface BackdropDialogProps {
+    /** The dialog's heading. Omit only when `label` names it (the search dialog). */
+    title?: ReactNode;
+    /** Accessible name when there is no visible title. With a title and no label, the title names the dialog. */
+    label?: string;
+    children: ReactNode;
+    /** Buttons at the foot: "Cancel" outline, the action in ink. */
+    footer?: ReactNode;
+    /** The close button's name. Omit to draw no close button. */
+    closeLabel?: string;
+    onClose?: () => void;
+    /**
+     * `form` 480px, `search` 640px. `settings` 880×640 (ADR-0017, D5): a section
+     * nav down the left (`sections`) beside a content area, with the header and
+     * footer ruled off from them.
+     */
+    width?: BackdropDialogWidth;
+    /** A mark before the title: the app's 32px tile on an app's settings. Decorative. */
+    leading?: ReactNode;
+    /**
+     * The `settings` size's section nav. One section is shown at a time (D15):
+     * `children` is the active section's content, and the active entry is marked
+     * `aria-current`. Ignored at the other sizes.
+     */
+    sections?: BackdropDialogSection[];
+    /** The section nav's accessible name ("Sections"). Required with `sections`. */
+    sectionsLabel?: string;
+    /** `centre` (default) or `top`: 96px from the top, as search opens. */
+    placement?: 'centre' | 'top';
+    /**
+     * Position against the nearest positioned ancestor (the frame) rather than
+     * the viewport. For stories and screenshots of a dialog in place.
+     */
+    contained?: boolean;
+    /** Remove the padding, for a dialog that lays out its own regions. */
+    bare?: boolean;
+    /**
+     * This dialog's key in a surrounding BackdropChrome, so
+     * `useBackdropPanel(panel)` reads and sets whether it is up. With or without
+     * one, a modal dialog inside a BackdropChrome claims it while mounted (see
+     * below).
+     */
+    panel?: string;
+    className?: string;
+}
+export declare function BackdropDialog({ title, label, children, footer, closeLabel, onClose, width, placement, contained, bare, leading, sections, sectionsLabel, panel, className, }: BackdropDialogProps): import("react").JSX.Element;
+export interface BackdropToastProps {
+    /** One short line: "Campaign launched", "3 messages sent". */
+    children: ReactNode;
+    /** Leading icon (a check for success). */
+    icon?: ReactNode;
+    /** One action, a text link: "Undo", "View". */
+    action?: ReactNode;
+    /** The dismiss button's name. */
+    closeLabel?: string;
+    onClose?: () => void;
+    tone?: 'default' | 'danger';
+    className?: string;
+}
+/** An ink toast. Mount it inside a BackdropToastRegion, which announces it. */
+export declare function BackdropToast({ children, icon, action, closeLabel, onClose, tone, className }: BackdropToastProps): import("react").JSX.Element;
+export interface BackdropToastRegionProps {
+    children?: ReactNode;
+    /** The live region's name ("Notifications"). */
+    label: string;
+    contained?: boolean;
+}
+/** The bottom-centre stack toasts appear in: a polite live region. */
+export declare function BackdropToastRegion({ children, label, contained }: BackdropToastRegionProps): import("react").JSX.Element;

package/dist/components/Backdrop/BackdropOverlays.js

@@ -0,0 +1,252 @@
+"use client";
+import { jsx as r, jsxs as N, Fragment as q } from "react/jsx-runtime";
+import { useRef as A, useId as F, useLayoutEffect as R, useEffect as M, useCallback as S, useContext as V, isValidElement as O, cloneElement as G, createContext as J } from "react";
+import { useAnchoredOverlay as j } from "../../anchored-overlay.js";
+import e from "./BackdropOverlays.module.css.js";
+import { cx as p } from "./cx.js";
+import { Close as z } from "./icons.js";
+import { BackdropIconButton as Q } from "./BackdropButton.js";
+import { useChromeState as W, useChromePanel as X } from "./BackdropChrome.js";
+function de({ children: t, label: s, width: i = "auto", padding: d = "card", className: a, style: m }) {
+  return /* @__PURE__ */ r("div", { "aria-label": s, className: p(e.popover, e[`w-${i}`], e[`pad-${d}`], a), style: m, children: t });
+}
+const U = J(null), Y = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function w(t) {
+  return t ? Array.from(t.querySelectorAll(Y)) : [];
+}
+function Z(t, s, i) {
+  if (i === 0) return null;
+  switch (t) {
+    case "ArrowDown":
+      return s < 0 ? 0 : Math.min(s + 1, i - 1);
+    case "ArrowUp":
+      return s < 0 ? i - 1 : Math.max(s - 1, 0);
+    case "Home":
+      return 0;
+    case "End":
+      return i - 1;
+    default:
+      return null;
+  }
+}
+function _(t) {
+  return t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof HTMLElement && t.isContentEditable;
+}
+function ee(t, s) {
+  typeof t == "function" ? t(s) : t && (t.current = s);
+}
+function ue({
+  trigger: t,
+  popover: s,
+  open: i,
+  defaultOpen: d,
+  onOpenChange: a,
+  align: m = "start",
+  side: l = "bottom",
+  panel: D,
+  className: f
+}) {
+  const P = X(D), c = j(
+    P ? {
+      open: P.open,
+      onOpenChange: (n) => {
+        P.setOpen(n), a == null || a(n);
+      }
+    } : { open: i, defaultOpen: d, onOpenChange: a }
+  ), g = A(null), K = A(!1);
+  M(() => {
+    var n;
+    !c.open || !K.current || (K.current = !1, (n = w(g.current)[0]) == null || n.focus());
+  }, [c.open]), R(() => {
+    const n = g.current;
+    if (!c.open || l !== "right" || !n) return;
+    const u = () => {
+      n.style.translate = "";
+      const k = parseFloat(getComputedStyle(n).getPropertyValue("--backdrop-popover-offset")) || 8, o = n.getBoundingClientRect(), v = Math.min(o.bottom - (window.innerHeight - k), o.top - k);
+      v > 0 && (n.style.translate = `0 ${-v}px`);
+    };
+    return u(), window.addEventListener("resize", u), () => window.removeEventListener("resize", u);
+  }, [c.open, l]);
+  const x = c.triggerProps, T = O(t) ? t.props : {}, E = T.onClick, B = T.onKeyDown, h = T.ref, { toggle: y, setOpen: I } = c, H = S(
+    (n) => {
+      x.ref(n), ee(h, n);
+    },
+    // triggerProps.ref is stable (useCallback inside the hook).
+    [h]
+  ), b = O(t) ? G(t, {
+    ref: H,
+    "aria-expanded": x["aria-expanded"],
+    "aria-controls": x["aria-controls"],
+    onClick: (n) => {
+      E == null || E(n), y();
+    },
+    onKeyDown: (n) => {
+      var u;
+      B == null || B(n), x.onKeyDown(n), !(n.key !== "ArrowDown" || n.defaultPrevented) && (n.preventDefault(), c.open ? (u = w(g.current)[0]) == null || u.focus() : (K.current = !0, I(!0)));
+    }
+  }) : t, C = (n) => {
+    var o;
+    if (c.panelProps.onKeyDown(n), n.defaultPrevented || _(n.target)) return;
+    const u = w(g.current), k = Z(n.key, u.indexOf(document.activeElement), u.length);
+    k !== null && (n.preventDefault(), (o = u[k]) == null || o.focus());
+  }, L = S(
+    (n) => {
+      g.current = n, c.panelProps.ref(n);
+    },
+    // panelProps.ref is stable (useCallback inside the hook).
+    []
+  );
+  return /* @__PURE__ */ N("div", { className: p(e.anchor, f), children: [
+    b,
+    c.open && s && /* @__PURE__ */ r("div", { ref: L, id: c.panelProps.id, onKeyDown: C, className: p(e.placement, e[`side-${l}`], e[`align-${m}`]), children: /* @__PURE__ */ r(U.Provider, { value: { close: c.close }, children: s }) })
+  ] });
+}
+function me({ rows: t, linkComponent: s = "a", className: i }) {
+  const d = V(U);
+  return /* @__PURE__ */ r("ul", { className: p(e.menuList, i), children: t.map((a) => {
+    const m = /* @__PURE__ */ N(q, { children: [
+      a.icon && /* @__PURE__ */ r("span", { className: e.rowIcon, children: a.icon }),
+      /* @__PURE__ */ r("span", { className: e.rowLabel, children: a.label }),
+      a.trailing && /* @__PURE__ */ r("span", { className: e.rowTrailing, children: a.trailing })
+    ] }), l = a.static ? "div" : a.href !== void 0 ? s : "button", D = a.static ? {} : a.href !== void 0 ? { href: a.href } : { type: "button" };
+    return /* @__PURE__ */ N("li", { className: e.menuItem, children: [
+      a.dividerBefore && /* @__PURE__ */ r("span", { className: e.divider, "aria-hidden": "true" }),
+      /* @__PURE__ */ r(
+        l,
+        {
+          ...D,
+          onClick: a.static ? void 0 : () => {
+            var f;
+            (f = a.onClick) == null || f.call(a), d == null || d.close();
+          },
+          "aria-current": a.selected ? "true" : void 0,
+          className: p(e.row, a.static && e.rowStatic, a.highlighted && e.rowHighlighted),
+          children: m
+        }
+      )
+    ] }, a.key);
+  }) });
+}
+function pe({ label: t, options: s, value: i, onValueChange: d, size: a = "default", className: m }) {
+  return /* @__PURE__ */ r("div", { role: "radiogroup", "aria-label": t, className: p(e.segmented, a === "lg" && e.segmentedLg, m), children: s.map((l) => /* @__PURE__ */ N(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": l.value === i,
+      className: e.segment,
+      onClick: d ? () => d(l.value) : void 0,
+      children: [
+        l.icon && /* @__PURE__ */ r("span", { className: e.segmentIcon, "aria-hidden": "true", children: l.icon }),
+        l.label
+      ]
+    },
+    l.value
+  )) });
+}
+function fe({
+  title: t,
+  label: s,
+  children: i,
+  footer: d,
+  closeLabel: a,
+  onClose: m,
+  width: l = "form",
+  placement: D = "centre",
+  contained: f = !1,
+  bare: P = !1,
+  leading: c,
+  sections: g,
+  sectionsLabel: K,
+  panel: x,
+  className: T
+}) {
+  const E = l === "settings", B = A(null), h = A(m);
+  h.current = m;
+  const y = W(), I = F(), H = F(), b = x ?? `dialog:${I}`, C = y == null ? void 0 : y.setOpenKey;
+  R(() => {
+    if (!(!C || f))
+      return C(b), () => C((o) => o === b ? null : o);
+  }, [C, b, f]);
+  const L = A(!1), n = y == null ? void 0 : y.openKey;
+  M(() => {
+    var o;
+    f || n === void 0 || (n === b ? L.current = !0 : L.current && (L.current = !1, (o = h.current) == null || o.call(h)));
+  }, [n, b, f]), M(() => {
+    const o = document.activeElement;
+    return () => {
+      var $;
+      const v = document.activeElement;
+      (!v || v === document.body || !!(($ = B.current) != null && $.contains(v))) && o instanceof HTMLElement && o !== document.body && o.isConnected && o.focus();
+    };
+  }, []);
+  const u = j({
+    open: !0,
+    hasTrigger: !1,
+    modal: !f,
+    onOpenChange: (o) => {
+      var v;
+      o || (v = h.current) == null || v.call(h);
+    }
+  }), k = S(
+    (o) => {
+      B.current = o, u.panelProps.ref(o);
+    },
+    // panelProps.ref is stable (useCallback inside the hook).
+    []
+  );
+  return /* @__PURE__ */ r("div", { className: p(e.scrim, f && e.contained, D === "top" && e.top), children: /* @__PURE__ */ N(
+    "div",
+    {
+      ref: k,
+      id: u.panelProps.id,
+      onKeyDown: u.panelProps.onKeyDown,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": s,
+      "aria-labelledby": s === void 0 && t ? H : void 0,
+      className: p(e.dialog, e[`dw-${l}`], T),
+      children: [
+        (t || a || c) && /* @__PURE__ */ N("div", { className: p(e.dialogHeader, !!c && e.dialogHeaderLeading, E && e.dialogHeaderSettings), children: [
+          c && /* @__PURE__ */ r("span", { className: e.dialogLeading, "aria-hidden": "true", children: c }),
+          t && /* @__PURE__ */ r("h2", { id: H, className: e.dialogTitle, children: t }),
+          a && /* @__PURE__ */ r(Q, { label: a, icon: /* @__PURE__ */ r(z, {}), onClick: m, tooltip: !1 })
+        ] }),
+        E ? /* @__PURE__ */ N("div", { className: e.settingsBody, children: [
+          g && g.length > 0 && /* @__PURE__ */ r("nav", { "aria-label": K, className: e.sectionNav, children: /* @__PURE__ */ r("ul", { className: e.sectionList, children: g.map((o) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r("button", { type: "button", "aria-current": o.active ? "true" : void 0, className: e.section, children: o.label }) }, o.key)) }) }),
+          /* @__PURE__ */ r("div", { className: p(e.settingsContent, !P && e.settingsContentPadding), children: i })
+        ] }) : /* @__PURE__ */ r("div", { className: p(!P && e.dialogBody), children: i }),
+        d && /* @__PURE__ */ r("div", { className: e.dialogFooter, children: d })
+      ]
+    }
+  ) });
+}
+function he({ children: t, icon: s, action: i, closeLabel: d, onClose: a, tone: m = "default", className: l }) {
+  return /* @__PURE__ */ N("div", { className: p(e.toast, m === "danger" && e.toastDanger, l), children: [
+    s && /* @__PURE__ */ r("span", { className: e.toastIcon, children: s }),
+    /* @__PURE__ */ r("span", { className: e.toastText, children: t }),
+    i && /* @__PURE__ */ r("span", { className: e.toastAction, children: i }),
+    d && /* @__PURE__ */ r("button", { type: "button", "aria-label": d, className: e.toastClose, onClick: a, children: /* @__PURE__ */ r(z, { size: 16 }) })
+  ] });
+}
+function ge({ children: t, label: s, contained: i = !1 }) {
+  return /* @__PURE__ */ r("div", { role: "region", "aria-label": s, "aria-live": "polite", className: p(e.toastRegion, i && e.contained), children: t });
+}
+export {
+  fe as BackdropDialog,
+  me as BackdropMenuList,
+  de as BackdropPopover,
+  ue as BackdropPopoverAnchor,
+  pe as BackdropSegmented,
+  he as BackdropToast,
+  ge as BackdropToastRegion,
+  Z as backdropArrowTarget
+};
+//# sourceMappingURL=BackdropOverlays.js.map

package/dist/components/Backdrop/BackdropOverlays.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropOverlays.js","sources":["../../../src/components/Backdrop/BackdropOverlays.tsx"],"sourcesContent":["'use client'\n\nimport {\n  cloneElement,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  type CSSProperties,\n  type ElementType,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react'\nimport { useAnchoredOverlay } from '../../anchored-overlay'\nimport styles from './BackdropOverlays.module.css'\nimport { cx } from './cx'\nimport { Close } from './icons'\nimport { BackdropIconButton } from './BackdropButton'\nimport { useChromePanel, useChromeState } from './BackdropChrome'\n\n/* ── Popover ───────────────────────────────────────────────────────────── */\n\nexport type BackdropPopoverWidth = 'help' | 'account' | 'tokens' | 'mission' | 'allApps' | 'auto'\n\nexport interface BackdropPopoverProps {\n  children: ReactNode\n  /** The panel's accessible name (\"Account\", \"Token balance\"). */\n  label: string\n  /** Paper's widths per popover; `auto` sizes to content. */\n  width?: BackdropPopoverWidth\n  /** `menu`: 6px around a list of rows. `card`: 20px around free content. `none`. */\n  padding?: 'menu' | 'card' | 'none'\n  className?: string\n  style?: CSSProperties\n}\n\n/*\n * The floating card every popover and menu is drawn in: white, radius 12, the\n * popover shadow, no scrim (round 6, addition 2). Position it with\n * BackdropPopoverAnchor, which also gives it its keyboard and dismissal, or\n * against the frame through BackdropFrame `overlays` for a static drawing.\n *\n * No widget role: a non-modal panel of ordinary links and buttons is a\n * disclosure (ADR-0010), named by `aria-label` the way AppSwitcher's panel is.\n */\nexport function BackdropPopover({ children, label, width = 'auto', padding = 'card', className, style }: BackdropPopoverProps) {\n  return (\n    <div aria-label={label} className={cx(styles.popover, styles[`w-${width}`], styles[`pad-${padding}`], className)} style={style}>\n      {children}\n    </div>\n  )\n}\n\nexport interface BackdropPopoverAnchorProps {\n  /**\n   * The opener (a strip chip, the avatar, a \"…\" button): one element that\n   * renders a focusable control and passes `ref`, `aria-expanded`,\n   * `aria-controls`, `onClick` and `onKeyDown` through to it, as every Backdrop\n   * button does. Its pressed state follows `aria-expanded`, which this sets.\n   */\n  trigger: ReactElement<Record<string, unknown>>\n  /** The panel, shown while the anchor is open. */\n  popover?: ReactNode\n  /** Controlled open state. Omit it and the anchor keeps its own. */\n  open?: boolean\n  /** Starting state when uncontrolled: a story draws the panel open with this. */\n  defaultOpen?: boolean\n  /** Every open and close, including Escape, an outside click and focus leaving. */\n  onOpenChange?: (open: boolean) => void\n  /** Align the panel's start or end edge with the opener's (round 6: \"aligned to its edge\"). */\n  align?: 'start' | 'end'\n  /** Open beside the opener rather than under it (the rail's All apps tile). */\n  side?: 'bottom' | 'right'\n  /**\n   * This panel's key in a surrounding BackdropChrome. Its open state is then\n   * the chrome's: opening it closes any other chrome panel, a modal dialog\n   * closes it, and `useBackdropPanel(panel)` opens it from anywhere. Takes\n   * precedence over `open`; `onOpenChange` still hears every change. Ignored\n   * outside a BackdropChrome.\n   */\n  panel?: string\n  className?: string\n}\n\n/** What a row inside an anchored panel calls to close it and return focus to the opener. */\nconst PopoverContext = createContext<{ close: () => void } | null>(null)\n\n// Tab stops inside a panel, in document order: what the arrow keys walk.\nconst FOCUSABLE = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',')\n\nfunction focusablesIn(root: HTMLElement | null): HTMLElement[] {\n  return root ? Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE)) : []\n}\n\n/**\n * Where an arrow key moves focus inside an open Backdrop panel, as an index into\n * its tab stops, or null when the key is not one the panel handles. `current`\n * is -1 when focus is on nothing in the list. The ADR-0010 disclosure rule: Up\n * and Down move in DOM order and stop at the ends, Home and End jump to them,\n * and Tab is left alone.\n */\nexport function backdropArrowTarget(key: string, current: number, count: number): number | null {\n  if (count === 0) return null\n  switch (key) {\n    case 'ArrowDown':\n      return current < 0 ? 0 : Math.min(current + 1, count - 1)\n    case 'ArrowUp':\n      return current < 0 ? count - 1 : Math.max(current - 1, 0)\n    case 'Home':\n      return 0\n    case 'End':\n      return count - 1\n    default:\n      return null\n  }\n}\n\n/** A text field keeps its own arrows, Home and End: they move the caret there. */\nfunction isTextEntry(node: EventTarget | null): boolean {\n  return node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement || (node instanceof HTMLElement && node.isContentEditable)\n}\n\nfunction setRef<T>(ref: Ref<T> | undefined, node: T | null) {\n  if (typeof ref === 'function') ref(node)\n  else if (ref) (ref as { current: T | null }).current = node\n}\n\n/*\n * Places a popover 8px from its opener and owns its behaviour (Stage B):\n * ADR-0009's dismissal contract through useAnchoredOverlay -- Escape and an\n * outside click close, focus leaving trigger and panel together closes, focus\n * returns to the opener -- and ADR-0010's disclosure keyboard: Tab is the\n * document's order, unmanaged; Up/Down/Home/End move between the panel's\n * controls and stop at the ends; ArrowDown on the opener opens the panel at its\n * first control. The panel carries no widget role (ADR-0010).\n */\nexport function BackdropPopoverAnchor({\n  trigger,\n  popover,\n  open,\n  defaultOpen,\n  onOpenChange,\n  align = 'start',\n  side = 'bottom',\n  panel,\n  className,\n}: BackdropPopoverAnchorProps) {\n  const chrome = useChromePanel(panel)\n  const overlay = useAnchoredOverlay(\n    chrome\n      ? {\n          open: chrome.open,\n          onOpenChange: (next) => {\n            chrome.setOpen(next)\n            onOpenChange?.(next)\n          },\n        }\n      : { open, defaultOpen, onOpenChange },\n  )\n  const panelNode = useRef<HTMLDivElement | null>(null)\n  const focusFirstOnOpen = useRef(false)\n\n  // A panel opened from the keyboard with ArrowDown takes focus at its first\n  // control once it is in the DOM. Opened by a click or drawn open by\n  // `defaultOpen`, it takes none: focus stays where the person left it.\n  useEffect(() => {\n    if (!overlay.open || !focusFirstOnOpen.current) return\n    focusFirstOnOpen.current = false\n    focusablesIn(panelNode.current)[0]?.focus()\n  }, [overlay.open])\n\n  // A side panel is placed by CSS alone, level with its opener's top, so an\n  // opener low in the rail pushes a tall panel past the bottom of the window.\n  // Once open it is measured and lifted by the overflow, no higher than the\n  // popover offset from the top: the panel stays beside its opener and in view.\n  // Re-measured on resize. Below-opener panels are left alone; lifting one\n  // would cover its own opener.\n  useLayoutEffect(() => {\n    const node = panelNode.current\n    if (!overlay.open || side !== 'right' || !node) return\n    const clamp = () => {\n      node.style.translate = ''\n      const margin = parseFloat(getComputedStyle(node).getPropertyValue('--backdrop-popover-offset')) || 8\n      const rect = node.getBoundingClientRect()\n      const lift = Math.min(rect.bottom - (window.innerHeight - margin), rect.top - margin)\n      if (lift > 0) node.style.translate = `0 ${-lift}px`\n    }\n    clamp()\n    window.addEventListener('resize', clamp)\n    return () => window.removeEventListener('resize', clamp)\n  }, [overlay.open, side])\n\n  const triggerProps = overlay.triggerProps!\n  const own = isValidElement(trigger) ? trigger.props : {}\n  const ownOnClick = own.onClick as ((event: unknown) => void) | undefined\n  const ownOnKeyDown = own.onKeyDown as ((event: KeyboardEvent<HTMLElement>) => void) | undefined\n  const ownRef = own.ref as Ref<HTMLElement> | undefined\n  const { toggle, setOpen } = overlay\n\n  const triggerRef = useCallback(\n    (node: HTMLElement | null) => {\n      triggerProps.ref(node)\n      setRef(ownRef, node)\n    },\n    // triggerProps.ref is stable (useCallback inside the hook).\n    [ownRef],\n  )\n\n  const opener = isValidElement(trigger)\n    ? cloneElement(trigger, {\n        ref: triggerRef,\n        'aria-expanded': triggerProps['aria-expanded'],\n        'aria-controls': triggerProps['aria-controls'],\n        onClick: (event: unknown) => {\n          ownOnClick?.(event)\n          toggle()\n        },\n        onKeyDown: (event: KeyboardEvent<HTMLElement>) => {\n          ownOnKeyDown?.(event)\n          triggerProps.onKeyDown(event)\n          if (event.key !== 'ArrowDown' || event.defaultPrevented) return\n          event.preventDefault()\n          if (overlay.open) focusablesIn(panelNode.current)[0]?.focus()\n          else {\n            focusFirstOnOpen.current = true\n            setOpen(true)\n          }\n        },\n      })\n    : trigger\n\n  const onPanelKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    overlay.panelProps.onKeyDown(event)\n    if (event.defaultPrevented || isTextEntry(event.target)) return\n    const list = focusablesIn(panelNode.current)\n    const next = backdropArrowTarget(event.key, list.indexOf(document.activeElement as HTMLElement), list.length)\n    if (next === null) return\n    event.preventDefault()\n    list[next]?.focus()\n  }\n\n  const setPanel = useCallback(\n    (node: HTMLDivElement | null) => {\n      panelNode.current = node\n      overlay.panelProps.ref(node)\n    },\n    // panelProps.ref is stable (useCallback inside the hook).\n    [],\n  )\n\n  return (\n    <div className={cx(styles.anchor, className)}>\n      {opener}\n      {overlay.open && popover && (\n        <div ref={setPanel} id={overlay.panelProps.id} onKeyDown={onPanelKeyDown} className={cx(styles.placement, styles[`side-${side}`], styles[`align-${align}`])}>\n          <PopoverContext.Provider value={{ close: overlay.close }}>{popover}</PopoverContext.Provider>\n        </div>\n      )}\n    </div>\n  )\n}\n\n/* ── Menu rows ─────────────────────────────────────────────────────────── */\n\nexport interface BackdropMenuRow {\n  key: string\n  label: ReactNode\n  /** 18px stroke icon. */\n  icon?: ReactNode\n  href?: string\n  onClick?: () => void\n  /** Right-hand content: a badge, a shortcut, a segmented control. */\n  trailing?: ReactNode\n  /** Show the hover ground, for a story of the hover state. */\n  highlighted?: boolean\n  /** Render the row as a static line holding `trailing` (the Language row). */\n  static?: boolean\n  /** Draw a divider above this row. */\n  dividerBefore?: boolean\n  /** The current choice (a selected option in a filter list). */\n  selected?: boolean\n}\n\nexport interface BackdropMenuListProps {\n  rows: BackdropMenuRow[]\n  linkComponent?: ElementType\n  className?: string\n}\n\n/*\n * Rows of 36px: an 18px icon, a 14px label, an optional trailing slot. Links\n * and buttons in a list, not role=\"menu\": the panel is a disclosure (ADR-0010),\n * every row is its own Tab stop, and BackdropPopoverAnchor adds the arrow keys.\n * Inside an anchored panel, choosing a row closes the panel and returns focus\n * to its opener; a static row (the Language row) does not.\n */\nexport function BackdropMenuList({ rows, linkComponent: Link = 'a', className }: BackdropMenuListProps) {\n  const popover = useContext(PopoverContext)\n  return (\n    <ul className={cx(styles.menuList, className)}>\n      {rows.map((row) => {\n        const content = (\n          <>\n            {row.icon && <span className={styles.rowIcon}>{row.icon}</span>}\n            <span className={styles.rowLabel}>{row.label}</span>\n            {row.trailing && <span className={styles.rowTrailing}>{row.trailing}</span>}\n          </>\n        )\n        const Element: ElementType = row.static ? 'div' : row.href !== undefined ? Link : 'button'\n        const elementProps = row.static ? {} : row.href !== undefined ? { href: row.href } : { type: 'button' }\n        return (\n          <li key={row.key} className={styles.menuItem}>\n            {row.dividerBefore && <span className={styles.divider} aria-hidden=\"true\" />}\n            <Element\n              {...elementProps}\n              onClick={\n                row.static\n                  ? undefined\n                  : () => {\n                      row.onClick?.()\n                      popover?.close()\n                    }\n              }\n              aria-current={row.selected ? 'true' : undefined}\n              className={cx(styles.row, row.static && styles.rowStatic, row.highlighted && styles.rowHighlighted)}\n            >\n              {content}\n            </Element>\n          </li>\n        )\n      })}\n    </ul>\n  )\n}\n\n/* ── Segmented control ─────────────────────────────────────────────────── */\n\nexport interface BackdropSegmentedOption {\n  value: string\n  label: ReactNode\n  /** Leading 16px stroke icon. Decorative: the label names the segment. */\n  icon?: ReactNode\n}\n\n/**\n * `default`: the 30px track that sits inside a menu row (the Language row).\n * `lg`: a 40px track, the height a control stands at in a form row (ADR-0017, D4).\n */\nexport type BackdropSegmentedSize = 'default' | 'lg'\n\nexport interface BackdropSegmentedProps {\n  /** The group's name (\"Language\"). */\n  label: string\n  options: BackdropSegmentedOption[]\n  value: string\n  onValueChange?: (value: string) => void\n  size?: BackdropSegmentedSize\n  className?: string\n}\n\n/** Two or three exclusive options in a sunken track (English | Français). */\nexport function BackdropSegmented({ label, options, value, onValueChange, size = 'default', className }: BackdropSegmentedProps) {\n  return (\n    <div role=\"radiogroup\" aria-label={label} className={cx(styles.segmented, size === 'lg' && styles.segmentedLg, className)}>\n      {options.map((option) => (\n        <button\n          key={option.value}\n          type=\"button\"\n          role=\"radio\"\n          aria-checked={option.value === value}\n          className={styles.segment}\n          onClick={onValueChange ? () => onValueChange(option.value) : undefined}\n        >\n          {option.icon && (\n            <span className={styles.segmentIcon} aria-hidden=\"true\">\n              {option.icon}\n            </span>\n          )}\n          {option.label}\n        </button>\n      ))}\n    </div>\n  )\n}\n\n/* ── Dialog ────────────────────────────────────────────────────────────── */\n\nexport type BackdropDialogWidth = 'form' | 'search' | 'settings'\n\nexport interface BackdropDialogSection {\n  key: string\n  label: ReactNode\n  /** The section on show. Exactly one entry should carry it. */\n  active?: boolean\n}\n\nexport interface BackdropDialogProps {\n  /** The dialog's heading. Omit only when `label` names it (the search dialog). */\n  title?: ReactNode\n  /** Accessible name when there is no visible title. With a title and no label, the title names the dialog. */\n  label?: string\n  children: ReactNode\n  /** Buttons at the foot: \"Cancel\" outline, the action in ink. */\n  footer?: ReactNode\n  /** The close button's name. Omit to draw no close button. */\n  closeLabel?: string\n  onClose?: () => void\n  /**\n   * `form` 480px, `search` 640px. `settings` 880×640 (ADR-0017, D5): a section\n   * nav down the left (`sections`) beside a content area, with the header and\n   * footer ruled off from them.\n   */\n  width?: BackdropDialogWidth\n  /** A mark before the title: the app's 32px tile on an app's settings. Decorative. */\n  leading?: ReactNode\n  /**\n   * The `settings` size's section nav. One section is shown at a time (D15):\n   * `children` is the active section's content, and the active entry is marked\n   * `aria-current`. Ignored at the other sizes.\n   */\n  sections?: BackdropDialogSection[]\n  /** The section nav's accessible name (\"Sections\"). Required with `sections`. */\n  sectionsLabel?: string\n  /** `centre` (default) or `top`: 96px from the top, as search opens. */\n  placement?: 'centre' | 'top'\n  /**\n   * Position against the nearest positioned ancestor (the frame) rather than\n   * the viewport. For stories and screenshots of a dialog in place.\n   */\n  contained?: boolean\n  /** Remove the padding, for a dialog that lays out its own regions. */\n  bare?: boolean\n  /**\n   * This dialog's key in a surrounding BackdropChrome, so\n   * `useBackdropPanel(panel)` reads and sets whether it is up. With or without\n   * one, a modal dialog inside a BackdropChrome claims it while mounted (see\n   * below).\n   */\n  panel?: string\n  className?: string\n}\n\n/*\n * A centred card over a scrim, for a short task (≤ ~6 fields; the depth rule).\n * Open while it is mounted. Its behaviour is the anchored-overlay contract's\n * modal variant (ADR-0009): focus moves to its first control and Tab is\n * trapped inside, the rest of the document is `inert`, Escape and a press on\n * the scrim call `onClose`, and focus returns to wherever it was when the\n * dialog mounted once it unmounts.\n *\n * A `contained` dialog is a drawing of one in place, for a story or a\n * screenshot: it pulls no focus and traps none (a story page must stay usable\n * around it), and Escape and the scrim still call `onClose`.\n */\nexport function BackdropDialog({\n  title,\n  label,\n  children,\n  footer,\n  closeLabel,\n  onClose,\n  width = 'form',\n  placement = 'centre',\n  contained = false,\n  bare = false,\n  leading,\n  sections,\n  sectionsLabel,\n  panel,\n  className,\n}: BackdropDialogProps) {\n  const settings = width === 'settings'\n  const panelNode = useRef<HTMLDivElement | null>(null)\n\n  /*\n   * Inside a BackdropChrome a modal dialog is the open panel while it is\n   * mounted (Jamal, 12 Nov 2026, ADR-0009 addendum): mounting closes an open\n   * popover, whose rows would otherwise stay reachable behind the scrim, and a\n   * later open of another chrome panel closes the dialog through onClose.\n   * Claimed in a layout effect, so the popover never paints under the scrim.\n   * A contained dialog is a drawing and claims nothing.\n   */\n  const onCloseRef = useRef(onClose)\n  onCloseRef.current = onClose\n  const chrome = useChromeState()\n  const generatedKey = useId()\n  // A dialog is named by its visible title unless `label` names it: without\n  // one or the other a screen reader announces only \"dialog\".\n  const titleId = useId()\n  const ownKey = panel ?? `dialog:${generatedKey}`\n  const setOpenKey = chrome?.setOpenKey\n  useLayoutEffect(() => {\n    if (!setOpenKey || contained) return\n    setOpenKey(ownKey)\n    return () => setOpenKey((current) => (current === ownKey ? null : current))\n  }, [setOpenKey, ownKey, contained])\n  // Closes only once the dialog has been the open panel and something else\n  // has replaced it, never on the render before its own claim lands.\n  const held = useRef(false)\n  const openKey = chrome?.openKey\n  useEffect(() => {\n    if (contained || openKey === undefined) return\n    if (openKey === ownKey) held.current = true\n    else if (held.current) {\n      held.current = false\n      onCloseRef.current?.()\n    }\n  }, [openKey, ownKey, contained])\n\n  // Declared before the hook, so it reads the opener before the modal variant\n  // moves focus into the panel. Restores on unmount, and only when focus has\n  // nowhere better to be: still inside the dialog, or dropped to the body.\n  useEffect(() => {\n    const opener = document.activeElement\n    return () => {\n      const active = document.activeElement\n      const stranded = !active || active === document.body || Boolean(panelNode.current?.contains(active))\n      if (stranded && opener instanceof HTMLElement && opener !== document.body && opener.isConnected) opener.focus()\n    }\n  }, [])\n\n  const overlay = useAnchoredOverlay({\n    open: true,\n    hasTrigger: false,\n    modal: !contained,\n    onOpenChange: (next) => {\n      if (!next) onCloseRef.current?.()\n    },\n  })\n\n  const setPanel = useCallback(\n    (node: HTMLDivElement | null) => {\n      panelNode.current = node\n      overlay.panelProps.ref(node)\n    },\n    // panelProps.ref is stable (useCallback inside the hook).\n    [],\n  )\n\n  return (\n    <div className={cx(styles.scrim, contained && styles.contained, placement === 'top' && styles.top)}>\n      <div\n        ref={setPanel}\n        id={overlay.panelProps.id}\n        onKeyDown={overlay.panelProps.onKeyDown}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={label}\n        aria-labelledby={label === undefined && title ? titleId : undefined}\n        className={cx(styles.dialog, styles[`dw-${width}`], className)}\n      >\n        {(title || closeLabel || leading) && (\n          <div className={cx(styles.dialogHeader, Boolean(leading) && styles.dialogHeaderLeading, settings && styles.dialogHeaderSettings)}>\n            {leading && (\n              <span className={styles.dialogLeading} aria-hidden=\"true\">\n                {leading}\n              </span>\n            )}\n            {title && (\n              <h2 id={titleId} className={styles.dialogTitle}>\n                {title}\n              </h2>\n            )}\n            {closeLabel && <BackdropIconButton label={closeLabel} icon={<Close />} onClick={onClose} tooltip={false} />}\n          </div>\n        )}\n        {settings ? (\n          <div className={styles.settingsBody}>\n            {sections && sections.length > 0 && (\n              <nav aria-label={sectionsLabel} className={styles.sectionNav}>\n                <ul className={styles.sectionList}>\n                  {sections.map((section) => (\n                    <li key={section.key}>\n                      {/* Choosing a section is Stage B: the markup is the control, the handler is not yet wired. */}\n                      <button type=\"button\" aria-current={section.active ? 'true' : undefined} className={styles.section}>\n                        {section.label}\n                      </button>\n                    </li>\n                  ))}\n                </ul>\n              </nav>\n            )}\n            <div className={cx(styles.settingsContent, !bare && styles.settingsContentPadding)}>{children}</div>\n          </div>\n        ) : (\n          <div className={cx(!bare && styles.dialogBody)}>{children}</div>\n        )}\n        {footer && <div className={styles.dialogFooter}>{footer}</div>}\n      </div>\n    </div>\n  )\n}\n\n/* ── Toast ─────────────────────────────────────────────────────────────── */\n\nexport interface BackdropToastProps {\n  /** One short line: \"Campaign launched\", \"3 messages sent\". */\n  children: ReactNode\n  /** Leading icon (a check for success). */\n  icon?: ReactNode\n  /** One action, a text link: \"Undo\", \"View\". */\n  action?: ReactNode\n  /** The dismiss button's name. */\n  closeLabel?: string\n  onClose?: () => void\n  tone?: 'default' | 'danger'\n  className?: string\n}\n\n/** An ink toast. Mount it inside a BackdropToastRegion, which announces it. */\nexport function BackdropToast({ children, icon, action, closeLabel, onClose, tone = 'default', className }: BackdropToastProps) {\n  return (\n    <div className={cx(styles.toast, tone === 'danger' && styles.toastDanger, className)}>\n      {icon && <span className={styles.toastIcon}>{icon}</span>}\n      <span className={styles.toastText}>{children}</span>\n      {action && <span className={styles.toastAction}>{action}</span>}\n      {closeLabel && (\n        <button type=\"button\" aria-label={closeLabel} className={styles.toastClose} onClick={onClose}>\n          <Close size={16} />\n        </button>\n      )}\n    </div>\n  )\n}\n\nexport interface BackdropToastRegionProps {\n  children?: ReactNode\n  /** The live region's name (\"Notifications\"). */\n  label: string\n  contained?: boolean\n}\n\n/** The bottom-centre stack toasts appear in: a polite live region. */\nexport function BackdropToastRegion({ children, label, contained = false }: BackdropToastRegionProps) {\n  return (\n    <div role=\"region\" aria-label={label} aria-live=\"polite\" className={cx(styles.toastRegion, contained && styles.contained)}>\n      {children}\n    </div>\n  )\n}\n"],"names":["BackdropPopover","children","label","width","padding","className","style","jsx","cx","styles","PopoverContext","createContext","FOCUSABLE","focusablesIn","root","backdropArrowTarget","key","current","count","isTextEntry","node","setRef","ref","BackdropPopoverAnchor","trigger","popover","open","defaultOpen","onOpenChange","align","side","panel","chrome","useChromePanel","overlay","useAnchoredOverlay","next","panelNode","useRef","focusFirstOnOpen","useEffect","_a","useLayoutEffect","clamp","margin","rect","lift","triggerProps","own","isValidElement","ownOnClick","ownOnKeyDown","ownRef","toggle","setOpen","triggerRef","useCallback","opener","cloneElement","event","onPanelKeyDown","list","setPanel","BackdropMenuList","rows","Link","useContext","row","content","jsxs","Fragment","Element","elementProps","BackdropSegmented","options","value","onValueChange","size","option","BackdropDialog","title","footer","closeLabel","onClose","placement","contained","bare","leading","sections","sectionsLabel","settings","onCloseRef","useChromeState","generatedKey","useId","titleId","ownKey","setOpenKey","held","openKey","active","BackdropIconButton","Close","section","BackdropToast","icon","action","tone","BackdropToastRegion"],"mappings":"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"}