@k2b/ui 0.49.0 → 0.50.0

package/dist/browser/surfaces/StatGrid.js

@@ -1,5 +1,6 @@
 import { template as _$template } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
@@ -8,73 +9,90 @@ import { createComponent as _$createComponent } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<header class=k2b-stat-grid__header><span class=k2b-stat-grid__title></span><!$><!/>`),
   _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-stat-grid__body>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<a class=k2b-stat-grid__action><span></span><i class="ti ti-arrow-up-right"aria-hidden=true>`);
+  _tmpl$3 = /*#__PURE__*/_$template(`<section><!$><!/><!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<a class=k2b-stat-grid__action><span></span><i class="ti ti-arrow-up-right"aria-hidden=true>`);
 import { createContext, Show, useContext } from "solid-js";
-import { Paper } from "./Paper";
 const StatGridSizeContext = createContext("md");
 const StatGridSurfaceContext = createContext("white");
 export const useStatGridSize = () => useContext(StatGridSizeContext);
 export const useStatGridSurface = () => useContext(StatGridSurfaceContext);
 const columnValue = columns => {
   if (columns && Number.isInteger(columns) && columns >= 1 && columns <= 6) return columns;
-  return 6;
+  return 4;
 };
+
+/** A row of key figures, each a framed tile of its own; the optional title and action sit above the row. */
 export function StatGrid(props) {
   const surface = () => props.surface ?? "white";
-  return _$createComponent(Paper, {
-    get ["class"]() {
-      return `k2b-stat-grid ${props.class ?? ""}`;
-    },
-    get ["data-columns"]() {
-      return columnValue(props.columns);
-    },
-    get ["data-surface"]() {
-      return surface();
-    },
-    get children() {
-      return [_$createComponent(Show, {
-        get when() {
-          return props.title;
-        },
-        get children() {
-          var _el$ = _$getNextElement(_tmpl$),
-            _el$2 = _el$.firstChild,
-            _el$3 = _el$2.nextSibling,
-            [_el$4, _co$] = _$getNextMarker(_el$3.nextSibling);
-          _$insert(_el$2, () => props.title);
-          _$insert(_el$, _$createComponent(Show, {
-            get when() {
-              return props.action;
-            },
-            children: action => (() => {
-              var _el$6 = _$getNextElement(_tmpl$3),
-                _el$7 = _el$6.firstChild;
-              _$insert(_el$7, () => action().label);
-              _$effect(() => _$setAttribute(_el$6, "href", action().href));
-              return _el$6;
-            })()
-          }), _el$4, _co$);
-          return _el$;
-        }
-      }), _$createComponent(StatGridSizeContext.Provider, {
-        get value() {
-          return props.size ?? "md";
-        },
-        get children() {
-          return _$createComponent(StatGridSurfaceContext.Provider, {
-            get value() {
-              return surface();
-            },
-            get children() {
-              var _el$5 = _$getNextElement(_tmpl$2);
-              _$insert(_el$5, () => props.children);
-              return _el$5;
-            }
-          });
-        }
-      })];
-    }
-  });
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$3),
+      _el$7 = _el$.firstChild,
+      [_el$8, _co$2] = _$getNextMarker(_el$7.nextSibling),
+      _el$9 = _el$8.nextSibling,
+      [_el$0, _co$3] = _$getNextMarker(_el$9.nextSibling);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return props.title;
+      },
+      get children() {
+        var _el$2 = _$getNextElement(_tmpl$),
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$3.nextSibling,
+          [_el$5, _co$] = _$getNextMarker(_el$4.nextSibling);
+        _$insert(_el$3, () => props.title);
+        _$insert(_el$2, _$createComponent(Show, {
+          get when() {
+            return props.action;
+          },
+          children: action => (() => {
+            var _el$1 = _$getNextElement(_tmpl$4),
+              _el$10 = _el$1.firstChild;
+            _$insert(_el$10, () => action().label);
+            _$effect(() => _$setAttribute(_el$1, "href", action().href));
+            return _el$1;
+          })()
+        }), _el$5, _co$);
+        return _el$2;
+      }
+    }), _el$8, _co$2);
+    _$insert(_el$, _$createComponent(StatGridSizeContext.Provider, {
+      get value() {
+        return props.size ?? "md";
+      },
+      get children() {
+        return _$createComponent(StatGridSurfaceContext.Provider, {
+          get value() {
+            return surface();
+          },
+          get children() {
+            var _el$6 = _$getNextElement(_tmpl$2);
+            _$insert(_el$6, () => props.children);
+            return _el$6;
+          }
+        });
+      }
+    }), _el$0, _co$3);
+    _$effect(_p$ => {
+      var _v$ = `k2b-stat-grid ${props.class ?? ""}`,
+        _v$2 = columnValue(props.columns),
+        _v$3 = props.size ?? "md",
+        _v$4 = surface(),
+        _v$5 = props.title;
+      _v$ !== _p$.e && _$className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$, "data-columns", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute(_el$, "data-size", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setAttribute(_el$, "data-surface", _p$.o = _v$4);
+      _v$5 !== _p$.i && _$setAttribute(_el$, "aria-label", _p$.i = _v$5);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined
+    });
+    return _el$;
+  })();
 }
 export default StatGrid;
 //# sourceMappingURL=StatGrid.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/StatGrid.tsx"],"sourcesContent":["import { createContext, type JSX, Show, useContext } from \"solid-js\";\nimport { Paper } from \"./Paper\";\n\nexport type StatGridSize = \"md\" | \"sm\";\nexport type StatGridSurface = \"white\" | \"muted\";\nexport type StatGridColumns = 1 | 2 | 3 | 4 | 5 | 6;\nexport type StatGridAction = { label: string; href: string };\n\nexport type StatGridProps = {\n  children: JSX.Element;\n  title?: string;\n  action?: StatGridAction;\n  columns?: StatGridColumns;\n  size?: StatGridSize;\n  surface?: StatGridSurface;\n  class?: string;\n};\n\nconst StatGridSizeContext = createContext<StatGridSize>(\"md\");\nconst StatGridSurfaceContext = createContext<StatGridSurface>(\"white\");\n\nexport const useStatGridSize = (): StatGridSize => useContext(StatGridSizeContext);\nexport const useStatGridSurface = (): StatGridSurface => useContext(StatGridSurfaceContext);\n\nconst columnValue = (columns?: StatGridColumns): StatGridColumns => {\n  if (columns && Number.isInteger(columns) && columns >= 1 && columns <= 6) return columns;\n  return 6;\n};\n\nexport function StatGrid(props: StatGridProps): JSX.Element {\n  const surface = () => props.surface ?? \"white\";\n  return (\n    <Paper class={`k2b-stat-grid ${props.class ?? \"\"}`} data-columns={columnValue(props.columns)} data-surface={surface()}>\n      <Show when={props.title}>\n        <header class=\"k2b-stat-grid__header\">\n          <span class=\"k2b-stat-grid__title\">{props.title}</span>\n          <Show when={props.action}>\n            {(action) => (\n              <a href={action().href} class=\"k2b-stat-grid__action\">\n                <span>{action().label}</span>\n                <i class=\"ti ti-arrow-up-right\" aria-hidden=\"true\" />\n              </a>\n            )}\n          </Show>\n        </header>\n      </Show>\n      <StatGridSizeContext.Provider value={props.size ?? \"md\"}>\n        <StatGridSurfaceContext.Provider value={surface()}>\n          <div class=\"k2b-stat-grid__body\">{props.children}</div>\n        </StatGridSurfaceContext.Provider>\n      </StatGridSizeContext.Provider>\n    </Paper>\n  );\n}\n\nexport default StatGrid;\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,aAAa,EAAY,IAAI,EAAE,UAAU,QAAQ,UAAU;AACpE,SAAS,KAAK,QAAQ,SAAS;AAiB/B,MAAM,mBAAmB,GAAG,aAAa,CAAe,IAAI,CAAC;AAC7D,MAAM,sBAAsB,GAAG,aAAa,CAAkB,OAAO,CAAC;AAEtE,OAAO,MAAM,eAAe,GAAG,MAAoB,UAAU,CAAC,mBAAmB,CAAC;AAClF,OAAO,MAAM,kBAAkB,GAAG,MAAuB,UAAU,CAAC,sBAAsB,CAAC;AAE3F,MAAM,WAAW,GAAI,OAAyB,IAAsB;EAClE,IAAI,OAAO,IAAI,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,EAAE,OAAO,OAAO;EACxF,OAAO,CAAC;AACV,CAAC;AAED,OAAO,SAAS,QAAQ,CAAC,KAAoB,EAAe;EAC1D,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,OAAO,IAAI,OAAO;EAC9C,yBACG,KAAK;IAAA;MAAA,OAAQ,iBAAiB,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;IAAA;IAAA;MAAA,OAAgB,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC;IAAA;IAAA;MAAA,OAAgB,OAAO,CAAC,CAAC;IAAA;IAAA;MAAA,0BAClH,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,KAAK;QAAA;QAAA;UAAA;YAAA;YAAA;YAAA;UAAA,sBAEiB,KAAK,CAAC,KAAK;UAAA,iCAC9C,IAAI;YAAA,IAAC,IAAI;cAAA,OAAE,KAAK,CAAC,MAAM;YAAA;YAAA,UACpB,MAAM;cAAA;gBAAA;cAAA,sBAEG,MAAM,CAAC,CAAC,CAAC,KAAK;cAAA,6CADd,MAAM,CAAC,CAAC,CAAC,IAAI;cAAA;YAAA;UAIvB;UAAA;QAAA;MAAA,sBAIN,mBAAmB,CAAC,QAAQ;QAAA,IAAC,KAAK;UAAA,OAAE,KAAK,CAAC,IAAI,IAAI,IAAI;QAAA;QAAA;UAAA,yBACpD,sBAAsB,CAAC,QAAQ;YAAA,IAAC,KAAK;cAAA,OAAE,OAAO,CAAC,CAAC;YAAA;YAAA;cAAA;cAAA,sBACb,KAAK,CAAC,QAAQ;cAAA;YAAA;UAAA;QAAA;MAAA;IAAA;EAAA;AAK1D;AAEA,eAAe,QAAQ","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/StatGrid.tsx"],"sourcesContent":["import { createContext, type JSX, Show, useContext } from \"solid-js\";\n\nexport type StatGridSize = \"lg\" | \"md\" | \"sm\";\nexport type StatGridSurface = \"white\" | \"muted\";\nexport type StatGridColumns = 1 | 2 | 3 | 4 | 5 | 6;\nexport type StatGridAction = { label: string; href: string };\n\nexport type StatGridProps = {\n  children: JSX.Element;\n  title?: string;\n  action?: StatGridAction;\n  /** Tiles per row on a wide container. Defaults to 4; at 600 px or less two share a row, and five or six take three up to 900 px. */\n  columns?: StatGridColumns;\n  size?: StatGridSize;\n  surface?: StatGridSurface;\n  class?: string;\n};\n\nconst StatGridSizeContext = createContext<StatGridSize>(\"md\");\nconst StatGridSurfaceContext = createContext<StatGridSurface>(\"white\");\n\nexport const useStatGridSize = (): StatGridSize => useContext(StatGridSizeContext);\nexport const useStatGridSurface = (): StatGridSurface => useContext(StatGridSurfaceContext);\n\nconst columnValue = (columns?: StatGridColumns): StatGridColumns => {\n  if (columns && Number.isInteger(columns) && columns >= 1 && columns <= 6) return columns;\n  return 4;\n};\n\n/** A row of key figures, each a framed tile of its own; the optional title and action sit above the row. */\nexport function StatGrid(props: StatGridProps): JSX.Element {\n  const surface = () => props.surface ?? \"white\";\n  return (\n    <section\n      class={`k2b-stat-grid ${props.class ?? \"\"}`}\n      data-columns={columnValue(props.columns)}\n      data-size={props.size ?? \"md\"}\n      data-surface={surface()}\n      aria-label={props.title}\n    >\n      <Show when={props.title}>\n        <header class=\"k2b-stat-grid__header\">\n          <span class=\"k2b-stat-grid__title\">{props.title}</span>\n          <Show when={props.action}>\n            {(action) => (\n              <a href={action().href} class=\"k2b-stat-grid__action\">\n                <span>{action().label}</span>\n                <i class=\"ti ti-arrow-up-right\" aria-hidden=\"true\" />\n              </a>\n            )}\n          </Show>\n        </header>\n      </Show>\n      <StatGridSizeContext.Provider value={props.size ?? \"md\"}>\n        <StatGridSurfaceContext.Provider value={surface()}>\n          <div class=\"k2b-stat-grid__body\">{props.children}</div>\n        </StatGridSurfaceContext.Provider>\n      </StatGridSizeContext.Provider>\n    </section>\n  );\n}\n\nexport default StatGrid;\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,aAAa,EAAY,IAAI,EAAE,UAAU,QAAQ,UAAU;AAkBpE,MAAM,mBAAmB,GAAG,aAAa,CAAe,IAAI,CAAC;AAC7D,MAAM,sBAAsB,GAAG,aAAa,CAAkB,OAAO,CAAC;AAEtE,OAAO,MAAM,eAAe,GAAG,MAAoB,UAAU,CAAC,mBAAmB,CAAC;AAClF,OAAO,MAAM,kBAAkB,GAAG,MAAuB,UAAU,CAAC,sBAAsB,CAAC;AAE3F,MAAM,WAAW,GAAI,OAAyB,IAAsB;EAClE,IAAI,OAAO,IAAI,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,EAAE,OAAO,OAAO;EACxF,OAAO,CAAC;AACV,CAAC;;AAED;AACA,OAAO,SAAS,QAAQ,CAAC,KAAoB,EAAe;EAC1D,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,OAAO,IAAI,OAAO;EAC9C;IAAA;MAAA;MAAA;MAAA;MAAA;IAAA,iCAQK,IAAI;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,KAAK;MAAA;MAAA;QAAA;UAAA;UAAA;UAAA;QAAA,sBAEiB,KAAK,CAAC,KAAK;QAAA,kCAC9C,IAAI;UAAA,IAAC,IAAI;YAAA,OAAE,KAAK,CAAC,MAAM;UAAA;UAAA,UACpB,MAAM;YAAA;cAAA;YAAA,uBAEG,MAAM,CAAC,CAAC,CAAC,KAAK;YAAA,6CADd,MAAM,CAAC,CAAC,CAAC,IAAI;YAAA;UAAA;QAIvB;QAAA;MAAA;IAAA;IAAA,iCAIN,mBAAmB,CAAC,QAAQ;MAAA,IAAC,KAAK;QAAA,OAAE,KAAK,CAAC,IAAI,IAAI,IAAI;MAAA;MAAA;QAAA,yBACpD,sBAAsB,CAAC,QAAQ;UAAA,IAAC,KAAK;YAAA,OAAE,OAAO,CAAC,CAAC;UAAA;UAAA;YAAA;YAAA,sBACb,KAAK,CAAC,QAAQ;YAAA;UAAA;QAAA;MAAA;IAAA;IAAA;MAAA,UArB7C,iBAAiB,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;QAAA,OAC7B,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC;QAAA,OAC7B,KAAK,CAAC,IAAI,IAAI,IAAI;QAAA,OACf,OAAO,CAAC,CAAC;QAAA,OACX,KAAK,CAAC,KAAK;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;IAAA;EAAA;AAsB7B;AAEA,eAAe,QAAQ","ignoreList":[]}

