@boost33/ui 0.8.0 → 0.9.0

package/dist/components/Backdrop/BackdropPatterns.js

@@ -0,0 +1,202 @@
+"use client";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useState as y } from "react";
+import a from "./BackdropPatterns.module.css.js";
+import { cx as d } from "./cx.js";
+import { Check as N, Minus as C, ChevronDown as S, Filter as g, Dots as A } from "./icons.js";
+import { BackdropBadge as H, BackdropPill as L } from "./BackdropBasics.js";
+import { BackdropButton as h, BackdropTextLink as v, BackdropIconButton as T } from "./BackdropButton.js";
+import { BackdropPopover as b, BackdropPopoverAnchor as z, BackdropMenuList as R } from "./BackdropOverlays.js";
+import { BackdropCard as x } from "./BackdropPage.js";
+import { BackdropEmptyState as D, BackdropIconTile as B } from "./BackdropDisplay.js";
+function U({ summary: l, hint: n, children: r, level: t = 1, defaultOpen: i = !1, className: c }) {
+  return /* @__PURE__ */ o("details", { className: d(a.disclosure, t === 2 && a.level2, c), open: i || void 0, children: [
+    /* @__PURE__ */ o("summary", { className: a.summary, children: [
+      /* @__PURE__ */ e("span", { className: a.summaryLabel, children: l }),
+      /* @__PURE__ */ e("span", { className: a.chevron, children: /* @__PURE__ */ e(S, {}) }),
+      n && /* @__PURE__ */ e("span", { className: a.hint, children: n })
+    ] }),
+    /* @__PURE__ */ e("div", { className: a.disclosureBody, children: r })
+  ] });
+}
+function V({ label: l, rows: n, size: r = "row", open: t, defaultOpen: i = !1, onOpenChange: c, align: s = "end", linkComponent: m }) {
+  const [p, u] = y(i), f = t ?? p;
+  return /* @__PURE__ */ e(
+    z,
+    {
+      align: s,
+      open: f,
+      onOpenChange: (k) => {
+        t === void 0 && u(k), c == null || c(k);
+      },
+      trigger: /* @__PURE__ */ e(
+        T,
+        {
+          label: l,
+          icon: /* @__PURE__ */ e(A, {}),
+          variant: r === "page" ? "outline" : "ghost",
+          size: r === "page" ? "lg" : "sm",
+          tooltipSuppressed: f
+        }
+      ),
+      popover: /* @__PURE__ */ e(b, { label: l, padding: "menu", className: a.overflowPanel, children: /* @__PURE__ */ e(R, { rows: n, linkComponent: m }) })
+    }
+  );
+}
+function X({ label: l, activeCount: n, activeLabel: r, open: t = !1, ...i }) {
+  return /* @__PURE__ */ e(
+    h,
+    {
+      variant: "outline",
+      size: "md",
+      icon: /* @__PURE__ */ e(g, {}),
+      "aria-expanded": t,
+      trailingIcon: n ? /* @__PURE__ */ e(H, { label: r, children: n }) : void 0,
+      ...i,
+      children: l
+    }
+  );
+}
+function Y({ label: l, groups: n, onToggle: r, clearLabel: t, onClear: i }) {
+  return /* @__PURE__ */ o(b, { label: l, padding: "none", className: a.filterPanel, children: [
+    /* @__PURE__ */ e("div", { className: a.filterGroups, children: n.map((c) => /* @__PURE__ */ o("fieldset", { className: a.filterGroup, children: [
+      /* @__PURE__ */ e("legend", { className: a.filterLegend, children: c.label }),
+      c.options.map((s) => /* @__PURE__ */ o("label", { className: a.filterOption, children: [
+        /* @__PURE__ */ e(P, { checked: s.checked, label: typeof s.label == "string" ? s.label : c.label, hideLabel: !0, onChange: () => r == null ? void 0 : r(c.key, s.key) }),
+        /* @__PURE__ */ e("span", { className: a.filterOptionLabel, children: s.label }),
+        s.count !== void 0 && /* @__PURE__ */ e("span", { className: a.filterCount, children: s.count })
+      ] }, s.key))
+    ] }, c.key)) }),
+    t && /* @__PURE__ */ e("div", { className: a.filterFoot, children: /* @__PURE__ */ e(v, { onClick: i, children: t }) })
+  ] });
+}
+function P({ checked: l, label: n, hideLabel: r = !1, disabled: t = !1, onChange: i, className: c }) {
+  return /* @__PURE__ */ o("span", { className: d(a.checkboxWrap, c), children: [
+    /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        role: "checkbox",
+        "aria-checked": l,
+        "aria-label": r ? n : void 0,
+        disabled: t,
+        className: a.checkbox,
+        onClick: i ? () => i(l !== !0) : void 0,
+        children: [
+          l === !0 && /* @__PURE__ */ e(N, {}),
+          l === "mixed" && /* @__PURE__ */ e(C, {})
+        ]
+      }
+    ),
+    !r && /* @__PURE__ */ e("span", { className: a.checkboxLabel, children: n })
+  ] });
+}
+function Z({ count: l, selectedText: n, actions: r, clearLabel: t, onClear: i, label: c, className: s }) {
+  return l < 1 ? null : /* @__PURE__ */ o("div", { role: "region", "aria-label": c, className: d(a.bulkBar, s), children: [
+    /* @__PURE__ */ e("span", { className: a.bulkCount, "aria-live": "polite", children: n }),
+    /* @__PURE__ */ e("span", { className: a.bulkDivider, "aria-hidden": "true" }),
+    /* @__PURE__ */ e("div", { className: a.bulkActions, children: r }),
+    /* @__PURE__ */ e("button", { type: "button", className: a.bulkClear, onClick: i, children: t })
+  ] });
+}
+function _({ children: l, icon: n, ...r }) {
+  return /* @__PURE__ */ o("button", { type: "button", className: a.bulkAction, ...r, children: [
+    n,
+    l
+  ] });
+}
+function $(l) {
+  if (l.rows !== void 0) return /* @__PURE__ */ e(F, { ...l });
+  if (l.size === "hero") return /* @__PURE__ */ e(w, { ...l });
+  const { icon: n, title: r, caption: t, action: i, linkComponent: c, className: s } = l;
+  return /* @__PURE__ */ o("section", { className: d(a.nextStep, s), children: [
+    /* @__PURE__ */ e("span", { className: a.nextIcon, children: n }),
+    /* @__PURE__ */ o("div", { className: a.nextText, children: [
+      /* @__PURE__ */ e("h2", { className: a.nextTitle, children: r }),
+      t && /* @__PURE__ */ e("p", { className: a.nextCaption, children: t })
+    ] }),
+    /* @__PURE__ */ e(h, { variant: "primary", size: "lg", href: i.href, linkComponent: c, onClick: i.onClick, children: i.label })
+  ] });
+}
+function w({ icon: l, title: n, caption: r, action: t, subject: i, status: c, linkComponent: s, className: m }) {
+  return /* @__PURE__ */ o(x, { as: "section", surface: "raised", padding: "none", className: d(a.nextHero, m), children: [
+    /* @__PURE__ */ o("div", { className: a.nextHeroHead, children: [
+      /* @__PURE__ */ o("span", { className: a.nextHeroSubject, children: [
+        /* @__PURE__ */ e(B, { children: l }),
+        i !== void 0 && /* @__PURE__ */ e("span", { className: a.nextHeroSubjectText, children: i })
+      ] }),
+      c && /* @__PURE__ */ e(L, { tone: c.tone, children: c.label })
+    ] }),
+    /* @__PURE__ */ o("div", { className: a.nextHeroBody, children: [
+      /* @__PURE__ */ o("div", { className: a.nextText, children: [
+        /* @__PURE__ */ e("h2", { className: a.nextHeroTitle, children: n }),
+        r && /* @__PURE__ */ e("p", { className: a.nextHeroCaption, children: r })
+      ] }),
+      /* @__PURE__ */ e(h, { variant: "primary", size: "lg", href: t.href, linkComponent: s, onClick: t.onClick, children: t.label })
+    ] })
+  ] });
+}
+function F({ rows: l, label: n, linkComponent: r, className: t }) {
+  return /* @__PURE__ */ e(x, { as: "section", surface: "raised", padding: "none", "aria-label": n, className: d(a.nextList, t), children: /* @__PURE__ */ e("ul", { className: a.nextListRows, children: l.map((i) => /* @__PURE__ */ o("li", { className: a.nextRow, children: [
+    /* @__PURE__ */ e(B, { children: i.icon }),
+    /* @__PURE__ */ o("div", { className: a.nextText, children: [
+      /* @__PURE__ */ e("span", { className: a.nextRowTitle, children: i.title }),
+      i.caption && /* @__PURE__ */ e("span", { className: a.nextRowCaption, children: i.caption })
+    ] }),
+    i.trailing !== void 0 && /* @__PURE__ */ e("span", { className: a.nextRowTrailing, children: i.trailing }),
+    i.action && /* @__PURE__ */ e("span", { className: a.nextRowAction, children: /* @__PURE__ */ e(h, { variant: "outline", size: "lg", fullWidth: !0, href: i.action.href, linkComponent: r, onClick: i.action.onClick, children: i.action.label }) })
+  ] }, i.key)) }) });
+}
+function ee({ children: l, detail: n, className: r }) {
+  return /* @__PURE__ */ o("p", { role: "status", className: d(a.allSet, r), children: [
+    /* @__PURE__ */ e("span", { className: a.allSetDot, "aria-hidden": "true", children: /* @__PURE__ */ e(N, { size: 12 }) }),
+    /* @__PURE__ */ o("span", { className: a.allSetLines, children: [
+      /* @__PURE__ */ e("span", { className: a.allSetText, children: l }),
+      n && /* @__PURE__ */ e("span", { className: a.allSetDetail, children: n })
+    ] })
+  ] });
+}
+function ae(l) {
+  if (l.state === "empty") return /* @__PURE__ */ e(I, { ...l });
+  const { state: n, mark: r, title: t, body: i, action: c, secondary: s, tag: m, linkComponent: p, className: u } = l;
+  return /* @__PURE__ */ o("section", { className: d(a.availability, u), "data-state": n, children: [
+    /* @__PURE__ */ e("span", { className: a.availabilityMark, children: r }),
+    /* @__PURE__ */ o("div", { className: a.availabilityTitleRow, children: [
+      /* @__PURE__ */ e("h1", { className: a.availabilityTitle, children: t }),
+      m
+    ] }),
+    /* @__PURE__ */ e("p", { className: a.availabilityBody, children: i }),
+    /* @__PURE__ */ o("div", { className: a.availabilityActions, children: [
+      /* @__PURE__ */ e(
+        h,
+        {
+          variant: n === "soon" ? "outline" : "primary",
+          size: "lg",
+          href: c.href,
+          linkComponent: p,
+          onClick: c.onClick,
+          "aria-pressed": n === "soon" ? !!c.pressed : void 0,
+          icon: n === "soon" && c.pressed ? /* @__PURE__ */ e(N, {}) : void 0,
+          children: c.label
+        }
+      ),
+      s && /* @__PURE__ */ e(v, { href: s.href, linkComponent: p, onClick: s.onClick, children: s.label })
+    ] })
+  ] });
+}
+function I({ state: l, icon: n, title: r, body: t, action: i, linkComponent: c, className: s }) {
+  return /* @__PURE__ */ e(D, { "data-state": l, icon: n, title: r, body: t, action: i, linkComponent: c, className: s });
+}
+export {
+  ee as BackdropAllSet,
+  ae as BackdropAvailability,
+  _ as BackdropBulkAction,
+  Z as BackdropBulkBar,
+  P as BackdropCheckbox,
+  U as BackdropDisclosure,
+  X as BackdropFilterButton,
+  Y as BackdropFilterPopover,
+  $ as BackdropNextStepCard,
+  V as BackdropOverflowMenu
+};
+//# sourceMappingURL=BackdropPatterns.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropPatterns.js","sources":["../../../src/components/Backdrop/BackdropPatterns.tsx"],"sourcesContent":["'use client'\n\nimport { useState, type ButtonHTMLAttributes, type ElementType, type ReactNode } from 'react'\nimport styles from './BackdropPatterns.module.css'\nimport { cx } from './cx'\nimport { Check, ChevronDown, Dots, Filter, Minus } from './icons'\nimport { BackdropBadge, BackdropPill, type BackdropPillTone } from './BackdropBasics'\nimport { BackdropButton, BackdropIconButton, BackdropTextLink } from './BackdropButton'\nimport { BackdropMenuList, BackdropPopover, BackdropPopoverAnchor, type BackdropMenuRow } from './BackdropOverlays'\nimport { BackdropCard } from './BackdropPage'\nimport { BackdropEmptyState, BackdropIconTile } from './BackdropDisplay'\n\n/*\n * Jamal's simplicity rules (9 Nov), as components. Each one exists to keep a\n * screen quiet by default:\n *\n *   Disclosure     extra detail most people skip, expanded in place. At most\n *                  two levels deep, and the type says so.\n *   Overflow menu  the \"…\" that holds every action but the one visible.\n *   Filter         lists show no filter bar; one button opens the filters.\n *   Selection      a checkbox per row, and a bulk bar only once one is ticked.\n *   Next step      one card per screen, holding the one orange button, only\n *                  when something needs the person; otherwise a calm line.\n *   Availability   one layout for Coming soon, Not on your plan, Not set up.\n */\n\n/* ── Disclosure ────────────────────────────────────────────────────────── */\n\nexport interface BackdropDisclosureProps {\n  /** The labelled link: \"More options\", \"How we scored this\". Never a bare icon. */\n  summary: ReactNode\n  /** A short fact after the label naming what is inside: \"Send window, daily limit\". */\n  hint?: ReactNode\n  children: ReactNode\n  /**\n   * 1 for a disclosure on the page, 2 for one inside another. There is no 3:\n   * the depth rule caps disclosure at two levels, and the type enforces it.\n   */\n  level?: 1 | 2\n  /** Open on first render. The element then manages itself (native details). */\n  defaultOpen?: boolean\n  className?: string\n}\n\n/** Native <details>: keyboard, state and announcement come from the browser, no script. */\nexport function BackdropDisclosure({ summary, hint, children, level = 1, defaultOpen = false, className }: BackdropDisclosureProps) {\n  return (\n    <details className={cx(styles.disclosure, level === 2 && styles.level2, className)} open={defaultOpen || undefined}>\n      <summary className={styles.summary}>\n        <span className={styles.summaryLabel}>{summary}</span>\n        <span className={styles.chevron}>\n          <ChevronDown />\n        </span>\n        {hint && <span className={styles.hint}>{hint}</span>}\n      </summary>\n      <div className={styles.disclosureBody}>{children}</div>\n    </details>\n  )\n}\n\n/* ── Overflow menu ─────────────────────────────────────────────────────── */\n\nexport interface BackdropOverflowMenuProps {\n  /** The button's name: \"More actions\", \"More actions for Hotels in the Alps\". */\n  label: string\n  rows: BackdropMenuRow[]\n  /** `page`: a 40px outline button in a page header. `row`: a 32px ghost in a list row. */\n  size?: 'page' | 'row'\n  /** Controlled open state. Omit it and the menu keeps its own. */\n  open?: boolean\n  /** Starting state when uncontrolled: a story draws the menu open with this. */\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  align?: 'start' | 'end'\n  linkComponent?: ElementType\n}\n\n/*\n * The \"…\" button and its rows, with BackdropPopoverAnchor's behaviour: Escape,\n * an outside click and choosing a row close it, the arrow keys move between\n * rows, and focus returns to the button. The tooltip stands down while the\n * menu is open, so the two never overlap; it is hidden, not removed, so the\n * button is never remounted under the person's focus.\n */\nexport function BackdropOverflowMenu({ label, rows, size = 'row', open, defaultOpen = false, onOpenChange, align = 'end', linkComponent }: BackdropOverflowMenuProps) {\n  const [ownOpen, setOwnOpen] = useState(defaultOpen)\n  const isOpen = open ?? ownOpen\n  return (\n    <BackdropPopoverAnchor\n      align={align}\n      open={isOpen}\n      onOpenChange={(next) => {\n        if (open === undefined) setOwnOpen(next)\n        onOpenChange?.(next)\n      }}\n      trigger={\n        <BackdropIconButton\n          label={label}\n          icon={<Dots />}\n          variant={size === 'page' ? 'outline' : 'ghost'}\n          size={size === 'page' ? 'lg' : 'sm'}\n          tooltipSuppressed={isOpen}\n        />\n      }\n      popover={\n        <BackdropPopover label={label} padding=\"menu\" className={styles.overflowPanel}>\n          <BackdropMenuList rows={rows} linkComponent={linkComponent} />\n        </BackdropPopover>\n      }\n    />\n  )\n}\n\n/* ── Filter ────────────────────────────────────────────────────────────── */\n\nexport interface BackdropFilterButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  /** \"Filter\". */\n  label: string\n  /** How many filters are on. 0 or undefined: no badge. */\n  activeCount?: number\n  /** Spoken with the count: \"2 filters on\". */\n  activeLabel?: string\n  open?: boolean\n}\n\nexport function BackdropFilterButton({ label, activeCount, activeLabel, open = false, ...rest }: BackdropFilterButtonProps) {\n  return (\n    <BackdropButton\n      variant=\"outline\"\n      size=\"md\"\n      icon={<Filter />}\n      aria-expanded={open}\n      trailingIcon={activeCount ? <BackdropBadge label={activeLabel}>{activeCount}</BackdropBadge> : undefined}\n      {...rest}\n    >\n      {label}\n    </BackdropButton>\n  )\n}\n\nexport interface BackdropFilterOption {\n  key: string\n  label: ReactNode\n  checked: boolean\n  count?: ReactNode\n}\n\nexport interface BackdropFilterPopoverProps {\n  /** The panel's name (\"Filters\"). */\n  label: string\n  groups: { key: string; label: string; options: BackdropFilterOption[] }[]\n  onToggle?: (groupKey: string, optionKey: string) => void\n  /** \"Clear all\", a text link at the foot. */\n  clearLabel?: string\n  onClear?: () => void\n}\n\n/** The filters a list hides until asked: grouped checkboxes, one Clear link. Filters apply as they are ticked. */\nexport function BackdropFilterPopover({ label, groups, onToggle, clearLabel, onClear }: BackdropFilterPopoverProps) {\n  return (\n    <BackdropPopover label={label} padding=\"none\" className={styles.filterPanel}>\n      <div className={styles.filterGroups}>\n        {groups.map((group) => (\n          <fieldset key={group.key} className={styles.filterGroup}>\n            <legend className={styles.filterLegend}>{group.label}</legend>\n            {group.options.map((option) => (\n              <label key={option.key} className={styles.filterOption}>\n                <BackdropCheckbox checked={option.checked} label={typeof option.label === 'string' ? option.label : group.label} hideLabel onChange={() => onToggle?.(group.key, option.key)} />\n                <span className={styles.filterOptionLabel}>{option.label}</span>\n                {option.count !== undefined && <span className={styles.filterCount}>{option.count}</span>}\n              </label>\n            ))}\n          </fieldset>\n        ))}\n      </div>\n      {clearLabel && (\n        <div className={styles.filterFoot}>\n          <BackdropTextLink onClick={onClear}>{clearLabel}</BackdropTextLink>\n        </div>\n      )}\n    </BackdropPopover>\n  )\n}\n\n/* ── Selection ─────────────────────────────────────────────────────────── */\n\nexport interface BackdropCheckboxProps {\n  checked: boolean | 'mixed'\n  /** The checkbox's name: \"Select Hotels in the Alps\", \"Select all\". */\n  label: string\n  /** The label is printed elsewhere (a row's name); keep it for assistive tech only. */\n  hideLabel?: boolean\n  disabled?: boolean\n  onChange?: (checked: boolean) => void\n  className?: string\n}\n\n/*\n * An 18px box, ink when ticked. A button with role=\"checkbox\" rather than an\n * <input>, because \"mixed\" (the header's select-all over a partial selection)\n * is a property a native checkbox only takes from script.\n */\nexport function BackdropCheckbox({ checked, label, hideLabel = false, disabled = false, onChange, className }: BackdropCheckboxProps) {\n  return (\n    <span className={cx(styles.checkboxWrap, className)}>\n      <button\n        type=\"button\"\n        role=\"checkbox\"\n        aria-checked={checked}\n        aria-label={hideLabel ? label : undefined}\n        disabled={disabled}\n        className={styles.checkbox}\n        onClick={onChange ? () => onChange(checked !== true) : undefined}\n      >\n        {checked === true && <Check />}\n        {checked === 'mixed' && <Minus />}\n      </button>\n      {!hideLabel && <span className={styles.checkboxLabel}>{label}</span>}\n    </span>\n  )\n}\n\nexport interface BackdropBulkBarProps {\n  /** How many rows are ticked. The bar renders nothing at 0. */\n  count: number\n  /** \"3 selected\", formatted by the caller. */\n  selectedText: ReactNode\n  /** The bulk actions, as ink-bar buttons (BackdropBulkAction). */\n  actions: ReactNode\n  /** \"Clear selection\". */\n  clearLabel: string\n  onClear?: () => void\n  /** The region's name (\"Bulk actions\"). */\n  label: string\n  className?: string\n}\n\n/** An ink bar floating at the foot of the list, only while one row or more is selected. */\nexport function BackdropBulkBar({ count, selectedText, actions, clearLabel, onClear, label, className }: BackdropBulkBarProps) {\n  if (count < 1) return null\n  return (\n    <div role=\"region\" aria-label={label} className={cx(styles.bulkBar, className)}>\n      <span className={styles.bulkCount} aria-live=\"polite\">\n        {selectedText}\n      </span>\n      <span className={styles.bulkDivider} aria-hidden=\"true\" />\n      <div className={styles.bulkActions}>{actions}</div>\n      <button type=\"button\" className={styles.bulkClear} onClick={onClear}>\n        {clearLabel}\n      </button>\n    </div>\n  )\n}\n\nexport function BackdropBulkAction({ children, icon, ...rest }: ButtonHTMLAttributes<HTMLButtonElement> & { icon?: ReactNode }) {\n  return (\n    <button type=\"button\" className={styles.bulkAction} {...rest}>\n      {icon}\n      {children}\n    </button>\n  )\n}\n\n/* ── Next step ─────────────────────────────────────────────────────────── */\n\n/** The single card: `default` is the sunken strip, `hero` the raised card that leads an overview. */\nexport interface BackdropNextStepSingleProps {\n  rows?: never\n  /** 20px icon in the white tile (18px in the hero's 36px tile). */\n  icon: ReactNode\n  /** What needs the person: \"5 messages to approve\". */\n  title: ReactNode\n  /** One fact: \"From 2 campaigns\". */\n  caption?: ReactNode\n  /** The screen's ONE orange button. */\n  action: { label: string; onClick?: () => void; href?: string }\n  /** `default` (the strip) or `hero` (a raised card with a head row and a 28px title). */\n  size?: 'default' | 'hero'\n  /** Hero only: what the card is about, beside the icon tile in the head row (\"Electricity\"). */\n  subject?: ReactNode\n  /** Hero only: a status pill at the head row's right (\"Closes in 4 days\"), drawn with BackdropPill. */\n  status?: { label: ReactNode; tone?: BackdropPillTone }\n  label?: never\n  linkComponent?: ElementType\n  className?: string\n}\n\nexport interface BackdropNextStepRow {\n  key: string\n  /** 18px icon in the 36px tile. */\n  icon: ReactNode\n  /** \"Oak boards for chairs\". */\n  title: ReactNode\n  /** One fact: \"2 offers within budget · closes 30 Nov\". */\n  caption?: ReactNode\n  /** The row's outline button. Never orange: the screen's one orange lives elsewhere. */\n  action?: { label: string; onClick?: () => void; href?: string }\n  /** Anything before the action: a small bar and score, a date. */\n  trailing?: ReactNode\n}\n\n/** The action list: several rows, each an icon tile, two lines of text and an outline action, in one raised card. */\nexport interface BackdropNextStepListProps {\n  rows: BackdropNextStepRow[]\n  /** The list's name (\"Also needs you\"). */\n  label: string\n  icon?: never\n  title?: never\n  action?: never\n  size?: never\n  linkComponent?: ElementType\n  className?: string\n}\n\nexport type BackdropNextStepCardProps = BackdropNextStepSingleProps | BackdropNextStepListProps\n\n/** One per screen, and only when something needs the person (research addition, 9 Nov). */\nexport function BackdropNextStepCard(props: BackdropNextStepCardProps) {\n  if (props.rows !== undefined) return <NextStepList {...props} />\n  if (props.size === 'hero') return <NextStepHero {...props} />\n  const { icon, title, caption, action, linkComponent, className } = props\n  return (\n    <section className={cx(styles.nextStep, className)}>\n      <span className={styles.nextIcon}>{icon}</span>\n      <div className={styles.nextText}>\n        <h2 className={styles.nextTitle}>{title}</h2>\n        {caption && <p className={styles.nextCaption}>{caption}</p>}\n      </div>\n      <BackdropButton variant=\"primary\" size=\"lg\" href={action.href} linkComponent={linkComponent} onClick={action.onClick}>\n        {action.label}\n      </BackdropButton>\n    </section>\n  )\n}\n\n/* The hero: a head row (tile, subject, pill), then the title and caption with\n   the orange button bottom-right (Score overview, Final). */\nfunction NextStepHero({ icon, title, caption, action, subject, status, linkComponent, className }: BackdropNextStepSingleProps) {\n  return (\n    <BackdropCard as=\"section\" surface=\"raised\" padding=\"none\" className={cx(styles.nextHero, className)}>\n      <div className={styles.nextHeroHead}>\n        <span className={styles.nextHeroSubject}>\n          <BackdropIconTile>{icon}</BackdropIconTile>\n          {subject !== undefined && <span className={styles.nextHeroSubjectText}>{subject}</span>}\n        </span>\n        {status && <BackdropPill tone={status.tone}>{status.label}</BackdropPill>}\n      </div>\n      <div className={styles.nextHeroBody}>\n        <div className={styles.nextText}>\n          <h2 className={styles.nextHeroTitle}>{title}</h2>\n          {caption && <p className={styles.nextHeroCaption}>{caption}</p>}\n        </div>\n        <BackdropButton variant=\"primary\" size=\"lg\" href={action.href} linkComponent={linkComponent} onClick={action.onClick}>\n          {action.label}\n        </BackdropButton>\n      </div>\n    </BackdropCard>\n  )\n}\n\nfunction NextStepList({ rows, label, linkComponent, className }: BackdropNextStepListProps) {\n  return (\n    <BackdropCard as=\"section\" surface=\"raised\" padding=\"none\" aria-label={label} className={cx(styles.nextList, className)}>\n      <ul className={styles.nextListRows}>\n        {rows.map((row) => (\n          <li key={row.key} className={styles.nextRow}>\n            <BackdropIconTile>{row.icon}</BackdropIconTile>\n            <div className={styles.nextText}>\n              <span className={styles.nextRowTitle}>{row.title}</span>\n              {row.caption && <span className={styles.nextRowCaption}>{row.caption}</span>}\n            </div>\n            {row.trailing !== undefined && <span className={styles.nextRowTrailing}>{row.trailing}</span>}\n            {row.action && (\n              <span className={styles.nextRowAction}>\n                <BackdropButton variant=\"outline\" size=\"lg\" fullWidth href={row.action.href} linkComponent={linkComponent} onClick={row.action.onClick}>\n                  {row.action.label}\n                </BackdropButton>\n              </span>\n            )}\n          </li>\n        ))}\n      </ul>\n    </BackdropCard>\n  )\n}\n\nexport interface BackdropAllSetProps {\n  /** \"Nothing needs you right now.\" A plain fact, never cheerleading (copy guide). */\n  children: ReactNode\n  /** The sub-line under it: what will bring the person back (\"We'll tell you when a supplier clears the bar.\"). */\n  detail?: ReactNode\n  className?: string\n}\n\n/*\n * What stands where the next-step card would, when nothing needs the person: a\n * calm status line, no card, no button. The page's core action then becomes its\n * one orange button (research addition, 9 Nov).\n */\nexport function BackdropAllSet({ children, detail, className }: BackdropAllSetProps) {\n  return (\n    <p role=\"status\" className={cx(styles.allSet, className)}>\n      <span className={styles.allSetDot} aria-hidden=\"true\">\n        <Check size={12} />\n      </span>\n      <span className={styles.allSetLines}>\n        <span className={styles.allSetText}>{children}</span>\n        {detail && <span className={styles.allSetDetail}>{detail}</span>}\n      </span>\n    </p>\n  )\n}\n\n/* ── Availability ──────────────────────────────────────────────────────── */\n\nexport interface BackdropAvailabilityAppProps {\n  /**\n   * Which of the three. The layout is the same; the state only decides the\n   * button's weight -- `soon` is an outline \"Notify me\" (nothing to do yet), the\n   * other two are the screen's orange action. Keeps \"not built\" and \"not\n   * entitled\" apart, as the hub's cardState does.\n   */\n  state: 'soon' | 'not-on-plan' | 'not-set-up'\n  /** The app's mark, 48px. */\n  mark: ReactNode\n  /** \"Brokers is coming soon\", \"Brokers is not on your plan\", \"Set up Outbound\". */\n  title: ReactNode\n  /** One sentence, ≤ 15 words. */\n  body: ReactNode\n  action: { label: string; onClick?: () => void; href?: string; pressed?: boolean }\n  /** A second, quieter way out: \"View plans\", \"Back to home\". */\n  secondary?: { label: string; onClick?: () => void; href?: string }\n  /** A tag beside the title: a BackdropSoonTag for `soon`. */\n  tag?: ReactNode\n  icon?: never\n  linkComponent?: ElementType\n  className?: string\n}\n\n/**\n * `empty`: the one empty-state design (ADR-0017, D12) -- a 48px icon tile, a\n * 20px title, one line of help, at most one action. A list or page with\n * nothing in it yet (\"No posts published yet\"). There is no second action and\n * no tag, and the type says so.\n */\nexport interface BackdropAvailabilityEmptyProps {\n  state: 'empty'\n  /** 20px icon, drawn in the 48px tile. */\n  icon: ReactNode\n  /** \"No posts published yet\". */\n  title: ReactNode\n  /** One line: \"Approve a post to see how it does.\" */\n  body: ReactNode\n  /** At most one, and the screen's orange one when present. */\n  action?: { label: string; onClick?: () => void; href?: string }\n  mark?: never\n  secondary?: never\n  tag?: never\n  linkComponent?: ElementType\n  className?: string\n}\n\nexport type BackdropAvailabilityProps = BackdropAvailabilityAppProps | BackdropAvailabilityEmptyProps\n\nexport function BackdropAvailability(props: BackdropAvailabilityProps) {\n  if (props.state === 'empty') return <AvailabilityEmpty {...props} />\n  const { state, mark, title, body, action, secondary, tag, linkComponent, className } = props\n  return (\n    <section className={cx(styles.availability, className)} data-state={state}>\n      <span className={styles.availabilityMark}>{mark}</span>\n      <div className={styles.availabilityTitleRow}>\n        <h1 className={styles.availabilityTitle}>{title}</h1>\n        {tag}\n      </div>\n      <p className={styles.availabilityBody}>{body}</p>\n      <div className={styles.availabilityActions}>\n        <BackdropButton\n          variant={state === 'soon' ? 'outline' : 'primary'}\n          size=\"lg\"\n          href={action.href}\n          linkComponent={linkComponent}\n          onClick={action.onClick}\n          aria-pressed={state === 'soon' ? Boolean(action.pressed) : undefined}\n          icon={state === 'soon' && action.pressed ? <Check /> : undefined}\n        >\n          {action.label}\n        </BackdropButton>\n        {secondary && (\n          <BackdropTextLink href={secondary.href} linkComponent={linkComponent} onClick={secondary.onClick}>\n            {secondary.label}\n          </BackdropTextLink>\n        )}\n      </div>\n    </section>\n  )\n}\n\n/* The one empty-state design lives in BackdropEmptyState (ADR-0017, D12); this\n   state renders through it, marked so a caller can tell the states apart. */\nfunction AvailabilityEmpty({ state, icon, title, body, action, linkComponent, className }: BackdropAvailabilityEmptyProps) {\n  return <BackdropEmptyState data-state={state} icon={icon} title={title} body={body} action={action} linkComponent={linkComponent} className={className} />\n}\n"],"names":["BackdropDisclosure","summary","hint","children","level","defaultOpen","className","jsxs","cx","styles","jsx","ChevronDown","BackdropOverflowMenu","label","rows","size","open","onOpenChange","align","linkComponent","ownOpen","setOwnOpen","useState","isOpen","BackdropPopoverAnchor","next","BackdropIconButton","Dots","BackdropPopover","BackdropMenuList","BackdropFilterButton","activeCount","activeLabel","rest","BackdropButton","Filter","BackdropBadge","BackdropFilterPopover","groups","onToggle","clearLabel","onClear","group","option","BackdropCheckbox","BackdropTextLink","checked","hideLabel","disabled","onChange","Check","Minus","BackdropBulkBar","count","selectedText","actions","BackdropBulkAction","icon","BackdropNextStepCard","props","NextStepList","NextStepHero","title","caption","action","subject","status","BackdropCard","BackdropIconTile","BackdropPill","row","BackdropAllSet","detail","BackdropAvailability","AvailabilityEmpty","state","mark","body","secondary","tag","BackdropEmptyState"],"mappings":"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"}

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

