@k2b/ui 0.49.0 → 0.50.0

package/dist/ssr/surfaces/BudgetList.js

@@ -0,0 +1,170 @@
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<ul class=\"k2b-budget__list\">", "</ul>"],
+  _tmpl$2 = ["<li><span class=\"k2b-budget__swatch\" data-pattern=\"hatched\"></span>", "</li>"],
+  _tmpl$3 = ["<li><span class=\"k2b-budget__swatch\" data-pattern=\"over\"></span>", "</li>"],
+  _tmpl$4 = ["<ul class=\"k2b-budget__legend\" aria-hidden=\"true\"><li><span class=\"k2b-budget__swatch\" data-pattern=\"solid\"></span>", "</li>", "", "</ul>"],
+  _tmpl$5 = ["<div class=\"", "\">", "</div>"],
+  _tmpl$6 = ["<p class=\"k2b-budget__empty\">", "</p>"],
+  _tmpl$7 = ["<span class=\"k2b-budget__label\">", "</span>"],
+  _tmpl$8 = ["<span class=\"k2b-budget__amount\">", " <span>", "</span></span>"],
+  _tmpl$9 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$0 = ["<span class=\"k2b-budget__hint\">", "", "</span>"],
+  _tmpl$1 = ["<li class=\"k2b-budget__row\"", ">", "</li>"],
+  _tmpl$10 = ["<span>", " <b>", "</b></span>"],
+  _tmpl$11 = ["<span class=\"k2b-budget__tip\"><b>", "</b><span>", " <b>", "</b></span>", "<span>", " <b>", "</b></span><span>", " <b>", "</b></span></span>"];
+import { For, Show } from "solid-js";
+import { Tooltip } from "../feedback/Tooltip";
+import { useLocale } from "../intl/locale";
+import { useBudgetMessages } from "./budget-messages";
+import { budgetOverrun, budgetRatio, ProgressBar } from "./ProgressBar";
+
+/** One budget: `used` is booked, `expected` comes on top; over the budget is `used + expected - limit`. */
+
+/** "near" from 80 % of the budget, "over" beyond it. */
+
+/** The figures of one budget row; the share counts booked and expected together. */
+export const budgetState = item => {
+  const used = Number.isFinite(item.used) ? Math.max(0, item.used) : 0;
+  const expected = item.expected !== undefined && Number.isFinite(item.expected) ? Math.max(0, item.expected) : 0;
+  const limit = Number.isFinite(item.limit) ? Math.max(0, item.limit) : 0;
+  const total = used + expected;
+  const over = budgetOverrun(total, limit);
+  const ratio = budgetRatio(total, limit);
+  // The same float tolerance as the overrun: 0.7 + 0.1 of 1 is exactly 80 %.
+  const level = over > 0 ? "over" : ratio >= 0.8 - 1e-9 ? "near" : "ok";
+  return {
+    used,
+    expected,
+    limit,
+    total,
+    over,
+    free: over > 0 ? 0 : Math.max(0, limit - total),
+    ratio,
+    level
+  };
+};
+
+/**
+ * Budgets as rows: label and "spent of budget", a bar with booked (solid), expected (hatched) and over the budget
+ * (red, with a mark at the limit), and a hint that turns amber from 80 % and red beyond the budget.
+ */
+export function BudgetList(props) {
+  const locale = useLocale();
+  const t = useBudgetMessages(() => props.locale);
+  const money = value => new Intl.NumberFormat(props.locale ?? locale(), {
+    style: "currency",
+    currency: props.currency,
+    minimumFractionDigits: props.decimals ?? 0,
+    maximumFractionDigits: props.decimals ?? 0
+  }).format(value);
+  const states = () => props.items.map(item => ({
+    item,
+    state: budgetState(item)
+  }));
+  const anyExpected = () => states().some(({
+    state
+  }) => state.expected > 0);
+  const anyOver = () => states().some(({
+    state
+  }) => state.over > 0);
+  return _$ssr(_tmpl$5, `k2b-budget ${_$escape(props.class ?? "", true)}`, _$escape(_$createComponent(Show, {
+    get when() {
+      return props.items.length;
+    },
+    get fallback() {
+      return _$ssr(_tmpl$6, _$escape(props.empty));
+    },
+    get children() {
+      return [_$ssr(_tmpl$, _$escape(_$createComponent(For, {
+        get each() {
+          return states();
+        },
+        children: ({
+          item,
+          state
+        }) => _$ssr(_tmpl$1, _$ssrAttribute("data-level", _$escape(state.level, true), false), _$escape(_$createComponent(Tooltip.Anchor, {
+          "class": "k2b-budget__anchor",
+          tabIndex: 0,
+          get content() {
+            return _$ssr(_tmpl$11, _$escape(item.label), _$escape(t().used), _$escape(money(state.used)), _$escape(_$createComponent(Show, {
+              get when() {
+                return state.expected > 0;
+              },
+              get children() {
+                return _$ssr(_tmpl$10, _$escape(t().expected), _$escape(money(state.expected)));
+              }
+            })), _$escape(t().budget), _$escape(money(state.limit)), state.over > 0 ? _$escape(t().overBy) : _$escape(t().left), _$escape(money(state.over > 0 ? state.over : state.free)));
+          },
+          get children() {
+            return [_$ssr(_tmpl$7, _$escape(item.label)), _$ssr(_tmpl$8, _$escape(money(state.total)), _$escape(t().of({
+              limit: money(state.limit)
+            }))), _$createComponent(ProgressBar, {
+              "class": "k2b-budget__bar",
+              size: "sm",
+              get label() {
+                return item.label;
+              },
+              get segments() {
+                return [{
+                  value: state.used
+                }, {
+                  value: state.expected,
+                  pattern: "hatched"
+                }];
+              },
+              get limit() {
+                return state.limit;
+              },
+              get valueText() {
+                return t().valueText({
+                  used: money(state.used),
+                  expected: state.expected > 0 ? money(state.expected) : undefined,
+                  limit: money(state.limit)
+                });
+              }
+            }), _$ssr(_tmpl$0, _$escape(_$createComponent(Show, {
+              get when() {
+                return state.level !== "ok";
+              },
+              get children() {
+                return _$ssr(_tmpl$9, _$ssrAttribute("class", state.level === "over" ? "ti ti-alert-circle" : "ti ti-alert-triangle", false));
+              }
+            })), state.level === "over" ? _$escape(t().over({
+              amount: money(state.over)
+            })) : state.level === "near" ? _$escape(t().near({
+              amount: money(state.free)
+            })) : _$escape(t().free({
+              amount: money(state.free)
+            })))];
+          }
+        })))
+      }))), _$createComponent(Show, {
+        get when() {
+          return props.legend !== false;
+        },
+        get children() {
+          return _$ssr(_tmpl$4, _$escape(t().used), _$escape(_$createComponent(Show, {
+            get when() {
+              return anyExpected();
+            },
+            get children() {
+              return _$ssr(_tmpl$2, _$escape(t().expected));
+            }
+          })), _$escape(_$createComponent(Show, {
+            get when() {
+              return anyOver();
+            },
+            get children() {
+              return _$ssr(_tmpl$3, _$escape(t().overLegend));
+            }
+          })));
+        }
+      })];
+    }
+  })));
+}
+export default BudgetList;
+//# sourceMappingURL=BudgetList.js.map

