@smwb/ui-react 2.7.0 → 2.8.0

package/dist/components/dataDisplay/lazyImage/lazyImage.js

@@ -1,45 +1,46 @@
-import { jsxs as z, jsx as u } from "react/jsx-runtime";
+import { jsxs as _, jsx as g } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/lazyImage/lazyImage.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                             */
-import { forwardRef as _, useState as d, useRef as x, useEffect as F } from "react";
-import N from "clsx";
-import { useForkRef as j } from "../../../hooks/useForkRef.js";
-const B = _(function({ src: c, alt: t, fallback: m, lazy: e = !0, aspectRatio: a, className: g, onError: n, ...p }, b) {
-  const [y, v] = d(!1), [i, l] = d(!e), f = x(null), w = j(b, f);
-  F(() => {
-    if (!e || i) return;
-    const s = f.current;
+import { forwardRef as x, useState as p, useRef as F, useEffect as N } from "react";
+import j from "clsx";
+import { useForkRef as k } from "../../../hooks/useForkRef.js";
+const C = x(function({ src: a, alt: n, fallback: m, lazy: e = !0, aspectRatio: l, className: b, onError: i, ...t }, y) {
+  var d;
+  const [w, v] = p(!1), [r, f] = p(!e), u = F(null), I = k(y, u);
+  N(() => {
+    if (!e || r) return;
+    const s = u.current;
     if (!s) return;
     if (typeof IntersectionObserver == "undefined") {
-      l(!0);
+      f(!0);
       return;
     }
-    const o = new IntersectionObserver((R) => {
-      R.some((h) => h.isIntersecting) && (l(!0), o.disconnect());
+    const c = new IntersectionObserver((h) => {
+      h.some((z) => z.isIntersecting) && (f(!0), c.disconnect());
     });
-    return o.observe(s), () => o.disconnect();
-  }, [e, i]);
-  const r = y || !c, I = (s) => {
-    v(!0), n == null || n(s);
+    return c.observe(s), () => c.disconnect();
+  }, [e, r]);
+  const o = w || !a, R = (s) => {
+    v(!0), i == null || i(s);
   };
-  return /* @__PURE__ */ z(
+  return /* @__PURE__ */ _(
     "span",
     {
-      className: N("smwb-lazy-image", g, { "smwb-lazy-image--empty": r }),
-      style: a != null ? { aspectRatio: String(a) } : void 0,
+      className: j("smwb-lazy-image", b, { "smwb-lazy-image--empty": o }),
+      style: l != null ? { aspectRatio: String(l) } : void 0,
       children: [
-        r && m ? /* @__PURE__ */ u("span", { className: "smwb-lazy-image__fallback", children: m }) : null,
-        r ? null : /* @__PURE__ */ u(
+        o && m ? /* @__PURE__ */ g("span", { className: "smwb-lazy-image__fallback", children: m }) : null,
+        o ? null : /* @__PURE__ */ g(
           "img",
           {
-            ...p,
-            ref: w,
+            ...t,
+            ref: I,
             className: "smwb-lazy-image__img",
-            src: i ? c : void 0,
-            alt: t != null ? t : "",
-            loading: e ? "lazy" : void 0,
-            decoding: "async",
-            onError: I
+            src: r ? a : void 0,
+            alt: n != null ? n : "",
+            loading: e ? "lazy" : t.loading,
+            decoding: (d = t.decoding) != null ? d : "async",
+            onError: R
           }
         )
       ]
@@ -47,7 +48,7 @@ const B = _(function({ src: c, alt: t, fallback: m, lazy: e = !0, aspectRatio: a
   );
 });
 export {
-  B as LazyImage,
-  B as default
+  C as LazyImage,
+  C as default
 };
 //# sourceMappingURL=lazyImage.js.map

package/dist/components/dataDisplay/lazyImage/lazyImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"lazyImage.js","sources":["../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface LazyImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"onError\"> {\n  /** Image URL. When absent (or after a load error) the `fallback` is shown. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Rendered in place of the image when it is missing or fails to load. */\n  fallback?: React.ReactNode;\n  /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */\n  lazy?: boolean;\n  /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `\"4 / 3\"`) to reserve space before load. */\n  aspectRatio?: string | number;\n  /** Fires on a load error (after the fallback is swapped in). */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n}\n\n/**\n * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy\n * loading — the `<img decoding=async onError=…>` + fallback dance hand-rolled in\n * every gallery, in one primitive. SSR-safe: renders the image markup on the\n * server; the IntersectionObserver only runs in an effect on the client.\n */\nexport const LazyImage = forwardRef<HTMLImageElement, LazyImageProps>(function LazyImage(\n  { src, alt, fallback, lazy = true, aspectRatio, className, onError, ...rest },\n  ref\n) {\n  const [failed, setFailed] = useState(false);\n  const [visible, setVisible] = useState(!lazy);\n  const imgRef = useRef<HTMLImageElement | null>(null);\n  const setRefs = useForkRef(ref, imgRef);\n\n  useEffect(() => {\n    if (!lazy || visible) return;\n    const el = imgRef.current;\n    if (!el) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setVisible(true);\n      return;\n    }\n    const io = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setVisible(true);\n        io.disconnect();\n      }\n    });\n    io.observe(el);\n    return () => io.disconnect();\n  }, [lazy, visible]);\n\n  const showFallback = failed || !src;\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement>): void => {\n    setFailed(true);\n    onError?.(event);\n  };\n\n  return (\n    <span\n      className={cn(\"smwb-lazy-image\", className, { \"smwb-lazy-image--empty\": showFallback })}\n      style={aspectRatio != null ? { aspectRatio: String(aspectRatio) } : undefined}\n    >\n      {showFallback && fallback ? <span className=\"smwb-lazy-image__fallback\">{fallback}</span> : null}\n      {!showFallback ? (\n        <img\n          {...rest}\n          ref={setRefs}\n          className=\"smwb-lazy-image__img\"\n          src={visible ? src : undefined}\n          alt={alt ?? \"\"}\n          loading={lazy ? \"lazy\" : undefined}\n          decoding=\"async\"\n          onError={handleError}\n        />\n      ) : null}\n    </span>\n  );\n});\n\nexport default LazyImage;\n"],"names":["LazyImage","forwardRef","src","alt","fallback","lazy","aspectRatio","className","onError","rest","ref","failed","setFailed","useState","visible","setVisible","imgRef","useRef","setRefs","useForkRef","useEffect","el","io","entries","entry","showFallback","handleError","event","jsxs","cn","jsx"],"mappings":";;;;;;AA0BO,MAAMA,IAAYC,EAA6C,SACpE,EAAE,KAAAC,GAAK,KAAAC,GAAK,UAAAC,GAAU,MAAAC,IAAO,IAAM,aAAAC,GAAa,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GACvEC,GACA;AACA,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAASC,CAAU,IAAIF,EAAS,CAACR,CAAI,GACtCW,IAASC,EAAgC,IAAI,GAC7CC,IAAUC,EAAWT,GAAKM,CAAM;AAEtC,EAAAI,EAAU,MAAM;AACd,QAAI,CAACf,KAAQS,EAAS;AACtB,UAAMO,IAAKL,EAAO;AAClB,QAAI,CAACK,EAAI;AACT,QAAI,OAAO,wBAAyB,aAAa;AAC/C,MAAAN,EAAW,EAAI;AACf;AAAA,IACF;AACA,UAAMO,IAAK,IAAI,qBAAqB,CAACC,MAAY;AAC/C,MAAIA,EAAQ,KAAK,CAACC,MAAUA,EAAM,cAAc,MAC9CT,EAAW,EAAI,GACfO,EAAG,WAAA;AAAA,IAEP,CAAC;AACD,WAAAA,EAAG,QAAQD,CAAE,GACN,MAAMC,EAAG,WAAA;AAAA,EAClB,GAAG,CAACjB,GAAMS,CAAO,CAAC;AAElB,QAAMW,IAAed,KAAU,CAACT,GAC1BwB,IAAc,CAACC,MAAwD;AAC3E,IAAAf,EAAU,EAAI,GACdJ,KAAA,QAAAA,EAAUmB;AAAA,EACZ;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,mBAAmBtB,GAAW,EAAE,0BAA0BkB,GAAc;AAAA,MACtF,OAAOnB,KAAe,OAAO,EAAE,aAAa,OAAOA,CAAW,MAAM;AAAA,MAEnE,UAAA;AAAA,QAAAmB,KAAgBrB,IAAW,gBAAA0B,EAAC,QAAA,EAAK,WAAU,6BAA6B,aAAS,IAAU;AAAA,QAC1FL,IAWE,OAVF,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGrB;AAAA,YACJ,KAAKS;AAAA,YACL,WAAU;AAAA,YACV,KAAKJ,IAAUZ,IAAM;AAAA,YACrB,KAAKC,KAAA,OAAAA,IAAO;AAAA,YACZ,SAASE,IAAO,SAAS;AAAA,YACzB,UAAS;AAAA,YACT,SAASqB;AAAA,UAAA;AAAA,QAAA;AAAA,MAET;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"lazyImage.js","sources":["../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface LazyImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"onError\"> {\n  /** Image URL. When absent (or after a load error) the `fallback` is shown. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Rendered in place of the image when it is missing or fails to load. */\n  fallback?: React.ReactNode;\n  /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */\n  lazy?: boolean;\n  /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `\"4 / 3\"`) to reserve space before load. */\n  aspectRatio?: string | number;\n  /** Fires on a load error (after the fallback is swapped in). */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n}\n\n/**\n * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy\n * loading — the `<img decoding=async onError=…>` + fallback dance hand-rolled in\n * every gallery, in one primitive. SSR-safe: renders the image markup on the\n * server; the IntersectionObserver only runs in an effect on the client.\n */\nexport const LazyImage = forwardRef<HTMLImageElement, LazyImageProps>(function LazyImage(\n  { src, alt, fallback, lazy = true, aspectRatio, className, onError, ...rest },\n  ref\n) {\n  const [failed, setFailed] = useState(false);\n  const [visible, setVisible] = useState(!lazy);\n  const imgRef = useRef<HTMLImageElement | null>(null);\n  const setRefs = useForkRef(ref, imgRef);\n\n  useEffect(() => {\n    if (!lazy || visible) return;\n    const el = imgRef.current;\n    if (!el) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setVisible(true);\n      return;\n    }\n    const io = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setVisible(true);\n        io.disconnect();\n      }\n    });\n    io.observe(el);\n    return () => io.disconnect();\n  }, [lazy, visible]);\n\n  const showFallback = failed || !src;\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement>): void => {\n    setFailed(true);\n    onError?.(event);\n  };\n\n  return (\n    <span\n      className={cn(\"smwb-lazy-image\", className, { \"smwb-lazy-image--empty\": showFallback })}\n      style={aspectRatio != null ? { aspectRatio: String(aspectRatio) } : undefined}\n    >\n      {showFallback && fallback ? <span className=\"smwb-lazy-image__fallback\">{fallback}</span> : null}\n      {!showFallback ? (\n        <img\n          {...rest}\n          ref={setRefs}\n          className=\"smwb-lazy-image__img\"\n          src={visible ? src : undefined}\n          alt={alt ?? \"\"}\n          // `lazy` wins over the caller's loading; without it, the caller's stays.\n          // decoding=\"async\" is a default: the caller's wins, and an explicit\n          // undefined keeps it.\n          loading={lazy ? \"lazy\" : rest.loading}\n          decoding={rest.decoding ?? \"async\"}\n          onError={handleError}\n        />\n      ) : null}\n    </span>\n  );\n});\n\nexport default LazyImage;\n"],"names":["LazyImage","forwardRef","src","alt","fallback","lazy","aspectRatio","className","onError","rest","ref","failed","setFailed","useState","visible","setVisible","imgRef","useRef","setRefs","useForkRef","useEffect","el","io","entries","entry","showFallback","handleError","event","jsxs","cn","jsx","_a"],"mappings":";;;;;;AA0BO,MAAMA,IAAYC,EAA6C,SACpE,EAAE,KAAAC,GAAK,KAAAC,GAAK,UAAAC,GAAU,MAAAC,IAAO,IAAM,aAAAC,GAAa,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GACvEC,GACA;;AACA,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAASC,CAAU,IAAIF,EAAS,CAACR,CAAI,GACtCW,IAASC,EAAgC,IAAI,GAC7CC,IAAUC,EAAWT,GAAKM,CAAM;AAEtC,EAAAI,EAAU,MAAM;AACd,QAAI,CAACf,KAAQS,EAAS;AACtB,UAAMO,IAAKL,EAAO;AAClB,QAAI,CAACK,EAAI;AACT,QAAI,OAAO,wBAAyB,aAAa;AAC/C,MAAAN,EAAW,EAAI;AACf;AAAA,IACF;AACA,UAAMO,IAAK,IAAI,qBAAqB,CAACC,MAAY;AAC/C,MAAIA,EAAQ,KAAK,CAACC,MAAUA,EAAM,cAAc,MAC9CT,EAAW,EAAI,GACfO,EAAG,WAAA;AAAA,IAEP,CAAC;AACD,WAAAA,EAAG,QAAQD,CAAE,GACN,MAAMC,EAAG,WAAA;AAAA,EAClB,GAAG,CAACjB,GAAMS,CAAO,CAAC;AAElB,QAAMW,IAAed,KAAU,CAACT,GAC1BwB,IAAc,CAACC,MAAwD;AAC3E,IAAAf,EAAU,EAAI,GACdJ,KAAA,QAAAA,EAAUmB;AAAA,EACZ;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,mBAAmBtB,GAAW,EAAE,0BAA0BkB,GAAc;AAAA,MACtF,OAAOnB,KAAe,OAAO,EAAE,aAAa,OAAOA,CAAW,MAAM;AAAA,MAEnE,UAAA;AAAA,QAAAmB,KAAgBrB,IAAW,gBAAA0B,EAAC,QAAA,EAAK,WAAU,6BAA6B,aAAS,IAAU;AAAA,QAC1FL,IAcE,OAbF,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGrB;AAAA,YACJ,KAAKS;AAAA,YACL,WAAU;AAAA,YACV,KAAKJ,IAAUZ,IAAM;AAAA,YACrB,KAAKC,KAAA,OAAAA,IAAO;AAAA,YAIZ,SAASE,IAAO,SAASI,EAAK;AAAA,YAC9B,WAAUsB,IAAAtB,EAAK,aAAL,OAAAsB,IAAiB;AAAA,YAC3B,SAASL;AAAA,UAAA;AAAA,QAAA;AAAA,MAET;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/components/dataDisplay/list/list.d.ts

@@ -5,6 +5,8 @@ export interface ListProps extends HTMLAttributes<HTMLUListElement> {
     dense?: boolean;
     /** Section subheader rendered before the items. */
     subheader?: ReactNode;
+    /** Test id of the root `<ul>`; `list` unless given. */
+    "data-testid"?: string;
 }
 export declare const List: import("react").ForwardRefExoticComponent<ListProps & {
     children?: ReactNode | undefined;

package/dist/components/dataDisplay/list/list.js

@@ -1,26 +1,27 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, jsx as d } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/list/list.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                   */
-import { forwardRef as a } from "react";
-import n from "clsx";
-const b = a(function({ className: t, dense: i, subheader: s, children: r, ...l }, m) {
-  return /* @__PURE__ */ o(
+import { forwardRef as n } from "react";
+import c from "clsx";
+const _ = n(function({ className: l, dense: r, subheader: t, children: e, "data-testid": m = "list", ...s }, o) {
+  var i;
+  return /* @__PURE__ */ a(
     "ul",
     {
-      ref: m,
-      "data-testid": "list",
-      role: "list",
-      className: n("smwb-list", { "smwb-list_dense": i }, t),
-      ...l,
+      ref: o,
+      "data-testid": m,
+      className: c("smwb-list", { "smwb-list_dense": r }, l),
+      ...s,
+      role: (i = s.role) != null ? i : "list",
       children: [
-        s ? /* @__PURE__ */ e("li", { className: "smwb-list__subheader", children: s }) : null,
-        r
+        t ? /* @__PURE__ */ d("li", { className: "smwb-list__subheader", children: t }) : null,
+        e
       ]
     }
   );
 });
 export {
-  b as List,
-  b as default
+  _ as List,
+  _ as default
 };
 //# sourceMappingURL=list.js.map

package/dist/components/dataDisplay/list/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../../src/components/dataDisplay/list/list.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface ListProps extends HTMLAttributes<HTMLUListElement> {\n  className?: string;\n  /** Compact vertical rhythm. */\n  dense?: boolean;\n  /** Section subheader rendered before the items. */\n  subheader?: ReactNode;\n}\n\nexport const List = forwardRef<HTMLUListElement, PropsWithChildren<ListProps>>(function List(\n  { className, dense, subheader, children, ...props },\n  ref\n) {\n  return (\n    <ul\n      ref={ref}\n      data-testid=\"list\"\n      role=\"list\"\n      className={cn(\"smwb-list\", { \"smwb-list_dense\": dense }, className)}\n      {...props}\n    >\n      {subheader ? <li className=\"smwb-list__subheader\">{subheader}</li> : null}\n      {children}\n    </ul>\n  );\n});\n\nexport default List;\n"],"names":["List","forwardRef","className","dense","subheader","children","props","ref","jsxs","cn","jsx"],"mappings":";;;;;AAaO,MAAMA,IAAOC,EAA2D,SAC7E,EAAE,WAAAC,GAAW,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAC5CC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,WAAWE,EAAG,aAAa,EAAE,mBAAmBN,EAAA,GAASD,CAAS;AAAA,MACjE,GAAGI;AAAA,MAEH,UAAA;AAAA,QAAAF,IAAY,gBAAAM,EAAC,MAAA,EAAG,WAAU,wBAAwB,aAAU,IAAQ;AAAA,QACpEL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"list.js","sources":["../../../../src/components/dataDisplay/list/list.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface ListProps extends HTMLAttributes<HTMLUListElement> {\n  className?: string;\n  /** Compact vertical rhythm. */\n  dense?: boolean;\n  /** Section subheader rendered before the items. */\n  subheader?: ReactNode;\n  /** Test id of the root `<ul>`; `list` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const List = forwardRef<HTMLUListElement, PropsWithChildren<ListProps>>(function List(\n  { className, dense, subheader, children, \"data-testid\": dataTestId = \"list\", ...props },\n  ref\n) {\n  return (\n    <ul\n      ref={ref}\n      data-testid={dataTestId}\n      className={cn(\"smwb-list\", { \"smwb-list_dense\": dense }, className)}\n      {...props}\n      // A default: the caller's own wins, and an explicit undefined keeps it.\n      role={props.role ?? \"list\"}\n    >\n      {subheader ? <li className=\"smwb-list__subheader\">{subheader}</li> : null}\n      {children}\n    </ul>\n  );\n});\n\nexport default List;\n"],"names":["List","forwardRef","className","dense","subheader","children","dataTestId","props","ref","jsxs","cn","_a","jsx"],"mappings":";;;;;AAeO,MAAMA,IAAOC,EAA2D,SAC7E,EAAE,WAAAC,GAAW,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,eAAeC,IAAa,QAAQ,GAAGC,EAAA,GAChFC,GACA;;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,eAAaF;AAAA,MACb,WAAWI,EAAG,aAAa,EAAE,mBAAmBP,EAAA,GAASD,CAAS;AAAA,MACjE,GAAGK;AAAA,MAEJ,OAAMI,IAAAJ,EAAM,SAAN,OAAAI,IAAc;AAAA,MAEnB,UAAA;AAAA,QAAAP,IAAY,gBAAAQ,EAAC,MAAA,EAAG,WAAU,wBAAwB,aAAU,IAAQ;AAAA,QACpEP;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/components/dataDisplay/meter/meter.d.ts

@@ -25,6 +25,8 @@ export interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, "role">
     color?: MeterColor;
     /** The bar only; the text stays available to assistive technology. */
     hideText?: boolean;
+    /** Test id of the root `<div>`; `meter` unless given. */
+    "data-testid"?: string;
 }
 /** The colour for a share of the whole: the last threshold (by `from`) the share reaches. */
 export declare function meterColor(share: number, thresholds: readonly MeterThreshold[]): MeterColor;

package/dist/components/dataDisplay/meter/meter.js

@@ -1,48 +1,49 @@
-import { jsxs as n, jsx as m, Fragment as u } from "react/jsx-runtime";
+import { jsxs as n, jsx as s, Fragment as w } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/meter/meter.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                     */
-import w from "react";
-import b from "clsx";
-const N = [
+import b from "react";
+import N from "clsx";
+const M = [
   { from: 0, color: "info" },
   { from: 1, color: "success" }
 ];
-function M(i, o) {
+function $(i, m) {
   let e = "neutral", r = -1 / 0;
-  for (const t of o)
+  for (const t of m)
     i >= t.from && t.from >= r && (e = t.color, r = t.from);
   return e;
 }
-const j = w.forwardRef(function({
-  className: o,
+const D = b.forwardRef(function({
+  className: m,
   value: e,
   max: r,
   label: t,
   text: a,
   ofLabel: l = "of",
-  thresholds: d = N,
-  color: s,
+  thresholds: d = M,
+  color: o,
   hideText: c,
-  ..._
-}, h) {
-  const f = r > 0 ? Math.min(1, Math.max(0, e / r)) : 0, p = s != null ? s : M(f, d);
+  "data-testid": _ = "meter",
+  ...h
+}, p) {
+  const f = r > 0 ? Math.min(1, Math.max(0, e / r)) : 0, u = o != null ? o : $(f, d);
   return /* @__PURE__ */ n(
     "div",
     {
-      ..._,
-      ref: h,
+      ...h,
+      ref: p,
       role: "meter",
       "aria-label": t,
       "aria-valuenow": e,
       "aria-valuemin": 0,
       "aria-valuemax": r,
       "aria-valuetext": `${e} ${l} ${r}`,
-      "data-testid": "meter",
-      className: b("smwb-meter", `smwb-meter_color-${p}`, { "smwb-meter_bar-only": c }, o),
+      "data-testid": _,
+      className: N("smwb-meter", `smwb-meter_color-${u}`, { "smwb-meter_bar-only": c }, m),
       children: [
-        /* @__PURE__ */ m("span", { className: "smwb-meter__track", "aria-hidden": "true", children: /* @__PURE__ */ m("span", { className: "smwb-meter__fill", style: { width: `${f * 100}%` } }) }),
-        c ? null : /* @__PURE__ */ m("span", { className: "smwb-meter__text", "aria-hidden": "true", children: a === void 0 ? /* @__PURE__ */ n(u, { children: [
-          /* @__PURE__ */ m("b", { className: "smwb-meter__value", children: e }),
+        /* @__PURE__ */ s("span", { className: "smwb-meter__track", "aria-hidden": "true", children: /* @__PURE__ */ s("span", { className: "smwb-meter__fill", style: { width: `${f * 100}%` } }) }),
+        c ? null : /* @__PURE__ */ s("span", { className: "smwb-meter__text", "aria-hidden": "true", children: a === void 0 ? /* @__PURE__ */ n(w, { children: [
+          /* @__PURE__ */ s("b", { className: "smwb-meter__value", children: e }),
           /* @__PURE__ */ n("span", { className: "smwb-meter__of", children: [
             " ",
             l,
@@ -55,8 +56,8 @@ const j = w.forwardRef(function({
   );
 });
 export {
-  N as DEFAULT_METER_THRESHOLDS,
-  j as Meter,
-  M as meterColor
+  M as DEFAULT_METER_THRESHOLDS,
+  D as Meter,
+  $ as meterColor
 };
 //# sourceMappingURL=meter.js.map

package/dist/components/dataDisplay/meter/meter.js.map

@@ -1 +1 @@
-{"version":3,"file":"meter.js","sources":["../../../../src/components/dataDisplay/meter/meter.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport type MeterColor = \"neutral\" | \"primary\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\n/** From this share of `max` (0–1) on, the meter takes `color`. */\nexport interface MeterThreshold {\n  from: number;\n  color: MeterColor;\n}\n\n/** Info while under way, success when complete. */\nexport const DEFAULT_METER_THRESHOLDS: readonly MeterThreshold[] = [\n  { from: 0, color: \"info\" },\n  { from: 1, color: \"success\" },\n];\n\nexport interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"role\"> {\n  className?: string;\n  /** How many are done (X of Y). */\n  value: number;\n  /** How many there are in all (X of Y). */\n  max: number;\n  /** What is measured — the accessible name, e.g. \"Requirements accepted\". */\n  label: string;\n  /** Visible text instead of \"X of Y\": markup, or a function of (value, max). */\n  text?: ReactNode | ((value: number, max: number) => ReactNode);\n  /** The word between the figures in the default text and in aria-valuetext. */\n  ofLabel?: string;\n  /** Colour by share of `max`: the last threshold the share reaches wins. */\n  thresholds?: readonly MeterThreshold[];\n  /** A fixed colour, instead of the thresholds. */\n  color?: MeterColor;\n  /** The bar only; the text stays available to assistive technology. */\n  hideText?: boolean;\n}\n\n/** The colour for a share of the whole: the last threshold (by `from`) the share reaches. */\nexport function meterColor(share: number, thresholds: readonly MeterThreshold[]): MeterColor {\n  let color: MeterColor = \"neutral\";\n  let from = -Infinity;\n  for (const threshold of thresholds) {\n    if (share >= threshold.from && threshold.from >= from) {\n      color = threshold.color;\n      from = threshold.from;\n    }\n  }\n  return color;\n}\n\n/** A share of a whole, \"X of Y\": a bar and the figures beside it, coloured by thresholds. */\nexport const Meter = React.forwardRef<HTMLDivElement, MeterProps>(function Meter(\n  {\n    className,\n    value,\n    max,\n    label,\n    text,\n    ofLabel = \"of\",\n    thresholds = DEFAULT_METER_THRESHOLDS,\n    color,\n    hideText,\n    ...rest\n  },\n  ref\n) {\n  const share = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;\n  const tone = color ?? meterColor(share, thresholds);\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      role=\"meter\"\n      aria-label={label}\n      aria-valuenow={value}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-valuetext={`${value} ${ofLabel} ${max}`}\n      data-testid=\"meter\"\n      className={cn(\"smwb-meter\", `smwb-meter_color-${tone}`, { \"smwb-meter_bar-only\": hideText }, className)}\n    >\n      <span className=\"smwb-meter__track\" aria-hidden=\"true\">\n        <span className=\"smwb-meter__fill\" style={{ width: `${share * 100}%` }} />\n      </span>\n      {hideText ? null : (\n        <span className=\"smwb-meter__text\" aria-hidden=\"true\">\n          {text === undefined ? (\n            <>\n              <b className=\"smwb-meter__value\">{value}</b>\n              <span className=\"smwb-meter__of\">\n                {\" \"}\n                {ofLabel} {max}\n              </span>\n            </>\n          ) : typeof text === \"function\" ? (\n            text(value, max)\n          ) : (\n            text\n          )}\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport default Meter;\n"],"names":["DEFAULT_METER_THRESHOLDS","meterColor","share","thresholds","color","from","threshold","Meter","React","className","value","max","label","text","ofLabel","hideText","rest","ref","tone","jsxs","cn","jsx","Fragment"],"mappings":";;;;;AAcO,MAAMA,IAAsD;AAAA,EACjE,EAAE,MAAM,GAAG,OAAO,OAAA;AAAA,EAClB,EAAE,MAAM,GAAG,OAAO,UAAA;AACpB;AAuBO,SAASC,EAAWC,GAAeC,GAAmD;AAC3F,MAAIC,IAAoB,WACpBC,IAAO;AACX,aAAWC,KAAaH;AACtB,IAAID,KAASI,EAAU,QAAQA,EAAU,QAAQD,MAC/CD,IAAQE,EAAU,OAClBD,IAAOC,EAAU;AAGrB,SAAOF;AACT;AAGO,MAAMG,IAAQC,EAAM,WAAuC,SAChE;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,YAAAX,IAAaH;AAAA,EACb,OAAAI;AAAA,EACA,UAAAW;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMf,IAAQS,IAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGD,IAAQC,CAAG,CAAC,IAAI,GAC1DO,IAAOd,KAAA,OAAAA,IAASH,EAAWC,GAAOC,CAAU;AAClD,SACE,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,KAAAC;AAAA,MACA,MAAK;AAAA,MACL,cAAYL;AAAA,MACZ,iBAAeF;AAAA,MACf,iBAAe;AAAA,MACf,iBAAeC;AAAA,MACf,kBAAgB,GAAGD,CAAK,IAAII,CAAO,IAAIH,CAAG;AAAA,MAC1C,eAAY;AAAA,MACZ,WAAWS,EAAG,cAAc,oBAAoBF,CAAI,IAAI,EAAE,uBAAuBH,EAAA,GAAYN,CAAS;AAAA,MAEtG,UAAA;AAAA,QAAA,gBAAAY,EAAC,UAAK,WAAU,qBAAoB,eAAY,QAC9C,4BAAC,QAAA,EAAK,WAAU,oBAAmB,OAAO,EAAE,OAAO,GAAGnB,IAAQ,GAAG,OAAO,GAC1E;AAAA,QACCa,IAAW,OACV,gBAAAM,EAAC,QAAA,EAAK,WAAU,oBAAmB,eAAY,QAC5C,UAAAR,MAAS,SACR,gBAAAM,EAAAG,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAD,EAAC,KAAA,EAAE,WAAU,qBAAqB,UAAAX,GAAM;AAAA,UACxC,gBAAAS,EAAC,QAAA,EAAK,WAAU,kBACb,UAAA;AAAA,YAAA;AAAA,YACAL;AAAA,YAAQ;AAAA,YAAEH;AAAA,UAAA,EAAA,CACb;AAAA,QAAA,GACF,IACE,OAAOE,KAAS,aAClBA,EAAKH,GAAOC,CAAG,IAEfE,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
+{"version":3,"file":"meter.js","sources":["../../../../src/components/dataDisplay/meter/meter.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport type MeterColor = \"neutral\" | \"primary\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\n/** From this share of `max` (0–1) on, the meter takes `color`. */\nexport interface MeterThreshold {\n  from: number;\n  color: MeterColor;\n}\n\n/** Info while under way, success when complete. */\nexport const DEFAULT_METER_THRESHOLDS: readonly MeterThreshold[] = [\n  { from: 0, color: \"info\" },\n  { from: 1, color: \"success\" },\n];\n\nexport interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"role\"> {\n  className?: string;\n  /** How many are done (X of Y). */\n  value: number;\n  /** How many there are in all (X of Y). */\n  max: number;\n  /** What is measured — the accessible name, e.g. \"Requirements accepted\". */\n  label: string;\n  /** Visible text instead of \"X of Y\": markup, or a function of (value, max). */\n  text?: ReactNode | ((value: number, max: number) => ReactNode);\n  /** The word between the figures in the default text and in aria-valuetext. */\n  ofLabel?: string;\n  /** Colour by share of `max`: the last threshold the share reaches wins. */\n  thresholds?: readonly MeterThreshold[];\n  /** A fixed colour, instead of the thresholds. */\n  color?: MeterColor;\n  /** The bar only; the text stays available to assistive technology. */\n  hideText?: boolean;\n  /** Test id of the root `<div>`; `meter` unless given. */\n  \"data-testid\"?: string;\n}\n\n/** The colour for a share of the whole: the last threshold (by `from`) the share reaches. */\nexport function meterColor(share: number, thresholds: readonly MeterThreshold[]): MeterColor {\n  let color: MeterColor = \"neutral\";\n  let from = -Infinity;\n  for (const threshold of thresholds) {\n    if (share >= threshold.from && threshold.from >= from) {\n      color = threshold.color;\n      from = threshold.from;\n    }\n  }\n  return color;\n}\n\n/** A share of a whole, \"X of Y\": a bar and the figures beside it, coloured by thresholds. */\nexport const Meter = React.forwardRef<HTMLDivElement, MeterProps>(function Meter(\n  {\n    className,\n    value,\n    max,\n    label,\n    text,\n    ofLabel = \"of\",\n    thresholds = DEFAULT_METER_THRESHOLDS,\n    color,\n    hideText,\n    \"data-testid\": dataTestId = \"meter\",\n    ...rest\n  },\n  ref\n) {\n  const share = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;\n  const tone = color ?? meterColor(share, thresholds);\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      role=\"meter\"\n      aria-label={label}\n      aria-valuenow={value}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-valuetext={`${value} ${ofLabel} ${max}`}\n      data-testid={dataTestId}\n      className={cn(\"smwb-meter\", `smwb-meter_color-${tone}`, { \"smwb-meter_bar-only\": hideText }, className)}\n    >\n      <span className=\"smwb-meter__track\" aria-hidden=\"true\">\n        <span className=\"smwb-meter__fill\" style={{ width: `${share * 100}%` }} />\n      </span>\n      {hideText ? null : (\n        <span className=\"smwb-meter__text\" aria-hidden=\"true\">\n          {text === undefined ? (\n            <>\n              <b className=\"smwb-meter__value\">{value}</b>\n              <span className=\"smwb-meter__of\">\n                {\" \"}\n                {ofLabel} {max}\n              </span>\n            </>\n          ) : typeof text === \"function\" ? (\n            text(value, max)\n          ) : (\n            text\n          )}\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport default Meter;\n"],"names":["DEFAULT_METER_THRESHOLDS","meterColor","share","thresholds","color","from","threshold","Meter","React","className","value","max","label","text","ofLabel","hideText","dataTestId","rest","ref","tone","jsxs","cn","jsx","Fragment"],"mappings":";;;;;AAcO,MAAMA,IAAsD;AAAA,EACjE,EAAE,MAAM,GAAG,OAAO,OAAA;AAAA,EAClB,EAAE,MAAM,GAAG,OAAO,UAAA;AACpB;AAyBO,SAASC,EAAWC,GAAeC,GAAmD;AAC3F,MAAIC,IAAoB,WACpBC,IAAO;AACX,aAAWC,KAAaH;AACtB,IAAID,KAASI,EAAU,QAAQA,EAAU,QAAQD,MAC/CD,IAAQE,EAAU,OAClBD,IAAOC,EAAU;AAGrB,SAAOF;AACT;AAGO,MAAMG,IAAQC,EAAM,WAAuC,SAChE;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,YAAAX,IAAaH;AAAA,EACb,OAAAI;AAAA,EACA,UAAAW;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAMhB,IAAQS,IAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGD,IAAQC,CAAG,CAAC,IAAI,GAC1DQ,IAAOf,KAAA,OAAAA,IAASH,EAAWC,GAAOC,CAAU;AAClD,SACE,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,KAAAC;AAAA,MACA,MAAK;AAAA,MACL,cAAYN;AAAA,MACZ,iBAAeF;AAAA,MACf,iBAAe;AAAA,MACf,iBAAeC;AAAA,MACf,kBAAgB,GAAGD,CAAK,IAAII,CAAO,IAAIH,CAAG;AAAA,MAC1C,eAAaK;AAAA,MACb,WAAWK,EAAG,cAAc,oBAAoBF,CAAI,IAAI,EAAE,uBAAuBJ,EAAA,GAAYN,CAAS;AAAA,MAEtG,UAAA;AAAA,QAAA,gBAAAa,EAAC,UAAK,WAAU,qBAAoB,eAAY,QAC9C,4BAAC,QAAA,EAAK,WAAU,oBAAmB,OAAO,EAAE,OAAO,GAAGpB,IAAQ,GAAG,OAAO,GAC1E;AAAA,QACCa,IAAW,OACV,gBAAAO,EAAC,QAAA,EAAK,WAAU,oBAAmB,eAAY,QAC5C,UAAAT,MAAS,SACR,gBAAAO,EAAAG,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAD,EAAC,KAAA,EAAE,WAAU,qBAAqB,UAAAZ,GAAM;AAAA,UACxC,gBAAAU,EAAC,QAAA,EAAK,WAAU,kBACb,UAAA;AAAA,YAAA;AAAA,YACAN;AAAA,YAAQ;AAAA,YAAEH;AAAA,UAAA,EAAA,CACb;AAAA,QAAA,GACF,IACE,OAAOE,KAAS,aAClBA,EAAKH,GAAOC,CAAG,IAEfE,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/components/dataDisplay/personChip/personChip.d.ts

@@ -25,6 +25,8 @@ export interface PersonChipProps extends Omit<HTMLAttributes<HTMLElement>, "titl
     color?: string;
     /** A second line under the name: a role, a date. */
     meta?: ReactNode;
+    /** Test id of the root; `person-chip` unless given. */
+    "data-testid"?: string;
 }
 /** A person: avatar and name, a link to their card when `href` is set. */
 export declare const PersonChip: React.ForwardRefExoticComponent<PersonChipProps & React.RefAttributes<HTMLElement>>;

package/dist/components/dataDisplay/personChip/personChip.js

@@ -1,61 +1,73 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { jsxs as h, jsx as l } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/personChip/personChip.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                               */
-import d from "react";
-import _ from "clsx";
+import _ from "react";
+import b from "clsx";
 import { Avatar as u } from "../avatar/avatar.js";
-function b(a) {
-  const i = a.trim().split(/\s+/).filter(Boolean), s = (r) => {
+function w(t) {
+  const i = t.trim().split(/\s+/).filter(Boolean), s = (r) => {
     var n;
     return r && (n = Array.from(r)[0]) != null ? n : "";
   };
   return (s(i[0]) + (i.length > 1 ? s(i[i.length - 1]) : "")).toUpperCase();
 }
-function w(a) {
+function g(t) {
   var s;
   let i = 0;
-  for (const r of a) i = i * 31 + ((s = r.codePointAt(0)) != null ? s : 0) >>> 0;
+  for (const r of t) i = i * 31 + ((s = r.codePointAt(0)) != null ? s : 0) >>> 0;
   return `hsl(${i % 360} 42% 42%)`;
 }
-const j = d.forwardRef(function({ className: i, name: s, src: r, href: n, compact: t, size: h = 24, colorSeed: p, color: o, meta: l, ...c }, f) {
-  return /* @__PURE__ */ m(
+const R = _.forwardRef(function({
+  className: i,
+  name: s,
+  src: r,
+  href: n,
+  compact: a,
+  size: c = 24,
+  colorSeed: p,
+  color: e,
+  meta: m,
+  "data-testid": f = "person-chip",
+  ...o
+}, d) {
+  return /* @__PURE__ */ h(
     n ? "a" : "span",
     {
-      ...c,
-      ref: f,
+      ...o,
+      ref: d,
       ...n ? { href: n } : {},
-      title: t ? s : void 0,
-      role: t && !n ? "img" : void 0,
-      "aria-label": t ? s : void 0,
-      "data-testid": "person-chip",
-      className: _(
+      title: a ? s : void 0,
+      role: a && !n ? "img" : o.role,
+      "aria-label": a ? s : o["aria-label"],
+      "data-testid": f,
+      className: b(
         "smwb-person-chip",
-        { "smwb-person-chip_link": !!n, "smwb-person-chip_compact": t },
+        { "smwb-person-chip_link": !!n, "smwb-person-chip_compact": a },
         i
       ),
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ l(
           u,
           {
             className: "smwb-person-chip__avatar",
-            size: h,
+            size: c,
             src: r,
-            color: o != null ? o : w(p != null ? p : s),
+            color: e != null ? e : g(p != null ? p : s),
             "aria-hidden": "true",
-            children: b(s)
+            children: w(s)
           }
         ),
-        t ? null : /* @__PURE__ */ m("span", { className: "smwb-person-chip__text", children: [
-          /* @__PURE__ */ e("span", { className: "smwb-person-chip__name", children: s }),
-          l ? /* @__PURE__ */ e("span", { className: "smwb-person-chip__meta", children: l }) : null
+        a ? null : /* @__PURE__ */ h("span", { className: "smwb-person-chip__text", children: [
+          /* @__PURE__ */ l("span", { className: "smwb-person-chip__name", children: s }),
+          m ? /* @__PURE__ */ l("span", { className: "smwb-person-chip__meta", children: m }) : null
         ] })
       ]
     }
   );
 });
 export {
-  j as PersonChip,
-  w as avatarColor,
-  b as initialsOf
+  R as PersonChip,
+  g as avatarColor,
+  w as initialsOf
 };
 //# sourceMappingURL=personChip.js.map

package/dist/components/dataDisplay/personChip/personChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"personChip.js","sources":["../../../../src/components/dataDisplay/personChip/personChip.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport { Avatar, type AvatarSize } from \"../avatar\";\n\n/** Up to two initials from a name: \"Anna Petrova\" → \"AP\", \"anna\" → \"A\". */\nexport function initialsOf(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  const first = (word: string | undefined): string => (word ? (Array.from(word)[0] ?? \"\") : \"\");\n  return (first(words[0]) + (words.length > 1 ? first(words[words.length - 1]) : \"\")).toUpperCase();\n}\n\n/**\n * A steady background colour for a person's avatar, derived from a seed (an id\n * or the name): the same person always gets the same colour, on the server too.\n */\nexport function avatarColor(seed: string): string {\n  let hash = 0;\n  for (const char of seed) hash = (hash * 31 + (char.codePointAt(0) ?? 0)) >>> 0;\n  return `hsl(${hash % 360} 42% 42%)`;\n}\n\nexport interface PersonChipProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  className?: string;\n  /** The person's name: shown beside the avatar, and the source of its initials. */\n  name: string;\n  /** Avatar image; initials on a colour without it or when it fails. */\n  src?: string;\n  /** Link to the person's card. */\n  href?: string;\n  /** The avatar only; the name becomes its tooltip and accessible name. */\n  compact?: boolean;\n  /** Avatar size: a preset or pixels. 24px by default. */\n  size?: AvatarSize | number;\n  /** Seed for the avatar colour (an id); the name by default. */\n  colorSeed?: string;\n  /** A fixed avatar colour instead of the derived one. */\n  color?: string;\n  /** A second line under the name: a role, a date. */\n  meta?: ReactNode;\n}\n\n/** A person: avatar and name, a link to their card when `href` is set. */\nexport const PersonChip = React.forwardRef<HTMLElement, PersonChipProps>(function PersonChip(\n  { className, name, src, href, compact, size = 24, colorSeed, color, meta, ...rest },\n  ref\n) {\n  const Tag = (href ? \"a\" : \"span\") as \"span\";\n  return (\n    <Tag\n      {...rest}\n      ref={ref}\n      {...(href ? { href } : {})}\n      title={compact ? name : undefined}\n      role={compact && !href ? \"img\" : undefined}\n      aria-label={compact ? name : undefined}\n      data-testid=\"person-chip\"\n      className={cn(\n        \"smwb-person-chip\",\n        { \"smwb-person-chip_link\": !!href, \"smwb-person-chip_compact\": compact },\n        className\n      )}\n    >\n      <Avatar\n        className=\"smwb-person-chip__avatar\"\n        size={size}\n        src={src}\n        color={color ?? avatarColor(colorSeed ?? name)}\n        aria-hidden=\"true\"\n      >\n        {initialsOf(name)}\n      </Avatar>\n      {compact ? null : (\n        <span className=\"smwb-person-chip__text\">\n          <span className=\"smwb-person-chip__name\">{name}</span>\n          {meta ? <span className=\"smwb-person-chip__meta\">{meta}</span> : null}\n        </span>\n      )}\n    </Tag>\n  );\n});\n\nexport default PersonChip;\n"],"names":["initialsOf","name","words","first","word","_a","avatarColor","seed","hash","char","PersonChip","React","className","src","href","compact","size","colorSeed","color","meta","rest","ref","jsxs","cn","jsx","Avatar"],"mappings":";;;;;;AAOO,SAASA,EAAWC,GAAsB;AAC/C,QAAMC,IAAQD,EAAK,KAAA,EAAO,MAAM,KAAK,EAAE,OAAO,OAAO,GAC/CE,IAAQ,CAACC,MAAA;;AAAsC,WAAAA,MAAQC,IAAA,MAAM,KAAKD,CAAI,EAAE,CAAC,MAAlB,OAAAC,IAA6B;AAAA;AAC1F,UAAQF,EAAMD,EAAM,CAAC,CAAC,KAAKA,EAAM,SAAS,IAAIC,EAAMD,EAAMA,EAAM,SAAS,CAAC,CAAC,IAAI,KAAK,YAAA;AACtF;AAMO,SAASI,EAAYC,GAAsB;;AAChD,MAAIC,IAAO;AACX,aAAWC,KAAQF,EAAM,CAAAC,IAAQA,IAAO,OAAMH,IAAAI,EAAK,YAAY,CAAC,MAAlB,OAAAJ,IAAuB,OAAQ;AAC7E,SAAO,OAAOG,IAAO,GAAG;AAC1B;AAuBO,MAAME,IAAaC,EAAM,WAAyC,SACvE,EAAE,WAAAC,GAAW,MAAAX,GAAM,KAAAY,GAAK,MAAAC,GAAM,SAAAC,GAAS,MAAAC,IAAO,IAAI,WAAAC,GAAW,OAAAC,GAAO,MAAAC,GAAM,GAAGC,EAAA,GAC7EC,GACA;AAEA,SACE,gBAAAC;AAAA,IAFWR,IAAO,MAAM;AAAA,IAEvB;AAAA,MACE,GAAGM;AAAA,MACJ,KAAAC;AAAA,MACC,GAAIP,IAAO,EAAE,MAAAA,EAAA,IAAS,CAAA;AAAA,MACvB,OAAOC,IAAUd,IAAO;AAAA,MACxB,MAAMc,KAAW,CAACD,IAAO,QAAQ;AAAA,MACjC,cAAYC,IAAUd,IAAO;AAAA,MAC7B,eAAY;AAAA,MACZ,WAAWsB;AAAA,QACT;AAAA,QACA,EAAE,yBAAyB,CAAC,CAACT,GAAM,4BAA4BC,EAAA;AAAA,QAC/DH;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAAT;AAAA,YACA,KAAAH;AAAA,YACA,OAAOK,KAAA,OAAAA,IAASZ,EAAYW,KAAA,OAAAA,IAAahB,CAAI;AAAA,YAC7C,eAAY;AAAA,YAEX,YAAWA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAEjBc,IAAU,OACT,gBAAAO,EAAC,QAAA,EAAK,WAAU,0BACd,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAvB,GAAK;AAAA,UAC9CkB,IAAO,gBAAAK,EAAC,QAAA,EAAK,WAAU,0BAA0B,aAAK,IAAU;AAAA,QAAA,EAAA,CACnE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
+{"version":3,"file":"personChip.js","sources":["../../../../src/components/dataDisplay/personChip/personChip.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport { Avatar, type AvatarSize } from \"../avatar\";\n\n/** Up to two initials from a name: \"Anna Petrova\" → \"AP\", \"anna\" → \"A\". */\nexport function initialsOf(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  const first = (word: string | undefined): string => (word ? (Array.from(word)[0] ?? \"\") : \"\");\n  return (first(words[0]) + (words.length > 1 ? first(words[words.length - 1]) : \"\")).toUpperCase();\n}\n\n/**\n * A steady background colour for a person's avatar, derived from a seed (an id\n * or the name): the same person always gets the same colour, on the server too.\n */\nexport function avatarColor(seed: string): string {\n  let hash = 0;\n  for (const char of seed) hash = (hash * 31 + (char.codePointAt(0) ?? 0)) >>> 0;\n  return `hsl(${hash % 360} 42% 42%)`;\n}\n\nexport interface PersonChipProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  className?: string;\n  /** The person's name: shown beside the avatar, and the source of its initials. */\n  name: string;\n  /** Avatar image; initials on a colour without it or when it fails. */\n  src?: string;\n  /** Link to the person's card. */\n  href?: string;\n  /** The avatar only; the name becomes its tooltip and accessible name. */\n  compact?: boolean;\n  /** Avatar size: a preset or pixels. 24px by default. */\n  size?: AvatarSize | number;\n  /** Seed for the avatar colour (an id); the name by default. */\n  colorSeed?: string;\n  /** A fixed avatar colour instead of the derived one. */\n  color?: string;\n  /** A second line under the name: a role, a date. */\n  meta?: ReactNode;\n  /** Test id of the root; `person-chip` unless given. */\n  \"data-testid\"?: string;\n}\n\n/** A person: avatar and name, a link to their card when `href` is set. */\nexport const PersonChip = React.forwardRef<HTMLElement, PersonChipProps>(function PersonChip(\n  {\n    className,\n    name,\n    src,\n    href,\n    compact,\n    size = 24,\n    colorSeed,\n    color,\n    meta,\n    \"data-testid\": dataTestId = \"person-chip\",\n    ...rest\n  },\n  ref\n) {\n  const Tag = (href ? \"a\" : \"span\") as \"span\";\n  return (\n    <Tag\n      {...rest}\n      ref={ref}\n      {...(href ? { href } : {})}\n      title={compact ? name : undefined}\n      // A compact chip is named by the person's name, as an image unless it is a\n      // link: these win over the caller's. Otherwise the caller's stay.\n      role={compact && !href ? \"img\" : rest.role}\n      aria-label={compact ? name : rest[\"aria-label\"]}\n      data-testid={dataTestId}\n      className={cn(\n        \"smwb-person-chip\",\n        { \"smwb-person-chip_link\": !!href, \"smwb-person-chip_compact\": compact },\n        className\n      )}\n    >\n      <Avatar\n        className=\"smwb-person-chip__avatar\"\n        size={size}\n        src={src}\n        color={color ?? avatarColor(colorSeed ?? name)}\n        aria-hidden=\"true\"\n      >\n        {initialsOf(name)}\n      </Avatar>\n      {compact ? null : (\n        <span className=\"smwb-person-chip__text\">\n          <span className=\"smwb-person-chip__name\">{name}</span>\n          {meta ? <span className=\"smwb-person-chip__meta\">{meta}</span> : null}\n        </span>\n      )}\n    </Tag>\n  );\n});\n\nexport default PersonChip;\n"],"names":["initialsOf","name","words","first","word","_a","avatarColor","seed","hash","char","PersonChip","React","className","src","href","compact","size","colorSeed","color","meta","dataTestId","rest","ref","jsxs","cn","jsx","Avatar"],"mappings":";;;;;;AAOO,SAASA,EAAWC,GAAsB;AAC/C,QAAMC,IAAQD,EAAK,KAAA,EAAO,MAAM,KAAK,EAAE,OAAO,OAAO,GAC/CE,IAAQ,CAACC,MAAA;;AAAsC,WAAAA,MAAQC,IAAA,MAAM,KAAKD,CAAI,EAAE,CAAC,MAAlB,OAAAC,IAA6B;AAAA;AAC1F,UAAQF,EAAMD,EAAM,CAAC,CAAC,KAAKA,EAAM,SAAS,IAAIC,EAAMD,EAAMA,EAAM,SAAS,CAAC,CAAC,IAAI,KAAK,YAAA;AACtF;AAMO,SAASI,EAAYC,GAAsB;;AAChD,MAAIC,IAAO;AACX,aAAWC,KAAQF,EAAM,CAAAC,IAAQA,IAAO,OAAMH,IAAAI,EAAK,YAAY,CAAC,MAAlB,OAAAJ,IAAuB,OAAQ;AAC7E,SAAO,OAAOG,IAAO,GAAG;AAC1B;AAyBO,MAAME,IAAaC,EAAM,WAAyC,SACvE;AAAA,EACE,WAAAC;AAAA,EACA,MAAAX;AAAA,EACA,KAAAY;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AAEA,SACE,gBAAAC;AAAA,IAFWT,IAAO,MAAM;AAAA,IAEvB;AAAA,MACE,GAAGO;AAAA,MACJ,KAAAC;AAAA,MACC,GAAIR,IAAO,EAAE,MAAAA,EAAA,IAAS,CAAA;AAAA,MACvB,OAAOC,IAAUd,IAAO;AAAA,MAGxB,MAAMc,KAAW,CAACD,IAAO,QAAQO,EAAK;AAAA,MACtC,cAAYN,IAAUd,IAAOoB,EAAK,YAAY;AAAA,MAC9C,eAAaD;AAAA,MACb,WAAWI;AAAA,QACT;AAAA,QACA,EAAE,yBAAyB,CAAC,CAACV,GAAM,4BAA4BC,EAAA;AAAA,QAC/DH;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAa;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAAV;AAAA,YACA,KAAAH;AAAA,YACA,OAAOK,KAAA,OAAAA,IAASZ,EAAYW,KAAA,OAAAA,IAAahB,CAAI;AAAA,YAC7C,eAAY;AAAA,YAEX,YAAWA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAEjBc,IAAU,OACT,gBAAAQ,EAAC,QAAA,EAAK,WAAU,0BACd,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAxB,GAAK;AAAA,UAC9CkB,IAAO,gBAAAM,EAAC,QAAA,EAAK,WAAU,0BAA0B,aAAK,IAAU;AAAA,QAAA,EAAA,CACnE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/components/dataDisplay/stat/stat.d.ts

@@ -16,6 +16,8 @@ export interface StatProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
     variant?: "tile" | "plain";
     /** Make the whole stat a link to what the figure is made of. */
     href?: string;
+    /** Test id of the root; `stat` unless given. */
+    "data-testid"?: string;
 }
 /**
  * A figure with its label: a KPI tile on a dashboard, or a small stat in a row.

package/dist/components/dataDisplay/stat/stat.js

@@ -3,24 +3,36 @@ import '../../../assets/styles/less/components/stat/stat.entry.css';import '../.
 /* empty css                                                   */
 import c from "react";
 import p from "clsx";
-import { Icon as d } from "../../base/icon/icon.js";
-const $ = c.forwardRef(function({ className: o, label: r, value: a, hint: m, icon: t, tone: l = "neutral", variant: n = "tile", href: e, children: i, ...b }, u) {
+import { Icon as f } from "../../base/icon/icon.js";
+const h = c.forwardRef(function({
+  className: o,
+  label: r,
+  value: a,
+  hint: m,
+  icon: t,
+  tone: l = "neutral",
+  variant: e = "tile",
+  href: n,
+  children: i,
+  "data-testid": d = "stat",
+  ...b
+}, u) {
   return /* @__PURE__ */ _(
-    e ? "a" : "div",
+    n ? "a" : "div",
     {
       ...b,
       ref: u,
-      ...e ? { href: e } : {},
-      "data-testid": "stat",
+      ...n ? { href: n } : {},
+      "data-testid": d,
       className: p(
         "smwb-stat",
-        `smwb-stat_${n}`,
+        `smwb-stat_${e}`,
         `smwb-stat_tone-${l}`,
-        { "smwb-stat_link": !!e, "smwb-stat_with-icon": !!t },
+        { "smwb-stat_link": !!n, "smwb-stat_with-icon": !!t },
         o
       ),
       children: [
-        t ? /* @__PURE__ */ s("span", { className: "smwb-stat__icon", "aria-hidden": "true", children: typeof t == "string" ? /* @__PURE__ */ s(d, { name: t, size: 20 }) : t }) : null,
+        t ? /* @__PURE__ */ s("span", { className: "smwb-stat__icon", "aria-hidden": "true", children: typeof t == "string" ? /* @__PURE__ */ s(f, { name: t, size: 20 }) : t }) : null,
         /* @__PURE__ */ s("span", { className: "smwb-stat__label", children: r }),
         /* @__PURE__ */ s("span", { className: "smwb-stat__value", children: a }),
         m ? /* @__PURE__ */ s("span", { className: "smwb-stat__hint", children: m }) : null,
@@ -28,21 +40,21 @@ const $ = c.forwardRef(function({ className: o, label: r, value: a, hint: m, ico
       ]
     }
   );
-}), h = c.forwardRef(function({ className: o, style: r, minItemWidth: a, children: m, ...t }, l) {
-  const n = typeof a == "number" ? `${a}px` : a;
+}), j = c.forwardRef(function({ className: o, style: r, minItemWidth: a, children: m, ...t }, l) {
+  const e = typeof a == "number" ? `${a}px` : a;
   return /* @__PURE__ */ s(
     "div",
     {
       ...t,
       ref: l,
       className: p("smwb-stat-group", o),
-      style: n === void 0 ? r : { ...r, "--smwb-stat-min": n },
+      style: e === void 0 ? r : { ...r, "--smwb-stat-min": e },
       children: m
     }
   );
 });
 export {
-  $ as Stat,
-  h as StatGroup
+  h as Stat,
+  j as StatGroup
 };
 //# sourceMappingURL=stat.js.map

package/dist/components/dataDisplay/stat/stat.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat.js","sources":["../../../../src/components/dataDisplay/stat/stat.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type StatTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface StatProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  className?: string;\n  /** What the figure counts. */\n  label: ReactNode;\n  /** The figure — a number, or a short value such as \"3 / 14\". */\n  value: ReactNode;\n  /** A line under the value: a comparison, a period, a caveat. */\n  hint?: ReactNode;\n  /** An icon beside the figure: a Material Symbols name or an element. */\n  icon?: string | ReactNode;\n  /** Colour of the accent (a tile's edge, the icon). `warning` and `error` colour the figure too. */\n  tone?: StatTone;\n  /** `tile`: a bordered card with an accent edge, for KPIs. `plain`: text only, for rows of small figures. */\n  variant?: \"tile\" | \"plain\";\n  /** Make the whole stat a link to what the figure is made of. */\n  href?: string;\n}\n\n/**\n * A figure with its label: a KPI tile on a dashboard, or a small stat in a row.\n * Children go under it — a meter, a sparkline, a note.\n */\nexport const Stat = React.forwardRef<HTMLElement, PropsWithChildren<StatProps>>(function Stat(\n  { className, label, value, hint, icon, tone = \"neutral\", variant = \"tile\", href, children, ...rest },\n  ref\n) {\n  const Tag = (href ? \"a\" : \"div\") as \"div\";\n  return (\n    <Tag\n      {...rest}\n      ref={ref as React.Ref<HTMLDivElement>}\n      {...(href ? { href } : {})}\n      data-testid=\"stat\"\n      className={cn(\n        \"smwb-stat\",\n        `smwb-stat_${variant}`,\n        `smwb-stat_tone-${tone}`,\n        { \"smwb-stat_link\": !!href, \"smwb-stat_with-icon\": !!icon },\n        className\n      )}\n    >\n      {icon ? (\n        <span className=\"smwb-stat__icon\" aria-hidden=\"true\">\n          {typeof icon === \"string\" ? <Icon name={icon} size={20} /> : icon}\n        </span>\n      ) : null}\n      <span className=\"smwb-stat__label\">{label}</span>\n      <span className=\"smwb-stat__value\">{value}</span>\n      {hint ? <span className=\"smwb-stat__hint\">{hint}</span> : null}\n      {children ? <div className=\"smwb-stat__extra\">{children}</div> : null}\n    </Tag>\n  );\n});\n\nexport interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default. */\n  minItemWidth?: number | string;\n}\n\n/** A responsive row of stats: as many columns as fit, each at least `minItemWidth` wide. */\nexport const StatGroup = React.forwardRef<HTMLDivElement, PropsWithChildren<StatGroupProps>>(function StatGroup(\n  { className, style, minItemWidth, children, ...rest },\n  ref\n) {\n  const width = typeof minItemWidth === \"number\" ? `${minItemWidth}px` : minItemWidth;\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-stat-group\", className)}\n      style={width === undefined ? style : ({ ...style, \"--smwb-stat-min\": width } as CSSProperties)}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport default Stat;\n"],"names":["Stat","React","className","label","value","hint","icon","tone","variant","href","children","rest","ref","jsxs","cn","jsx","Icon","StatGroup","style","minItemWidth","width"],"mappings":";;;;;;AA8BO,MAAMA,IAAOC,EAAM,WAAsD,SAC9E,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAC,GAAO,MAAAC,GAAM,MAAAC,GAAM,MAAAC,IAAO,WAAW,SAAAC,IAAU,QAAQ,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GAC9FC,GACA;AAEA,SACE,gBAAAC;AAAA,IAFWJ,IAAO,MAAM;AAAA,IAEvB;AAAA,MACE,GAAGE;AAAA,MACJ,KAAAC;AAAA,MACC,GAAIH,IAAO,EAAE,MAAAA,EAAA,IAAS,CAAA;AAAA,MACvB,eAAY;AAAA,MACZ,WAAWK;AAAA,QACT;AAAA,QACA,aAAaN,CAAO;AAAA,QACpB,kBAAkBD,CAAI;AAAA,QACtB,EAAE,kBAAkB,CAAC,CAACE,GAAM,uBAAuB,CAAC,CAACH,EAAA;AAAA,QACrDJ;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAI,sBACE,QAAA,EAAK,WAAU,mBAAkB,eAAY,QAC3C,UAAA,OAAOA,KAAS,WAAW,gBAAAS,EAACC,KAAK,MAAMV,GAAM,MAAM,IAAI,IAAKA,GAC/D,IACE;AAAA,QACJ,gBAAAS,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAZ,GAAM;AAAA,QAC1C,gBAAAY,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAX,GAAM;AAAA,QACzCC,IAAO,gBAAAU,EAAC,QAAA,EAAK,WAAU,mBAAmB,aAAK,IAAU;AAAA,QACzDL,IAAW,gBAAAK,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAAL,GAAS,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvE,CAAC,GASYO,IAAYhB,EAAM,WAA8D,SAC3F,EAAE,WAAAC,GAAW,OAAAgB,GAAO,cAAAC,GAAc,UAAAT,GAAU,GAAGC,EAAA,GAC/CC,GACA;AACA,QAAMQ,IAAQ,OAAOD,KAAiB,WAAW,GAAGA,CAAY,OAAOA;AACvE,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,mBAAmBZ,CAAS;AAAA,MAC1C,OAAOkB,MAAU,SAAYF,IAAS,EAAE,GAAGA,GAAO,mBAAmBE,EAAA;AAAA,MAEpE,UAAAV;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"stat.js","sources":["../../../../src/components/dataDisplay/stat/stat.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type StatTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface StatProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  className?: string;\n  /** What the figure counts. */\n  label: ReactNode;\n  /** The figure — a number, or a short value such as \"3 / 14\". */\n  value: ReactNode;\n  /** A line under the value: a comparison, a period, a caveat. */\n  hint?: ReactNode;\n  /** An icon beside the figure: a Material Symbols name or an element. */\n  icon?: string | ReactNode;\n  /** Colour of the accent (a tile's edge, the icon). `warning` and `error` colour the figure too. */\n  tone?: StatTone;\n  /** `tile`: a bordered card with an accent edge, for KPIs. `plain`: text only, for rows of small figures. */\n  variant?: \"tile\" | \"plain\";\n  /** Make the whole stat a link to what the figure is made of. */\n  href?: string;\n  /** Test id of the root; `stat` unless given. */\n  \"data-testid\"?: string;\n}\n\n/**\n * A figure with its label: a KPI tile on a dashboard, or a small stat in a row.\n * Children go under it — a meter, a sparkline, a note.\n */\nexport const Stat = React.forwardRef<HTMLElement, PropsWithChildren<StatProps>>(function Stat(\n  {\n    className,\n    label,\n    value,\n    hint,\n    icon,\n    tone = \"neutral\",\n    variant = \"tile\",\n    href,\n    children,\n    \"data-testid\": dataTestId = \"stat\",\n    ...rest\n  },\n  ref\n) {\n  const Tag = (href ? \"a\" : \"div\") as \"div\";\n  return (\n    <Tag\n      {...rest}\n      ref={ref as React.Ref<HTMLDivElement>}\n      {...(href ? { href } : {})}\n      data-testid={dataTestId}\n      className={cn(\n        \"smwb-stat\",\n        `smwb-stat_${variant}`,\n        `smwb-stat_tone-${tone}`,\n        { \"smwb-stat_link\": !!href, \"smwb-stat_with-icon\": !!icon },\n        className\n      )}\n    >\n      {icon ? (\n        <span className=\"smwb-stat__icon\" aria-hidden=\"true\">\n          {typeof icon === \"string\" ? <Icon name={icon} size={20} /> : icon}\n        </span>\n      ) : null}\n      <span className=\"smwb-stat__label\">{label}</span>\n      <span className=\"smwb-stat__value\">{value}</span>\n      {hint ? <span className=\"smwb-stat__hint\">{hint}</span> : null}\n      {children ? <div className=\"smwb-stat__extra\">{children}</div> : null}\n    </Tag>\n  );\n});\n\nexport interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default. */\n  minItemWidth?: number | string;\n}\n\n/** A responsive row of stats: as many columns as fit, each at least `minItemWidth` wide. */\nexport const StatGroup = React.forwardRef<HTMLDivElement, PropsWithChildren<StatGroupProps>>(function StatGroup(\n  { className, style, minItemWidth, children, ...rest },\n  ref\n) {\n  const width = typeof minItemWidth === \"number\" ? `${minItemWidth}px` : minItemWidth;\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-stat-group\", className)}\n      style={width === undefined ? style : ({ ...style, \"--smwb-stat-min\": width } as CSSProperties)}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport default Stat;\n"],"names":["Stat","React","className","label","value","hint","icon","tone","variant","href","children","dataTestId","rest","ref","jsxs","cn","jsx","Icon","StatGroup","style","minItemWidth","width"],"mappings":";;;;;;AAgCO,MAAMA,IAAOC,EAAM,WAAsD,SAC9E;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AAEA,SACE,gBAAAC;AAAA,IAFWL,IAAO,MAAM;AAAA,IAEvB;AAAA,MACE,GAAGG;AAAA,MACJ,KAAAC;AAAA,MACC,GAAIJ,IAAO,EAAE,MAAAA,EAAA,IAAS,CAAA;AAAA,MACvB,eAAaE;AAAA,MACb,WAAWI;AAAA,QACT;AAAA,QACA,aAAaP,CAAO;AAAA,QACpB,kBAAkBD,CAAI;AAAA,QACtB,EAAE,kBAAkB,CAAC,CAACE,GAAM,uBAAuB,CAAC,CAACH,EAAA;AAAA,QACrDJ;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAI,sBACE,QAAA,EAAK,WAAU,mBAAkB,eAAY,QAC3C,UAAA,OAAOA,KAAS,WAAW,gBAAAU,EAACC,KAAK,MAAMX,GAAM,MAAM,IAAI,IAAKA,GAC/D,IACE;AAAA,QACJ,gBAAAU,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAb,GAAM;AAAA,QAC1C,gBAAAa,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAZ,GAAM;AAAA,QACzCC,IAAO,gBAAAW,EAAC,QAAA,EAAK,WAAU,mBAAmB,aAAK,IAAU;AAAA,QACzDN,IAAW,gBAAAM,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAAN,GAAS,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvE,CAAC,GASYQ,IAAYjB,EAAM,WAA8D,SAC3F,EAAE,WAAAC,GAAW,OAAAiB,GAAO,cAAAC,GAAc,UAAAV,GAAU,GAAGE,EAAA,GAC/CC,GACA;AACA,QAAMQ,IAAQ,OAAOD,KAAiB,WAAW,GAAGA,CAAY,OAAOA;AACvE,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,mBAAmBb,CAAS;AAAA,MAC1C,OAAOmB,MAAU,SAAYF,IAAS,EAAE,GAAGA,GAAO,mBAAmBE,EAAA;AAAA,MAEpE,UAAAX;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/components/dataDisplay/table/table.d.ts

@@ -13,7 +13,22 @@ export interface TableProps extends HTMLAttributes<HTMLDivElement> {
      * Show each row as a card — cells one under another, each with its column's
      * label — while the table's container is narrower than this breakpoint:
      * `sm` (420px), `md` (768px) or `lg` (1024px). A container query: the space
-     * the table has decides, not the window. Labels come from `TableCell label`.
+     * the table has decides, not the window.
+     *
+     * A cell's label is its `TableCell label`, or else the label of the head cell
+     * of its column: the head cell's `label`, or the text of its content. Columns
+     * count as in HTML: by position in the row, with `colSpan`, after the columns
+     * that `rowSpan` cells of the rows above take in the same head or body. A cell
+     * spanning several columns takes no label from the head and fills the card's
+     * width, and a head cell spanning several columns labels none of them. With
+     * several head rows, the lowest head cell over a column names it.
+     *
+     * The columns come from the elements written: rows written as `TableRow` in
+     * `TableHead` or `TableBody`, and cells in a row (arrays and fragments
+     * included). A component that renders a row counts as a row whose cells span
+     * no rows down, and a component that renders cells counts as one cell, with
+     * its own `colSpan` and `rowSpan`: give the cells after such a component, or
+     * the component's own cells, a `label`.
      */
     stackBelow?: "sm" | "md" | "lg";
     paginationSettings?: TablePaginationProps;