@@ -0,0 +1,114 @@
+const t = "_disclosure_1nhg8_5", n = "_summary_1nhg8_10", e = "_summaryLabel_1nhg8_27", o = "_chevron_1nhg8_41", _ = "_hint_1nhg8_50", l = "_disclosureBody_1nhg8_61", i = "_level2_1nhg8_70", a = "_overflowPanel_1nhg8_82", c = "_filterPanel_1nhg8_88", s = "_filterGroups_1nhg8_92", r = "_filterGroup_1nhg8_92", x = "_filterLegend_1nhg8_107", h = "_filterOption_1nhg8_115", b = "_filterOptionLabel_1nhg8_132", g = "_filterCount_1nhg8_136", u = "_filterFoot_1nhg8_142", y = "_checkboxWrap_1nhg8_152", k = "_checkbox_1nhg8_152", v = "_checkboxLabel_1nhg8_199", f = "_bulkBar_1nhg8_206", p = "_bulkCount_1nhg8_230", d = "_bulkDivider_1nhg8_236", w = "_bulkActions_1nhg8_242", H = "_bulkAction_1nhg8_242", T = "_bulkClear_1nhg8_248", L = "_nextStep_1nhg8_284", R = "_nextIcon_1nhg8_296", S = "_nextText_1nhg8_308", C = "_nextTitle_1nhg8_316", m = "_nextCaption_1nhg8_325", A = "_allSet_1nhg8_332", B = "_allSetDot_1nhg8_344", D = "_allSetLines_1nhg8_355", j = "_allSetDetail_1nhg8_360", G = "_availability_1nhg8_367", O = "_availabilityMark_1nhg8_379", P = "_availabilityTitleRow_1nhg8_391", F = "_availabilityTitle_1nhg8_391", I = "_availabilityBody_1nhg8_406", M = "_availabilityActions_1nhg8_413", W = "_nextHero_1nhg8_438", q = "_nextHeroHead_1nhg8_445", z = "_nextHeroSubject_1nhg8_452", E = "_nextHeroSubjectText_1nhg8_459", J = "_nextHeroBody_1nhg8_465", K = "_nextHeroTitle_1nhg8_472", N = "_nextHeroCaption_1nhg8_481", Q = "_nextList_1nhg8_490", U = "_nextListRows_1nhg8_494", V = "_nextRow_1nhg8_502", X = "_nextRowTitle_1nhg8_513", Y = "_nextRowCaption_1nhg8_519", Z = "_nextRowTrailing_1nhg8_525", $ = "_nextRowAction_1nhg8_535", tt = {
+  disclosure: t,
+  summary: n,
+  summaryLabel: e,
+  chevron: o,
+  hint: _,
+  disclosureBody: l,
+  level2: i,
+  overflowPanel: a,
+  filterPanel: c,
+  filterGroups: s,
+  filterGroup: r,
+  filterLegend: x,
+  filterOption: h,
+  filterOptionLabel: b,
+  filterCount: g,
+  filterFoot: u,
+  checkboxWrap: y,
+  checkbox: k,
+  checkboxLabel: v,
+  bulkBar: f,
+  bulkCount: p,
+  bulkDivider: d,
+  bulkActions: w,
+  bulkAction: H,
+  bulkClear: T,
+  nextStep: L,
+  nextIcon: R,
+  nextText: S,
+  nextTitle: C,
+  nextCaption: m,
+  allSet: A,
+  allSetDot: B,
+  allSetLines: D,
+  allSetDetail: j,
+  availability: G,
+  availabilityMark: O,
+  availabilityTitleRow: P,
+  availabilityTitle: F,
+  availabilityBody: I,
+  availabilityActions: M,
+  nextHero: W,
+  nextHeroHead: q,
+  nextHeroSubject: z,
+  nextHeroSubjectText: E,
+  nextHeroBody: J,
+  nextHeroTitle: K,
+  nextHeroCaption: N,
+  nextList: Q,
+  nextListRows: U,
+  nextRow: V,
+  nextRowTitle: X,
+  nextRowCaption: Y,
+  nextRowTrailing: Z,
+  nextRowAction: $
+};
+export {
+  A as allSet,
+  j as allSetDetail,
+  B as allSetDot,
+  D as allSetLines,
+  G as availability,
+  M as availabilityActions,
+  I as availabilityBody,
+  O as availabilityMark,
+  F as availabilityTitle,
+  P as availabilityTitleRow,
+  H as bulkAction,
+  w as bulkActions,
+  f as bulkBar,
+  T as bulkClear,
+  p as bulkCount,
+  d as bulkDivider,
+  k as checkbox,
+  v as checkboxLabel,
+  y as checkboxWrap,
+  o as chevron,
+  tt as default,
+  t as disclosure,
+  l as disclosureBody,
+  g as filterCount,
+  u as filterFoot,
+  r as filterGroup,
+  s as filterGroups,
+  x as filterLegend,
+  h as filterOption,
+  b as filterOptionLabel,
+  c as filterPanel,
+  _ as hint,
+  i as level2,
+  m as nextCaption,
+  W as nextHero,
+  J as nextHeroBody,
+  N as nextHeroCaption,
+  q as nextHeroHead,
+  z as nextHeroSubject,
+  E as nextHeroSubjectText,
+  K as nextHeroTitle,
+  R as nextIcon,
+  Q as nextList,
+  U as nextListRows,
+  V as nextRow,
+  $ as nextRowAction,
+  Y as nextRowCaption,
+  X as nextRowTitle,
+  Z as nextRowTrailing,
+  L as nextStep,
+  S as nextText,
+  C as nextTitle,
+  a as overflowPanel,
+  n as summary,
+  e as summaryLabel
+};
+//# sourceMappingURL=BackdropPatterns.module.css.js.map

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

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

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

