@smwb/ui-react 2.7.0 → 2.9.0

package/dist/headless/components/dataDisplay/kbd/kbdKeys.js

@@ -0,0 +1,72 @@
+const n = (e, a) => ({ text: e, name: a }), s = {
+  up: n("↑", "Up arrow"),
+  arrowup: n("↑", "Up arrow"),
+  down: n("↓", "Down arrow"),
+  arrowdown: n("↓", "Down arrow"),
+  left: n("←", "Left arrow"),
+  arrowleft: n("←", "Left arrow"),
+  right: n("→", "Right arrow"),
+  arrowright: n("→", "Right arrow"),
+  // `KeyboardEvent.key` is " " for the space bar, and a bare "+" would read "Ctrl++".
+  " ": { text: "Space", name: "Space" },
+  space: { text: "Space", name: "Space" },
+  spacebar: { text: "Space", name: "Space" },
+  "+": { text: "+", name: "Plus" },
+  plus: { text: "+", name: "Plus" }
+}, r = { text: "⌘", name: "Command" }, d = {
+  mod: r,
+  meta: r,
+  cmd: r,
+  command: r,
+  shift: { text: "⇧", name: "Shift" },
+  alt: { text: "⌥", name: "Option" },
+  option: { text: "⌥", name: "Option" },
+  ctrl: { text: "⌃", name: "Control" },
+  control: { text: "⌃", name: "Control" },
+  enter: { text: "↩", name: "Return" },
+  return: { text: "↩", name: "Return" },
+  escape: { text: "⎋", name: "Escape" },
+  esc: { text: "⎋", name: "Escape" },
+  tab: { text: "⇥", name: "Tab" },
+  backspace: { text: "⌫", name: "Delete" },
+  delete: { text: "⌦", name: "Forward delete" },
+  del: { text: "⌦", name: "Forward delete" }
+}, o = { text: "Meta", name: "Meta" }, t = (e, a = e) => ({ text: e, name: a }), i = {
+  mod: t("Ctrl"),
+  ctrl: t("Ctrl"),
+  control: t("Ctrl"),
+  alt: t("Alt"),
+  option: t("Alt"),
+  shift: t("Shift"),
+  meta: o,
+  cmd: o,
+  command: o,
+  enter: t("Enter"),
+  return: t("Enter"),
+  escape: t("Esc", "Escape"),
+  esc: t("Esc", "Escape"),
+  tab: t("Tab"),
+  backspace: t("Backspace"),
+  delete: t("Del", "Delete"),
+  del: t("Del", "Delete")
+};
+function w() {
+  var a;
+  if (typeof navigator == "undefined")
+    return "other";
+  const e = (a = navigator.userAgentData) == null ? void 0 : a.platform;
+  return /mac|iphone|ipad|ipod/i.test(e || navigator.platform || "") ? "mac" : "other";
+}
+function x(e, a) {
+  var p;
+  const c = e.trim().toLowerCase() || e, m = (p = (a === "mac" ? d : i)[c]) != null ? p : s[c];
+  if (m)
+    return m;
+  const l = e.length === 1 ? e.toUpperCase() : e;
+  return { text: l, name: l };
+}
+export {
+  w as detectKbdPlatform,
+  x as kbdKeyLabel
+};
+//# sourceMappingURL=kbdKeys.js.map