package/dist/browser/surfaces/budget-messages.js

@@ -0,0 +1,64 @@
+import { i18n } from "@k2b/stdlib";
+import { useLocale } from "../intl/locale";
+const budgetMessages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      of: ({
+        limit
+      }) => `of ${limit}`,
+      free: ({
+        amount
+      }) => `${amount} left`,
+      near: ({
+        amount
+      }) => `tight · ${amount} left`,
+      over: ({
+        amount
+      }) => `${amount} over budget`,
+      used: "booked",
+      expected: "expected",
+      overLegend: "over budget",
+      budget: "Budget",
+      left: "left",
+      overBy: "over",
+      valueText: ({
+        used,
+        expected,
+        limit
+      }) => `${used} booked${expected ? `, ${expected} expected` : ""}, of ${limit}`
+    },
+    de: {
+      of: ({
+        limit
+      }) => `von ${limit}`,
+      free: ({
+        amount
+      }) => `noch ${amount} frei`,
+      near: ({
+        amount
+      }) => `knapp · noch ${amount} frei`,
+      over: ({
+        amount
+      }) => `${amount} über dem Budget`,
+      used: "gebucht",
+      expected: "erwartet",
+      overLegend: "über dem Budget",
+      budget: "Budget",
+      left: "frei",
+      overBy: "darüber",
+      valueText: ({
+        used,
+        expected,
+        limit
+      }) => `${used} gebucht${expected ? `, ${expected} erwartet` : ""}, von ${limit}`
+    }
+  }
+});
+/** Resolved from an explicit locale override, else the inherited render locale. */
+export const useBudgetMessages = override => {
+  const locale = useLocale();
+  return () => budgetMessages.resolve([override?.() ?? locale()]).t;
+};
+export const checkBudgetMessages = () => budgetMessages.check();
+//# sourceMappingURL=budget-messages.js.map

