@smwb/ui-solid 0.12.0 → 0.13.0

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 { 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, 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  // 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) 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.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_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","event","callHandler","onKeyDown","key","preventDefault","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","$$keydown","$$click","_ref$","mergeRefs","ref","_$use","_$insert","startAdornment","children","endAdornment","_$effect","_p$","_v$","undefined","_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,UAKvDD,IAAwDE,CAAAA,MAAU;AACtE,IAAKL,EAAMI,YAAUE,EAAYN,EAAMG,SAASE,CAAK;AAAA,EACvD,GACME,IAA6DF,CAAAA,MAAU;AAC3E,IAAIH,QAAkBG,EAAMG,QAAQ,WAAWH,EAAMG,QAAQ,SAC3DH,EAAMI,eAAAA,GACNH,EAAYN,EAAMG,SAASE,CAAkF;AAAA,EAEjH;AAEA,UAAA,MAAA;AAAA,QAAAK,IAAAC,KAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG,aAAAC,IAAAF,EAAAC;AAAAL,IAAAA,EAAAO,YAQeV,GAASG,EAAAQ,UADXf;AAAO,QAAAgB,IALXC,EAAUpB,EAAMqB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAT,CAAA,GAAAa,EAAAX,GAAA,MAeaZ,EAAMwB,cAAc,GAAAD,EAAAT,GAAA,MACrBd,EAAMyB,QAAQ,GAAAF,EAAAP,GAAA,MACfhB,EAAM0B,YAAY,GAAAC,EAAAC,CAAAA,MAAA;AAAA,UAAAC,IAf5C3B,MAAgB,IAAI4B,QAASC,IACxB/B,EAAMI,YAAY0B,QAASE,IAC3BhC,EAAMiC,YAAYH,QAASI,IAGnCC,EAAG,mBAAmBnC,EAAMoC,OAAO;AAAA,QACxC,iBAAiBpC,EAAMI;AAAAA,QACvB,iBAAiBJ,EAAMiC;AAAAA,QACvB,yBAAyBjC,EAAMqC;AAAAA,QAC/B,2BAA2BrC,EAAMsC;AAAAA,MAAAA,CAClC;AAACT,aAAAA,MAAAD,EAAAW,KAAAC,EAAA9B,GAAA,YAAAkB,EAAAW,IAAAV,CAAA,GAAAE,MAAAH,EAAAa,KAAAD,EAAA9B,GAAA,iBAAAkB,EAAAa,IAAAV,CAAA,GAAAC,MAAAJ,EAAAc,KAAAF,EAAA9B,GAAA,iBAAAkB,EAAAc,IAAAV,CAAA,GAAAE,MAAAN,EAAAe,KAAAC,EAAAlC,GAAAkB,EAAAe,IAAAT,CAAA,GAAAN;AAAAA,IAAA,GAAA;AAAA,MAAAW,GAAAT;AAAAA,MAAAW,GAAAX;AAAAA,MAAAY,GAAAZ;AAAAA,MAAAa,GAAAb;AAAAA,IAAAA,CAAA,GAAApB;AAAAA,EAAA,GAAA;AAQR;AAEwBmC,EAAA,CAAA,SAAA,SAAA,CAAA;"}

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

@@ -1,5 +1,5 @@
-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 { mergeProps as S, splitProps as T, children as C, Show as h } from "solid-js";
+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 { 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> <!> ");
@@ -11,22 +11,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 j(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, d = () => e.color ?? A(t(), e.thresholds), c = C(() => e.text), p = () => {
+  }, 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, h = () => e.color ?? A(t(), e.thresholds), c = C(() => e.text), p = () => {
     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;
@@ -41,29 +41,31 @@ function j(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-${d()}`, {
+        return P("smwb-meter", `smwb-meter_color-${h()}`, {
           "smwb-meter_bar-only": e.hideText
         }, e.class);
       }
-    }), !1, !0), o(r, _(h, {
+    }), !1, !0), a(r, d(_, {
       get when() {
         return !e.hideText;
       },
       get children() {
         var i = M();
-        return o(i, _(h, {
+        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() {

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 { 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/headless/components/dataDisplay/personChip/personChip.js

@@ -1,5 +1,5 @@
-import { createComponent as o, Dynamic as l, mergeProps as h, memo as m, insert as a, template as i } from "solid-js/web";
-import { mergeProps as f, splitProps as u, Show as p, children as g } from "solid-js";
+import { createComponent as o, Dynamic as l, mergeProps as h, memo as m, insert as s, template as i } from "solid-js/web";
+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";
@@ -17,29 +17,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 k(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;
@@ -53,7 +53,9 @@ function k(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/headless/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":";;;;;;AAOO,SAASA,EAAWC,GAAsB;AAC/C,QAAMC,IAAQD,EAAKE,KAAAA,EAAOC,MAAM,KAAK,EAAEC,OAAOC,OAAO,GAC/CC,IAAQA,CAACC,MAAsCA,IAAQC,MAAMC,KAAKF,CAAI,EAAE,CAAC,KAAK,KAAM;AAC1F,UAAQD,EAAML,EAAM,CAAC,CAAC,KAAKA,EAAMS,SAAS,IAAIJ,EAAML,EAAMA,EAAMS,SAAS,CAAC,CAAC,IAAI,KAAKC,YAAAA;AACtF;AAMO,SAASC,EAAYC,GAAsB;AAChD,MAAIC,IAAO;AACX,aAAWC,KAAQF,EAAMC,CAAAA,IAAQA,IAAO,MAAMC,EAAKC,YAAY,CAAC,KAAK,OAAQ;AAC7E,SAAO,OAAOF,IAAO,GAAG;AAC1B;AA0BA,SAASG,EAAWC,GAAyD;AAC3E,QAAMC,IAAOC,EAAS,MAAMF,EAAMC,IAAI;AACtC,UAAA,MAAA;AAAA,QAAAE,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG;AAAAC,WAAAA,EAAAF,GAAA,MAE0CL,EAAMlB,IAAI,GAAAyB,EAAAJ,GAAAK,EAC/CC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAET,EAAAA;AAAAA,MAAM;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAS,IAAAC,EAAAA;AAAAL,eAAAA,EAAAI,GACsBV,CAAI,GAAAU;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAR;AAAAA,EAAA,GAAA;AAIlD;AAGO,SAASU,EAAWb,GAAqC;AAC9D,QAAMc,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,EAAA,GAA6BhB,CAAK,GAC9D,CAACiB,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CACvC,SACA,QACA,OACA,QACA,WACA,QACA,aACA,SACA,QACA,OACA,aAAa,CACd;AAED,SAAAN,EACGY,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAEL,EAAMM,OAAO,MAAM;AAAA,IAAM;AAAA,EAAA,GAChCL,GAAI;AAAA,IAAAM,IAAAC,GAAA;AAAA,UAAAC,IACHC,EAAUV,EAAMO,GAAG;AAAC,aAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,IACzBF,OAAI;AAAA,aAAEN,EAAMM;AAAAA,IAAI;AAAA,IAAA,IAChBK,QAAK;AAAA,aAAEC,EAAA,MAAA,CAAA,CAAAZ,EAAMa,OAAO,MAAGb,EAAMnC,OAAOiD;AAAAA,IAAS;AAAA,IAAA,IAC7CC,OAAI;AAAA,aAAEf,EAAMa,WAAW,CAACb,EAAMM,OAAO,QAAQQ;AAAAA,IAAS;AAAA,IAAA,IAAA,eAAA;AAAA,aAC1CF,EAAA,MAAA,CAAA,CAAAZ,EAAMa,OAAO,MAAGb,EAAMnC,OAAOiD;AAAAA,IAAS;AAAA,IAAA,IAAA,gBAAA;AAAA,aACrCd,EAAM,aAAa,KAAK;AAAA,IAAa;AAAA,IAAA,IAAA,QAAA;AAAA,aAC3CgB,EAAG,oBAAoB;AAAA,QAAE,yBAAyB,CAAC,CAAChB,EAAMM;AAAAA,QAAM,4BAA4BN,EAAMa;AAAAA,MAAAA,GAAWb,EAAMiB,KAAK;AAAA,IAAC;AAAA,IAAA,IAAAhC,WAAA;AAAA,aAAA,CAAAM,EAE/H2B,GAAM;AAAA,QAAA,OAAA;AAAA,QAAA,IAELnB,OAAI;AAAA,iBAAEC,EAAMD;AAAAA,QAAI;AAAA,QAAA,IAChBoB,MAAG;AAAA,iBAAEnB,EAAMmB;AAAAA,QAAG;AAAA,QAAA,IACdC,QAAK;AAAA,iBAAEpB,EAAMoB,SAAS3C,EAAYuB,EAAMqB,aAAarB,EAAMnC,IAAI;AAAA,QAAC;AAAA,QAAA,eAAA;AAAA,QAAA,IAAAoB,WAAA;AAAA,iBAG/DrB,EAAWoC,EAAMnC,IAAI;AAAA,QAAC;AAAA,MAAA,CAAA,GAAA0B,EAExBC,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAE,CAACO,EAAMa;AAAAA,QAAO;AAAA,QAAA,IAAA5B,WAAA;AAAA,iBAAAM,EACvBT,GAAU;AAAA,YAAA,IAACjB,OAAI;AAAA,qBAAEmC,EAAMnC;AAAAA,YAAI;AAAA,YAAA,IAAEmB,OAAI;AAAA,qBAAEgB,EAAMhB;AAAAA,YAAI;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAItD;"}

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

@@ -1,90 +1,88 @@
-import { createComponent as l, Dynamic as b, mergeProps as d, insert as s, memo as y, use as I, spread as W, template as a } from "solid-js/web";
-import { mergeProps as x, splitProps as $, children as m, Show as p } from "solid-js";
-import g from "clsx";
+import { createComponent as i, Dynamic as w, mergeProps as d, insert as s, memo as y, use as I, spread as x, template as a } from "solid-js/web";
+import { mergeProps as P, splitProps as g, children as m, Show as p } from "solid-js";
+import $ from "clsx";
 import { mergeRefs as v } from "../../../primitives/mergeRefs.js";
-import { Icon as P } from "../../base/icon/icon.js";
-var S = /* @__PURE__ */ a("<span class=smwb-stat__label>"), k = /* @__PURE__ */ a("<span class=smwb-stat__value>"), z = /* @__PURE__ */ a("<span class=smwb-stat__hint>"), C = /* @__PURE__ */ a("<div class=smwb-stat__extra>"), D = /* @__PURE__ */ a("<span class=smwb-stat__icon aria-hidden=true>"), G = /* @__PURE__ */ a("<div>");
-function E(c) {
-  const r = x({
+import { mergeStyle as S } from "../../../primitives/mergeStyle.js";
+import { Icon as W } from "../../base/icon/icon.js";
+var k = /* @__PURE__ */ a("<span class=smwb-stat__label>"), z = /* @__PURE__ */ a("<span class=smwb-stat__value>"), C = /* @__PURE__ */ a("<span class=smwb-stat__hint>"), D = /* @__PURE__ */ a("<div class=smwb-stat__extra>"), G = /* @__PURE__ */ a("<span class=smwb-stat__icon aria-hidden=true>"), R = /* @__PURE__ */ a("<div>");
+function H(c) {
+  const r = P({
     tone: "neutral",
     variant: "tile"
-  }, c), [e, u] = $(r, ["class", "label", "value", "hint", "icon", "tone", "variant", "href", "children", "ref"]), n = m(() => e.label), o = m(() => e.value), f = m(() => e.hint), h = m(() => e.icon), _ = m(() => e.children);
-  return l(b, d({
+  }, c), [e, u] = g(r, ["class", "label", "value", "hint", "icon", "tone", "variant", "href", "children", "ref", "data-testid"]), n = m(() => e.label), o = m(() => e.value), _ = m(() => e.hint), f = m(() => e.icon), h = m(() => e.children);
+  return i(w, d({
     get component() {
       return e.href ? "a" : "div";
     }
   }, u, {
     ref(t) {
-      var i = v(e.ref);
-      typeof i == "function" && i(t);
+      var l = v(e.ref);
+      typeof l == "function" && l(t);
     },
     get href() {
       return e.href;
     },
-    "data-testid": "stat",
+    get "data-testid"() {
+      return e["data-testid"] ?? "stat";
+    },
     get class() {
-      return g("smwb-stat", `smwb-stat_${e.variant}`, `smwb-stat_tone-${e.tone}`, {
+      return $("smwb-stat", `smwb-stat_${e.variant}`, `smwb-stat_tone-${e.tone}`, {
         "smwb-stat_link": !!e.href,
-        "smwb-stat_with-icon": !!h()
+        "smwb-stat_with-icon": !!f()
       }, e.class);
     },
     get children() {
-      return [l(p, {
+      return [i(p, {
         get when() {
-          return h();
+          return f();
         },
         children: (t) => (() => {
-          var i = D();
-          return s(i, (() => {
-            var w = y(() => typeof t() == "string");
-            return () => w() ? l(P, {
+          var l = G();
+          return s(l, (() => {
+            var b = y(() => typeof t() == "string");
+            return () => b() ? i(W, {
               get name() {
                 return t();
               },
               size: 20
             }) : t();
-          })()), i;
+          })()), l;
         })()
       }), (() => {
-        var t = S();
+        var t = k();
         return s(t, n), t;
       })(), (() => {
-        var t = k();
+        var t = z();
         return s(t, o), t;
-      })(), l(p, {
+      })(), i(p, {
         get when() {
-          return f();
+          return _();
         },
         get children() {
-          var t = z();
-          return s(t, f), t;
+          var t = C();
+          return s(t, _), t;
         }
-      }), l(p, {
+      }), i(p, {
         get when() {
-          return _();
+          return h();
         },
         get children() {
-          var t = C();
-          return s(t, _), t;
+          var t = D();
+          return s(t, h), t;
         }
       })];
     }
   }));
 }
-function F(c) {
-  const [r, e] = $(c, ["class", "style", "minItemWidth", "children", "ref"]), u = () => {
-    if (r.minItemWidth === void 0) return r.style;
-    const n = typeof r.minItemWidth == "number" ? `${r.minItemWidth}px` : r.minItemWidth;
-    return typeof r.style == "string" ? `${r.style};--smwb-stat-min:${n}` : {
-      ...r.style,
-      "--smwb-stat-min": n
-    };
-  };
+function J(c) {
+  const [r, e] = g(c, ["class", "style", "minItemWidth", "children", "ref"]), u = () => S(r.style, {
+    "--smwb-stat-min": typeof r.minItemWidth == "number" ? `${r.minItemWidth}px` : r.minItemWidth
+  });
   return (() => {
-    var n = G(), o = v(r.ref);
-    return typeof o == "function" && I(o, n), W(n, d(e, {
+    var n = R(), o = v(r.ref);
+    return typeof o == "function" && I(o, n), x(n, d(e, {
       get class() {
-        return g("smwb-stat-group", r.class);
+        return $("smwb-stat-group", r.class);
       },
       get style() {
         return u();
@@ -93,7 +91,7 @@ function F(c) {
   })();
 }
 export {
-  E as Stat,
-  F as StatGroup
+  H as Stat,
+  J as StatGroup
 };
 //# sourceMappingURL=stat.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"stat.js","sources":["../../../../../src/components/dataDisplay/stat/stat.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type StatTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface StatProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** What the figure counts. */\n  label: JSX.Element;\n  /** The figure — a number, or a short value such as \"3 / 14\". */\n  value: JSX.Element;\n  /** A line under the value: a comparison, a period, a caveat. */\n  hint?: JSX.Element;\n  /** An icon beside the figure: a Material Symbols name or an element. */\n  icon?: string | JSX.Element;\n  /** Colour of the accent (a tile's edge, the icon). `warning` and `error` colour the figure too. */\n  tone?: StatTone;\n  /** `tile`: a bordered card with an accent edge, for KPIs. `plain`: text only, for rows of small figures. */\n  variant?: \"tile\" | \"plain\";\n  /** Make the whole stat a link to what the figure is made of. */\n  href?: string;\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * A figure with its label: a KPI tile on a dashboard, or a small stat in a row.\n * Children go under it — a meter, a sparkline, a note.\n */\nexport function Stat(props: ParentProps<StatProps>): JSX.Element {\n  const merged = mergeProps({ tone: \"neutral\" as StatTone, variant: \"tile\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"value\",\n    \"hint\",\n    \"icon\",\n    \"tone\",\n    \"variant\",\n    \"href\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const label = children(() => local.label);\n  const value = children(() => local.value);\n  const hint = children(() => local.hint);\n  const icon = children(() => local.icon);\n  const extra = children(() => local.children);\n\n  return (\n    <Dynamic\n      component={local.href ? \"a\" : \"div\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      data-testid=\"stat\"\n      class={cn(\n        \"smwb-stat\",\n        `smwb-stat_${local.variant}`,\n        `smwb-stat_tone-${local.tone}`,\n        { \"smwb-stat_link\": !!local.href, \"smwb-stat_with-icon\": !!icon() },\n        local.class\n      )}\n    >\n      <Show when={icon()}>\n        {(resolved) => (\n          <span class=\"smwb-stat__icon\" aria-hidden=\"true\">\n            {typeof resolved() === \"string\" ? <Icon name={resolved() as string} size={20} /> : resolved()}\n          </span>\n        )}\n      </Show>\n      <span class=\"smwb-stat__label\">{label()}</span>\n      <span class=\"smwb-stat__value\">{value()}</span>\n      <Show when={hint()}>\n        <span class=\"smwb-stat__hint\">{hint()}</span>\n      </Show>\n      <Show when={extra()}>\n        <div class=\"smwb-stat__extra\">{extra()}</div>\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport interface StatGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default. */\n  minItemWidth?: number | string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** A responsive row of stats: as many columns as fit, each at least `minItemWidth` wide. */\nexport function StatGroup(props: ParentProps<StatGroupProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"style\", \"minItemWidth\", \"children\", \"ref\"]);\n  const style = (): JSX.CSSProperties | string | undefined => {\n    if (local.minItemWidth === undefined) return local.style;\n    const width = typeof local.minItemWidth === \"number\" ? `${local.minItemWidth}px` : local.minItemWidth;\n    if (typeof local.style === \"string\") return `${local.style};--smwb-stat-min:${width}`;\n    return { ...local.style, \"--smwb-stat-min\": width };\n  };\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-stat-group\", local.class)} style={style()}>\n      {local.children}\n    </div>\n  );\n}\n\nexport default Stat;\n"],"names":["Stat","props","merged","mergeProps","tone","variant","local","rest","splitProps","label","children","value","hint","icon","extra","_$createComponent","Dynamic","_$mergeProps","component","href","ref","r$","_ref$","mergeRefs","cn","class","Show","when","resolved","_el$5","_tmpl$5","_$insert","_c$","_$memo","Icon","name","size","_el$","_tmpl$","_el$2","_tmpl$2","_el$3","_tmpl$3","_el$4","_tmpl$4","StatGroup","style","minItemWidth","undefined","width","_el$6","_tmpl$6","_ref$2","_$use","_$spread"],"mappings":";;;;;;AA8BO,SAASA,EAAKC,GAA4C;AAC/D,QAAMC,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,IAAuBC,SAAS;AAAA,EAAA,GAAmBJ,CAAK,GACpF,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,SACA,SACA,SACA,QACA,QACA,QACA,WACA,QACA,YACA,KAAK,CACN,GAIKO,IAAQC,EAAS,MAAMJ,EAAMG,KAAK,GAClCE,IAAQD,EAAS,MAAMJ,EAAMK,KAAK,GAClCC,IAAOF,EAAS,MAAMJ,EAAMM,IAAI,GAChCC,IAAOH,EAAS,MAAMJ,EAAMO,IAAI,GAChCC,IAAQJ,EAAS,MAAMJ,EAAMI,QAAQ;AAE3C,SAAAK,EACGC,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAEZ,EAAMa,OAAO,MAAM;AAAA,IAAK;AAAA,EAAA,GAC/BZ,GAAI;AAAA,IAAAa,IAAAC,GAAA;AAAA,UAAAC,IACHC,EAAUjB,EAAMc,GAAG;AAAC,aAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,IACzBF,OAAI;AAAA,aAAEb,EAAMa;AAAAA,IAAI;AAAA,IAAA,eAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAETK,EACL,aACA,aAAalB,EAAMD,OAAO,IAC1B,kBAAkBC,EAAMF,IAAI,IAC5B;AAAA,QAAE,kBAAkB,CAAC,CAACE,EAAMa;AAAAA,QAAM,uBAAuB,CAAC,CAACN,EAAAA;AAAAA,MAAK,GAChEP,EAAMmB,KACR;AAAA,IAAC;AAAA,IAAA,IAAAf,WAAA;AAAA,aAAA,CAAAK,EAEAW,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEd,EAAAA;AAAAA,QAAM;AAAA,QAAAH,UACdkB,QAAQ,MAAA;AAAA,cAAAC,IAAAC,EAAAA;AAAAC,iBAAAA,EAAAF,IAAA,MAAA;AAAA,gBAAAG,IAAAC,EAAA,MAEL,OAAOL,EAAAA,KAAe,QAAQ;AAAA,mBAAA,MAA9BI,EAAAA,IAAAjB,EAAkCmB,GAAI;AAAA,cAAA,IAACC,OAAI;AAAA,uBAAEP,EAAAA;AAAAA,cAAoB;AAAA,cAAEQ,MAAM;AAAA,YAAA,CAAE,IAAOR,EAAAA;AAAAA,UAAU,IAAA,GAAAC;AAAAA,QAAA,GAAA;AAAA,MAAA,CAEhG,IAAA,MAAA;AAAA,YAAAQ,IAAAC,EAAAA;AAAAP,eAAAA,EAAAM,GAE6B5B,CAAK,GAAA4B;AAAAA,MAAA,GAAA,IAAA,MAAA;AAAA,YAAAE,IAAAC,EAAAA;AAAAT,eAAAA,EAAAQ,GACL5B,CAAK,GAAA4B;AAAAA,MAAA,GAAA,GAAAxB,EACpCW,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEf,EAAAA;AAAAA,QAAM;AAAA,QAAA,IAAAF,WAAA;AAAA,cAAA+B,IAAAC,EAAAA;AAAAX,iBAAAA,EAAAU,GACe7B,CAAI,GAAA6B;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAA1B,EAEpCW,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEb,EAAAA;AAAAA,QAAO;AAAA,QAAA,IAAAJ,WAAA;AAAA,cAAAiC,IAAAC,EAAAA;AAAAb,iBAAAA,EAAAY,GACc7B,CAAK,GAAA6B;AAAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAI5C;AASO,SAASE,EAAU5C,GAAiD;AACzE,QAAM,CAACK,GAAOC,CAAI,IAAIC,EAAWP,GAAO,CAAC,SAAS,SAAS,gBAAgB,YAAY,KAAK,CAAC,GACvF6C,IAAQA,MAA8C;AAC1D,QAAIxC,EAAMyC,iBAAiBC,OAAW,QAAO1C,EAAMwC;AACnD,UAAMG,IAAQ,OAAO3C,EAAMyC,gBAAiB,WAAW,GAAGzC,EAAMyC,YAAY,OAAOzC,EAAMyC;AACzF,WAAI,OAAOzC,EAAMwC,SAAU,WAAiB,GAAGxC,EAAMwC,KAAK,oBAAoBG,CAAK,KAC5E;AAAA,MAAE,GAAG3C,EAAMwC;AAAAA,MAAO,mBAAmBG;AAAAA,IAAAA;AAAAA,EAC9C;AACA,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IACsB7B,EAAUjB,EAAMc,GAAG;AAAC,kBAAAgC,KAAA,cAAAC,EAAAD,GAAAF,CAAA,GAAAI,EAAAJ,GAAAjC,EAA/BV,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAAoCiB,EAAG,mBAAmBlB,EAAMmB,KAAK;AAAA,MAAC;AAAA,MAAA,IAAEqB,QAAK;AAAA,eAAEA,EAAAA;AAAAA,MAAO;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAf,EAAAmB,GAAA,MAChG5C,EAAMI,QAAQ,GAAAwC;AAAAA,EAAA,GAAA;AAGrB;"}
+{"version":3,"file":"stat.js","sources":["../../../../../src/components/dataDisplay/stat/stat.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport type StatTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface StatProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** What the figure counts. */\n  label: JSX.Element;\n  /** The figure — a number, or a short value such as \"3 / 14\". */\n  value: JSX.Element;\n  /** A line under the value: a comparison, a period, a caveat. */\n  hint?: JSX.Element;\n  /** An icon beside the figure: a Material Symbols name or an element. */\n  icon?: string | JSX.Element;\n  /** Colour of the accent (a tile's edge, the icon). `warning` and `error` colour the figure too. */\n  tone?: StatTone;\n  /** `tile`: a bordered card with an accent edge, for KPIs. `plain`: text only, for rows of small figures. */\n  variant?: \"tile\" | \"plain\";\n  /** Make the whole stat a link to what the figure is made of. */\n  href?: string;\n  /** Test id of the root; `stat` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * A figure with its label: a KPI tile on a dashboard, or a small stat in a row.\n * Children go under it — a meter, a sparkline, a note.\n */\nexport function Stat(props: ParentProps<StatProps>): JSX.Element {\n  const merged = mergeProps({ tone: \"neutral\" as StatTone, variant: \"tile\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"value\",\n    \"hint\",\n    \"icon\",\n    \"tone\",\n    \"variant\",\n    \"href\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const label = children(() => local.label);\n  const value = children(() => local.value);\n  const hint = children(() => local.hint);\n  const icon = children(() => local.icon);\n  const extra = children(() => local.children);\n\n  return (\n    <Dynamic\n      component={local.href ? \"a\" : \"div\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      data-testid={local[\"data-testid\"] ?? \"stat\"}\n      class={cn(\n        \"smwb-stat\",\n        `smwb-stat_${local.variant}`,\n        `smwb-stat_tone-${local.tone}`,\n        { \"smwb-stat_link\": !!local.href, \"smwb-stat_with-icon\": !!icon() },\n        local.class\n      )}\n    >\n      <Show when={icon()}>\n        {(resolved) => (\n          <span class=\"smwb-stat__icon\" aria-hidden=\"true\">\n            {typeof resolved() === \"string\" ? <Icon name={resolved() as string} size={20} /> : resolved()}\n          </span>\n        )}\n      </Show>\n      <span class=\"smwb-stat__label\">{label()}</span>\n      <span class=\"smwb-stat__value\">{value()}</span>\n      <Show when={hint()}>\n        <span class=\"smwb-stat__hint\">{hint()}</span>\n      </Show>\n      <Show when={extra()}>\n        <div class=\"smwb-stat__extra\">{extra()}</div>\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport interface StatGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default. */\n  minItemWidth?: number | string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** A responsive row of stats: as many columns as fit, each at least `minItemWidth` wide. */\nexport function StatGroup(props: ParentProps<StatGroupProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"style\", \"minItemWidth\", \"children\", \"ref\"]);\n  const style = (): JSX.CSSProperties | string | undefined =>\n    mergeStyle(local.style, {\n      \"--smwb-stat-min\": typeof local.minItemWidth === \"number\" ? `${local.minItemWidth}px` : local.minItemWidth,\n    });\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-stat-group\", local.class)} style={style()}>\n      {local.children}\n    </div>\n  );\n}\n\nexport default Stat;\n"],"names":["Stat","props","merged","mergeProps","tone","variant","local","rest","splitProps","label","children","value","hint","icon","extra","_$createComponent","Dynamic","_$mergeProps","component","href","ref","r$","_ref$","mergeRefs","cn","class","Show","when","resolved","_el$5","_tmpl$5","_$insert","_c$","_$memo","Icon","name","size","_el$","_tmpl$","_el$2","_tmpl$2","_el$3","_tmpl$3","_el$4","_tmpl$4","StatGroup","style","mergeStyle","minItemWidth","_el$6","_tmpl$6","_ref$2","_$use","_$spread"],"mappings":"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"}

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

@@ -1,48 +1,72 @@
-import { use as h, spread as u, mergeProps as d, insert as a, createComponent as i, effect as v, className as b, template as _ } from "solid-js/web";
-import { splitProps as k, children as $, Show as w } from "solid-js";
-import s from "clsx";
-import { TablePagination as y } from "./tablePagination/tablePagination.js";
-import { mergeRefs as P } from "../../../primitives/mergeRefs.js";
-var S = /* @__PURE__ */ _("<caption class=smwb-table__caption>"), B = /* @__PURE__ */ _("<div><div><table>");
-function N(f) {
-  const [e, g] = k(f, ["class", "dense", "hovered", "children", "paginationSettings", "isLoading", "stickyHeader", "caption", "stackBelow", "ref"]), l = $(() => e.caption);
+import { use as h, spread as _, mergeProps as b, insert as n, createComponent as r, effect as k, className as p, template as v } from "solid-js/web";
+import { splitProps as C, children as P, Show as u } from "solid-js";
+import i from "clsx";
+import { TablePagination as T } from "./tablePagination/tablePagination.js";
+import { mergeRefs as $ } from "../../../primitives/mergeRefs.js";
+import { TableLabelsContext as x, TableHeadContext as S, TableSectionContext as y, TableRowContext as B, createColumnLabels as L } from "./tableColumns.js";
+var H = /* @__PURE__ */ v("<caption class=smwb-table__caption>"), R = /* @__PURE__ */ v("<div><div><table>");
+function E(w) {
+  const [e, g] = C(w, ["class", "dense", "hovered", "children", "paginationSettings", "isLoading", "stickyHeader", "caption", "stackBelow", "ref"]), o = P(() => e.caption), f = {
+    stacked: () => !!e.stackBelow,
+    labels: L()
+  };
   return (() => {
-    var r = B(), o = r.firstChild, n = o.firstChild, c = P(e.ref);
-    return typeof c == "function" && h(c, r), u(r, d(g, {
+    var a = R(), s = a.firstChild, l = s.firstChild, c = $(e.ref);
+    return typeof c == "function" && h(c, a), _(a, b(g, {
       get class() {
-        return s("smwb-table__wrapper", e.class, {
+        return i("smwb-table__wrapper", e.class, {
           "smwb-table__wrapper_loading": e.isLoading
         }, e.stackBelow && `smwb-table__wrapper_stack-${e.stackBelow}`);
       }
-    }), !1, !0), a(n, i(w, {
+    }), !1, !0), n(l, r(u, {
       get when() {
-        return l() != null;
+        return o() != null;
       },
       get children() {
-        var t = S();
-        return a(t, l), t;
+        var t = H();
+        return n(t, o), t;
       }
-    }), null), a(n, () => e.children, null), a(r, i(w, {
+    }), null), n(l, r(x.Provider, {
+      value: f,
+      get children() {
+        return r(S.Provider, {
+          value: !1,
+          get children() {
+            return r(y.Provider, {
+              value: void 0,
+              get children() {
+                return r(B.Provider, {
+                  value: void 0,
+                  get children() {
+                    return e.children;
+                  }
+                });
+              }
+            });
+          }
+        });
+      }
+    }), null), n(a, r(u, {
       get when() {
         return e.paginationSettings;
       },
-      children: (t) => i(y, d(t))
-    }), null), v((t) => {
-      var m = s("smwb-table__container", {
+      children: (t) => r(T, b(t))
+    }), null), k((t) => {
+      var d = i("smwb-table__container", {
         "smwb-withPagination": !!e.paginationSettings
-      }), p = s("smwb-table", {
+      }), m = i("smwb-table", {
         "smwb-dense": e.dense,
         "smwb-hovered": e.hovered,
         "smwb-table_sticky-header": e.stickyHeader
       });
-      return m !== t.e && b(o, t.e = m), p !== t.t && b(n, t.t = p), t;
+      return d !== t.e && p(s, t.e = d), m !== t.t && p(l, t.t = m), t;
     }, {
       e: void 0,
       t: void 0
-    }), r;
+    }), a;
   })();
 }
 export {
-  N as Table
+  E as Table
 };
 //# sourceMappingURL=table.js.map

package/dist/headless/components/dataDisplay/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../../../src/components/dataDisplay/table/table.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TablePagination, type TablePaginationProps } from \"./tablePagination/tablePagination\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TableProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  dense?: boolean;\n  isLoading?: boolean;\n  hovered?: boolean;\n  /** Pins the table header while the body scrolls. */\n  stickyHeader?: boolean;\n  /** Optional accessible caption rendered for screen readers. */\n  caption?: JSX.Element;\n  /**\n   * Show each row as a card — cells one under another, each with its column's\n   * label — while the table's container is narrower than this breakpoint:\n   * `sm` (420px), `md` (768px) or `lg` (1024px). A container query: the space\n   * the table has decides, not the window. Labels come from `TableCell label`.\n   */\n  stackBelow?: \"sm\" | \"md\" | \"lg\";\n  paginationSettings?: TablePaginationProps;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Table(props: ParentProps<TableProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"dense\",\n    \"hovered\",\n    \"children\",\n    \"paginationSettings\",\n    \"isLoading\",\n    \"stickyHeader\",\n    \"caption\",\n    \"stackBelow\",\n    \"ref\",\n  ]);\n\n  // Read the caption once: markup is created anew on every read, and during\n  // hydration the copy made for the <Show> test has no server DOM node.\n  const caption = children(() => local.caption);\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-table__wrapper\",\n        local.class,\n        { \"smwb-table__wrapper_loading\": local.isLoading },\n        local.stackBelow && `smwb-table__wrapper_stack-${local.stackBelow}`\n      )}\n    >\n      <div class={cn(\"smwb-table__container\", { \"smwb-withPagination\": !!local.paginationSettings })}>\n        <table\n          class={cn(\"smwb-table\", {\n            \"smwb-dense\": local.dense,\n            \"smwb-hovered\": local.hovered,\n            \"smwb-table_sticky-header\": local.stickyHeader,\n          })}\n        >\n          <Show when={caption() != null}>\n            <caption class=\"smwb-table__caption\">{caption()}</caption>\n          </Show>\n          {local.children}\n        </table>\n      </div>\n      <Show when={local.paginationSettings}>\n        {(settings) => <TablePagination {...settings()} />}\n      </Show>\n    </div>\n  );\n}\n\nexport default Table;\n"],"names":["Table","props","local","rest","splitProps","caption","children","_el$","_tmpl$2","_el$2","firstChild","_el$3","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","isLoading","stackBelow","_$insert","_$createComponent","Show","when","_el$4","_tmpl$","paginationSettings","settings","TablePagination","_$effect","_p$","_v$","_v$2","dense","hovered","stickyHeader","e","_$className","t","undefined"],"mappings":";;;;;;AAwBO,SAASA,EAAMC,GAA6C;AACjE,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CACtC,SACA,SACA,WACA,YACA,sBACA,aACA,gBACA,WACA,cACA,KAAK,CACN,GAIKI,IAAUC,EAAS,MAAMJ,EAAMG,OAAO;AAE5C,UAAA,MAAA;AAAA,QAAAE,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC,YAAAE,IAGSC,EAAUX,EAAMY,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAL,CAAA,GAAAS,EAAAT,GAAAU,EADrBd,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAEDe,EACL,uBACAhB,EAAMiB,OACN;AAAA,UAAE,+BAA+BjB,EAAMkB;AAAAA,QAAAA,GACvClB,EAAMmB,cAAc,6BAA6BnB,EAAMmB,UAAU,EACnE;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAX,GAAAY,EAUIC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEpB,OAAa;AAAA,MAAI;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAoB,IAAAC,EAAAA;AAAAL,eAAAA,EAAAI,GACWrB,CAAO,GAAAqB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAJ,EAAAX,GAAA,MAE9CT,EAAMI,UAAQ,IAAA,GAAAgB,EAAAf,GAAAgB,EAGlBC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEvB,EAAM0B;AAAAA,MAAkB;AAAA,MAAAtB,UAChCuB,CAAAA,MAAQN,EAAMO,GAAeb,EAAKY,CAAQ,CAAA;AAAA,IAAA,CAAM,GAAA,IAAA,GAAAE,EAAAC,CAAAA,MAAA;AAAA,UAAAC,IAfxCf,EAAG,yBAAyB;AAAA,QAAE,uBAAuB,CAAC,CAAChB,EAAM0B;AAAAA,MAAAA,CAAoB,GAACM,IAEnFhB,EAAG,cAAc;AAAA,QACtB,cAAchB,EAAMiC;AAAAA,QACpB,gBAAgBjC,EAAMkC;AAAAA,QACtB,4BAA4BlC,EAAMmC;AAAAA,MAAAA,CACnC;AAACJ,aAAAA,MAAAD,EAAAM,KAAAC,EAAA9B,GAAAuB,EAAAM,IAAAL,CAAA,GAAAC,MAAAF,EAAAQ,KAAAD,EAAA5B,GAAAqB,EAAAQ,IAAAN,CAAA,GAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAM,GAAAG;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA,GAAAlC;AAAAA,EAAA,GAAA;AAaZ;"}
+{"version":3,"file":"table.js","sources":["../../../../../src/components/dataDisplay/table/table.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TablePagination, type TablePaginationProps } from \"./tablePagination/tablePagination\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport {\n  TableHeadContext,\n  TableLabelsContext,\n  TableRowContext,\n  TableSectionContext,\n  createColumnLabels,\n} from \"./tableColumns\";\n\nexport interface TableProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  dense?: boolean;\n  isLoading?: boolean;\n  hovered?: boolean;\n  /** Pins the table header while the body scrolls. */\n  stickyHeader?: boolean;\n  /** Optional accessible caption rendered for screen readers. */\n  caption?: JSX.Element;\n  /**\n   * Show each row as a card — cells one under another, each with its column's\n   * label — while the table's container is narrower than this breakpoint:\n   * `sm` (420px), `md` (768px) or `lg` (1024px). A container query: the space\n   * the table has decides, not the window.\n   *\n   * A cell's label is its `TableCell label`, or else the label of the head cell\n   * of its column: the head cell's `label`, or the text of its content. Columns\n   * count as in HTML: by position in the row, with `colSpan`, after the columns\n   * that `rowSpan` cells of the rows above take in the same head or body. A cell\n   * spanning several columns takes no label from the head and fills the card's\n   * width, and a head cell spanning several columns labels none of them. With\n   * several head rows, the lowest head cell over a column names it. The cells\n   * and rows count as they are drawn, the ones a component renders included.\n   */\n  stackBelow?: \"sm\" | \"md\" | \"lg\";\n  paginationSettings?: TablePaginationProps;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Table(props: ParentProps<TableProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"dense\",\n    \"hovered\",\n    \"children\",\n    \"paginationSettings\",\n    \"isLoading\",\n    \"stickyHeader\",\n    \"caption\",\n    \"stackBelow\",\n    \"ref\",\n  ]);\n\n  // Read the caption once: markup is created anew on every read, and during\n  // hydration the copy made for the <Show> test has no server DOM node.\n  const caption = children(() => local.caption);\n\n  // The head cells' labels, for the body cells of their columns.\n  const labels = { stacked: () => !!local.stackBelow, labels: createColumnLabels() };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-table__wrapper\",\n        local.class,\n        { \"smwb-table__wrapper_loading\": local.isLoading },\n        local.stackBelow && `smwb-table__wrapper_stack-${local.stackBelow}`\n      )}\n    >\n      <div class={cn(\"smwb-table__container\", { \"smwb-withPagination\": !!local.paginationSettings })}>\n        <table\n          class={cn(\"smwb-table\", {\n            \"smwb-dense\": local.dense,\n            \"smwb-hovered\": local.hovered,\n            \"smwb-table_sticky-header\": local.stickyHeader,\n          })}\n        >\n          <Show when={caption() != null}>\n            <caption class=\"smwb-table__caption\">{caption()}</caption>\n          </Show>\n          {/* A table inside a cell of another counts its own rows and cells. */}\n          <TableLabelsContext.Provider value={labels}>\n            <TableHeadContext.Provider value={false}>\n              <TableSectionContext.Provider value={undefined}>\n                <TableRowContext.Provider value={undefined}>{local.children}</TableRowContext.Provider>\n              </TableSectionContext.Provider>\n            </TableHeadContext.Provider>\n          </TableLabelsContext.Provider>\n        </table>\n      </div>\n      <Show when={local.paginationSettings}>\n        {(settings) => <TablePagination {...settings()} />}\n      </Show>\n    </div>\n  );\n}\n\nexport default Table;\n"],"names":["Table","props","local","rest","splitProps","caption","children","labels","stacked","stackBelow","createColumnLabels","_el$","_tmpl$2","_el$2","firstChild","_el$3","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","isLoading","_$insert","_$createComponent","Show","when","_el$4","_tmpl$","TableLabelsContext","Provider","value","TableHeadContext","TableSectionContext","undefined","TableRowContext","paginationSettings","settings","TablePagination","_$effect","_p$","_v$","_v$2","dense","hovered","stickyHeader","e","_$className","t"],"mappings":";;;;;;;AAwCO,SAASA,EAAMC,GAA6C;AACjE,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CACtC,SACA,SACA,WACA,YACA,sBACA,aACA,gBACA,WACA,cACA,KAAK,CACN,GAIKI,IAAUC,EAAS,MAAMJ,EAAMG,OAAO,GAGtCE,IAAS;AAAA,IAAEC,SAASA,MAAM,CAAC,CAACN,EAAMO;AAAAA,IAAYF,QAAQG,EAAAA;AAAAA,EAAmB;AAE/E,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC,YAAAE,IAGSC,EAAUf,EAAMgB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAL,CAAA,GAAAS,EAAAT,GAAAU,EADrBlB,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAEDmB,EACL,uBACApB,EAAMqB,OACN;AAAA,UAAE,+BAA+BrB,EAAMsB;AAAAA,QAAAA,GACvCtB,EAAMO,cAAc,6BAA6BP,EAAMO,UAAU,EACnE;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAgB,EAAAV,GAAAW,EAUIC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEvB,OAAa;AAAA,MAAI;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAuB,IAAAC,EAAAA;AAAAL,eAAAA,EAAAI,GACWxB,CAAO,GAAAwB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAJ,EAAAV,GAAAW,EAG9CK,EAAmBC,UAAQ;AAAA,MAACC,OAAO1B;AAAAA,MAAM,IAAAD,WAAA;AAAA,eAAAoB,EACvCQ,EAAiBF,UAAQ;AAAA,UAACC,OAAO;AAAA,UAAK,IAAA3B,WAAA;AAAA,mBAAAoB,EACpCS,EAAoBH,UAAQ;AAAA,cAACC,OAAOG;AAAAA,cAAS,IAAA9B,WAAA;AAAA,uBAAAoB,EAC3CW,EAAgBL,UAAQ;AAAA,kBAACC,OAAOG;AAAAA,kBAAS,IAAA9B,WAAA;AAAA,2BAAGJ,EAAMI;AAAAA,kBAAQ;AAAA,gBAAA,CAAA;AAAA,cAAA;AAAA,YAAA,CAAA;AAAA,UAAA;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAmB,EAAAd,GAAAe,EAMpEC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE1B,EAAMoC;AAAAA,MAAkB;AAAA,MAAAhC,UAChCiC,CAAAA,MAAQb,EAAMc,GAAenB,EAAKkB,CAAQ,CAAA;AAAA,IAAA,CAAM,GAAA,IAAA,GAAAE,EAAAC,CAAAA,MAAA;AAAA,UAAAC,IAtBxCrB,EAAG,yBAAyB;AAAA,QAAE,uBAAuB,CAAC,CAACpB,EAAMoC;AAAAA,MAAAA,CAAoB,GAACM,IAEnFtB,EAAG,cAAc;AAAA,QACtB,cAAcpB,EAAM2C;AAAAA,QACpB,gBAAgB3C,EAAM4C;AAAAA,QACtB,4BAA4B5C,EAAM6C;AAAAA,MAAAA,CACnC;AAACJ,aAAAA,MAAAD,EAAAM,KAAAC,EAAApC,GAAA6B,EAAAM,IAAAL,CAAA,GAAAC,MAAAF,EAAAQ,KAAAD,EAAAlC,GAAA2B,EAAAQ,IAAAN,CAAA,GAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAM,GAAAZ;AAAAA,MAAAc,GAAAd;AAAAA,IAAAA,CAAA,GAAAzB;AAAAA,EAAA,GAAA;AAoBZ;"}

package/dist/headless/components/dataDisplay/table/tableBody.js

@@ -1,20 +1,33 @@
-import { use as l, spread as m, mergeProps as a, insert as f, template as n } from "solid-js/web";
-import { splitProps as p } from "solid-js";
-import c from "clsx";
-import { mergeRefs as i } from "../../../primitives/mergeRefs.js";
-var u = /* @__PURE__ */ n("<tbody>");
-function g(o) {
-  const [e, s] = p(o, ["children", "class", "ref"]);
+import { use as c, spread as m, mergeProps as i, insert as p, createComponent as s, template as f } from "solid-js/web";
+import { splitProps as u } from "solid-js";
+import d from "clsx";
+import { mergeRefs as b } from "../../../primitives/mergeRefs.js";
+import { useTableLabels as g, createSectionRows as h, TableSectionContext as v, ChildElements as _ } from "./tableColumns.js";
+var y = /* @__PURE__ */ f("<tbody>");
+function x(n) {
+  const [r, l] = u(n, ["children", "class", "ref"]), a = g(), t = h(() => !!a?.stacked());
   return (() => {
-    var r = u(), t = i(e.ref);
-    return typeof t == "function" && l(t, r), m(r, a(s, {
+    var e = y(), o = b(r.ref);
+    return typeof o == "function" && c(o, e), m(e, i(l, {
       get class() {
-        return c("smwb-table__body", e.class);
+        return d("smwb-table__body", r.class);
       }
-    }), !1, !0), f(r, () => e.children), r;
+    }), !1, !0), p(e, s(v.Provider, {
+      value: t,
+      get children() {
+        return s(_, {
+          get onItems() {
+            return t.setItems;
+          },
+          get children() {
+            return r.children;
+          }
+        });
+      }
+    })), e;
   })();
 }
 export {
-  g as TableBody
+  x as TableBody
 };
 //# sourceMappingURL=tableBody.js.map