@@ -0,0 +1,63 @@
+import { ElementType, ReactNode } from 'react';
+export interface BackdropRailItem {
+    key: string;
+    label: string;
+    /** Global items: an 18px stroke icon. */
+    icon: ReactNode;
+    href?: string;
+    onClick?: () => void;
+    /** This is the page on screen: the orange marker and the strong ink. */
+    active?: boolean;
+    /** An unread count on the icon's corner (Inbox). */
+    badge?: ReactNode;
+    /** Spoken after the label when there is a badge: "8 unread". */
+    badgeLabel?: string;
+}
+export interface BackdropRailApp {
+    key: string;
+    label: string;
+    /** The app's 32px mark (ProductMark). */
+    mark: ReactNode;
+    href?: string;
+    onClick?: () => void;
+    active?: boolean;
+}
+export interface BackdropRailProps {
+    /** The rail's landmark name. */
+    label: string;
+    /** Home, Wallet, Inbox, Events. */
+    top: BackdropRailItem[];
+    /** The person's pinned apps, at most four (round 6, All apps: "Pin up to 4"). */
+    apps: BackdropRailApp[];
+    /** The fifth tile, which opens the All apps popover. Its `mark` is an icon. */
+    allApps: BackdropRailApp & {
+        pressed?: boolean;
+    };
+    /** Docs, and Settings on the hub only (round 4, correction 1). */
+    bottom: BackdropRailItem[];
+    /**
+     * The All apps panel. Pass it and the rail anchors it to the fifth tile with
+     * the machinery the strip's popovers already use: it opens beside the tile,
+     * Escape and a click outside close it, and focus returns to the tile.
+     *
+     * Without it the rail draws exactly as it always has and the panel is the
+     * host's to place — which it could not do properly, because the rail draws
+     * the tile itself and nothing outside could wrap it.
+     */
+    allAppsPopover?: ReactNode;
+    /** Controlled open state for that panel. Omit it and the rail keeps its own. */
+    allAppsOpen?: boolean;
+    /** Every open and close of the All apps panel, however it was caused. */
+    onAllAppsOpenChange?: (open: boolean) => void;
+    /**
+     * The All apps panel's key in a surrounding BackdropChrome. Its open state is
+     * then the chrome's, so a control in the page opens it with
+     * `useBackdropPanel(allAppsPanel)` and opening another chrome panel closes
+     * it. Takes precedence over `allAppsOpen`. Ignored outside a BackdropChrome.
+     */
+    allAppsPanel?: string;
+    /** The link element for items with an href (ADR-0011). */
+    linkComponent?: ElementType;
+    className?: string;
+}
+export declare function BackdropRail({ label, top, apps, allApps, bottom, allAppsPopover, allAppsOpen, onAllAppsOpenChange, allAppsPanel, linkComponent, className, }: BackdropRailProps): import("react").JSX.Element;

