@k2b/ui 0.50.0 → 0.52.0

package/dist/browser/surfaces/StatCell.js

@@ -18,16 +18,17 @@ var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-stat-cell__head><!$><!/><sp
   _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-stat-cell__support>`),
   _tmpl$8 = /*#__PURE__*/_$template(`<span class="k2b-stat-cell__icon k2b-icon-tile"aria-hidden=true><i>`),
   _tmpl$9 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__sub><!$><!/> <!$><!/>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__sub>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__accent><i aria-hidden=true></i><!$><!/>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__stale><i class="ti ti-clock-exclamation"aria-hidden=true></i><!$><!/>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<button type=button class=k2b-stat-cell__retry>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<a class="k2b-stat-cell k2b-stat-cell--link"><i class="ti ti-external-link k2b-stat-cell__link-icon"aria-hidden=true></i><!$><!/>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-stat-cell>`);
+  _tmpl$0 = /*#__PURE__*/_$template(`<span role=img>—`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__sub><!$><!/> <!$><!/>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__sub>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__accent><i aria-hidden=true></i><!$><!/>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__stale><i class="ti ti-clock-exclamation"aria-hidden=true></i><!$><!/>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<button type=button class=k2b-stat-cell__retry>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<a class="k2b-stat-cell k2b-stat-cell--link"><i class="ti ti-external-link k2b-stat-cell__link-icon"aria-hidden=true></i><!$><!/>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<div class=k2b-stat-cell>`);
 import { Match, Show, Switch } from "solid-js";
-import Chart from "../content/Chart";
+import { ChartSparkline } from "../content/ChartSparkline";
 import { useLocale } from "../intl/locale";
 import { DeltaBadge } from "./delta-badge";
 import { useStatGridSize, useStatGridSurface } from "./StatGrid";
@@ -99,10 +100,21 @@ function Body(props) {
       get fallback() {
         return [(() => {
           var _el$14 = _$getNextElement(_tmpl$9);
-          _$insert(_el$14, (() => {
-            var _c$ = _$memo(() => !!empty());
-            return () => _c$() ? "–" : props.value;
-          })());
+          _$insert(_el$14, _$createComponent(Show, {
+            get when() {
+              return !empty();
+            },
+            get fallback() {
+              return (() => {
+                var _el$15 = _$getNextElement(_tmpl$0);
+                _$effect(() => _$setAttribute(_el$15, "aria-label", t().noValue));
+                return _el$15;
+              })();
+            },
+            get children() {
+              return props.value;
+            }
+          }));
           _$effect(_p$ => {
             var _v$3 = `k2b-stat-cell__value ${props.valueClass ?? ""}`,
               _v$4 = size(),
@@ -176,24 +188,24 @@ function Body(props) {
                 return props.compare;
               },
               children: compare => (() => {
-                var _el$15 = _$getNextElement(_tmpl$0),
-                  _el$17 = _el$15.firstChild,
-                  [_el$18, _co$3] = _$getNextMarker(_el$17.nextSibling),
-                  _el$16 = _el$18.nextSibling,
-                  _el$19 = _el$16.nextSibling,
-                  [_el$20, _co$4] = _$getNextMarker(_el$19.nextSibling);
-                _$insert(_el$15, () => compare().label, _el$18, _co$3);
-                _$insert(_el$15, compareValue, _el$20, _co$4);
-                return _el$15;
+                var _el$16 = _$getNextElement(_tmpl$1),
+                  _el$18 = _el$16.firstChild,
+                  [_el$19, _co$3] = _$getNextMarker(_el$18.nextSibling),
+                  _el$17 = _el$19.nextSibling,
+                  _el$20 = _el$17.nextSibling,
+                  [_el$21, _co$4] = _$getNextMarker(_el$20.nextSibling);
+                _$insert(_el$16, () => compare().label, _el$19, _co$3);
+                _$insert(_el$16, compareValue, _el$21, _co$4);
+                return _el$16;
               })()
             }), _$createComponent(Show, {
               get when() {
                 return props.sub;
               },
               children: sub => (() => {
-                var _el$21 = _$getNextElement(_tmpl$1);
-                _$insert(_el$21, sub);
-                return _el$21;
+                var _el$22 = _$getNextElement(_tmpl$10);
+                _$insert(_el$22, sub);
+                return _el$22;
               })()
             }), _$createComponent(Show, {
               get when() {
@@ -205,37 +217,37 @@ function Body(props) {
                 },
                 get fallback() {
                   return (() => {
-                    var _el$22 = _$getNextElement(_tmpl$10);
+                    var _el$23 = _$getNextElement(_tmpl$11);
                     _$effect(_p$ => {
                       var _v$7 = `${value().icon} k2b-stat-cell__accent-icon`,
                         _v$8 = value().tone;
-                      _v$7 !== _p$.e && _$className(_el$22, _p$.e = _v$7);
-                      _v$8 !== _p$.t && _$setAttribute(_el$22, "data-tone", _p$.t = _v$8);
+                      _v$7 !== _p$.e && _$className(_el$23, _p$.e = _v$7);
+                      _v$8 !== _p$.t && _$setAttribute(_el$23, "data-tone", _p$.t = _v$8);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined
                     });
-                    return _el$22;
+                    return _el$23;
                   })();
                 },
                 children: text => (() => {
-                  var _el$23 = _$getNextElement(_tmpl$11),
-                    _el$24 = _el$23.firstChild,
-                    _el$25 = _el$24.nextSibling,
-                    [_el$26, _co$5] = _$getNextMarker(_el$25.nextSibling);
-                  _$insert(_el$23, text, _el$26, _co$5);
+                  var _el$24 = _$getNextElement(_tmpl$12),
+                    _el$25 = _el$24.firstChild,
+                    _el$26 = _el$25.nextSibling,
+                    [_el$27, _co$5] = _$getNextMarker(_el$26.nextSibling);
+                  _$insert(_el$24, text, _el$27, _co$5);
                   _$effect(_p$ => {
                     var _v$9 = value().tone,
                       _v$0 = value().icon;
-                    _v$9 !== _p$.e && _$setAttribute(_el$23, "data-tone", _p$.e = _v$9);
-                    _v$0 !== _p$.t && _$className(_el$24, _p$.t = _v$0);
+                    _v$9 !== _p$.e && _$setAttribute(_el$24, "data-tone", _p$.e = _v$9);
+                    _v$0 !== _p$.t && _$className(_el$25, _p$.t = _v$0);
                     return _p$;
                   }, {
                     e: undefined,
                     t: undefined
                   });
-                  return _el$23;
+                  return _el$24;
                 })()
               })
             }), _$createComponent(Show, {
@@ -243,8 +255,7 @@ function Body(props) {
                 return _$memo(() => !!(!empty() && props.trend))() && props.trend.length > 1;
               },
               get children() {
-                return _$createComponent(Chart, {
-                  kind: "sparkline",
+                return _$createComponent(ChartSparkline, {
                   get labels() {
                     return {
                       interactiveChart: props.label
@@ -263,22 +274,22 @@ function Body(props) {
             })];
           },
           children: stale => [(() => {
-            var _el$27 = _$getNextElement(_tmpl$12),
-              _el$28 = _el$27.firstChild,
-              _el$29 = _el$28.nextSibling,
-              [_el$30, _co$6] = _$getNextMarker(_el$29.nextSibling);
-            _$insert(_el$27, stale, _el$30, _co$6);
-            return _el$27;
+            var _el$28 = _$getNextElement(_tmpl$13),
+              _el$29 = _el$28.firstChild,
+              _el$30 = _el$29.nextSibling,
+              [_el$31, _co$6] = _$getNextMarker(_el$30.nextSibling);
+            _$insert(_el$28, stale, _el$31, _co$6);
+            return _el$28;
           })(), _$createComponent(Show, {
             get when() {
               return props.onRetry;
             },
             children: retry => (() => {
-              var _el$31 = _$getNextElement(_tmpl$13);
-              _el$31.$$click = () => retry()();
-              _$insert(_el$31, () => t().reload);
+              var _el$32 = _$getNextElement(_tmpl$14);
+              _el$32.$$click = () => retry()();
+              _$insert(_el$32, () => t().reload);
               _$runHydrationEvents();
-              return _el$31;
+              return _el$32;
             })()
           })]
         });
@@ -301,11 +312,11 @@ function Body(props) {
                 return props.onRetry;
               },
               children: retry => (() => {
-                var _el$32 = _$getNextElement(_tmpl$13);
-                _el$32.$$click = () => retry()();
-                _$insert(_el$32, () => t().retry);
+                var _el$33 = _$getNextElement(_tmpl$14);
+                _el$33.$$click = () => retry()();
+                _$insert(_el$33, () => t().retry);
                 _$runHydrationEvents();
-                return _el$32;
+                return _el$33;
               })()
             });
           }
@@ -332,49 +343,55 @@ export function StatCell(props) {
     },
     get fallback() {
       return (() => {
-        var _el$37 = _$getNextElement(_tmpl$15);
-        _$setAttribute(_el$37, "data-surface", surface);
-        _$insert(_el$37, _$createComponent(Body, props));
+        var _el$38 = _$getNextElement(_tmpl$16);
+        _$setAttribute(_el$38, "data-surface", surface);
+        _$insert(_el$38, _$createComponent(Body, props));
         _$effect(_p$ => {
-          var _v$12 = size(),
-            _v$13 = props.wrap || undefined,
-            _v$14 = props.status,
-            _v$15 = props.status === "loading" || undefined;
-          _v$12 !== _p$.e && _$setAttribute(_el$37, "data-size", _p$.e = _v$12);
-          _v$13 !== _p$.t && _$setAttribute(_el$37, "data-wrap", _p$.t = _v$13);
-          _v$14 !== _p$.a && _$setAttribute(_el$37, "data-status", _p$.a = _v$14);
-          _v$15 !== _p$.o && _$setAttribute(_el$37, "aria-busy", _p$.o = _v$15);
+          var _v$13 = size(),
+            _v$14 = props.wrap || undefined,
+            _v$15 = props.deltaPlacement,
+            _v$16 = props.status,
+            _v$17 = props.status === "loading" || undefined;
+          _v$13 !== _p$.e && _$setAttribute(_el$38, "data-size", _p$.e = _v$13);
+          _v$14 !== _p$.t && _$setAttribute(_el$38, "data-wrap", _p$.t = _v$14);
+          _v$15 !== _p$.a && _$setAttribute(_el$38, "data-delta-placement", _p$.a = _v$15);
+          _v$16 !== _p$.o && _$setAttribute(_el$38, "data-status", _p$.o = _v$16);
+          _v$17 !== _p$.i && _$setAttribute(_el$38, "aria-busy", _p$.i = _v$17);
           return _p$;
         }, {
           e: undefined,
           t: undefined,
           a: undefined,
-          o: undefined
+          o: undefined,
+          i: undefined
         });
-        return _el$37;
+        return _el$38;
       })();
     },
     get children() {
-      var _el$33 = _$getNextElement(_tmpl$14),
-        _el$34 = _el$33.firstChild,
-        _el$35 = _el$34.nextSibling,
-        [_el$36, _co$7] = _$getNextMarker(_el$35.nextSibling);
-      _$setAttribute(_el$33, "data-surface", surface);
-      _$insert(_el$33, _$createComponent(Body, props), _el$36, _co$7);
+      var _el$34 = _$getNextElement(_tmpl$15),
+        _el$35 = _el$34.firstChild,
+        _el$36 = _el$35.nextSibling,
+        [_el$37, _co$7] = _$getNextMarker(_el$36.nextSibling);
+      _$setAttribute(_el$34, "data-surface", surface);
+      _$insert(_el$34, _$createComponent(Body, props), _el$37, _co$7);
       _$effect(_p$ => {
         var _v$1 = props.href,
           _v$10 = size(),
-          _v$11 = props.wrap || undefined;
-        _v$1 !== _p$.e && _$setAttribute(_el$33, "href", _p$.e = _v$1);
-        _v$10 !== _p$.t && _$setAttribute(_el$33, "data-size", _p$.t = _v$10);
-        _v$11 !== _p$.a && _$setAttribute(_el$33, "data-wrap", _p$.a = _v$11);
+          _v$11 = props.wrap || undefined,
+          _v$12 = props.deltaPlacement;
+        _v$1 !== _p$.e && _$setAttribute(_el$34, "href", _p$.e = _v$1);
+        _v$10 !== _p$.t && _$setAttribute(_el$34, "data-size", _p$.t = _v$10);
+        _v$11 !== _p$.a && _$setAttribute(_el$34, "data-wrap", _p$.a = _v$11);
+        _v$12 !== _p$.o && _$setAttribute(_el$34, "data-delta-placement", _p$.o = _v$12);
         return _p$;
       }, {
         e: undefined,
         t: undefined,
-        a: undefined
+        a: undefined,
+        o: undefined
       });
-      return _el$33;
+      return _el$34;
     }
   });
 }

package/dist/browser/surfaces/StatCell.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/StatCell.tsx"],"sourcesContent":["import { type JSX, Match, Show, Switch } from \"solid-js\";\nimport Chart from \"../content/Chart\";\nimport type { ChartTooltipFormatter } from \"../content/chart-inspection-core\";\nimport { useLocale } from \"../intl/locale\";\nimport type { AccentColor } from \"../semantics\";\nimport { DeltaBadge } from \"./delta-badge\";\nimport { type StatGridSize, useStatGridSize, useStatGridSurface } from \"./StatGrid\";\nimport { useStatCellMessages } from \"./stat-cell-messages\";\n\nexport type StatCellTone = AccentColor;\n\nexport type StatCellAccent = {\n  tone: StatCellTone;\n  icon: string;\n  text?: string;\n};\n\n/**\n * The change against a comparison period. `unit: \"ratio\"` (default) reads `0.082` as `+8.2 %`; `\"points\"` is the\n * difference of two shares in ratio units, so `0.031` reads `+3.1 pts`. Only with `better` does the badge carry a tone\n * and say \"better\" or \"worse\"; without it the change stays unrated.\n */\nexport type StatCellDelta = {\n  value: number;\n  unit?: \"ratio\" | \"points\";\n  better?: \"up\" | \"down\";\n};\n\n/** The value the change compares against, shown under the figure, such as \"Last month 44,560\". */\nexport type StatCellCompare = {\n  label: string;\n  value: string | number;\n};\n\nexport type StatCellSize = StatGridSize;\n\nexport type StatCellProps = {\n  label: string;\n  /** The figure. `null` shows the empty dash; `sub` then says why. */\n  value: string | number | JSX.Element | null;\n  sub?: string;\n  valueClass?: string;\n  /** An icon in a chip before the label, in `tone`. `\"in\"` and `\"out\"` are the money colours of `FlowAmount`. */\n  icon?: string;\n  /** The chip colour of `icon`. Defaults to zinc. */\n  tone?: StatCellTone | \"in\" | \"out\";\n  accent?: StatCellAccent;\n  delta?: StatCellDelta;\n  compare?: StatCellCompare;\n  href?: string;\n  title?: string;\n  trend?: readonly number[];\n  /**\n   * Replaces the default trend tooltip in browser code, for example with a period title or a unit.\n   * `selection.datum.index` is the source index into `trend`.\n   */\n  trendTooltip?: ChartTooltipFormatter;\n  size?: StatCellSize;\n  /**\n   * Wraps the label, value and support line instead of truncating them. Use it for a cell whose height nothing\n   * reserves, such as one figure on its own; cells compared in a row keep one line each.\n   */\n  wrap?: boolean;\n  /** `\"loading\"` keeps the tile's size with placeholders; `\"error\"` says the figure did not load. */\n  status?: \"loading\" | \"error\";\n  /** Offers \"Try again\" after an error and \"Reload\" beside `stale`. */\n  onRetry?: () => void;\n  /** The figure is not current: a short note such as \"As of 09:12 · not current\" replaces the support line. */\n  stale?: string;\n};\n\nfunction Body(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const accent = () => props.accent;\n  const locale = useLocale();\n  const t = useStatCellMessages();\n  const defaultTrendTooltip: ChartTooltipFormatter = ({ datum }) => {\n    const y = datum.values.find((field) => field.key === \"y\")?.value ?? \"\";\n    return {\n      rows: [\n        { label: props.label, value: typeof y === \"number\" ? new Intl.NumberFormat(locale(), { maximumFractionDigits: 6 }).format(y) : y },\n      ],\n    };\n  };\n  const compareValue = () => {\n    const value = props.compare?.value;\n    return typeof value === \"number\" ? new Intl.NumberFormat(locale()).format(value) : value;\n  };\n  const empty = () => props.value === null || props.value === undefined || props.value === \"\";\n  return (\n    <>\n      <div class=\"k2b-stat-cell__head\">\n        <Show when={props.icon}>\n          {(icon) => (\n            <span class=\"k2b-stat-cell__icon k2b-icon-tile\" data-tone={props.tone ?? \"zinc\"} aria-hidden=\"true\">\n              <i class={icon()} />\n            </span>\n          )}\n        </Show>\n        <span class=\"k2b-stat-cell__label\" data-size={size()}>\n          {props.label}\n        </span>\n      </div>\n      <div class=\"k2b-stat-cell__main\">\n        <Switch\n          fallback={\n            <>\n              <span\n                class={`k2b-stat-cell__value ${props.valueClass ?? \"\"}`}\n                data-size={size()}\n                data-empty={empty() || undefined}\n                title={props.title}\n              >\n                {empty() ? \"–\" : props.value}\n              </span>\n              <Show when={!empty() && props.delta}>{(delta) => <DeltaBadge delta={delta()} compare={props.compare} />}</Show>\n            </>\n          }\n        >\n          <Match when={props.status === \"loading\"}>\n            <span class=\"k2b-stat-cell__skeleton k2b-skeleton\" data-part=\"value\" aria-hidden=\"true\" />\n            <span class=\"k2b-sr-only\">{t().loading}</span>\n          </Match>\n          <Match when={props.status === \"error\"}>\n            <span class=\"k2b-stat-cell__error\">\n              <i class=\"ti ti-alert-circle\" aria-hidden=\"true\" />\n              {t().notLoaded}\n            </span>\n          </Match>\n        </Switch>\n      </div>\n      <div class=\"k2b-stat-cell__support\">\n        <Switch\n          fallback={\n            <Show\n              when={props.stale}\n              fallback={\n                <>\n                  <Show when={props.compare}>\n                    {(compare) => (\n                      <span class=\"k2b-stat-cell__sub\">\n                        {compare().label} {compareValue()}\n                      </span>\n                    )}\n                  </Show>\n                  <Show when={props.sub}>{(sub) => <span class=\"k2b-stat-cell__sub\">{sub()}</span>}</Show>\n                  <Show when={accent()}>\n                    {(value) => (\n                      <Show\n                        when={value().text}\n                        fallback={<i class={`${value().icon} k2b-stat-cell__accent-icon`} data-tone={value().tone} aria-hidden=\"true\" />}\n                      >\n                        {(text) => (\n                          <span class=\"k2b-stat-cell__accent\" data-tone={value().tone}>\n                            <i class={value().icon} aria-hidden=\"true\" />\n                            {text()}\n                          </span>\n                        )}\n                      </Show>\n                    )}\n                  </Show>\n                  {/* No figure, no trend: an empty tile says why in `sub` and keeps the size of its other states. */}\n                  <Show when={!empty() && props.trend && props.trend.length > 1}>\n                    <Chart\n                      kind=\"sparkline\"\n                      labels={{ interactiveChart: props.label }}\n                      tooltip={props.trendTooltip ?? defaultTrendTooltip}\n                      class=\"k2b-stat-cell__trend\"\n                      data={Array.from(props.trend ?? [])}\n                      showLast\n                    />\n                  </Show>\n                </>\n              }\n            >\n              {(stale) => (\n                <>\n                  <span class=\"k2b-stat-cell__stale\">\n                    <i class=\"ti ti-clock-exclamation\" aria-hidden=\"true\" />\n                    {stale()}\n                  </span>\n                  <Show when={props.onRetry}>\n                    {(retry) => (\n                      <button type=\"button\" class=\"k2b-stat-cell__retry\" onClick={() => retry()()}>\n                        {t().reload}\n                      </button>\n                    )}\n                  </Show>\n                </>\n              )}\n            </Show>\n          }\n        >\n          <Match when={props.status === \"loading\"}>\n            <span class=\"k2b-stat-cell__skeleton k2b-skeleton\" data-part=\"support\" aria-hidden=\"true\" />\n          </Match>\n          <Match when={props.status === \"error\"}>\n            <Show when={props.onRetry}>\n              {(retry) => (\n                <button type=\"button\" class=\"k2b-stat-cell__retry\" onClick={() => retry()()}>\n                  {t().retry}\n                </button>\n              )}\n            </Show>\n          </Match>\n        </Switch>\n      </div>\n    </>\n  );\n}\n\n/**\n * One key figure as a framed tile: icon and label, the figure with its change, and a support line with the comparison\n * and the trend. Each state (loading, error, stale, empty) keeps the tile's place and size.\n */\nexport function StatCell(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const surface = useStatGridSurface();\n  return (\n    <Show\n      // A tile that offers a retry is no link: the button must not sit inside it.\n      when={props.href && !props.status && !(props.stale && props.onRetry)}\n      fallback={\n        <div\n          class=\"k2b-stat-cell\"\n          data-size={size()}\n          data-surface={surface}\n          data-wrap={props.wrap || undefined}\n          data-status={props.status}\n          aria-busy={props.status === \"loading\" || undefined}\n        >\n          <Body {...props} />\n        </div>\n      }\n    >\n      <a\n        href={props.href}\n        class=\"k2b-stat-cell k2b-stat-cell--link\"\n        data-size={size()}\n        data-surface={surface}\n        data-wrap={props.wrap || undefined}\n      >\n        <i class=\"ti ti-external-link k2b-stat-cell__link-icon\" aria-hidden=\"true\" />\n        <Body {...props} />\n      </a>\n    </Show>\n  );\n}\n\nexport default StatCell;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/StatCell.tsx"],"sourcesContent":["import { type JSX, Match, Show, Switch } from \"solid-js\";\nimport type { ChartNumberFormat } from \"../charts/description\";\nimport { ChartSparkline } from \"../content/ChartSparkline\";\nimport type { ChartTooltipFormatter } from \"../content/chart-inspection-core\";\nimport { useLocale } from \"../intl/locale\";\nimport type { AccentColor } from \"../semantics\";\nimport { DeltaBadge } from \"./delta-badge\";\nimport { type StatGridSize, useStatGridSize, useStatGridSurface } from \"./StatGrid\";\nimport { useStatCellMessages } from \"./stat-cell-messages\";\n\nexport type StatCellTone = AccentColor;\n\nexport type StatCellAccent = {\n  tone: StatCellTone;\n  icon: string;\n  text?: string;\n};\n\n/**\n * The change against a comparison period. `unit: \"ratio\"` (default) reads `0.082` as `+8.2 %`; `\"points\"` is the\n * difference of two shares in ratio units, so `0.031` reads `+3.1 pts`. Only with `better` does the badge carry a tone\n * and say \"better\" or \"worse\"; without it the change stays unrated.\n */\nexport type StatCellDelta = {\n  value: number;\n  unit?: \"ratio\" | \"points\" | \"absolute\";\n  /** Existing measures can express a change in their own unit instead of a ratio. */\n  format?: ChartNumberFormat;\n  better?: \"up\" | \"down\";\n};\n\n/** The value the change compares against, shown under the figure, such as \"Last month 44,560\". */\nexport type StatCellCompare = {\n  label: string;\n  value: string | number;\n};\n\nexport type StatCellSize = StatGridSize;\n\nexport type StatCellProps = {\n  label: string;\n  /** The figure. `null` shows the empty dash; `sub` then says why. */\n  value: string | number | JSX.Element | null;\n  sub?: string;\n  valueClass?: string;\n  /** An icon in a chip before the label, in `tone`. `\"in\"` and `\"out\"` are the money colours of `FlowAmount`. */\n  icon?: string;\n  /** The chip colour of `icon`. Defaults to zinc. */\n  tone?: StatCellTone | \"in\" | \"out\";\n  accent?: StatCellAccent;\n  delta?: StatCellDelta;\n  /** Keep the figure and change on separate rows, including while loading. Defaults to beside the figure. */\n  deltaPlacement?: \"below\";\n  compare?: StatCellCompare;\n  href?: string;\n  title?: string;\n  trend?: readonly number[];\n  /**\n   * Replaces the default trend tooltip in browser code, for example with a period title or a unit.\n   * `selection.datum.index` is the source index into `trend`.\n   */\n  trendTooltip?: ChartTooltipFormatter;\n  size?: StatCellSize;\n  /**\n   * Wraps the label, value and support line instead of truncating them. Use it for a cell whose height nothing\n   * reserves, such as one figure on its own; cells compared in a row keep one line each.\n   */\n  wrap?: boolean;\n  /** `\"loading\"` keeps the tile's size with placeholders; `\"error\"` says the figure did not load. */\n  status?: \"loading\" | \"error\";\n  /** Offers \"Try again\" after an error and \"Reload\" beside `stale`. */\n  onRetry?: () => void;\n  /** The figure is not current: a short note such as \"As of 09:12 · not current\" replaces the support line. */\n  stale?: string;\n};\n\nfunction Body(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const accent = () => props.accent;\n  const locale = useLocale();\n  const t = useStatCellMessages();\n  const defaultTrendTooltip: ChartTooltipFormatter = ({ datum }) => {\n    const y = datum.values.find((field) => field.key === \"y\")?.value ?? \"\";\n    return {\n      rows: [\n        { label: props.label, value: typeof y === \"number\" ? new Intl.NumberFormat(locale(), { maximumFractionDigits: 6 }).format(y) : y },\n      ],\n    };\n  };\n  const compareValue = () => {\n    const value = props.compare?.value;\n    return typeof value === \"number\" ? new Intl.NumberFormat(locale()).format(value) : value;\n  };\n  const empty = () => props.value === null || props.value === undefined || props.value === \"\";\n  return (\n    <>\n      <div class=\"k2b-stat-cell__head\">\n        <Show when={props.icon}>\n          {(icon) => (\n            <span class=\"k2b-stat-cell__icon k2b-icon-tile\" data-tone={props.tone ?? \"zinc\"} aria-hidden=\"true\">\n              <i class={icon()} />\n            </span>\n          )}\n        </Show>\n        <span class=\"k2b-stat-cell__label\" data-size={size()}>\n          {props.label}\n        </span>\n      </div>\n      <div class=\"k2b-stat-cell__main\">\n        <Switch\n          fallback={\n            <>\n              <span\n                class={`k2b-stat-cell__value ${props.valueClass ?? \"\"}`}\n                data-size={size()}\n                data-empty={empty() || undefined}\n                title={props.title}\n              >\n                {/* A missing figure is the shared empty dash, named for screen readers instead of read as a dash. */}\n                <Show\n                  when={!empty()}\n                  fallback={\n                    <span role=\"img\" aria-label={t().noValue}>\n                      —\n                    </span>\n                  }\n                >\n                  {props.value}\n                </Show>\n              </span>\n              <Show when={!empty() && props.delta}>{(delta) => <DeltaBadge delta={delta()} compare={props.compare} />}</Show>\n            </>\n          }\n        >\n          <Match when={props.status === \"loading\"}>\n            <span class=\"k2b-stat-cell__skeleton k2b-skeleton\" data-part=\"value\" aria-hidden=\"true\" />\n            <span class=\"k2b-sr-only\">{t().loading}</span>\n          </Match>\n          <Match when={props.status === \"error\"}>\n            <span class=\"k2b-stat-cell__error\">\n              <i class=\"ti ti-alert-circle\" aria-hidden=\"true\" />\n              {t().notLoaded}\n            </span>\n          </Match>\n        </Switch>\n      </div>\n      <div class=\"k2b-stat-cell__support\">\n        <Switch\n          fallback={\n            <Show\n              when={props.stale}\n              fallback={\n                <>\n                  <Show when={props.compare}>\n                    {(compare) => (\n                      <span class=\"k2b-stat-cell__sub\">\n                        {compare().label} {compareValue()}\n                      </span>\n                    )}\n                  </Show>\n                  <Show when={props.sub}>{(sub) => <span class=\"k2b-stat-cell__sub\">{sub()}</span>}</Show>\n                  <Show when={accent()}>\n                    {(value) => (\n                      <Show\n                        when={value().text}\n                        fallback={<i class={`${value().icon} k2b-stat-cell__accent-icon`} data-tone={value().tone} aria-hidden=\"true\" />}\n                      >\n                        {(text) => (\n                          <span class=\"k2b-stat-cell__accent\" data-tone={value().tone}>\n                            <i class={value().icon} aria-hidden=\"true\" />\n                            {text()}\n                          </span>\n                        )}\n                      </Show>\n                    )}\n                  </Show>\n                  {/* No figure, no trend: an empty tile says why in `sub` and keeps the size of its other states. */}\n                  <Show when={!empty() && props.trend && props.trend.length > 1}>\n                    <ChartSparkline\n                      labels={{ interactiveChart: props.label }}\n                      tooltip={props.trendTooltip ?? defaultTrendTooltip}\n                      class=\"k2b-stat-cell__trend\"\n                      data={Array.from(props.trend ?? [])}\n                      showLast\n                    />\n                  </Show>\n                </>\n              }\n            >\n              {(stale) => (\n                <>\n                  <span class=\"k2b-stat-cell__stale\">\n                    <i class=\"ti ti-clock-exclamation\" aria-hidden=\"true\" />\n                    {stale()}\n                  </span>\n                  <Show when={props.onRetry}>\n                    {(retry) => (\n                      <button type=\"button\" class=\"k2b-stat-cell__retry\" onClick={() => retry()()}>\n                        {t().reload}\n                      </button>\n                    )}\n                  </Show>\n                </>\n              )}\n            </Show>\n          }\n        >\n          <Match when={props.status === \"loading\"}>\n            <span class=\"k2b-stat-cell__skeleton k2b-skeleton\" data-part=\"support\" aria-hidden=\"true\" />\n          </Match>\n          <Match when={props.status === \"error\"}>\n            <Show when={props.onRetry}>\n              {(retry) => (\n                <button type=\"button\" class=\"k2b-stat-cell__retry\" onClick={() => retry()()}>\n                  {t().retry}\n                </button>\n              )}\n            </Show>\n          </Match>\n        </Switch>\n      </div>\n    </>\n  );\n}\n\n/**\n * One key figure as a framed tile: icon and label, the figure with its change, and a support line with the comparison\n * and the trend. Each state (loading, error, stale, empty) keeps the tile's place and size.\n */\nexport function StatCell(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const surface = useStatGridSurface();\n  return (\n    <Show\n      // A tile that offers a retry is no link: the button must not sit inside it.\n      when={props.href && !props.status && !(props.stale && props.onRetry)}\n      fallback={\n        <div\n          class=\"k2b-stat-cell\"\n          data-size={size()}\n          data-surface={surface}\n          data-wrap={props.wrap || undefined}\n          data-delta-placement={props.deltaPlacement}\n          data-status={props.status}\n          aria-busy={props.status === \"loading\" || undefined}\n        >\n          <Body {...props} />\n        </div>\n      }\n    >\n      <a\n        href={props.href}\n        class=\"k2b-stat-cell k2b-stat-cell--link\"\n        data-size={size()}\n        data-surface={surface}\n        data-wrap={props.wrap || undefined}\n        data-delta-placement={props.deltaPlacement}\n      >\n        <i class=\"ti ti-external-link k2b-stat-cell__link-icon\" aria-hidden=\"true\" />\n        <Body {...props} />\n      </a>\n    </Show>\n  );\n}\n\nexport default StatCell;\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/surfaces/delta-badge.js

@@ -12,14 +12,28 @@ import { useStatCellMessages } from "./stat-cell-messages";
 // The change badge of a key figure, on its own so a table cell can show it without the tile and its trend chart.
 
 /** The change as shown: one decimal of a percent or point, so text, arrow and rating never disagree. */
-const shownDelta = delta => Math.round(delta.value * 1000) / 1000 || 0;
+const shownDelta = delta => delta.unit === "absolute" ? delta.value || 0 : Math.round(delta.value * 1000) / 1000 || 0;
 const deltaTone = delta => {
   const value = shownDelta(delta);
   return !delta.better || value === 0 ? "neutral" : value > 0 === (delta.better === "up") ? "good" : "bad";
 };
 
 /** Signed with a true minus sign (U+2212), as figures are typeset. */
-export const deltaText = (delta, locale, t) => (delta.unit === "points" ? `${new Intl.NumberFormat(locale, {
+export const deltaText = (delta, locale, t) => (delta.unit === "absolute" ? `${new Intl.NumberFormat(locale, {
+  ...(!delta.format ? {
+    maximumSignificantDigits: 15
+  } : {}),
+  style: delta.format?.style === "number" ? "decimal" : delta.format?.style,
+  currency: delta.format?.currency,
+  ...(delta.format?.decimals === undefined ? {} : {
+    minimumFractionDigits: delta.format.decimals,
+    maximumFractionDigits: delta.format.decimals
+  }),
+  ...(delta.format?.compact ? {
+    notation: "compact"
+  } : {}),
+  signDisplay: "exceptZero"
+}).format(delta.value === 0 ? 0 : delta.value)}${delta.format?.unit ? ` ${delta.format.unit}` : ""}` : delta.unit === "points" ? `${new Intl.NumberFormat(locale, {
   minimumFractionDigits: 1,
   maximumFractionDigits: 1,
   signDisplay: "exceptZero"

package/dist/browser/surfaces/delta-badge.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/delta-badge.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { useLocale } from \"../intl/locale\";\nimport type { StatCellCompare, StatCellDelta } from \"./StatCell\";\nimport { type StatCellMessages, useStatCellMessages } from \"./stat-cell-messages\";\n\n// The change badge of a key figure, on its own so a table cell can show it without the tile and its trend chart.\n\n/** The change as shown: one decimal of a percent or point, so text, arrow and rating never disagree. */\nconst shownDelta = (delta: StatCellDelta): number => Math.round(delta.value * 1000) / 1000 || 0;\n\nconst deltaTone = (delta: StatCellDelta): \"good\" | \"bad\" | \"neutral\" => {\n  const value = shownDelta(delta);\n  return !delta.better || value === 0 ? \"neutral\" : value > 0 === (delta.better === \"up\") ? \"good\" : \"bad\";\n};\n\n/** Signed with a true minus sign (U+2212), as figures are typeset. */\nexport const deltaText = (delta: StatCellDelta, locale: string, t: StatCellMessages): string =>\n  (delta.unit === \"points\"\n    ? `${new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1, signDisplay: \"exceptZero\" }).format(shownDelta(delta) * 100)} ${t.points}`\n    : new Intl.NumberFormat(locale, {\n        style: \"percent\",\n        minimumFractionDigits: 1,\n        maximumFractionDigits: 1,\n        signDisplay: \"exceptZero\",\n      }).format(shownDelta(delta))\n  ).replace(\"-\", \"\\u2212\");\n\n/** A change badge: arrow, signed text, and a spoken label that names the comparison and, with `better`, the rating. */\nexport function DeltaBadge(props: { delta: StatCellDelta; compare?: StatCellCompare }): JSX.Element {\n  const locale = useLocale();\n  const t = useStatCellMessages();\n  const tone = () => deltaTone(props.delta);\n  const text = () => deltaText(props.delta, locale(), t());\n  const label = () =>\n    [text(), props.compare ? t().comparedWith({ label: props.compare.label }) : \"\"].filter(Boolean).join(\" \") +\n    (tone() === \"good\" ? `, ${t().better}` : tone() === \"bad\" ? `, ${t().worse}` : \"\");\n  const icon = () => (shownDelta(props.delta) > 0 ? \"ti-trending-up\" : shownDelta(props.delta) < 0 ? \"ti-trending-down\" : \"ti-minus\");\n  return (\n    <span class=\"k2b-stat-cell__delta\" data-tone={tone()} role=\"img\" aria-label={label()}>\n      <i class={`ti ${icon()}`} aria-hidden=\"true\" />\n      {text()}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;AACA,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,SAAgC,mBAAmB,QAAQ,sBAAsB;;AAEjF;;AAEA;AACA,MAAM,UAAU,GAAI,KAAoB,IAAa,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC;AAE/F,MAAM,SAAS,GAAI,KAAoB,IAAiC;EACtE,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC;EAC/B,OAAO,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,KAAK,CAAC,GAAG,SAAS,GAAG,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,GAAG,MAAM,GAAG,KAAK;AAC1G,CAAC;;AAED;AACA,OAAO,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,MAAc,EAAE,CAAmB,KACjF,CAAC,KAAK,CAAC,IAAI,KAAK,QAAQ,GACpB,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;EAAE,qBAAqB,EAAE,CAAC;EAAE,qBAAqB,EAAE,CAAC;EAAE,WAAW,EAAE;AAAa,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,GACjK,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;EAC5B,KAAK,EAAE,SAAS;EAChB,qBAAqB,EAAE,CAAC;EACxB,qBAAqB,EAAE,CAAC;EACxB,WAAW,EAAE;AACf,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAC9B,OAAO,CAAC,GAAG,EAAE,QAAQ,CAAC;;AAE1B;AACA,OAAO,SAAS,UAAU,CAAC,KAA0D,EAAe;EAClG,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,MAAM,CAAC,GAAG,mBAAmB,CAAC,CAAC;EAC/B,MAAM,IAAI,GAAG,MAAM,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC;EACzC,MAAM,IAAI,GAAG,MAAM,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;EACxD,MAAM,KAAK,GAAG,MACZ,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC;EAAM,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IACxG,IAAI,CAAC,CAAC,KAAK,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,KAAK,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;EACpF,MAAM,IAAI,GAAG,MAAO,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,gBAAgB,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,kBAAkB,GAAG,UAAW;EACnI;IAAA;MAAA;MAAA;MAAA;IAAA,eAGK,IAAI;IAAA;MAAA,UAFuC,IAAI,CAAC,CAAC;QAAA,OAAyB,KAAK,CAAC,CAAC;QAAA,OACxE,MAAM,IAAI,CAAC,CAAC,EAAE;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;IAAA;IAAA;EAAA;AAI9B","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/delta-badge.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { useLocale } from \"../intl/locale\";\nimport type { StatCellCompare, StatCellDelta } from \"./StatCell\";\nimport { type StatCellMessages, useStatCellMessages } from \"./stat-cell-messages\";\n\n// The change badge of a key figure, on its own so a table cell can show it without the tile and its trend chart.\n\n/** The change as shown: one decimal of a percent or point, so text, arrow and rating never disagree. */\nconst shownDelta = (delta: StatCellDelta): number =>\n  delta.unit === \"absolute\" ? delta.value || 0 : Math.round(delta.value * 1000) / 1000 || 0;\n\nconst deltaTone = (delta: StatCellDelta): \"good\" | \"bad\" | \"neutral\" => {\n  const value = shownDelta(delta);\n  return !delta.better || value === 0 ? \"neutral\" : value > 0 === (delta.better === \"up\") ? \"good\" : \"bad\";\n};\n\n/** Signed with a true minus sign (U+2212), as figures are typeset. */\nexport const deltaText = (delta: StatCellDelta, locale: string, t: StatCellMessages): string =>\n  (delta.unit === \"absolute\"\n    ? `${new Intl.NumberFormat(locale, {\n        ...(!delta.format ? { maximumSignificantDigits: 15 } : {}),\n        style: delta.format?.style === \"number\" ? \"decimal\" : delta.format?.style,\n        currency: delta.format?.currency,\n        ...(delta.format?.decimals === undefined\n          ? {}\n          : { minimumFractionDigits: delta.format.decimals, maximumFractionDigits: delta.format.decimals }),\n        ...(delta.format?.compact ? { notation: \"compact\" } : {}),\n        signDisplay: \"exceptZero\",\n      }).format(delta.value === 0 ? 0 : delta.value)}${delta.format?.unit ? ` ${delta.format.unit}` : \"\"}`\n    : delta.unit === \"points\"\n      ? `${new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1, signDisplay: \"exceptZero\" }).format(shownDelta(delta) * 100)} ${t.points}`\n      : new Intl.NumberFormat(locale, {\n          style: \"percent\",\n          minimumFractionDigits: 1,\n          maximumFractionDigits: 1,\n          signDisplay: \"exceptZero\",\n        }).format(shownDelta(delta))\n  ).replace(\"-\", \"\\u2212\");\n\n/** A change badge: arrow, signed text, and a spoken label that names the comparison and, with `better`, the rating. */\nexport function DeltaBadge(props: { delta: StatCellDelta; compare?: StatCellCompare }): JSX.Element {\n  const locale = useLocale();\n  const t = useStatCellMessages();\n  const tone = () => deltaTone(props.delta);\n  const text = () => deltaText(props.delta, locale(), t());\n  const label = () =>\n    [text(), props.compare ? t().comparedWith({ label: props.compare.label }) : \"\"].filter(Boolean).join(\" \") +\n    (tone() === \"good\" ? `, ${t().better}` : tone() === \"bad\" ? `, ${t().worse}` : \"\");\n  const icon = () => (shownDelta(props.delta) > 0 ? \"ti-trending-up\" : shownDelta(props.delta) < 0 ? \"ti-trending-down\" : \"ti-minus\");\n  return (\n    <span class=\"k2b-stat-cell__delta\" data-tone={tone()} role=\"img\" aria-label={label()}>\n      <i class={`ti ${icon()}`} aria-hidden=\"true\" />\n      {text()}\n    </span>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/surfaces/stat-cell-messages.js

@@ -13,7 +13,8 @@ const statCellMessages = i18n.define({
       notLoaded: "Not loaded",
       retry: "Try again",
       reload: "Reload",
-      loading: "Loading"
+      loading: "Loading",
+      noValue: "No value"
     },
     de: {
       points: "Pkt.",
@@ -25,7 +26,8 @@ const statCellMessages = i18n.define({
       notLoaded: "Nicht geladen",
       retry: "Erneut versuchen",
       reload: "Neu laden",
-      loading: "Wird geladen"
+      loading: "Wird geladen",
+      noValue: "Kein Wert"
     }
   }
 });

package/dist/browser/surfaces/stat-cell-messages.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/stat-cell-messages.ts"],"sourcesContent":["import { i18n } from \"@k2b/stdlib\";\nimport { useLocale } from \"../intl/locale\";\n\nconst statCellMessages = i18n.define({\n  baseLocale: \"en\",\n  messages: {\n    en: {\n      points: \"pts\",\n      better: \"better\",\n      worse: \"worse\",\n      comparedWith: ({ label }: { label: string }) => `compared with ${label}`,\n      notLoaded: \"Not loaded\",\n      retry: \"Try again\",\n      reload: \"Reload\",\n      loading: \"Loading\",\n    },\n    de: {\n      points: \"Pkt.\",\n      better: \"besser\",\n      worse: \"schlechter\",\n      comparedWith: ({ label }: { label: string }) => `gegenüber ${label}`,\n      notLoaded: \"Nicht geladen\",\n      retry: \"Erneut versuchen\",\n      reload: \"Neu laden\",\n      loading: \"Wird geladen\",\n    },\n  },\n});\n\nexport type StatCellMessages = ReturnType<(typeof statCellMessages)[\"resolve\"]>[\"t\"];\n\n/** Resolved from the inherited render locale. */\nexport const useStatCellMessages = (): (() => StatCellMessages) => {\n  const locale = useLocale();\n  return () => statCellMessages.resolve([locale()]).t;\n};\n\n/** For a caller that already holds the locale, such as table text for search and copy. */\nexport const resolveStatCellMessages = (locale: string): StatCellMessages => statCellMessages.resolve([locale]).t;\n\nexport const checkStatCellMessages = () => statCellMessages.check();\n"],"mappings":"AAAA,SAAS,IAAI,QAAQ,aAAa;AAClC,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC;EACnC,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE;IACR,EAAE,EAAE;MACF,MAAM,EAAE,KAAK;MACb,MAAM,EAAE,QAAQ;MAChB,KAAK,EAAE,OAAO;MACd,YAAY,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAK,iBAAiB,KAAK,EAAE;MACxE,SAAS,EAAE,YAAY;MACvB,KAAK,EAAE,WAAW;MAClB,MAAM,EAAE,QAAQ;MAChB,OAAO,EAAE;IACX,CAAC;IACD,EAAE,EAAE;MACF,MAAM,EAAE,MAAM;MACd,MAAM,EAAE,QAAQ;MAChB,KAAK,EAAE,YAAY;MACnB,YAAY,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAK,aAAa,KAAK,EAAE;MACpE,SAAS,EAAE,eAAe;MAC1B,KAAK,EAAE,kBAAkB;MACzB,MAAM,EAAE,WAAW;MACnB,OAAO,EAAE;IACX;EACF;AACF,CAAC,CAAC;AAIF;AACA,OAAO,MAAM,mBAAmB,GAAG,MAAgC;EACjE,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,OAAO,MAAM,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,CAAC;;AAED;AACA,OAAO,MAAM,uBAAuB,GAAI,MAAc,IAAuB,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAEjH,OAAO,MAAM,qBAAqB,GAAG,MAAM,gBAAgB,CAAC,KAAK,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/stat-cell-messages.ts"],"sourcesContent":["import { i18n } from \"@k2b/stdlib\";\nimport { useLocale } from \"../intl/locale\";\n\nconst statCellMessages = i18n.define({\n  baseLocale: \"en\",\n  messages: {\n    en: {\n      points: \"pts\",\n      better: \"better\",\n      worse: \"worse\",\n      comparedWith: ({ label }: { label: string }) => `compared with ${label}`,\n      notLoaded: \"Not loaded\",\n      retry: \"Try again\",\n      reload: \"Reload\",\n      loading: \"Loading\",\n      noValue: \"No value\",\n    },\n    de: {\n      points: \"Pkt.\",\n      better: \"besser\",\n      worse: \"schlechter\",\n      comparedWith: ({ label }: { label: string }) => `gegenüber ${label}`,\n      notLoaded: \"Nicht geladen\",\n      retry: \"Erneut versuchen\",\n      reload: \"Neu laden\",\n      loading: \"Wird geladen\",\n      noValue: \"Kein Wert\",\n    },\n  },\n});\n\nexport type StatCellMessages = ReturnType<(typeof statCellMessages)[\"resolve\"]>[\"t\"];\n\n/** Resolved from the inherited render locale. */\nexport const useStatCellMessages = (): (() => StatCellMessages) => {\n  const locale = useLocale();\n  return () => statCellMessages.resolve([locale()]).t;\n};\n\n/** For a caller that already holds the locale, such as table text for search and copy. */\nexport const resolveStatCellMessages = (locale: string): StatCellMessages => statCellMessages.resolve([locale]).t;\n\nexport const checkStatCellMessages = () => statCellMessages.check();\n"],"mappings":"AAAA,SAAS,IAAI,QAAQ,aAAa;AAClC,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC;EACnC,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE;IACR,EAAE,EAAE;MACF,MAAM,EAAE,KAAK;MACb,MAAM,EAAE,QAAQ;MAChB,KAAK,EAAE,OAAO;MACd,YAAY,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAK,iBAAiB,KAAK,EAAE;MACxE,SAAS,EAAE,YAAY;MACvB,KAAK,EAAE,WAAW;MAClB,MAAM,EAAE,QAAQ;MAChB,OAAO,EAAE,SAAS;MAClB,OAAO,EAAE;IACX,CAAC;IACD,EAAE,EAAE;MACF,MAAM,EAAE,MAAM;MACd,MAAM,EAAE,QAAQ;MAChB,KAAK,EAAE,YAAY;MACnB,YAAY,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAK,aAAa,KAAK,EAAE;MACpE,SAAS,EAAE,eAAe;MAC1B,KAAK,EAAE,kBAAkB;MACzB,MAAM,EAAE,WAAW;MACnB,OAAO,EAAE,cAAc;MACvB,OAAO,EAAE;IACX;EACF;AACF,CAAC,CAAC;AAIF;AACA,OAAO,MAAM,mBAAmB,GAAG,MAAgC;EACjE,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,OAAO,MAAM,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,CAAC;;AAED;AACA,OAAO,MAAM,uBAAuB,GAAI,MAAc,IAAuB,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAEjH,OAAO,MAAM,qBAAqB,GAAG,MAAM,gBAAgB,CAAC,KAAK,CAAC,CAAC","ignoreList":[]}