@boost33/ui 0.8.1 → 0.9.0

package/dist/components/Backdrop/BackdropBasics.js

@@ -0,0 +1,130 @@
+import { jsxs as t, jsx as n } from "react/jsx-runtime";
+import a from "./BackdropBasics.module.css.js";
+import { cx as p } from "./cx.js";
+import { initials as v } from "../AccountMenu/initials.js";
+import { Close as g, Plus as k, Check as B } from "./icons.js";
+function O({ children: i, tone: r = "ink", label: c, className: s }) {
+  return /* @__PURE__ */ t("span", { className: p(a.badge, a[`badge-${r}`], s), children: [
+    /* @__PURE__ */ n("span", { "aria-hidden": c ? !0 : void 0, children: i }),
+    c && /* @__PURE__ */ n("span", { className: a.srOnly, children: c })
+  ] });
+}
+function A({
+  children: i,
+  selected: r = !1,
+  count: c,
+  icon: s,
+  kind: l = "filter",
+  selectionMode: h = "multiple",
+  removeLabel: e,
+  className: o,
+  type: d = "button",
+  ...u
+}) {
+  const m = c !== void 0 && /* @__PURE__ */ n("span", { className: a.chipCount, children: c });
+  if (l === "tag")
+    return /* @__PURE__ */ t("span", { className: p(a.chip, a.chipTag, e !== void 0 && a.chipTagRemovable, o), children: [
+      s && /* @__PURE__ */ n("span", { className: a.chipIcon, children: s }),
+      /* @__PURE__ */ n("span", { children: i }),
+      m,
+      e !== void 0 && /* @__PURE__ */ n("button", { type: d, "aria-label": e, className: a.chipRemove, ...u, children: /* @__PURE__ */ n(g, { size: 16 }) })
+    ] });
+  if (l === "add")
+    return /* @__PURE__ */ t("button", { type: d, className: p(a.chip, a.chipAdd, o), ...u, children: [
+      /* @__PURE__ */ n("span", { className: a.chipIcon, children: /* @__PURE__ */ n(k, { size: 16 }) }),
+      /* @__PURE__ */ n("span", { children: i })
+    ] });
+  if (l === "action")
+    return /* @__PURE__ */ t("button", { type: d, className: p(a.chip, o), ...u, children: [
+      s && /* @__PURE__ */ n("span", { className: a.chipIcon, children: s }),
+      /* @__PURE__ */ n("span", { children: i }),
+      m
+    ] });
+  if (l === "choice") {
+    const f = h === "single" ? { role: "radio", "aria-checked": r } : { "aria-pressed": r }, N = r ? /* @__PURE__ */ n(B, { size: 16 }) : s;
+    return /* @__PURE__ */ t("button", { type: d, ...f, className: p(a.chip, a.chipChoice, o), ...u, children: [
+      N && /* @__PURE__ */ n("span", { className: a.chipIcon, children: N }),
+      /* @__PURE__ */ n("span", { children: i }),
+      m
+    ] });
+  }
+  return /* @__PURE__ */ t("button", { type: d, "aria-pressed": r, className: p(a.chip, o), ...u, children: [
+    s && /* @__PURE__ */ n("span", { className: a.chipIcon, children: s }),
+    /* @__PURE__ */ n("span", { children: i }),
+    m
+  ] });
+}
+function P({ children: i, tone: r = "neutral", dot: c = !0, icon: s, appearance: l = "soft", className: h }) {
+  const e = s != null;
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      className: p(
+        a.pill,
+        a[`pill-${r}`],
+        !c && !e && a.pillPlain,
+        l === "outline" && a.pillOutline,
+        h
+      ),
+      children: [
+        e ? /* @__PURE__ */ n("span", { "aria-hidden": "true", className: a.pillIcon, children: s }) : c && /* @__PURE__ */ n("span", { "aria-hidden": "true", className: a.pillDot }),
+        i
+      ]
+    }
+  );
+}
+function T({ children: i, className: r }) {
+  return /* @__PURE__ */ n("span", { className: p(a.soon, r), children: i });
+}
+function I({ name: i, initials: r, size: c = 36, tone: s = "sand", square: l = !1, decorative: h = !0, badge: e, className: o }) {
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      className: p(a.avatar, a[`avatar-${s}`], a[`avatar-${c}`], l && a.avatarSquare, o),
+      role: h ? void 0 : "img",
+      "aria-label": h ? void 0 : i,
+      "aria-hidden": h || void 0,
+      children: [
+        r ?? v(i),
+        e && /* @__PURE__ */ n("span", { className: a.avatarBadge, children: e })
+      ]
+    }
+  );
+}
+function j({ people: i, max: r = 3, size: c = 32, label: s, overflowLabel: l, className: h }) {
+  const e = i.slice(0, Math.max(0, r)), o = i.length - e.length;
+  return /* @__PURE__ */ t("span", { role: "group", "aria-label": s, className: p(a.avatarStack, h), children: [
+    e.map((d, u) => /* @__PURE__ */ n(
+      I,
+      {
+        name: d.name,
+        initials: d.initials,
+        tone: d.tone,
+        size: c,
+        decorative: !1,
+        className: a.avatarStackItem
+      },
+      `${d.name}-${u}`
+    )),
+    o > 0 && /* @__PURE__ */ t("span", { className: p(a.avatar, a[`avatar-${c}`], a.avatarStackItem, a.avatarOverflow), children: [
+      /* @__PURE__ */ t("span", { "aria-hidden": l ? !0 : void 0, children: [
+        "+",
+        o
+      ] }),
+      l && /* @__PURE__ */ n("span", { className: a.srOnly, children: l })
+    ] })
+  ] });
+}
+function z({ children: i }) {
+  return /* @__PURE__ */ n("span", { className: a.srOnly, children: i });
+}
+export {
+  I as BackdropAvatar,
+  j as BackdropAvatarStack,
+  O as BackdropBadge,
+  A as BackdropChip,
+  P as BackdropPill,
+  T as BackdropSoonTag,
+  z as BackdropVisuallyHidden
+};
+//# sourceMappingURL=BackdropBasics.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropBasics.js","sources":["../../../src/components/Backdrop/BackdropBasics.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react'\nimport styles from './BackdropBasics.module.css'\nimport { cx } from './cx'\nimport { initials as initialsOf } from '../AccountMenu/initials'\nimport { Check, Close, Plus } from './icons'\n\n/* ── Badge ─────────────────────────────────────────────────────────────── */\n\nexport interface BackdropBadgeProps {\n  /** A count, or a one-word tag such as \"New\". */\n  children: ReactNode\n  /**\n   * `ink` (default): white on ink, the app menu's counts and Help's \"New\".\n   * `muted`: grey on the panel, a count that should not pull the eye.\n   */\n  tone?: 'ink' | 'muted'\n  /** Screen-reader text when the visible badge is a bare number. */\n  label?: string\n  className?: string\n}\n\nexport function BackdropBadge({ children, tone = 'ink', label, className }: BackdropBadgeProps) {\n  return (\n    <span className={cx(styles.badge, styles[`badge-${tone}`], className)}>\n      <span aria-hidden={label ? true : undefined}>{children}</span>\n      {label && <span className={styles.srOnly}>{label}</span>}\n    </span>\n  )\n}\n\n/* ── Chip ──────────────────────────────────────────────────────────────── */\n\n/**\n * What a chip is for. Every kind is 34px, fully round, 14px medium.\n *\n * - `filter` (default): a toggle in a filter row, ink-filled when on.\n * - `choice`: one answer among several (a setup question). Ink-filled with a\n *   leading check when chosen, so the state never rests on colour alone.\n * - `tag`: a value already picked, on the panel grey. With `removeLabel` it\n *   carries a × button; the chip itself is not a control.\n * - `add`: the action at the end of a tag row, a leading plus on the hairline.\n * - `action` (Batch 4): a one-press action drawn as a resting chip, with the\n *   caller's leading icon if any: a composer's quick insert (\"Video link\") or\n *   a suggested question (\"What are tokens?\"). A plain button, never pressed.\n */\nexport type BackdropChipKind = 'filter' | 'choice' | 'tag' | 'add' | 'action'\n\nexport interface BackdropChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  children: ReactNode\n  /** The filter this chip stands for is on, or this choice is chosen. Drawn ink-filled. */\n  selected?: boolean\n  /** A count after the label (\"Running 5\"). */\n  count?: ReactNode\n  /** Leading icon, 16px (a channel glyph, say). A chosen `choice` shows its check here instead. */\n  icon?: ReactNode\n  kind?: BackdropChipKind\n  /**\n   * `choice` only. `multiple` (default): each chip is a toggle, `aria-pressed`.\n   * `single`: the chips are a radio group, `role=\"radio\"` with `aria-checked`;\n   * the caller wraps them in an element with `role=\"radiogroup\"` and a name.\n   */\n  selectionMode?: 'single' | 'multiple'\n  /**\n   * `tag` only. The × button's accessible name, translated by the caller:\n   * \"Remove LinkedIn\". Without it the tag renders with no × at all.\n   * Stage A: the button is markup only; removing is Stage B's handler.\n   */\n  removeLabel?: string\n}\n\n/** A filter chip: a toggle (aria-pressed), so a row of them is a filter group. */\nexport function BackdropChip({\n  children,\n  selected = false,\n  count,\n  icon,\n  kind = 'filter',\n  selectionMode = 'multiple',\n  removeLabel,\n  className,\n  type = 'button',\n  ...rest\n}: BackdropChipProps) {\n  const countNode = count !== undefined && <span className={styles.chipCount}>{count}</span>\n\n  if (kind === 'tag') {\n    // The tag is a value, not a control. Button attributes (disabled, a Stage B\n    // onClick) belong to its × button, the one thing in it a person can press.\n    return (\n      <span className={cx(styles.chip, styles.chipTag, removeLabel !== undefined && styles.chipTagRemovable, className)}>\n        {icon && <span className={styles.chipIcon}>{icon}</span>}\n        <span>{children}</span>\n        {countNode}\n        {removeLabel !== undefined && (\n          <button type={type} aria-label={removeLabel} className={styles.chipRemove} {...rest}>\n            <Close size={16} />\n          </button>\n        )}\n      </span>\n    )\n  }\n\n  if (kind === 'add') {\n    return (\n      <button type={type} className={cx(styles.chip, styles.chipAdd, className)} {...rest}>\n        <span className={styles.chipIcon}>\n          <Plus size={16} />\n        </span>\n        <span>{children}</span>\n      </button>\n    )\n  }\n\n  if (kind === 'action') {\n    return (\n      <button type={type} className={cx(styles.chip, className)} {...rest}>\n        {icon && <span className={styles.chipIcon}>{icon}</span>}\n        <span>{children}</span>\n        {countNode}\n      </button>\n    )\n  }\n\n  if (kind === 'choice') {\n    const state = selectionMode === 'single' ? { role: 'radio', 'aria-checked': selected } : { 'aria-pressed': selected }\n    const leading = selected ? <Check size={16} /> : icon\n    return (\n      <button type={type} {...state} className={cx(styles.chip, styles.chipChoice, className)} {...rest}>\n        {leading && <span className={styles.chipIcon}>{leading}</span>}\n        <span>{children}</span>\n        {countNode}\n      </button>\n    )\n  }\n\n  return (\n    <button type={type} aria-pressed={selected} className={cx(styles.chip, className)} {...rest}>\n      {icon && <span className={styles.chipIcon}>{icon}</span>}\n      <span>{children}</span>\n      {countNode}\n    </button>\n  )\n}\n\n/* ── Pill ──────────────────────────────────────────────────────────────── */\n\nexport type BackdropPillTone = 'success' | 'neutral' | 'warning' | 'danger' | 'info' | 'ink'\n\n/** `soft` (default): a tinted ground. `outline`: no ground, a 1px edge in the tone. */\nexport type BackdropPillAppearance = 'soft' | 'outline'\n\nexport interface BackdropPillProps {\n  /** The status word: \"Running\", \"Paused\", \"Needs approval\". */\n  children: ReactNode\n  tone?: BackdropPillTone\n  /** The leading status dot. Off for a plain tag such as a title's \"Draft\". */\n  dot?: boolean\n  /**\n   * A leading 16px icon in place of the dot, drawn in the tone's dot colour.\n   * Decorative: the word carries the meaning.\n   */\n  icon?: ReactNode\n  appearance?: BackdropPillAppearance\n  className?: string\n}\n\n/** A status pill. Not interactive; the word carries the meaning, the colour repeats it. */\nexport function BackdropPill({ children, tone = 'neutral', dot = true, icon, appearance = 'soft', className }: BackdropPillProps) {\n  const hasIcon = icon !== undefined && icon !== null\n  return (\n    <span\n      className={cx(\n        styles.pill,\n        styles[`pill-${tone}`],\n        !dot && !hasIcon && styles.pillPlain,\n        appearance === 'outline' && styles.pillOutline,\n        className,\n      )}\n    >\n      {hasIcon ? (\n        <span aria-hidden=\"true\" className={styles.pillIcon}>\n          {icon}\n        </span>\n      ) : (\n        dot && <span aria-hidden=\"true\" className={styles.pillDot} />\n      )}\n      {children}\n    </span>\n  )\n}\n\n/* ── Soon tag ──────────────────────────────────────────────────────────── */\n\nexport interface BackdropSoonTagProps {\n  /** The word, translated: \"Soon\". */\n  children: ReactNode\n  className?: string\n}\n\n/** The small tag beside an app that is not built yet, in menus and the All apps popover. */\nexport function BackdropSoonTag({ children, className }: BackdropSoonTagProps) {\n  return <span className={cx(styles.soon, className)}>{children}</span>\n}\n\n/* ── Avatar ────────────────────────────────────────────────────────────── */\n\nexport type BackdropAvatarTone = 'ink' | 'sand' | 'slate' | 'sage' | 'stone'\nexport type BackdropAvatarSize = 24 | 32 | 36 | 40 | 44 | 48 | 56 | 64\n\nexport interface BackdropAvatarProps {\n  /** A person's name or email; the two letters are derived the Hub's way. */\n  name: string\n  /** Override the derived letters. */\n  initials?: string\n  /** 24–40 in lists and menus; 44–64 for a profile head or a focus flow. */\n  size?: BackdropAvatarSize\n  tone?: BackdropAvatarTone\n  /** Square with rounded corners, for a company rather than a person. */\n  square?: boolean\n  /** Hidden from assistive tech when the name is already printed beside it. */\n  decorative?: boolean\n  /**\n   * A small badge on the bottom-right corner (a channel glyph). Pass a 16px\n   * icon; it sits on a white disc ringed off from the avatar. Decorative: name\n   * the channel in text beside the avatar if it matters.\n   */\n  badge?: ReactNode\n  className?: string\n}\n\nexport function BackdropAvatar({ name, initials, size = 36, tone = 'sand', square = false, decorative = true, badge, className }: BackdropAvatarProps) {\n  return (\n    <span\n      className={cx(styles.avatar, styles[`avatar-${tone}`], styles[`avatar-${size}`], square && styles.avatarSquare, className)}\n      role={decorative ? undefined : 'img'}\n      aria-label={decorative ? undefined : name}\n      aria-hidden={decorative || undefined}\n    >\n      {initials ?? initialsOf(name)}\n      {badge && <span className={styles.avatarBadge}>{badge}</span>}\n    </span>\n  )\n}\n\n/* ── Avatar stack ──────────────────────────────────────────────────────── */\n\nexport interface BackdropAvatarStackPerson {\n  name: string\n  initials?: string\n  tone?: BackdropAvatarTone\n}\n\nexport interface BackdropAvatarStackProps {\n  people: BackdropAvatarStackPerson[]\n  /** How many avatars show before the rest fold into \"+N\". Default 3. */\n  max?: number\n  size?: BackdropAvatarSize\n  /** The group's accessible name, translated by the caller: \"People on this team\". */\n  label: string\n  /**\n   * Screen-reader text for the \"+N\" bubble, translated by the caller:\n   * \"and 4 more\". Without it the bubble announces as \"+4\".\n   */\n  overflowLabel?: string\n  className?: string\n}\n\n/**\n * Overlapping avatars, each ringed in white so the edges stay legible, with\n * the rest folded into a \"+N\" bubble. Each person is named to assistive tech;\n * the stack is a labelled group.\n */\nexport function BackdropAvatarStack({ people, max = 3, size = 32, label, overflowLabel, className }: BackdropAvatarStackProps) {\n  const shown = people.slice(0, Math.max(0, max))\n  const hidden = people.length - shown.length\n  return (\n    <span role=\"group\" aria-label={label} className={cx(styles.avatarStack, className)}>\n      {shown.map((person, i) => (\n        <BackdropAvatar\n          key={`${person.name}-${i}`}\n          name={person.name}\n          initials={person.initials}\n          tone={person.tone}\n          size={size}\n          decorative={false}\n          className={styles.avatarStackItem}\n        />\n      ))}\n      {hidden > 0 && (\n        <span className={cx(styles.avatar, styles[`avatar-${size}`], styles.avatarStackItem, styles.avatarOverflow)}>\n          <span aria-hidden={overflowLabel ? true : undefined}>+{hidden}</span>\n          {overflowLabel && <span className={styles.srOnly}>{overflowLabel}</span>}\n        </span>\n      )}\n    </span>\n  )\n}\n\n/* ── Visually hidden ───────────────────────────────────────────────────── */\n\nexport function BackdropVisuallyHidden({ children }: { children: ReactNode }) {\n  return <span className={styles.srOnly}>{children}</span>\n}\n"],"names":["BackdropBadge","children","tone","label","className","jsxs","cx","styles","jsx","BackdropChip","selected","count","icon","kind","selectionMode","removeLabel","type","rest","countNode","Close","Plus","state","leading","Check","BackdropPill","dot","appearance","hasIcon","BackdropSoonTag","BackdropAvatar","name","initials","size","square","decorative","badge","initialsOf","BackdropAvatarStack","people","max","overflowLabel","shown","hidden","person","i","BackdropVisuallyHidden"],"mappings":"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"}

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

