@k2b/ui 0.49.0 → 0.51.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":"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","ignoreList":[]}

package/dist/browser/surfaces/DescriptionList.js

@@ -45,19 +45,22 @@ export function DescriptionList(props) {
         _v$2 = columns(),
         _v$3 = props.layout ?? "grid",
         _v$4 = props.size ?? "md",
-        _v$5 = props.actionVisibility ?? "always";
+        _v$5 = props.actionVisibility ?? "always",
+        _v$6 = props.leader;
       _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-layout", _p$.a = _v$3);
       _v$4 !== _p$.o && _$setAttribute(_el$, "data-size", _p$.o = _v$4);
       _v$5 !== _p$.i && _$setAttribute(_el$, "data-action-visibility", _p$.i = _v$5);
+      _v$6 !== _p$.n && _$setAttribute(_el$, "data-leader", _p$.n = _v$6);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
       o: undefined,
-      i: undefined
+      i: undefined,
+      n: undefined
     });
     return _el$;
   })();

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/DescriptionList.tsx"],"sourcesContent":["import { For, type JSX, Show } from \"solid-js\";\n\nexport type DescriptionListItem = {\n  term: JSX.Element;\n  description: JSX.Element;\n  action?: JSX.Element;\n};\n\nexport type DescriptionListProps = {\n  items: readonly DescriptionListItem[];\n  columns?: 1 | 2 | 3;\n  layout?: \"grid\" | \"rows\" | \"compact\";\n  size?: \"sm\" | \"md\";\n  actionVisibility?: \"always\" | \"progressive\";\n  class?: string;\n};\n\n/** Semantic key-value content with predictable responsive density. */\nexport function DescriptionList(props: DescriptionListProps): JSX.Element {\n  const columns = () => Math.max(1, Math.min(3, props.columns ?? 1));\n  return (\n    <dl\n      class={`k2b-description-list ${props.class ?? \"\"}`}\n      data-columns={columns()}\n      data-layout={props.layout ?? \"grid\"}\n      data-size={props.size ?? \"md\"}\n      data-action-visibility={props.actionVisibility ?? \"always\"}\n    >\n      <For each={props.items}>\n        {(item) => (\n          <div class=\"k2b-description-list__item\">\n            <dt>{item.term}</dt>\n            <dd>{item.description}</dd>\n            <Show when={item.action}>{(action) => <div class=\"k2b-description-list__action\">{action()}</div>}</Show>\n          </div>\n        )}\n      </For>\n    </dl>\n  );\n}\n\nexport default DescriptionList;\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,GAAG,EAAY,IAAI,QAAQ,UAAU;AAiB9C;AACA,OAAO,SAAS,eAAe,CAAC,KAA2B,EAAe;EACxE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;EAClE;IAAA;IAAA,iCAQK,GAAG;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,KAAK;MAAA;MAAA,UAClB,IAAI;QAAA;UAAA;UAAA;UAAA;UAAA;QAAA,sBAEG,IAAI,CAAC,IAAI;QAAA,sBACT,IAAI,CAAC,WAAW;QAAA,kCACpB,IAAI;UAAA,IAAC,IAAI;YAAA,OAAE,IAAI,CAAC,MAAM;UAAA;UAAA,UAAI,MAAM;YAAA;YAAA,gBAAgD,MAAM;YAAA;UAAA;QAAS;QAAA;MAAA;IAEnG;IAAA;MAAA,UAbI,wBAAwB,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;QAAA,OACpC,OAAO,CAAC,CAAC;QAAA,OACV,KAAK,CAAC,MAAM,IAAI,MAAM;QAAA,OACxB,KAAK,CAAC,IAAI,IAAI,IAAI;QAAA,OACL,KAAK,CAAC,gBAAgB,IAAI,QAAQ;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;IAAA;EAAA;AAahE;AAEA,eAAe,eAAe","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/DescriptionList.tsx"],"sourcesContent":["import { For, type JSX, Show } from \"solid-js\";\n\nexport type DescriptionListItem = {\n  term: JSX.Element;\n  description: JSX.Element;\n  action?: JSX.Element;\n};\n\nexport type DescriptionListProps = {\n  items: readonly DescriptionListItem[];\n  columns?: 1 | 2 | 3;\n  layout?: \"grid\" | \"rows\" | \"compact\";\n  size?: \"sm\" | \"md\";\n  actionVisibility?: \"always\" | \"progressive\";\n  /**\n   * Joins each term to its right-aligned value with a dotted leader, for `rows` or `compact` lists that must span a\n   * very wide container. A fallback, never the default: first keep rows within the row measure.\n   */\n  leader?: \"dotted\";\n  class?: string;\n};\n\n/** Semantic key-value content with predictable responsive density. */\nexport function DescriptionList(props: DescriptionListProps): JSX.Element {\n  const columns = () => Math.max(1, Math.min(3, props.columns ?? 1));\n  return (\n    <dl\n      class={`k2b-description-list ${props.class ?? \"\"}`}\n      data-columns={columns()}\n      data-layout={props.layout ?? \"grid\"}\n      data-size={props.size ?? \"md\"}\n      data-action-visibility={props.actionVisibility ?? \"always\"}\n      data-leader={props.leader}\n    >\n      <For each={props.items}>\n        {(item) => (\n          <div class=\"k2b-description-list__item\">\n            <dt>{item.term}</dt>\n            <dd>{item.description}</dd>\n            <Show when={item.action}>{(action) => <div class=\"k2b-description-list__action\">{action()}</div>}</Show>\n          </div>\n        )}\n      </For>\n    </dl>\n  );\n}\n\nexport default DescriptionList;\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,GAAG,EAAY,IAAI,QAAQ,UAAU;AAsB9C;AACA,OAAO,SAAS,eAAe,CAAC,KAA2B,EAAe;EACxE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;EAClE;IAAA;IAAA,iCASK,GAAG;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,KAAK;MAAA;MAAA,UAClB,IAAI;QAAA;UAAA;UAAA;UAAA;UAAA;QAAA,sBAEG,IAAI,CAAC,IAAI;QAAA,sBACT,IAAI,CAAC,WAAW;QAAA,kCACpB,IAAI;UAAA,IAAC,IAAI;YAAA,OAAE,IAAI,CAAC,MAAM;UAAA;UAAA,UAAI,MAAM;YAAA;YAAA,gBAAgD,MAAM;YAAA;UAAA;QAAS;QAAA;MAAA;IAEnG;IAAA;MAAA,UAdI,wBAAwB,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;QAAA,OACpC,OAAO,CAAC,CAAC;QAAA,OACV,KAAK,CAAC,MAAM,IAAI,MAAM;QAAA,OACxB,KAAK,CAAC,IAAI,IAAI,IAAI;QAAA,OACL,KAAK,CAAC,gBAAgB,IAAI,QAAQ;QAAA,OAC7C,KAAK,CAAC,MAAM;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;IAAA;EAAA;AAa/B;AAEA,eAAe,eAAe","ignoreList":[]}

package/dist/browser/surfaces/ProgressBar.js

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

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

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