@smwb/ui-solid 0.11.1 → 0.12.0

package/dist/components/navigation/tabs/tab/tab.js

@@ -1,78 +1,79 @@
-import { createComponent as o, Dynamic as w, mergeProps as h, use as $, insert as s, memo as C, template as c } from "solid-js/web";
-import '../../../../assets/styles/less/components/tabs/tab/tab.entry.css';/* empty css                                                         */
-import { mergeProps as k, splitProps as R, Show as p } from "solid-js";
-import x from "clsx";
-import { useTabsContext as P } from "../tabsContext.js";
-import { mergeRefs as d } from "../../../../primitives/mergeRefs.js";
-import { callHandler as A } from "../../../../primitives/callHandler.js";
-import { Ripple as y } from "../../../base/ripple/ripple.js";
-var T = /* @__PURE__ */ c("<span class=smwb-tab__icon>"), D = /* @__PURE__ */ c("<span class=smwb-tab__text-label>"), H = /* @__PURE__ */ c("<span class=smwb-tab__content>");
-function I(f) {
-  const r = P(), i = r ? r.registerTab() : -1, u = k({
+import { createComponent as s, Dynamic as C, mergeProps as k, use as R, insert as a, memo as x, template as c } from "solid-js/web";
+import '../../../../assets/styles/less/components/tabs/tab/tab.entry.css';import '../../../../assets/styles/less/tokens.entry.css';/* empty css                                        */
+/* empty css                                                         */
+import { mergeProps as P, splitProps as A, children as f, Show as u } from "solid-js";
+import y from "clsx";
+import { useTabsContext as T } from "../tabsContext.js";
+import { mergeRefs as g } from "../../../../primitives/mergeRefs.js";
+import { callHandler as D } from "../../../../primitives/callHandler.js";
+import { Ripple as H } from "../../../base/ripple/ripple.js";
+var S = /* @__PURE__ */ c("<span class=smwb-tab__icon>"), j = /* @__PURE__ */ c("<span class=smwb-tab__text-label>"), q = /* @__PURE__ */ c("<span class=smwb-tab__content>");
+function M(_) {
+  const r = T(), i = r ? r.registerTab() : -1, v = P({
     isActive: !1,
     stacked: !1
-  }, f), [e, g] = R(u, ["class", "label", "isActive", "contentRef", "icon", "stacked", "tag", "disabled", "onClick", "ref"]);
-  let m;
-  const l = () => r ? r.value() === i : e.isActive, _ = (t) => {
-    r ? r.onChange(t, i) : A(e.onClick, t);
-  }, v = (t) => {
-    m?.onRipple(t);
-  }, b = () => e.tag ?? "button";
-  return o(w, h({
+  }, _), [t, w] = A(v, ["class", "label", "isActive", "contentRef", "icon", "stacked", "tag", "disabled", "onClick", "ref"]), m = f(() => t.icon), p = f(() => t.label);
+  let b;
+  const l = () => r ? r.value() === i : t.isActive, h = (e) => {
+    r ? r.onChange(e, i) : D(t.onClick, e);
+  }, $ = (e) => {
+    b?.onRipple(e);
+  }, d = () => t.tag ?? "button";
+  return s(C, k({
     get component() {
-      return b();
+      return d();
     }
-  }, g, {
-    ref(t) {
-      var a = d(e.ref);
-      typeof a == "function" && a(t);
+  }, w, {
+    ref(e) {
+      var o = g(t.ref);
+      typeof o == "function" && o(e);
     },
     get class() {
-      return x("smwb-tab", e.class, {
+      return y("smwb-tab", t.class, {
         "smwb-tab--active": l(),
-        "smwb-tab--stacked": e.stacked,
-        "smwb-tab--disabled": e.disabled
+        "smwb-tab--stacked": t.stacked,
+        "smwb-tab--disabled": t.disabled
       });
     },
-    onClick: _,
-    onPointerDown: v,
+    onClick: h,
+    onPointerDown: $,
     role: "tab",
     get "aria-selected"() {
       return l();
     },
     get "aria-disabled"() {
-      return e.disabled || void 0;
+      return t.disabled || void 0;
     },
     get tabindex() {
       return l() ? 0 : -1;
     },
     get disabled() {
-      return C(() => b() === "button")() ? e.disabled : void 0;
+      return x(() => d() === "button")() ? t.disabled : void 0;
     },
     get children() {
       return [(() => {
-        var t = H(), a = d(e.contentRef, (n) => {
+        var e = q(), o = g(t.contentRef, (n) => {
           r?.indicatorContent && r.setContentRef(i, n);
         });
-        return typeof a == "function" && $(a, t), s(t, o(p, {
+        return typeof o == "function" && R(o, e), a(e, s(u, {
           get when() {
-            return e.icon;
+            return m();
           },
           get children() {
-            var n = T();
-            return s(n, () => e.icon), n;
+            var n = S();
+            return a(n, m), n;
           }
-        }), null), s(t, o(p, {
+        }), null), a(e, s(u, {
           get when() {
-            return e.label;
+            return p();
           },
           get children() {
-            var n = D();
-            return s(n, () => e.label), n;
+            var n = j();
+            return a(n, p), n;
           }
-        }), null), t;
-      })(), o(y, {
-        actionRef: (t) => m = t,
+        }), null), e;
+      })(), s(H, {
+        actionRef: (e) => b = e,
         classes: {
           child: "tab__ripple-child"
         }
@@ -81,6 +82,6 @@ function I(f) {
   }));
 }
 export {
-  I as Tab
+  M as Tab
 };
 //# sourceMappingURL=tab.js.map

package/dist/components/navigation/tabs/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../../base/ripple\";\nimport { useTabsContext } from \"../tabsContext\";\nimport { mergeRefs, type Ref } from \"../../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../../primitives/callHandler\";\n\nexport interface TabProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: JSX.Element;\n  isActive?: boolean;\n  contentRef?: Ref<HTMLSpanElement>;\n  icon?: JSX.Element;\n  stacked?: boolean;\n  tag?: string;\n  disabled?: boolean;\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport function Tab(props: ParentProps<TabProps>): JSX.Element {\n  const ctx = useTabsContext();\n  const index = ctx ? ctx.registerTab() : -1;\n  const merged = mergeProps({ isActive: false, stacked: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"isActive\",\n    \"contentRef\",\n    \"icon\",\n    \"stacked\",\n    \"tag\",\n    \"disabled\",\n    \"onClick\",\n    \"ref\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const active = (): boolean => (ctx ? ctx.value() === index : local.isActive);\n\n  const onClick: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, MouseEvent> = (event) => {\n    if (ctx) {\n      ctx.onChange(event, index);\n    } else {\n      callHandler(local.onClick, event);\n    }\n  };\n\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  const tag = (): string => local.tag ?? \"button\";\n\n  return (\n    <Dynamic\n      component={tag()}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-tab\", local.class, {\n        \"smwb-tab--active\": active(),\n        \"smwb-tab--stacked\": local.stacked,\n        \"smwb-tab--disabled\": local.disabled,\n      })}\n      onClick={onClick}\n      onPointerDown={onPointerDown}\n      role=\"tab\"\n      aria-selected={active()}\n      aria-disabled={local.disabled || undefined}\n      tabindex={active() ? 0 : -1}\n      disabled={tag() === \"button\" ? local.disabled : undefined}\n    >\n      <span\n        class=\"smwb-tab__content\"\n        ref={mergeRefs(local.contentRef, (el) => {\n          if (ctx?.indicatorContent) ctx.setContentRef(index, el as HTMLSpanElement);\n        })}\n      >\n        <Show when={local.icon}>\n          <span class=\"smwb-tab__icon\">{local.icon}</span>\n        </Show>\n        <Show when={local.label}>\n          <span class=\"smwb-tab__text-label\">{local.label}</span>\n        </Show>\n      </span>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} classes={{ child: \"tab__ripple-child\" }} />\n    </Dynamic>\n  );\n}\n\nexport default Tab;\n"],"names":["Tab","props","ctx","useTabsContext","index","registerTab","merged","mergeProps","isActive","stacked","local","rest","splitProps","rippleActions","active","value","onClick","event","onChange","callHandler","onPointerDown","onRipple","tag","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","disabled","role","undefined","tabindex","_$memo","children","_el$","_tmpl$3","_ref$2","contentRef","el","indicatorContent","setContentRef","_$use","_$insert","Show","when","icon","_el$2","_tmpl$","label","_el$3","_tmpl$2","Ripple","actionRef","actions","classes","child"],"mappings":"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"}
+{"version":3,"file":"tab.js","sources":["../../../../../src/components/navigation/tabs/tab/tab.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 { Ripple, type RippleActionsRef } from \"../../../base/ripple\";\nimport { useTabsContext } from \"../tabsContext\";\nimport { mergeRefs, type Ref } from \"../../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../../primitives/callHandler\";\n\nexport interface TabProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: JSX.Element;\n  isActive?: boolean;\n  contentRef?: Ref<HTMLSpanElement>;\n  icon?: JSX.Element;\n  stacked?: boolean;\n  tag?: string;\n  /** With `tag=\"a\"`: where the link goes, so the tab stays a real link. */\n  href?: string;\n  disabled?: boolean;\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport function Tab(props: ParentProps<TabProps>): JSX.Element {\n  const ctx = useTabsContext();\n  const index = ctx ? ctx.registerTab() : -1;\n  const merged = mergeProps({ isActive: false, stacked: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"isActive\",\n    \"contentRef\",\n    \"icon\",\n    \"stacked\",\n    \"tag\",\n    \"disabled\",\n    \"onClick\",\n    \"ref\",\n  ]);\n\n  // Read the icon and the label once: markup passed as a prop is created anew on\n  // every read, and during hydration the copy made for the <Show> test has no\n  // server DOM node to adopt (\"Unable to find DOM nodes for hydration key\").\n  const icon = children(() => local.icon);\n  const label = children(() => local.label);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const active = (): boolean => (ctx ? ctx.value() === index : local.isActive);\n\n  const onClick: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, MouseEvent> = (event) => {\n    if (ctx) {\n      ctx.onChange(event, index);\n    } else {\n      callHandler(local.onClick, event);\n    }\n  };\n\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  const tag = (): string => local.tag ?? \"button\";\n\n  return (\n    <Dynamic\n      component={tag()}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-tab\", local.class, {\n        \"smwb-tab--active\": active(),\n        \"smwb-tab--stacked\": local.stacked,\n        \"smwb-tab--disabled\": local.disabled,\n      })}\n      onClick={onClick}\n      onPointerDown={onPointerDown}\n      role=\"tab\"\n      aria-selected={active()}\n      aria-disabled={local.disabled || undefined}\n      tabindex={active() ? 0 : -1}\n      disabled={tag() === \"button\" ? local.disabled : undefined}\n    >\n      <span\n        class=\"smwb-tab__content\"\n        ref={mergeRefs(local.contentRef, (el) => {\n          if (ctx?.indicatorContent) ctx.setContentRef(index, el as HTMLSpanElement);\n        })}\n      >\n        <Show when={icon()}>\n          <span class=\"smwb-tab__icon\">{icon()}</span>\n        </Show>\n        <Show when={label()}>\n          <span class=\"smwb-tab__text-label\">{label()}</span>\n        </Show>\n      </span>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} classes={{ child: \"tab__ripple-child\" }} />\n    </Dynamic>\n  );\n}\n\nexport default Tab;\n"],"names":["Tab","props","ctx","useTabsContext","index","registerTab","merged","mergeProps","isActive","stacked","local","rest","splitProps","icon","children","label","rippleActions","active","value","onClick","event","onChange","callHandler","onPointerDown","onRipple","tag","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","disabled","role","undefined","tabindex","_$memo","_el$","_tmpl$3","_ref$2","contentRef","el","indicatorContent","setContentRef","_$use","_$insert","Show","when","_el$2","_tmpl$","_el$3","_tmpl$2","Ripple","actionRef","actions","classes","child"],"mappings":"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"}

package/dist/components/navigation/tabs/tabs.d.ts

@@ -8,7 +8,19 @@ export interface TabsProps {
         target: Element;
     }, index: number) => void;
     indicatorContent?: boolean;
+    /**
+     * Let the tab row scroll sideways instead of clipping it. The edge beyond which
+     * more tabs are hidden fades out.
+     */
     scrollable?: boolean;
+    /** With `scrollable`: buttons at both ends that scroll the row while it overflows. */
+    scrollButtons?: boolean;
+    /** Compact tabs: labels as written (no capitals, no letter spacing) and less padding. */
+    dense?: boolean;
+    /** Accessible label of the button that scrolls back. */
+    scrollBackAriaLabel?: string;
+    /** Accessible label of the button that scrolls forward. */
+    scrollForwardAriaLabel?: string;
     class?: string;
     children?: JSX.Element;
     "aria-label"?: string;

package/dist/components/navigation/tabs/tabs.js

@@ -1,127 +1,182 @@
-import { createComponent as C, use as b, spread as W, mergeProps as N, insert as p, effect as _, setStyleProperty as M, style as X, className as D, setAttribute as j, template as x } from "solid-js/web";
-import '../../../assets/styles/less/components/tabs/tabs.entry.css';/* empty css                                                   */
-import { mergeProps as k, splitProps as q, createSignal as L, onMount as R, createEffect as S, on as F, onCleanup as G, Show as H } from "solid-js";
-import y from "clsx";
-import { debounce as J } from "../../../utils/debounce.js";
-import { animate as K } from "../../../utils/animate.js";
-import { TabsContext as Q } from "./tabsContext.js";
-import { mergeRefs as U } from "../../../primitives/mergeRefs.js";
-var Y = /* @__PURE__ */ x("<span class=smwb-tabs__indicator><span class=smwb-tabs__indicator-content>"), Z = /* @__PURE__ */ x("<div><div><div class=smwb-tabs__scroll-area role=tablist>");
-const E = 40;
-function st(z) {
-  const P = k({
+import { createComponent as b, use as L, spread as H, mergeProps as J, insert as u, effect as m, setAttribute as p, setStyleProperty as x, style as K, template as w, delegateEvents as Q } from "solid-js/web";
+import '../../../assets/styles/less/components/tabs/tabs.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                   */
+import { mergeProps as U, splitProps as Y, createSignal as h, onMount as k, createEffect as O, on as Z, onCleanup as tt, Show as S } from "solid-js";
+import et from "clsx";
+import { debounce as rt } from "../../../utils/debounce.js";
+import { animate as lt } from "../../../utils/animate.js";
+import { TabsContext as ot } from "./tabsContext.js";
+import { mergeRefs as st } from "../../../primitives/mergeRefs.js";
+import { Icon as T } from "../../base/icon/icon.js";
+var nt = /* @__PURE__ */ w('<button type=button class="smwb-tabs__scroll-button smwb-tabs__scroll-button--start">'), at = /* @__PURE__ */ w("<span class=smwb-tabs__indicator><span class=smwb-tabs__indicator-content>"), it = /* @__PURE__ */ w('<button type=button class="smwb-tabs__scroll-button smwb-tabs__scroll-button--end">'), ct = /* @__PURE__ */ w("<div><div class=smwb-tabs__scroller><div class=smwb-tabs__scroll-area role=tablist>");
+const W = 40, dt = 0.8;
+function Lt(I) {
+  const V = U({
     indicatorContent: !1,
-    scrollable: !1
-  }, z), [o, $] = q(P, ["class", "children", "onChange", "value", "indicatorContent", "scrollable", "aria-label", "ref"]), [T, V] = L(!1), [c, u] = L({
+    scrollable: !1,
+    scrollButtons: !1,
+    dense: !1,
+    scrollBackAriaLabel: "Scroll tabs back",
+    scrollForwardAriaLabel: "Scroll tabs forward"
+  }, I), [s, F] = Y(V, ["class", "children", "onChange", "value", "indicatorContent", "scrollable", "scrollButtons", "dense", "scrollBackAriaLabel", "scrollForwardAriaLabel", "aria-label", "ref"]), [X, D] = h(!1), [d, E] = h({
     root: {}
-  });
-  let i, d, B = 0;
-  const h = [], v = () => {
+  }), [g, M] = h(!1), [_, B] = h(!1);
+  let l, f, G = 0;
+  const y = [], $ = () => {
     let t;
-    if (i) {
-      const l = i.getBoundingClientRect();
+    if (l) {
+      const i = l.getBoundingClientRect();
       t = {
-        clientWidth: i.clientWidth,
-        scrollLeft: i.scrollLeft,
-        left: l.left,
-        right: l.right
+        clientWidth: l.clientWidth,
+        scrollLeft: l.scrollLeft,
+        left: i.left,
+        right: i.right
       };
     }
-    let e = null, n = null;
-    if (i && d && d.children.length > 0) {
-      const l = d.children[o.value];
-      e = l ? l.getBoundingClientRect() : null, o.indicatorContent && (n = h[o.value]?.getBoundingClientRect() ?? null);
+    let r = null, a = null;
+    if (l && f && f.children.length > 0) {
+      const i = f.children[s.value];
+      r = i ? i.getBoundingClientRect() : null, s.indicatorContent && (a = y[s.value]?.getBoundingClientRect() ?? null);
     }
     return {
       tabsMeta: t,
-      tabMeta: e,
-      tabContentMeta: n
+      tabMeta: r,
+      tabContentMeta: a
     };
-  }, m = () => {
+  }, A = () => {
     const {
       tabsMeta: t,
-      tabMeta: e,
-      tabContentMeta: n
-    } = v();
-    let l = 0;
-    e && t && (l = e.left - t.left + t.scrollLeft);
-    const r = {
+      tabMeta: r,
+      tabContentMeta: a
+    } = $();
+    let i = 0;
+    r && t && (i = r.left - t.left + t.scrollLeft);
+    const e = {
       root: {
-        left: l,
-        width: e ? e.width : 0
+        left: i,
+        width: r ? r.width : 0
       }
     };
-    o.indicatorContent && n && (r.content = {
-      width: n.width
+    s.indicatorContent && a && (e.content = {
+      width: a.width
     });
-    const s = c();
-    if (s.root.left === void 0 || s.root.width === void 0) {
-      u(r);
+    const o = d();
+    if (o.root.left === void 0 || o.root.width === void 0) {
+      E(e);
+      return;
+    }
+    const n = Math.abs((o.root.left ?? 0) - (e.root.left ?? 0)), c = Math.abs((o.root.width ?? 0) - (e.root.width ?? 0));
+    (n >= 1 || c >= 1) && E(e);
+  }, v = () => {
+    if (!l || !s.scrollable) {
+      M(!1), B(!1);
       return;
     }
-    const a = Math.abs((s.root.left ?? 0) - (r.root.left ?? 0)), f = Math.abs((s.root.width ?? 0) - (r.root.width ?? 0));
-    (a >= 1 || f >= 1) && u(r);
-  }, g = (t) => {
-    i && K(i, "scrollLeft", t, {
+    const t = l.scrollWidth - l.clientWidth;
+    M(l.scrollLeft > 1), B(l.scrollLeft < t - 1);
+  }, C = (t) => {
+    l && lt(l, "scrollLeft", t, {
       duration: 300
     });
-  }, I = () => {
+  }, R = (t) => {
+    l && C(l.scrollLeft + t * l.clientWidth * dt);
+  }, N = () => {
     const {
       tabsMeta: t,
-      tabMeta: e
-    } = v();
-    !e || !t || (e.left < t.left ? g(t.scrollLeft + (e.left - t.left) - E) : e.right > t.right && g(t.scrollLeft + (e.right - t.right) + E));
+      tabMeta: r
+    } = $();
+    !r || !t || (r.left < t.left ? C(t.scrollLeft + (r.left - t.left) - W) : r.right > t.right && C(t.scrollLeft + (r.right - t.right) + W));
   };
-  R(() => V(!0)), S(F(() => o.value, () => m())), R(() => {
-    const t = J(() => m(), 166), e = i?.ownerDocument.defaultView;
-    e?.addEventListener("resize", t);
-    let n;
-    typeof ResizeObserver < "u" && d && (n = new ResizeObserver(t), Array.from(d.children).forEach((l) => n?.observe(l))), G(() => {
-      t.cancel(), e?.removeEventListener("resize", t), n?.disconnect();
+  k(() => D(!0)), O(Z(() => s.value, () => A())), k(() => {
+    const t = rt(() => {
+      A(), v();
+    }, 166), r = l?.ownerDocument.defaultView;
+    r?.addEventListener("resize", t), l?.addEventListener("scroll", v, {
+      passive: !0
     });
-  }), S(() => {
-    c(), I();
+    let a;
+    typeof ResizeObserver < "u" && f && (a = new ResizeObserver(t), l && a.observe(l), Array.from(f.children).forEach((i) => a?.observe(i))), v(), tt(() => {
+      t.cancel(), r?.removeEventListener("resize", t), l?.removeEventListener("scroll", v), a?.disconnect();
+    });
+  }), O(() => {
+    d(), N();
   });
-  const A = {
-    value: () => o.value,
-    onChange: o.onChange,
-    indicatorContent: o.indicatorContent,
-    registerTab: () => B++,
-    setContentRef: (t, e) => {
-      h[t] = e;
+  const j = {
+    value: () => s.value,
+    onChange: s.onChange,
+    indicatorContent: s.indicatorContent,
+    registerTab: () => G++,
+    setContentRef: (t, r) => {
+      y[t] = r;
     }
-  };
-  return C(Q.Provider, {
-    value: A,
+  }, z = () => s.scrollable && s.scrollButtons && (g() || _());
+  return b(ot.Provider, {
+    value: j,
     get children() {
-      var t = Z(), e = t.firstChild, n = e.firstChild, l = U(o.ref);
-      return typeof l == "function" && b(l, t), W(t, N($, {
+      var t = ct(), r = t.firstChild, a = r.firstChild, i = st(s.ref);
+      return typeof i == "function" && L(i, t), H(t, J(F, {
         get class() {
-          return y("smwb-tabs", o.class);
+          return et("smwb-tabs", {
+            "smwb-tabs--dense": s.dense,
+            "smwb-tabs--overflow-start": g(),
+            "smwb-tabs--overflow-end": _()
+          }, s.class);
         },
         role: "tabpanel"
-      }), !1, !0), b((r) => i = r, e), b((r) => d = r, n), p(n, () => o.children), p(e, C(H, {
+      }), !1, !0), u(t, b(S, {
         get when() {
-          return T();
+          return z();
         },
         get children() {
-          var r = Y(), s = r.firstChild;
-          return _((a) => {
-            var f = `${c().root.left ?? 0}px`, w = `${c().root.width ?? 0}px`, O = c().content ? {
-              width: `${c().content?.width ?? 0}px`
+          var e = nt();
+          return e.$$click = () => R(-1), u(e, b(T, {
+            name: "chevron_left",
+            size: 20
+          })), m((o) => {
+            var n = s.scrollBackAriaLabel, c = !g();
+            return n !== o.e && p(e, "aria-label", o.e = n), c !== o.t && (e.disabled = o.t = c), o;
+          }, {
+            e: void 0,
+            t: void 0
+          }), e;
+        }
+      }), r), L((e) => l = e, r), L((e) => f = e, a), u(a, () => s.children), u(r, b(S, {
+        get when() {
+          return X();
+        },
+        get children() {
+          var e = at(), o = e.firstChild;
+          return m((n) => {
+            var c = `${d().root.left ?? 0}px`, P = `${d().root.width ?? 0}px`, q = d().content ? {
+              width: `${d().content?.width ?? 0}px`
             } : {};
-            return f !== a.e && M(r, "left", a.e = f), w !== a.t && M(r, "width", a.t = w), a.a = X(s, O, a.a), a;
+            return c !== n.e && x(e, "left", n.e = c), P !== n.t && x(e, "width", n.t = P), n.a = K(o, q, n.a), n;
           }, {
             e: void 0,
             t: void 0,
             a: void 0
-          }), r;
+          }), e;
+        }
+      }), null), u(t, b(S, {
+        get when() {
+          return z();
+        },
+        get children() {
+          var e = it();
+          return e.$$click = () => R(1), u(e, b(T, {
+            name: "chevron_right",
+            size: 20
+          })), m((o) => {
+            var n = s.scrollForwardAriaLabel, c = !_();
+            return n !== o.e && p(e, "aria-label", o.e = n), c !== o.t && (e.disabled = o.t = c), o;
+          }, {
+            e: void 0,
+            t: void 0
+          }), e;
         }
-      }), null), _((r) => {
-        var s = y("smwb-tabs__scroller", {
-          "smwb-tabs__scroller--scrollable": o.scrollable
-        }), a = o["aria-label"];
-        return s !== r.e && D(e, r.e = s), a !== r.t && j(n, "aria-label", r.t = a), r;
+      }), null), m((e) => {
+        var o = !!s.scrollable, n = s["aria-label"];
+        return o !== e.e && r.classList.toggle("smwb-tabs__scroller--scrollable", e.e = o), n !== e.t && p(a, "aria-label", e.t = n), e;
       }, {
         e: void 0,
         t: void 0
@@ -129,7 +184,8 @@ function st(z) {
     }
   });
 }
+Q(["click"]);
 export {
-  st as Tabs
+  Lt as Tabs
 };
 //# sourceMappingURL=tabs.js.map

package/dist/components/navigation/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../../src/components/navigation/tabs/tabs.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { debounce } from \"../../../utils/debounce\";\nimport { animate } from \"../../../utils/animate\";\nimport { TabsContext, type TabsContextValue } from \"./tabsContext\";\nimport { Tab } from \"./tab/tab\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TabsProps {\n  value: number;\n  onChange: (event: MouseEvent & { currentTarget: HTMLElement; target: Element }, index: number) => void;\n  indicatorContent?: boolean;\n  scrollable?: boolean;\n  class?: string;\n  children?: JSX.Element;\n  \"aria-label\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface IndicatorStyle {\n  root: { left?: number; width?: number };\n  content?: { width: number };\n}\n\nconst VIEW_NEXT_TAB_PX = 40;\n\nexport function Tabs(props: ParentProps<TabsProps>): JSX.Element {\n  const merged = mergeProps({ indicatorContent: false, scrollable: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"onChange\",\n    \"value\",\n    \"indicatorContent\",\n    \"scrollable\",\n    \"aria-label\",\n    \"ref\",\n  ]);\n\n  const [mounted, setMounted] = createSignal(false);\n  const [indicatorStyle, setIndicatorStyle] = createSignal<IndicatorStyle>({ root: {} });\n\n  let tabsEl: HTMLDivElement | undefined;\n  let tabListEl: HTMLDivElement | undefined;\n  let tabCounter = 0;\n  const contentRefs: HTMLSpanElement[] = [];\n\n  const getTabsMeta = () => {\n    let tabsMeta: { clientWidth: number; scrollLeft: number; left: number; right: number } | undefined;\n    if (tabsEl) {\n      const rect = tabsEl.getBoundingClientRect();\n      tabsMeta = { clientWidth: tabsEl.clientWidth, scrollLeft: tabsEl.scrollLeft, left: rect.left, right: rect.right };\n    }\n    let tabMeta: DOMRect | null = null;\n    let tabContentMeta: DOMRect | null = null;\n    if (tabsEl && tabListEl && tabListEl.children.length > 0) {\n      const tab = tabListEl.children[local.value];\n      tabMeta = tab ? tab.getBoundingClientRect() : null;\n      if (local.indicatorContent) {\n        tabContentMeta = contentRefs[local.value]?.getBoundingClientRect() ?? null;\n      }\n    }\n    return { tabsMeta, tabMeta, tabContentMeta };\n  };\n\n  const updateIndicatorState = (): void => {\n    const { tabsMeta, tabMeta, tabContentMeta } = getTabsMeta();\n    let startValue = 0;\n    if (tabMeta && tabsMeta) {\n      startValue = tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft;\n    }\n    const next: IndicatorStyle = { root: { left: startValue, width: tabMeta ? tabMeta.width : 0 } };\n    if (local.indicatorContent && tabContentMeta) {\n      next.content = { width: tabContentMeta.width };\n    }\n    const prev = indicatorStyle();\n    if (prev.root.left === undefined || prev.root.width === undefined) {\n      setIndicatorStyle(next);\n      return;\n    }\n    const dStart = Math.abs((prev.root.left ?? 0) - (next.root.left ?? 0));\n    const dSize = Math.abs((prev.root.width ?? 0) - (next.root.width ?? 0));\n    if (dStart >= 1 || dSize >= 1) {\n      setIndicatorStyle(next);\n    }\n  };\n\n  const scroll = (scrollValue: number): void => {\n    if (!tabsEl) return;\n    animate(tabsEl, \"scrollLeft\", scrollValue, { duration: 300 });\n  };\n\n  const scrollSelectedIntoView = (): void => {\n    const { tabsMeta, tabMeta } = getTabsMeta();\n    if (!tabMeta || !tabsMeta) return;\n    if (tabMeta.left < tabsMeta.left) {\n      scroll(tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left) - VIEW_NEXT_TAB_PX);\n    } else if (tabMeta.right > tabsMeta.right) {\n      scroll(tabsMeta.scrollLeft + (tabMeta.right - tabsMeta.right) + VIEW_NEXT_TAB_PX);\n    }\n  };\n\n  onMount(() => setMounted(true));\n\n  // Re-measure when the active value changes (and on mount).\n  createEffect(on(() => local.value, () => updateIndicatorState()));\n\n  // Keep the indicator in sync with resize.\n  onMount(() => {\n    const onResize = debounce(() => updateIndicatorState(), 166);\n    const view = tabsEl?.ownerDocument.defaultView;\n    view?.addEventListener(\"resize\", onResize);\n    let resizeObserver: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== \"undefined\" && tabListEl) {\n      resizeObserver = new ResizeObserver(onResize);\n      Array.from(tabListEl.children).forEach((child) => resizeObserver?.observe(child));\n    }\n    onCleanup(() => {\n      onResize.cancel();\n      view?.removeEventListener(\"resize\", onResize);\n      resizeObserver?.disconnect();\n    });\n  });\n\n  // Scroll the selected tab into view when the indicator moves.\n  createEffect(() => {\n    indicatorStyle();\n    scrollSelectedIntoView();\n  });\n\n  const contextValue: TabsContextValue = {\n    value: () => local.value,\n    onChange: local.onChange,\n    indicatorContent: local.indicatorContent,\n    registerTab: () => tabCounter++,\n    setContentRef: (index, el) => {\n      contentRefs[index] = el;\n    },\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div {...rest} class={cn(\"smwb-tabs\", local.class)} role=\"tabpanel\" ref={mergeRefs(local.ref)}>\n        <div\n          class={cn(\"smwb-tabs__scroller\", { \"smwb-tabs__scroller--scrollable\": local.scrollable })}\n          ref={(el) => (tabsEl = el)}\n        >\n          <div class=\"smwb-tabs__scroll-area\" ref={(el) => (tabListEl = el)} role=\"tablist\" aria-label={local[\"aria-label\"]}>\n            {local.children}\n          </div>\n          <Show when={mounted()}>\n            <span\n              class=\"smwb-tabs__indicator\"\n              style={{\n                left: `${indicatorStyle().root.left ?? 0}px`,\n                width: `${indicatorStyle().root.width ?? 0}px`,\n              }}\n            >\n              <span\n                class=\"smwb-tabs__indicator-content\"\n                style={indicatorStyle().content ? { width: `${indicatorStyle().content?.width ?? 0}px` } : {}}\n              />\n            </span>\n          </Show>\n        </div>\n      </div>\n    </TabsContext.Provider>\n  );\n}\n\nexport { Tab };\nexport type { TabProps } from \"./tab/tab\";\nexport default Tabs;\n"],"names":["VIEW_NEXT_TAB_PX","Tabs","props","merged","mergeProps","indicatorContent","scrollable","local","rest","splitProps","mounted","setMounted","createSignal","indicatorStyle","setIndicatorStyle","root","tabsEl","tabListEl","tabCounter","contentRefs","getTabsMeta","tabsMeta","rect","getBoundingClientRect","clientWidth","scrollLeft","left","right","tabMeta","tabContentMeta","children","length","tab","value","updateIndicatorState","startValue","next","width","content","prev","undefined","dStart","Math","abs","dSize","scroll","scrollValue","animate","duration","scrollSelectedIntoView","onMount","createEffect","on","onResize","debounce","view","ownerDocument","defaultView","addEventListener","resizeObserver","ResizeObserver","Array","from","forEach","child","observe","onCleanup","cancel","removeEventListener","disconnect","contextValue","onChange","registerTab","setContentRef","index","el","_$createComponent","TabsContext","Provider","_el$","_tmpl$2","_el$2","firstChild","_el$3","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","Show","when","_el$4","_tmpl$","_el$5","_$effect","_p$","_v$","_v$2","_v$3","e","_$setStyleProperty","t","a","_$style","_v$4","_v$5","_$className","_$setAttribute"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../../../src/components/navigation/tabs/tabs.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { debounce } from \"../../../utils/debounce\";\nimport { animate } from \"../../../utils/animate\";\nimport { TabsContext, type TabsContextValue } from \"./tabsContext\";\nimport { Tab } from \"./tab/tab\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TabsProps {\n  value: number;\n  onChange: (event: MouseEvent & { currentTarget: HTMLElement; target: Element }, index: number) => void;\n  indicatorContent?: boolean;\n  /**\n   * Let the tab row scroll sideways instead of clipping it. The edge beyond which\n   * more tabs are hidden fades out.\n   */\n  scrollable?: boolean;\n  /** With `scrollable`: buttons at both ends that scroll the row while it overflows. */\n  scrollButtons?: boolean;\n  /** Compact tabs: labels as written (no capitals, no letter spacing) and less padding. */\n  dense?: boolean;\n  /** Accessible label of the button that scrolls back. */\n  scrollBackAriaLabel?: string;\n  /** Accessible label of the button that scrolls forward. */\n  scrollForwardAriaLabel?: string;\n  class?: string;\n  children?: JSX.Element;\n  \"aria-label\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface IndicatorStyle {\n  root: { left?: number; width?: number };\n  content?: { width: number };\n}\n\nconst VIEW_NEXT_TAB_PX = 40;\n/** A scroll button moves the row by this share of its visible width. */\nconst SCROLL_PAGE = 0.8;\n\nexport function Tabs(props: ParentProps<TabsProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      indicatorContent: false,\n      scrollable: false,\n      scrollButtons: false,\n      dense: false,\n      scrollBackAriaLabel: \"Scroll tabs back\",\n      scrollForwardAriaLabel: \"Scroll tabs forward\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"onChange\",\n    \"value\",\n    \"indicatorContent\",\n    \"scrollable\",\n    \"scrollButtons\",\n    \"dense\",\n    \"scrollBackAriaLabel\",\n    \"scrollForwardAriaLabel\",\n    \"aria-label\",\n    \"ref\",\n  ]);\n\n  const [mounted, setMounted] = createSignal(false);\n  const [indicatorStyle, setIndicatorStyle] = createSignal<IndicatorStyle>({ root: {} });\n  // Whether tabs are hidden past the start / the end of a scrollable row. Only\n  // measured in the browser, so the server markup shows neither.\n  const [overflowStart, setOverflowStart] = createSignal(false);\n  const [overflowEnd, setOverflowEnd] = createSignal(false);\n\n  let tabsEl: HTMLDivElement | undefined;\n  let tabListEl: HTMLDivElement | undefined;\n  let tabCounter = 0;\n  const contentRefs: HTMLSpanElement[] = [];\n\n  const getTabsMeta = () => {\n    let tabsMeta: { clientWidth: number; scrollLeft: number; left: number; right: number } | undefined;\n    if (tabsEl) {\n      const rect = tabsEl.getBoundingClientRect();\n      tabsMeta = { clientWidth: tabsEl.clientWidth, scrollLeft: tabsEl.scrollLeft, left: rect.left, right: rect.right };\n    }\n    let tabMeta: DOMRect | null = null;\n    let tabContentMeta: DOMRect | null = null;\n    if (tabsEl && tabListEl && tabListEl.children.length > 0) {\n      const tab = tabListEl.children[local.value];\n      tabMeta = tab ? tab.getBoundingClientRect() : null;\n      if (local.indicatorContent) {\n        tabContentMeta = contentRefs[local.value]?.getBoundingClientRect() ?? null;\n      }\n    }\n    return { tabsMeta, tabMeta, tabContentMeta };\n  };\n\n  const updateIndicatorState = (): void => {\n    const { tabsMeta, tabMeta, tabContentMeta } = getTabsMeta();\n    let startValue = 0;\n    if (tabMeta && tabsMeta) {\n      startValue = tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft;\n    }\n    const next: IndicatorStyle = { root: { left: startValue, width: tabMeta ? tabMeta.width : 0 } };\n    if (local.indicatorContent && tabContentMeta) {\n      next.content = { width: tabContentMeta.width };\n    }\n    const prev = indicatorStyle();\n    if (prev.root.left === undefined || prev.root.width === undefined) {\n      setIndicatorStyle(next);\n      return;\n    }\n    const dStart = Math.abs((prev.root.left ?? 0) - (next.root.left ?? 0));\n    const dSize = Math.abs((prev.root.width ?? 0) - (next.root.width ?? 0));\n    if (dStart >= 1 || dSize >= 1) {\n      setIndicatorStyle(next);\n    }\n  };\n\n  const updateOverflow = (): void => {\n    if (!tabsEl || !local.scrollable) {\n      setOverflowStart(false);\n      setOverflowEnd(false);\n      return;\n    }\n    const max = tabsEl.scrollWidth - tabsEl.clientWidth;\n    setOverflowStart(tabsEl.scrollLeft > 1);\n    setOverflowEnd(tabsEl.scrollLeft < max - 1);\n  };\n\n  const scroll = (scrollValue: number): void => {\n    if (!tabsEl) return;\n    animate(tabsEl, \"scrollLeft\", scrollValue, { duration: 300 });\n  };\n\n  const scrollByPage = (direction: -1 | 1): void => {\n    if (!tabsEl) return;\n    scroll(tabsEl.scrollLeft + direction * tabsEl.clientWidth * SCROLL_PAGE);\n  };\n\n  const scrollSelectedIntoView = (): void => {\n    const { tabsMeta, tabMeta } = getTabsMeta();\n    if (!tabMeta || !tabsMeta) return;\n    if (tabMeta.left < tabsMeta.left) {\n      scroll(tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left) - VIEW_NEXT_TAB_PX);\n    } else if (tabMeta.right > tabsMeta.right) {\n      scroll(tabsMeta.scrollLeft + (tabMeta.right - tabsMeta.right) + VIEW_NEXT_TAB_PX);\n    }\n  };\n\n  onMount(() => setMounted(true));\n\n  // Re-measure when the active value changes (and on mount).\n  createEffect(on(() => local.value, () => updateIndicatorState()));\n\n  // Keep the indicator and the overflow state in sync with resizes: of the\n  // window, of the row, and of each tab (a label can grow with its data).\n  onMount(() => {\n    const onResize = debounce(() => {\n      updateIndicatorState();\n      updateOverflow();\n    }, 166);\n    const view = tabsEl?.ownerDocument.defaultView;\n    view?.addEventListener(\"resize\", onResize);\n    tabsEl?.addEventListener(\"scroll\", updateOverflow, { passive: true });\n    let resizeObserver: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== \"undefined\" && tabListEl) {\n      resizeObserver = new ResizeObserver(onResize);\n      if (tabsEl) resizeObserver.observe(tabsEl);\n      Array.from(tabListEl.children).forEach((child) => resizeObserver?.observe(child));\n    }\n    updateOverflow();\n    onCleanup(() => {\n      onResize.cancel();\n      view?.removeEventListener(\"resize\", onResize);\n      tabsEl?.removeEventListener(\"scroll\", updateOverflow);\n      resizeObserver?.disconnect();\n    });\n  });\n\n  // Scroll the selected tab into view when the indicator moves.\n  createEffect(() => {\n    indicatorStyle();\n    scrollSelectedIntoView();\n  });\n\n  const contextValue: TabsContextValue = {\n    value: () => local.value,\n    onChange: local.onChange,\n    indicatorContent: local.indicatorContent,\n    registerTab: () => tabCounter++,\n    setContentRef: (index, el) => {\n      contentRefs[index] = el;\n    },\n  };\n\n  const showScrollButtons = (): boolean => local.scrollable && local.scrollButtons && (overflowStart() || overflowEnd());\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div\n        {...rest}\n        class={cn(\n          \"smwb-tabs\",\n          {\n            \"smwb-tabs--dense\": local.dense,\n            \"smwb-tabs--overflow-start\": overflowStart(),\n            \"smwb-tabs--overflow-end\": overflowEnd(),\n          },\n          local.class\n        )}\n        role=\"tabpanel\"\n        ref={mergeRefs(local.ref)}\n      >\n        <Show when={showScrollButtons()}>\n          <button\n            type=\"button\"\n            class=\"smwb-tabs__scroll-button smwb-tabs__scroll-button--start\"\n            aria-label={local.scrollBackAriaLabel}\n            disabled={!overflowStart()}\n            onClick={() => scrollByPage(-1)}\n          >\n            <Icon name=\"chevron_left\" size={20} />\n          </button>\n        </Show>\n        {/* The scroller's class is static so it is on the element from the start:\n            a ref on Tabs can find the row by class right away. */}\n        <div\n          class=\"smwb-tabs__scroller\"\n          classList={{ \"smwb-tabs__scroller--scrollable\": local.scrollable }}\n          ref={(el) => (tabsEl = el)}\n        >\n          <div class=\"smwb-tabs__scroll-area\" ref={(el) => (tabListEl = el)} role=\"tablist\" aria-label={local[\"aria-label\"]}>\n            {local.children}\n          </div>\n          <Show when={mounted()}>\n            <span\n              class=\"smwb-tabs__indicator\"\n              style={{\n                left: `${indicatorStyle().root.left ?? 0}px`,\n                width: `${indicatorStyle().root.width ?? 0}px`,\n              }}\n            >\n              <span\n                class=\"smwb-tabs__indicator-content\"\n                style={indicatorStyle().content ? { width: `${indicatorStyle().content?.width ?? 0}px` } : {}}\n              />\n            </span>\n          </Show>\n        </div>\n        <Show when={showScrollButtons()}>\n          <button\n            type=\"button\"\n            class=\"smwb-tabs__scroll-button smwb-tabs__scroll-button--end\"\n            aria-label={local.scrollForwardAriaLabel}\n            disabled={!overflowEnd()}\n            onClick={() => scrollByPage(1)}\n          >\n            <Icon name=\"chevron_right\" size={20} />\n          </button>\n        </Show>\n      </div>\n    </TabsContext.Provider>\n  );\n}\n\nexport { Tab };\nexport type { TabProps } from \"./tab/tab\";\nexport default Tabs;\n"],"names":["VIEW_NEXT_TAB_PX","SCROLL_PAGE","Tabs","props","merged","mergeProps","indicatorContent","scrollable","scrollButtons","dense","scrollBackAriaLabel","scrollForwardAriaLabel","local","rest","splitProps","mounted","setMounted","createSignal","indicatorStyle","setIndicatorStyle","root","overflowStart","setOverflowStart","overflowEnd","setOverflowEnd","tabsEl","tabListEl","tabCounter","contentRefs","getTabsMeta","tabsMeta","rect","getBoundingClientRect","clientWidth","scrollLeft","left","right","tabMeta","tabContentMeta","children","length","tab","value","updateIndicatorState","startValue","next","width","content","prev","undefined","dStart","Math","abs","dSize","updateOverflow","max","scrollWidth","scroll","scrollValue","animate","duration","scrollByPage","direction","scrollSelectedIntoView","onMount","createEffect","on","onResize","debounce","view","ownerDocument","defaultView","addEventListener","passive","resizeObserver","ResizeObserver","observe","Array","from","forEach","child","onCleanup","cancel","removeEventListener","disconnect","contextValue","onChange","registerTab","setContentRef","index","el","showScrollButtons","_$createComponent","TabsContext","Provider","_el$","_tmpl$4","_el$3","firstChild","_el$4","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","Show","when","_el$2","_tmpl$","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","disabled","_el$5","_tmpl$2","_el$6","_v$3","_v$4","_v$5","_$setStyleProperty","a","_$style","_el$7","_tmpl$3","_v$6","_v$7","_v$8","_v$9","classList","toggle","_$delegateEvents"],"mappings":"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"}

package/dist/connects/rt/table/table.d.ts

@@ -5,6 +5,8 @@ declare module "@tanstack/table-core" {
     interface ColumnMeta<TData extends RowData, TValue> {
         /** Extra attributes for every body cell of the column. */
         cellProps?: JSX.ThHTMLAttributes<HTMLTableCellElement>;
+        /** The column's name on each cell when rows stack as cards (`stackBelow`); a string `header` is used by default. */
+        label?: string;
     }
 }
 export interface RtTableProps<TData extends RowData, TValue = unknown> extends SmwbTableProps {