@k2b/ui 0.48.0 → 0.50.0

package/dist/browser/surfaces/BudgetList.js

@@ -0,0 +1,281 @@
+import { template as _$template } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<ul class=k2b-budget__list>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<li><span class=k2b-budget__swatch data-pattern=hatched></span><!$><!/>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<li><span class=k2b-budget__swatch data-pattern=over></span><!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<ul class=k2b-budget__legend aria-hidden=true><li><span class=k2b-budget__swatch data-pattern=solid></span><!$><!/></li><!$><!/><!$><!/>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<p class=k2b-budget__empty>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<span class=k2b-budget__label>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<span class=k2b-budget__amount><!$><!/> <span>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<span class=k2b-budget__hint><!$><!/><!$><!/>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<li class=k2b-budget__row>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<span><!$><!/> <b>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<span class=k2b-budget__tip><b></b><span><!$><!/> <b></b></span><!$><!/><span><!$><!/> <b></b></span><span><!$><!/> <b>`);
+import { For, Show } from "solid-js";
+import { Tooltip } from "../feedback/Tooltip";
+import { useLocale } from "../intl/locale";
+import { useBudgetMessages } from "./budget-messages";
+import { budgetOverrun, budgetRatio, ProgressBar } from "./ProgressBar";
+
+/** One budget: `used` is booked, `expected` comes on top; over the budget is `used + expected - limit`. */
+
+/** "near" from 80 % of the budget, "over" beyond it. */
+
+/** The figures of one budget row; the share counts booked and expected together. */
+export const budgetState = item => {
+  const used = Number.isFinite(item.used) ? Math.max(0, item.used) : 0;
+  const expected = item.expected !== undefined && Number.isFinite(item.expected) ? Math.max(0, item.expected) : 0;
+  const limit = Number.isFinite(item.limit) ? Math.max(0, item.limit) : 0;
+  const total = used + expected;
+  const over = budgetOverrun(total, limit);
+  const ratio = budgetRatio(total, limit);
+  // The same float tolerance as the overrun: 0.7 + 0.1 of 1 is exactly 80 %.
+  const level = over > 0 ? "over" : ratio >= 0.8 - 1e-9 ? "near" : "ok";
+  return {
+    used,
+    expected,
+    limit,
+    total,
+    over,
+    free: over > 0 ? 0 : Math.max(0, limit - total),
+    ratio,
+    level
+  };
+};
+
+/**
+ * Budgets as rows: label and "spent of budget", a bar with booked (solid), expected (hatched) and over the budget
+ * (red, with a mark at the limit), and a hint that turns amber from 80 % and red beyond the budget.
+ */
+export function BudgetList(props) {
+  const locale = useLocale();
+  const t = useBudgetMessages(() => props.locale);
+  const money = value => new Intl.NumberFormat(props.locale ?? locale(), {
+    style: "currency",
+    currency: props.currency,
+    minimumFractionDigits: props.decimals ?? 0,
+    maximumFractionDigits: props.decimals ?? 0
+  }).format(value);
+  const states = () => props.items.map(item => ({
+    item,
+    state: budgetState(item)
+  }));
+  const anyExpected = () => states().some(({
+    state
+  }) => state.expected > 0);
+  const anyOver = () => states().some(({
+    state
+  }) => state.over > 0);
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$5);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return props.items.length;
+      },
+      get fallback() {
+        return (() => {
+          var _el$18 = _$getNextElement(_tmpl$6);
+          _$insert(_el$18, () => props.empty);
+          return _el$18;
+        })();
+      },
+      get children() {
+        return [(() => {
+          var _el$2 = _$getNextElement(_tmpl$);
+          _$insert(_el$2, _$createComponent(For, {
+            get each() {
+              return states();
+            },
+            children: ({
+              item,
+              state
+            }) => (() => {
+              var _el$19 = _$getNextElement(_tmpl$1);
+              _$insert(_el$19, _$createComponent(Tooltip.Anchor, {
+                "class": "k2b-budget__anchor",
+                tabIndex: 0,
+                get content() {
+                  return (() => {
+                    var _el$32 = _$getNextElement(_tmpl$11),
+                      _el$33 = _el$32.firstChild,
+                      _el$34 = _el$33.nextSibling,
+                      _el$37 = _el$34.firstChild,
+                      [_el$38, _co$9] = _$getNextMarker(_el$37.nextSibling),
+                      _el$35 = _el$38.nextSibling,
+                      _el$36 = _el$35.nextSibling,
+                      _el$54 = _el$34.nextSibling,
+                      [_el$55, _co$11] = _$getNextMarker(_el$54.nextSibling),
+                      _el$44 = _el$55.nextSibling,
+                      _el$47 = _el$44.firstChild,
+                      [_el$48, _co$1] = _$getNextMarker(_el$47.nextSibling),
+                      _el$45 = _el$48.nextSibling,
+                      _el$46 = _el$45.nextSibling,
+                      _el$49 = _el$44.nextSibling,
+                      _el$52 = _el$49.firstChild,
+                      [_el$53, _co$10] = _$getNextMarker(_el$52.nextSibling),
+                      _el$50 = _el$53.nextSibling,
+                      _el$51 = _el$50.nextSibling;
+                    _$insert(_el$33, () => item.label);
+                    _$insert(_el$34, () => t().used, _el$38, _co$9);
+                    _$insert(_el$36, () => money(state.used));
+                    _$insert(_el$32, _$createComponent(Show, {
+                      get when() {
+                        return state.expected > 0;
+                      },
+                      get children() {
+                        var _el$39 = _$getNextElement(_tmpl$10),
+                          _el$42 = _el$39.firstChild,
+                          [_el$43, _co$0] = _$getNextMarker(_el$42.nextSibling),
+                          _el$40 = _el$43.nextSibling,
+                          _el$41 = _el$40.nextSibling;
+                        _$insert(_el$39, () => t().expected, _el$43, _co$0);
+                        _$insert(_el$41, () => money(state.expected));
+                        return _el$39;
+                      }
+                    }), _el$55, _co$11);
+                    _$insert(_el$44, () => t().budget, _el$48, _co$1);
+                    _$insert(_el$46, () => money(state.limit));
+                    _$insert(_el$49, (() => {
+                      var _c$2 = _$memo(() => state.over > 0);
+                      return () => _c$2() ? t().overBy : t().left;
+                    })(), _el$53, _co$10);
+                    _$insert(_el$51, () => money(state.over > 0 ? state.over : state.free));
+                    return _el$32;
+                  })();
+                },
+                get children() {
+                  return [(() => {
+                    var _el$20 = _$getNextElement(_tmpl$7);
+                    _$insert(_el$20, () => item.label);
+                    return _el$20;
+                  })(), (() => {
+                    var _el$21 = _$getNextElement(_tmpl$8),
+                      _el$24 = _el$21.firstChild,
+                      [_el$25, _co$6] = _$getNextMarker(_el$24.nextSibling),
+                      _el$22 = _el$25.nextSibling,
+                      _el$23 = _el$22.nextSibling;
+                    _$insert(_el$21, () => money(state.total), _el$25, _co$6);
+                    _$insert(_el$23, () => t().of({
+                      limit: money(state.limit)
+                    }));
+                    return _el$21;
+                  })(), _$createComponent(ProgressBar, {
+                    "class": "k2b-budget__bar",
+                    size: "sm",
+                    get label() {
+                      return item.label;
+                    },
+                    get segments() {
+                      return [{
+                        value: state.used
+                      }, {
+                        value: state.expected,
+                        pattern: "hatched"
+                      }];
+                    },
+                    get limit() {
+                      return state.limit;
+                    },
+                    get valueText() {
+                      return t().valueText({
+                        used: money(state.used),
+                        expected: state.expected > 0 ? money(state.expected) : undefined,
+                        limit: money(state.limit)
+                      });
+                    }
+                  }), (() => {
+                    var _el$26 = _$getNextElement(_tmpl$0),
+                      _el$28 = _el$26.firstChild,
+                      [_el$29, _co$7] = _$getNextMarker(_el$28.nextSibling),
+                      _el$30 = _el$29.nextSibling,
+                      [_el$31, _co$8] = _$getNextMarker(_el$30.nextSibling);
+                    _$insert(_el$26, _$createComponent(Show, {
+                      get when() {
+                        return state.level !== "ok";
+                      },
+                      get children() {
+                        var _el$27 = _$getNextElement(_tmpl$9);
+                        _$effect(() => _$className(_el$27, state.level === "over" ? "ti ti-alert-circle" : "ti ti-alert-triangle"));
+                        return _el$27;
+                      }
+                    }), _el$29, _co$7);
+                    _$insert(_el$26, (() => {
+                      var _c$ = _$memo(() => state.level === "over");
+                      return () => _c$() ? t().over({
+                        amount: money(state.over)
+                      }) : _$memo(() => state.level === "near")() ? t().near({
+                        amount: money(state.free)
+                      }) : t().free({
+                        amount: money(state.free)
+                      });
+                    })(), _el$31, _co$8);
+                    return _el$26;
+                  })()];
+                }
+              }));
+              _$effect(() => _$setAttribute(_el$19, "data-level", state.level));
+              return _el$19;
+            })()
+          }));
+          return _el$2;
+        })(), _$createComponent(Show, {
+          get when() {
+            return props.legend !== false;
+          },
+          get children() {
+            var _el$3 = _$getNextElement(_tmpl$4),
+              _el$4 = _el$3.firstChild,
+              _el$5 = _el$4.firstChild,
+              _el$6 = _el$5.nextSibling,
+              [_el$7, _co$] = _$getNextMarker(_el$6.nextSibling),
+              _el$14 = _el$4.nextSibling,
+              [_el$15, _co$4] = _$getNextMarker(_el$14.nextSibling),
+              _el$16 = _el$15.nextSibling,
+              [_el$17, _co$5] = _$getNextMarker(_el$16.nextSibling);
+            _$insert(_el$4, () => t().used, _el$7, _co$);
+            _$insert(_el$3, _$createComponent(Show, {
+              get when() {
+                return anyExpected();
+              },
+              get children() {
+                var _el$8 = _$getNextElement(_tmpl$2),
+                  _el$9 = _el$8.firstChild,
+                  _el$0 = _el$9.nextSibling,
+                  [_el$1, _co$2] = _$getNextMarker(_el$0.nextSibling);
+                _$insert(_el$8, () => t().expected, _el$1, _co$2);
+                return _el$8;
+              }
+            }), _el$15, _co$4);
+            _$insert(_el$3, _$createComponent(Show, {
+              get when() {
+                return anyOver();
+              },
+              get children() {
+                var _el$10 = _$getNextElement(_tmpl$3),
+                  _el$11 = _el$10.firstChild,
+                  _el$12 = _el$11.nextSibling,
+                  [_el$13, _co$3] = _$getNextMarker(_el$12.nextSibling);
+                _$insert(_el$10, () => t().overLegend, _el$13, _co$3);
+                return _el$10;
+              }
+            }), _el$17, _co$5);
+            return _el$3;
+          }
+        })];
+      }
+    }));
+    _$effect(() => _$className(_el$, `k2b-budget ${props.class ?? ""}`));
+    return _el$;
+  })();
+}
+export default BudgetList;
+//# sourceMappingURL=BudgetList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["surfaces/BudgetList.tsx"],"sourcesContent":["import { For, type JSX, Show } from \"solid-js\";\nimport { Tooltip } from \"../feedback/Tooltip\";\nimport { useLocale } from \"../intl/locale\";\nimport { useBudgetMessages } from \"./budget-messages\";\nimport { budgetOverrun, budgetRatio, ProgressBar } from \"./ProgressBar\";\n\n/** One budget: `used` is booked, `expected` comes on top; over the budget is `used + expected - limit`. */\nexport type BudgetItem = { id?: string; label: string; used: number; expected?: number; limit: number };\n\nexport type BudgetListProps = {\n  items: readonly BudgetItem[];\n  /** ISO 4217 currency code, e.g. `\"EUR\"`. */\n  currency: string;\n  /** Explicit locale override; defaults to the inherited render locale. */\n  locale?: string;\n  /** Fixed fraction digits. Defaults to 0. */\n  decimals?: number;\n  /** The sentence shown when there is no budget. */\n  empty?: string;\n  /** Hides the legend under the rows when the host explains the colours elsewhere. */\n  legend?: boolean;\n  class?: string;\n};\n\n/** \"near\" from 80 % of the budget, \"over\" beyond it. */\nexport type BudgetLevel = \"ok\" | \"near\" | \"over\";\n\n/** The figures of one budget row; the share counts booked and expected together. */\nexport const budgetState = (item: Pick<BudgetItem, \"used\" | \"expected\" | \"limit\">) => {\n  const used = Number.isFinite(item.used) ? Math.max(0, item.used) : 0;\n  const expected = item.expected !== undefined && Number.isFinite(item.expected) ? Math.max(0, item.expected) : 0;\n  const limit = Number.isFinite(item.limit) ? Math.max(0, item.limit) : 0;\n  const total = used + expected;\n  const over = budgetOverrun(total, limit);\n  const ratio = budgetRatio(total, limit);\n  // The same float tolerance as the overrun: 0.7 + 0.1 of 1 is exactly 80 %.\n  const level: BudgetLevel = over > 0 ? \"over\" : ratio >= 0.8 - 1e-9 ? \"near\" : \"ok\";\n  return { used, expected, limit, total, over, free: over > 0 ? 0 : Math.max(0, limit - total), ratio, level };\n};\n\n/**\n * Budgets as rows: label and \"spent of budget\", a bar with booked (solid), expected (hatched) and over the budget\n * (red, with a mark at the limit), and a hint that turns amber from 80 % and red beyond the budget.\n */\nexport function BudgetList(props: BudgetListProps): JSX.Element {\n  const locale = useLocale();\n  const t = useBudgetMessages(() => props.locale);\n  const money = (value: number) =>\n    new Intl.NumberFormat(props.locale ?? locale(), {\n      style: \"currency\",\n      currency: props.currency,\n      minimumFractionDigits: props.decimals ?? 0,\n      maximumFractionDigits: props.decimals ?? 0,\n    }).format(value);\n  const states = () => props.items.map((item) => ({ item, state: budgetState(item) }));\n  const anyExpected = () => states().some(({ state }) => state.expected > 0);\n  const anyOver = () => states().some(({ state }) => state.over > 0);\n  return (\n    <div class={`k2b-budget ${props.class ?? \"\"}`}>\n      <Show when={props.items.length} fallback={<p class=\"k2b-budget__empty\">{props.empty}</p>}>\n        <ul class=\"k2b-budget__list\">\n          <For each={states()}>\n            {({ item, state }) => (\n              <li class=\"k2b-budget__row\" data-level={state.level}>\n                <Tooltip.Anchor\n                  class=\"k2b-budget__anchor\"\n                  tabIndex={0}\n                  content={\n                    <span class=\"k2b-budget__tip\">\n                      <b>{item.label}</b>\n                      <span>\n                        {t().used} <b>{money(state.used)}</b>\n                      </span>\n                      <Show when={state.expected > 0}>\n                        <span>\n                          {t().expected} <b>{money(state.expected)}</b>\n                        </span>\n                      </Show>\n                      <span>\n                        {t().budget} <b>{money(state.limit)}</b>\n                      </span>\n                      <span>\n                        {state.over > 0 ? t().overBy : t().left} <b>{money(state.over > 0 ? state.over : state.free)}</b>\n                      </span>\n                    </span>\n                  }\n                >\n                  <span class=\"k2b-budget__label\">{item.label}</span>\n                  <span class=\"k2b-budget__amount\">\n                    {money(state.total)} <span>{t().of({ limit: money(state.limit) })}</span>\n                  </span>\n                  <ProgressBar\n                    class=\"k2b-budget__bar\"\n                    size=\"sm\"\n                    label={item.label}\n                    segments={[{ value: state.used }, { value: state.expected, pattern: \"hatched\" }]}\n                    limit={state.limit}\n                    valueText={t().valueText({\n                      used: money(state.used),\n                      expected: state.expected > 0 ? money(state.expected) : undefined,\n                      limit: money(state.limit),\n                    })}\n                  />\n                  <span class=\"k2b-budget__hint\">\n                    <Show when={state.level !== \"ok\"}>\n                      <i class={state.level === \"over\" ? \"ti ti-alert-circle\" : \"ti ti-alert-triangle\"} aria-hidden=\"true\" />\n                    </Show>\n                    {state.level === \"over\"\n                      ? t().over({ amount: money(state.over) })\n                      : state.level === \"near\"\n                        ? t().near({ amount: money(state.free) })\n                        : t().free({ amount: money(state.free) })}\n                  </span>\n                </Tooltip.Anchor>\n              </li>\n            )}\n          </For>\n        </ul>\n        <Show when={props.legend !== false}>\n          <ul class=\"k2b-budget__legend\" aria-hidden=\"true\">\n            <li>\n              <span class=\"k2b-budget__swatch\" data-pattern=\"solid\" />\n              {t().used}\n            </li>\n            <Show when={anyExpected()}>\n              <li>\n                <span class=\"k2b-budget__swatch\" data-pattern=\"hatched\" />\n                {t().expected}\n              </li>\n            </Show>\n            <Show when={anyOver()}>\n              <li>\n                <span class=\"k2b-budget__swatch\" data-pattern=\"over\" />\n                {t().overLegend}\n              </li>\n            </Show>\n          </ul>\n        </Show>\n      </Show>\n    </div>\n  );\n}\n\nexport default BudgetList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,GAAG,EAAY,IAAI,QAAQ,UAAU;AAC9C,SAAS,OAAO,QAAQ,qBAAqB;AAC7C,SAAS,SAAS,QAAQ,gBAAgB;AAC1C,SAAS,iBAAiB,QAAQ,mBAAmB;AACrD,SAAS,aAAa,EAAE,WAAW,EAAE,WAAW,QAAQ,eAAe;;AAEvE;;AAkBA;;AAGA;AACA,OAAO,MAAM,WAAW,GAAI,IAAqD,IAAK;EACpF,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;EACpE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;EAC/G,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;EACvE,MAAM,KAAK,GAAG,IAAI,GAAG,QAAQ;EAC7B,MAAM,IAAI,GAAG,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC;EACxC,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC;EACvC;EACA,MAAM,KAAkB,GAAG,IAAI,GAAG,CAAC,GAAG,MAAM,GAAG,KAAK,IAAI,GAAG,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI;EAClF,OAAO;IAAE,IAAI;IAAE,QAAQ;IAAE,KAAK;IAAE,KAAK;IAAE,IAAI;IAAE,IAAI,EAAE,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAAE,KAAK;IAAE;EAAM,CAAC;AAC9G,CAAC;;AAED;AACA;AACA;AACA;AACA,OAAO,SAAS,UAAU,CAAC,KAAsB,EAAe;EAC9D,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,MAAM,CAAC,GAAG,iBAAiB,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC;EAC/C,MAAM,KAAK,GAAI,KAAa,IAC1B,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,EAAE;IAC9C,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,KAAK,CAAC,QAAQ;IACxB,qBAAqB,EAAE,KAAK,CAAC,QAAQ,IAAI,CAAC;IAC1C,qBAAqB,EAAE,KAAK,CAAC,QAAQ,IAAI;EAC3C,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;EAClB,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,KAAK,CAAC,GAAG,CAAE,IAAI,KAAM;IAAE,IAAI;IAAE,KAAK,EAAE,WAAW,CAAC,IAAI;EAAE,CAAC,CAAC,CAAC;EACpF,MAAM,WAAW,GAAG,MAAM,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAAE;EAAM,CAAC,KAAK,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC;EAC1E,MAAM,OAAO,GAAG,MAAM,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAAE;EAAM,CAAC,KAAK,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC;EAClE;IAAA;IAAA,iCAEK,IAAI;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,KAAK,CAAC,MAAM;MAAA;MAAA,IAAE,QAAQ;QAAA;UAAA;UAAA,uBAAgC,KAAK,CAAC,KAAK;UAAA;QAAA;MAAA;MAAA;QAAA;UAAA;UAAA,kCAE9E,GAAG;YAAA,IAAC,IAAI;cAAA,OAAE,MAAM,CAAC,CAAC;YAAA;YAAA,UAChB,CAAC;cAAE,IAAI;cAAE;YAAM,CAAC;cAAA;cAAA,mCAEZ,OAAO,CAAC,MAAM;gBAAA;gBAEb,QAAQ,EAAE,CAAC;gBAAA,IACX,OAAO;kBAAA;oBAAA;sBAAA;sBAAA;sBAAA;sBAAA;sBAAA;sBAAA;sBAAA;sBAAA;sBAAA;sBAAA;sBAAA;sBAAA;sBAAA;sBAAA;sBAAA;sBAAA;sBAAA;sBAAA;oBAAA,uBAEC,IAAI,CAAC,KAAK;oBAAA,uBAEX,CAAC,CAAC,CAAC,CAAC,IAAI;oBAAA,uBAAM,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;oBAAA,mCAEjC,IAAI;sBAAA,IAAC,IAAI;wBAAA,OAAE,KAAK,CAAC,QAAQ,GAAG,CAAC;sBAAA;sBAAA;wBAAA;0BAAA;0BAAA;0BAAA;0BAAA;wBAAA,uBAEzB,CAAC,CAAC,CAAC,CAAC,QAAQ;wBAAA,uBAAM,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;wBAAA;sBAAA;oBAAA;oBAAA,uBAIzC,CAAC,CAAC,CAAC,CAAC,MAAM;oBAAA,uBAAM,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;oBAAA;sBAAA,wBAGlC,KAAK,CAAC,IAAI,GAAG,CAAC;sBAAA,aAAd,SAAiB,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI;oBAAA;oBAAA,uBAAM,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;oBAAA;kBAAA;gBAAA;gBAAA;kBAAA;oBAAA;oBAAA,uBAKjE,IAAI,CAAC,KAAK;oBAAA;kBAAA;oBAAA;sBAAA;sBAAA;sBAAA;sBAAA;oBAAA,uBAExC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;oBAAA,uBAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;sBAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK;oBAAE,CAAC,CAAC;oBAAA;kBAAA,wBAElE,WAAW;oBAAA;oBAEV,IAAI;oBAAA,IACJ,KAAK;sBAAA,OAAE,IAAI,CAAC,KAAK;oBAAA;oBAAA,IACjB,QAAQ;sBAAA,OAAE,CAAC;wBAAE,KAAK,EAAE,KAAK,CAAC;sBAAK,CAAC,EAAE;wBAAE,KAAK,EAAE,KAAK,CAAC,QAAQ;wBAAE,OAAO,EAAE;sBAAU,CAAC,CAAC;oBAAA;oBAAA,IAChF,KAAK;sBAAA,OAAE,KAAK,CAAC,KAAK;oBAAA;oBAAA,IAClB,SAAS;sBAAA,OAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;wBACvB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;wBACvB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,SAAS;wBAChE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK;sBAC1B,CAAC,CAAC;oBAAA;kBAAA;oBAAA;sBAAA;sBAAA;sBAAA;sBAAA;oBAAA,mCAGD,IAAI;sBAAA,IAAC,IAAI;wBAAA,OAAE,KAAK,CAAC,KAAK,KAAK,IAAI;sBAAA;sBAAA;wBAAA;wBAAA,mCACpB,KAAK,CAAC,KAAK,KAAK,MAAM,GAAG,oBAAoB,GAAG,sBAAsB;wBAAA;sBAAA;oBAAA;oBAAA;sBAAA,uBAEjF,KAAK,CAAC,KAAK,KAAK,MAAM;sBAAA,aAAtB,QACG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;wBAAE,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI;sBAAE,CAAC,CAAC,GACvC,kBAAK,CAAC,KAAK,KAAK,MAAM,MACpB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;wBAAE,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI;sBAAE,CAAC,CAAC,GACvC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;wBAAE,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI;sBAAE,CAAC,CAAC;oBAAA;oBAAA;kBAAA;gBAAA;cAAA;cAAA,oDAhDX,KAAK,CAAC,KAAK;cAAA;YAAA;UAoDpD;UAAA;QAAA,wBAGJ,IAAI;UAAA,IAAC,IAAI;YAAA,OAAE,KAAK,CAAC,MAAM,KAAK,KAAK;UAAA;UAAA;YAAA;cAAA;cAAA;cAAA;cAAA;cAAA;cAAA;cAAA;cAAA;YAAA,sBAI3B,CAAC,CAAC,CAAC,CAAC,IAAI;YAAA,kCAEV,IAAI;cAAA,IAAC,IAAI;gBAAA,OAAE,WAAW,CAAC,CAAC;cAAA;cAAA;gBAAA;kBAAA;kBAAA;kBAAA;gBAAA,sBAGpB,CAAC,CAAC,CAAC,CAAC,QAAQ;gBAAA;cAAA;YAAA;YAAA,kCAGhB,IAAI;cAAA,IAAC,IAAI;gBAAA,OAAE,OAAO,CAAC,CAAC;cAAA;cAAA;gBAAA;kBAAA;kBAAA;kBAAA;gBAAA,uBAGhB,CAAC,CAAC,CAAC,CAAC,UAAU;gBAAA;cAAA;YAAA;YAAA;UAAA;QAAA;MAAA;IAAA;IAAA,iCA3Ef,cAAc,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;IAAA;EAAA;AAmFjD;AAEA,eAAe,UAAU","ignoreList":[]}