package/dist/browser/surfaces/budget-messages.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["surfaces/budget-messages.ts"],"sourcesContent":["import { i18n } from \"@k2b/stdlib\";\nimport { useLocale } from \"../intl/locale\";\n\nconst budgetMessages = i18n.define({\n  baseLocale: \"en\",\n  messages: {\n    en: {\n      of: ({ limit }: { limit: string }) => `of ${limit}`,\n      free: ({ amount }: { amount: string }) => `${amount} left`,\n      near: ({ amount }: { amount: string }) => `tight · ${amount} left`,\n      over: ({ amount }: { amount: string }) => `${amount} over budget`,\n      used: \"booked\",\n      expected: \"expected\",\n      overLegend: \"over budget\",\n      budget: \"Budget\",\n      left: \"left\",\n      overBy: \"over\",\n      valueText: ({ used, expected, limit }: { used: string; expected?: string; limit: string }) =>\n        `${used} booked${expected ? `, ${expected} expected` : \"\"}, of ${limit}`,\n    },\n    de: {\n      of: ({ limit }: { limit: string }) => `von ${limit}`,\n      free: ({ amount }: { amount: string }) => `noch ${amount} frei`,\n      near: ({ amount }: { amount: string }) => `knapp · noch ${amount} frei`,\n      over: ({ amount }: { amount: string }) => `${amount} über dem Budget`,\n      used: \"gebucht\",\n      expected: \"erwartet\",\n      overLegend: \"über dem Budget\",\n      budget: \"Budget\",\n      left: \"frei\",\n      overBy: \"darüber\",\n      valueText: ({ used, expected, limit }: { used: string; expected?: string; limit: string }) =>\n        `${used} gebucht${expected ? `, ${expected} erwartet` : \"\"}, von ${limit}`,\n    },\n  },\n});\n\nexport type BudgetMessages = ReturnType<(typeof budgetMessages)[\"resolve\"]>[\"t\"];\n\n/** Resolved from an explicit locale override, else the inherited render locale. */\nexport const useBudgetMessages = (override?: () => string | undefined): (() => BudgetMessages) => {\n  const locale = useLocale();\n  return () => budgetMessages.resolve([override?.() ?? locale()]).t;\n};\n\nexport const checkBudgetMessages = () => budgetMessages.check();\n"],"mappings":"AAAA,SAAS,IAAI,QAAQ,aAAa;AAClC,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC;EACjC,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE;IACR,EAAE,EAAE;MACF,EAAE,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAK,MAAM,KAAK,EAAE;MACnD,IAAI,EAAE,CAAC;QAAE;MAA2B,CAAC,KAAK,GAAG,MAAM,OAAO;MAC1D,IAAI,EAAE,CAAC;QAAE;MAA2B,CAAC,KAAK,WAAW,MAAM,OAAO;MAClE,IAAI,EAAE,CAAC;QAAE;MAA2B,CAAC,KAAK,GAAG,MAAM,cAAc;MACjE,IAAI,EAAE,QAAQ;MACd,QAAQ,EAAE,UAAU;MACpB,UAAU,EAAE,aAAa;MACzB,MAAM,EAAE,QAAQ;MAChB,IAAI,EAAE,MAAM;MACZ,MAAM,EAAE,MAAM;MACd,SAAS,EAAE,CAAC;QAAE,IAAI;QAAE,QAAQ;QAAE;MAA0D,CAAC,KACvF,GAAG,IAAI,UAAU,QAAQ,GAAG,KAAK,QAAQ,WAAW,GAAG,EAAE,QAAQ,KAAK;IAC1E,CAAC;IACD,EAAE,EAAE;MACF,EAAE,EAAE,CAAC;QAAE;MAAyB,CAAC,KAAK,OAAO,KAAK,EAAE;MACpD,IAAI,EAAE,CAAC;QAAE;MAA2B,CAAC,KAAK,QAAQ,MAAM,OAAO;MAC/D,IAAI,EAAE,CAAC;QAAE;MAA2B,CAAC,KAAK,gBAAgB,MAAM,OAAO;MACvE,IAAI,EAAE,CAAC;QAAE;MAA2B,CAAC,KAAK,GAAG,MAAM,kBAAkB;MACrE,IAAI,EAAE,SAAS;MACf,QAAQ,EAAE,UAAU;MACpB,UAAU,EAAE,iBAAiB;MAC7B,MAAM,EAAE,QAAQ;MAChB,IAAI,EAAE,MAAM;MACZ,MAAM,EAAE,SAAS;MACjB,SAAS,EAAE,CAAC;QAAE,IAAI;QAAE,QAAQ;QAAE;MAA0D,CAAC,KACvF,GAAG,IAAI,WAAW,QAAQ,GAAG,KAAK,QAAQ,WAAW,GAAG,EAAE,SAAS,KAAK;IAC5E;EACF;AACF,CAAC,CAAC;AAIF;AACA,OAAO,MAAM,iBAAiB,GAAI,QAAmC,IAA6B;EAChG,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,OAAO,MAAM,cAAc,CAAC,OAAO,CAAC,CAAC,QAAQ,GAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACnE,CAAC;AAED,OAAO,MAAM,mBAAmB,GAAG,MAAM,cAAc,CAAC,KAAK,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,65 @@
+import { template as _$template } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-stat-cell__delta role=img><i aria-hidden=true></i><!$><!/>`);
+import { useLocale } from "../intl/locale";
+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 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, {
+  minimumFractionDigits: 1,
+  maximumFractionDigits: 1,
+  signDisplay: "exceptZero"
+}).format(shownDelta(delta) * 100)} ${t.points}` : new Intl.NumberFormat(locale, {
+  style: "percent",
+  minimumFractionDigits: 1,
+  maximumFractionDigits: 1,
+  signDisplay: "exceptZero"
+}).format(shownDelta(delta))).replace("-", "\u2212");
+
+/** A change badge: arrow, signed text, and a spoken label that names the comparison and, with `better`, the rating. */
+export function DeltaBadge(props) {
+  const locale = useLocale();
+  const t = useStatCellMessages();
+  const tone = () => deltaTone(props.delta);
+  const text = () => deltaText(props.delta, locale(), t());
+  const label = () => [text(), props.compare ? t().comparedWith({
+    label: props.compare.label
+  }) : ""].filter(Boolean).join(" ") + (tone() === "good" ? `, ${t().better}` : tone() === "bad" ? `, ${t().worse}` : "");
+  const icon = () => shownDelta(props.delta) > 0 ? "ti-trending-up" : shownDelta(props.delta) < 0 ? "ti-trending-down" : "ti-minus";
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling,
+      [_el$4, _co$] = _$getNextMarker(_el$3.nextSibling);
+    _$insert(_el$, text, _el$4, _co$);
+    _$effect(_p$ => {
+      var _v$ = tone(),
+        _v$2 = label(),
+        _v$3 = `ti ${icon()}`;
+      _v$ !== _p$.e && _$setAttribute(_el$, "data-tone", _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$, "aria-label", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$className(_el$2, _p$.a = _v$3);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$;
+  })();
+}
+//# sourceMappingURL=delta-badge.js.map

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

@@ -0,0 +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":[]}

package/dist/browser/surfaces/index.js

@@ -1,5 +1,6 @@
 export { Avatar } from "./Avatar";
 export { AvatarFaces, AvatarStack } from "./AvatarStack";
+export { BudgetList, budgetState } from "./BudgetList";
 export { ChangeList } from "./ChangeList";
 export { DescriptionList } from "./DescriptionList";
 export { DotStrip } from "./DotStrip";
@@ -8,7 +9,7 @@ export { NotFoundState } from "./NotFoundState";
 export { NOTICE_CARD_CLASSES, NoticeCard } from "./NoticeCard";
 export { Paper } from "./Paper";
 export { default as Placeholder } from "./Placeholder";
-export { ProgressBar } from "./ProgressBar";
+export { ProgressBar, progressBarParts } from "./ProgressBar";
 export { ProgressRing } from "./ProgressRing";
 export { PERSON_COLORS, personColor } from "./person-color";
 export { ResourceCard } from "./ResourceCard";

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/index.ts"],"sourcesContent":["export type { AvatarProps, AvatarRing, AvatarShape, AvatarSize, AvatarTone } from \"./Avatar\";\nexport { Avatar } from \"./Avatar\";\nexport type { AvatarFacesPerson, AvatarFacesProps, AvatarStackPerson, AvatarStackProps } from \"./AvatarStack\";\nexport { AvatarFaces, AvatarStack } from \"./AvatarStack\";\nexport type { ChangeListItem, ChangeListProps, ChangeTone } from \"./ChangeList\";\nexport { ChangeList } from \"./ChangeList\";\nexport type { DescriptionListItem, DescriptionListProps } from \"./DescriptionList\";\nexport { DescriptionList } from \"./DescriptionList\";\nexport type { DotStripProps, DotStripTone } from \"./DotStrip\";\nexport { DotStrip } from \"./DotStrip\";\nexport type { LinkCardColor, LinkCardProps } from \"./LinkCard\";\nexport { LinkCard } from \"./LinkCard\";\nexport type { NotFoundStateAction, NotFoundStateProps } from \"./NotFoundState\";\nexport { NotFoundState } from \"./NotFoundState\";\nexport type { NoticeCardProps, NoticeGridProps, NoticeTone } from \"./NoticeCard\";\nexport { NOTICE_CARD_CLASSES, NoticeCard } from \"./NoticeCard\";\nexport type { PaperProps, PaperTag } from \"./Paper\";\nexport { Paper } from \"./Paper\";\nexport type {\n  PlaceholderAlign,\n  PlaceholderProps,\n  PlaceholderState,\n  PlaceholderSurface,\n  PlaceholderVariant,\n} from \"./Placeholder\";\nexport { default as Placeholder } from \"./Placeholder\";\nexport type { ProgressBarProps, ProgressBarTone } from \"./ProgressBar\";\nexport { ProgressBar } from \"./ProgressBar\";\nexport type { ProgressRingProps, ProgressRingTone } from \"./ProgressRing\";\nexport { ProgressRing } from \"./ProgressRing\";\nexport { PERSON_COLORS, personColor } from \"./person-color\";\nexport type { ResourceCardColor, ResourceCardProps, ResourceCardState } from \"./ResourceCard\";\nexport { ResourceCard } from \"./ResourceCard\";\nexport { Skeleton, type SkeletonProps } from \"./Skeleton\";\nexport type { StatCellAccent, StatCellProps, StatCellTone } from \"./StatCell\";\nexport { StatCell } from \"./StatCell\";\nexport type {\n  StatGridAction,\n  StatGridColumns,\n  StatGridProps,\n  StatGridSize,\n  StatGridSurface,\n} from \"./StatGrid\";\nexport { StatGrid } from \"./StatGrid\";\nexport type { StatusBadgeProps, StatusTone } from \"./StatusBadge\";\nexport { StatusBadge } from \"./StatusBadge\";\nexport type { TagProps, TagSize } from \"./Tag\";\nexport { Tag } from \"./Tag\";\n"],"mappings":"AACA,SAAS,MAAM,QAAQ,UAAU;AAEjC,SAAS,WAAW,EAAE,WAAW,QAAQ,eAAe;AAExD,SAAS,UAAU,QAAQ,cAAc;AAEzC,SAAS,eAAe,QAAQ,mBAAmB;AAEnD,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,aAAa,QAAQ,iBAAiB;AAE/C,SAAS,mBAAmB,EAAE,UAAU,QAAQ,cAAc;AAE9D,SAAS,KAAK,QAAQ,SAAS;AAQ/B,SAAS,OAAO,IAAI,WAAW,QAAQ,eAAe;AAEtD,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,YAAY,QAAQ,gBAAgB;AAC7C,SAAS,aAAa,EAAE,WAAW,QAAQ,gBAAgB;AAE3D,SAAS,YAAY,QAAQ,gBAAgB;AAC7C,SAAS,QAAQ,QAA4B,YAAY;AAEzD,SAAS,QAAQ,QAAQ,YAAY;AAQrC,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,GAAG,QAAQ,OAAO","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/index.ts"],"sourcesContent":["export type { AvatarProps, AvatarRing, AvatarShape, AvatarSize, AvatarTone } from \"./Avatar\";\nexport { Avatar } from \"./Avatar\";\nexport type { AvatarFacesPerson, AvatarFacesProps, AvatarStackPerson, AvatarStackProps } from \"./AvatarStack\";\nexport { AvatarFaces, AvatarStack } from \"./AvatarStack\";\nexport { type BudgetItem, type BudgetLevel, BudgetList, type BudgetListProps, budgetState } from \"./BudgetList\";\nexport type { ChangeListItem, ChangeListProps, ChangeTone } from \"./ChangeList\";\nexport { ChangeList } from \"./ChangeList\";\nexport type { DescriptionListItem, DescriptionListProps } from \"./DescriptionList\";\nexport { DescriptionList } from \"./DescriptionList\";\nexport type { DotStripProps, DotStripTone } from \"./DotStrip\";\nexport { DotStrip } from \"./DotStrip\";\nexport type { LinkCardColor, LinkCardProps } from \"./LinkCard\";\nexport { LinkCard } from \"./LinkCard\";\nexport type { NotFoundStateAction, NotFoundStateProps } from \"./NotFoundState\";\nexport { NotFoundState } from \"./NotFoundState\";\nexport type { NoticeCardProps, NoticeGridProps, NoticeTone } from \"./NoticeCard\";\nexport { NOTICE_CARD_CLASSES, NoticeCard } from \"./NoticeCard\";\nexport type { PaperProps, PaperTag } from \"./Paper\";\nexport { Paper } from \"./Paper\";\nexport type {\n  PlaceholderAlign,\n  PlaceholderProps,\n  PlaceholderState,\n  PlaceholderSurface,\n  PlaceholderVariant,\n} from \"./Placeholder\";\nexport { default as Placeholder } from \"./Placeholder\";\nexport type { ProgressBarPart, ProgressBarProps, ProgressBarSegment, ProgressBarTone } from \"./ProgressBar\";\nexport { ProgressBar, progressBarParts } from \"./ProgressBar\";\nexport type { ProgressRingProps, ProgressRingTone } from \"./ProgressRing\";\nexport { ProgressRing } from \"./ProgressRing\";\nexport { PERSON_COLORS, personColor } from \"./person-color\";\nexport type { ResourceCardColor, ResourceCardProps, ResourceCardState } from \"./ResourceCard\";\nexport { ResourceCard } from \"./ResourceCard\";\nexport { Skeleton, type SkeletonProps } from \"./Skeleton\";\nexport type { StatCellAccent, StatCellCompare, StatCellDelta, StatCellProps, StatCellSize, StatCellTone } from \"./StatCell\";\nexport { StatCell } from \"./StatCell\";\nexport type {\n  StatGridAction,\n  StatGridColumns,\n  StatGridProps,\n  StatGridSize,\n  StatGridSurface,\n} from \"./StatGrid\";\nexport { StatGrid } from \"./StatGrid\";\nexport type { StatusBadgeProps, StatusTone } from \"./StatusBadge\";\nexport { StatusBadge } from \"./StatusBadge\";\nexport type { TagProps, TagSize } from \"./Tag\";\nexport { Tag } from \"./Tag\";\n"],"mappings":"AACA,SAAS,MAAM,QAAQ,UAAU;AAEjC,SAAS,WAAW,EAAE,WAAW,QAAQ,eAAe;AACxD,SAA4C,UAAU,EAAwB,WAAW,QAAQ,cAAc;AAE/G,SAAS,UAAU,QAAQ,cAAc;AAEzC,SAAS,eAAe,QAAQ,mBAAmB;AAEnD,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,aAAa,QAAQ,iBAAiB;AAE/C,SAAS,mBAAmB,EAAE,UAAU,QAAQ,cAAc;AAE9D,SAAS,KAAK,QAAQ,SAAS;AAQ/B,SAAS,OAAO,IAAI,WAAW,QAAQ,eAAe;AAEtD,SAAS,WAAW,EAAE,gBAAgB,QAAQ,eAAe;AAE7D,SAAS,YAAY,QAAQ,gBAAgB;AAC7C,SAAS,aAAa,EAAE,WAAW,QAAQ,gBAAgB;AAE3D,SAAS,YAAY,QAAQ,gBAAgB;AAC7C,SAAS,QAAQ,QAA4B,YAAY;AAEzD,SAAS,QAAQ,QAAQ,YAAY;AAQrC,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,GAAG,QAAQ,OAAO","ignoreList":[]}