package/dist/components/Backdrop/BackdropRail.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { useState as M, useCallback as P } from "react";
+import r from "./BackdropRail.module.css.js";
+import { cx as i } from "./cx.js";
+import { BackdropTooltip as S } from "./BackdropTooltip.js";
+import { useChromePanel as T } from "./BackdropChrome.js";
+import { BackdropPopoverAnchor as j } from "./BackdropOverlays.js";
+function C({
+  label: e,
+  top: t,
+  apps: o,
+  allApps: l,
+  bottom: b,
+  allAppsPopover: h,
+  allAppsOpen: m,
+  onAllAppsOpenChange: n,
+  allAppsPanel: u,
+  linkComponent: f = "a",
+  className: L
+}) {
+  const d = T(u), [y, B] = M(!1), p = m !== void 0, v = d ? d.open : p ? m : y, k = d == null ? void 0 : d.setOpen, x = P(
+    (s) => {
+      k ? k(s) : p || B(s), n == null || n(s);
+    },
+    [k, p, n]
+  );
+  return /* @__PURE__ */ c("nav", { className: i(r.rail, L), "aria-label": e, children: [
+    /* @__PURE__ */ a("ul", { className: i(r.group, r.top), children: t.map((s) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(N, { item: s, Link: f }) }, s.key)) }),
+    /* @__PURE__ */ c("ul", { className: i(r.group, r.apps), children: [
+      o.map((s) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(g, { app: s, Link: f }) }, s.key)),
+      /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
+        g,
+        {
+          app: h === void 0 ? l : { ...l, pressed: v || l.pressed },
+          Link: f,
+          allApps: !0,
+          popover: h,
+          open: v,
+          onOpenChange: x
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ a("ul", { className: i(r.group, r.bottom), children: b.map((s) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(N, { item: s, Link: f }) }, s.key)) })
+  ] });
+}
+function N({ item: e, Link: t }) {
+  const o = e.href !== void 0 ? t : "button", l = e.href !== void 0 ? { href: e.href } : { type: "button" };
+  return /* @__PURE__ */ c("div", { className: r.slot, children: [
+    /* @__PURE__ */ a(S, { content: e.label, side: "right", labelsTrigger: !0, className: r.tipAnchor, children: /* @__PURE__ */ c(o, { ...l, onClick: e.onClick, "aria-current": e.active ? "page" : void 0, className: r.item, children: [
+      /* @__PURE__ */ c("span", { className: r.icon, children: [
+        e.icon,
+        e.badge !== void 0 && /* @__PURE__ */ a("span", { className: r.badge, "aria-hidden": "true", children: e.badge })
+      ] }),
+      /* @__PURE__ */ c("span", { className: r.itemLabel, children: [
+        e.label,
+        e.badgeLabel && /* @__PURE__ */ a("span", { className: r.srOnly, children: e.badgeLabel })
+      ] })
+    ] }) }),
+    e.active && /* @__PURE__ */ a("span", { className: r.marker, "aria-hidden": "true" })
+  ] });
+}
+function g({
+  app: e,
+  Link: t,
+  allApps: o = !1,
+  popover: l,
+  open: b,
+  onOpenChange: h
+}) {
+  const m = e.href !== void 0 ? t : "button", n = e.href !== void 0 ? { href: e.href } : { type: "button", "aria-expanded": o ? !!e.pressed : void 0 }, u = /* @__PURE__ */ c(m, { ...n, onClick: e.onClick, "aria-current": e.active ? "page" : void 0, className: r.app, children: [
+    /* @__PURE__ */ a("span", { className: i(r.appMark, o && r.allAppsMark), children: e.mark }),
+    /* @__PURE__ */ a("span", { className: r.appLabel, children: e.label })
+  ] });
+  return /* @__PURE__ */ c("div", { className: i(r.slot, r.appSlot), children: [
+    l === void 0 ? u : (
+      /* The panel opens beside the tile, not under it: the rail is the
+         frame's left edge, so there is no room below. */
+      /* @__PURE__ */ a(
+        j,
+        {
+          side: "right",
+          align: "start",
+          open: b,
+          onOpenChange: h,
+          trigger: u,
+          popover: l,
+          className: r.allAppsAnchor
+        }
+      )
+    ),
+    (e.active || e.pressed) && /* @__PURE__ */ a("span", { className: i(r.marker, r.appMarker), "aria-hidden": "true" })
+  ] });
+}
+export {
+  C as BackdropRail
+};
+//# sourceMappingURL=BackdropRail.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropRail.js","sources":["../../../src/components/Backdrop/BackdropRail.tsx"],"sourcesContent":["'use client'\n\nimport { useCallback, useState, type ElementType, type ReactNode } from 'react'\nimport styles from './BackdropRail.module.css'\nimport { cx } from './cx'\nimport { BackdropTooltip } from './BackdropTooltip'\nimport { useChromePanel } from './BackdropChrome'\nimport { BackdropPopoverAnchor } from './BackdropOverlays'\n\nexport interface BackdropRailItem {\n  key: string\n  label: string\n  /** Global items: an 18px stroke icon. */\n  icon: ReactNode\n  href?: string\n  onClick?: () => void\n  /** This is the page on screen: the orange marker and the strong ink. */\n  active?: boolean\n  /** An unread count on the icon's corner (Inbox). */\n  badge?: ReactNode\n  /** Spoken after the label when there is a badge: \"8 unread\". */\n  badgeLabel?: string\n}\n\nexport interface BackdropRailApp {\n  key: string\n  label: string\n  /** The app's 32px mark (ProductMark). */\n  mark: ReactNode\n  href?: string\n  onClick?: () => void\n  active?: boolean\n}\n\nexport interface BackdropRailProps {\n  /** The rail's landmark name. */\n  label: string\n  /** Home, Wallet, Inbox, Events. */\n  top: BackdropRailItem[]\n  /** The person's pinned apps, at most four (round 6, All apps: \"Pin up to 4\"). */\n  apps: BackdropRailApp[]\n  /** The fifth tile, which opens the All apps popover. Its `mark` is an icon. */\n  allApps: BackdropRailApp & { pressed?: boolean }\n  /** Docs, and Settings on the hub only (round 4, correction 1). */\n  bottom: BackdropRailItem[]\n  /**\n   * The All apps panel. Pass it and the rail anchors it to the fifth tile with\n   * the machinery the strip's popovers already use: it opens beside the tile,\n   * Escape and a click outside close it, and focus returns to the tile.\n   *\n   * Without it the rail draws exactly as it always has and the panel is the\n   * host's to place — which it could not do properly, because the rail draws\n   * the tile itself and nothing outside could wrap it.\n   */\n  allAppsPopover?: ReactNode\n  /** Controlled open state for that panel. Omit it and the rail keeps its own. */\n  allAppsOpen?: boolean\n  /** Every open and close of the All apps panel, however it was caused. */\n  onAllAppsOpenChange?: (open: boolean) => void\n  /**\n   * The All apps panel's key in a surrounding BackdropChrome. Its open state is\n   * then the chrome's, so a control in the page opens it with\n   * `useBackdropPanel(allAppsPanel)` and opening another chrome panel closes\n   * it. Takes precedence over `allAppsOpen`. Ignored outside a BackdropChrome.\n   */\n  allAppsPanel?: string\n  /** The link element for items with an href (ADR-0011). */\n  linkComponent?: ElementType\n  className?: string\n}\n\n/*\n * Backdrop's rail, 76px, the frame's left edge below the strip. Three groups:\n * global destinations at the top (compact: a 42px item with an 11px label),\n * the pinned app tiles vertically centred (60px, a 32px mark and a 12px label),\n * and Docs (+ Settings on the hub) at the bottom.\n *\n * Below 1200px the global items drop their labels and become 36px icon tiles\n * whose name shows in a tooltip; the app tiles keep theirs (round 4, decision).\n * The label is then visually hidden rather than removed, so the link keeps its\n * accessible name.\n */\nexport function BackdropRail({\n  label,\n  top,\n  apps,\n  allApps,\n  bottom,\n  allAppsPopover,\n  allAppsOpen,\n  onAllAppsOpenChange,\n  allAppsPanel,\n  linkComponent = 'a',\n  className,\n}: BackdropRailProps) {\n  const chrome = useChromePanel(allAppsPanel)\n  const [selfOpen, setSelfOpen] = useState(false)\n  const controlled = allAppsOpen !== undefined\n  const open = chrome ? chrome.open : controlled ? allAppsOpen : selfOpen\n  const setChromeOpen = chrome?.setOpen\n  const onOpenChange = useCallback(\n    (next: boolean) => {\n      if (setChromeOpen) setChromeOpen(next)\n      else if (!controlled) setSelfOpen(next)\n      onAllAppsOpenChange?.(next)\n    },\n    [setChromeOpen, controlled, onAllAppsOpenChange],\n  )\n  return (\n    <nav className={cx(styles.rail, className)} aria-label={label}>\n      <ul className={cx(styles.group, styles.top)}>\n        {top.map((item) => (\n          <li key={item.key}>\n            <GlobalItem item={item} Link={linkComponent} />\n          </li>\n        ))}\n      </ul>\n      <ul className={cx(styles.group, styles.apps)}>\n        {apps.map((app) => (\n          <li key={app.key}>\n            <AppTile app={app} Link={linkComponent} />\n          </li>\n        ))}\n        <li>\n          <AppTile\n            app={allAppsPopover === undefined ? allApps : { ...allApps, pressed: open || allApps.pressed }}\n            Link={linkComponent}\n            allApps\n            popover={allAppsPopover}\n            open={open}\n            onOpenChange={onOpenChange}\n          />\n        </li>\n      </ul>\n      <ul className={cx(styles.group, styles.bottom)}>\n        {bottom.map((item) => (\n          <li key={item.key}>\n            <GlobalItem item={item} Link={linkComponent} />\n          </li>\n        ))}\n      </ul>\n    </nav>\n  )\n}\n\nfunction GlobalItem({ item, Link }: { item: BackdropRailItem; Link: ElementType }) {\n  const Element: ElementType = item.href !== undefined ? Link : 'button'\n  const elementProps = item.href !== undefined ? { href: item.href } : { type: 'button' }\n  return (\n    <div className={styles.slot}>\n      <BackdropTooltip content={item.label} side=\"right\" labelsTrigger className={styles.tipAnchor}>\n        <Element {...elementProps} onClick={item.onClick} aria-current={item.active ? 'page' : undefined} className={styles.item}>\n          <span className={styles.icon}>\n            {item.icon}\n            {item.badge !== undefined && (\n              <span className={styles.badge} aria-hidden=\"true\">\n                {item.badge}\n              </span>\n            )}\n          </span>\n          <span className={styles.itemLabel}>\n            {item.label}\n            {item.badgeLabel && <span className={styles.srOnly}>{item.badgeLabel}</span>}\n          </span>\n        </Element>\n      </BackdropTooltip>\n      {item.active && <span className={styles.marker} aria-hidden=\"true\" />}\n    </div>\n  )\n}\n\nfunction AppTile({\n  app,\n  Link,\n  allApps = false,\n  popover,\n  open,\n  onOpenChange,\n}: {\n  app: BackdropRailApp & { pressed?: boolean }\n  Link: ElementType\n  allApps?: boolean\n  popover?: ReactNode\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const Element: ElementType = app.href !== undefined ? Link : 'button'\n  const elementProps = app.href !== undefined ? { href: app.href } : { type: 'button', 'aria-expanded': allApps ? Boolean(app.pressed) : undefined }\n  const tile = (\n    <Element {...elementProps} onClick={app.onClick} aria-current={app.active ? 'page' : undefined} className={styles.app}>\n      <span className={cx(styles.appMark, allApps && styles.allAppsMark)}>{app.mark}</span>\n      <span className={styles.appLabel}>{app.label}</span>\n    </Element>\n  )\n  return (\n    <div className={cx(styles.slot, styles.appSlot)}>\n      {popover === undefined ? (\n        tile\n      ) : (\n        /* The panel opens beside the tile, not under it: the rail is the\n           frame's left edge, so there is no room below. */\n        <BackdropPopoverAnchor\n          side=\"right\"\n          align=\"start\"\n          open={open}\n          onOpenChange={onOpenChange}\n          trigger={tile}\n          popover={popover}\n          className={styles.allAppsAnchor}\n        />\n      )}\n      {(app.active || app.pressed) && <span className={cx(styles.marker, styles.appMarker)} aria-hidden=\"true\" />}\n    </div>\n  )\n}\n"],"names":["BackdropRail","label","top","apps","allApps","bottom","allAppsPopover","allAppsOpen","onAllAppsOpenChange","allAppsPanel","linkComponent","className","chrome","useChromePanel","selfOpen","setSelfOpen","useState","controlled","open","setChromeOpen","onOpenChange","useCallback","next","jsxs","cx","styles","jsx","item","GlobalItem","app","AppTile","Link","Element","elementProps","BackdropTooltip","popover","tile","BackdropPopoverAnchor"],"mappings":"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"}

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

