@apliteni/apliteni-ui 0.30.0 → 0.32.0

package/react/dist/index.js

@@ -83,6 +83,49 @@ function Card({ title, sub, level = 2, children }) {
   ] });
 }
 
+// src/primitives/StatBand.tsx
+import { useId } from "react";
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var GLYPH = { up: "arrowUp", down: "arrowDown", flat: "minus" };
+var directionOf = (text) => {
+  const t = text.trim();
+  return /^[-−–(]/.test(t) ? "down" : /^\+/.test(t) ? "up" : "flat";
+};
+var hasChange = (d) => !!d && d.value != null && d.value !== "";
+function Delta({ delta, basisId }) {
+  if (!hasChange(delta)) {
+    return /* @__PURE__ */ jsx5("dd", { className: "ui-stat__delta ui-stat__delta--none", children: delta.none || "No earlier figure" });
+  }
+  const dir = delta.direction && GLYPH[delta.direction] ? delta.direction : directionOf(delta.value);
+  return /* @__PURE__ */ jsxs3("dd", { className: "ui-stat__delta", "aria-describedby": !delta.basis && basisId ? basisId : void 0, children: [
+    /* @__PURE__ */ jsx5(Icon, { name: GLYPH[dir] }),
+    /* @__PURE__ */ jsx5("span", { className: "ui-stat__change", children: delta.value }),
+    delta.basis ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsx5("span", { className: "ui-stat__basis", children: delta.basis })
+    ] }) : null
+  ] });
+}
+function StatBand({ stats, variant = "tiles", basis, label, id }) {
+  const auto = useId();
+  const v = ["band", "tiles", "open"].includes(variant) ? variant : "tiles";
+  const basisId = basis ? `${id || auto}-basis` : void 0;
+  const root = ["ui-stats", `ui-stats--${v}`, v === "band" && "ui-card"].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs3("div", { className: root, role: label ? "group" : void 0, "aria-label": label || void 0, children: [
+    basis ? /* @__PURE__ */ jsx5("p", { className: "ui-stats__basis", id: basisId, children: basis }) : null,
+    /* @__PURE__ */ jsx5("dl", { className: "ui-stats__list", children: stats.map((s, i) => {
+      const tone = hasChange(s.delta) && (s.delta.tone === "good" || s.delta.tone === "bad") ? s.delta.tone : "";
+      const cls = ["ui-stat", tone && `ui-stat--${tone}`, v === "tiles" && "ui-card ui-card--pad-sm"].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsxs3("div", { className: cls, children: [
+        /* @__PURE__ */ jsx5("dt", { className: "ui-stat__label", children: s.label }),
+        /* @__PURE__ */ jsx5("dd", { className: "ui-stat__value", children: s.value }),
+        s.delta ? /* @__PURE__ */ jsx5(Delta, { delta: s.delta, basisId }) : null,
+        s.trend ? /* @__PURE__ */ jsx5("dd", { className: "ui-stat__trend", children: s.trend }) : null
+      ] }, `${s.label}-${i}`);
+    }) })
+  ] });
+}
+
 // src/Modal.tsx
 import { useRef as useRef2 } from "react";
 import { createPortal } from "react-dom";
@@ -297,7 +340,7 @@ function useDialog(active, { root, panel, body }, onClose) {
 }
 
 // src/Modal.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function Modal({ open, title, onClose, footer, children }) {
   const root = useRef2(null);
   const panel = useRef2(null);