package/dist/headless/components/dataDisplay/kbd/kbdKeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbdKeys.js","sources":["../../../../../src/components/dataDisplay/kbd/kbdKeys.ts"],"sourcesContent":["export type KbdPlatform = \"mac\" | \"other\";\n\n/** How one key is drawn, and how it is read out. */\nexport interface KbdKeyLabel {\n  /** What is drawn on the key cap. */\n  text: string;\n  /** What assistive technology reads. */\n  name: string;\n}\n\nconst arrow = (text: string, name: string): KbdKeyLabel => ({ text, name });\n\n// Names, in lower case, the same on every platform.\nconst COMMON: Record<string, KbdKeyLabel> = {\n  up: arrow(\"↑\", \"Up arrow\"),\n  arrowup: arrow(\"↑\", \"Up arrow\"),\n  down: arrow(\"↓\", \"Down arrow\"),\n  arrowdown: arrow(\"↓\", \"Down arrow\"),\n  left: arrow(\"←\", \"Left arrow\"),\n  arrowleft: arrow(\"←\", \"Left arrow\"),\n  right: arrow(\"→\", \"Right arrow\"),\n  arrowright: arrow(\"→\", \"Right arrow\"),\n  // `KeyboardEvent.key` is \" \" for the space bar, and a bare \"+\" would read \"Ctrl++\".\n  \" \": { text: \"Space\", name: \"Space\" },\n  space: { text: \"Space\", name: \"Space\" },\n  spacebar: { text: \"Space\", name: \"Space\" },\n  \"+\": { text: \"+\", name: \"Plus\" },\n  plus: { text: \"+\", name: \"Plus\" },\n};\n\nconst COMMAND: KbdKeyLabel = { text: \"⌘\", name: \"Command\" };\n\n// On macOS the modifiers and the editing keys are drawn as the symbols the Mac\n// keyboard and its menus use.\nconst MAC: Record<string, KbdKeyLabel> = {\n  mod: COMMAND,\n  meta: COMMAND,\n  cmd: COMMAND,\n  command: COMMAND,\n  shift: { text: \"⇧\", name: \"Shift\" },\n  alt: { text: \"⌥\", name: \"Option\" },\n  option: { text: \"⌥\", name: \"Option\" },\n  ctrl: { text: \"⌃\", name: \"Control\" },\n  control: { text: \"⌃\", name: \"Control\" },\n  enter: { text: \"↩\", name: \"Return\" },\n  return: { text: \"↩\", name: \"Return\" },\n  escape: { text: \"⎋\", name: \"Escape\" },\n  esc: { text: \"⎋\", name: \"Escape\" },\n  tab: { text: \"⇥\", name: \"Tab\" },\n  backspace: { text: \"⌫\", name: \"Delete\" },\n  delete: { text: \"⌦\", name: \"Forward delete\" },\n  del: { text: \"⌦\", name: \"Forward delete\" },\n};\n\n// Elsewhere the same names are written in their usual capitalisation, so one `keys` array\n// looks alike on every platform. `Meta`, `Cmd` and `Command` have no key of their own here\n// and are drawn as `Meta`.\nconst META: KbdKeyLabel = { text: \"Meta\", name: \"Meta\" };\nconst named = (text: string, name = text): KbdKeyLabel => ({ text, name });\nconst OTHER: Record<string, KbdKeyLabel> = {\n  mod: named(\"Ctrl\"),\n  ctrl: named(\"Ctrl\"),\n  control: named(\"Ctrl\"),\n  alt: named(\"Alt\"),\n  option: named(\"Alt\"),\n  shift: named(\"Shift\"),\n  meta: META,\n  cmd: META,\n  command: META,\n  enter: named(\"Enter\"),\n  return: named(\"Enter\"),\n  escape: named(\"Esc\", \"Escape\"),\n  esc: named(\"Esc\", \"Escape\"),\n  tab: named(\"Tab\"),\n  backspace: named(\"Backspace\"),\n  delete: named(\"Del\", \"Delete\"),\n  del: named(\"Del\", \"Delete\"),\n};\n\n/**\n * The platform of the running browser: `mac` for macOS (and iPadOS, which reports itself\n * so), `other` everywhere else and without a `navigator` (on the server).\n */\nexport function detectKbdPlatform(): KbdPlatform {\n  if (typeof navigator === \"undefined\") {\n    return \"other\";\n  }\n  const hinted = (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData?.platform;\n  return /mac|iphone|ipad|ipod/i.test(hinted || navigator.platform || \"\") ? \"mac\" : \"other\";\n}\n\n/**\n * The cap and the spoken name of a key. `Mod` is Command on `mac` and Ctrl on `other`; see the\n * tables above for the rest. A single letter is drawn in upper case; any other key as given.\n */\nexport function kbdKeyLabel(key: string, platform: KbdPlatform): KbdKeyLabel {\n  const lower = key.trim().toLowerCase() || key; // a lone \" \" is the space bar\n  const known = (platform === \"mac\" ? MAC : OTHER)[lower] ?? COMMON[lower];\n  if (known) {\n    return known;\n  }\n  const text = key.length === 1 ? key.toUpperCase() : key;\n  return { text, name: text };\n}\n"],"names":["arrow","text","name","COMMON","COMMAND","MAC","META","named","OTHER","detectKbdPlatform","_a","hinted","kbdKeyLabel","key","platform","lower","known"],"mappings":"AAUA,MAAMA,IAAQ,CAACC,GAAcC,OAA+B,EAAE,MAAAD,GAAM,MAAAC,EAAA,IAG9DC,IAAsC;AAAA,EAC1C,IAAIH,EAAM,KAAK,UAAU;AAAA,EACzB,SAASA,EAAM,KAAK,UAAU;AAAA,EAC9B,MAAMA,EAAM,KAAK,YAAY;AAAA,EAC7B,WAAWA,EAAM,KAAK,YAAY;AAAA,EAClC,MAAMA,EAAM,KAAK,YAAY;AAAA,EAC7B,WAAWA,EAAM,KAAK,YAAY;AAAA,EAClC,OAAOA,EAAM,KAAK,aAAa;AAAA,EAC/B,YAAYA,EAAM,KAAK,aAAa;AAAA;AAAA,EAEpC,KAAK,EAAE,MAAM,SAAS,MAAM,QAAA;AAAA,EAC5B,OAAO,EAAE,MAAM,SAAS,MAAM,QAAA;AAAA,EAC9B,UAAU,EAAE,MAAM,SAAS,MAAM,QAAA;AAAA,EACjC,KAAK,EAAE,MAAM,KAAK,MAAM,OAAA;AAAA,EACxB,MAAM,EAAE,MAAM,KAAK,MAAM,OAAA;AAC3B,GAEMI,IAAuB,EAAE,MAAM,KAAK,MAAM,UAAA,GAI1CC,IAAmC;AAAA,EACvC,KAAKD;AAAA,EACL,MAAMA;AAAA,EACN,KAAKA;AAAA,EACL,SAASA;AAAA,EACT,OAAO,EAAE,MAAM,KAAK,MAAM,QAAA;AAAA,EAC1B,KAAK,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EACxB,QAAQ,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EAC3B,MAAM,EAAE,MAAM,KAAK,MAAM,UAAA;AAAA,EACzB,SAAS,EAAE,MAAM,KAAK,MAAM,UAAA;AAAA,EAC5B,OAAO,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EAC1B,QAAQ,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EAC3B,QAAQ,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EAC3B,KAAK,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EACxB,KAAK,EAAE,MAAM,KAAK,MAAM,MAAA;AAAA,EACxB,WAAW,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EAC9B,QAAQ,EAAE,MAAM,KAAK,MAAM,iBAAA;AAAA,EAC3B,KAAK,EAAE,MAAM,KAAK,MAAM,iBAAA;AAC1B,GAKME,IAAoB,EAAE,MAAM,QAAQ,MAAM,OAAA,GAC1CC,IAAQ,CAACN,GAAcC,IAAOD,OAAuB,EAAE,MAAAA,GAAM,MAAAC,MAC7DM,IAAqC;AAAA,EACzC,KAAKD,EAAM,MAAM;AAAA,EACjB,MAAMA,EAAM,MAAM;AAAA,EAClB,SAASA,EAAM,MAAM;AAAA,EACrB,KAAKA,EAAM,KAAK;AAAA,EAChB,QAAQA,EAAM,KAAK;AAAA,EACnB,OAAOA,EAAM,OAAO;AAAA,EACpB,MAAMD;AAAA,EACN,KAAKA;AAAA,EACL,SAASA;AAAA,EACT,OAAOC,EAAM,OAAO;AAAA,EACpB,QAAQA,EAAM,OAAO;AAAA,EACrB,QAAQA,EAAM,OAAO,QAAQ;AAAA,EAC7B,KAAKA,EAAM,OAAO,QAAQ;AAAA,EAC1B,KAAKA,EAAM,KAAK;AAAA,EAChB,WAAWA,EAAM,WAAW;AAAA,EAC5B,QAAQA,EAAM,OAAO,QAAQ;AAAA,EAC7B,KAAKA,EAAM,OAAO,QAAQ;AAC5B;AAMO,SAASE,IAAiC;AAzEjD,MAAAC;AA0EE,MAAI,OAAO,aAAc;AACvB,WAAO;AAET,QAAMC,KAAUD,IAAA,UAAoE,kBAApE,gBAAAA,EAAmF;AACnG,SAAO,wBAAwB,KAAKC,KAAU,UAAU,YAAY,EAAE,IAAI,QAAQ;AACpF;AAMO,SAASC,EAAYC,GAAaC,GAAoC;AArF7E,MAAAJ;AAsFE,QAAMK,IAAQF,EAAI,KAAA,EAAO,iBAAiBA,GACpCG,KAASN,KAAAI,MAAa,QAAQT,IAAMG,GAAOO,CAAK,MAAvC,OAAAL,IAA4CP,EAAOY,CAAK;AACvE,MAAIC;AACF,WAAOA;AAET,QAAMf,IAAOY,EAAI,WAAW,IAAIA,EAAI,gBAAgBA;AACpD,SAAO,EAAE,MAAAZ,GAAM,MAAMA,EAAA;AACvB;"}

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