package/dist/ssr/surfaces/BudgetList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["surfaces/BudgetList.tsx"],"sourcesContent":["import { For, type JSX, Show } from \"solid-js\";\nimport { Tooltip } from \"../feedback/Tooltip\";\nimport { useLocale } from \"../intl/locale\";\nimport { useBudgetMessages } from \"./budget-messages\";\nimport { budgetOverrun, budgetRatio, ProgressBar } from \"./ProgressBar\";\n\n/** One budget: `used` is booked, `expected` comes on top; over the budget is `used + expected - limit`. */\nexport type BudgetItem = { id?: string; label: string; used: number; expected?: number; limit: number };\n\nexport type BudgetListProps = {\n  items: readonly BudgetItem[];\n  /** ISO 4217 currency code, e.g. `\"EUR\"`. */\n  currency: string;\n  /** Explicit locale override; defaults to the inherited render locale. */\n  locale?: string;\n  /** Fixed fraction digits. Defaults to 0. */\n  decimals?: number;\n  /** The sentence shown when there is no budget. */\n  empty?: string;\n  /** Hides the legend under the rows when the host explains the colours elsewhere. */\n  legend?: boolean;\n  class?: string;\n};\n\n/** \"near\" from 80 % of the budget, \"over\" beyond it. */\nexport type BudgetLevel = \"ok\" | \"near\" | \"over\";\n\n/** The figures of one budget row; the share counts booked and expected together. */\nexport const budgetState = (item: Pick<BudgetItem, \"used\" | \"expected\" | \"limit\">) => {\n  const used = Number.isFinite(item.used) ? Math.max(0, item.used) : 0;\n  const expected = item.expected !== undefined && Number.isFinite(item.expected) ? Math.max(0, item.expected) : 0;\n  const limit = Number.isFinite(item.limit) ? Math.max(0, item.limit) : 0;\n  const total = used + expected;\n  const over = budgetOverrun(total, limit);\n  const ratio = budgetRatio(total, limit);\n  // The same float tolerance as the overrun: 0.7 + 0.1 of 1 is exactly 80 %.\n  const level: BudgetLevel = over > 0 ? \"over\" : ratio >= 0.8 - 1e-9 ? \"near\" : \"ok\";\n  return { used, expected, limit, total, over, free: over > 0 ? 0 : Math.max(0, limit - total), ratio, level };\n};\n\n/**\n * Budgets as rows: label and \"spent of budget\", a bar with booked (solid), expected (hatched) and over the budget\n * (red, with a mark at the limit), and a hint that turns amber from 80 % and red beyond the budget.\n */\nexport function BudgetList(props: BudgetListProps): JSX.Element {\n  const locale = useLocale();\n  const t = useBudgetMessages(() => props.locale);\n  const money = (value: number) =>\n    new Intl.NumberFormat(props.locale ?? locale(), {\n      style: \"currency\",\n      currency: props.currency,\n      minimumFractionDigits: props.decimals ?? 0,\n      maximumFractionDigits: props.decimals ?? 0,\n    }).format(value);\n  const states = () => props.items.map((item) => ({ item, state: budgetState(item) }));\n  const anyExpected = () => states().some(({ state }) => state.expected > 0);\n  const anyOver = () => states().some(({ state }) => state.over > 0);\n  return (\n    <div class={`k2b-budget ${props.class ?? \"\"}`}>\n      <Show when={props.items.length} fallback={<p class=\"k2b-budget__empty\">{props.empty}</p>}>\n        <ul class=\"k2b-budget__list\">\n          <For each={states()}>\n            {({ item, state }) => (\n              <li class=\"k2b-budget__row\" data-level={state.level}>\n                <Tooltip.Anchor\n                  class=\"k2b-budget__anchor\"\n                  tabIndex={0}\n                  content={\n                    <span class=\"k2b-budget__tip\">\n                      <b>{item.label}</b>\n                      <span>\n                        {t().used} <b>{money(state.used)}</b>\n                      </span>\n                      <Show when={state.expected > 0}>\n                        <span>\n                          {t().expected} <b>{money(state.expected)}</b>\n                        </span>\n                      </Show>\n                      <span>\n                        {t().budget} <b>{money(state.limit)}</b>\n                      </span>\n                      <span>\n                        {state.over > 0 ? t().overBy : t().left} <b>{money(state.over > 0 ? state.over : state.free)}</b>\n                      </span>\n                    </span>\n                  }\n                >\n                  <span class=\"k2b-budget__label\">{item.label}</span>\n                  <span class=\"k2b-budget__amount\">\n                    {money(state.total)} <span>{t().of({ limit: money(state.limit) })}</span>\n                  </span>\n                  <ProgressBar\n                    class=\"k2b-budget__bar\"\n                    size=\"sm\"\n                    label={item.label}\n                    segments={[{ value: state.used }, { value: state.expected, pattern: \"hatched\" }]}\n                    limit={state.limit}\n                    valueText={t().valueText({\n                      used: money(state.used),\n                      expected: state.expected > 0 ? money(state.expected) : undefined,\n                      limit: money(state.limit),\n                    })}\n                  />\n                  <span class=\"k2b-budget__hint\">\n                    <Show when={state.level !== \"ok\"}>\n                      <i class={state.level === \"over\" ? \"ti ti-alert-circle\" : \"ti ti-alert-triangle\"} aria-hidden=\"true\" />\n                    </Show>\n                    {state.level === \"over\"\n                      ? t().over({ amount: money(state.over) })\n                      : state.level === \"near\"\n                        ? t().near({ amount: money(state.free) })\n                        : t().free({ amount: money(state.free) })}\n                  </span>\n                </Tooltip.Anchor>\n              </li>\n            )}\n          </For>\n        </ul>\n        <Show when={props.legend !== false}>\n          <ul class=\"k2b-budget__legend\" aria-hidden=\"true\">\n            <li>\n              <span class=\"k2b-budget__swatch\" data-pattern=\"solid\" />\n              {t().used}\n            </li>\n            <Show when={anyExpected()}>\n              <li>\n                <span class=\"k2b-budget__swatch\" data-pattern=\"hatched\" />\n                {t().expected}\n              </li>\n            </Show>\n            <Show when={anyOver()}>\n              <li>\n                <span class=\"k2b-budget__swatch\" data-pattern=\"over\" />\n                {t().overLegend}\n              </li>\n            </Show>\n          </ul>\n        </Show>\n      </Show>\n    </div>\n  );\n}\n\nexport default BudgetList;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,SAAS,GAAG,EAAY,IAAI,QAAQ,UAAU;AAC9C,SAAS,OAAO,QAAQ,qBAAqB;AAC7C,SAAS,SAAS,QAAQ,gBAAgB;AAC1C,SAAS,iBAAiB,QAAQ,mBAAmB;AACrD,SAAS,aAAa,EAAE,WAAW,EAAE,WAAW,QAAQ,eAAe;;AAEvE;;AAkBA;;AAGA;AACA,OAAO,MAAM,WAAW,GAAI,IAAqD,IAAK;EACpF,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;EACpE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;EAC/G,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;EACvE,MAAM,KAAK,GAAG,IAAI,GAAG,QAAQ;EAC7B,MAAM,IAAI,GAAG,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC;EACxC,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC;EACvC;EACA,MAAM,KAAkB,GAAG,IAAI,GAAG,CAAC,GAAG,MAAM,GAAG,KAAK,IAAI,GAAG,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI;EAClF,OAAO;IAAE,IAAI;IAAE,QAAQ;IAAE,KAAK;IAAE,KAAK;IAAE,IAAI;IAAE,IAAI,EAAE,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAAE,KAAK;IAAE;EAAM,CAAC;AAC9G,CAAC;;AAED;AACA;AACA;AACA;AACA,OAAO,SAAS,UAAU,CAAC,KAAsB,EAAe;EAC9D,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,MAAM,CAAC,GAAG,iBAAiB,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC;EAC/C,MAAM,KAAK,GAAI,KAAa,IAC1B,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,EAAE;IAC9C,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,KAAK,CAAC,QAAQ;IACxB,qBAAqB,EAAE,KAAK,CAAC,QAAQ,IAAI,CAAC;IAC1C,qBAAqB,EAAE,KAAK,CAAC,QAAQ,IAAI;EAC3C,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;EAClB,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,KAAK,CAAC,GAAG,CAAE,IAAI,KAAM;IAAE,IAAI;IAAE,KAAK,EAAE,WAAW,CAAC,IAAI;EAAE,CAAC,CAAC,CAAC;EACpF,MAAM,WAAW,GAAG,MAAM,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAAE;EAAM,CAAC,KAAK,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC;EAC1E,MAAM,OAAO,GAAG,MAAM,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAAE;EAAM,CAAC,KAAK,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC;EAClE,sBACc,uBAAc,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,6BAC1C,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,KAAK,CAAC,MAAM;IAAA;IAAA,IAAE,QAAQ;MAAA,+BAAgC,KAAK,CAAC,KAAK;IAAA;IAAA;MAAA,iDAE9E,GAAG;QAAA,IAAC,IAAI;UAAA,OAAE,MAAM,CAAC,CAAC;QAAA;QAAA,UAChB,CAAC;UAAE,IAAI;UAAE;QAAM,CAAC,0DACyB,KAAK,CAAC,KAAK,4CAChD,OAAO,CAAC,MAAM;UAAA;UAEb,QAAQ,EAAE,CAAC;UAAA,IACX,OAAO;YAAA,gCAEC,IAAI,CAAC,KAAK,YAEX,CAAC,CAAC,CAAC,CAAC,IAAI,YAAM,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,8BAEjC,IAAI;cAAA,IAAC,IAAI;gBAAA,OAAE,KAAK,CAAC,QAAQ,GAAG,CAAC;cAAA;cAAA;gBAAA,gCAEzB,CAAC,CAAC,CAAC,CAAC,QAAQ,YAAM,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;cAAA;YAAA,cAIzC,CAAC,CAAC,CAAC,CAAC,MAAM,YAAM,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAGlC,KAAK,CAAC,IAAI,GAAG,CAAC,YAAG,CAAC,CAAC,CAAC,CAAC,MAAM,aAAG,CAAC,CAAC,CAAC,CAAC,IAAI,YAAM,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;UAAA;UAAA;YAAA,gCAKjE,IAAI,CAAC,KAAK,4BAExC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;cAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK;YAAE,CAAC,CAAC,sBAElE,WAAW;cAAA;cAEV,IAAI;cAAA,IACJ,KAAK;gBAAA,OAAE,IAAI,CAAC,KAAK;cAAA;cAAA,IACjB,QAAQ;gBAAA,OAAE,CAAC;kBAAE,KAAK,EAAE,KAAK,CAAC;gBAAK,CAAC,EAAE;kBAAE,KAAK,EAAE,KAAK,CAAC,QAAQ;kBAAE,OAAO,EAAE;gBAAU,CAAC,CAAC;cAAA;cAAA,IAChF,KAAK;gBAAA,OAAE,KAAK,CAAC,KAAK;cAAA;cAAA,IAClB,SAAS;gBAAA,OAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;kBACvB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;kBACvB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,SAAS;kBAChE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK;gBAC1B,CAAC,CAAC;cAAA;YAAA,8CAGD,IAAI;cAAA,IAAC,IAAI;gBAAA,OAAE,KAAK,CAAC,KAAK,KAAK,IAAI;cAAA;cAAA;gBAAA,8CACpB,KAAK,CAAC,KAAK,KAAK,MAAM,GAAG,oBAAoB,GAAG,sBAAsB;cAAA;YAAA,KAEjF,KAAK,CAAC,KAAK,KAAK,MAAM,YACnB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;cAAE,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI;YAAE,CAAC,CAAC,IACvC,KAAK,CAAC,KAAK,KAAK,MAAM,YACpB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;cAAE,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI;YAAE,CAAC,CAAC,aACvC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;cAAE,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI;YAAE,CAAC,CAAC;UAAA;QAAA;MAIpD,wBAGJ,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,MAAM,KAAK,KAAK;QAAA;QAAA;UAAA,+BAI3B,CAAC,CAAC,CAAC,CAAC,IAAI,8BAEV,IAAI;YAAA,IAAC,IAAI;cAAA,OAAE,WAAW,CAAC,CAAC;YAAA;YAAA;cAAA,+BAGpB,CAAC,CAAC,CAAC,CAAC,QAAQ;YAAA;UAAA,gCAGhB,IAAI;YAAA,IAAC,IAAI;cAAA,OAAE,OAAO,CAAC,CAAC;YAAA;YAAA;cAAA,+BAGhB,CAAC,CAAC,CAAC,CAAC,UAAU;YAAA;UAAA;QAAA;MAAA;IAAA;EAAA;AAQ/B;AAEA,eAAe,UAAU","ignoreList":[]}