@@ -0,0 +1,71 @@
+const a = "_srOnly_130ko_3", _ = "_badge_130ko_14", o = "_chip_130ko_43", t = "_chipIcon_130ko_90", l = "_chipCount_130ko_94", i = "_chipChoice_130ko_108", c = "_chipTag_130ko_124", n = "_chipTagRemovable_130ko_134", r = "_chipRemove_130ko_138", k = "_chipAdd_130ko_173", e = "_pill_130ko_179", v = "_pillDot_130ko_194", p = "_pillPlain_130ko_202", s = "_pillIcon_130ko_221", h = "_pillOutline_130ko_241", d = "_soon_130ko_253", g = "_avatar_130ko_271", u = "_avatarSquare_130ko_283", m = "_avatarBadge_130ko_303", b = "_avatarStack_130ko_327", I = "_avatarStackItem_130ko_332", O = "_avatarOverflow_130ko_340", S = {
+  srOnly: a,
+  badge: _,
+  "badge-ink": "_badge-ink_130ko_31",
+  "badge-muted": "_badge-muted_130ko_36",
+  chip: o,
+  chipIcon: t,
+  chipCount: l,
+  chipChoice: i,
+  chipTag: c,
+  chipTagRemovable: n,
+  chipRemove: r,
+  chipAdd: k,
+  pill: e,
+  pillDot: v,
+  pillPlain: p,
+  "pill-success": "_pill-success_130ko_207",
+  "pill-neutral": "_pill-neutral_130ko_209",
+  "pill-warning": "_pill-warning_130ko_211",
+  "pill-danger": "_pill-danger_130ko_213",
+  "pill-info": "_pill-info_130ko_215",
+  "pill-ink": "_pill-ink_130ko_217",
+  pillIcon: s,
+  pillOutline: h,
+  soon: d,
+  avatar: g,
+  avatarSquare: u,
+  "avatar-24": "_avatar-24_130ko_288",
+  "avatar-32": "_avatar-32_130ko_289",
+  "avatar-36": "_avatar-36_130ko_290",
+  "avatar-40": "_avatar-40_130ko_291",
+  "avatar-44": "_avatar-44_130ko_292",
+  "avatar-48": "_avatar-48_130ko_293",
+  "avatar-56": "_avatar-56_130ko_294",
+  "avatar-64": "_avatar-64_130ko_295",
+  "avatar-ink": "_avatar-ink_130ko_297",
+  "avatar-sand": "_avatar-sand_130ko_298",
+  "avatar-slate": "_avatar-slate_130ko_299",
+  "avatar-sage": "_avatar-sage_130ko_300",
+  "avatar-stone": "_avatar-stone_130ko_301",
+  avatarBadge: m,
+  avatarStack: b,
+  avatarStackItem: I,
+  avatarOverflow: O
+};
+export {
+  g as avatar,
+  m as avatarBadge,
+  O as avatarOverflow,
+  u as avatarSquare,
+  b as avatarStack,
+  I as avatarStackItem,
+  _ as badge,
+  o as chip,
+  k as chipAdd,
+  i as chipChoice,
+  l as chipCount,
+  t as chipIcon,
+  r as chipRemove,
+  c as chipTag,
+  n as chipTagRemovable,
+  S as default,
+  e as pill,
+  v as pillDot,
+  s as pillIcon,
+  h as pillOutline,
+  p as pillPlain,
+  d as soon,
+  a as srOnly
+};
+//# sourceMappingURL=BackdropBasics.module.css.js.map

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

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

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