@@ -1,43 +1,44 @@
-import { jsxs as z, jsx as u } from "react/jsx-runtime";
-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 q = _(function({ src: c, alt: n, fallback: a, lazy: e = !0, aspectRatio: m, className: g, onError: t, ...b }, p) {
-  const [y, v] = d(!1), [i, l] = d(!e), f = x(null), w = j(p, f);
-  F(() => {
-    if (!e || i) return;
-    const s = f.current;
+import { jsxs as _, jsx as g } from "react/jsx-runtime";
+import { forwardRef as x, useState as b, useRef as F, useEffect as N } from "react";
+import j from "clsx";
+import { useForkRef as k } from "../../../hooks/useForkRef.js";
+const A = x(function({ src: a, alt: n, fallback: m, lazy: e = !0, aspectRatio: l, className: p, onError: i, ...t }, y) {
+  var d;
+  const [w, v] = b(!1), [r, f] = b(!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), t == null || t(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: m != null ? { aspectRatio: String(m) } : void 0,
+      className: j("smwb-lazy-image", p, { "smwb-lazy-image--empty": o }),
+      style: l != null ? { aspectRatio: String(l) } : void 0,
       children: [
-        r && a ? /* @__PURE__ */ u("span", { className: "smwb-lazy-image__fallback", children: a }) : null,
-        r ? null : /* @__PURE__ */ u(
+        o && m ? /* @__PURE__ */ g("span", { className: "smwb-lazy-image__fallback", children: m }) : null,
+        o ? null : /* @__PURE__ */ g(
           "img",
           {
-            ...b,
-            ref: w,
+            ...t,
+            ref: I,
             className: "smwb-lazy-image__img",
-            src: i ? c : void 0,
+            src: r ? a : void 0,
             alt: n != null ? n : "",
-            loading: e ? "lazy" : void 0,
-            decoding: "async",
-            onError: I
+            loading: e ? "lazy" : t.loading,
+            decoding: (d = t.decoding) != null ? d : "async",
+            onError: R
           }
         )
       ]
@@ -45,7 +46,7 @@ const q = _(function({ src: c, alt: n, fallback: a, lazy: e = !0, aspectRatio: m
   );
 });
 export {
-  q as LazyImage,
-  q as default
+  A as LazyImage,
+  A as default
 };
 //# sourceMappingURL=lazyImage.js.map

package/dist/headless/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":";;;;AAwBO,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":";;;;AAwBO,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/headless/components/dataDisplay/list/list.js

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

package/dist/headless/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":";;;AAWO,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":";;;AAaO,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/headless/components/dataDisplay/list/listItem.js

@@ -1,37 +1,60 @@
-import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import c from "clsx";
-const N = b(function({ className: r, children: _, disabled: s, selected: m, dense: d, divider: n, startAdornment: l, endAdornment: o, onClick: t }, w) {
-  const a = !!t && !s;
-  return /* @__PURE__ */ f(
+import { jsx as n, jsxs as a, Fragment as w } from "react/jsx-runtime";
+import { forwardRef as R, useRef as y } from "react";
+import I from "clsx";
+import { resolveLinkRel as j, resolveLinkTarget as D } from "../../../utils/linkAttrs.js";
+const A = R(function({ className: p, children: b, disabled: i, selected: r, dense: h, divider: u, startAdornment: g, endAdornment: k, href: m, target: N, rel: x, onClick: t }, L) {
+  const s = !!m, l = !!t && !i && !s, _ = D(N), o = y(null), d = /* @__PURE__ */ n("span", { className: "smwb-list__item__start", children: g }), c = /* @__PURE__ */ n("span", { className: "smwb-list__item__main", children: b }), f = /* @__PURE__ */ n("span", { className: "smwb-list__item__end", children: k });
+  return /* @__PURE__ */ n(
     "li",
     {
-      ref: w,
+      ref: L,
       role: "listitem",
-      tabIndex: a ? 0 : void 0,
-      "aria-disabled": s || void 0,
-      "aria-selected": m || void 0,
-      onClick: s ? void 0 : t,
-      onKeyDown: a ? (e) => {
+      tabIndex: l ? 0 : void 0,
+      "aria-disabled": i || void 0,
+      "aria-selected": !s && r || void 0,
+      onClick: i || !t ? void 0 : s ? (e) => {
+        var v;
+        (v = o.current) != null && v.contains(e.target) && t(e);
+      } : t,
+      onKeyDown: l ? (e) => {
         (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t == null || t(e));
       } : void 0,
-      className: c("smwb-list__item", r, {
-        "smwb-disabled": s,
-        "smwb-selected": m,
-        "smwb-list__item_dense": d,
-        "smwb-list__item_divider": n
+      className: I("smwb-list__item", p, {
+        "smwb-disabled": i,
+        "smwb-selected": r,
+        "smwb-list__item_link": s,
+        "smwb-list__item_dense": h,
+        "smwb-list__item_divider": u
       }),
       "data-testid": "list-item",
-      children: [
-        /* @__PURE__ */ i("span", { className: "smwb-list__item__start", children: l }),
-        /* @__PURE__ */ i("span", { className: "smwb-list__item__main", children: _ }),
-        /* @__PURE__ */ i("span", { className: "smwb-list__item__end", children: o })
-      ]
+      children: s ? /* @__PURE__ */ a(w, { children: [
+        /* @__PURE__ */ a(
+          "a",
+          {
+            ref: o,
+            className: "smwb-list__item__link",
+            "data-testid": "list-item-link",
+            "aria-current": r ? "page" : void 0,
+            href: i ? void 0 : m,
+            target: _,
+            rel: j(x, _),
+            children: [
+              d,
+              c
+            ]
+          }
+        ),
+        f
+      ] }) : /* @__PURE__ */ a(w, { children: [
+        d,
+        c,
+        f
+      ] })
     }
   );
 });
 export {
-  N as ListItem,
-  N as default
+  A as ListItem,
+  A as default
 };
 //# sourceMappingURL=listItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"listItem.js","sources":["../../../../../src/components/dataDisplay/list/listItem.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport interface ListItemProps {\n  disabled?: boolean;\n  className?: string;\n  selected?: boolean;\n  /** Compact row. */\n  dense?: boolean;\n  /** Render a bottom divider. */\n  divider?: boolean;\n  startAdornment?: React.ReactNode;\n  endAdornment?: React.ReactNode;\n  onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nexport const ListItem = forwardRef<HTMLLIElement, PropsWithChildren<ListItemProps>>(function ListItem(\n  { className, children, disabled, selected, dense, divider, startAdornment, endAdornment, onClick },\n  ref\n) {\n  const interactive = !!onClick && !disabled;\n\n  return (\n    <li\n      ref={ref}\n      role=\"listitem\"\n      tabIndex={interactive ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      aria-selected={selected || undefined}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick?.(e as unknown as React.MouseEvent<HTMLLIElement>);\n              }\n            }\n          : undefined\n      }\n      className={cn(\"smwb-list__item\", className, {\n        \"smwb-disabled\": disabled,\n        \"smwb-selected\": selected,\n        \"smwb-list__item_dense\": dense,\n        \"smwb-list__item_divider\": divider,\n      })}\n      data-testid=\"list-item\"\n    >\n      <span className=\"smwb-list__item__start\">{startAdornment}</span>\n      <span className=\"smwb-list__item__main\">{children}</span>\n      <span className=\"smwb-list__item__end\">{endAdornment}</span>\n    </li>\n  );\n});\n\nexport default ListItem;\n"],"names":["ListItem","forwardRef","className","children","disabled","selected","dense","divider","startAdornment","endAdornment","onClick","ref","interactive","jsxs","cn","jsx"],"mappings":";;;AAgBO,MAAMA,IAAWC,EAA4D,SAClF,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,SAAAC,GAAS,gBAAAC,GAAgB,cAAAC,GAAc,SAAAC,EAAA,GACzFC,GACA;AACA,QAAMC,IAAc,CAAC,CAACF,KAAW,CAACN;AAElC,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,MAAK;AAAA,MACL,UAAUC,IAAc,IAAI;AAAA,MAC5B,iBAAeR,KAAY;AAAA,MAC3B,iBAAeC,KAAY;AAAA,MAC3B,SAASD,IAAW,SAAYM;AAAA,MAChC,WACEE,IACI,CAAC,MAAM;AACL,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAA,GACFF,KAAA,QAAAA,EAAU;AAAA,MAEd,IACA;AAAA,MAEN,WAAWI,EAAG,mBAAmBZ,GAAW;AAAA,QAC1C,iBAAiBE;AAAA,QACjB,iBAAiBC;AAAA,QACjB,yBAAyBC;AAAA,QACzB,2BAA2BC;AAAA,MAAA,CAC5B;AAAA,MACD,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAP,GAAe;AAAA,QACzD,gBAAAO,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAZ,EAAA,CAAS;AAAA,QAClD,gBAAAY,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAN,EAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3D,CAAC;"}
+{"version":3,"file":"listItem.js","sources":["../../../../../src/components/dataDisplay/list/listItem.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useRef } from \"react\";\nimport cn from \"clsx\";\nimport { resolveLinkRel, resolveLinkTarget } from \"../../../utils/linkAttrs\";\n\nexport interface ListItemProps {\n  disabled?: boolean;\n  className?: string;\n  /**\n   * Paints the row as the current one. On a link row (with `href`) it also marks the link as the current page\n   * with `aria-current=\"page\"`, because `aria-selected` is not a state a list item can have; on another row it\n   * stays `aria-selected`.\n   */\n  selected?: boolean;\n  /** Compact row. */\n  dense?: boolean;\n  /** Render a bottom divider. */\n  divider?: boolean;\n  startAdornment?: React.ReactNode;\n  /**\n   * Trailing content. On a link row (with `href`) it sits beside the link, not inside it, so it can hold a control\n   * (a pin button, a toggle) without nesting it in the `<a>`; a click on it does not reach `onClick`.\n   */\n  endAdornment?: React.ReactNode;\n  /**\n   * Makes the row a link: the `startAdornment` and the children sit in an `<a href>` that fills the row, so it can be\n   * focused with Tab, opened with middle click or copied. Keep the `startAdornment` non-interactive; a control\n   * belongs in the `endAdornment`. A disabled row has no `href`. A router takes the\n   * plain click in `onClick` with `event.preventDefault()`, and leaves a modified one (Ctrl, Meta, Shift,\n   * Alt, or a button other than the main one) to the browser, as a router's `Link` does.\n   */\n  href?: string;\n  /**\n   * Where the link (with `href`) opens. By default `\"_blank\"`: a new tab, as for `Button`. Pass `null` for an\n   * internal link: the `target` attribute is left out and the link opens in place. An empty string does the same; any other\n   * string is used as is.\n   */\n  target?: string | null;\n  /**\n   * The `rel` of the link (with `href`). By default `\"noreferrer\"` for a link that opens another tab or window,\n   * and none for one that opens in place. Your own value replaces the default, so add `noreferrer` yourself\n   * if you still want it; an empty string drops the attribute.\n   */\n  rel?: string;\n  /**\n   * Click handler of the row. With an `href` it runs for a click on the link (not on the `endAdornment`), before the\n   * browser follows it, so `event.preventDefault()` cancels the navigation; the row then is not a Tab stop of its\n   * own, the link is.\n   */\n  onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nexport const ListItem = forwardRef<HTMLLIElement, PropsWithChildren<ListItemProps>>(function ListItem(\n  { className, children, disabled, selected, dense, divider, startAdornment, endAdornment, href, target, rel, onClick },\n  ref\n) {\n  const link = !!href;\n  // A link row is focused through its anchor, which Enter follows by itself.\n  const interactive = !!onClick && !disabled && !link;\n  const linkTarget = resolveLinkTarget(target);\n  const linkRef = useRef<HTMLAnchorElement>(null);\n  const start = <span className=\"smwb-list__item__start\">{startAdornment}</span>;\n  const main = <span className=\"smwb-list__item__main\">{children}</span>;\n  const end = <span className=\"smwb-list__item__end\">{endAdornment}</span>;\n  const handleClick: React.MouseEventHandler<HTMLLIElement> | undefined =\n    disabled || !onClick\n      ? undefined\n      : link\n        ? (e) => {\n            // The end adornment is beside the link, and its own clicks are not the row's.\n            if (linkRef.current?.contains(e.target as Node)) onClick(e);\n          }\n        : onClick;\n\n  return (\n    <li\n      ref={ref}\n      role=\"listitem\"\n      tabIndex={interactive ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      aria-selected={(!link && selected) || undefined}\n      onClick={handleClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick?.(e as unknown as React.MouseEvent<HTMLLIElement>);\n              }\n            }\n          : undefined\n      }\n      className={cn(\"smwb-list__item\", className, {\n        \"smwb-disabled\": disabled,\n        \"smwb-selected\": selected,\n        \"smwb-list__item_link\": link,\n        \"smwb-list__item_dense\": dense,\n        \"smwb-list__item_divider\": divider,\n      })}\n      data-testid=\"list-item\"\n    >\n      {link ? (\n        <>\n          <a\n            ref={linkRef}\n            className=\"smwb-list__item__link\"\n            data-testid=\"list-item-link\"\n            aria-current={selected ? \"page\" : undefined}\n            // A disabled link has no href, so it is no link to follow or to focus.\n            href={disabled ? undefined : href}\n            target={linkTarget}\n            rel={resolveLinkRel(rel, linkTarget)}\n          >\n            {start}\n            {main}\n          </a>\n          {end}\n        </>\n      ) : (\n        <>\n          {start}\n          {main}\n          {end}\n        </>\n      )}\n    </li>\n  );\n});\n\nexport default ListItem;\n"],"names":["ListItem","forwardRef","className","children","disabled","selected","dense","divider","startAdornment","endAdornment","href","target","rel","onClick","ref","link","interactive","linkTarget","resolveLinkTarget","linkRef","useRef","start","jsx","main","end","_a","cn","jsxs","Fragment","resolveLinkRel"],"mappings":";;;;AAmDO,MAAMA,IAAWC,EAA4D,SAClF,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,SAAAC,GAAS,gBAAAC,GAAgB,cAAAC,GAAc,MAAAC,GAAM,QAAAC,GAAQ,KAAAC,GAAK,SAAAC,EAAA,GAC5GC,GACA;AACA,QAAMC,IAAO,CAAC,CAACL,GAETM,IAAc,CAAC,CAACH,KAAW,CAACT,KAAY,CAACW,GACzCE,IAAaC,EAAkBP,CAAM,GACrCQ,IAAUC,EAA0B,IAAI,GACxCC,IAAQ,gBAAAC,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAd,GAAe,GACjEe,IAAO,gBAAAD,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAnB,GAAS,GACzDqB,IAAM,gBAAAF,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAb,GAAa;AAWjE,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,MAAK;AAAA,MACL,UAAUE,IAAc,IAAI;AAAA,MAC5B,iBAAeZ,KAAY;AAAA,MAC3B,iBAAgB,CAACW,KAAQV,KAAa;AAAA,MACtC,SAhBFD,KAAY,CAACS,IACT,SACAE,IACE,CAAC,MAAM;;AAEL,SAAIU,IAAAN,EAAQ,YAAR,QAAAM,EAAiB,SAAS,EAAE,aAAyB,CAAC;AAAA,MAC5D,IACAZ;AAAA,MAUJ,WACEG,IACI,CAAC,MAAM;AACL,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAA,GACFH,KAAA,QAAAA,EAAU;AAAA,MAEd,IACA;AAAA,MAEN,WAAWa,EAAG,mBAAmBxB,GAAW;AAAA,QAC1C,iBAAiBE;AAAA,QACjB,iBAAiBC;AAAA,QACjB,wBAAwBU;AAAA,QACxB,yBAAyBT;AAAA,QACzB,2BAA2BC;AAAA,MAAA,CAC5B;AAAA,MACD,eAAY;AAAA,MAEX,cACC,gBAAAoB,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKR;AAAA,YACL,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,gBAAcd,IAAW,SAAS;AAAA,YAElC,MAAMD,IAAW,SAAYM;AAAA,YAC7B,QAAQO;AAAA,YACR,KAAKY,EAAejB,GAAKK,CAAU;AAAA,YAElC,UAAA;AAAA,cAAAI;AAAA,cACAE;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFC;AAAA,MAAA,EAAA,CACH,IAEA,gBAAAG,EAAAC,GAAA,EACG,UAAA;AAAA,QAAAP;AAAA,QACAE;AAAA,QACAC;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

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

@@ -1,45 +1,46 @@
-import { jsxs as o, jsx as s, Fragment as w } from "react/jsx-runtime";
-import b from "react";
-import p from "clsx";
-const N = [
+import { jsxs as o, jsx as s, Fragment as b } from "react/jsx-runtime";
+import p from "react";
+import N from "clsx";
+const M = [
   { from: 0, color: "info" },
   { from: 1, color: "success" }
 ];
-function M(i, m) {
+function $(i, m) {
   let r = "neutral", e = -1 / 0;
   for (const t of m)
     i >= t.from && t.from >= e && (r = t.color, e = t.from);
   return r;
 }
-const R = b.forwardRef(function({
+const v = p.forwardRef(function({
   className: m,
   value: r,
   max: e,
   label: t,
   text: a,
   ofLabel: l = "of",
-  thresholds: d = N,
+  thresholds: d = M,
   color: n,
   hideText: c,
-  ..._
-}, h) {
-  const f = e > 0 ? Math.min(1, Math.max(0, r / e)) : 0, u = n != null ? n : M(f, d);
+  "data-testid": _ = "meter",
+  ...h
+}, u) {
+  const f = e > 0 ? Math.min(1, Math.max(0, r / e)) : 0, w = n != null ? n : $(f, d);
   return /* @__PURE__ */ o(
     "div",
     {
-      ..._,
-      ref: h,
+      ...h,
+      ref: u,
       role: "meter",
       "aria-label": t,
       "aria-valuenow": r,
       "aria-valuemin": 0,
       "aria-valuemax": e,
       "aria-valuetext": `${r} ${l} ${e}`,
-      "data-testid": "meter",
-      className: p("smwb-meter", `smwb-meter_color-${u}`, { "smwb-meter_bar-only": c }, m),
+      "data-testid": _,
+      className: N("smwb-meter", `smwb-meter_color-${w}`, { "smwb-meter_bar-only": c }, m),
       children: [
         /* @__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__ */ o(w, { children: [
+        c ? null : /* @__PURE__ */ s("span", { className: "smwb-meter__text", "aria-hidden": "true", children: a === void 0 ? /* @__PURE__ */ o(b, { children: [
           /* @__PURE__ */ s("b", { className: "smwb-meter__value", children: r }),
           /* @__PURE__ */ o("span", { className: "smwb-meter__of", children: [
             " ",
@@ -53,8 +54,8 @@ const R = b.forwardRef(function({
   );
 });
 export {
-  N as DEFAULT_METER_THRESHOLDS,
-  R as Meter,
-  M as meterColor
+  M as DEFAULT_METER_THRESHOLDS,
+  v as Meter,
+  $ as meterColor
 };
 //# sourceMappingURL=meter.js.map

package/dist/headless/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":";;;AAYO,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":";;;AAYO,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/headless/components/dataDisplay/personChip/personChip.js

@@ -1,34 +1,46 @@
-import { jsxs as h, jsx as o } from "react/jsx-runtime";
-import d from "react";
-import _ from "clsx";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+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 = (a) => {
     var n;
-    return r && (n = Array.from(r)[0]) != null ? n : "";
+    return a && (n = Array.from(a)[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 a of t) i = i * 31 + ((s = a.codePointAt(0)) != null ? s : 0) >>> 0;
   return `hsl(${i % 360} 42% 42%)`;
 }
-const A = d.forwardRef(function({ className: i, name: s, src: r, href: n, compact: t, size: c = 24, colorSeed: p, color: e, meta: l, ...m }, f) {
-  return /* @__PURE__ */ h(
+const P = _.forwardRef(function({
+  className: i,
+  name: s,
+  src: a,
+  href: n,
+  compact: r,
+  size: m = 24,
+  colorSeed: e,
+  color: p,
+  meta: h,
+  "data-testid": f = "person-chip",
+  ...l
+}, d) {
+  return /* @__PURE__ */ c(
     n ? "a" : "span",
     {
-      ...m,
-      ref: f,
+      ...l,
+      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: r ? s : void 0,
+      role: r && !n ? "img" : l.role,
+      "aria-label": r ? s : l["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": r },
         i
       ),
       children: [
@@ -36,24 +48,24 @@ const A = d.forwardRef(function({ className: i, name: s, src: r, href: n, compac
           u,
           {
             className: "smwb-person-chip__avatar",
-            size: c,
-            src: r,
-            color: e != null ? e : w(p != null ? p : s),
+            size: m,
+            src: a,
+            color: p != null ? p : g(e != null ? e : s),
             "aria-hidden": "true",
-            children: b(s)
+            children: w(s)
           }
         ),
-        t ? null : /* @__PURE__ */ h("span", { className: "smwb-person-chip__text", children: [
+        r ? null : /* @__PURE__ */ c("span", { className: "smwb-person-chip__text", children: [
           /* @__PURE__ */ o("span", { className: "smwb-person-chip__name", children: s }),
-          l ? /* @__PURE__ */ o("span", { className: "smwb-person-chip__meta", children: l }) : null
+          h ? /* @__PURE__ */ o("span", { className: "smwb-person-chip__meta", children: h }) : null
         ] })
       ]
     }
   );
 });
 export {
-  A as PersonChip,
-  w as avatarColor,
-  b as initialsOf
+  P as PersonChip,
+  g as avatarColor,
+  w as initialsOf
 };
 //# sourceMappingURL=personChip.js.map

package/dist/headless/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":";;;;AAKO,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":";;;;AAKO,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;"}