package/dist/ssr/surfaces/ProgressBar.js

@@ -1,13 +1,104 @@
-import { ssr as _$ssr } from "solid-js/web";
 import { ssrStyle as _$ssrStyle } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
-var _tmpl$ = ["<div class=\"", "\"", "><div class=\"k2b-progress__track\" role=\"progressbar\"", " aria-valuemin=\"0\" aria-valuemax=\"100\"", "><div class=\"k2b-progress__value\" style=\"", "\"></div></div>", "</div>"],
-  _tmpl$2 = ["<span class=\"k2b-progress__percent\">", "%</span>"];
+var _tmpl$ = ["<div class=\"", "\"", "><div class=\"k2b-progress__track\" role=\"progressbar\"", " aria-valuemin=\"0\" aria-valuemax=\"100\"", ">", "</div>", "</div>"],
+  _tmpl$2 = ["<div class=\"k2b-progress__value\" style=\"", "\"></div>"],
+  _tmpl$3 = ["<span class=\"k2b-progress__limit\" aria-hidden=\"true\" style=\"", "\"></span>"],
+  _tmpl$4 = ["<div class=\"k2b-progress__segment\"", " style=\"", "\"></div>"],
+  _tmpl$5 = ["<span class=\"k2b-progress__percent\">", "</span>"];
+import { For, Show } from "solid-js";
+
+/** One part of a segmented bar, in the unit of `limit`. `"hatched"` marks an expected, not yet booked part. */
+
+/**
+ * Sum minus limit, without float residue: `0.1 + 0.2` against `0.3` is not over. Amounts within a billionth of the
+ * larger of both count as equal.
+ */
+export const budgetOverrun = (total, limit) => {
+  const over = total - limit;
+  return over > Math.max(1, Math.abs(total), Math.abs(limit)) * 1e-9 ? over : 0;
+};
+
+/** Sum over limit; an empty budget with spending is infinitely full. */
+export const budgetRatio = (total, limit) => limit > 0 ? total / limit : total > 0 ? Number.POSITIVE_INFINITY : 0;
+
+/**
+ * The drawn parts of a segmented bar, each as a percent of the track. The track spans the larger of the limit and the
+ * sum, so an overrun stays visible: segments fill up to the limit in order, the rest is one "over" part, and `mark`
+ * places the limit line (only when the sum goes beyond it). Without `limit` the segments fill the track; a limit of 0,
+ * below 0 or not finite is an empty budget, so any spending is over it.
+ */
+export const progressBarParts = (segments, limit) => {
+  const values = segments.map(segment => ({
+    pattern: segment.pattern ?? "solid",
+    value: Number.isFinite(segment.value) ? Math.max(0, segment.value) : 0
+  }));
+  const total = values.reduce((sum, segment) => sum + segment.value, 0);
+  const budget = limit === undefined ? total : Number.isFinite(limit) ? Math.max(0, limit) : 0;
+  const scale = Math.max(budget, total);
+  if (scale <= 0) return {
+    parts: [],
+    total,
+    over: 0,
+    mark: null,
+    ratio: 0
+  };
+  const parts = [];
+  let filled = 0;
+  for (const segment of values) {
+    const inside = Math.max(0, Math.min(segment.value, budget - filled));
+    if (inside > 0) parts.push({
+      pattern: segment.pattern,
+      width: inside / scale * 100
+    });
+    filled += segment.value;
+  }
+  const over = budgetOverrun(total, budget);
+  if (over > 0) parts.push({
+    pattern: "over",
+    width: over / scale * 100
+  });
+  return {
+    parts,
+    total,
+    over,
+    mark: over > 0 ? budget / scale * 100 : null,
+    ratio: budgetRatio(total, budget)
+  };
+};
 const clamp = value => Number.isFinite(value) ? Math.max(0, Math.min(100, Math.round(value))) : 0;
 export function ProgressBar(props) {
-  const percent = () => clamp(props.value);
-  return _$ssr(_tmpl$, `k2b-progress ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-size", _$escape(props.size ?? "md", true), false) + _$ssrAttribute("data-tone", _$escape(props.tone ?? "info", true), false), _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$ssrAttribute("aria-valuenow", _$escape(percent(), true), false), _$ssrStyle(`width: ${percent()}%`), props.showValue ? _$ssr(_tmpl$2, _$escape(percent())) : _$escape(null));
+  const segmented = () => props.segments ? progressBarParts(props.segments, props.limit) : null;
+  // With segments the share always comes from them; `value` only drives the plain bar.
+  const percent = () => {
+    const bar = segmented();
+    if (!bar) return clamp(props.value ?? 0);
+    return Number.isFinite(bar.ratio) ? Math.max(0, Math.round(bar.ratio * 100)) : null;
+  };
+  const shown = () => percent() ?? 100;
+  return _$ssr(_tmpl$, `k2b-progress ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-size", _$escape(props.size ?? "md", true), false) + _$ssrAttribute("data-tone", _$escape(props.tone ?? "info", true), false) + _$ssrAttribute("data-segmented", segmented() ? "" : _$escape(undefined, true), false), _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$ssrAttribute("aria-valuenow", _$escape(Math.min(100, shown()), true), false) + _$ssrAttribute("aria-valuetext", _$escape(props.valueText ?? (segmented() ? percent() === null ? "∞" : `${percent()}%` : undefined), true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return segmented();
+    },
+    get fallback() {
+      return _$ssr(_tmpl$2, _$ssrStyle(`width: ${shown()}%`));
+    },
+    children: bar => [_$createComponent(For, {
+      get each() {
+        return bar().parts;
+      },
+      children: part => _$ssr(_tmpl$4, _$ssrAttribute("data-pattern", _$escape(part.pattern, true), false), _$ssrStyle(`width: ${part.width.toFixed(3)}%`))
+    }), _$createComponent(Show, {
+      get when() {
+        return bar().mark !== null;
+      },
+      get children() {
+        return _$ssr(_tmpl$3, _$ssrStyle(`left: ${(bar().mark ?? 0).toFixed(3)}%`));
+      }
+    })]
+  })), props.showValue ? _$ssr(_tmpl$5, percent() === null ? "∞" : `${_$escape(percent())}%`) : _$escape(null));
 }
 export default ProgressBar;
 //# sourceMappingURL=ProgressBar.js.map