@@ -0,0 +1,63 @@
+import { ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+import { BackdropTooltipSide } from './BackdropTooltip';
+/**
+ * The four variants Backdrop shipped with. Kept at four on purpose: callers key
+ * records by it (Buttons.stories.tsx's labels), and widening it would break
+ * them. `BackdropButtonVariantName` is every variant the button draws.
+ */
+export type BackdropButtonVariant = 'primary' | 'outline' | 'ghost' | 'ink';
+/** Every variant, including `soft` (ADR-0017, D4). */
+export type BackdropButtonVariantName = BackdropButtonVariant | 'soft';
+/** `xl` (44px) is for focus flows only: setup and multi-step forms (ADR-0017, D4). */
+export type BackdropButtonSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface BackdropButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /**
+     * `primary` is the page's one orange action; there is at most one on a screen
+     * (round 6 global rules). `ink` is the primary inside a popover or dialog.
+     * `soft` is grey-filled with ink text: quieter than outline, but unlike
+     * `ghost` it keeps its box at rest (ADR-0017, D4).
+     */
+    variant?: BackdropButtonVariantName;
+    size?: BackdropButtonSize;
+    /** The visible label. 1–3 words, verb first (copy guide). */
+    children: ReactNode;
+    /** Leading icon, 18px. Decorative: the label names the button. */
+    icon?: ReactNode;
+    /** Trailing icon, e.g. a chevron on a menu button. */
+    trailingIcon?: ReactNode;
+    /**
+     * Busy: the label and icons hide (keeping the button's width) and a spinner
+     * shows. The button stays focusable and announces `aria-busy`; clicks are
+     * the caller's to ignore.
+     */
+    loading?: boolean;
+    fullWidth?: boolean;
+    /** Renders the button as a link. Pass `linkComponent` for a router's link. */
+    href?: string;
+    /** The element a linked button renders through (ADR-0011's escape hatch). */
+    linkComponent?: ElementType;
+}
+export declare function BackdropButton({ variant, size, children, icon, trailingIcon, loading, fullWidth, href, linkComponent: Link, className, type, ...rest }: BackdropButtonProps): import("react").JSX.Element;
+export interface BackdropIconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'> {
+    /** Required: an icon-only button is named by this, and the tooltip shows it. */
+    label: string;
+    icon: ReactNode;
+    variant?: Exclude<BackdropButtonVariantName, 'primary'>;
+    size?: BackdropButtonSize;
+    /** Show `label` in a tooltip on hover and keyboard focus. On by default. */
+    tooltip?: boolean;
+    /** Hold the tooltip hidden while it stays mounted, e.g. while this button's menu is open. */
+    tooltipSuppressed?: boolean;
+    tooltipSide?: BackdropTooltipSide;
+}
+export declare function BackdropIconButton({ label, icon, variant, size, tooltip, tooltipSuppressed, tooltipSide, className, type, ...rest }: BackdropIconButtonProps): import("react").JSX.Element;
+export interface BackdropTextLinkProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    children: ReactNode;
+    /** Leading icon, e.g. a plus on "Add a note". Decorative: the words name the action. */
+    icon?: ReactNode;
+    trailingIcon?: ReactNode;
+    href?: string;
+    linkComponent?: ElementType;
+}
+/** "View all", "Open wallet", "More options": an action that is a word in a line. */
+export declare function BackdropTextLink({ children, icon, trailingIcon, href, linkComponent: Link, className, type, ...rest }: BackdropTextLinkProps): import("react").JSX.Element;