package/dist/browser/surfaces/NoticeCard.js

@@ -13,10 +13,13 @@ import { memo as _$memo } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<div>`),
   _tmpl$2 = /*#__PURE__*/_$template(`<article><!$><!/><div><!$><!/><!$><!/><!$><!/>`),
   _tmpl$3 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<div><p></p><!$><!/>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<p>`);
+  _tmpl$4 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div><p></p><!$><!/>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<p>`);
 import { children, For, Show, splitProps } from "solid-js";
+import { dialogToneIcon, dialogToneLabel } from "../feedback/dialog-tone";
+import { useUiMessages } from "../intl/messages";
 export const NOTICE_CARD_CLASSES = {
   root: "k2b-notice-card",
   icon: "k2b-notice-card__icon",
@@ -32,6 +35,18 @@ function NoticeCardComponent(props) {
   // Children that render nothing, such as a Show whose condition is false, add no body and no gap.
   const body = children(() => local.children);
   const hasBody = () => body.toArray().some(node => node != null && node !== false && node !== "");
+  const messages = useUiMessages();
+  /** The tone a dialog also knows, so `icon` true shows the same icon and word; info and neutral have no word. */
+  const dialogTone = () => local.tone === "success" || local.tone === "warning" || local.tone === "danger" ? local.tone : undefined;
+  const icon = () => {
+    if (local.icon !== true) return local.icon;
+    const tone = dialogTone();
+    return tone ? dialogToneIcon(tone) : "ti ti-info-circle";
+  };
+  const toneWord = () => {
+    const tone = local.icon === true ? dialogTone() : undefined;
+    return tone ? `${dialogToneLabel(messages(), tone)}: ` : undefined;
+  };
   return (() => {
     var _el$ = _$getNextElement(_tmpl$2),
       _el$0 = _el$.firstChild,
@@ -55,46 +70,50 @@ function NoticeCardComponent(props) {
     } : {}), false, true);
     _$insert(_el$, _$createComponent(Show, {
       get when() {
-        return local.icon;
+        return icon();
       },
-      children: icon => (() => {
+      children: icon => [(() => {
         var _el$10 = _$getNextElement(_tmpl$3);
         _$effect(() => _$className(_el$10, `${icon()} ${NOTICE_CARD_CLASSES.icon}`));
         return _el$10;
-      })()
+      })(), _$memo(() => _$memo(() => !!toneWord())() ? (() => {
+        var _el$11 = _$getNextElement(_tmpl$4);
+        _$insert(_el$11, toneWord);
+        return _el$11;
+      })() : null)]
     }), _el$1, _co$4);
     _$insert(_el$2, _$createComponent(Show, {
       get when() {
         return local.title;
       },
       children: title => (() => {
-        var _el$11 = _$getNextElement(_tmpl$4),
-          _el$12 = _el$11.firstChild,
-          _el$13 = _el$12.nextSibling,
-          [_el$14, _co$5] = _$getNextMarker(_el$13.nextSibling);
-        _$insert(_el$12, title);
-        _$insert(_el$11, _$createComponent(Show, {
+        var _el$12 = _$getNextElement(_tmpl$5),
+          _el$13 = _el$12.firstChild,
+          _el$14 = _el$13.nextSibling,
+          [_el$15, _co$5] = _$getNextMarker(_el$14.nextSibling);
+        _$insert(_el$13, title);
+        _$insert(_el$12, _$createComponent(Show, {
           get when() {
             return local.meta;
           },
           children: meta => (() => {
-            var _el$15 = _$getNextElement(_tmpl$5);
-            _$insert(_el$15, meta);
-            _$effect(() => _$className(_el$15, NOTICE_CARD_CLASSES.meta));
-            return _el$15;
+            var _el$16 = _$getNextElement(_tmpl$6);
+            _$insert(_el$16, meta);
+            _$effect(() => _$className(_el$16, NOTICE_CARD_CLASSES.meta));
+            return _el$16;
           })()
-        }), _el$14, _co$5);
+        }), _el$15, _co$5);
         _$effect(_p$ => {
           var _v$ = NOTICE_CARD_CLASSES.head,
             _v$2 = NOTICE_CARD_CLASSES.title;
-          _v$ !== _p$.e && _$className(_el$11, _p$.e = _v$);
-          _v$2 !== _p$.t && _$className(_el$12, _p$.t = _v$2);
+          _v$ !== _p$.e && _$className(_el$12, _p$.e = _v$);
+          _v$2 !== _p$.t && _$className(_el$13, _p$.t = _v$2);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$11;
+        return _el$12;
       })()
     }), _el$5, _co$);
     _$insert(_el$2, _$createComponent(Show, {
@@ -102,10 +121,10 @@ function NoticeCardComponent(props) {
         return local.detail;
       },
       children: detail => (() => {
-        var _el$16 = _$getNextElement(_tmpl$6);
-        _$insert(_el$16, detail);
-        _$effect(() => _$className(_el$16, NOTICE_CARD_CLASSES.description));
-        return _el$16;
+        var _el$17 = _$getNextElement(_tmpl$7);
+        _$insert(_el$17, detail);
+        _$effect(() => _$className(_el$17, NOTICE_CARD_CLASSES.description));
+        return _el$17;
       })()
     }), _el$7, _co$2);
     _$insert(_el$2, _$createComponent(Show, {
@@ -131,8 +150,8 @@ function NoticeGrid(props) {
       return props.items.length > 0;
     },
     get children() {
-      var _el$17 = _$getNextElement(_tmpl$);
-      _$insert(_el$17, _$createComponent(For, {
+      var _el$18 = _$getNextElement(_tmpl$);
+      _$insert(_el$18, _$createComponent(For, {
         get each() {
           return props.items;
         },
@@ -141,14 +160,14 @@ function NoticeGrid(props) {
       _$effect(_p$ => {
         var _v$3 = `k2b-notice-grid ${props.class ?? ""}`,
           _v$4 = columns();
-        _v$3 !== _p$.e && _$className(_el$17, _p$.e = _v$3);
-        _v$4 !== _p$.t && _$setAttribute(_el$17, "data-columns", _p$.t = _v$4);
+        _v$3 !== _p$.e && _$className(_el$18, _p$.e = _v$3);
+        _v$4 !== _p$.t && _$setAttribute(_el$18, "data-columns", _p$.t = _v$4);
         return _p$;
       }, {
         e: undefined,
         t: undefined
       });
-      return _el$17;
+      return _el$18;
     }
   });
 }

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/NoticeCard.tsx"],"sourcesContent":["import { children, For, type JSX, Show, splitProps } from \"solid-js\";\nimport type { IntentTone } from \"../semantics\";\n\nexport type NoticeTone = Extract<IntentTone, \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\">;\n\ntype NoticeCardContentProps =\n  | { title: JSX.Element; detail?: JSX.Element; meta?: JSX.Element; children?: JSX.Element }\n  | { title?: never; detail?: never; meta?: never; children: JSX.Element };\n\nexport type NoticeCardProps = Omit<JSX.HTMLAttributes<HTMLElement>, \"children\" | \"class\" | \"title\"> &\n  NoticeCardContentProps & {\n    tone?: NoticeTone;\n    /** A Tabler icon class. Turns the notice into a compact status line whose icon and text take the tone colour. */\n    icon?: string;\n    class?: string;\n    bodyClass?: string;\n  };\n\nexport const NOTICE_CARD_CLASSES = {\n  root: \"k2b-notice-card\",\n  icon: \"k2b-notice-card__icon\",\n  content: \"k2b-notice-card__content\",\n  head: \"k2b-notice-card__head\",\n  title: \"k2b-notice-card__title\",\n  meta: \"k2b-notice-card__meta\",\n  description: \"k2b-notice-card__description\",\n  body: \"k2b-notice-card__body\",\n} as const;\n\nfunction NoticeCardComponent(props: NoticeCardProps): JSX.Element {\n  const [local, articleProps] = splitProps(props, [\"tone\", \"icon\", \"title\", \"detail\", \"meta\", \"children\", \"class\", \"bodyClass\"]);\n  // Children that render nothing, such as a Show whose condition is false, add no body and no gap.\n  const body = children(() => local.children);\n  const hasBody = () => body.toArray().some((node) => node != null && node !== false && node !== \"\");\n  return (\n    <article\n      {...articleProps}\n      class={`${NOTICE_CARD_CLASSES.root} ${local.class ?? \"\"}`}\n      data-tone={local.tone ?? \"neutral\"}\n      {...(local.icon ? { \"data-icon\": \"\" } : {})}\n    >\n      <Show when={local.icon}>{(icon) => <i class={`${icon()} ${NOTICE_CARD_CLASSES.icon}`} aria-hidden=\"true\" />}</Show>\n      <div class={NOTICE_CARD_CLASSES.content}>\n        <Show when={local.title}>\n          {(title) => (\n            <div class={NOTICE_CARD_CLASSES.head}>\n              <p class={NOTICE_CARD_CLASSES.title}>{title()}</p>\n              <Show when={local.meta}>{(meta) => <span class={NOTICE_CARD_CLASSES.meta}>{meta()}</span>}</Show>\n            </div>\n          )}\n        </Show>\n        <Show when={local.detail}>{(detail) => <p class={NOTICE_CARD_CLASSES.description}>{detail()}</p>}</Show>\n        <Show when={hasBody()}>\n          <div class={`${NOTICE_CARD_CLASSES.body} ${local.bodyClass ?? \"\"}`}>{body()}</div>\n        </Show>\n      </div>\n    </article>\n  );\n}\n\nexport type NoticeGridProps<T> = {\n  items: readonly T[];\n  children: (item: T) => JSX.Element;\n  class?: string;\n};\n\nfunction NoticeGrid<T>(props: NoticeGridProps<T>): JSX.Element {\n  const columns = () => (props.items.length <= 1 ? \"one\" : props.items.length === 2 ? \"two\" : \"three\");\n  return (\n    <Show when={props.items.length > 0}>\n      <div class={`k2b-notice-grid ${props.class ?? \"\"}`} data-columns={columns()}>\n        <For each={props.items}>{(item) => props.children(item)}</For>\n      </div>\n    </Show>\n  );\n}\n\nexport const NoticeCard = Object.assign(NoticeCardComponent, { Grid: NoticeGrid });\nexport default NoticeCard;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/NoticeCard.tsx"],"sourcesContent":["import { children, For, type JSX, Show, splitProps } from \"solid-js\";\nimport { dialogToneIcon, dialogToneLabel } from \"../feedback/dialog-tone\";\nimport { useUiMessages } from \"../intl/messages\";\nimport type { IntentTone } from \"../semantics\";\n\nexport type NoticeTone = Extract<IntentTone, \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\">;\n\ntype NoticeCardContentProps =\n  | { title: JSX.Element; detail?: JSX.Element; meta?: JSX.Element; children?: JSX.Element }\n  | { title?: never; detail?: never; meta?: never; children: JSX.Element };\n\nexport type NoticeCardProps = Omit<JSX.HTMLAttributes<HTMLElement>, \"children\" | \"class\" | \"title\"> &\n  NoticeCardContentProps & {\n    tone?: NoticeTone;\n    /**\n     * A Tabler icon class. Turns the notice into a compact status line whose icon and text take the tone colour. `true`\n     * takes the tone's own icon, the one a toned dialog shows, and names the tone for screen readers.\n     */\n    icon?: string | true;\n    class?: string;\n    bodyClass?: string;\n  };\n\nexport const NOTICE_CARD_CLASSES = {\n  root: \"k2b-notice-card\",\n  icon: \"k2b-notice-card__icon\",\n  content: \"k2b-notice-card__content\",\n  head: \"k2b-notice-card__head\",\n  title: \"k2b-notice-card__title\",\n  meta: \"k2b-notice-card__meta\",\n  description: \"k2b-notice-card__description\",\n  body: \"k2b-notice-card__body\",\n} as const;\n\nfunction NoticeCardComponent(props: NoticeCardProps): JSX.Element {\n  const [local, articleProps] = splitProps(props, [\"tone\", \"icon\", \"title\", \"detail\", \"meta\", \"children\", \"class\", \"bodyClass\"]);\n  // Children that render nothing, such as a Show whose condition is false, add no body and no gap.\n  const body = children(() => local.children);\n  const hasBody = () => body.toArray().some((node) => node != null && node !== false && node !== \"\");\n  const messages = useUiMessages();\n  /** The tone a dialog also knows, so `icon` true shows the same icon and word; info and neutral have no word. */\n  const dialogTone = () => (local.tone === \"success\" || local.tone === \"warning\" || local.tone === \"danger\" ? local.tone : undefined);\n  const icon = () => {\n    if (local.icon !== true) return local.icon;\n    const tone = dialogTone();\n    return tone ? dialogToneIcon(tone) : \"ti ti-info-circle\";\n  };\n  const toneWord = () => {\n    const tone = local.icon === true ? dialogTone() : undefined;\n    return tone ? `${dialogToneLabel(messages(), tone)}: ` : undefined;\n  };\n  return (\n    <article\n      {...articleProps}\n      class={`${NOTICE_CARD_CLASSES.root} ${local.class ?? \"\"}`}\n      data-tone={local.tone ?? \"neutral\"}\n      {...(local.icon ? { \"data-icon\": \"\" } : {})}\n    >\n      <Show when={icon()}>\n        {(icon) => (\n          <>\n            <i class={`${icon()} ${NOTICE_CARD_CLASSES.icon}`} aria-hidden=\"true\" />\n            {/* Inside the icon's branch, so a notice without one keeps its markup. */}\n            {toneWord() ? <span class=\"k2b-sr-only\">{toneWord()}</span> : null}\n          </>\n        )}\n      </Show>\n      <div class={NOTICE_CARD_CLASSES.content}>\n        <Show when={local.title}>\n          {(title) => (\n            <div class={NOTICE_CARD_CLASSES.head}>\n              <p class={NOTICE_CARD_CLASSES.title}>{title()}</p>\n              <Show when={local.meta}>{(meta) => <span class={NOTICE_CARD_CLASSES.meta}>{meta()}</span>}</Show>\n            </div>\n          )}\n        </Show>\n        <Show when={local.detail}>{(detail) => <p class={NOTICE_CARD_CLASSES.description}>{detail()}</p>}</Show>\n        <Show when={hasBody()}>\n          <div class={`${NOTICE_CARD_CLASSES.body} ${local.bodyClass ?? \"\"}`}>{body()}</div>\n        </Show>\n      </div>\n    </article>\n  );\n}\n\nexport type NoticeGridProps<T> = {\n  items: readonly T[];\n  children: (item: T) => JSX.Element;\n  class?: string;\n};\n\nfunction NoticeGrid<T>(props: NoticeGridProps<T>): JSX.Element {\n  const columns = () => (props.items.length <= 1 ? \"one\" : props.items.length === 2 ? \"two\" : \"three\");\n  return (\n    <Show when={props.items.length > 0}>\n      <div class={`k2b-notice-grid ${props.class ?? \"\"}`} data-columns={columns()}>\n        <For each={props.items}>{(item) => props.children(item)}</For>\n      </div>\n    </Show>\n  );\n}\n\nexport const NoticeCard = Object.assign(NoticeCardComponent, { Grid: NoticeGrid });\nexport default NoticeCard;\n"],"mappings":"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","ignoreList":[]}