package/dist/browser/surfaces/person-color.js

@@ -1,9 +1,9 @@
 /**
  * The colors that stand for a person: the tint behind avatar initials, a collaborator's cursor, and the marks and
- * comments a person leaves. The palette leaves out cyan, which means AI, and yellow, which reads as a text highlight.
+ * comments a person leaves. The palette leaves out plum, which means AI, and yellow, which reads as a text highlight.
  * Several people can share a color, so a person's name always appears next to it.
  */
-export const PERSON_COLORS = ["#3b82f6", "#6366f1", "#8b5cf6", "#c026d3", "#ec4899", "#e11d48", "#f97316", "#16a34a"];
+export const PERSON_COLORS = ["#3b82f6", "#6366f1", "#8b5cf6", "#0891b2", "#0d9488", "#e11d48", "#f97316", "#16a34a"];
 
 /** The palette index for a name, the order of the `.k2b-avatar[data-tint]` rules. Surrounding spaces do not count. */
 export const personTint = name => {

package/dist/browser/surfaces/person-color.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/person-color.ts"],"sourcesContent":["/**\n * The colors that stand for a person: the tint behind avatar initials, a collaborator's cursor, and the marks and\n * comments a person leaves. The palette leaves out cyan, which means AI, and yellow, which reads as a text highlight.\n * Several people can share a color, so a person's name always appears next to it.\n */\nexport const PERSON_COLORS = [\"#3b82f6\", \"#6366f1\", \"#8b5cf6\", \"#c026d3\", \"#ec4899\", \"#e11d48\", \"#f97316\", \"#16a34a\"] as const;\n\n/** The palette index for a name, the order of the `.k2b-avatar[data-tint]` rules. Surrounding spaces do not count. */\nexport const personTint = (name: string): number => {\n  const trimmed = name.trim();\n  let hash = 0;\n  for (let index = 0; index < trimmed.length; index++) hash = (hash * 31 + trimmed.charCodeAt(index)) >>> 0;\n  return hash % PERSON_COLORS.length;\n};\n\n/** A person's color from their display name, the same wherever Cloud shows that person. */\nexport const personColor = (name: string): string => PERSON_COLORS[personTint(name)]!;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAM,aAAa,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAU;;AAE9H;AACA,OAAO,MAAM,UAAU,GAAI,IAAY,IAAa;EAClD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;EAC3B,IAAI,IAAI,GAAG,CAAC;EACZ,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,IAAI,GAAI,IAAI,GAAG,EAAE,GAAG,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,KAAM,CAAC;EACzG,OAAO,IAAI,GAAG,aAAa,CAAC,MAAM;AACpC,CAAC;;AAED;AACA,OAAO,MAAM,WAAW,GAAI,IAAY,IAAa,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,CAAE","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/person-color.ts"],"sourcesContent":["/**\n * The colors that stand for a person: the tint behind avatar initials, a collaborator's cursor, and the marks and\n * comments a person leaves. The palette leaves out plum, which means AI, and yellow, which reads as a text highlight.\n * Several people can share a color, so a person's name always appears next to it.\n */\nexport const PERSON_COLORS = [\"#3b82f6\", \"#6366f1\", \"#8b5cf6\", \"#0891b2\", \"#0d9488\", \"#e11d48\", \"#f97316\", \"#16a34a\"] as const;\n\n/** The palette index for a name, the order of the `.k2b-avatar[data-tint]` rules. Surrounding spaces do not count. */\nexport const personTint = (name: string): number => {\n  const trimmed = name.trim();\n  let hash = 0;\n  for (let index = 0; index < trimmed.length; index++) hash = (hash * 31 + trimmed.charCodeAt(index)) >>> 0;\n  return hash % PERSON_COLORS.length;\n};\n\n/** A person's color from their display name, the same wherever Cloud shows that person. */\nexport const personColor = (name: string): string => PERSON_COLORS[personTint(name)]!;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAM,aAAa,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAU;;AAE9H;AACA,OAAO,MAAM,UAAU,GAAI,IAAY,IAAa;EAClD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;EAC3B,IAAI,IAAI,GAAG,CAAC;EACZ,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,IAAI,GAAI,IAAI,GAAG,EAAE,GAAG,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,KAAM,CAAC;EACzG,OAAO,IAAI,GAAG,aAAa,CAAC,MAAM;AACpC,CAAC;;AAED;AACA,OAAO,MAAM,WAAW,GAAI,IAAY,IAAa,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,CAAE","ignoreList":[]}

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

@@ -0,0 +1,41 @@
+import { i18n } from "@k2b/stdlib";
+import { useLocale } from "../intl/locale";
+const statCellMessages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      points: "pts",
+      better: "better",
+      worse: "worse",
+      comparedWith: ({
+        label
+      }) => `compared with ${label}`,
+      notLoaded: "Not loaded",
+      retry: "Try again",
+      reload: "Reload",
+      loading: "Loading"
+    },
+    de: {
+      points: "Pkt.",
+      better: "besser",
+      worse: "schlechter",
+      comparedWith: ({
+        label
+      }) => `gegenüber ${label}`,
+      notLoaded: "Nicht geladen",
+      retry: "Erneut versuchen",
+      reload: "Neu laden",
+      loading: "Wird geladen"
+    }
+  }
+});
+/** Resolved from the inherited render locale. */
+export const useStatCellMessages = () => {
+  const locale = useLocale();
+  return () => statCellMessages.resolve([locale()]).t;
+};
+
+/** For a caller that already holds the locale, such as table text for search and copy. */
+export const resolveStatCellMessages = locale => statCellMessages.resolve([locale]).t;
+export const checkStatCellMessages = () => statCellMessages.check();
+//# sourceMappingURL=stat-cell-messages.js.map

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