package/dist/components/Backdrop/BackdropButton.js

@@ -0,0 +1,59 @@
+import { jsx as t, jsxs as k, Fragment as N } from "react/jsx-runtime";
+import n from "./BackdropButton.module.css.js";
+import { cx as d } from "./cx.js";
+import { Spinner as B } from "./icons.js";
+import { BackdropTooltip as C } from "./BackdropTooltip.js";
+function g({
+  variant: s = "outline",
+  size: a = "lg",
+  children: r,
+  icon: e,
+  trailingIcon: l,
+  loading: o = !1,
+  fullWidth: c = !1,
+  href: i,
+  linkComponent: m = "a",
+  className: p,
+  type: u = "button",
+  ...b
+}) {
+  const f = d(n.button, n[s], n[a], c && n.fullWidth, o && n.loading, p), h = /* @__PURE__ */ k(N, { children: [
+    e && /* @__PURE__ */ t("span", { className: n.icon, children: e }),
+    /* @__PURE__ */ t("span", { className: n.label, children: r }),
+    l && /* @__PURE__ */ t("span", { className: n.icon, children: l }),
+    o && /* @__PURE__ */ t("span", { className: n.spinner, children: /* @__PURE__ */ t(B, {}) })
+  ] });
+  return i !== void 0 ? /* @__PURE__ */ t(m, { href: i, className: f, "aria-busy": o || void 0, "aria-disabled": b.disabled || void 0, onClick: b.onClick, children: h }) : /* @__PURE__ */ t("button", { type: u, className: f, "aria-busy": o || void 0, ...b, children: h });
+}
+function F({
+  label: s,
+  icon: a,
+  variant: r = "ghost",
+  size: e = "sm",
+  tooltip: l = !0,
+  tooltipSuppressed: o = !1,
+  tooltipSide: c = "bottom",
+  className: i,
+  type: m = "button",
+  ...p
+}) {
+  const u = /* @__PURE__ */ t("button", { type: m, "aria-label": s, className: d(n.button, n.iconOnly, n[r], n[e], i), ...p, children: a });
+  return l ? /* @__PURE__ */ t(C, { content: s, side: c, labelsTrigger: !0, suppressed: o, children: u }) : u;
+}
+function L({ children: s, icon: a, trailingIcon: r, href: e, linkComponent: l = "a", className: o, type: c = "button", ...i }) {
+  return e !== void 0 ? /* @__PURE__ */ k(l, { href: e, className: d(n.link, o), onClick: i.onClick, children: [
+    a,
+    s,
+    r
+  ] }) : /* @__PURE__ */ k("button", { type: c, className: d(n.link, o), ...i, children: [
+    a,
+    s,
+    r
+  ] });
+}
+export {
+  g as BackdropButton,
+  F as BackdropIconButton,
+  L as BackdropTextLink
+};
+//# sourceMappingURL=BackdropButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropButton.js","sources":["../../../src/components/Backdrop/BackdropButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ElementType, ReactNode } from 'react'\nimport styles from './BackdropButton.module.css'\nimport { cx } from './cx'\nimport { Spinner } from './icons'\nimport { BackdropTooltip, type BackdropTooltipSide } from './BackdropTooltip'\n\n/**\n * The four variants Backdrop shipped with. Kept at four on purpose: callers key\n * records by it (Buttons.stories.tsx's labels), and widening it would break\n * them. `BackdropButtonVariantName` is every variant the button draws.\n */\nexport type BackdropButtonVariant = 'primary' | 'outline' | 'ghost' | 'ink'\n/** Every variant, including `soft` (ADR-0017, D4). */\nexport type BackdropButtonVariantName = BackdropButtonVariant | 'soft'\n/** `xl` (44px) is for focus flows only: setup and multi-step forms (ADR-0017, D4). */\nexport type BackdropButtonSize = 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface BackdropButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  /**\n   * `primary` is the page's one orange action; there is at most one on a screen\n   * (round 6 global rules). `ink` is the primary inside a popover or dialog.\n   * `soft` is grey-filled with ink text: quieter than outline, but unlike\n   * `ghost` it keeps its box at rest (ADR-0017, D4).\n   */\n  variant?: BackdropButtonVariantName\n  size?: BackdropButtonSize\n  /** The visible label. 1–3 words, verb first (copy guide). */\n  children: ReactNode\n  /** Leading icon, 18px. Decorative: the label names the button. */\n  icon?: ReactNode\n  /** Trailing icon, e.g. a chevron on a menu button. */\n  trailingIcon?: ReactNode\n  /**\n   * Busy: the label and icons hide (keeping the button's width) and a spinner\n   * shows. The button stays focusable and announces `aria-busy`; clicks are\n   * the caller's to ignore.\n   */\n  loading?: boolean\n  fullWidth?: boolean\n  /** Renders the button as a link. Pass `linkComponent` for a router's link. */\n  href?: string\n  /** The element a linked button renders through (ADR-0011's escape hatch). */\n  linkComponent?: ElementType\n}\n\nexport function BackdropButton({\n  variant = 'outline',\n  size = 'lg',\n  children,\n  icon,\n  trailingIcon,\n  loading = false,\n  fullWidth = false,\n  href,\n  linkComponent: Link = 'a',\n  className,\n  type = 'button',\n  ...rest\n}: BackdropButtonProps) {\n  const classes = cx(styles.button, styles[variant], styles[size], fullWidth && styles.fullWidth, loading && styles.loading, className)\n  const body = (\n    <>\n      {icon && <span className={styles.icon}>{icon}</span>}\n      <span className={styles.label}>{children}</span>\n      {trailingIcon && <span className={styles.icon}>{trailingIcon}</span>}\n      {loading && (\n        <span className={styles.spinner}>\n          <Spinner />\n        </span>\n      )}\n    </>\n  )\n\n  if (href !== undefined) {\n    return (\n      <Link href={href} className={classes} aria-busy={loading || undefined} aria-disabled={rest.disabled || undefined} onClick={rest.onClick}>\n        {body}\n      </Link>\n    )\n  }\n\n  return (\n    <button type={type} className={classes} aria-busy={loading || undefined} {...rest}>\n      {body}\n    </button>\n  )\n}\n\nexport interface BackdropIconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'> {\n  /** Required: an icon-only button is named by this, and the tooltip shows it. */\n  label: string\n  icon: ReactNode\n  variant?: Exclude<BackdropButtonVariantName, 'primary'>\n  size?: BackdropButtonSize\n  /** Show `label` in a tooltip on hover and keyboard focus. On by default. */\n  tooltip?: boolean\n  /** Hold the tooltip hidden while it stays mounted, e.g. while this button's menu is open. */\n  tooltipSuppressed?: boolean\n  tooltipSide?: BackdropTooltipSide\n}\n\nexport function BackdropIconButton({\n  label,\n  icon,\n  variant = 'ghost',\n  size = 'sm',\n  tooltip = true,\n  tooltipSuppressed = false,\n  tooltipSide = 'bottom',\n  className,\n  type = 'button',\n  ...rest\n}: BackdropIconButtonProps) {\n  const button = (\n    <button type={type} aria-label={label} className={cx(styles.button, styles.iconOnly, styles[variant], styles[size], className)} {...rest}>\n      {icon}\n    </button>\n  )\n  return tooltip ? (\n    <BackdropTooltip content={label} side={tooltipSide} labelsTrigger suppressed={tooltipSuppressed}>\n      {button}\n    </BackdropTooltip>\n  ) : (\n    button\n  )\n}\n\nexport interface BackdropTextLinkProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  children: ReactNode\n  /** Leading icon, e.g. a plus on \"Add a note\". Decorative: the words name the action. */\n  icon?: ReactNode\n  trailingIcon?: ReactNode\n  href?: string\n  linkComponent?: ElementType\n}\n\n/** \"View all\", \"Open wallet\", \"More options\": an action that is a word in a line. */\nexport function BackdropTextLink({ children, icon, trailingIcon, href, linkComponent: Link = 'a', className, type = 'button', ...rest }: BackdropTextLinkProps) {\n  if (href !== undefined) {\n    return (\n      <Link href={href} className={cx(styles.link, className)} onClick={rest.onClick}>\n        {icon}\n        {children}\n        {trailingIcon}\n      </Link>\n    )\n  }\n  return (\n    <button type={type} className={cx(styles.link, className)} {...rest}>\n      {icon}\n      {children}\n      {trailingIcon}\n    </button>\n  )\n}\n"],"names":["BackdropButton","variant","size","children","icon","trailingIcon","loading","fullWidth","href","Link","className","type","rest","classes","cx","styles","body","jsxs","Fragment","jsx","Spinner","BackdropIconButton","label","tooltip","tooltipSuppressed","tooltipSide","button","BackdropTooltip","BackdropTextLink"],"mappings":";;;;;AA6CO,SAASA,EAAe;AAAA,EAC7B,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,MAAAC;AAAA,EACA,eAAeC,IAAO;AAAA,EACtB,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAwB;AACtB,QAAMC,IAAUC,EAAGC,EAAO,QAAQA,EAAOd,CAAO,GAAGc,EAAOb,CAAI,GAAGK,KAAaQ,EAAO,WAAWT,KAAWS,EAAO,SAASL,CAAS,GAC9HM,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAd,KAAQ,gBAAAe,EAAC,QAAA,EAAK,WAAWJ,EAAO,MAAO,UAAAX,GAAK;AAAA,IAC7C,gBAAAe,EAAC,QAAA,EAAK,WAAWJ,EAAO,OAAQ,UAAAZ,GAAS;AAAA,IACxCE,KAAgB,gBAAAc,EAAC,QAAA,EAAK,WAAWJ,EAAO,MAAO,UAAAV,GAAa;AAAA,IAC5DC,uBACE,QAAA,EAAK,WAAWS,EAAO,SACtB,UAAA,gBAAAI,EAACC,KAAQ,EAAA,CACX;AAAA,EAAA,GAEJ;AAGF,SAAIZ,MAAS,SAET,gBAAAW,EAACV,GAAA,EAAK,MAAAD,GAAY,WAAWK,GAAS,aAAWP,KAAW,QAAW,iBAAeM,EAAK,YAAY,QAAW,SAASA,EAAK,SAC7H,UAAAI,GACH,IAKF,gBAAAG,EAAC,UAAA,EAAO,MAAAR,GAAY,WAAWE,GAAS,aAAWP,KAAW,QAAY,GAAGM,GAC1E,UAAAI,EAAA,CACH;AAEJ;AAeO,SAASK,EAAmB;AAAA,EACjC,OAAAC;AAAA,EACA,MAAAlB;AAAA,EACA,SAAAH,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,SAAAqB,IAAU;AAAA,EACV,mBAAAC,IAAoB;AAAA,EACpB,aAAAC,IAAc;AAAA,EACd,WAAAf;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAA4B;AAC1B,QAAMc,sBACH,UAAA,EAAO,MAAAf,GAAY,cAAYW,GAAO,WAAWR,EAAGC,EAAO,QAAQA,EAAO,UAAUA,EAAOd,CAAO,GAAGc,EAAOb,CAAI,GAAGQ,CAAS,GAAI,GAAGE,GACjI,UAAAR,EAAA,CACH;AAEF,SAAOmB,IACL,gBAAAJ,EAACQ,GAAA,EAAgB,SAASL,GAAO,MAAMG,GAAa,eAAa,IAAC,YAAYD,GAC3E,UAAAE,EAAA,CACH,IAEAA;AAEJ;AAYO,SAASE,EAAiB,EAAE,UAAAzB,GAAU,MAAAC,GAAM,cAAAC,GAAc,MAAAG,GAAM,eAAeC,IAAO,KAAK,WAAAC,GAAW,MAAAC,IAAO,UAAU,GAAGC,KAA+B;AAC9J,SAAIJ,MAAS,SAET,gBAAAS,EAACR,GAAA,EAAK,MAAAD,GAAY,WAAWM,EAAGC,EAAO,MAAML,CAAS,GAAG,SAASE,EAAK,SACpE,UAAA;AAAA,IAAAR;AAAA,IACAD;AAAA,IACAE;AAAA,EAAA,GACH,IAIF,gBAAAY,EAAC,UAAA,EAAO,MAAAN,GAAY,WAAWG,EAAGC,EAAO,MAAML,CAAS,GAAI,GAAGE,GAC5D,UAAA;AAAA,IAAAR;AAAA,IACAD;AAAA,IACAE;AAAA,EAAA,GACH;AAEJ;"}

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