package/dist/ssr/surfaces/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/ProgressBar.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport type { IntentTone } from \"../semantics\";\n\nexport type ProgressBarTone = Extract<IntentTone, \"info\" | \"success\" | \"warning\" | \"danger\">;\n\nexport type ProgressBarProps = {\n  value: number;\n  size?: \"xs\" | \"sm\" | \"md\";\n  tone?: ProgressBarTone;\n  showValue?: boolean;\n  label: string;\n  class?: string;\n};\n\nconst clamp = (value: number) => (Number.isFinite(value) ? Math.max(0, Math.min(100, Math.round(value))) : 0);\n\nexport function ProgressBar(props: ProgressBarProps): JSX.Element {\n  const percent = () => clamp(props.value);\n  return (\n    <div class={`k2b-progress ${props.class ?? \"\"}`} data-size={props.size ?? \"md\"} data-tone={props.tone ?? \"info\"}>\n      <div\n        class=\"k2b-progress__track\"\n        role=\"progressbar\"\n        aria-label={props.label}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={percent()}\n      >\n        <div class=\"k2b-progress__value\" style={`width: ${percent()}%`} />\n      </div>\n      {props.showValue ? <span class=\"k2b-progress__percent\">{percent()}%</span> : null}\n    </div>\n  );\n}\n\nexport default ProgressBar;\n"],"mappings":";;;;;;AAcA,MAAM,KAAK,GAAI,KAAa,IAAM,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAE;AAE7G,OAAO,SAAS,WAAW,CAAC,KAAuB,EAAe;EAChE,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;EACxC,qBACc,yBAAgB,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,uCAAa,KAAK,CAAC,IAAI,IAAI,IAAI,uDAAa,KAAK,CAAC,IAAI,IAAI,MAAM,uDAI/F,KAAK,CAAC,KAAK,0DAGR,OAAO,CAAC,CAAC,4BAEgB,UAAU,OAAO,CAAC,CAAC,GAAG,GAE/D,KAAK,CAAC,SAAS,2BAAwC,OAAO,CAAC,CAAC,cAAY,IAAI;AAGvF;AAEA,eAAe,WAAW","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/ProgressBar.tsx"],"sourcesContent":["import { For, type JSX, Show } from \"solid-js\";\nimport type { IntentTone } from \"../semantics\";\n\nexport type ProgressBarTone = Extract<IntentTone, \"info\" | \"success\" | \"warning\" | \"danger\">;\n\n/** One part of a segmented bar, in the unit of `limit`. `\"hatched\"` marks an expected, not yet booked part. */\nexport type ProgressBarSegment = { value: number; pattern?: \"solid\" | \"hatched\" };\n\nexport type ProgressBarProps = {\n  /** Percent from 0 to 100. With `segments`, the share of `limit` the segments fill. */\n  value?: number;\n  size?: \"xs\" | \"sm\" | \"md\";\n  tone?: ProgressBarTone;\n  showValue?: boolean;\n  label: string;\n  /** Parts drawn in order, such as booked and expected spending. Negative and non-finite values count as 0. */\n  segments?: readonly ProgressBarSegment[];\n  /** The budget the segments fill. What goes beyond it is drawn red, with a mark at the limit. */\n  limit?: number;\n  /** Spoken value, such as \"1,240 € of 1,500 €\"; defaults to the percent. */\n  valueText?: string;\n  class?: string;\n};\n\nexport type ProgressBarPart = { pattern: \"solid\" | \"hatched\" | \"over\"; width: number };\n\n/**\n * Sum minus limit, without float residue: `0.1 + 0.2` against `0.3` is not over. Amounts within a billionth of the\n * larger of both count as equal.\n */\nexport const budgetOverrun = (total: number, limit: number): number => {\n  const over = total - limit;\n  return over > Math.max(1, Math.abs(total), Math.abs(limit)) * 1e-9 ? over : 0;\n};\n\n/** Sum over limit; an empty budget with spending is infinitely full. */\nexport const budgetRatio = (total: number, limit: number): number => (limit > 0 ? total / limit : total > 0 ? Number.POSITIVE_INFINITY : 0);\n\n/**\n * The drawn parts of a segmented bar, each as a percent of the track. The track spans the larger of the limit and the\n * sum, so an overrun stays visible: segments fill up to the limit in order, the rest is one \"over\" part, and `mark`\n * places the limit line (only when the sum goes beyond it). Without `limit` the segments fill the track; a limit of 0,\n * below 0 or not finite is an empty budget, so any spending is over it.\n */\nexport const progressBarParts = (\n  segments: readonly ProgressBarSegment[],\n  limit?: number,\n): { parts: ProgressBarPart[]; total: number; over: number; mark: number | null; ratio: number } => {\n  const values = segments.map((segment) => ({\n    pattern: segment.pattern ?? \"solid\",\n    value: Number.isFinite(segment.value) ? Math.max(0, segment.value) : 0,\n  }));\n  const total = values.reduce((sum, segment) => sum + segment.value, 0);\n  const budget = limit === undefined ? total : Number.isFinite(limit) ? Math.max(0, limit) : 0;\n  const scale = Math.max(budget, total);\n  if (scale <= 0) return { parts: [], total, over: 0, mark: null, ratio: 0 };\n  const parts: ProgressBarPart[] = [];\n  let filled = 0;\n  for (const segment of values) {\n    const inside = Math.max(0, Math.min(segment.value, budget - filled));\n    if (inside > 0) parts.push({ pattern: segment.pattern, width: (inside / scale) * 100 });\n    filled += segment.value;\n  }\n  const over = budgetOverrun(total, budget);\n  if (over > 0) parts.push({ pattern: \"over\", width: (over / scale) * 100 });\n  return { parts, total, over, mark: over > 0 ? (budget / scale) * 100 : null, ratio: budgetRatio(total, budget) };\n};\n\nconst clamp = (value: number) => (Number.isFinite(value) ? Math.max(0, Math.min(100, Math.round(value))) : 0);\n\nexport function ProgressBar(props: ProgressBarProps): JSX.Element {\n  const segmented = () => (props.segments ? progressBarParts(props.segments, props.limit) : null);\n  // With segments the share always comes from them; `value` only drives the plain bar.\n  const percent = () => {\n    const bar = segmented();\n    if (!bar) return clamp(props.value ?? 0);\n    return Number.isFinite(bar.ratio) ? Math.max(0, Math.round(bar.ratio * 100)) : null;\n  };\n  const shown = () => percent() ?? 100;\n  return (\n    <div\n      class={`k2b-progress ${props.class ?? \"\"}`}\n      data-size={props.size ?? \"md\"}\n      data-tone={props.tone ?? \"info\"}\n      data-segmented={segmented() ? \"\" : undefined}\n    >\n      <div\n        class=\"k2b-progress__track\"\n        role=\"progressbar\"\n        aria-label={props.label}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={Math.min(100, shown())}\n        aria-valuetext={props.valueText ?? (segmented() ? (percent() === null ? \"∞\" : `${percent()}%`) : undefined)}\n      >\n        <Show when={segmented()} fallback={<div class=\"k2b-progress__value\" style={`width: ${shown()}%`} />}>\n          {(bar) => (\n            <>\n              <For each={bar().parts}>\n                {(part) => <div class=\"k2b-progress__segment\" data-pattern={part.pattern} style={`width: ${part.width.toFixed(3)}%`} />}\n              </For>\n              <Show when={bar().mark !== null}>\n                <span class=\"k2b-progress__limit\" aria-hidden=\"true\" style={`left: ${(bar().mark ?? 0).toFixed(3)}%`} />\n              </Show>\n            </>\n          )}\n        </Show>\n      </div>\n      {props.showValue ? <span class=\"k2b-progress__percent\">{percent() === null ? \"∞\" : `${percent()}%`}</span> : null}\n    </div>\n  );\n}\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/surfaces/StatCell.js

@@ -1,25 +1,46 @@
-import { createComponent as _$createComponent } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
 import { ssr as _$ssr } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
-var _tmpl$ = ["<span class=\"k2b-stat-cell__label\"", ">", "</span>"],
-  _tmpl$2 = ["<span class=\"", "\"", ">", "</span>"],
-  _tmpl$3 = ["<div class=\"k2b-stat-cell__support\">", "", "</div>"],
-  _tmpl$4 = ["<span class=\"k2b-stat-cell__sub\">", "</span>"],
-  _tmpl$5 = ["<i class=\"", "\"", " aria-hidden=\"true\"></i>"],
-  _tmpl$6 = ["<span class=\"k2b-stat-cell__accent\"", "><i", " aria-hidden=\"true\"></i>", "</span>"],
-  _tmpl$7 = ["<div class=\"k2b-stat-cell\"", ">", "</div>"],
-  _tmpl$8 = ["<a", " class=\"k2b-stat-cell k2b-stat-cell--link\"", "><i class=\"ti ti-external-link k2b-stat-cell__link-icon\" aria-hidden=\"true\"></i>", "</a>"];
-import { Show } from "solid-js";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = ["<div class=\"k2b-stat-cell__head\">", "<span class=\"k2b-stat-cell__label\"", ">", "</span></div>"],
+  _tmpl$2 = "<span class=\"k2b-stat-cell__skeleton k2b-skeleton\" data-part=\"value\" aria-hidden=\"true\"></span>",
+  _tmpl$3 = ["<span class=\"k2b-sr-only\">", "</span>"],
+  _tmpl$4 = ["<span class=\"k2b-stat-cell__error\"><i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i>", "</span>"],
+  _tmpl$5 = ["<div class=\"k2b-stat-cell__main\">", "</div>"],
+  _tmpl$6 = "<span class=\"k2b-stat-cell__skeleton k2b-skeleton\" data-part=\"support\" aria-hidden=\"true\"></span>",
+  _tmpl$7 = ["<div class=\"k2b-stat-cell__support\">", "</div>"],
+  _tmpl$8 = ["<span class=\"k2b-stat-cell__icon k2b-icon-tile\"", " aria-hidden=\"true\"><i", "></i></span>"],
+  _tmpl$9 = ["<span class=\"", "\"", ">", "</span>"],
+  _tmpl$0 = ["<span class=\"k2b-stat-cell__sub\">", " ", "</span>"],
+  _tmpl$1 = ["<span class=\"k2b-stat-cell__sub\">", "</span>"],
+  _tmpl$10 = ["<i class=\"", "\"", " aria-hidden=\"true\"></i>"],
+  _tmpl$11 = ["<span class=\"k2b-stat-cell__accent\"", "><i", " aria-hidden=\"true\"></i>", "</span>"],
+  _tmpl$12 = ["<span class=\"k2b-stat-cell__stale\"><i class=\"ti ti-clock-exclamation\" aria-hidden=\"true\"></i>", "</span>"],
+  _tmpl$13 = ["<button type=\"button\" class=\"k2b-stat-cell__retry\">", "</button>"],
+  _tmpl$14 = ["<a", " class=\"k2b-stat-cell k2b-stat-cell--link\"", "><i class=\"ti ti-external-link k2b-stat-cell__link-icon\" aria-hidden=\"true\"></i>", "</a>"],
+  _tmpl$15 = ["<div class=\"k2b-stat-cell\"", ">", "</div>"];
+import { Match, Show, Switch } from "solid-js";
 import Chart from "../content/Chart";
 import { useLocale } from "../intl/locale";
+import { DeltaBadge } from "./delta-badge";
 import { useStatGridSize, useStatGridSurface } from "./StatGrid";
+import { useStatCellMessages } from "./stat-cell-messages";
+
+/**
+ * The change against a comparison period. `unit: "ratio"` (default) reads `0.082` as `+8.2 %`; `"points"` is the
+ * difference of two shares in ratio units, so `0.031` reads `+3.1 pts`. Only with `better` does the badge carry a tone
+ * and say "better" or "worse"; without it the change stays unrated.
+ */
+
+/** The value the change compares against, shown under the figure, such as "Last month 44,560". */
+
 function Body(props) {
   const gridSize = useStatGridSize();
   const size = () => props.size ?? gridSize;
   const accent = () => props.accent;
   const locale = useLocale();
+  const t = useStatCellMessages();
   const defaultTrendTooltip = ({
     datum
   }) => {
@@ -33,71 +54,156 @@ function Body(props) {
       }]
     };
   };