@@ -306,22 +349,22 @@ function Modal({ open, title, onClose, footer, children }) {
   const scope = useDialog(shown, { root, panel, body }, onClose);
   if (!mounted) return null;
   return createPortal(
-    /* @__PURE__ */ jsx5(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsx5("div", { className: shown ? "rx-scrim is-open" : "rx-scrim", ref: root, onMouseDown: dismissOnScrim(onClose), children: /* @__PURE__ */ jsxs3("div", { className: "rx-modal", role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, ref: panel, children: [
-      /* @__PURE__ */ jsxs3("div", { className: "rx-modal__head", children: [
-        /* @__PURE__ */ jsx5("div", { className: "rx-modal__title", children: title }),
-        /* @__PURE__ */ jsx5(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: "x", "aria-label": "Close", onClick: onClose })
+    /* @__PURE__ */ jsx6(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsx6("div", { className: shown ? "rx-scrim is-open" : "rx-scrim", ref: root, onMouseDown: dismissOnScrim(onClose), children: /* @__PURE__ */ jsxs4("div", { className: "rx-modal", role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, ref: panel, children: [
+      /* @__PURE__ */ jsxs4("div", { className: "rx-modal__head", children: [
+        /* @__PURE__ */ jsx6("div", { className: "rx-modal__title", children: title }),
+        /* @__PURE__ */ jsx6(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: "x", "aria-label": "Close", onClick: onClose })
       ] }),
-      /* @__PURE__ */ jsx5("div", { className: "rx-modal__body", ref: body, children }),
-      footer && /* @__PURE__ */ jsx5("div", { className: "rx-modal__foot", children: footer })
+      /* @__PURE__ */ jsx6("div", { className: "rx-modal__body", ref: body, children }),
+      footer && /* @__PURE__ */ jsx6("div", { className: "rx-modal__foot", children: footer })
     ] }) }) }),
     document.body
   );
 }
 
 // src/Drawer.tsx
-import { useId, useRef as useRef3 } from "react";
+import { useId as useId2, useRef as useRef3 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function Drawer({
   open,
   title,
@@ -335,15 +378,15 @@ function Drawer({
   const root = useRef3(null);
   const panel = useRef3(null);
   const body = useRef3(null);
-  const titleId = useId();
+  const titleId = useId2();
   const { mounted, shown } = usePresence(open, root, panel);
   const scope = useDialog(shown, { root, panel, body }, onClose);
   if (!mounted) return null;
   const cls = ["ui-drawer", `ui-drawer--${side}`, `ui-drawer--${size}`, shown && "is-open"].filter(Boolean).join(" ");
   return createPortal2(
-    /* @__PURE__ */ jsx6(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs4("div", { className: cls, ref: root, children: [
-      /* @__PURE__ */ jsx6("div", { className: "ui-drawer__scrim", onMouseDown: dismissOnScrim(onClose) }),
-      /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsx7(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs5("div", { className: cls, ref: root, children: [
+      /* @__PURE__ */ jsx7("div", { className: "ui-drawer__scrim", onMouseDown: dismissOnScrim(onClose) }),
+      /* @__PURE__ */ jsxs5(
         "aside",
         {
           className: "ui-drawer__panel",
@@ -353,12 +396,12 @@ function Drawer({
           tabIndex: -1,
           ref: panel,
           children: [
-            /* @__PURE__ */ jsxs4("header", { className: "ui-drawer__header", children: [
-              /* @__PURE__ */ jsx6("h2", { className: "ui-drawer__title", id: titleId, children: title }),
-              /* @__PURE__ */ jsx6("button", { type: "button", className: "ui-drawer__close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx6(Icon, { name: "x" }) })
+            /* @__PURE__ */ jsxs5("header", { className: "ui-drawer__header", children: [
+              /* @__PURE__ */ jsx7("h2", { className: "ui-drawer__title", id: titleId, children: title }),
+              /* @__PURE__ */ jsx7("button", { type: "button", className: "ui-drawer__close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx7(Icon, { name: "x" }) })
             ] }),
-            /* @__PURE__ */ jsx6("div", { className: "ui-drawer__body", ref: body, children }),
-            footer && /* @__PURE__ */ jsx6("footer", { className: "ui-drawer__footer", children: footer })
+            /* @__PURE__ */ jsx7("div", { className: "ui-drawer__body", ref: body, children }),
+            footer && /* @__PURE__ */ jsx7("footer", { className: "ui-drawer__footer", children: footer })
           ]
         }
       )
@@ -368,12 +411,12 @@ function Drawer({
 }
 
 // src/CommandPalette.tsx
-import { useCallback, useEffect as useEffect2, useId as useId2, useMemo, useRef as useRef4, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect2, useId as useId3, useMemo, useRef as useRef4, useState as useState2 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { rankGroups, icon as icon2 } from "@apliteni/apliteni-ui";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var cx2 = (...a) => a.filter(Boolean).join(" ");
-var Glyph = ({ name, className }) => /* @__PURE__ */ jsx7("span", { className, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon2(name) } });
+var Glyph = ({ name, className }) => /* @__PURE__ */ jsx8("span", { className, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon2(name) } });
 var keysOf = (shortcut) => shortcut == null ? [] : Array.isArray(shortcut) ? shortcut : [shortcut];
 function CommandPalette({
   open,
@@ -388,7 +431,7 @@ function CommandPalette({
   rank = true,
   onQueryChange
 }) {
-  const uid = useId2().replace(/:/g, "");
+  const uid = useId3().replace(/:/g, "");
   const root = useRef4(null);
   const panel = useRef4(null);
   const search = useRef4(null);
@@ -438,9 +481,9 @@ function CommandPalette({
   const listId = `${uid}-list`;
   let n = 0;
   return createPortal3(
-    /* @__PURE__ */ jsx7(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs5("div", { className: cx2("ui-cmdk", density === "roomy" && "ui-cmdk--roomy", "is-open"), ref: root, children: [
-      /* @__PURE__ */ jsx7("div", { className: "ui-cmdk__scrim", onMouseDown: dismissOnScrim(onClose) }),
-      /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsx8(DialogScope.Provider, { value: scope, children: /* @__PURE__ */ jsxs6("div", { className: cx2("ui-cmdk", density === "roomy" && "ui-cmdk--roomy", "is-open"), ref: root, children: [
+      /* @__PURE__ */ jsx8("div", { className: "ui-cmdk__scrim", onMouseDown: dismissOnScrim(onClose) }),
+      /* @__PURE__ */ jsxs6(
         "div",
         {
           className: "ui-cmdk__panel",
@@ -451,9 +494,9 @@ function CommandPalette({
           ref: panel,
           onKeyDown,
           children: [
-            /* @__PURE__ */ jsxs5("div", { className: "ui-cmdk__search", ref: search, children: [
-              /* @__PURE__ */ jsx7(Glyph, { name: "search", className: "ui-cmdk__search-ic" }),
-              /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsxs6("div", { className: "ui-cmdk__search", ref: search, children: [
+              /* @__PURE__ */ jsx8(Glyph, { name: "search", className: "ui-cmdk__search-ic" }),
+              /* @__PURE__ */ jsx8(
                 "input",
                 {
                   className: "ui-cmdk__input",
@@ -475,19 +518,19 @@ function CommandPalette({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx7("div", { className: "ui-cmdk__list", id: listId, role: "listbox", "aria-label": `${label} results`, children: shown.map((group, gi) => /* @__PURE__ */ jsxs5(
+            /* @__PURE__ */ jsx8("div", { className: "ui-cmdk__list", id: listId, role: "listbox", "aria-label": `${label} results`, children: shown.map((group, gi) => /* @__PURE__ */ jsxs6(
               "div",
               {
                 className: "ui-cmdk__group",
                 role: "group",
                 "aria-labelledby": group.label ? `${uid}-g${gi}` : void 0,
                 children: [
-                  group.label && /* @__PURE__ */ jsx7("div", { className: "ui-cmdk__group-head", id: `${uid}-g${gi}`, children: group.label }),
+                  group.label && /* @__PURE__ */ jsx8("div", { className: "ui-cmdk__group-head", id: `${uid}-g${gi}`, children: group.label }),
                   group.items.map((item) => {
                     const disabled = isDisabled(item);
                     const id = `${uid}-o${n++}`;
                     const on = item === active;
-                    return /* @__PURE__ */ jsxs5(
+                    return /* @__PURE__ */ jsxs6(
                       "div",
                       {
                         id,
@@ -507,13 +550,13 @@ function CommandPalette({
                         },
                         onClick: (e) => run(item, e.metaKey || e.ctrlKey),
                         children: [
-                          item.icon && /* @__PURE__ */ jsx7(Glyph, { name: item.icon, className: "ui-cmdk__ic" }),
-                          /* @__PURE__ */ jsxs5("span", { className: "ui-cmdk__main", children: [
-                            /* @__PURE__ */ jsx7("span", { className: "ui-cmdk__label", children: item.label }),
-                            item.description && /* @__PURE__ */ jsx7("span", { className: "ui-cmdk__desc", children: item.description })
+                          item.icon && /* @__PURE__ */ jsx8(Glyph, { name: item.icon, className: "ui-cmdk__ic" }),
+                          /* @__PURE__ */ jsxs6("span", { className: "ui-cmdk__main", children: [
+                            /* @__PURE__ */ jsx8("span", { className: "ui-cmdk__label", children: item.label }),
+                            item.description && /* @__PURE__ */ jsx8("span", { className: "ui-cmdk__desc", children: item.description })
                           ] }),
-                          item.badge && /* @__PURE__ */ jsx7("span", { className: "ui-cmdk__badge", children: item.badge }),
-                          keysOf(item.shortcut).length > 0 && /* @__PURE__ */ jsx7("span", { className: "ui-cmdk__keys", "aria-hidden": "true", children: keysOf(item.shortcut).map((k) => /* @__PURE__ */ jsx7("kbd", { className: "ui-cmdk__key", children: k }, k)) })
+                          item.badge && /* @__PURE__ */ jsx8("span", { className: "ui-cmdk__badge", children: item.badge }),
+                          keysOf(item.shortcut).length > 0 && /* @__PURE__ */ jsx8("span", { className: "ui-cmdk__keys", "aria-hidden": "true", children: keysOf(item.shortcut).map((k) => /* @__PURE__ */ jsx8("kbd", { className: "ui-cmdk__key", children: k }, k)) })
                         ]
                       },
                       item.id
@@ -523,20 +566,20 @@ function CommandPalette({
               },
               group.label ?? `g${gi}`
             )) }),
-            /* @__PURE__ */ jsx7("p", { className: "ui-cmdk__empty", hidden: countOf(shown) > 0, children: empty }),
-            /* @__PURE__ */ jsx7("p", { className: "ui-sr", role: "status", "aria-live": "polite", children: countOf(shown) === 0 ? "No results" : `${countOf(shown)} result${countOf(shown) === 1 ? "" : "s"}` }),
-            hint && /* @__PURE__ */ jsxs5("div", { className: "ui-cmdk__foot", "aria-hidden": "true", children: [
-              /* @__PURE__ */ jsxs5("span", { children: [
-                /* @__PURE__ */ jsx7("kbd", { className: "ui-cmdk__key", children: "\u2191" }),
-                /* @__PURE__ */ jsx7("kbd", { className: "ui-cmdk__key", children: "\u2193" }),
+            /* @__PURE__ */ jsx8("p", { className: "ui-cmdk__empty", hidden: countOf(shown) > 0, children: empty }),
+            /* @__PURE__ */ jsx8("p", { className: "ui-sr", role: "status", "aria-live": "polite", children: countOf(shown) === 0 ? "No results" : `${countOf(shown)} result${countOf(shown) === 1 ? "" : "s"}` }),
+            hint && /* @__PURE__ */ jsxs6("div", { className: "ui-cmdk__foot", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxs6("span", { children: [
+                /* @__PURE__ */ jsx8("kbd", { className: "ui-cmdk__key", children: "\u2191" }),
+                /* @__PURE__ */ jsx8("kbd", { className: "ui-cmdk__key", children: "\u2193" }),
                 " move"
               ] }),
-              /* @__PURE__ */ jsxs5("span", { children: [
-                /* @__PURE__ */ jsx7("kbd", { className: "ui-cmdk__key", children: "\u21B5" }),
+              /* @__PURE__ */ jsxs6("span", { children: [
+                /* @__PURE__ */ jsx8("kbd", { className: "ui-cmdk__key", children: "\u21B5" }),
                 " run"
               ] }),
-              /* @__PURE__ */ jsxs5("span", { children: [
-                /* @__PURE__ */ jsx7("kbd", { className: "ui-cmdk__key", children: "esc" }),
+              /* @__PURE__ */ jsxs6("span", { children: [
+                /* @__PURE__ */ jsx8("kbd", { className: "ui-cmdk__key", children: "esc" }),
                 " close"
               ] })
             ] })
@@ -565,9 +608,9 @@ import { useMemo as useMemo2, useState as useState4 } from "react";
 import { DEFAULT_PAGE_SIZE as DEFAULT_PAGE_SIZE2 } from "@apliteni/apliteni-ui";
 
 // src/Pagination.tsx
-import { useEffect as useEffect3, useId as useId3, useRef as useRef5, useState as useState3 } from "react";
+import { useEffect as useEffect3, useId as useId4, useRef as useRef5, useState as useState3 } from "react";
 import { DEFAULT_PAGE_SIZE } from "@apliteni/apliteni-ui";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var GHOST_SM = "ui-btn ui-btn--ghost ui-btn--sm";
 var VARIANTS = ["steps", "numbered", "jump"];
 var cx3 = (...a) => a.filter(Boolean).join(" ");
@@ -609,7 +652,7 @@ function Pagination({
   onPageChange,
   onPageSizeChange
 }) {
-  const auto = useId3();
+  const auto = useId4();
   const [draft, setDraft] = useState3("");
   const [drafting, setDrafting] = useState3(false);
   const nav = useRef5(null);
@@ -659,7 +702,7 @@ function Pagination({
   const step = (label_, target, disabled) => (
     // A control at an end is disabled and stays where it is: removing it slides
     // the next control under a pointer already travelling toward it.
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -698,14 +741,14 @@ function Pagination({
   if (single) {
     steps = null;
   } else if (!counted) {
-    steps = /* @__PURE__ */ jsxs6("div", { className: "ui-pager__steps", children: [
+    steps = /* @__PURE__ */ jsxs7("div", { className: "ui-pager__steps", children: [
       step("Prev", Math.max(1, at - 1), atStart),
       step("Next", at + 1, !hasMore)
     ] });
   } else {
     let middle = null;
     if (kind === "numbered") {
-      middle = slotsFor(at, last).map((n, i) => n == null ? /* @__PURE__ */ jsx8("span", { className: "ui-pager__gap", "aria-hidden": "true", children: "\u2026" }, `gap${i}`) : /* @__PURE__ */ jsx8(
+      middle = slotsFor(at, last).map((n, i) => n == null ? /* @__PURE__ */ jsx9("span", { className: "ui-pager__gap", "aria-hidden": "true", children: "\u2026" }, `gap${i}`) : /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
@@ -720,9 +763,9 @@ function Pagination({
         n
       ));
     } else if (kind === "jump") {
-      middle = /* @__PURE__ */ jsxs6("span", { className: "ui-pager__jump", children: [
-        /* @__PURE__ */ jsx8("label", { htmlFor: `${uid}-jump`, children: "Page" }),
-        /* @__PURE__ */ jsx8(
+      middle = /* @__PURE__ */ jsxs7("span", { className: "ui-pager__jump", children: [
+        /* @__PURE__ */ jsx9("label", { htmlFor: `${uid}-jump`, children: "Page" }),
+        /* @__PURE__ */ jsx9(
           "input",
           {
             className: "ui-input ui-pager__jump-input",
@@ -745,13 +788,13 @@ function Pagination({
             }
           }
         ),
-        /* @__PURE__ */ jsxs6("span", { className: "ui-pager__jump-of", children: [
+        /* @__PURE__ */ jsxs7("span", { className: "ui-pager__jump-of", children: [
           "of ",
           fmt(last)
         ] })
       ] });
     }
-    steps = /* @__PURE__ */ jsxs6("div", { className: "ui-pager__steps", children: [
+    steps = /* @__PURE__ */ jsxs7("div", { className: "ui-pager__steps", children: [
       ends ? step("First", 1, atStart) : null,
       step("Prev", Math.max(1, at - 1), atStart),
       middle,
@@ -759,7 +802,7 @@ function Pagination({
       ends ? step("Last", last, atEnd) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "nav",
     {
       ref: nav,
@@ -767,10 +810,10 @@ function Pagination({
       "aria-label": label,
       "aria-busy": loading ? true : void 0,
       children: [
-        /* @__PURE__ */ jsx8("p", { className: "ui-pager__status", "aria-live": "polite", "aria-atomic": "true", children: status }),
-        sizes.length ? /* @__PURE__ */ jsxs6("div", { className: "ui-pager__size", children: [
-          /* @__PURE__ */ jsx8("label", { className: "ui-pager__size-label", htmlFor: `${uid}-size`, children: "Rows" }),
-          /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9("p", { className: "ui-pager__status", "aria-live": "polite", "aria-atomic": "true", children: status }),
+        sizes.length ? /* @__PURE__ */ jsxs7("div", { className: "ui-pager__size", children: [
+          /* @__PURE__ */ jsx9("label", { className: "ui-pager__size-label", htmlFor: `${uid}-size`, children: "Rows" }),
+          /* @__PURE__ */ jsx9(
             "select",
             {
               className: "ui-select ui-pager__size-select",
@@ -778,7 +821,7 @@ function Pagination({
               disabled: loading,
               value: size,
               onChange: (e) => onPageSizeChange?.(Number(e.target.value)),
-              children: sizes.map((s) => /* @__PURE__ */ jsx8("option", { value: s, children: fmt(s) }, s))
+              children: sizes.map((s) => /* @__PURE__ */ jsx9("option", { value: s, children: fmt(s) }, s))
             }
           )
         ] }) : null,
@@ -789,7 +832,7 @@ function Pagination({
 }
 
 // src/DataTable.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var NO_SORT = { key: void 0, dir: -1 };
 function sortTableRows(rows, sort) {
   if (sort.key === void 0) return [...rows];
@@ -852,15 +895,15 @@ function DataTable({
   };
   const caret = (k) => sort.key === k ? sort.dir === 1 ? " \u25B2" : " \u25BC" : " \u2195";
   const pageAllOn = selectable && slice.length > 0 && slice.every((r) => selected.has(r.name));
-  return /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsxs8(
       "table",
       {
         className: "ui-table ui-table--hover ui-table--zebra",
         "aria-busy": loading || void 0,
         children: [
-          /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsxs7("tr", { children: [
-            selectable ? /* @__PURE__ */ jsx9("th", { scope: "col", children: /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsxs8("tr", { children: [
+            selectable ? /* @__PURE__ */ jsx10("th", { scope: "col", children: /* @__PURE__ */ jsx10(
               "input",
               {
                 type: "checkbox",
@@ -873,23 +916,23 @@ function DataTable({
               // The sort control is a real <button> inside the header cell. It used to be
               // role="button" ON the <th>, which threw away the columnheader role and put
               // aria-sort on a role that forbids it.
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "th",
                 {
                   scope: "col",
                   className: [c.num && "ui-table__num", c.sortable && "rx-sortable"].filter(Boolean).join(" "),
                   "aria-sort": sort.key === c.key ? sort.dir === 1 ? "ascending" : "descending" : c.sortable && sortIsKnown ? "none" : void 0,
-                  children: c.sortable ? /* @__PURE__ */ jsxs7("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
+                  children: c.sortable ? /* @__PURE__ */ jsxs8("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
                     c.label,
-                    /* @__PURE__ */ jsx9("span", { className: "rx-caret", "aria-hidden": "true", children: caret(c.key) })
+                    /* @__PURE__ */ jsx10("span", { className: "rx-caret", "aria-hidden": "true", children: caret(c.key) })
                   ] }) : c.label
                 },
                 c.key
               )
             ))
           ] }) }),
-          /* @__PURE__ */ jsx9("tbody", { children: slice.map((r) => /* @__PURE__ */ jsxs7("tr", { children: [
-            selectable ? /* @__PURE__ */ jsx9("td", { children: /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10("tbody", { children: slice.map((r) => /* @__PURE__ */ jsxs8("tr", { children: [
+            selectable ? /* @__PURE__ */ jsx10("td", { children: /* @__PURE__ */ jsx10(
               "input",
               {
                 type: "checkbox",
@@ -898,12 +941,12 @@ function DataTable({
                 onChange: () => onToggle(r.name)
               }
             ) }) : null,
-            columns.map((c) => /* @__PURE__ */ jsx9("td", { className: c.num ? "ui-table__num" : void 0, children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
+            columns.map((c) => /* @__PURE__ */ jsx10("td", { className: c.num ? "ui-table__num" : void 0, children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
           ] }, r.name)) })
         ]
       }
     ),
-    pager ? /* @__PURE__ */ jsx9(
+    pager ? /* @__PURE__ */ jsx10(
       Pagination,
       {
         page,
@@ -928,7 +971,7 @@ function DataTable({
 import { PAGE_SIZES as KIT_PAGE_SIZES, DEFAULT_PAGE_SIZE as KIT_DEFAULT_PAGE_SIZE } from "@apliteni/apliteni-ui";
 
 // src/Loading.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var cx4 = (...a) => a.filter(Boolean).join(" ");
 function Skeleton({ lines = 3, width, height, radius, className }) {
   const widths = Array.isArray(lines) ? lines : null;
@@ -938,19 +981,19 @@ function Skeleton({ lines = 3, width, height, radius, className }) {
     if (!w && !height && !radius) return void 0;
     return { ...w && { width: w }, ...height && { height }, ...radius && { borderRadius: radius } };
   };
-  return /* @__PURE__ */ jsx10("div", { className: cx4("ui-skel", className), "aria-hidden": "true", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx10("span", { className: "ui-skel__bar m-skeleton", style: styleFor(i) }, i)) });
+  return /* @__PURE__ */ jsx11("div", { className: cx4("ui-skel", className), "aria-hidden": "true", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx11("span", { className: "ui-skel__bar m-skeleton", style: styleFor(i) }, i)) });
 }
 function SkeletonTable({ rows = 5, cols = 4, head = true }) {
-  const cells = Array.from({ length: Math.max(1, cols) }, (_, i) => /* @__PURE__ */ jsx10("span", { className: "ui-skel__bar m-skeleton" }, i));
-  return /* @__PURE__ */ jsxs8(
+  const cells = Array.from({ length: Math.max(1, cols) }, (_, i) => /* @__PURE__ */ jsx11("span", { className: "ui-skel__bar m-skeleton" }, i));
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: "ui-skel ui-skel--table",
       style: { "--skel-cols": Math.max(1, cols) },
       "aria-hidden": "true",
       children: [
-        head && /* @__PURE__ */ jsx10("div", { className: "ui-skel__row ui-skel__row--head", children: cells }),
-        Array.from({ length: Math.max(1, rows) }, (_, i) => /* @__PURE__ */ jsx10("div", { className: "ui-skel__row", children: cells }, i))
+        head && /* @__PURE__ */ jsx11("div", { className: "ui-skel__row ui-skel__row--head", children: cells }),
+        Array.from({ length: Math.max(1, rows) }, (_, i) => /* @__PURE__ */ jsx11("div", { className: "ui-skel__row", children: cells }, i))
       ]
     }
   );
@@ -963,7 +1006,7 @@ function BusyRegion({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: cx4("ui-busy", className),
@@ -971,8 +1014,8 @@ function BusyRegion({
       "aria-live": "polite",
       "aria-busy": busy,
       children: [
-        /* @__PURE__ */ jsx10("span", { className: "ui-sr", children: busy ? label : message }),
-        /* @__PURE__ */ jsx10("div", { className: "ui-busy__body", children: busy ? placeholder ?? /* @__PURE__ */ jsx10(Skeleton, { lines: 3 }) : children })
+        /* @__PURE__ */ jsx11("span", { className: "ui-sr", children: busy ? label : message }),
+        /* @__PURE__ */ jsx11("div", { className: "ui-busy__body", children: busy ? placeholder ?? /* @__PURE__ */ jsx11(Skeleton, { lines: 3 }) : children })
       ]
     }
   );
@@ -985,15 +1028,15 @@ function Denied({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs8("div", { className: cx4("ui-denied", className), children: [
-    /* @__PURE__ */ jsx10("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx10(Icon, { name: icon3 }) }),
-    /* @__PURE__ */ jsx10("div", { className: "ui-denied__title", children: title }),
-    sub && /* @__PURE__ */ jsx10("div", { className: "ui-denied__sub", children: sub }),
-    need && /* @__PURE__ */ jsxs8("div", { className: "ui-denied__need", children: [
+  return /* @__PURE__ */ jsxs9("div", { className: cx4("ui-denied", className), children: [
+    /* @__PURE__ */ jsx11("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx11(Icon, { name: icon3 }) }),
+    /* @__PURE__ */ jsx11("div", { className: "ui-denied__title", children: title }),
+    sub && /* @__PURE__ */ jsx11("div", { className: "ui-denied__sub", children: sub }),
+    need && /* @__PURE__ */ jsxs9("div", { className: "ui-denied__need", children: [
       "Needs ",
-      /* @__PURE__ */ jsx10("code", { className: "ui-code", children: need })
+      /* @__PURE__ */ jsx11("code", { className: "ui-code", children: need })
     ] }),
-    children && /* @__PURE__ */ jsx10("div", { className: "ui-denied__actions", children })
+    children && /* @__PURE__ */ jsx11("div", { className: "ui-denied__actions", children })
   ] });
 }
 
@@ -1016,5 +1059,6 @@ export {
   Pagination,
   Skeleton,
   SkeletonTable,
+  StatBand,
   sortTableRows
 };

package/src/components/index.js

@@ -2,9 +2,9 @@
 // viz/ server-render idiom so the portal can adopt them with no framework.
 import { icon } from '../assets/icons.js';
 import { illo } from '../assets/illustrations.js';
-
+const HTML_ENTITIES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' };
 const cx = (...a) => a.filter(Boolean).join(' ');
-export const esc = (s) => String(s == null ? '' : s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+export const esc = (s) => String(s == null ? '' : s).replace(/[&<>"]/g, (c) => HTML_ENTITIES[c]);
 
 // ---- Button --------------------------------------------------------------
 // `iconSvg` is a raw leading-icon SVG string (trusted markup, not escaped) for

package/src/components/pagination.js

@@ -236,29 +236,12 @@ export function pagination({
 }
 
 /**
- * Make a rendered pager work.
+ * Make a rendered pager work: delegate the steps, the size control and the jump
+ * input from `root`, so a pager re-rendered underneath stays wired.
  *
- * Every control the factory draws is inert markup until this runs: the steps
- * carry `data-page` and nothing reads it, the size control is a `<select>` with
- * no handler, and the jump input is an `<input>` with no handler. Shipping the
- * `jump` variant without this meant shipping the one control that reaches an
- * arbitrary page and having it do nothing.
+ * @returns {() => void} a function that removes the listeners.
  *
- * It reads the class contract rather than hooks of its own — `.ui-pager__step`,
- * `.ui-pager__page`, `.ui-pager__size-select`, `.ui-pager__jump-input` — so the
- * markup is exactly what `pagination()` already returns and the React component
- * is still class-for-class identical to it.
- *
- *   const pager = wirePagination(root, {
- *     onPage: (page) => load({ page }),
- *     onPageSize: (size) => load({ page: 1, size }),
- *   });
- *
- * Listeners are delegated from `root`, so a pager re-rendered underneath stays
- * wired. Returns a function that removes them.
- *
- * A step rendered as an `<a href>` is left alone: it is a link, the browser owns
- * it, and calling it back as well would navigate twice.
+ * why: CONTRIBUTING.md#pagination-event-wiring
  */
 export function wirePagination(root = document, { onPage, onPageSize } = {}) {
   const scope = typeof root === 'string' ? document.querySelector(root) : root;
@@ -321,18 +304,13 @@ export function wirePagination(root = document, { onPage, onPageSize } = {}) {
 }
 
 /**
- * Rewrite a pager's row range, in place. THIS is the announcement.
+ * Rewrite a pager's row range in place, so the live region it already holds is
+ * the thing that announces — as `setBusy()` does.
  *
- * The factory returns a whole `<nav>`, so the obvious way to show a new page is
- * to replace it — which inserts a brand-new live region that already contains its
- * text, and several screen readers say nothing at all about a region that arrived
- * with its content. The kit has met this before and answered it the same way:
- * `setBusy()` rewrites the line its region already holds rather than inserting a
- * new one. why: docs/specification.md#pending-and-denied-states
+ * @returns {Element|null} the status element, or null when there is nothing to
+ * update — safe against a torn-down view.
  *
- * So a consumer re-rendering a pager should hand the new range here instead of
- * relying on the replacement to speak. Returns the status element, or null when
- * there is nothing to update — safe against a torn-down view.
+ * why: CONTRIBUTING.md#pagination-status-updates
  */
 export function setPagerStatus(root, text) {
   const el = typeof root === 'string' ? document.querySelector(root) : root;