@@ -0,0 +1,41 @@
+const _ = "_button_12wkz_27", n = "_fullWidth_12wkz_62", o = "_sm_12wkz_68", t = "_md_12wkz_75", s = "_lg_12wkz_83", l = "_xl_12wkz_92", i = "_primary_12wkz_102", c = "_ink_12wkz_111", k = "_outline_12wkz_120", w = "_ghost_12wkz_130", z = "_soft_12wkz_139", a = "_loading_12wkz_179", d = "_label_12wkz_183", e = "_icon_12wkz_184", r = "_spinner_12wkz_188", p = "_iconOnly_12wkz_216", b = "_link_12wkz_247", u = {
+  button: _,
+  fullWidth: n,
+  sm: o,
+  md: t,
+  lg: s,
+  xl: l,
+  primary: i,
+  ink: c,
+  outline: k,
+  ghost: w,
+  soft: z,
+  loading: a,
+  label: d,
+  icon: e,
+  spinner: r,
+  "boost33-backdrop-spin": "_boost33-backdrop-spin_12wkz_1",
+  iconOnly: p,
+  link: b
+};
+export {
+  _ as button,
+  u as default,
+  n as fullWidth,
+  w as ghost,
+  e as icon,
+  p as iconOnly,
+  c as ink,
+  d as label,
+  s as lg,
+  b as link,
+  a as loading,
+  t as md,
+  k as outline,
+  i as primary,
+  o as sm,
+  z as soft,
+  r as spinner,
+  l as xl
+};
+//# sourceMappingURL=BackdropButton.module.css.js.map

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

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

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

