@smwb/ui-solid 0.12.1 → 0.14.0

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

@@ -1 +1 @@
-{"version":3,"file":"listItem.js","sources":["../../../../src/components/dataDisplay/list/listItem.tsx"],"sourcesContent":["import { type JSX, type ParentProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface ListItemProps {\n  disabled?: boolean;\n  class?: string;\n  selected?: boolean;\n  /** Compact row. */\n  dense?: boolean;\n  /** Render a bottom divider. */\n  divider?: boolean;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  onClick?: JSX.EventHandlerUnion<HTMLLIElement, MouseEvent>;\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport function ListItem(props: ParentProps<ListItemProps>): JSX.Element {\n  const [local] = splitProps(props, [\n    \"class\",\n    \"children\",\n    \"disabled\",\n    \"selected\",\n    \"dense\",\n    \"divider\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"onClick\",\n    \"ref\",\n  ]);\n\n  const interactive = (): boolean => !!local.onClick && !local.disabled;\n\n  return (\n    <li\n      ref={mergeRefs(local.ref)}\n      role=\"listitem\"\n      tabindex={interactive() ? 0 : undefined}\n      aria-disabled={local.disabled || undefined}\n      aria-selected={local.selected || undefined}\n      onClick={local.disabled ? undefined : local.onClick}\n      onKeyDown={\n        interactive()\n          ? (event) => {\n              if (event.key === \"Enter\" || event.key === \" \") {\n                event.preventDefault();\n                callHandler(\n                  local.onClick,\n                  event as unknown as MouseEvent & { currentTarget: HTMLLIElement; target: Element }\n                );\n              }\n            }\n          : undefined\n      }\n      class={cn(\"smwb-list__item\", local.class, {\n        \"smwb-disabled\": local.disabled,\n        \"smwb-selected\": local.selected,\n        \"smwb-list__item_dense\": local.dense,\n        \"smwb-list__item_divider\": local.divider,\n      })}\n      data-testid=\"list-item\"\n    >\n      <span class=\"smwb-list__item__start\">{local.startAdornment}</span>\n      <span class=\"smwb-list__item__main\">{local.children}</span>\n      <span class=\"smwb-list__item__end\">{local.endAdornment}</span>\n    </li>\n  );\n}\n\nexport default ListItem;\n"],"names":["ListItem","props","local","splitProps","interactive","onClick","disabled","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_$addEventListener","event","key","preventDefault","callHandler","undefined","_ref$","mergeRefs","ref","_$use","_$insert","startAdornment","children","endAdornment","_$effect","_p$","_v$","_v$2","_v$3","selected","_v$4","cn","class","dense","divider","e","_$setAttribute","t","a","o","_$className","_$delegateEvents"],"mappings":";;;;;;AAmBO,SAASA,EAASC,GAAgD;AACvE,QAAM,CAACC,CAAK,IAAIC,EAAWF,GAAO,CAChC,SACA,YACA,YACA,YACA,SACA,WACA,kBACA,gBACA,WACA,KAAK,CACN,GAEKG,IAAcA,MAAe,CAAC,CAACF,EAAMG,WAAW,CAACH,EAAMI;AAE7D,UAAA,MAAA;AAAA,QAAAC,IAAAC,KAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG,aAAAC,IAAAF,EAAAC;AAAAE,IAAAA,EAAAP,GAAA,WASMH,EAAAA,IACKW,CAAAA,MAAU;AACT,OAAIA,EAAMC,QAAQ,WAAWD,EAAMC,QAAQ,SACzCD,EAAME,eAAAA,GACNC,EACEhB,EAAMG,SACNU,CACF;AAAA,IAEJ,IACAI,QAAS,EAAA,GAAAL,EAAAP,GAAA,SAZNL,EAAMI,WAAWa,SAAYjB,EAAMG,SAAO,EAAA;AAAA,QAAAe,IAL9CC,EAAUnB,EAAMoB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAb,CAAA,GAAAiB,EAAAf,GAAA,MA2BaP,EAAMuB,cAAc,GAAAD,EAAAb,GAAA,MACrBT,EAAMwB,QAAQ,GAAAF,EAAAX,GAAA,MACfX,EAAMyB,YAAY,GAAAC,EAAAC,CAAAA,MAAA;AAAA,UAAAC,IA3B5C1B,MAAgB,IAAIe,QAASY,IACxB7B,EAAMI,YAAYa,QAASa,IAC3B9B,EAAM+B,YAAYd,QAASe,IAenCC,EAAG,mBAAmBjC,EAAMkC,OAAO;AAAA,QACxC,iBAAiBlC,EAAMI;AAAAA,QACvB,iBAAiBJ,EAAM+B;AAAAA,QACvB,yBAAyB/B,EAAMmC;AAAAA,QAC/B,2BAA2BnC,EAAMoC;AAAAA,MAAAA,CAClC;AAACR,aAAAA,MAAAD,EAAAU,KAAAC,EAAAjC,GAAA,YAAAsB,EAAAU,IAAAT,CAAA,GAAAC,MAAAF,EAAAY,KAAAD,EAAAjC,GAAA,iBAAAsB,EAAAY,IAAAV,CAAA,GAAAC,MAAAH,EAAAa,KAAAF,EAAAjC,GAAA,iBAAAsB,EAAAa,IAAAV,CAAA,GAAAE,MAAAL,EAAAc,KAAAC,EAAArC,GAAAsB,EAAAc,IAAAT,CAAA,GAAAL;AAAAA,IAAA,GAAA;AAAA,MAAAU,GAAApB;AAAAA,MAAAsB,GAAAtB;AAAAA,MAAAuB,GAAAvB;AAAAA,MAAAwB,GAAAxB;AAAAA,IAAAA,CAAA,GAAAZ;AAAAA,EAAA,GAAA;AAQR;AAEwBsC,EAAA,CAAA,SAAA,SAAA,CAAA;"}
+{"version":3,"file":"listItem.js","sources":["../../../../src/components/dataDisplay/list/listItem.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport { resolveLinkRel, resolveLinkTarget } from \"../../../utils/linkAttrs\";\n\nexport interface ListItemProps {\n  disabled?: boolean;\n  class?: 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?: JSX.Element;\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?: JSX.Element;\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 | undefined;\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 | undefined;\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?: JSX.EventHandlerUnion<HTMLLIElement, MouseEvent>;\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport function ListItem(props: ParentProps<ListItemProps>): JSX.Element {\n  const [local] = splitProps(props, [\n    \"class\",\n    \"children\",\n    \"disabled\",\n    \"selected\",\n    \"dense\",\n    \"divider\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"href\",\n    \"target\",\n    \"rel\",\n    \"onClick\",\n    \"ref\",\n  ]);\n\n  // A link row is focused through its anchor, which Enter follows by itself.\n  const interactive = (): boolean => !!local.onClick && !local.disabled && !local.href;\n  const linkTarget = (): string | undefined => resolveLinkTarget(local.target);\n\n  let linkEl: HTMLAnchorElement | undefined;\n\n  // The start and the main part, which a link row puts in the anchor.\n  const content = (): JSX.Element => (\n    <>\n      <span class=\"smwb-list__item__start\">{local.startAdornment}</span>\n      <span class=\"smwb-list__item__main\">{local.children}</span>\n    </>\n  );\n\n  // Solid binds event handlers once, so both are always attached and read the\n  // props themselves: an item can be disabled, or get another onClick, after it\n  // renders.\n  const onClick: JSX.EventHandler<HTMLLIElement, MouseEvent> = (event) => {\n    if (local.disabled) return;\n    // The end adornment of a link row is beside the link, and its own clicks are not the row's.\n    if (local.href && !linkEl?.contains(event.target as Node)) return;\n    callHandler(local.onClick, event);\n  };\n  const onKeyDown: JSX.EventHandler<HTMLLIElement, KeyboardEvent> = (event) => {\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      callHandler(local.onClick, event as unknown as MouseEvent & { currentTarget: HTMLLIElement; target: Element });\n    }\n  };\n\n  return (\n    <li\n      ref={mergeRefs(local.ref)}\n      role=\"listitem\"\n      tabindex={interactive() ? 0 : undefined}\n      aria-disabled={local.disabled || undefined}\n      aria-selected={(!local.href && local.selected) || undefined}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      class={cn(\"smwb-list__item\", local.class, {\n        \"smwb-disabled\": local.disabled,\n        \"smwb-selected\": local.selected,\n        \"smwb-list__item_link\": !!local.href,\n        \"smwb-list__item_dense\": local.dense,\n        \"smwb-list__item_divider\": local.divider,\n      })}\n      data-testid=\"list-item\"\n    >\n      <Show\n        when={local.href}\n        fallback={\n          <>\n            {content()}\n            <span class=\"smwb-list__item__end\">{local.endAdornment}</span>\n          </>\n        }\n      >\n        <a\n          ref={linkEl}\n          class=\"smwb-list__item__link\"\n          data-testid=\"list-item-link\"\n          aria-current={local.selected ? \"page\" : undefined}\n          // A disabled link has no href, so it is no link to follow or to focus.\n          href={local.disabled ? undefined : local.href}\n          target={linkTarget()}\n          rel={resolveLinkRel(local.rel, linkTarget())}\n        >\n          {content()}\n        </a>\n        <span class=\"smwb-list__item__end\">{local.endAdornment}</span>\n      </Show>\n    </li>\n  );\n}\n\nexport default ListItem;\n"],"names":["ListItem","props","local","splitProps","interactive","onClick","disabled","href","linkTarget","resolveLinkTarget","target","linkEl","content","_el$","_tmpl$","_$insert","startAdornment","_el$2","_tmpl$2","children","event","contains","callHandler","onKeyDown","key","preventDefault","_el$3","_tmpl$5","$$keydown","$$click","_ref$","mergeRefs","ref","_$use","_$createComponent","Show","when","fallback","_$memo","_el$6","_tmpl$4","endAdornment","_el$4","_tmpl$3","_ref$2","_$effect","_p$","_v$","selected","undefined","_v$2","_v$3","_v$4","resolveLinkRel","rel","e","_$setAttribute","t","a","o","_el$5","_v$5","_v$6","_v$7","_v$8","cn","class","dense","divider","_$className","_$delegateEvents"],"mappings":";;;;;;;AAsDO,SAASA,EAASC,GAAgD;AACvE,QAAM,CAACC,CAAK,IAAIC,EAAWF,GAAO,CAChC,SACA,YACA,YACA,YACA,SACA,WACA,kBACA,gBACA,QACA,UACA,OACA,WACA,KAAK,CACN,GAGKG,IAAcA,MAAe,CAAC,CAACF,EAAMG,WAAW,CAACH,EAAMI,YAAY,CAACJ,EAAMK,MAC1EC,IAAaA,MAA0BC,EAAkBP,EAAMQ,MAAM;AAE3E,MAAIC;AAGJ,QAAMC,IAAUA,MAAe,EAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAA,MAEWX,EAAMc,cAAc,GAAAH;AAAAA,EAAA,GAAA,IAAA,MAAA;AAAA,QAAAI,IAAAC,EAAAA;AAAAH,WAAAA,EAAAE,GAAA,MACrBf,EAAMiB,QAAQ,GAAAF;AAAAA,EAAA,IAAA,GAOjDZ,IAAwDe,CAAAA,MAAU;AACtE,IAAIlB,EAAMI,YAENJ,EAAMK,QAAQ,CAACI,GAAQU,SAASD,EAAMV,MAAc,KACxDY,EAAYpB,EAAMG,SAASe,CAAK;AAAA,EAClC,GACMG,IAA6DH,CAAAA,MAAU;AAC3E,IAAIhB,QAAkBgB,EAAMI,QAAQ,WAAWJ,EAAMI,QAAQ,SAC3DJ,EAAMK,eAAAA,GACNH,EAAYpB,EAAMG,SAASe,CAAkF;AAAA,EAEjH;AAEA,UAAA,MAAA;AAAA,QAAAM,IAAAC,EAAAA;AAAAD,IAAAA,EAAAE,YAQeL,GAASG,EAAAG,UADXxB;AAAO,QAAAyB,IALXC,EAAU7B,EAAM8B,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAJ,CAAA,GAAAX,EAAAW,GAAAQ,EAgBxBC,GAAI;AAAA,MAAA,IACHC,OAAI;AAAA,eAAElC,EAAMK;AAAAA,MAAI;AAAA,MAAA,IAChB8B,WAAQ;AAAA,eAAA,CAAAC,EAEH1B,CAAO,IAAA,MAAA;AAAA,cAAA2B,IAAAC,EAAAA;AAAAzB,iBAAAA,EAAAwB,GAAA,MAC4BrC,EAAMuC,YAAY,GAAAF;AAAAA,QAAA,IAAA;AAAA,MAAA;AAAA,MAAA,IAAApB,WAAA;AAAA,eAAA,EAAA,MAAA;AAAA,cAAAuB,IAAAC,EAAAA,GAAAC,IAKnDjC;AAAM,wBAAAiC,KAAA,aAAAX,EAAAW,GAAAF,CAAA,IAAN/B,IAAM+B,GAAA3B,EAAA2B,GASV9B,CAAO,GAAAiC,EAAAC,CAAAA,MAAA;AAAA,gBAAAC,IANM7C,EAAM8C,WAAW,SAASC,QAASC,IAE3ChD,EAAMI,WAAW2C,SAAY/C,EAAMK,MAAI4C,IACrC3C,KAAY4C,IACfC,EAAenD,EAAMoD,KAAK9C,GAAY;AAACuC,mBAAAA,MAAAD,EAAAS,KAAAC,EAAAd,GAAA,gBAAAI,EAAAS,IAAAR,CAAA,GAAAG,MAAAJ,EAAAW,KAAAD,EAAAd,GAAA,QAAAI,EAAAW,IAAAP,CAAA,GAAAC,MAAAL,EAAAY,KAAAF,EAAAd,GAAA,UAAAI,EAAAY,IAAAP,CAAA,GAAAC,MAAAN,EAAAa,KAAAH,EAAAd,GAAA,OAAAI,EAAAa,IAAAP,CAAA,GAAAN;AAAAA,UAAA,GAAA;AAAA,YAAAS,GAAAN;AAAAA,YAAAQ,GAAAR;AAAAA,YAAAS,GAAAT;AAAAA,YAAAU,GAAAV;AAAAA,UAAAA,CAAA,GAAAP;AAAAA,QAAA,GAAA,IAAA,MAAA;AAAA,cAAAkB,IAAApB,EAAAA;AAAAzB,iBAAAA,EAAA6C,GAAA,MAIV1D,EAAMuC,YAAY,GAAAmB;AAAAA,QAAA,IAAA;AAAA,MAAA;AAAA,IAAA,CAAA,CAAA,GAAAf,EAAAC,CAAAA,MAAA;AAAA,UAAAe,IAnC9CzD,MAAgB,IAAI6C,QAASa,IACxB5D,EAAMI,YAAY2C,QAASc,IAC1B,CAAC7D,EAAMK,QAAQL,EAAM8C,YAAaC,QAASe,IAGpDC,EAAG,mBAAmB/D,EAAMgE,OAAO;AAAA,QACxC,iBAAiBhE,EAAMI;AAAAA,QACvB,iBAAiBJ,EAAM8C;AAAAA,QACvB,wBAAwB,CAAC,CAAC9C,EAAMK;AAAAA,QAChC,yBAAyBL,EAAMiE;AAAAA,QAC/B,2BAA2BjE,EAAMkE;AAAAA,MAAAA,CAClC;AAACP,aAAAA,MAAAf,EAAAS,KAAAC,EAAA9B,GAAA,YAAAoB,EAAAS,IAAAM,CAAA,GAAAC,MAAAhB,EAAAW,KAAAD,EAAA9B,GAAA,iBAAAoB,EAAAW,IAAAK,CAAA,GAAAC,MAAAjB,EAAAY,KAAAF,EAAA9B,GAAA,iBAAAoB,EAAAY,IAAAK,CAAA,GAAAC,MAAAlB,EAAAa,KAAAU,EAAA3C,GAAAoB,EAAAa,IAAAK,CAAA,GAAAlB;AAAAA,IAAA,GAAA;AAAA,MAAAS,GAAAN;AAAAA,MAAAQ,GAAAR;AAAAA,MAAAS,GAAAT;AAAAA,MAAAU,GAAAV;AAAAA,IAAAA,CAAA,GAAAvB;AAAAA,EAAA,GAAA;AA4BR;AAEwB4C,EAAA,CAAA,SAAA,SAAA,CAAA;"}

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