@@ -0,0 +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":[]}

package/dist/browser/widgets/Dashboard.js

@@ -0,0 +1,137 @@
+import { template as _$template } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<p class=k2b-dashboard-section__description>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<header class=k2b-dashboard-section__header><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-dashboard-section__grid>`);
+import { createUniqueId, Show, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+
+/**
+ * A panel's share of the six dashboard columns: a third is two, a half three, two thirds four, full all six. At a
+ * dashboard width of 1000 px or less a third takes half the row and two thirds the whole row; at 600 px or less every
+ * panel takes the whole row.
+ */
+
+/** The dashboard's measuring container. Panel widths and the key-figure row follow its width, not the window's. */
+export function DashboardGrid(props) {
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$);
+    _$insert(_el$, () => props.children);
+    _$effect(() => _$className(_el$, props.class ? `k2b-dashboard-grid ${props.class}` : "k2b-dashboard-grid"));
+    return _el$;
+  })();
+}
+/** A titled group of panels on the six-column grid. */
+export function DashboardSection(props) {
+  const id = createUniqueId();
+  return (() => {
+    var _el$2 = _$getNextElement(_tmpl$5),
+      _el$11 = _el$2.firstChild,
+      [_el$12, _co$4] = _$getNextMarker(_el$11.nextSibling),
+      _el$10 = _el$12.nextSibling;
+    _$insert(_el$2, _$createComponent(Show, {
+      get when() {
+        return props.title;
+      },
+      get children() {
+        var _el$3 = _$getNextElement(_tmpl$4),
+          _el$6 = _el$3.firstChild,
+          [_el$7, _co$] = _$getNextMarker(_el$6.nextSibling),
+          _el$8 = _el$7.nextSibling,
+          [_el$9, _co$2] = _$getNextMarker(_el$8.nextSibling),
+          _el$0 = _el$9.nextSibling,
+          [_el$1, _co$3] = _$getNextMarker(_el$0.nextSibling);
+        _$insert(_el$3, _$createComponent(Show, {
+          get when() {
+            return props.icon;
+          },
+          get children() {
+            var _el$4 = _$getNextElement(_tmpl$2);
+            _$effect(_p$ => {
+              var _v$ = `k2b-dashboard-section__icon ${props.icon}`,
+                _v$2 = props.iconColor ? {
+                  color: `color-mix(in srgb, ${props.iconColor} 72%, var(--k2b-text))`
+                } : undefined;
+              _v$ !== _p$.e && _$className(_el$4, _p$.e = _v$);
+              _p$.t = _$style(_el$4, _v$2, _p$.t);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$4;
+          }
+        }), _el$7, _co$);
+        _$insert(_el$3, _$createComponent(Dynamic, {
+          get component() {
+            return `h${props.headingLevel ?? 2}`;
+          },
+          id: id,
+          "class": "k2b-dashboard-section__title",
+          get children() {
+            return props.title;
+          }
+        }), _el$9, _co$2);
+        _$insert(_el$3, _$createComponent(Show, {
+          get when() {
+            return props.description;
+          },
+          get children() {
+            var _el$5 = _$getNextElement(_tmpl$3);
+            _$insert(_el$5, () => props.description);
+            return _el$5;
+          }
+        }), _el$1, _co$3);
+        return _el$3;
+      }
+    }), _el$12, _co$4);
+    _$insert(_el$10, () => props.children);
+    _$effect(_p$ => {
+      var _v$3 = props.class ? `k2b-dashboard-section ${props.class}` : "k2b-dashboard-section",
+        _v$4 = props.title ? id : undefined,
+        _v$5 = props.title ? undefined : props.ariaLabel;
+      _v$3 !== _p$.e && _$className(_el$2, _p$.e = _v$3);
+      _v$4 !== _p$.t && _$setAttribute(_el$2, "aria-labelledby", _p$.t = _v$4);
+      _v$5 !== _p$.a && _$setAttribute(_el$2, "aria-label", _p$.a = _v$5);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$2;
+  })();
+}
+const PanelElement = Dynamic;
+
+/** One framed cell of the grid. Panels in a row share the height of the tallest. */
+export function DashboardPanel(props) {
+  const [local, element] = splitProps(props, ["as", "width", "class", "children"]);
+  return _$createComponent(PanelElement, _$mergeProps({
+    get component() {
+      return local.as ?? "article";
+    }
+  }, element, {
+    get ["class"]() {
+      return _$memo(() => !!local.class)() ? `k2b-dashboard-panel ${local.class}` : "k2b-dashboard-panel";
+    },
+    get ["data-width"]() {
+      return local.width ?? "third";
+    },
+    get children() {
+      return local.children;
+    }
+  }));
+}
+//# sourceMappingURL=Dashboard.js.map

package/dist/browser/widgets/Dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["widgets/Dashboard.tsx"],"sourcesContent":["import { createUniqueId, type JSX, Show, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\n\n/**\n * A panel's share of the six dashboard columns: a third is two, a half three, two thirds four, full all six. At a\n * dashboard width of 1000 px or less a third takes half the row and two thirds the whole row; at 600 px or less every\n * panel takes the whole row.\n */\nexport type DashboardWidth = \"third\" | \"half\" | \"twoThirds\" | \"full\";\n\nexport type DashboardGridProps = {\n  children: JSX.Element;\n  class?: string;\n};\n\n/** The dashboard's measuring container. Panel widths and the key-figure row follow its width, not the window's. */\nexport function DashboardGrid(props: DashboardGridProps): JSX.Element {\n  return <div class={props.class ? `k2b-dashboard-grid ${props.class}` : \"k2b-dashboard-grid\"}>{props.children}</div>;\n}\n\nexport type DashboardSectionProps = {\n  /** Visible heading; without it the section has no heading and is named by `ariaLabel`. */\n  title?: string;\n  /** Tabler icon class shown as a plain glyph before the title, never in a tile. */\n  icon?: string;\n  /** Colour of the icon glyph; it is mixed with the text colour so it stays readable in light and dark. */\n  iconColor?: string;\n  /** Source or cadence, quiet and next to the title. */\n  description?: string;\n  headingLevel?: 2 | 3 | 4;\n  ariaLabel?: string;\n  class?: string;\n  /** Panels and at most one key-figure row (`StatGrid`), in reading order; the row always spans all six columns. */\n  children?: JSX.Element;\n};\n\n/** A titled group of panels on the six-column grid. */\nexport function DashboardSection(props: DashboardSectionProps): JSX.Element {\n  const id = createUniqueId();\n  return (\n    <section\n      class={props.class ? `k2b-dashboard-section ${props.class}` : \"k2b-dashboard-section\"}\n      aria-labelledby={props.title ? id : undefined}\n      aria-label={props.title ? undefined : props.ariaLabel}\n    >\n      <Show when={props.title}>\n        <header class=\"k2b-dashboard-section__header\">\n          <Show when={props.icon}>\n            <i\n              class={`k2b-dashboard-section__icon ${props.icon}`}\n              style={props.iconColor ? { color: `color-mix(in srgb, ${props.iconColor} 72%, var(--k2b-text))` } : undefined}\n              aria-hidden=\"true\"\n            />\n          </Show>\n          <Dynamic component={`h${props.headingLevel ?? 2}`} id={id} class=\"k2b-dashboard-section__title\">\n            {props.title}\n          </Dynamic>\n          <Show when={props.description}>\n            <p class=\"k2b-dashboard-section__description\">{props.description}</p>\n          </Show>\n        </header>\n      </Show>\n      <div class=\"k2b-dashboard-section__grid\">{props.children}</div>\n    </section>\n  );\n}\n\ntype DashboardPanelTag = \"article\" | \"section\" | \"div\" | \"li\";\n\ntype DashboardPanelOwnProps<T extends DashboardPanelTag> = {\n  as?: T;\n  /** Defaults to a third. Ignored inside a key-figure row, where every tile takes one of its columns. */\n  width?: DashboardWidth;\n  class?: string;\n  children?: JSX.Element;\n};\n\nexport type DashboardPanelProps<T extends DashboardPanelTag = \"article\"> = DashboardPanelOwnProps<T> &\n  Omit<JSX.IntrinsicElements[T], keyof DashboardPanelOwnProps<T>>;\n\nconst PanelElement = Dynamic as unknown as (props: Record<string, unknown>) => JSX.Element;\n\n/** One framed cell of the grid. Panels in a row share the height of the tallest. */\nexport function DashboardPanel<T extends DashboardPanelTag = \"article\">(props: DashboardPanelProps<T>): JSX.Element {\n  const [local, element] = splitProps(props, [\"as\", \"width\", \"class\", \"children\"]);\n  return (\n    <PanelElement\n      component={local.as ?? \"article\"}\n      {...element}\n      class={local.class ? `k2b-dashboard-panel ${local.class}` : \"k2b-dashboard-panel\"}\n      data-width={local.width ?? \"third\"}\n    >\n      {local.children}\n    </PanelElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,cAAc,EAAY,IAAI,EAAE,UAAU,QAAQ,UAAU;AACrE,SAAS,OAAO,QAAQ,cAAc;;AAEtC;AACA;AACA;AACA;AACA;;AAQA;AACA,OAAO,SAAS,aAAa,CAAC,KAAyB,EAAe;EACpE;IAAA;IAAA,qBAA8F,KAAK,CAAC,QAAQ;IAAA,iCAAzF,KAAK,CAAC,KAAK,GAAG,sBAAsB,KAAK,CAAC,KAAK,EAAE,GAAG,oBAAoB;IAAA;EAAA;AAC7F;AAkBA;AACA,OAAO,SAAS,gBAAgB,CAAC,KAA4B,EAAe;EAC1E,MAAM,EAAE,GAAG,cAAc,CAAC,CAAC;EAC3B;IAAA;MAAA;MAAA;MAAA;IAAA,kCAMK,IAAI;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,KAAK;MAAA;MAAA;QAAA;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;QAAA,kCAElB,IAAI;UAAA,IAAC,IAAI;YAAA,OAAE,KAAK,CAAC,IAAI;UAAA;UAAA;YAAA;YAAA;cAAA,UAEX,+BAA+B,KAAK,CAAC,IAAI,EAAE;gBAAA,OAC3C,KAAK,CAAC,SAAS,GAAG;kBAAE,KAAK,EAAE,sBAAsB,KAAK,CAAC,SAAS;gBAAyB,CAAC,GAAG,SAAS;cAAA;cAAA;cAAA;YAAA;cAAA;cAAA;YAAA;YAAA;UAAA;QAAA;QAAA,kCAIhH,OAAO;UAAA,IAAC,SAAS;YAAA,OAAE,IAAI,KAAK,CAAC,YAAY,IAAI,CAAC,EAAE;UAAA;UAAE,EAAE,EAAE,EAAE;UAAA;UAAA;YAAA,OACtD,KAAK,CAAC,KAAK;UAAA;QAAA;QAAA,kCAEb,IAAI;UAAA,IAAC,IAAI;YAAA,OAAE,KAAK,CAAC,WAAW;UAAA;UAAA;YAAA;YAAA,sBACoB,KAAK,CAAC,WAAW;YAAA;UAAA;QAAA;QAAA;MAAA;IAAA;IAAA,uBAI5B,KAAK,CAAC,QAAQ;IAAA;MAAA,WArBjD,KAAK,CAAC,KAAK,GAAG,yBAAyB,KAAK,CAAC,KAAK,EAAE,GAAG,uBAAuB;QAAA,OACpE,KAAK,CAAC,KAAK,GAAG,EAAE,GAAG,SAAS;QAAA,OACjC,KAAK,CAAC,KAAK,GAAG,SAAS,GAAG,KAAK,CAAC,SAAS;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;IAAA;IAAA;EAAA;AAsB3D;AAeA,MAAM,YAAY,GAAG,OAAqE;;AAE1F;AACA,OAAO,SAAS,cAAc,CAA0C,KAA6B,EAAe;EAClH,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;EAChF,yBACG,YAAY;IAAA,IACX,SAAS;MAAA,OAAE,KAAK,CAAC,EAAE,IAAI,SAAS;IAAA;EAAA,GAC5B,OAAO;IAAA;MAAA,OACJ,oBAAK,CAAC,KAAK,MAAG,uBAAuB,KAAK,CAAC,KAAK,EAAE,GAAG,qBAAqB;IAAA;IAAA;MAAA,OACrE,KAAK,CAAC,KAAK,IAAI,OAAO;IAAA;IAAA;MAAA,OAEjC,KAAK,CAAC,QAAQ;IAAA;EAAA;AAGrB","ignoreList":[]}

package/dist/browser/widgets/index.js

@@ -1,3 +1,4 @@
+export * from "./Dashboard";
 export * from "./Widget";
 export * from "./WidgetHero";
 export * from "./WidgetList";

package/dist/browser/widgets/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["widgets/index.ts"],"sourcesContent":["export * from \"./Widget\";\nexport * from \"./WidgetHero\";\nexport * from \"./WidgetList\";\nexport * from \"./WidgetPills\";\nexport * from \"./WidgetStat\";\nexport * from \"./WidgetStatus\";\n"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,eAAe;AAC7B,cAAc,cAAc;AAC5B,cAAc,gBAAgB","ignoreList":[]}
+{"version":3,"names":[],"sources":["widgets/index.ts"],"sourcesContent":["export * from \"./Dashboard\";\nexport * from \"./Widget\";\nexport * from \"./WidgetHero\";\nexport * from \"./WidgetList\";\nexport * from \"./WidgetPills\";\nexport * from \"./WidgetStat\";\nexport * from \"./WidgetStatus\";\n"],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,eAAe;AAC7B,cAAc,cAAc;AAC5B,cAAc,gBAAgB","ignoreList":[]}

package/dist/ssr/actions/ContextMenu.js

@@ -103,6 +103,9 @@ export function ContextMenuBase(props) {
   const close = () => {
     detachOpenListeners();
     if (!isOpen()) return;
+    // An activated entry closes the menu before its action runs: focus goes back to where the menu opened from, as
+    // Escape returns it, so the keyboard never lands on the page body.
+    if (menu?.contains(document.activeElement)) returnFocus(opener?.isConnected ? opener : host, hostRing);
     setPosition();
     if (closeActiveContextMenu === close) closeActiveContextMenu = undefined;
     props.onClose?.();