@@ -0,0 +1,158 @@
+import { ElementType, ReactNode } from 'react';
+import { BackdropPageAction } from './BackdropPage';
+/** `ink` (default) or `success`, where the figure itself is good news. Never orange. */
+export type BackdropChartTone = 'ink' | 'success';
+/** The caption action's button. Outline by default; `primary` only when it is the screen's one orange action. */
+export type BackdropChartActionEmphasis = 'outline' | 'primary';
+/** A y-axis tick: where it sits, and its words ("3,000", "€2,000"). */
+export interface BackdropChartTick {
+    value: number;
+    label: string;
+}
+export interface BackdropBarChartDatum {
+    /** The x label's first line, and the table's row header: "Nov", "2 Nov". */
+    label: string;
+    /** An optional second line under the x label: "43 reached", "2 posts". */
+    detail?: string;
+    value: number;
+    /** The value as written in the table: "2,280". Defaults to the number. */
+    valueText?: string;
+}
+export interface BackdropBarChartProps {
+    /** The chart's accessible name, and the hidden table's caption: "Views by week". */
+    label: string;
+    data: BackdropBarChartDatum[];
+    /** The hidden table's column headers: the category ("Week") and the figure ("Views"). */
+    categoryHeader: string;
+    valueHeader: string;
+    /**
+     * The bar drawn in the strong colour with a bold x label (usually the
+     * current period). The others are the tone's pale partner. Leave it out and
+     * every bar is the strong colour.
+     */
+    highlightIndex?: number;
+    tone?: BackdropChartTone;
+    /** Y-axis ticks, labelled in a 48 column at the left. Leave out for no axis. */
+    yTicks?: BackdropChartTick[];
+    /** A gridline at each tick above zero. Default true; needs `yTicks`. */
+    gridlines?: boolean;
+    /** The value at the top of the plot. Defaults to the highest tick or value. */
+    max?: number;
+    /**
+     * Words beside the plot, level with the top of the highlighted bar: a figure
+     * and a line under it ("2 meetings" / "this month"). Pass a node; use
+     * `directLabelValue` and `directLabelNote` for the drawn two-line look.
+     */
+    directLabel?: ReactNode;
+    /** The direct label's figure, 15/20 semibold, in the tone's text colour. */
+    directLabelValue?: ReactNode;
+    /** The direct label's second line, 13/18 muted. */
+    directLabelNote?: ReactNode;
+    /** A sentence under the chart, after a hairline. */
+    caption?: ReactNode;
+    /** One action at the caption's end. */
+    action?: BackdropPageAction;
+    /** The action's button: `outline` (default) or `primary` when it is the screen's one orange action. */
+    actionEmphasis?: BackdropChartActionEmphasis;
+    linkComponent?: ElementType;
+    className?: string;
+}
+/**
+ * Single-series vertical bars over time. Fluid width; the plot height is fixed
+ * (`--backdrop-chart-bar-plot-height`). Bars grow up from a baseline in equal
+ * slots, at most 56 wide.
+ */
+export declare function BackdropBarChart({ label, data, categoryHeader, valueHeader, highlightIndex, tone, yTicks, gridlines, max, directLabel, directLabelValue, directLabelNote, caption, action, actionEmphasis, linkComponent, className, }: BackdropBarChartProps): import("react").JSX.Element;
+export interface BackdropBarListItem {
+    key: string;
+    /** The row's name: "Outbound", "Needs found". */
+    label: ReactNode;
+    value: number;
+    /** The figure at the row's end: "1,429". Defaults to the number. */
+    valueText?: ReactNode;
+    /** A 24px mark or icon before the label. Decorative: the label names the row. */
+    leading?: ReactNode;
+    /** The fill's tone. `success` for stages that are themselves the good outcome. */
+    tone?: BackdropChartTone;
+    /**
+     * Words in place of the bar, for a row with nothing to draw ("Free"). The
+     * row's figure turns muted with it.
+     */
+    note?: ReactNode;
+}
+export interface BackdropBarListProps {
+    /** The list's accessible name: "Where it goes", "From need to paid". */
+    label: string;
+    items: BackdropBarListItem[];
+    /** The value a full bar stands for. Defaults to the largest item. */
+    max?: number;
+    className?: string;
+}
+/**
+ * Rows of label · bar · figure, the bar proportional to the figure. The
+ * label and figure columns size to their widest row so every bar starts and
+ * ends on one line. The bar is BackdropProgress's track and fill (the same
+ * drawing as BackdropMeter `look="bar"`), at the list's 8px height. Each row
+ * reads as its label and figure; the bar is decorative.
+ */
+export declare function BackdropBarList({ label, items, max, className }: BackdropBarListProps): import("react").JSX.Element;
+/** `filled` ink dot, `hollow` ringed dot (a projected or expected end), or `none`. */
+export type BackdropLineChartEnd = 'filled' | 'hollow' | 'none';
+export interface BackdropLineChartPoint {
+    /** The table's row header: "25 Aug", "14 Nov". */
+    label: string;
+    /** The main series. `null` leaves a gap. */
+    value: number | null;
+    /** The value as written in the table. Defaults to the number. */
+    valueText?: string;
+    /** The muted comparison series at this point. `null` or absent leaves a gap. */
+    comparison?: number | null;
+    comparisonText?: string;
+    /** A label under the x axis at this point. Points without one show none. */
+    axisLabel?: ReactNode;
+    /** Sets this point's axis label in ink and semibold. */
+    axisLabelStrong?: boolean;
+}
+export interface BackdropLineChartMarker {
+    /** The point the vertical rule stands on. A filled dot marks the value there. */
+    index: number;
+    /** Words at the top of the rule, to its right: "Today · 1,240". */
+    label?: ReactNode;
+}
+export interface BackdropLineChartProps {
+    /** The chart's accessible name and the hidden table's caption. */
+    label: string;
+    data: BackdropLineChartPoint[];
+    /** The hidden table's headers: the category ("Week") and each series' name. */
+    categoryHeader: string;
+    seriesName: string;
+    /** Name of the comparison series. Required for it to appear in the table. */
+    comparisonName?: string;
+    /** Y-axis ticks in a 48 column at the left. Leave out for no axis. */
+    yTicks?: BackdropChartTick[];
+    /** A gridline at each tick above zero. Default true; needs `yTicks`. */
+    gridlines?: boolean;
+    max?: number;
+    /** From this index on, the main line is dashed (a projection). */
+    dashedFrom?: number;
+    /** Fill the area under the solid part of the main line. */
+    area?: boolean;
+    marker?: BackdropLineChartMarker;
+    /** The main series' last point. Default `none`. */
+    end?: BackdropLineChartEnd;
+    /** The comparison series' last point. Default `none`. */
+    comparisonEnd?: BackdropLineChartEnd;
+    caption?: ReactNode;
+    action?: BackdropPageAction;
+    /** The action's button: `outline` (default) or `primary` when it is the screen's one orange action. */
+    actionEmphasis?: BackdropChartActionEmphasis;
+    linkComponent?: ElementType;
+    className?: string;
+}
+/**
+ * A line over time, with up to one muted comparison line. Generic parts only:
+ * a dashed segment from an index on, an area under the line, a vertical
+ * marker with a label slot, and filled or hollow end points. What the line
+ * means, and any zone or event drawn on it, is the product's.
+ */
+export declare function BackdropLineChart({ label, data, categoryHeader, seriesName, comparisonName, yTicks, gridlines, max, dashedFrom, area, marker, end, comparisonEnd, caption, action, actionEmphasis, linkComponent, className, }: BackdropLineChartProps): import("react").JSX.Element;