-  return [_$ssr(_tmpl$, _$ssrAttribute("data-size", _$escape(size(), true), false), _$escape(props.label)), _$ssr(_tmpl$2, `k2b-stat-cell__value ${_$escape(props.valueClass ?? "", true)}`, _$ssrAttribute("data-size", _$escape(size(), true), false) + _$ssrAttribute("title", _$escape(props.title, true), false), _$escape(props.value)), _$createComponent(Show, {
+  const compareValue = () => {
+    const value = props.compare?.value;
+    return typeof value === "number" ? new Intl.NumberFormat(locale()).format(value) : value;
+  };
+  const empty = () => props.value === null || props.value === undefined || props.value === "";
+  return [_$ssr(_tmpl$, _$escape(_$createComponent(Show, {
     get when() {
-      return _$memo(() => !!props.trend)() && props.trend.length > 1;
+      return props.icon;
+    },
+    children: icon => _$ssr(_tmpl$8, _$ssrAttribute("data-tone", _$escape(props.tone ?? "zinc", true), false), _$ssrAttribute("class", _$escape(icon(), true), false))
+  })), _$ssrAttribute("data-size", _$escape(size(), true), false), _$escape(props.label)), _$ssr(_tmpl$5, _$escape(_$createComponent(Switch, {
+    get fallback() {
+      return [_$ssr(_tmpl$9, `k2b-stat-cell__value ${_$escape(props.valueClass ?? "", true)}`, _$ssrAttribute("data-size", _$escape(size(), true), false) + _$ssrAttribute("data-empty", _$escape(empty() || undefined, true), false) + _$ssrAttribute("title", _$escape(props.title, true), false), empty() ? "–" : _$escape(props.value)), _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!!empty())() && props.delta;
+        },
+        children: delta => _$createComponent(DeltaBadge, {
+          get delta() {
+            return delta();
+          },
+          get compare() {
+            return props.compare;
+          }
+        })
+      })];
     },
     get children() {
-      return _$createComponent(Chart, {
-        kind: "sparkline",
-        get labels() {
-          return {
-            interactiveChart: props.label
-          };
+      return [_$createComponent(Match, {
+        get when() {
+          return props.status === "loading";
         },
-        get tooltip() {
-          return props.trendTooltip ?? defaultTrendTooltip;
+        get children() {
+          return [_$ssr(_tmpl$2), _$ssr(_tmpl$3, _$escape(t().loading))];
+        }
+      }), _$createComponent(Match, {
+        get when() {
+          return props.status === "error";
         },
-        "class": "k2b-stat-cell__trend",
-        style: {
-          height: "32px"
+        get children() {
+          return _$ssr(_tmpl$4, _$escape(t().notLoaded));
+        }
+      })];
+    }
+  }))), _$ssr(_tmpl$7, _$escape(_$createComponent(Switch, {
+    get fallback() {
+      return _$createComponent(Show, {
+        get when() {
+          return props.stale;
         },
-        get data() {
-          return Array.from(props.trend ?? []);
+        get fallback() {
+          return [_$createComponent(Show, {
+            get when() {
+              return props.compare;
+            },
+            children: compare => _$ssr(_tmpl$0, _$escape(compare().label), _$escape(compareValue()))
+          }), _$createComponent(Show, {
+            get when() {
+              return props.sub;
+            },
+            children: sub => _$ssr(_tmpl$1, _$escape(sub()))
+          }), _$createComponent(Show, {
+            get when() {
+              return accent();
+            },
+            children: value => _$createComponent(Show, {
+              get when() {
+                return value().text;
+              },
+              get fallback() {
+                return _$ssr(_tmpl$10, `${_$escape(value().icon, true)} k2b-stat-cell__accent-icon`, _$ssrAttribute("data-tone", _$escape(value().tone, true), false));
+              },
+              children: text => _$ssr(_tmpl$11, _$ssrAttribute("data-tone", _$escape(value().tone, true), false), _$ssrAttribute("class", _$escape(value().icon, true), false), _$escape(text()))
+            })
+          }), _$createComponent(Show, {
+            get when() {
+              return _$memo(() => !!(!empty() && props.trend))() && props.trend.length > 1;
+            },
+            get children() {
+              return _$createComponent(Chart, {
+                kind: "sparkline",
+                get labels() {
+                  return {
+                    interactiveChart: props.label
+                  };
+                },
+                get tooltip() {
+                  return props.trendTooltip ?? defaultTrendTooltip;
+                },
+                "class": "k2b-stat-cell__trend",
+                get data() {
+                  return Array.from(props.trend ?? []);
+                },
+                showLast: true
+              });
+            }
+          })];
         },
-        showLast: true,
-        showMinMax: true
+        children: stale => [_$ssr(_tmpl$12, _$escape(stale())), _$createComponent(Show, {
+          get when() {
+            return props.onRetry;
+          },
+          children: retry => _$ssr(_tmpl$13, _$escape(t().reload))
+        })]
       });
-    }
-  }), _$createComponent(Show, {
-    get when() {
-      return props.sub || accent();
     },
     get children() {
-      return _$ssr(_tmpl$3, _$escape(_$createComponent(Show, {
+      return [_$createComponent(Match, {
         get when() {
-          return props.sub;
+          return props.status === "loading";
         },
-        children: sub => _$ssr(_tmpl$4, _$escape(sub()))
-      })), _$escape(_$createComponent(Show, {
+        get children() {
+          return _$ssr(_tmpl$6);
+        }
+      }), _$createComponent(Match, {
         get when() {
-          return accent();
+          return props.status === "error";
         },
-        children: value => _$createComponent(Show, {
-          get when() {
-            return value().text;
-          },
-          get fallback() {
-            return _$ssr(_tmpl$5, `${_$escape(value().icon, true)} k2b-stat-cell__accent-icon`, _$ssrAttribute("data-tone", _$escape(value().tone, true), false));
-          },
-          children: text => _$ssr(_tmpl$6, _$ssrAttribute("data-tone", _$escape(value().tone, true), false), _$ssrAttribute("class", _$escape(value().icon, true), false), _$escape(text()))
-        })
-      })));
+        get children() {
+          return _$createComponent(Show, {
+            get when() {
+              return props.onRetry;
+            },
+            children: retry => _$ssr(_tmpl$13, _$escape(t().retry))
+          });
+        }
+      })];
     }
-  })];
+  })))];
 }
+
+/**
+ * One key figure as a framed tile: icon and label, the figure with its change, and a support line with the comparison
+ * and the trend. Each state (loading, error, stale, empty) keeps the tile's place and size.
+ */
 export function StatCell(props) {
   const gridSize = useStatGridSize();
   const size = () => props.size ?? gridSize;
   const surface = useStatGridSurface();
-  return _$createComponent(Show, {
+  return _$createComponent(Show
+  // A tile that offers a retry is no link: the button must not sit inside it.
+  , {
     get when() {
-      return props.href;
+      return _$memo(() => !!(props.href && !props.status))() && !(props.stale && props.onRetry);
     },
     get fallback() {
-      return _$ssr(_tmpl$7, _$ssrAttribute("data-size", _$escape(size(), true), false) + _$ssrAttribute("data-surface", _$escape(surface, true), false) + _$ssrAttribute("data-wrap", _$escape(props.wrap || undefined, true), false), _$escape(_$createComponent(Body, props)));
+      return _$ssr(_tmpl$15, _$ssrAttribute("data-size", _$escape(size(), true), false) + _$ssrAttribute("data-surface", _$escape(surface, true), false) + _$ssrAttribute("data-wrap", _$escape(props.wrap || undefined, true), false) + _$ssrAttribute("data-status", _$escape(props.status, true), false) + _$ssrAttribute("aria-busy", _$escape(props.status === "loading" || undefined, true), false), _$escape(_$createComponent(Body, props)));
     },
-    children: href => _$ssr(_tmpl$8, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("data-size", _$escape(size(), true), false) + _$ssrAttribute("data-surface", _$escape(surface, true), false) + _$ssrAttribute("data-wrap", _$escape(props.wrap || undefined, true), false), _$escape(_$createComponent(Body, props)))
+    get children() {
+      return _$ssr(_tmpl$14, _$ssrAttribute("href", _$escape(props.href, true), false), _$ssrAttribute("data-size", _$escape(size(), true), false) + _$ssrAttribute("data-surface", _$escape(surface, true), false) + _$ssrAttribute("data-wrap", _$escape(props.wrap || undefined, true), false), _$escape(_$createComponent(Body, props)));
+    }
   });
 }
 export default StatCell;