@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/roadmap/derive.js

@@ -0,0 +1,28 @@
+function i(n, e) {
+  return e.every((t) => n.built[t] === !0);
+}
+function u(n, e) {
+  return e.every((t) => n.built[t] !== !0);
+}
+function s(n, e) {
+  const t = n.filter((r) => r.status !== "rejected");
+  return t.length === 0 ? "unresolved" : t.every((r) => r.status === "verified" && i(r, e)) ? "shipped" : t.every((r) => r.status === "pending" && u(r, e)) ? "planned" : "in-progress";
+}
+function l(n) {
+  return [...n].sort((e, t) => e.order - t.order).map((e) => e.id);
+}
+function o(n, e) {
+  const t = n.filter((r) => r.status !== "rejected");
+  return {
+    built: t.filter((r) => r.built[e] === !0).length,
+    live: t.length
+  };
+}
+export {
+  s as deriveRoadmapItemStatus,
+  i as isFullyBuilt,
+  u as isUnbuilt,
+  l as trackIds,
+  o as trackProgress
+};
+//# sourceMappingURL=derive.js.map

package/dist/components/roadmap/derive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"derive.js","sources":["../../../src/components/roadmap/derive.ts"],"sourcesContent":["import type { RoadmapItemStatus, Track, UseCase } from \"./types\";\n\n/** Built on every track in `trackIds`. An absent key is not built. */\nexport function isFullyBuilt(useCase: UseCase, trackIds: readonly string[]): boolean {\n  return trackIds.every((id) => useCase.built[id] === true);\n}\n\n/** Built on none of them. */\nexport function isUnbuilt(useCase: UseCase, trackIds: readonly string[]): boolean {\n  return trackIds.every((id) => useCase.built[id] !== true);\n}\n\n/**\n * A RoadmapItem's status is derived from its own UseCases, never hand-set —\n * the same reasoning as any parent whose state depends on its children:\n * hand-set it and it silently drifts the moment a child changes underneath it.\n *\n * Rejected cases fall out of the rollup entirely — dead weight, not a blocker.\n * A goal left with no live cases (everything rejected) is \"unresolved\" rather\n * than defaulting to \"planned\", which would misreport a goal that needs a\n * human decision as one that simply hasn't started.\n *\n * SHIPPED REQUIRES EVERY TRACK, and that is the point of tracks existing. A\n * team building its interface ahead of its backend would otherwise roll up to\n * \"shipped\" on a screen with nothing behind it — the ledger's single most\n * damaging possible lie, because \"shipped\" is exactly the word people stop\n * checking.\n *\n * `trackIds` is required rather than defaulted. There is no sensible default:\n * an empty list would make `every` vacuously true and quietly restore the old\n * one-bit behaviour under a new name, which is worse than an argument.\n */\nexport function deriveRoadmapItemStatus(\n  useCases: UseCase[],\n  trackIds: readonly string[],\n): RoadmapItemStatus {\n  const live = useCases.filter((uc) => uc.status !== \"rejected\");\n\n  if (live.length === 0) return \"unresolved\";\n  if (live.every((uc) => uc.status === \"verified\" && isFullyBuilt(uc, trackIds))) return \"shipped\";\n  if (live.every((uc) => uc.status === \"pending\" && isUnbuilt(uc, trackIds))) return \"planned\";\n  return \"in-progress\";\n}\n\n/** `Track.id`s in display order — what every rollup above wants. */\nexport function trackIds(tracks: readonly Track[]): string[] {\n  return [...tracks].sort((a, b) => a.order - b.order).map((track) => track.id);\n}\n\n/**\n * How far a set of use cases has got along ONE track: `{ built, live }`.\n *\n * Counted over live cases only, for the same reason the rollup ignores them:\n * a rejected case can never be built, so including it would cap every\n * progress reading below 100% forever.\n */\nexport function trackProgress(\n  useCases: UseCase[],\n  trackId: string,\n): { built: number; live: number } {\n  const live = useCases.filter((uc) => uc.status !== \"rejected\");\n  return {\n    built: live.filter((uc) => uc.built[trackId] === true).length,\n    live: live.length,\n  };\n}\n"],"names":["isFullyBuilt","useCase","trackIds","id","isUnbuilt","deriveRoadmapItemStatus","useCases","live","uc","tracks","a","b","track","trackProgress","trackId"],"mappings":"AAGO,SAASA,EAAaC,GAAkBC,GAAsC;AACnF,SAAOA,EAAS,MAAM,CAACC,MAAOF,EAAQ,MAAME,CAAE,MAAM,EAAI;AAC1D;AAGO,SAASC,EAAUH,GAAkBC,GAAsC;AAChF,SAAOA,EAAS,MAAM,CAACC,MAAOF,EAAQ,MAAME,CAAE,MAAM,EAAI;AAC1D;AAsBO,SAASE,EACdC,GACAJ,GACmB;AACnB,QAAMK,IAAOD,EAAS,OAAO,CAACE,MAAOA,EAAG,WAAW,UAAU;AAE7D,SAAID,EAAK,WAAW,IAAU,eAC1BA,EAAK,MAAM,CAACC,MAAOA,EAAG,WAAW,cAAcR,EAAaQ,GAAIN,CAAQ,CAAC,IAAU,YACnFK,EAAK,MAAM,CAACC,MAAOA,EAAG,WAAW,aAAaJ,EAAUI,GAAIN,CAAQ,CAAC,IAAU,YAC5E;AACT;AAGO,SAASA,EAASO,GAAoC;AAC3D,SAAO,CAAC,GAAGA,CAAM,EAAE,KAAK,CAACC,GAAGC,MAAMD,EAAE,QAAQC,EAAE,KAAK,EAAE,IAAI,CAACC,MAAUA,EAAM,EAAE;AAC9E;AASO,SAASC,EACdP,GACAQ,GACiC;AACjC,QAAMP,IAAOD,EAAS,OAAO,CAACE,MAAOA,EAAG,WAAW,UAAU;AAC7D,SAAO;AAAA,IACL,OAAOD,EAAK,OAAO,CAACC,MAAOA,EAAG,MAAMM,CAAO,MAAM,EAAI,EAAE;AAAA,IACvD,MAAMP,EAAK;AAAA,EAAA;AAEf;"}

package/dist/components/stepper/Stepper.js