@@ -25,6 +25,8 @@ export interface MeterProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "ro
     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 | undefined;
     ref?: Ref<HTMLDivElement>;
 }
 /** The colour for a share of the whole: the last threshold (by `from`) the share reaches. */

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

@@ -1,7 +1,7 @@
-import { use as $, spread as g, mergeProps as w, insert as o, createComponent as _, effect as y, setStyleProperty as L, template as s } from "solid-js/web";
+import { use as $, spread as g, mergeProps as w, insert as a, createComponent as d, effect as y, setStyleProperty as L, template as s } from "solid-js/web";
 import '../../../assets/styles/less/components/meter/meter.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                     */
-import { mergeProps as S, splitProps as T, children as C, Show as p } from "solid-js";
+import { mergeProps as S, splitProps as T, children as C, Show as _ } from "solid-js";
 import P from "clsx";
 import { mergeRefs as E } from "../../../primitives/mergeRefs.js";
 var M = /* @__PURE__ */ s("<span class=smwb-meter__text aria-hidden=true>"), R = /* @__PURE__ */ s("<div><span class=smwb-meter__track aria-hidden=true><span class=smwb-meter__fill>"), k = /* @__PURE__ */ s("<b class=smwb-meter__value>"), D = /* @__PURE__ */ s("<span class=smwb-meter__of> <!> ");
