@smwb/ui-solid 0.12.0 → 0.13.0

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

@@ -1,21 +1,22 @@
-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 { createComponent as l, 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 '../../../assets/styles/less/components/stat/stat.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                   */
-import { mergeProps as x, splitProps as $, children as m, Show as p } from "solid-js";
-import g from "clsx";
+import { mergeProps as P, splitProps as g, children as m, Show as u } 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 H(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 K(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, p] = 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 l(w, d({
     get component() {
       return e.href ? "a" : "div";
     }
-  }, u, {
+  }, p, {
     ref(t) {
       var i = v(e.ref);
       typeof i == "function" && i(t);
@@ -23,23 +24,25 @@ function H(c) {
     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 [l(u, {
         get when() {
-          return h();
+          return f();
         },
         children: (t) => (() => {
-          var i = D();
+          var i = G();
           return s(i, (() => {
-            var w = y(() => typeof t() == "string");
-            return () => w() ? l(P, {
+            var b = y(() => typeof t() == "string");
+            return () => b() ? l(W, {
               get name() {
                 return t();
               },
@@ -48,54 +51,49 @@ function H(c) {
           })()), i;
         })()
       }), (() => {
-        var t = S();
+        var t = k();
         return s(t, n), t;
       })(), (() => {
-        var t = k();
+        var t = z();
         return s(t, o), t;
-      })(), l(p, {
+      })(), l(u, {
         get when() {
-          return f();
+          return _();
         },
         get children() {
-          var t = z();
-          return s(t, f), t;
+          var t = C();
+          return s(t, _), t;
         }
-      }), l(p, {
+      }), l(u, {
         get when() {
-          return _();
+          return h();
         },
         get children() {
-          var t = C();
-          return s(t, _), t;
+          var t = D();
+          return s(t, h), t;
         }
       })];
     }
   }));
 }
-function J(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 L(c) {
+  const [r, e] = g(c, ["class", "style", "minItemWidth", "children", "ref"]), p = () => 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();
+        return p();
       }
     }), !1, !0), s(n, () => r.children), n;
   })();
 }
 export {
-  H as Stat,
-  J as StatGroup
+  K as Stat,
+  L as StatGroup
 };
 //# sourceMappingURL=stat.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"stat.js","sources":["../../../../src/components/dataDisplay/stat/stat.tsx"],"sourcesContent":["import { 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":"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"}
+{"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/components/dataDisplay/table/table.d.ts

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

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

@@ -1,50 +1,74 @@
-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 { 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 '../../../assets/styles/less/components/table/table.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                     */
-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 j(f) {
-  const [e, g] = k(f, ["class", "dense", "hovered", "children", "paginationSettings", "isLoading", "stickyHeader", "caption", "stackBelow", "ref"]), o = $(() => e.caption);
+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 G(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(), l = r.firstChild, n = l.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 o() != null;
       },
       get children() {
-        var t = S();
-        return a(t, o), 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(l, 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 {
-  j as Table
+  G as Table
 };
 //# sourceMappingURL=table.js.map

package/dist/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":";;;;;;;;AA0BO,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":";;;;;;;;;AA0CO,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/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

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

@@ -1 +1 @@
-{"version":3,"file":"tableBody.js","sources":["../../../../src/components/dataDisplay/table/tableBody.tsx"],"sourcesContent":["import { type JSX, type ParentProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TableBodyProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {\n  ref?: Ref<HTMLTableSectionElement>;\n}\n\nexport function TableBody(props: ParentProps<TableBodyProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"ref\"]);\n  return (\n    <tbody {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-table__body\", local.class)}>\n      {local.children}\n    </tbody>\n  );\n}\n\nexport default TableBody;\n"],"names":["TableBody","props","local","rest","splitProps","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","children"],"mappings":";;;;;AAQO,SAASA,EAAUC,GAAiD;AACzE,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CAAC,YAAY,SAAS,KAAK,CAAC;AACpE,UAAA,MAAA;AAAA,QAAAI,IAAAC,EAAAA,GAAAC,IACwBC,EAAUN,EAAMO,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EAA/BT,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAAoCU,EAAG,oBAAoBX,EAAMY,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAV,GAAA,MACnFH,EAAMc,QAAQ,GAAAX;AAAAA,EAAA,GAAA;AAGrB;"}
+{"version":3,"file":"tableBody.js","sources":["../../../../src/components/dataDisplay/table/tableBody.tsx"],"sourcesContent":["import { type JSX, type ParentProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { ChildElements, TableSectionContext, createSectionRows, useTableLabels } from \"./tableColumns\";\n\nexport interface TableBodyProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {\n  ref?: Ref<HTMLTableSectionElement>;\n}\n\nexport function TableBody(props: ParentProps<TableBodyProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"ref\"]);\n  // The body's rows, so that each cell finds its column after the columns that\n  // `rowSpan` cells above it take.\n  const table = useTableLabels();\n  const rows = createSectionRows(() => !!table?.stacked());\n  return (\n    <tbody {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-table__body\", local.class)}>\n      <TableSectionContext.Provider value={rows}>\n        <ChildElements onItems={rows.setItems}>{local.children}</ChildElements>\n      </TableSectionContext.Provider>\n    </tbody>\n  );\n}\n\nexport default TableBody;\n"],"names":["TableBody","props","local","rest","splitProps","table","useTableLabels","rows","createSectionRows","stacked","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","TableSectionContext","Provider","value","children","ChildElements","onItems","setItems"],"mappings":";;;;;;AASO,SAASA,EAAUC,GAAiD;AACzE,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CAAC,YAAY,SAAS,KAAK,CAAC,GAG9DI,IAAQC,EAAAA,GACRC,IAAOC,EAAkB,MAAM,CAAC,CAACH,GAAOI,SAAS;AACvD,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IACwBC,EAAUX,EAAMY,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EAA/Bd,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAAoCe,EAAG,oBAAoBhB,EAAMiB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAV,GAAAW,EACnFC,EAAoBC,UAAQ;AAAA,MAACC,OAAOjB;AAAAA,MAAI,IAAAkB,WAAA;AAAA,eAAAJ,EACtCK,GAAa;AAAA,UAAA,IAACC,UAAO;AAAA,mBAAEpB,EAAKqB;AAAAA,UAAQ;AAAA,UAAA,IAAAH,WAAA;AAAA,mBAAGvB,EAAMuB;AAAAA,UAAQ;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,CAAA,GAAAf;AAAAA,EAAA,GAAA;AAI9D;"}

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

@@ -2,8 +2,16 @@ import { type JSX, type ParentProps } from "solid-js";
 import { type Ref } from "../../../primitives/mergeRefs";
 export interface TableCellProps extends JSX.TdHTMLAttributes<HTMLTableCellElement> {
     cellAlign?: "left" | "right" | "center";
-    /** The column's name, shown next to the value when the table stacks rows as cards (`Table stackBelow`). */
-    label?: string;
+    /**
+     * The column's name, shown next to the value when the table stacks rows as
+     * cards (`Table stackBelow`). Without it, the cell takes the label of its
+     * column's head cell; `false` keeps the cell unlabelled, so it fills the
+     * card's width (an action, a sub-row). A caller's own `data-label` counts as a
+     * given label too.
+     */
+    label?: string | false;
+    /** The cell's label written by hand, as the attribute the stacked layout shows; `label` replaces it. */
+    "data-label"?: string | undefined;
     ref?: Ref<HTMLTableCellElement>;
 }
 export declare function TableCell(props: ParentProps<TableCellProps>): JSX.Element;

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

@@ -1,28 +1,29 @@
-import { use as n, spread as o, mergeProps as m, insert as c, template as f } from "solid-js/web";
-import { mergeProps as i, splitProps as p } from "solid-js";
-import g from "clsx";
-import { mergeRefs as u } from "../../../primitives/mergeRefs.js";
-var b = /* @__PURE__ */ f("<td>");
-function v(t) {
-  const s = i({
+import { use as g, spread as u, mergeProps as v, insert as w, template as _ } from "solid-js/web";
+import { mergeProps as P, splitProps as S, createSignal as A } from "solid-js";
+import L from "clsx";
+import { mergeRefs as T } from "../../../primitives/mergeRefs.js";
+import { useTableLabels as $, useInTableHead as h, useTableRow as C, cellRowSpan as R, NO_PLACE as E, cellSpan as H } from "./tableColumns.js";
+var k = /* @__PURE__ */ _("<td>");
+function j(o) {
+  const c = P({
     cellAlign: "left"
-  }, t), [e, a] = p(s, ["children", "cellAlign", "class", "label", "ref"]);
+  }, o), [e, l] = S(c, ["children", "cellAlign", "class", "label", "data-label", "ref"]), t = $(), p = h(), [i, m] = A(), r = () => H(l.colSpan ?? l.colspan), s = C(), b = s ? s.registerCell(i, r, () => R(l.rowSpan ?? l.rowspan)) : E, d = () => t?.stacked() && !p && e.label === void 0 && e["data-label"] === void 0 && r() === 1 ? t.labels.get(b.column()) : void 0, f = () => e.label === !1 ? e["data-label"] : e.label ?? e["data-label"] ?? d();
   return (() => {
-    var r = b(), l = u(e.ref);
-    return typeof l == "function" && n(l, r), o(r, m(a, {
+    var a = k(), n = T(e.ref, m);
+    return typeof n == "function" && g(n, a), u(a, v(l, {
       get class() {
-        return g("smwb-table__cell", e.class);
+        return L("smwb-table__cell", e.class);
       },
       get align() {
         return e.cellAlign || "left";
       },
       get "data-label"() {
-        return e.label;
+        return f();
       }
-    }), !1, !0), c(r, () => e.children), r;
+    }), !1, !0), w(a, () => e.children), a;
   })();
 }
 export {
-  v as TableCell
+  j as TableCell
 };
 //# sourceMappingURL=tableCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tableCell.js","sources":["../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TableCellProps extends JSX.TdHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** The column's name, shown next to the value when the table stacks rows as cards (`Table stackBelow`). */\n  label?: string;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableCell(props: ParentProps<TableCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"children\", \"cellAlign\", \"class\", \"label\", \"ref\"]);\n  return (\n    <td\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-table__cell\", local.class)}\n      align={local.cellAlign || \"left\"}\n      data-label={local.label}\n    >\n      {local.children}\n    </td>\n  );\n}\n\nexport default TableCell;\n"],"names":["TableCell","props","merged","mergeProps","cellAlign","local","rest","splitProps","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","align","label","_$insert","children"],"mappings":";;;;;AAWO,SAASA,EAAUC,GAAiD;AACzE,QAAMC,IAASC,EAAW;AAAA,IAAEC,WAAW;AAAA,EAAA,GAAmBH,CAAK,GACzD,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CAAC,YAAY,aAAa,SAAS,SAAS,KAAK,CAAC;AAC3F,UAAA,MAAA;AAAA,QAAAM,IAAAC,EAAAA,GAAAC,IAGSC,EAAUN,EAAMO,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBT,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAEDU,EAAG,oBAAoBX,EAAMY,KAAK;AAAA,MAAC;AAAA,MAAA,IAC1CC,QAAK;AAAA,eAAEb,EAAMD,aAAa;AAAA,MAAM;AAAA,MAAA,IAAA,eAAA;AAAA,eACpBC,EAAMc;AAAAA,MAAK;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAZ,GAAA,MAEtBH,EAAMgB,QAAQ,GAAAb;AAAAA,EAAA,GAAA;AAGrB;"}
+{"version":3,"file":"tableCell.js","sources":["../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { NO_PLACE, cellRowSpan, cellSpan, useInTableHead, useTableLabels, useTableRow } from \"./tableColumns\";\n\nexport interface TableCellProps extends JSX.TdHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /**\n   * The column's name, shown next to the value when the table stacks rows as\n   * cards (`Table stackBelow`). Without it, the cell takes the label of its\n   * column's head cell; `false` keeps the cell unlabelled, so it fills the\n   * card's width (an action, a sub-row). A caller's own `data-label` counts as a\n   * given label too.\n   */\n  label?: string | false;\n  /** The cell's label written by hand, as the attribute the stacked layout shows; `label` replaces it. */\n  \"data-label\"?: string | undefined;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableCell(props: ParentProps<TableCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"children\", \"cellAlign\", \"class\", \"label\", \"data-label\", \"ref\"]);\n\n  const table = useTableLabels();\n  const inHead = useInTableHead();\n  const [element, setElement] = createSignal<HTMLTableCellElement>();\n  const span = (): number => cellSpan(rest.colSpan ?? rest.colspan);\n  const row = useTableRow();\n  const place = row ? row.registerCell(element, span, () => cellRowSpan(rest.rowSpan ?? rest.rowspan)) : NO_PLACE;\n\n  // Only a body cell of a stacked table, with no label of its own and one column\n  // wide, looks its label up in the head.\n  const headLabel = (): string | undefined =>\n    table?.stacked() && !inHead && local.label === undefined && local[\"data-label\"] === undefined && span() === 1\n      ? table.labels.get(place.column())\n      : undefined;\n  const dataLabel = (): string | undefined =>\n    local.label === false ? local[\"data-label\"] : (local.label ?? local[\"data-label\"] ?? headLabel());\n\n  return (\n    <td\n      {...rest}\n      ref={mergeRefs(local.ref, setElement)}\n      class={cn(\"smwb-table__cell\", local.class)}\n      align={local.cellAlign || \"left\"}\n      data-label={dataLabel()}\n    >\n      {local.children}\n    </td>\n  );\n}\n\nexport default TableCell;\n"],"names":["TableCell","props","merged","mergeProps","cellAlign","local","rest","splitProps","table","useTableLabels","inHead","useInTableHead","element","setElement","createSignal","span","cellSpan","colSpan","colspan","row","useTableRow","place","registerCell","cellRowSpan","rowSpan","rowspan","NO_PLACE","headLabel","stacked","label","undefined","labels","get","column","dataLabel","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","align","_$insert","children"],"mappings":";;;;;;AAoBO,SAASA,EAAUC,GAAiD;AACzE,QAAMC,IAASC,EAAW;AAAA,IAAEC,WAAW;AAAA,EAAA,GAAmBH,CAAK,GACzD,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CAAC,YAAY,aAAa,SAAS,SAAS,cAAc,KAAK,CAAC,GAEnGM,IAAQC,EAAAA,GACRC,IAASC,EAAAA,GACT,CAACC,GAASC,CAAU,IAAIC,EAAAA,GACxBC,IAAOA,MAAcC,EAASV,EAAKW,WAAWX,EAAKY,OAAO,GAC1DC,IAAMC,EAAAA,GACNC,IAAQF,IAAMA,EAAIG,aAAaV,GAASG,GAAM,MAAMQ,EAAYjB,EAAKkB,WAAWlB,EAAKmB,OAAO,CAAC,IAAIC,GAIjGC,IAAYA,MAChBnB,GAAOoB,QAAAA,KAAa,CAAClB,KAAUL,EAAMwB,UAAUC,UAAazB,EAAM,YAAY,MAAMyB,UAAaf,QAAW,IACxGP,EAAMuB,OAAOC,IAAIX,EAAMY,OAAAA,CAAQ,IAC/BH,QACAI,IAAYA,MAChB7B,EAAMwB,UAAU,KAAQxB,EAAM,YAAY,IAAKA,EAAMwB,SAASxB,EAAM,YAAY,KAAKsB,EAAAA;AAEvF,UAAA,MAAA;AAAA,QAAAQ,IAAAC,EAAAA,GAAAC,IAGSC,EAAUjC,EAAMkC,KAAK1B,CAAU;AAAC,kBAAAwB,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADjCpC,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAEDqC,EAAG,oBAAoBtC,EAAMuC,KAAK;AAAA,MAAC;AAAA,MAAA,IAC1CC,QAAK;AAAA,eAAExC,EAAMD,aAAa;AAAA,MAAM;AAAA,MAAA,IAAA,eAAA;AAAA,eACpB8B,EAAAA;AAAAA,MAAW;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAY,EAAAX,GAAA,MAEtB9B,EAAM0C,QAAQ,GAAAZ;AAAAA,EAAA,GAAA;AAGrB;"}