@@ -0,0 +1,276 @@
+import { jsxs as i, Fragment as $, jsx as e } from "react/jsx-runtime";
+import { useId as X, useState as Y, useEffect as q, useRef as Z } from "react";
+import { Badge as A } from "../Badge.js";
+import { Button as F } from "../Button.js";
+import { Icon as u } from "../Icon.js";
+import { cn as o } from "../../lib/cn.js";
+import { useBelow as C } from "../../lib/use-media-query.js";
+import { assertSteps as ee, stepperProgress as te, advanceBlockReason as re, stepStatus as se } from "./derive.js";
+import { useUiStrings as ie } from "../../lib/i18n/provider.js";
+import { useNumberFormat as ae } from "../../lib/i18n/number-format.js";
+const oe = {
+  complete: {
+    icon: "circle-check",
+    marker: "border-success-border bg-success-subtle text-success-text",
+    label: "text-primary"
+  },
+  /* WARNING, NOT DANGER. A blocked step is not wrong — it is the thing you are
+     standing on, with something still to do, and its reason is always printed
+     beside the forward control. It does not need to shout. */
+  /* DX-4973: A CHECK REFUSED IT. Red like "incomplete" (both are faults) but a different glyph (an exclamation in a ring, not a cross),
+     because the fault is different: this one was tried and the answer is printed under the label in the same red. */
+  failed: {
+    icon: "circle-alert",
+    marker: "border-danger-border bg-danger-subtle text-danger-text",
+    label: "text-primary"
+  },
+  blocked: {
+    icon: "triangle-alert",
+    marker: "border-warning-border bg-warning-subtle text-warning-text",
+    label: "text-primary"
+  },
+  current: {
+    icon: null,
+    marker: "border-accent-border bg-accent text-accent-contrast",
+    label: "text-primary"
+  },
+  /* DANGER IS SPENT HERE, DELIBERATELY, AND ONLY HERE. A step behind the cursor
+     that was never finished is the single genuine fault a rail can show;
+     everything ahead is merely not done yet, which is not a fault. Spending
+     `danger` on "not reached" would leave nothing to mark the one thing that
+     actually went wrong. */
+  incomplete: {
+    icon: "circle-x",
+    marker: "border-danger-border bg-danger-subtle text-danger-text",
+    label: "text-primary"
+  },
+  /* DX-4963: LEFT ON PURPOSE, SO NEITHER A TICK NOR A FAULT. Green would say it was done and red would say it went wrong;
+     it was neither. A grey ring with a dash is its own shape (not the tick, the cross, the plain number or the
+     warning triangle) and has its own spoken word, so it is told apart without hue. */
+  /* DX-4968: DONE BUT UNPROVEN. Same neutral grey as "skipped" (green is reserved for a tested result), but a ringed dot, not a
+     dash, and the caller's own words are printed under the label and spoken. */
+  unverified: {
+    icon: "circle-dot",
+    marker: "border-border-strong bg-surface-sunken text-secondary",
+    label: "text-primary"
+  },
+  skipped: {
+    icon: "circle-minus",
+    marker: "border-border-strong bg-surface-sunken text-secondary",
+    label: "text-secondary"
+  },
+  upcoming: {
+    icon: null,
+    marker: "border-border bg-surface text-tertiary",
+    label: "text-tertiary"
+  }
+};
+function ge({
+  label: H,
+  steps: n,
+  current: r,
+  onCurrentChange: m,
+  showControls: M = !0,
+  onFinish: y,
+  backLabel: P,
+  nextLabel: _,
+  finishLabel: D,
+  orientation: N = "horizontal",
+  compact: S = !1,
+  emphasizeCurrent: z = !1,
+  children: I,
+  className: G
+}) {
+  const s = ie().stepper, b = ae();
+  ee(n, r);
+  const l = te(n, r), x = re(n, r), g = r === n.length - 1, R = X(), B = `stepper-blocked-${R}`, k = N === "side", J = C(k ? "lg" : "sm"), h = S === !0 || S === "auto" && J, d = N !== "horizontal" || h, [p, T] = Y(!1), L = `stepper-list-${R}`;
+  q(() => {
+    T(!1);
+  }, [r]);
+  const O = Z(null);
+  q(() => {
+    if (d) return;
+    const t = O.current?.querySelector('[aria-current="step"]');
+    t instanceof HTMLElement && typeof t.scrollIntoView == "function" && t.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [r, d, p, h]);
+  const j = s.stepOf(b(l.position), b(l.total)), K = !h || p, Q = /* @__PURE__ */ i($, { children: [
+    l.skipped > 0 && /* THE DISAGREEMENT, STATED. This is the chip a progress bar would
+    have swallowed: the cursor is at step 4 and only two of the three
+    behind it are finished. */
+    /* @__PURE__ */ e(A, { size: "sm", tone: "danger", dot: !0, children: s.missed(l.skipped, b(l.skipped)) }),
+    l.acknowledged > 0 && /* @__PURE__ */ e(A, { size: "sm", tone: "muted", dot: !0, children: s.skipped(l.acknowledged, b(l.acknowledged)) })
+  ] });
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: o(
+        "flex min-w-0 flex-col gap-6",
+        k && "lg:grid lg:grid-cols-[17rem_minmax(0,1fr)] lg:items-start lg:gap-x-10",
+        G
+      ),
+      children: [
+        /* @__PURE__ */ i("div", { className: o("flex min-w-0 flex-col gap-6", k && "lg:sticky lg:top-0"), children: [
+          /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
+            h ? /* @__PURE__ */ i(
+              "button",
+              {
+                type: "button",
+                "aria-expanded": p,
+                "aria-controls": L,
+                onClick: () => T((t) => !t),
+                "data-testid": "stepper-compact-toggle",
+                className: "dx-tap -mx-1 flex min-w-0 cursor-pointer items-center gap-2 rounded-lg px-1 py-1 text-left outline-none hover:bg-surface-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-border",
+                children: [
+                  /* @__PURE__ */ e("span", { className: "min-w-0 text-sm font-semibold text-primary", children: s.compactSummary(j, n[r].label) }),
+                  /* @__PURE__ */ e("span", { className: "sr-only", children: p ? s.hideSteps : s.showSteps }),
+                  /* @__PURE__ */ e(u, { name: p ? "chevron-up" : "chevron-down", size: "sm", className: "shrink-0 text-tertiary" })
+                ]
+              }
+            ) : /* @__PURE__ */ e("p", { className: "text-2xs font-semibold tracking-widest text-tertiary uppercase", children: j }),
+            Q
+          ] }),
+          K && /* @__PURE__ */ e(
+            "ol",
+            {
+              ref: O,
+              id: L,
+              "aria-label": H,
+              className: o(
+                "flex min-w-0",
+                /* `relative` pairs with `overflow-x-auto`: each step's status carries
+                   an `sr-only` span, which is `position: absolute`, and an
+                   unpositioned scroller is not in its containing-block chain — so
+                   the strip would not clip it and its width would reach the
+                   document. See `scripts/probe-containment.mjs`. */
+                d ? "flex-col gap-1" : o("relative flex-row gap-3 overflow-x-auto pb-1", z ? "items-center" : "items-start")
+              ),
+              children: n.map((t, c) => {
+                const f = se(n, r, c), v = oe[f], W = m !== void 0 && c < r, a = z ? c === r ? "active" : "inactive" : void 0, w = a === "active", E = /* @__PURE__ */ e(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: o(
+                      "grid shrink-0 place-items-center rounded-full border",
+                      a === void 0 ? "size-7" : w ? "size-9" : "size-5",
+                      w ? "text-xs" : "text-2xs",
+                      "font-mono tabular-nums",
+                      "transition-[color,background-color,border-color,width,height] duration-(--dur-base) ease-hover",
+                      v.marker
+                    ),
+                    children: v.icon === null ? c + 1 : /* @__PURE__ */ e(u, { name: v.icon, size: "xs" })
+                  }
+                ), U = /* @__PURE__ */ i($, { children: [
+                  a === void 0 ? E : /* @__PURE__ */ e("span", { className: "grid w-9 shrink-0 place-items-center", children: E }),
+                  /* @__PURE__ */ i("span", { className: "flex min-w-0 flex-col gap-0.5 text-left", children: [
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: o(
+                          /* DX-4963: a label WRAPS, never "Bot u..." - nine steps in a strip cannot each be one line. */
+                          "font-medium break-words",
+                          a === void 0 ? "text-sm" : w ? "text-base font-semibold" : "text-xs",
+                          "transition-colors duration-(--dur-fast) ease-hover",
+                          v.label
+                        ),
+                        children: t.label
+                      }
+                    ),
+                    t.hint && /* @__PURE__ */ e("span", { className: "text-xs break-words text-tertiary", children: t.hint }),
+                    t.failed !== void 0 && /* @__PURE__ */ e("span", { className: "text-xs font-medium break-words text-danger-text", children: t.failed }),
+                    t.unverified !== void 0 && /* @__PURE__ */ e("span", { className: "text-xs break-words text-secondary", children: t.unverified })
+                  ] }),
+                  /* @__PURE__ */ e("span", { className: "sr-only", children: s.statusSuffix(f === "unverified" ? t.unverified : f === "failed" ? t.failed : s.status[f]) })
+                ] }), V = o(
+                  "flex min-w-0 gap-3 rounded-lg px-1 py-1",
+                  a === void 0 ? "items-start" : "items-center",
+                  !d && "min-w-32"
+                );
+                return /* @__PURE__ */ i(
+                  "li",
+                  {
+                    "data-status": f,
+                    "data-emphasis": a,
+                    "aria-current": c === r ? "step" : void 0,
+                    className: o(
+                      "flex min-w-0 gap-3",
+                      a === void 0 ? "items-start" : "items-center",
+                      !d && "flex-1",
+                      a !== void 0 && "transition-[opacity,color,background-color,border-color] duration-(--dur-base) ease-hover",
+                      a === "inactive" && "opacity-60"
+                    ),
+                    children: [
+                      W ? /* @__PURE__ */ e(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => m(c),
+                          className: o(
+                            V,
+                            "dx-tap cursor-pointer text-left outline-none",
+                            "transition-colors duration-(--dur-fast) ease-hover",
+                            "hover:bg-surface-hover",
+                            "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-border"
+                          ),
+                          children: U
+                        }
+                      ) : /* @__PURE__ */ e("span", { className: V, children: U }),
+                      !d && c < n.length - 1 && /* @__PURE__ */ e(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          className: o("h-px min-w-4 flex-1 bg-border-subtle", a === void 0 && "mt-4")
+                        }
+                      )
+                    ]
+                  },
+                  t.id
+                );
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-col gap-6", children: [
+          I !== void 0 && /* @__PURE__ */ e("div", { className: "min-w-0", children: I }),
+          m !== void 0 && M && /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
+            r > 0 && /* @__PURE__ */ e(
+              F,
+              {
+                variant: "outline",
+                onClick: () => m(r - 1),
+                leadingIcon: /* @__PURE__ */ e(u, { name: "arrow-left", size: "sm" }),
+                children: P ?? s.back
+              }
+            ),
+            (!g || y !== void 0) && /* @__PURE__ */ e(
+              F,
+              {
+                disabled: x !== null,
+                "aria-describedby": x !== null ? B : void 0,
+                onClick: () => {
+                  g ? y?.() : m(r + 1);
+                },
+                trailingIcon: g ? void 0 : /* @__PURE__ */ e(u, { name: "arrow-right", size: "sm" }),
+                children: g ? D ?? s.finish : _ ?? s.next
+              }
+            ),
+            x !== null && /* @__PURE__ */ i(
+              "p",
+              {
+                id: B,
+                className: "flex min-w-0 items-center gap-1.5 text-sm text-warning-text",
+                children: [
+                  /* @__PURE__ */ e(u, { name: "triangle-alert", size: "sm", className: "shrink-0" }),
+                  /* @__PURE__ */ e("span", { className: "min-w-0", children: x })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ge as Stepper
+};
+//# sourceMappingURL=Stepper.js.map

package/dist/components/stepper/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState, type ReactNode } from \"react\";\nimport { Badge } from \"../Badge\";\nimport { Button } from \"../Button\";\nimport { Icon, type IconName } from \"../Icon\";\nimport { cn } from \"../../lib/cn\";\nimport { useNumberFormat, useUiStrings } from \"../../lib/i18n\";\nimport { useBelow } from \"../../lib/use-media-query\";\nimport { advanceBlockReason, assertSteps, stepStatus, stepperProgress } from \"./derive\";\nimport type { Step, StepStatus, StepperProgress } from \"./types\";\n\nexport type { Step, StepStatus, StepperProgress };\n\n/* ============================================================================\n   STEPPER — a guided sequence with a gate on the way forward.\n\n   THE CONTENT IS A SLOT, NOT A PANEL PER STEP, and that is the one place this\n   deliberately diverges from `Tabs`.\n\n   `Tabs`/`TabPanel` declares every panel and lets the library decide which is\n   visible. That is right for tabs: they are PEERS, all of them reachable at any\n   moment, and declaring them all is what lets the indicator know how many there\n   are. A wizard is not that. Its steps are a SEQUENCE with a gate between them,\n   exactly one is live, and the panels are usually forms whose state the\n   consumer owns anyway. Declaring all of them would mount every form at once —\n   and `TabPanel` has already been bitten by exactly that: a panel with no exit\n   transition stayed mounted, and four open tabs put four panels on screen at\n   the same time. A stepper that mounted five forms to show one would be\n   reintroducing that shape on purpose.\n\n   So `children` is the current step's content, whatever it is, and the consumer\n   switches on `current` — which it is already holding, because it is the\n   consumer that decides when a step is finished.\n\n   NO PERCENTAGE, ANYWHERE. A stepper has two numbers that look like one:\n   WHERE THE CURSOR IS and HOW MANY STEPS ARE FINISHED. They agree until\n   somebody moves past a step without finishing it, and from then on a single\n   bar has to pick one and quietly claim the other — \"60%\" over a flow where\n   step 2 was skipped is a component papering over the disagreement it is best\n   placed to report. So the header reads a POSITION (\"Step 3 of 5\"), which is a\n   fact about where you are and nothing else, and when the two numbers do\n   disagree the header says so in its own chip. `stepperProgress` is exported\n   for a consumer that wants a bar and can then choose which number it is\n   drawing, by name.\n\n   BACKWARD IS CLICKABLE; FORWARD IS NOT A CONTROL AT ALL. Returning to a step\n   you have already seen is safe and is how somebody fixes an answer, so every\n   step behind the cursor is a real button. Jumping AHEAD is the one movement\n   the gate can refuse, and a rail that offers it makes the gate decorative —\n   so an unreached step is not a disabled button, it is not a button. A\n   disabled control with no explanation is the \"broken button\" reading this\n   library refuses elsewhere too; the way to avoid it is to not draw one.\n   ========================================================================= */\n\ninterface StatusPresentation {\n  /** Null means the marker draws the step NUMBER instead of a glyph. */\n  icon: IconName | null;\n  marker: string;\n  label: string;\n}\n\n/* The glyphs differ per state, not only the hue: a tick, a cross, a dashed\n   ring and a number are four shapes. Colour is reinforcement for the people\n   who can use it — see `tokens.mdx`, \"Status never depends on hue alone\". */\nconst STATUS: Record<StepStatus, StatusPresentation> = {\n  complete: {\n    icon: \"circle-check\",\n    marker: \"border-success-border bg-success-subtle text-success-text\",\n    label: \"text-primary\",\n  },\n  /* WARNING, NOT DANGER. A blocked step is not wrong — it is the thing you are\n     standing on, with something still to do, and its reason is always printed\n     beside the forward control. It does not need to shout. */\n  /* DX-4973: A CHECK REFUSED IT. Red like \"incomplete\" (both are faults) but a different glyph (an exclamation in a ring, not a cross),\n     because the fault is different: this one was tried and the answer is printed under the label in the same red. */\n  failed: {\n    icon: \"circle-alert\",\n    marker: \"border-danger-border bg-danger-subtle text-danger-text\",\n    label: \"text-primary\",\n  },\n  blocked: {\n    icon: \"triangle-alert\",\n    marker: \"border-warning-border bg-warning-subtle text-warning-text\",\n    label: \"text-primary\",\n  },\n  current: {\n    icon: null,\n    marker: \"border-accent-border bg-accent text-accent-contrast\",\n    label: \"text-primary\",\n  },\n  /* DANGER IS SPENT HERE, DELIBERATELY, AND ONLY HERE. A step behind the cursor\n     that was never finished is the single genuine fault a rail can show;\n     everything ahead is merely not done yet, which is not a fault. Spending\n     `danger` on \"not reached\" would leave nothing to mark the one thing that\n     actually went wrong. */\n  incomplete: {\n    icon: \"circle-x\",\n    marker: \"border-danger-border bg-danger-subtle text-danger-text\",\n    label: \"text-primary\",\n  },\n  /* DX-4963: LEFT ON PURPOSE, SO NEITHER A TICK NOR A FAULT. Green would say it was done and red would say it went wrong;\n     it was neither. A grey ring with a dash is its own shape (not the tick, the cross, the plain number or the\n     warning triangle) and has its own spoken word, so it is told apart without hue. */\n  /* DX-4968: DONE BUT UNPROVEN. Same neutral grey as \"skipped\" (green is reserved for a tested result), but a ringed dot, not a\n     dash, and the caller's own words are printed under the label and spoken. */\n  unverified: {\n    icon: \"circle-dot\",\n    marker: \"border-border-strong bg-surface-sunken text-secondary\",\n    label: \"text-primary\",\n  },\n  skipped: {\n    icon: \"circle-minus\",\n    marker: \"border-border-strong bg-surface-sunken text-secondary\",\n    label: \"text-secondary\",\n  },\n  upcoming: {\n    icon: null,\n    marker: \"border-border bg-surface text-tertiary\",\n    label: \"text-tertiary\",\n  },\n};\n\nexport interface StepperProps {\n  /**\n   * What this flow IS — \"Case intake\", \"Deployment\".\n   *\n   * It names the ordered list, which is how somebody arriving at the rail\n   * learns what the sequence is for. Required rather than optional for the same\n   * reason `KanbanBoard.label` is: an unnamed list announces as \"list\" and\n   * gives nobody a reason to be in it.\n   */\n  label: string;\n  steps: readonly Step[];\n  /** 0-based. Out of range throws — see `assertSteps`. */\n  current: number;\n  /**\n   * Move the cursor.\n   *\n   * ABSENT MAKES THE WHOLE RAIL A READ-OUT: no step is clickable and no\n   * forward/back control is drawn. The configuration is the switch, the same\n   * way `UseCaseCard` only becomes editable when handed `onStatusChange`. A\n   * consumer driving its own buttons omits this and keeps the rail.\n   */\n  onCurrentChange?: (index: number) => void;\n  /**\n   * Draw the built-in Back / Next / Finish row. Default `true`.\n   *\n   * `false` keeps the rail clickable (`onCurrentChange` still fires for a click\n   * on an earlier step, and only for that) and draws no row, so a consumer\n   * whose content owns its own forward / back movement, such as a step that\n   * pages through several screens, renders its own buttons without a second\n   * row of them. Without it the only way to drop the row was to drop\n   * `onCurrentChange`, which also made the rail a read-out, and a rail click on\n   * the adjacent earlier step is indistinguishable from the built-in Back\n   * button (both call `onCurrentChange(current - 1)`).\n   *\n   * Nothing prints a step's `blocked` reason when the row is hidden: it is\n   * rendered beside the forward control. The consumer's own forward control\n   * reads it from `advanceBlockReason` and shows it.\n   */\n  showControls?: boolean;\n  /**\n   * What the last step's forward control does. Absent means no control is drawn\n   * on the last step — a wizard whose final action lives in its own form.\n   */\n  onFinish?: () => void;\n  backLabel?: string;\n  nextLabel?: string;\n  finishLabel?: string;\n  /**\n   * `vertical` stacks the rail above long-form content. `horizontal` is the\n   * default because a sequence reads left to right, which is also the only\n   * layout in which the connector between two steps means anything.\n   *\n   * DX-4963: `side` puts the rail in a column BESIDE the content from the `lg` breakpoint (1024px) up, where a long flow\n   * (nine steps) reads best and every label is whole, and stacks it above the content like `vertical` below that.\n   */\n  orientation?: \"horizontal\" | \"vertical\" | \"side\";\n  /**\n   * DX-4963 - the one-line form for a narrow screen: \"Step 3 of 9: Project\" in a button that opens the full list under it (and\n   * closes again when the step changes). `true` always, `\"auto\"` wherever the full rail would not fit (below the `sm` breakpoint, 640px; with\n   * `orientation=\"side\"` below `lg`, 1024px, DX-4968: between the two the stacked list would push the step's own content off the first\n   * screen), `false` (the default) never. Nine steps stacked is about 530px tall; this keeps the step's own content on the first screen.\n   */\n  compact?: boolean | \"auto\";\n  /**\n   * DXUI-100 - draw the step you are on as the one that matters: it is larger and fully opaque, every other step is smaller\n   * and faded, and each label is centred on its marker (the default aligns a label with the top of its marker, which reads\n   * wrongly beside a marker of another size). Default `false`: a stepper that does not name it is drawn as before.\n   *\n   * Nothing is removed from a faded step: its status glyph, hint and spoken state are all still there, only quieter.\n   */\n  emphasizeCurrent?: boolean;\n  /** The CURRENT step's content. */\n  children?: ReactNode;\n  className?: string;\n}\n\nexport function Stepper({\n  label,\n  steps,\n  current,\n  onCurrentChange,\n  showControls = true,\n  onFinish,\n  backLabel,\n  nextLabel,\n  finishLabel,\n  orientation = \"horizontal\",\n  compact = false,\n  emphasizeCurrent = false,\n  children,\n  className,\n}: StepperProps) {\n  /* Loud, and before anything renders. Every case it catches is silent\n     otherwise — see the note on `assertSteps`. */\n  const strings = useUiStrings().stepper;\n  const fmt = useNumberFormat();\n  assertSteps(steps, current);\n\n  const progress = stepperProgress(steps, current);\n  const blockReason = advanceBlockReason(steps, current);\n  const onLastStep = current === steps.length - 1;\n  const uid = useId();\n  const reasonId = `stepper-blocked-${uid}`;\n  const side = orientation === \"side\";\n  // DX-4968: \"auto\" follows the width where THIS layout stops fitting: the side rail needs lg, the strip needs sm.\n  const narrow = useBelow(side ? \"lg\" : \"sm\");\n  const isCompact = compact === true || (compact === \"auto\" && narrow);\n  // The list the compact form opens is always the stacked one: a strip does not fit the width compact exists for.\n  const vertical = orientation !== \"horizontal\" || isCompact;\n  const [listOpen, setListOpen] = useState(false);\n  const listId = `stepper-list-${uid}`;\n  /* The list closes once a step is chosen (or the cursor moves any other way): the compact form exists to keep the step's own content\n     on the first screen, and a list left open after a choice would push it down again. */\n  useEffect(() => {\n    setListOpen(false);\n  }, [current]);\n  /* A strip that scrolls keeps the current step in view: moving on from step 6 must not leave the cursor off the right edge. */\n  const railRef = useRef<HTMLOListElement>(null);\n  useEffect(() => {\n    if (vertical) return;\n    const here = railRef.current?.querySelector('[aria-current=\"step\"]');\n    if (here instanceof HTMLElement && typeof here.scrollIntoView === \"function\") {\n      here.scrollIntoView({ block: \"nearest\", inline: \"nearest\" });\n    }\n  }, [current, vertical, listOpen, isCompact]);\n  const positionText = strings.stepOf(fmt(progress.position), fmt(progress.total));\n  const showRail = !isCompact || listOpen;\n\n  const chips = (\n    <>\n      {progress.skipped > 0 && (\n        /* THE DISAGREEMENT, STATED. This is the chip a progress bar would\n           have swallowed: the cursor is at step 4 and only two of the three\n           behind it are finished. */\n        <Badge size=\"sm\" tone=\"danger\" dot>\n          {strings.missed(progress.skipped, fmt(progress.skipped))}\n        </Badge>\n      )}\n      {/* DX-4963: the steps left on purpose are counted in a grey chip, never the red one - a decision is not a fault. */}\n      {progress.acknowledged > 0 && (\n        <Badge size=\"sm\" tone=\"muted\" dot>\n          {strings.skipped(progress.acknowledged, fmt(progress.acknowledged))}\n        </Badge>\n      )}\n    </>\n  );\n\n  return (\n    <div\n      className={cn(\n        \"flex min-w-0 flex-col gap-6\",\n        side && \"lg:grid lg:grid-cols-[17rem_minmax(0,1fr)] lg:items-start lg:gap-x-10\",\n        className,\n      )}\n    >\n      <div className={cn(\"flex min-w-0 flex-col gap-6\", side && \"lg:sticky lg:top-0\")}>\n      <div className=\"flex flex-wrap items-center gap-3\">\n        {isCompact ? (\n          <button\n            type=\"button\"\n            aria-expanded={listOpen}\n            aria-controls={listId}\n            onClick={() => setListOpen((open) => !open)}\n            data-testid=\"stepper-compact-toggle\"\n            className=\"dx-tap -mx-1 flex min-w-0 cursor-pointer items-center gap-2 rounded-lg px-1 py-1 text-left outline-none hover:bg-surface-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-border\"\n          >\n            <span className=\"min-w-0 text-sm font-semibold text-primary\">\n              {strings.compactSummary(positionText, steps[current]!.label)}\n            </span>\n            <span className=\"sr-only\">{listOpen ? strings.hideSteps : strings.showSteps}</span>\n            <Icon name={listOpen ? \"chevron-up\" : \"chevron-down\"} size=\"sm\" className=\"shrink-0 text-tertiary\" />\n          </button>\n        ) : (\n          <p className=\"text-2xs font-semibold tracking-widest text-tertiary uppercase\">{positionText}</p>\n        )}\n        {chips}\n      </div>\n\n      {showRail && (\n      <ol\n        ref={railRef}\n        id={listId}\n        aria-label={label}\n        className={cn(\n          \"flex min-w-0\",\n          /* `relative` pairs with `overflow-x-auto`: each step's status carries\n             an `sr-only` span, which is `position: absolute`, and an\n             unpositioned scroller is not in its containing-block chain — so\n             the strip would not clip it and its width would reach the\n             document. See `scripts/probe-containment.mjs`. */\n          vertical\n            ? \"flex-col gap-1\"\n            : cn(\"relative flex-row gap-3 overflow-x-auto pb-1\", emphasizeCurrent ? \"items-center\" : \"items-start\"),\n        )}\n      >\n        {steps.map((step, index) => {\n          const status = stepStatus(steps, current, index);\n          const presentation = STATUS[status];\n          /* Strictly behind. The current step is where you already are, so a\n             button on it would do nothing — the dead control this component\n             avoids drawing anywhere. */\n          const reachable = onCurrentChange !== undefined && index < current;\n\n          /* DXUI-100: with `emphasizeCurrent` the cursor's step is \"active\" and every other step is \"inactive\"; without it no step\n             carries the attribute and nothing below changes. */\n          // I18N-ALLOW: emphasis tokens written to the data-emphasis attribute\n          const emphasis =!emphasizeCurrent ? undefined : index === current ? \"active\" : \"inactive\";\n          const active = emphasis === \"active\";\n          const marker = (\n            <span\n              aria-hidden=\"true\"\n              className={cn(\n                \"grid shrink-0 place-items-center rounded-full border\",\n                emphasis === undefined ? \"size-7\" : active ? \"size-9\" : \"size-5\",\n                active ? \"text-xs\" : \"text-2xs\",\n                \"font-mono tabular-nums\",\n                \"transition-[color,background-color,border-color,width,height] duration-(--dur-base) ease-hover\",\n                presentation.marker,\n              )}\n            >\n              {presentation.icon === null ? (\n                index + 1\n              ) : (\n                <Icon name={presentation.icon} size=\"xs\" />\n              )}\n            </span>\n          );\n          const body = (\n            <>\n              {/* DXUI-100: markers of two sizes share one axis, so a stacked rail's markers do not zigzag down its left edge. */}\n              {emphasis === undefined ? marker : <span className=\"grid w-9 shrink-0 place-items-center\">{marker}</span>}\n              <span className=\"flex min-w-0 flex-col gap-0.5 text-left\">\n                <span\n                  className={cn(\n                    /* DX-4963: a label WRAPS, never \"Bot u...\" - nine steps in a strip cannot each be one line. */\n                    \"font-medium break-words\",\n                    emphasis === undefined ? \"text-sm\" : active ? \"text-base font-semibold\" : \"text-xs\",\n                    \"transition-colors duration-(--dur-fast) ease-hover\",\n                    presentation.label,\n                  )}\n                >\n                  {step.label}\n                </span>\n                {step.hint && (\n                  <span className=\"text-xs break-words text-tertiary\">{step.hint}</span>\n                )}\n                {step.failed !== undefined && (\n                  <span className=\"text-xs font-medium break-words text-danger-text\">{step.failed}</span>\n                )}\n                {step.unverified !== undefined && (\n                  <span className=\"text-xs break-words text-secondary\">{step.unverified}</span>\n                )}\n              </span>\n              {/* THE STATE IS PART OF THE NAME, NOT A REPLACEMENT FOR IT.\n                  `aria-label` OVERRIDES a button's content, and this library\n                  has already shipped that mistake once: `ProvenanceDisclosure`\n                  announced a page of field labels and not one value. So the\n                  state is EXTRA text inside the control rather than an\n                  attribute over it — the name reads \"Evidence, skipped\", with\n                  the label still leading it. */}\n              <span className=\"sr-only\">{strings.statusSuffix(status === \"unverified\" ? step.unverified! : status === \"failed\" ? step.failed! : strings.status[status])}</span>\n            </>\n          );\n\n          /* DX-4963: a horizontal step keeps room for its label (about five words of a short line) so the label wraps at word breaks\n             and the strip scrolls instead of squeezing it into \"Acce / ss\". */\n          const shared = cn(\n            \"flex min-w-0 gap-3 rounded-lg px-1 py-1\",\n            emphasis === undefined ? \"items-start\" : \"items-center\",\n            !vertical && \"min-w-32\",\n          );\n\n          return (\n            <li\n              key={step.id}\n              data-status={status}\n              data-emphasis={emphasis}\n              aria-current={index === current ? \"step\" : undefined}\n              /* DX-4963: a floor on a horizontal step's width, so the strip SCROLLS (it is overflow-x-auto) before a label is squeezed. */\n              className={cn(\n                \"flex min-w-0 gap-3\",\n                emphasis === undefined ? \"items-start\" : \"items-center\",\n                !vertical && \"flex-1\",\n                emphasis !== undefined && \"transition-[opacity,color,background-color,border-color] duration-(--dur-base) ease-hover\",\n                emphasis === \"inactive\" && \"opacity-60\",\n              )}\n            >\n              {reachable ? (\n                <button\n                  type=\"button\"\n                  onClick={() => onCurrentChange(index)}\n                  className={cn(\n                    shared,\n                    \"dx-tap cursor-pointer text-left outline-none\",\n                    \"transition-colors duration-(--dur-fast) ease-hover\",\n                    \"hover:bg-surface-hover\",\n                    \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-border\",\n                  )}\n                >\n                  {body}\n                </button>\n              ) : (\n                <span className={shared}>{body}</span>\n              )}\n\n              {!vertical && index < steps.length - 1 && (\n                <span\n                  aria-hidden=\"true\"\n                  className={cn(\"h-px min-w-4 flex-1 bg-border-subtle\", emphasis === undefined && \"mt-4\")}\n                />\n              )}\n            </li>\n          );\n        })}\n      </ol>\n      )}\n      </div>\n\n      <div className=\"flex min-w-0 flex-col gap-6\">\n      {children !== undefined && <div className=\"min-w-0\">{children}</div>}\n\n      {onCurrentChange !== undefined && showControls && (\n        <div className=\"flex flex-wrap items-center gap-3\">\n          {/* Not rendered at all on the first step, rather than rendered and\n              disabled: there is nowhere to go back to, and a control that\n              exists only to be refused reads as broken. */}\n          {current > 0 && (\n            <Button\n              variant=\"outline\"\n              onClick={() => onCurrentChange(current - 1)}\n              leadingIcon={<Icon name=\"arrow-left\" size=\"sm\" />}\n            >\n              {backLabel ?? strings.back}\n            </Button>\n          )}\n\n          {(!onLastStep || onFinish !== undefined) && (\n            <Button\n              disabled={blockReason !== null}\n              /* The reason is WIRED to the control, not merely printed near\n                 it — otherwise the one person who cannot see the two sitting\n                 side by side is told the button is dimmed and never told why. */\n              aria-describedby={blockReason !== null ? reasonId : undefined}\n              onClick={() => {\n                if (onLastStep) onFinish?.();\n                else onCurrentChange(current + 1);\n              }}\n              trailingIcon={onLastStep ? undefined : <Icon name=\"arrow-right\" size=\"sm\" />}\n            >\n              {onLastStep ? (finishLabel ?? strings.finish) : (nextLabel ?? strings.next)}\n            </Button>\n          )}\n\n          {blockReason !== null && (\n            <p\n              id={reasonId}\n              className=\"flex min-w-0 items-center gap-1.5 text-sm text-warning-text\"\n            >\n              <Icon name=\"triangle-alert\" size=\"sm\" className=\"shrink-0\" />\n              <span className=\"min-w-0\">{blockReason}</span>\n            </p>\n          )}\n        </div>\n      )}\n      </div>\n    </div>\n  );\n}\n"],"names":["STATUS","Stepper","label","steps","current","onCurrentChange","showControls","onFinish","backLabel","nextLabel","finishLabel","orientation","compact","emphasizeCurrent","children","className","strings","useUiStrings","fmt","useNumberFormat","assertSteps","progress","stepperProgress","blockReason","advanceBlockReason","onLastStep","uid","useId","reasonId","side","narrow","useBelow","isCompact","vertical","listOpen","setListOpen","useState","listId","useEffect","railRef","useRef","here","positionText","showRail","chips","jsxs","Fragment","Badge","cn","open","jsx","Icon","step","index","status","stepStatus","presentation","reachable","emphasis","active","marker","body","shared","Button"],"mappings":"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"}

package/dist/components/stepper/derive.js

@@ -0,0 +1,53 @@
+function r(t, o) {
+  if (t.length === 0)
+    throw new Error("Stepper: `steps` is empty — there is no flow to show.");
+  if (!Number.isInteger(o) || o < 0 || o >= t.length)
+    throw new Error(
+      `Stepper: \`current\` is ${o}, which is not a step index in a flow of ${t.length}.`
+    );
+  const e = /* @__PURE__ */ new Set();
+  for (const i of t) {
+    if (e.has(i.id))
+      throw new Error(`Stepper: two steps share the id "${i.id}".`);
+    if (e.add(i.id), i.failed === "")
+      throw new Error(
+        `Stepper: step "${i.id}" is failed with an empty reason. The reason is the step's spoken state and what is printed under it, so say what the check said ("Asana refused the token") or omit \`failed\`.`
+      );
+    if (i.unverified === "")
+      throw new Error(
+        `Stepper: step "${i.id}" is unverified with an empty label. The words are the step's spoken state and what is printed under it, so say what is true ("Saved, not tested") or omit \`unverified\`.`
+      );
+    if (i.blocked === "")
+      throw new Error(
+        `Stepper: step "${i.id}" is blocked with an empty reason. A reason nobody can read leaves a disabled control with nothing beside it — omit \`blocked\` to allow the step, or say what is missing.`
+      );
+  }
+}
+function n(t, o, e) {
+  r(t, o);
+  const i = t[e];
+  if (i === void 0)
+    throw new Error(`Stepper: there is no step at index ${e}.`);
+  return i.failed !== void 0 ? "failed" : i.blocked !== void 0 ? "blocked" : e === o ? "current" : i.complete === !0 ? "complete" : i.unverified !== void 0 ? "unverified" : i.skipped === !0 ? "skipped" : e < o ? "incomplete" : "upcoming";
+}
+function d(t, o) {
+  return r(t, o), t[o].blocked ?? null;
+}
+function a(t, o) {
+  return r(t, o), {
+    position: o + 1,
+    total: t.length,
+    complete: t.filter((e) => e.complete === !0).length,
+    skipped: t.filter((e, i) => i < o && e.complete !== !0 && e.skipped !== !0 && e.unverified === void 0 && e.failed === void 0).length,
+    acknowledged: t.filter((e, i) => i !== o && e.complete !== !0 && e.skipped === !0 && e.unverified === void 0 && e.blocked === void 0 && e.failed === void 0).length,
+    unverified: t.filter((e, i) => i !== o && e.complete !== !0 && e.unverified !== void 0 && e.blocked === void 0 && e.failed === void 0).length,
+    failed: t.filter((e) => e.failed !== void 0).length
+  };
+}
+export {
+  d as advanceBlockReason,
+  r as assertSteps,
+  n as stepStatus,
+  a as stepperProgress
+};
+//# sourceMappingURL=derive.js.map

package/dist/components/stepper/derive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"derive.js","sources":["../../../src/components/stepper/derive.ts"],"sourcesContent":["import type { Step, StepStatus, StepperProgress } from \"./types\";\n\n/* ----------------------------------------------------------------------------\n   WHAT THE FLOW IS DOING — separated from the component that draws it.\n\n   Pure on purpose, and it is the same reasoning as `kanban/resolve.ts`: the\n   rail is geometry and markup, which a test environment with no layout engine\n   cannot see anyway, while \"may this person move forward\" is a decision that\n   can be wrong rather than merely ugly. A stepper that lets somebody past a\n   gate has done the one thing a stepper exists to stop.\n   -------------------------------------------------------------------------- */\n\n/**\n * Reject a flow that cannot be rendered honestly, loudly.\n *\n * Every one of these is unreachable through the component's own UI and silent\n * if allowed through: an empty rail renders as a blank strip, an out-of-range\n * cursor renders no current step at all, duplicate ids give React two elements\n * with one key (which reconciles them into each other on the next change), and\n * an empty `blocked` string disables the forward button while printing nothing\n * beside it.\n */\nexport function assertSteps(steps: readonly Step[], current: number): void {\n  if (steps.length === 0) {\n    throw new Error(\"Stepper: `steps` is empty — there is no flow to show.\");\n  }\n  if (!Number.isInteger(current) || current < 0 || current >= steps.length) {\n    throw new Error(\n      `Stepper: \\`current\\` is ${current}, which is not a step index in a flow of ${steps.length}.`,\n    );\n  }\n\n  const seen = new Set<string>();\n  for (const step of steps) {\n    if (seen.has(step.id)) {\n      throw new Error(`Stepper: two steps share the id \"${step.id}\".`);\n    }\n    seen.add(step.id);\n    if (step.failed === \"\") {\n      throw new Error(\n        `Stepper: step \"${step.id}\" is failed with an empty reason. ` +\n          \"The reason is the step's spoken state and what is printed under it, so say what the check said (\\\"Asana refused the token\\\") or omit `failed`.\",\n      );\n    }\n    if (step.unverified === \"\") {\n      throw new Error(\n        `Stepper: step \"${step.id}\" is unverified with an empty label. ` +\n          \"The words are the step's spoken state and what is printed under it, so say what is true (\\\"Saved, not tested\\\") or omit `unverified`.\",\n      );\n    }\n    if (step.blocked === \"\") {\n      throw new Error(\n        `Stepper: step \"${step.id}\" is blocked with an empty reason. ` +\n          `A reason nobody can read leaves a disabled control with nothing beside it — ` +\n          `omit \\`blocked\\` to allow the step, or say what is missing.`,\n      );\n    }\n  }\n}\n\n/**\n * What one step IS, given where the cursor is.\n *\n * PRECEDENCE: failed, blocked, current, complete, unverified, skipped, incomplete, upcoming. DX-4973 puts `failed` first.\n * The next rule is the interesting one. `blocked` outranks\n * everything, including `complete`, wherever the step sits. Data saying both\n * is contradictory, and when a record contradicts itself the exception is what\n * the reader needs — the same call `ProvenanceBadge` makes when it stays quiet\n * on the ordinary case and loud on every other one. An affirmative that hides\n * an obstruction is the worse of the two possible mistakes.\n *\n * Note that a `blocked` reason on a step OTHER than the current one still\n * renders as blocked but gates nothing: only the current step's reason can stop\n * forward movement (see `advanceBlockReason`). That is deliberate — a flow can\n * legitimately want to say \"and this one ahead needs a signature\" without\n * claiming that is why you are stuck right now.\n */\nexport function stepStatus(\n  steps: readonly Step[],\n  current: number,\n  index: number,\n): StepStatus {\n  assertSteps(steps, current);\n  const step = steps[index];\n  if (step === undefined) {\n    throw new Error(`Stepper: there is no step at index ${index}.`);\n  }\n\n  // DX-4973: a failed check outranks even the cursor and a blocked reason; the reader must not miss it.\n  if (step.failed !== undefined) return \"failed\";\n  if (step.blocked !== undefined) return \"blocked\";\n  if (index === current) return \"current\";\n  if (step.complete === true) return \"complete\";\n  // DX-4963: left on purpose reads grey and never as a fault, ahead of the cursor or behind it.\n  // DX-4968: done but with nothing to test; ranks above \"skipped\" because it was done, not passed over.\n  if (step.unverified !== undefined) return \"unverified\";\n  if (step.skipped === true) return \"skipped\";\n  if (index < current) return \"incomplete\";\n  return \"upcoming\";\n}\n\n/**\n * Why forward movement is refused, or `null` when it is not.\n *\n * ONLY THE CURRENT STEP GATES. A reason on a step you are not standing on is\n * information about that step, not a claim about this one.\n *\n * `null` is the only \"not blocked\" value — an empty string is rejected at\n * `assertSteps` rather than treated as absent, so a falsy check here cannot\n * turn a reason that failed to load into permission to proceed.\n */\nexport function advanceBlockReason(steps: readonly Step[], current: number): string | null {\n  assertSteps(steps, current);\n  return steps[current]!.blocked ?? null;\n}\n\n/**\n * Position and completion, as two numbers that are allowed to disagree.\n *\n * This exists so a consumer that genuinely wants a bar builds it from a named\n * number instead of guessing which one a bar meant. The component itself draws\n * no percentage — see the note on `Stepper`.\n */\nexport function stepperProgress(steps: readonly Step[], current: number): StepperProgress {\n  assertSteps(steps, current);\n  return {\n    position: current + 1,\n    total: steps.length,\n    complete: steps.filter((step) => step.complete === true).length,\n    skipped: steps.filter((step, index) => index < current && step.complete !== true && step.skipped !== true && step.unverified === undefined && step.failed === undefined).length,\n    acknowledged: steps.filter((step, index) => index !== current && step.complete !== true && step.skipped === true && step.unverified === undefined && step.blocked === undefined && step.failed === undefined).length,\n    unverified: steps.filter((step, index) => index !== current && step.complete !== true && step.unverified !== undefined && step.blocked === undefined && step.failed === undefined).length,\n    failed: steps.filter((step) => step.failed !== undefined).length,\n  };\n}\n"],"names":["assertSteps","steps","current","seen","step","stepStatus","index","advanceBlockReason","stepperProgress"],"mappings":"AAsBO,SAASA,EAAYC,GAAwBC,GAAuB;AACzE,MAAID,EAAM,WAAW;AACnB,UAAM,IAAI,MAAM,uDAAuD;AAEzE,MAAI,CAAC,OAAO,UAAUC,CAAO,KAAKA,IAAU,KAAKA,KAAWD,EAAM;AAChE,UAAM,IAAI;AAAA,MACR,2BAA2BC,CAAO,4CAA4CD,EAAM,MAAM;AAAA,IAAA;AAI9F,QAAME,wBAAW,IAAA;AACjB,aAAWC,KAAQH,GAAO;AACxB,QAAIE,EAAK,IAAIC,EAAK,EAAE;AAClB,YAAM,IAAI,MAAM,oCAAoCA,EAAK,EAAE,IAAI;AAGjE,QADAD,EAAK,IAAIC,EAAK,EAAE,GACZA,EAAK,WAAW;AAClB,YAAM,IAAI;AAAA,QACR,kBAAkBA,EAAK,EAAE;AAAA,MAAA;AAI7B,QAAIA,EAAK,eAAe;AACtB,YAAM,IAAI;AAAA,QACR,kBAAkBA,EAAK,EAAE;AAAA,MAAA;AAI7B,QAAIA,EAAK,YAAY;AACnB,YAAM,IAAI;AAAA,QACR,kBAAkBA,EAAK,EAAE;AAAA,MAAA;AAAA,EAK/B;AACF;AAmBO,SAASC,EACdJ,GACAC,GACAI,GACY;AACZ,EAAAN,EAAYC,GAAOC,CAAO;AAC1B,QAAME,IAAOH,EAAMK,CAAK;AACxB,MAAIF,MAAS;AACX,UAAM,IAAI,MAAM,sCAAsCE,CAAK,GAAG;AAIhE,SAAIF,EAAK,WAAW,SAAkB,WAClCA,EAAK,YAAY,SAAkB,YACnCE,MAAUJ,IAAgB,YAC1BE,EAAK,aAAa,KAAa,aAG/BA,EAAK,eAAe,SAAkB,eACtCA,EAAK,YAAY,KAAa,YAC9BE,IAAQJ,IAAgB,eACrB;AACT;AAYO,SAASK,EAAmBN,GAAwBC,GAAgC;AACzF,SAAAF,EAAYC,GAAOC,CAAO,GACnBD,EAAMC,CAAO,EAAG,WAAW;AACpC;AASO,SAASM,EAAgBP,GAAwBC,GAAkC;AACxF,SAAAF,EAAYC,GAAOC,CAAO,GACnB;AAAA,IACL,UAAUA,IAAU;AAAA,IACpB,OAAOD,EAAM;AAAA,IACb,UAAUA,EAAM,OAAO,CAACG,MAASA,EAAK,aAAa,EAAI,EAAE;AAAA,IACzD,SAASH,EAAM,OAAO,CAACG,GAAME,MAAUA,IAAQJ,KAAWE,EAAK,aAAa,MAAQA,EAAK,YAAY,MAAQA,EAAK,eAAe,UAAaA,EAAK,WAAW,MAAS,EAAE;AAAA,IACzK,cAAcH,EAAM,OAAO,CAACG,GAAME,MAAUA,MAAUJ,KAAWE,EAAK,aAAa,MAAQA,EAAK,YAAY,MAAQA,EAAK,eAAe,UAAaA,EAAK,YAAY,UAAaA,EAAK,WAAW,MAAS,EAAE;AAAA,IAC9M,YAAYH,EAAM,OAAO,CAACG,GAAME,MAAUA,MAAUJ,KAAWE,EAAK,aAAa,MAAQA,EAAK,eAAe,UAAaA,EAAK,YAAY,UAAaA,EAAK,WAAW,MAAS,EAAE;AAAA,IACnL,QAAQH,EAAM,OAAO,CAACG,MAASA,EAAK,WAAW,MAAS,EAAE;AAAA,EAAA;AAE9D;"}