@@ -13,22 +13,22 @@ const H = [{
   color: "success"
 }];
 function A(n, m) {
-  let e = "neutral", a = -1 / 0;
+  let e = "neutral", o = -1 / 0;
   for (const t of m)
-    n >= t.from && t.from >= a && (e = t.color, a = t.from);
+    n >= t.from && t.from >= o && (e = t.color, o = t.from);
   return e;
 }
 function z(n) {
   const m = S({
     ofLabel: "of",
     thresholds: H
-  }, n), [e, a] = T(m, ["class", "value", "max", "label", "text", "ofLabel", "thresholds", "color", "hideText", "ref"]), t = () => e.max > 0 ? Math.min(1, Math.max(0, e.value / e.max)) : 0, h = () => e.color ?? A(t(), e.thresholds), c = C(() => e.text), d = () => {
+  }, n), [e, o] = T(m, ["class", "value", "max", "label", "text", "ofLabel", "thresholds", "color", "hideText", "ref", "data-testid"]), t = () => e.max > 0 ? Math.min(1, Math.max(0, e.value / e.max)) : 0, p = () => e.color ?? A(t(), e.thresholds), c = C(() => e.text), h = () => {
     const r = c();
     return typeof r == "function" ? r(e.value, e.max) : r;
   };
   return (() => {
     var r = R(), b = r.firstChild, v = b.firstChild, u = E(e.ref);
-    return typeof u == "function" && $(u, r), g(r, w(a, {
+    return typeof u == "function" && $(u, r), g(r, w(o, {
       role: "meter",
       get "aria-label"() {
         return e.label;
@@ -43,33 +43,35 @@ function z(n) {
       get "aria-valuetext"() {
         return `${e.value} ${e.ofLabel} ${e.max}`;
       },
-      "data-testid": "meter",
+      get "data-testid"() {
+        return e["data-testid"] ?? "meter";
+      },
       get class() {
-        return P("smwb-meter", `smwb-meter_color-${h()}`, {
+        return P("smwb-meter", `smwb-meter_color-${p()}`, {
           "smwb-meter_bar-only": e.hideText
         }, e.class);
       }
-    }), !1, !0), o(r, _(p, {
+    }), !1, !0), a(r, d(_, {
       get when() {
         return !e.hideText;
       },
       get children() {
         var i = M();
-        return o(i, _(p, {
+        return a(i, d(_, {
           get when() {
             return c() !== void 0;
           },
           get fallback() {
             return [(() => {
               var l = k();
-              return o(l, () => e.value), l;
+              return a(l, () => e.value), l;
             })(), (() => {
               var l = D(), x = l.firstChild, f = x.nextSibling;
-              return f.nextSibling, o(l, () => e.ofLabel, f), o(l, () => e.max, null), l;
+              return f.nextSibling, a(l, () => e.ofLabel, f), a(l, () => e.max, null), l;
             })()];
           },
           get children() {
-            return d();
+            return h();
           }
         })), i;
       }

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

@@ -1 +1 @@
-{"version":3,"file":"meter.js","sources":["../../../../src/components/dataDisplay/meter/meter.tsx"],"sourcesContent":["import { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\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<JSX.HTMLAttributes<HTMLDivElement>, \"role\"> {\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?: JSX.Element | ((value: number, max: number) => JSX.Element);\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  ref?: Ref<HTMLDivElement>;\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 function Meter(props: MeterProps): JSX.Element {\n  const merged = mergeProps({ ofLabel: \"of\", thresholds: DEFAULT_METER_THRESHOLDS }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"value\",\n    \"max\",\n    \"label\",\n    \"text\",\n    \"ofLabel\",\n    \"thresholds\",\n    \"color\",\n    \"hideText\",\n    \"ref\",\n  ]);\n\n  const share = (): number => (local.max > 0 ? Math.min(1, Math.max(0, local.value / local.max)) : 0);\n  const color = (): MeterColor => local.color ?? meterColor(share(), local.thresholds);\n  // Read the text once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy made only to test it has no server DOM node. A\n  // function of (value, max) is kept as it is and called where the text renders.\n  const custom = children(() => local.text as JSX.Element);\n  const text = (): JSX.Element => {\n    const resolved = custom() as JSX.Element | ((value: number, max: number) => JSX.Element);\n    return typeof resolved === \"function\" ? resolved(local.value, local.max) : resolved;\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      role=\"meter\"\n      aria-label={local.label}\n      aria-valuenow={local.value}\n      aria-valuemin={0}\n      aria-valuemax={local.max}\n      aria-valuetext={`${local.value} ${local.ofLabel} ${local.max}`}\n      data-testid=\"meter\"\n      class={cn(\"smwb-meter\", `smwb-meter_color-${color()}`, { \"smwb-meter_bar-only\": local.hideText }, local.class)}\n    >\n      <span class=\"smwb-meter__track\" aria-hidden=\"true\">\n        <span class=\"smwb-meter__fill\" style={{ width: `${share() * 100}%` }} />\n      </span>\n      <Show when={!local.hideText}>\n        <span class=\"smwb-meter__text\" aria-hidden=\"true\">\n          <Show\n            when={custom() !== undefined}\n            fallback={\n              <>\n                <b class=\"smwb-meter__value\">{local.value}</b>\n                <span class=\"smwb-meter__of\">\n                  {\" \"}\n                  {local.ofLabel} {local.max}\n                </span>\n              </>\n            }\n          >\n            {text()}\n          </Show>\n        </span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Meter;\n"],"names":["DEFAULT_METER_THRESHOLDS","from","color","meterColor","share","thresholds","threshold","Meter","props","merged","mergeProps","ofLabel","local","rest","splitProps","max","Math","min","value","custom","children","text","resolved","_el$","_tmpl$2","_el$2","firstChild","_el$3","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","label","cn","hideText","class","_$insert","_$createComponent","Show","when","_el$4","_tmpl$","undefined","fallback","_el$5","_tmpl$3","_el$6","_tmpl$4","_el$7","_el$9","nextSibling","_$effect","_$p","_$setStyleProperty"],"mappings":"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"}
+{"version":3,"file":"meter.js","sources":["../../../../src/components/dataDisplay/meter/meter.tsx"],"sourcesContent":["import { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\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<JSX.HTMLAttributes<HTMLDivElement>, \"role\"> {\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?: JSX.Element | ((value: number, max: number) => JSX.Element);\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 | undefined;\n  ref?: Ref<HTMLDivElement>;\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 function Meter(props: MeterProps): JSX.Element {\n  const merged = mergeProps({ ofLabel: \"of\", thresholds: DEFAULT_METER_THRESHOLDS }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"value\",\n    \"max\",\n    \"label\",\n    \"text\",\n    \"ofLabel\",\n    \"thresholds\",\n    \"color\",\n    \"hideText\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const share = (): number => (local.max > 0 ? Math.min(1, Math.max(0, local.value / local.max)) : 0);\n  const color = (): MeterColor => local.color ?? meterColor(share(), local.thresholds);\n  // Read the text once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy made only to test it has no server DOM node. A\n  // function of (value, max) is kept as it is and called where the text renders.\n  const custom = children(() => local.text as JSX.Element);\n  const text = (): JSX.Element => {\n    const resolved = custom() as JSX.Element | ((value: number, max: number) => JSX.Element);\n    return typeof resolved === \"function\" ? resolved(local.value, local.max) : resolved;\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      role=\"meter\"\n      aria-label={local.label}\n      aria-valuenow={local.value}\n      aria-valuemin={0}\n      aria-valuemax={local.max}\n      aria-valuetext={`${local.value} ${local.ofLabel} ${local.max}`}\n      data-testid={local[\"data-testid\"] ?? \"meter\"}\n      class={cn(\"smwb-meter\", `smwb-meter_color-${color()}`, { \"smwb-meter_bar-only\": local.hideText }, local.class)}\n    >\n      <span class=\"smwb-meter__track\" aria-hidden=\"true\">\n        <span class=\"smwb-meter__fill\" style={{ width: `${share() * 100}%` }} />\n      </span>\n      <Show when={!local.hideText}>\n        <span class=\"smwb-meter__text\" aria-hidden=\"true\">\n          <Show\n            when={custom() !== undefined}\n            fallback={\n              <>\n                <b class=\"smwb-meter__value\">{local.value}</b>\n                <span class=\"smwb-meter__of\">\n                  {\" \"}\n                  {local.ofLabel} {local.max}\n                </span>\n              </>\n            }\n          >\n            {text()}\n          </Show>\n        </span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Meter;\n"],"names":["DEFAULT_METER_THRESHOLDS","from","color","meterColor","share","thresholds","threshold","Meter","props","merged","mergeProps","ofLabel","local","rest","splitProps","max","Math","min","value","custom","children","text","resolved","_el$","_tmpl$2","_el$2","firstChild","_el$3","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","label","cn","hideText","class","_$insert","_$createComponent","Show","when","_el$4","_tmpl$","undefined","fallback","_el$5","_tmpl$3","_el$6","_tmpl$4","_el$7","_el$9","nextSibling","_$effect","_$p","_$setStyleProperty"],"mappings":"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"}

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

@@ -25,6 +25,8 @@ export interface PersonChipProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "
     color?: string;
     /** A second line under the name: a role, a date. */
     meta?: JSX.Element;
+    /** Test id of the root; `person-chip` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLElement>;
 }
 /** A person: avatar and name, a link to their card when `href` is set. */

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

@@ -1,7 +1,7 @@
-import { createComponent as o, Dynamic as l, mergeProps as h, memo as m, insert as a, template as i } from "solid-js/web";
+import { createComponent as o, Dynamic as l, mergeProps as h, memo as m, insert as s, template as i } from "solid-js/web";
 import '../../../assets/styles/less/components/personChip/personChip.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                               */
-import { mergeProps as f, splitProps as u, Show as p, children as g } from "solid-js";
+import { mergeProps as u, splitProps as f, Show as p, children as g } from "solid-js";
 import d from "clsx";
 import { mergeRefs as _ } from "../../../primitives/mergeRefs.js";
 import { Avatar as v } from "../avatar/avatar.js";
@@ -19,29 +19,29 @@ function C(t) {
   const r = g(() => t.meta);
   return (() => {
     var e = b(), n = e.firstChild;
-    return a(n, () => t.name), a(e, o(p, {
+    return s(n, () => t.name), s(e, o(p, {
       get when() {
         return r();
       },
       get children() {
-        var s = w();
-        return a(s, r), s;
+        var a = w();
+        return s(a, r), a;
       }
     }), null), e;
   })();
 }
 function D(t) {
-  const r = f({
+  const r = u({
     size: 24
-  }, t), [e, n] = u(r, ["class", "name", "src", "href", "compact", "size", "colorSeed", "color", "meta", "ref"]);
+  }, t), [e, n] = f(r, ["class", "name", "src", "href", "compact", "size", "colorSeed", "color", "meta", "ref", "data-testid"]);
   return o(l, h({
     get component() {
       return e.href ? "a" : "span";
     }
   }, n, {
-    ref(s) {
+    ref(a) {
       var c = _(e.ref);
-      typeof c == "function" && c(s);
+      typeof c == "function" && c(a);
     },
     get href() {
       return e.href;
@@ -55,7 +55,9 @@ function D(t) {
     get "aria-label"() {
       return m(() => !!e.compact)() ? e.name : void 0;
     },
-    "data-testid": "person-chip",
+    get "data-testid"() {
+      return e["data-testid"] ?? "person-chip";
+    },
     get class() {
       return d("smwb-person-chip", {
         "smwb-person-chip_link": !!e.href,

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

@@ -1 +1 @@
-{"version":3,"file":"personChip.js","sources":["../../../../src/components/dataDisplay/personChip/personChip.tsx"],"sourcesContent":["import { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Avatar, type AvatarSize } from \"../avatar\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\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<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\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?: JSX.Element;\n  ref?: Ref<HTMLElement>;\n}\n\n/** The name and the meta line. Meta is read here, where it renders: markup\n *  created and not rendered (a compact chip) would have no server node. */\nfunction PersonText(props: { name: string; meta: JSX.Element }): JSX.Element {\n  const meta = children(() => props.meta);\n  return (\n    <span class=\"smwb-person-chip__text\">\n      <span class=\"smwb-person-chip__name\">{props.name}</span>\n      <Show when={meta()}>\n        <span class=\"smwb-person-chip__meta\">{meta()}</span>\n      </Show>\n    </span>\n  );\n}\n\n/** A person: avatar and name, a link to their card when `href` is set. */\nexport function PersonChip(props: PersonChipProps): JSX.Element {\n  const merged = mergeProps({ size: 24 as AvatarSize | number }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"name\",\n    \"src\",\n    \"href\",\n    \"compact\",\n    \"size\",\n    \"colorSeed\",\n    \"color\",\n    \"meta\",\n    \"ref\",\n  ]);\n\n  return (\n    <Dynamic\n      component={local.href ? \"a\" : \"span\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      title={local.compact ? local.name : undefined}\n      role={local.compact && !local.href ? \"img\" : undefined}\n      aria-label={local.compact ? local.name : undefined}\n      data-testid=\"person-chip\"\n      class={cn(\"smwb-person-chip\", { \"smwb-person-chip_link\": !!local.href, \"smwb-person-chip_compact\": local.compact }, local.class)}\n    >\n      <Avatar\n        class=\"smwb-person-chip__avatar\"\n        size={local.size}\n        src={local.src}\n        color={local.color ?? avatarColor(local.colorSeed ?? local.name)}\n        aria-hidden=\"true\"\n      >\n        {initialsOf(local.name)}\n      </Avatar>\n      <Show when={!local.compact}>\n        <PersonText name={local.name} meta={local.meta} />\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport default PersonChip;\n"],"names":["initialsOf","name","words","trim","split","filter","Boolean","first","word","Array","from","length","toUpperCase","avatarColor","seed","hash","char","codePointAt","PersonText","props","meta","children","_el$","_tmpl$2","_el$2","firstChild","_$insert","_$createComponent","Show","when","_el$3","_tmpl$","PersonChip","merged","mergeProps","size","local","rest","splitProps","Dynamic","_$mergeProps","component","href","ref","r$","_ref$","mergeRefs","title","_$memo","compact","undefined","role","cn","class","Avatar","src","color","colorSeed"],"mappings":"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"}
+{"version":3,"file":"personChip.js","sources":["../../../../src/components/dataDisplay/personChip/personChip.tsx"],"sourcesContent":["import { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Avatar, type AvatarSize } from \"../avatar\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\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<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\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?: JSX.Element;\n  /** Test id of the root; `person-chip` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\n/** The name and the meta line. Meta is read here, where it renders: markup\n *  created and not rendered (a compact chip) would have no server node. */\nfunction PersonText(props: { name: string; meta: JSX.Element }): JSX.Element {\n  const meta = children(() => props.meta);\n  return (\n    <span class=\"smwb-person-chip__text\">\n      <span class=\"smwb-person-chip__name\">{props.name}</span>\n      <Show when={meta()}>\n        <span class=\"smwb-person-chip__meta\">{meta()}</span>\n      </Show>\n    </span>\n  );\n}\n\n/** A person: avatar and name, a link to their card when `href` is set. */\nexport function PersonChip(props: PersonChipProps): JSX.Element {\n  const merged = mergeProps({ size: 24 as AvatarSize | number }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"name\",\n    \"src\",\n    \"href\",\n    \"compact\",\n    \"size\",\n    \"colorSeed\",\n    \"color\",\n    \"meta\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  return (\n    <Dynamic\n      component={local.href ? \"a\" : \"span\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      title={local.compact ? local.name : undefined}\n      role={local.compact && !local.href ? \"img\" : undefined}\n      aria-label={local.compact ? local.name : undefined}\n      data-testid={local[\"data-testid\"] ?? \"person-chip\"}\n      class={cn(\"smwb-person-chip\", { \"smwb-person-chip_link\": !!local.href, \"smwb-person-chip_compact\": local.compact }, local.class)}\n    >\n      <Avatar\n        class=\"smwb-person-chip__avatar\"\n        size={local.size}\n        src={local.src}\n        color={local.color ?? avatarColor(local.colorSeed ?? local.name)}\n        aria-hidden=\"true\"\n      >\n        {initialsOf(local.name)}\n      </Avatar>\n      <Show when={!local.compact}>\n        <PersonText name={local.name} meta={local.meta} />\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport default PersonChip;\n"],"names":["initialsOf","name","words","trim","split","filter","Boolean","first","word","Array","from","length","toUpperCase","avatarColor","seed","hash","char","codePointAt","PersonText","props","meta","children","_el$","_tmpl$2","_el$2","firstChild","_$insert","_$createComponent","Show","when","_el$3","_tmpl$","PersonChip","merged","mergeProps","size","local","rest","splitProps","Dynamic","_$mergeProps","component","href","ref","r$","_ref$","mergeRefs","title","_$memo","compact","undefined","role","cn","class","Avatar","src","color","colorSeed"],"mappings":"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"}

package/dist/components/dataDisplay/qrCode/index.d.ts

@@ -0,0 +1,2 @@
+export { QrCode, default } from "./qrCode";
+export type { QrCodeProps, QrCodeErrorCorrection } from "./qrCode";

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

@@ -0,0 +1,30 @@
+import type { JSX } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+/** Error-correction level: L 7%, M 15%, Q 25%, H 30% of the code may be damaged or covered. */
+export type QrCodeErrorCorrection = "L" | "M" | "Q" | "H";
+export interface QrCodeProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "children" | "role"> {
+    /** Text encoded in the code (a URL, a pairing token). Encoded as UTF-8 bytes. */
+    value: string;
+    /** Side of the code, quiet zone included, in pixels. Default 192. */
+    size?: number | undefined;
+    /** Shown under the code (a `<figcaption>`), e.g. "Scan with the phone app". */
+    caption?: JSX.Element;
+    /** Accessible name of the image. Default "QR code". */
+    label?: string | undefined;
+    /** Error-correction level: L 7%, M 15% (default), Q 25%, H 30% of the code may be damaged or covered. */
+    errorCorrection?: QrCodeErrorCorrection | undefined;
+    /** Light margin around the code in modules. Default 4, the minimum the QR spec asks for; smaller values hurt scanning. */
+    quietZone?: number | undefined;
+    /** Test id of the root; `qr-code` unless given. */
+    "data-testid"?: string | undefined;
+    ref?: Ref<HTMLElement>;
+}
+/**
+ * A QR code of `value` as an SVG image (role=img): dark modules on a white square —
+ * including the quiet zone — in every theme, so a phone camera reads it in dark mode
+ * too. With `caption` the code sits in a `<figure>` named by the caption. A `value`
+ * past the QR capacity renders an empty white square with `data-error="too-long"`,
+ * any other encode failure with `data-error="encode-failed"`, instead of throwing.
+ */
+export declare function QrCode(props: QrCodeProps): JSX.Element;
+export default QrCode;

package/dist/components/dataDisplay/qrCode/qrCode.js

@@ -0,0 +1,88 @@
+import { use as z, spread as L, mergeProps as M, insert as u, memo as P, effect as A, setAttribute as n, createComponent as x, template as f } from "solid-js/web";
+import '../../../assets/styles/less/components/qrCode/qrCode.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                       */
+import { splitProps as B, children as Z, createMemo as m, Show as y } from "solid-js";
+import D from "clsx";
+import { encode as F } from "uqr";
+import { mergeRefs as I } from "../../../primitives/mergeRefs.js";
+import { qrCodePath as N } from "./qrCodePath.js";
+var T = /* @__PURE__ */ f("<figcaption class=smwb-qr-code__caption>"), U = /* @__PURE__ */ f("<figure><svg class=smwb-qr-code__image role=img shape-rendering=crispEdges xmlns=http://www.w3.org/2000/svg><rect class=smwb-qr-code__light fill=rgb(255,255,255)>"), W = /* @__PURE__ */ f("<svg><path class=smwb-qr-code__dark fill=rgb(0,0,0)></svg>", !1, !0, !1);
+const k = {
+  "too-long": "QR code: value too long",
+  "encode-failed": "QR code: value could not be encoded"
+}, O = 32, R = 256, g = globalThis.__smwbQrCodeWarnings ?? (globalThis.__smwbQrCodeWarnings = /* @__PURE__ */ new Set()), E = (r, o) => {
+  g.has(r) || g.size >= O || (g.add(r), console.error(`[smwb] QrCode: ${o}`));
+}, X = (r, o) => {
+  if (r instanceof RangeError && /too long/i.test(r.message)) {
+    const i = Math.ceil(o.length / R);
+    return E(`too-long:${i}`, `value is too long to encode as a QR code (${o.length} characters; this notice is once per ${R}-character band)`), "too-long";
+  }
+  const l = r instanceof Error ? `${r.name}: ${r.message}` : String(r);
+  return E(`failed:${l}`, `value could not be encoded as a QR code (${l})`), "encode-failed";
+};
+function oe(r) {
+  const [o, l] = B(r, ["class", "value", "size", "caption", "label", "errorCorrection", "quietZone", "ref", "data-testid"]), i = Z(() => o.caption), d = m(() => {
+    try {
+      return {
+        modules: F(o.value, {
+          ecc: o.errorCorrection ?? "M",
+          border: 0
+        }).data,
+        failure: null
+      };
+    } catch (t) {
+      return {
+        modules: null,
+        failure: X(t, o.value)
+      };
+    }
+  }), Q = () => d().modules?.length ?? 0, c = () => Q() + 2 * (o.quietZone ?? 4), v = () => {
+    const t = d().modules;
+    return t ? N(t, o.quietZone ?? 4) : "";
+  }, h = m(() => d().failure), S = m(() => {
+    const t = h();
+    return t === null ? o.label ?? "QR code" : k[t];
+  });
+  return (() => {
+    var t = U(), a = t.firstChild, b = a.firstChild, w = I(o.ref);
+    return typeof w == "function" && z(w, t), L(t, M(l, {
+      get "data-testid"() {
+        return o["data-testid"] ?? "qr-code";
+      },
+      get "data-error"() {
+        return h() ?? void 0;
+      },
+      get class() {
+        return D("smwb-qr-code", o.class);
+      }
+    }), !1, !0), u(a, (() => {
+      var e = P(() => !!v());
+      return () => e() && (() => {
+        var s = W();
+        return A(() => n(s, "d", v())), s;
+      })();
+    })(), null), u(t, x(y, {
+      get when() {
+        return i();
+      },
+      get children() {
+        var e = T();
+        return u(e, i), e;
+      }
+    }), null), A((e) => {
+      var s = S(), p = `0 0 ${c()} ${c()}`, _ = o.size ?? 192, C = o.size ?? 192, $ = c(), q = c();
+      return s !== e.e && n(a, "aria-label", e.e = s), p !== e.t && n(a, "viewBox", e.t = p), _ !== e.a && n(a, "width", e.a = _), C !== e.o && n(a, "height", e.o = C), $ !== e.i && n(b, "width", e.i = $), q !== e.n && n(b, "height", e.n = q), e;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    }), t;
+  })();
+}
+export {
+  oe as QrCode
+};
+//# sourceMappingURL=qrCode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"qrCode.js","sources":["../../../../src/components/dataDisplay/qrCode/qrCode.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { Show, children, createMemo, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { encode } from \"uqr\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { qrCodePath } from \"./qrCodePath\";\n\n/** Error-correction level: L 7%, M 15%, Q 25%, H 30% of the code may be damaged or covered. */\nexport type QrCodeErrorCorrection = \"L\" | \"M\" | \"Q\" | \"H\";\n\nexport interface QrCodeProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"children\" | \"role\"> {\n  /** Text encoded in the code (a URL, a pairing token). Encoded as UTF-8 bytes. */\n  value: string;\n  /** Side of the code, quiet zone included, in pixels. Default 192. */\n  size?: number | undefined;\n  /** Shown under the code (a `<figcaption>`), e.g. \"Scan with the phone app\". */\n  caption?: JSX.Element;\n  /** Accessible name of the image. Default \"QR code\". */\n  label?: string | undefined;\n  /** Error-correction level: L 7%, M 15% (default), Q 25%, H 30% of the code may be damaged or covered. */\n  errorCorrection?: QrCodeErrorCorrection | undefined;\n  /** Light margin around the code in modules. Default 4, the minimum the QR spec asks for; smaller values hurt scanning. */\n  quietZone?: number | undefined;\n  /** Test id of the root; `qr-code` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\n// Why the encoding failed, as the root's `data-error`, and the name the image takes then.\ntype QrCodeFailure = \"too-long\" | \"encode-failed\";\nconst FAILURE_LABEL: Record<QrCodeFailure, string> = {\n  \"too-long\": \"QR code: value too long\",\n  \"encode-failed\": \"QR code: value could not be encoded\",\n};\n\n// Warns once per distinct cause, never per value: the registry keys on the cause the\n// message reports — a capacity band, or the error text — not on the value, so a\n// `QrCode` bound to a text field neither keeps a multi-KB string alive per keystroke nor\n// logs a new line for every character typed. The cap bounds the registry itself: past it\n// the warning stays quiet instead of growing. It lives on globalThis so the server bundle\n// and the client module of one SSR runtime share it: the cause logs once per runtime, not\n// once per bundle. A process.env guard is deliberately not used — like dagView.tsx it\n// would silence only dev SSR.\nconst MAX_WARNED_CAUSES = 32;\nconst CAPACITY_BAND = 256; // characters: one notice per band, not per length\nconst warnedCauses = ((globalThis as { __smwbQrCodeWarnings?: Set<string> }).__smwbQrCodeWarnings ??= new Set());\nconst warnOnce = (cause: string, message: string): void => {\n  if (warnedCauses.has(cause) || warnedCauses.size >= MAX_WARNED_CAUSES) {\n    return;\n  }\n  warnedCauses.add(cause);\n  console.error(`[smwb] QrCode: ${message}`);\n};\n\n// `uqr` reports a value past the QR capacity as a RangeError(\"Data too long\"); it throws\n// other errors for other inputs (a lone surrogate fails in `encodeURI`, an untyped\n// `errorCorrection` fails in its own lookup). Only the first of those is \"too long\", so\n// the failure is read off the error instead of assumed, and the rest are named as what\n// they are.\nconst noteEncodeFailure = (error: unknown, value: string): QrCodeFailure => {\n  if (error instanceof RangeError && /too long/i.test(error.message)) {\n    const band = Math.ceil(value.length / CAPACITY_BAND);\n    warnOnce(\n      `too-long:${band}`,\n      `value is too long to encode as a QR code (${value.length} characters; this notice is once per ` +\n        `${CAPACITY_BAND}-character band)`\n    );\n    return \"too-long\";\n  }\n  const reason = error instanceof Error ? `${error.name}: ${error.message}` : String(error);\n  warnOnce(`failed:${reason}`, `value could not be encoded as a QR code (${reason})`);\n  return \"encode-failed\";\n};\n\n/**\n * A QR code of `value` as an SVG image (role=img): dark modules on a white square —\n * including the quiet zone — in every theme, so a phone camera reads it in dark mode\n * too. With `caption` the code sits in a `<figure>` named by the caption. A `value`\n * past the QR capacity renders an empty white square with `data-error=\"too-long\"`,\n * any other encode failure with `data-error=\"encode-failed\"`, instead of throwing.\n */\nexport function QrCode(props: QrCodeProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"value\",\n    \"size\",\n    \"caption\",\n    \"label\",\n    \"errorCorrection\",\n    \"quietZone\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read the caption once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const caption = children(() => local.caption);\n\n  // Encoding is pure and synchronous: the server and the client memoize the same\n  // matrix, so the path string hydrates byte-identically.\n  const encoded = createMemo((): { modules: boolean[][] | null; failure: QrCodeFailure | null } => {\n    try {\n      return { modules: encode(local.value, { ecc: local.errorCorrection ?? \"M\", border: 0 }).data, failure: null };\n    } catch (error) {\n      return { modules: null, failure: noteEncodeFailure(error, local.value) };\n    }\n  });\n\n  // N: the whole canvas in modules — matrix plus the quiet zone on every side.\n  const moduleCount = (): number => encoded().modules?.length ?? 0;\n  const canvas = (): number => moduleCount() + 2 * (local.quietZone ?? 4);\n  const path = (): string => {\n    const modules = encoded().modules;\n    return modules ? qrCodePath(modules, local.quietZone ?? 4) : \"\";\n  };\n  const failure = createMemo((): QrCodeFailure | null => encoded().failure);\n  // The image is named after the failure, so an empty white square says why it is empty.\n  const imageLabel = createMemo((): string => {\n    const failed = failure();\n    return failed === null ? (local.label ?? \"QR code\") : FAILURE_LABEL[failed];\n  });\n\n  return (\n    <figure\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"qr-code\"}\n      data-error={failure() ?? undefined}\n      class={cn(\"smwb-qr-code\", local.class)}\n    >\n      <svg\n        class=\"smwb-qr-code__image\"\n        role=\"img\"\n        aria-label={imageLabel()}\n        viewBox={`0 0 ${canvas()} ${canvas()}`}\n        width={local.size ?? 192}\n        height={local.size ?? 192}\n        shape-rendering=\"crispEdges\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect class=\"smwb-qr-code__light\" width={canvas()} height={canvas()} fill=\"rgb(255,255,255)\" />\n        {path() && <path class=\"smwb-qr-code__dark\" d={path()} fill=\"rgb(0,0,0)\" />}\n      </svg>\n      <Show when={caption()}>\n        <figcaption class=\"smwb-qr-code__caption\">{caption()}</figcaption>\n      </Show>\n    </figure>\n  );\n}\n\nexport default QrCode;\n"],"names":["FAILURE_LABEL","MAX_WARNED_CAUSES","CAPACITY_BAND","warnedCauses","globalThis","__smwbQrCodeWarnings","Set","warnOnce","cause","message","has","size","add","console","error","noteEncodeFailure","value","RangeError","test","band","Math","ceil","length","reason","Error","name","String","QrCode","props","local","rest","splitProps","caption","children","encoded","createMemo","modules","encode","ecc","errorCorrection","border","data","failure","moduleCount","canvas","quietZone","path","qrCodePath","imageLabel","failed","label","_el$","_tmpl$2","_el$2","firstChild","_el$3","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","undefined","cn","class","_$insert","_c$","_$memo","_el$5","_tmpl$3","_$effect","_$setAttribute","_$createComponent","Show","when","_el$4","_tmpl$","_p$","_v$","_v$2","_v$3","_v$4","_v$5","_v$6","e","t","a","o","i","n"],"mappings":"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"}

package/dist/components/dataDisplay/qrCode/qrCodePath.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The `d` string of the QR code's dark modules: one run-length subpath per horizontal
+ * run of dark modules (`M{x} {y}h{n}v1h-{n}z`), in row order and offset by the quiet
+ * zone. Pure and deterministic — the same matrix always yields the same string, on the
+ * server and in the browser, in ui-react and ui-solid.
+ */
+export declare function qrCodePath(data: readonly (readonly boolean[])[], quietZone: number): string;

package/dist/components/dataDisplay/qrCode/qrCodePath.js

@@ -0,0 +1,20 @@
+function i(n, o) {
+  const r = [];
+  for (let l = 0; l < n.length; l += 1) {
+    const h = n[l];
+    let e = 0;
+    for (; h !== void 0 && e < h.length; )
+      if (h[e]) {
+        let t = 1;
+        for (; e + t < h.length && h[e + t]; )
+          t += 1;
+        r.push(`M${e + o} ${l + o}h${t}v1h-${t}z`), e += t;
+      } else
+        e += 1;
+  }
+  return r.join("");
+}
+export {
+  i as qrCodePath
+};
+//# sourceMappingURL=qrCodePath.js.map

package/dist/components/dataDisplay/qrCode/qrCodePath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qrCodePath.js","sources":["../../../../src/components/dataDisplay/qrCode/qrCodePath.ts"],"sourcesContent":["/**\n * The `d` string of the QR code's dark modules: one run-length subpath per horizontal\n * run of dark modules (`M{x} {y}h{n}v1h-{n}z`), in row order and offset by the quiet\n * zone. Pure and deterministic — the same matrix always yields the same string, on the\n * server and in the browser, in ui-react and ui-solid.\n */\nexport function qrCodePath(data: readonly (readonly boolean[])[], quietZone: number): string {\n  const parts: string[] = [];\n  for (let y = 0; y < data.length; y += 1) {\n    const row = data[y];\n    let x = 0;\n    while (row !== undefined && x < row.length) {\n      if (row[x]) {\n        let run = 1;\n        while (x + run < row.length && row[x + run]) {\n          run += 1;\n        }\n        parts.push(`M${x + quietZone} ${y + quietZone}h${run}v1h-${run}z`);\n        x += run;\n      } else {\n        x += 1;\n      }\n    }\n  }\n  return parts.join(\"\");\n}\n"],"names":["qrCodePath","data","quietZone","parts","y","row","x","run"],"mappings":"AAMO,SAASA,EAAWC,GAAuCC,GAA2B;AAC3F,QAAMC,IAAkB,CAAA;AACxB,WAASC,IAAI,GAAGA,IAAIH,EAAK,QAAQG,KAAK,GAAG;AACvC,UAAMC,IAAMJ,EAAKG,CAAC;AAClB,QAAIE,IAAI;AACR,WAAOD,MAAQ,UAAaC,IAAID,EAAI;AAClC,UAAIA,EAAIC,CAAC,GAAG;AACV,YAAIC,IAAM;AACV,eAAOD,IAAIC,IAAMF,EAAI,UAAUA,EAAIC,IAAIC,CAAG;AACxC,UAAAA,KAAO;AAET,QAAAJ,EAAM,KAAK,IAAIG,IAAIJ,CAAS,IAAIE,IAAIF,CAAS,IAAIK,CAAG,OAAOA,CAAG,GAAG,GACjED,KAAKC;AAAA,MACP;AACE,QAAAD,KAAK;AAAA,EAGX;AACA,SAAOH,EAAM,KAAK,EAAE;AACtB;"}

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

@@ -16,6 +16,8 @@ export interface StatProps extends JSX.HTMLAttributes<HTMLElement> {
     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 | undefined;
     ref?: Ref<HTMLElement>;
 }
 /**