@@ -0,0 +1,42 @@
+const a = "_rail_7ac3g_3", _ = "_group_7ac3g_14", c = "_top_7ac3g_25", p = "_bottom_7ac3g_26", o = "_apps_7ac3g_42", t = "_slot_7ac3g_46", s = "_srOnly_7ac3g_53", n = "_item_7ac3g_64", l = "_app_7ac3g_42", r = "_icon_7ac3g_103", g = "_itemLabel_7ac3g_113", e = "_badge_7ac3g_125", i = "_marker_7ac3g_148", b = "_tipAnchor_7ac3g_160", m = "_appMark_7ac3g_201", A = "_allAppsMark_7ac3g_211", k = "_appLabel_7ac3g_220", h = "_allAppsAnchor_7ac3g_285", L = {
+  rail: a,
+  group: _,
+  top: c,
+  bottom: p,
+  apps: o,
+  slot: t,
+  srOnly: s,
+  item: n,
+  app: l,
+  icon: r,
+  itemLabel: g,
+  badge: e,
+  marker: i,
+  tipAnchor: b,
+  appMark: m,
+  allAppsMark: A,
+  appLabel: k,
+  allAppsAnchor: h
+};
+export {
+  h as allAppsAnchor,
+  A as allAppsMark,
+  l as app,
+  k as appLabel,
+  m as appMark,
+  o as apps,
+  e as badge,
+  p as bottom,
+  L as default,
+  _ as group,
+  r as icon,
+  n as item,
+  g as itemLabel,
+  i as marker,
+  a as rail,
+  t as slot,
+  s as srOnly,
+  b as tipAnchor,
+  c as top
+};
+//# sourceMappingURL=BackdropRail.module.css.js.map

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

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