@smwb/ui-solid 0.12.0 → 0.13.0

package/dist/components/dataDisplay/expansionPanel/expansionPanel.js

@@ -1,175 +1,208 @@
-import { createComponent as o, insert as r, Portal as L, addEventListener as S, isServer as P, template as m, use as B, effect as A, className as D, memo as h, delegateEvents as T } from "solid-js/web";
+import { createComponent as a, insert as u, Portal as H, use as A, isServer as j, template as g, effect as J, className as Q, memo as D, delegateEvents as W } from "solid-js/web";
 import '../../../assets/styles/less/components/expansionPanel/expansionPanel.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                                       */
-import { mergeProps as I, splitProps as K, createEffect as y, onCleanup as E, Show as $ } from "solid-js";
-import N from "clsx";
-import { createControllableState as U } from "../../../primitives/createControllableState.js";
-import { mergeRefs as V } from "../../../primitives/mergeRefs.js";
-import { Button as u } from "../../inputs/button/button.js";
-import { Icon as _ } from "../../base/icon/icon.js";
-var j = /* @__PURE__ */ m("<div class=smwb-expansion-panel__controls>"), q = /* @__PURE__ */ m("<div data-testid=expansion-panel><div class=smwb-expansion-panel__head><div class=smwb-expansion-panel__header></div></div><div class=smwb-expansion-panel__body>"), G = /* @__PURE__ */ m("<div class=smwb-expansion-panel__placeholder data-testid=expansion-panel-placeholder><span>"), H = /* @__PURE__ */ m('<div class="smwb-expansion-panel__overlay smwb-dark"role=dialog aria-modal=true data-testid=expansion-panel-overlay><div class=smwb-expansion-panel__dialog><div class=smwb-expansion-panel__head><div class=smwb-expansion-panel__header></div></div><div class="smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen">');
-const J = {
+import { mergeProps as X, splitProps as Y, createEffect as y, onCleanup as E, on as Z, Show as K } from "solid-js";
+import ee from "clsx";
+import { createControllableState as ne } from "../../../primitives/createControllableState.js";
+import { FOCUSABLE as T } from "../../../primitives/createFocusTrap.js";
+import { mergeRefs as te } from "../../../primitives/mergeRefs.js";
+import { hasOverlayLayerAbove as z } from "../../../primitives/overlayLayer.js";
+import { Button as h } from "../../inputs/button/button.js";
+import { Icon as $ } from "../../base/icon/icon.js";
+var le = /* @__PURE__ */ g("<div class=smwb-expansion-panel__controls>"), oe = /* @__PURE__ */ g("<div data-testid=expansion-panel><div class=smwb-expansion-panel__head><div class=smwb-expansion-panel__header></div></div><div class=smwb-expansion-panel__body>"), re = /* @__PURE__ */ g("<div class=smwb-expansion-panel__placeholder data-testid=expansion-panel-placeholder><span>"), se = /* @__PURE__ */ g('<div class="smwb-expansion-panel__overlay smwb-dark"data-smwb-overlay-layer role=dialog aria-modal=true tabindex=-1 data-testid=expansion-panel-overlay><div class=smwb-expansion-panel__dialog><div class=smwb-expansion-panel__head><div class=smwb-expansion-panel__header></div></div><div class="smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen">');
+const ae = {
   expandRow: "Expand to full row",
   collapseRow: "Collapse to grid",
   expandFullscreen: "Expand to fullscreen",
   closeFullscreen: "Close fullscreen",
   placeholder: "Panel is open in fullscreen",
   placeholderClose: "Close"
-};
-function oe(F) {
-  const k = I({
+}, B = (b) => {
+  for (const s of b)
+    if (!(!(s instanceof HTMLElement) || !s.isConnected) && (s.focus(), s.getRootNode().activeElement === s))
+      return;
+}, N = (b) => Array.from(b.querySelectorAll(T)).filter(
+  // Older browsers (and jsdom) lack checkVisibility: count every match there.
+  (s) => typeof s.checkVisibility != "function" || s.checkVisibility({
+    visibilityProperty: !0
+  })
+);
+function we(b) {
+  const s = X({
     defaultMode: "tile",
     disableExpand: !1,
     noControls: !1,
     closeOnOutsideClick: !0,
     closeOnEsc: !0
-  }, F), [n] = K(k, ["class", "header", "mode", "defaultMode", "onModeChange", "disableExpand", "noControls", "renderControls", "closeOnOutsideClick", "closeOnEsc", "labels", "children", "ref"]), [R, s] = U({
-    value: () => n.mode,
-    defaultValue: n.defaultMode,
-    onChange: (e) => n.onModeChange?.(e)
-  }), t = () => ({
-    ...J,
-    ...n.labels
-  }), c = () => n.disableExpand ? "tile" : R(), a = () => c() === "row", f = () => c() === "fullscreen", b = () => s((e) => e === "row" ? "tile" : "row"), w = () => s("fullscreen"), v = () => s("tile"), O = (e) => ({
-    mode: c(),
+  }, b), [l] = Y(s, ["class", "header", "mode", "defaultMode", "onModeChange", "disableExpand", "noControls", "renderControls", "closeOnOutsideClick", "closeOnEsc", "labels", "children", "ref"]), [I, f] = ne({
+    value: () => l.mode,
+    defaultValue: l.defaultMode,
+    onChange: (e) => l.onModeChange?.(e)
+  }), o = () => ({
+    ...ae,
+    ...l.labels
+  }), v = () => l.disableExpand ? "tile" : I(), p = () => v() === "row", m = () => v() === "fullscreen", k = () => f((e) => e === "row" ? "tile" : "row"), F = () => f("fullscreen"), C = () => f("tile"), U = (e) => {
+    l.closeOnOutsideClick && e.target === e.currentTarget && C();
+  }, V = (e) => ({
+    mode: v(),
     isFullscreen: e,
-    isFullRow: e ? !1 : a(),
-    setMode: s,
-    toggleRow: b,
-    openFullscreen: w,
-    closeFullscreen: v,
-    labels: t()
-  }), x = (e) => {
-    const l = {
-      mode: c(),
+    isFullRow: e ? !1 : p(),
+    setMode: f,
+    toggleRow: k,
+    openFullscreen: F,
+    closeFullscreen: C,
+    labels: o()
+  }), O = (e) => {
+    const n = l.children;
+    return typeof n != "function" ? n : n({
+      mode: v(),
       isFullscreen: e,
-      isFullRow: e ? !1 : a()
-    };
-    return typeof n.children == "function" ? n.children(l) : n.children;
-  }, z = (e) => e ? o(u, {
+      isFullRow: e ? !1 : p()
+    });
+  }, q = (e) => e ? a(h, {
+    ref: (n) => S = n,
     type: "button",
     variant: "outlined",
     size: "small",
     get "aria-label"() {
-      return t().closeFullscreen;
+      return o().closeFullscreen;
     },
     get title() {
-      return t().closeFullscreen;
+      return o().closeFullscreen;
     },
-    onClick: v,
+    onClick: C,
     "data-testid": "expansion-panel-close",
     get icon() {
-      return o(_, {
+      return a($, {
         name: "close",
         size: 18
       });
     }
-  }) : [o(u, {
+  }) : [a(h, {
     type: "button",
     variant: "outlined",
     size: "small",
     get "aria-pressed"() {
-      return a();
+      return p();
     },
     get "aria-label"() {
-      return h(() => !!a())() ? t().collapseRow : t().expandRow;
+      return D(() => !!p())() ? o().collapseRow : o().expandRow;
     },
     get title() {
-      return h(() => !!a())() ? t().collapseRow : t().expandRow;
+      return D(() => !!p())() ? o().collapseRow : o().expandRow;
     },
-    onClick: b,
+    onClick: k,
     "data-testid": "expansion-panel-row",
     get icon() {
-      return o(_, {
+      return a($, {
         get name() {
-          return a() ? "grid_view" : "table_rows";
+          return p() ? "grid_view" : "table_rows";
         },
         size: 18
       });
     }
-  }), o(u, {
+  }), a(h, {
+    ref: (n) => L = n,
     type: "button",
     variant: "outlined",
     size: "small",
     get "aria-label"() {
-      return t().expandFullscreen;
+      return o().expandFullscreen;
     },
     get title() {
-      return t().expandFullscreen;
+      return o().expandFullscreen;
     },
-    onClick: w,
+    onClick: F,
     "data-testid": "expansion-panel-fullscreen",
     get icon() {
-      return o(_, {
+      return a($, {
         name: "open_in_full",
         size: 18
       });
     }
-  })], C = (e) => {
-    if (n.disableExpand || n.noControls) return null;
-    const l = n.renderControls ? typeof n.renderControls == "function" ? n.renderControls(O(e)) : n.renderControls : z(e);
-    return o($, {
-      when: l,
+  })], R = (e) => {
+    if (l.disableExpand || l.noControls) return null;
+    const n = l.renderControls, t = n ? typeof n == "function" ? n(V(e)) : n : q(e);
+    return a(K, {
+      when: t,
       children: (i) => (() => {
-        var d = j();
-        return r(d, () => i()), d;
+        var r = le();
+        return u(r, () => i()), r;
       })()
     });
   };
   y(() => {
-    if (!f()) return;
+    if (!m()) return;
     const e = document.body.style.overflow;
     document.body.style.overflow = "hidden", E(() => {
       document.body.style.overflow = e;
     });
+  });
+  let _;
+  y(() => {
+    if (!m() || !l.closeOnEsc) return;
+    const e = (n) => {
+      n.key === "Escape" && !n.defaultPrevented && !z(_) && (n.preventDefault(), f("tile"));
+    };
+    document.addEventListener("keydown", e), E(() => document.removeEventListener("keydown", e));
+  });
+  let P, L, S, M = null, x = null;
+  y(Z(m, (e, n) => {
+    const t = document.activeElement;
+    e ? (M = t === document.body ? null : t, x = null) : n && (!t || t === document.body) && B([x, M, L, ...Array.from(P?.querySelectorAll(T) ?? [])]);
+  })), y(() => {
+    const e = _, n = document.activeElement;
+    !m() || !e?.isConnected || n && n !== document.body || B([S, ...N(e), e]);
   }), y(() => {
-    if (!f() || !n.closeOnEsc) return;
-    const e = (l) => {
-      l.key === "Escape" && s("tile");
+    if (!m()) return;
+    const e = (n) => {
+      const t = _;
+      if (n.key !== "Tab" || n.defaultPrevented || n.altKey || n.ctrlKey || n.metaKey || !t?.isConnected) return;
+      const i = N(t), r = i[0] ?? t, c = i[i.length - 1] ?? t, d = document.activeElement;
+      let w;
+      d && d !== document.body && t.contains(d) ? (n.shiftKey ? d === r || d === t : d === c) && (w = n.shiftKey ? c : r) : !z(t) && (!d || d === document.body || t.compareDocumentPosition(d) & Node.DOCUMENT_POSITION_PRECEDING) && (w = n.shiftKey ? c : r), w && (n.preventDefault(), w.focus());
     };
     document.addEventListener("keydown", e), E(() => document.removeEventListener("keydown", e));
   });
-  const M = () => (() => {
-    var e = q(), l = e.firstChild, i = l.firstChild, d = l.nextSibling, p = V(n.ref);
-    return typeof p == "function" && B(p, e), r(i, () => n.header), r(l, () => C(!1), null), r(d, () => x(!1)), A(() => D(e, N("smwb-expansion-panel", {
-      "smwb-expansion-panel_row": a()
-    }, n.class))), e;
+  const G = () => (() => {
+    var e = oe(), n = e.firstChild, t = n.firstChild, i = n.nextSibling, r = te(l.ref, (c) => P = c);
+    return typeof r == "function" && A(r, e), u(t, () => l.header), u(n, () => R(!1), null), u(i, () => O(!1)), J(() => Q(e, ee("smwb-expansion-panel", {
+      "smwb-expansion-panel_row": p()
+    }, l.class))), e;
   })();
-  return o($, {
+  return a(K, {
     get when() {
-      return f();
+      return m();
     },
     get fallback() {
-      return M();
+      return G();
     },
     get children() {
       return [(() => {
-        var e = G(), l = e.firstChild;
-        return r(l, () => t().placeholder), r(e, o(u, {
+        var e = re(), n = e.firstChild;
+        return u(n, () => o().placeholder), u(e, a(h, {
           type: "button",
           variant: "outlined",
           size: "small",
           get label() {
-            return t().placeholderClose;
+            return o().placeholderClose;
           },
-          onClick: () => s("tile")
+          onClick: () => f("tile")
         }), null), e;
-      })(), o(L, {
+      })(), a(H, {
         get mount() {
-          return P ? void 0 : document.body;
+          return j ? void 0 : document.body;
         },
         get children() {
-          var e = H(), l = e.firstChild, i = l.firstChild, d = i.firstChild, p = i.nextSibling;
-          return S(e, "click", n.closeOnOutsideClick ? (g) => {
-            g.target === g.currentTarget && s("tile");
-          } : void 0, !0), r(d, () => n.header), r(i, () => C(!0), null), r(p, () => x(!0)), e;
+          var e = se(), n = e.firstChild, t = n.firstChild, i = t.firstChild, r = t.nextSibling;
+          return e.$$click = U, e.$$focusin = (c) => x = c.target, A((c) => _ = c, e), u(i, () => l.header), u(t, () => R(!0), null), u(r, () => O(!0)), e;
         }
       })];
     }
   });
 }
-T(["click"]);
+W(["focusin", "click"]);
 export {
-  oe as ExpansionPanel
+  we as ExpansionPanel
 };
 //# sourceMappingURL=expansionPanel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"expansionPanel.js","sources":["../../../../src/components/dataDisplay/expansionPanel/expansionPanel.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Button } from \"../../inputs/button\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type ExpansionMode = \"tile\" | \"row\" | \"fullscreen\";\n\nexport interface ExpansionPanelLabels {\n  expandRow?: string;\n  collapseRow?: string;\n  expandFullscreen?: string;\n  closeFullscreen?: string;\n  placeholder?: string;\n  placeholderClose?: string;\n}\n\nexport interface ExpansionPanelRenderContext {\n  mode: ExpansionMode;\n  isFullscreen: boolean;\n  isFullRow: boolean;\n}\n\nexport interface ExpansionPanelControlsContext extends ExpansionPanelRenderContext {\n  setMode: (next: ExpansionMode | ((current: ExpansionMode) => ExpansionMode)) => void;\n  toggleRow: () => void;\n  openFullscreen: () => void;\n  closeFullscreen: () => void;\n  labels: Required<ExpansionPanelLabels>;\n}\n\ntype ExpansionPanelChildren = JSX.Element | ((ctx: ExpansionPanelRenderContext) => JSX.Element);\ntype ExpansionPanelControls = JSX.Element | ((ctx: ExpansionPanelControlsContext) => JSX.Element);\n\nexport interface ExpansionPanelProps {\n  class?: string;\n  header?: JSX.Element;\n  mode?: ExpansionMode;\n  defaultMode?: ExpansionMode;\n  onModeChange?: (mode: ExpansionMode) => void;\n  disableExpand?: boolean;\n  noControls?: boolean;\n  renderControls?: ExpansionPanelControls;\n  closeOnOutsideClick?: boolean;\n  closeOnEsc?: boolean;\n  labels?: ExpansionPanelLabels;\n  children?: ExpansionPanelChildren;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst DEFAULT_LABELS: Required<ExpansionPanelLabels> = {\n  expandRow: \"Expand to full row\",\n  collapseRow: \"Collapse to grid\",\n  expandFullscreen: \"Expand to fullscreen\",\n  closeFullscreen: \"Close fullscreen\",\n  placeholder: \"Panel is open in fullscreen\",\n  placeholderClose: \"Close\",\n};\n\nexport function ExpansionPanel(props: ExpansionPanelProps): JSX.Element {\n  const merged = mergeProps(\n    { defaultMode: \"tile\" as ExpansionMode, disableExpand: false, noControls: false, closeOnOutsideClick: true, closeOnEsc: true },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"header\",\n    \"mode\",\n    \"defaultMode\",\n    \"onModeChange\",\n    \"disableExpand\",\n    \"noControls\",\n    \"renderControls\",\n    \"closeOnOutsideClick\",\n    \"closeOnEsc\",\n    \"labels\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [mode, setMode] = createControllableState<ExpansionMode>({\n    value: () => local.mode,\n    defaultValue: local.defaultMode,\n    onChange: (next) => local.onModeChange?.(next),\n  });\n\n  const labels = (): Required<ExpansionPanelLabels> => ({ ...DEFAULT_LABELS, ...local.labels });\n  const effectiveMode = (): ExpansionMode => (local.disableExpand ? \"tile\" : mode());\n  const isFullRow = (): boolean => effectiveMode() === \"row\";\n  const isFullscreen = (): boolean => effectiveMode() === \"fullscreen\";\n\n  const toggleRow = (): void => setMode((current) => (current === \"row\" ? \"tile\" : \"row\"));\n  const openFullscreen = (): void => setMode(\"fullscreen\");\n  const closeFullscreen = (): void => setMode(\"tile\");\n\n  const controlsContext = (overlay: boolean): ExpansionPanelControlsContext => ({\n    mode: effectiveMode(),\n    isFullscreen: overlay,\n    isFullRow: overlay ? false : isFullRow(),\n    setMode,\n    toggleRow,\n    openFullscreen,\n    closeFullscreen,\n    labels: labels(),\n  });\n\n  const renderChildren = (overlay: boolean): JSX.Element => {\n    const ctx: ExpansionPanelRenderContext = { mode: effectiveMode(), isFullscreen: overlay, isFullRow: overlay ? false : isFullRow() };\n    return typeof local.children === \"function\" ? local.children(ctx) : local.children;\n  };\n\n  const defaultControls = (overlay: boolean): JSX.Element => {\n    if (overlay) {\n      return (\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-label={labels().closeFullscreen}\n          title={labels().closeFullscreen}\n          onClick={closeFullscreen}\n          data-testid=\"expansion-panel-close\"\n          icon={<Icon name=\"close\" size={18} />}\n        />\n      );\n    }\n    return (\n      <>\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-pressed={isFullRow()}\n          aria-label={isFullRow() ? labels().collapseRow : labels().expandRow}\n          title={isFullRow() ? labels().collapseRow : labels().expandRow}\n          onClick={toggleRow}\n          data-testid=\"expansion-panel-row\"\n          icon={<Icon name={isFullRow() ? \"grid_view\" : \"table_rows\"} size={18} />}\n        />\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-label={labels().expandFullscreen}\n          title={labels().expandFullscreen}\n          onClick={openFullscreen}\n          data-testid=\"expansion-panel-fullscreen\"\n          icon={<Icon name=\"open_in_full\" size={18} />}\n        />\n      </>\n    );\n  };\n\n  const controlBar = (overlay: boolean): JSX.Element => {\n    if (local.disableExpand || local.noControls) return null;\n    const content = local.renderControls\n      ? typeof local.renderControls === \"function\"\n        ? local.renderControls(controlsContext(overlay))\n        : local.renderControls\n      : defaultControls(overlay);\n    return <Show when={content}>{(c) => <div class=\"smwb-expansion-panel__controls\">{c() as JSX.Element}</div>}</Show>;\n  };\n\n  // Lock body scroll while fullscreen.\n  createEffect(() => {\n    if (!isFullscreen()) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    onCleanup(() => {\n      document.body.style.overflow = prev;\n    });\n  });\n\n  // Escape closes fullscreen.\n  createEffect(() => {\n    if (!isFullscreen() || !local.closeOnEsc) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") setMode(\"tile\");\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  const card = (): JSX.Element => (\n    <div\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-expansion-panel\", { \"smwb-expansion-panel_row\": isFullRow() }, local.class)}\n      data-testid=\"expansion-panel\"\n    >\n      <div class=\"smwb-expansion-panel__head\">\n        <div class=\"smwb-expansion-panel__header\">{local.header}</div>\n        {controlBar(false)}\n      </div>\n      <div class=\"smwb-expansion-panel__body\">{renderChildren(false)}</div>\n    </div>\n  );\n\n  return (\n    <Show when={isFullscreen()} fallback={card()}>\n      <>\n        <div class=\"smwb-expansion-panel__placeholder\" data-testid=\"expansion-panel-placeholder\">\n          <span>{labels().placeholder}</span>\n          <Button type=\"button\" variant=\"outlined\" size=\"small\" label={labels().placeholderClose} onClick={() => setMode(\"tile\")} />\n        </div>\n        <Portal mount={(isServer ? undefined : document.body) as Node}>\n          <div\n            class=\"smwb-expansion-panel__overlay smwb-dark\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            data-testid=\"expansion-panel-overlay\"\n            onClick={\n              local.closeOnOutsideClick\n                ? (event) => {\n                    if (event.target === event.currentTarget) setMode(\"tile\");\n                  }\n                : undefined\n            }\n          >\n            <div class=\"smwb-expansion-panel__dialog\">\n              <div class=\"smwb-expansion-panel__head\">\n                <div class=\"smwb-expansion-panel__header\">{local.header}</div>\n                {controlBar(true)}\n              </div>\n              <div class=\"smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen\">{renderChildren(true)}</div>\n            </div>\n          </div>\n        </Portal>\n      </>\n    </Show>\n  );\n}\n\nexport default ExpansionPanel;\n"],"names":["DEFAULT_LABELS","expandRow","collapseRow","expandFullscreen","closeFullscreen","placeholder","placeholderClose","ExpansionPanel","props","merged","mergeProps","defaultMode","disableExpand","noControls","closeOnOutsideClick","closeOnEsc","local","splitProps","mode","setMode","createControllableState","value","defaultValue","onChange","next","onModeChange","labels","effectiveMode","isFullRow","isFullscreen","toggleRow","current","openFullscreen","controlsContext","overlay","renderChildren","ctx","children","defaultControls","_$createComponent","Button","type","variant","size","title","onClick","icon","Icon","name","_$memo","controlBar","content","renderControls","Show","when","c","_el$","_tmpl$","_$insert","createEffect","prev","document","body","style","overflow","onCleanup","onKeyDown","event","key","addEventListener","removeEventListener","card","_el$2","_tmpl$2","_el$3","firstChild","_el$4","_el$5","nextSibling","_ref$","mergeRefs","ref","_$use","header","_$effect","_$className","cn","class","fallback","_el$6","_tmpl$3","_el$7","label","Portal","mount","isServer","undefined","_el$8","_tmpl$4","_el$9","_el$0","_el$1","_el$10","_$addEventListener","target","currentTarget","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"expansionPanel.js","sources":["../../../../src/components/dataDisplay/expansionPanel/expansionPanel.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, mergeProps, on, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Button } from \"../../inputs/button\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { FOCUSABLE } from \"../../../primitives/createFocusTrap\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { hasOverlayLayerAbove } from \"../../../primitives/overlayLayer\";\n\nexport type ExpansionMode = \"tile\" | \"row\" | \"fullscreen\";\n\nexport interface ExpansionPanelLabels {\n  expandRow?: string;\n  collapseRow?: string;\n  expandFullscreen?: string;\n  closeFullscreen?: string;\n  placeholder?: string;\n  placeholderClose?: string;\n}\n\nexport interface ExpansionPanelRenderContext {\n  mode: ExpansionMode;\n  isFullscreen: boolean;\n  isFullRow: boolean;\n}\n\nexport interface ExpansionPanelControlsContext extends ExpansionPanelRenderContext {\n  setMode: (next: ExpansionMode | ((current: ExpansionMode) => ExpansionMode)) => void;\n  toggleRow: () => void;\n  openFullscreen: () => void;\n  closeFullscreen: () => void;\n  labels: Required<ExpansionPanelLabels>;\n}\n\ntype ExpansionPanelChildren = JSX.Element | ((ctx: ExpansionPanelRenderContext) => JSX.Element);\ntype ExpansionPanelControls = JSX.Element | ((ctx: ExpansionPanelControlsContext) => JSX.Element);\n\nexport interface ExpansionPanelProps {\n  class?: string;\n  header?: JSX.Element;\n  mode?: ExpansionMode;\n  defaultMode?: ExpansionMode;\n  onModeChange?: (mode: ExpansionMode) => void;\n  disableExpand?: boolean;\n  noControls?: boolean;\n  renderControls?: ExpansionPanelControls;\n  closeOnOutsideClick?: boolean;\n  closeOnEsc?: boolean;\n  labels?: ExpansionPanelLabels;\n  children?: ExpansionPanelChildren;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst DEFAULT_LABELS: Required<ExpansionPanelLabels> = {\n  expandRow: \"Expand to full row\",\n  collapseRow: \"Collapse to grid\",\n  expandFullscreen: \"Expand to fullscreen\",\n  closeFullscreen: \"Close fullscreen\",\n  placeholder: \"Panel is open in fullscreen\",\n  placeholderClose: \"Close\",\n};\n\n/** Focuses the first of `targets` that is in the document and takes focus. */\nconst focusFirst = (targets: Array<Element | null | undefined>): void => {\n  for (const target of targets) {\n    if (!(target instanceof HTMLElement) || !target.isConnected) continue;\n    target.focus();\n    if ((target.getRootNode() as Document | ShadowRoot).activeElement === target) return;\n  }\n};\n\n/** The elements in `container` that Tab can reach, in document order. */\nconst tabbables = (container: HTMLElement): HTMLElement[] =>\n  Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(\n    // Older browsers (and jsdom) lack checkVisibility: count every match there.\n    (el) => typeof el.checkVisibility !== \"function\" || el.checkVisibility({ visibilityProperty: true })\n  );\n\nexport function ExpansionPanel(props: ExpansionPanelProps): JSX.Element {\n  const merged = mergeProps(\n    { defaultMode: \"tile\" as ExpansionMode, disableExpand: false, noControls: false, closeOnOutsideClick: true, closeOnEsc: true },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"header\",\n    \"mode\",\n    \"defaultMode\",\n    \"onModeChange\",\n    \"disableExpand\",\n    \"noControls\",\n    \"renderControls\",\n    \"closeOnOutsideClick\",\n    \"closeOnEsc\",\n    \"labels\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [mode, setMode] = createControllableState<ExpansionMode>({\n    value: () => local.mode,\n    defaultValue: local.defaultMode,\n    onChange: (next) => local.onModeChange?.(next),\n  });\n\n  const labels = (): Required<ExpansionPanelLabels> => ({ ...DEFAULT_LABELS, ...local.labels });\n  const effectiveMode = (): ExpansionMode => (local.disableExpand ? \"tile\" : mode());\n  const isFullRow = (): boolean => effectiveMode() === \"row\";\n  const isFullscreen = (): boolean => effectiveMode() === \"fullscreen\";\n\n  const toggleRow = (): void => setMode((current) => (current === \"row\" ? \"tile\" : \"row\"));\n  const openFullscreen = (): void => setMode(\"fullscreen\");\n  const closeFullscreen = (): void => setMode(\"tile\");\n\n  // Always attached and checks `closeOnOutsideClick` itself. Solid binds event\n  // handlers once, and the portal builds the overlay in a tracked scope, so\n  // choosing the handler by that prop there would rebuild the overlay, content\n  // included, whenever it changes.\n  const onOverlayClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (local.closeOnOutsideClick && event.target === event.currentTarget) closeFullscreen();\n  };\n\n  const controlsContext = (overlay: boolean): ExpansionPanelControlsContext => ({\n    mode: effectiveMode(),\n    isFullscreen: overlay,\n    isFullRow: overlay ? false : isFullRow(),\n    setMode,\n    toggleRow,\n    openFullscreen,\n    closeFullscreen,\n    labels: labels(),\n  });\n\n  // Static markup is created anew on every read of the prop, so read it once, and\n  // read the mode only for a render prop: static children then stay as they are\n  // when the row is toggled, as in React.\n  const renderChildren = (overlay: boolean): JSX.Element => {\n    const children = local.children;\n    if (typeof children !== \"function\") return children;\n    return children({ mode: effectiveMode(), isFullscreen: overlay, isFullRow: overlay ? false : isFullRow() });\n  };\n\n  const defaultControls = (overlay: boolean): JSX.Element => {\n    if (overlay) {\n      return (\n        <Button\n          ref={(el) => (closeButtonEl = el)}\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-label={labels().closeFullscreen}\n          title={labels().closeFullscreen}\n          onClick={closeFullscreen}\n          data-testid=\"expansion-panel-close\"\n          icon={<Icon name=\"close\" size={18} />}\n        />\n      );\n    }\n    return (\n      <>\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-pressed={isFullRow()}\n          aria-label={isFullRow() ? labels().collapseRow : labels().expandRow}\n          title={isFullRow() ? labels().collapseRow : labels().expandRow}\n          onClick={toggleRow}\n          data-testid=\"expansion-panel-row\"\n          icon={<Icon name={isFullRow() ? \"grid_view\" : \"table_rows\"} size={18} />}\n        />\n        <Button\n          ref={(el) => (fullscreenButtonEl = el)}\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-label={labels().expandFullscreen}\n          title={labels().expandFullscreen}\n          onClick={openFullscreen}\n          data-testid=\"expansion-panel-fullscreen\"\n          icon={<Icon name=\"open_in_full\" size={18} />}\n        />\n      </>\n    );\n  };\n\n  const controlBar = (overlay: boolean): JSX.Element => {\n    if (local.disableExpand || local.noControls) return null;\n    const controls = local.renderControls;\n    const content = controls\n      ? typeof controls === \"function\"\n        ? controls(controlsContext(overlay))\n        : controls\n      : defaultControls(overlay);\n    return <Show when={content}>{(c) => <div class=\"smwb-expansion-panel__controls\">{c() as JSX.Element}</div>}</Show>;\n  };\n\n  // Lock body scroll while fullscreen.\n  createEffect(() => {\n    if (!isFullscreen()) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    onCleanup(() => {\n      document.body.style.overflow = prev;\n    });\n  });\n\n  let overlayEl: HTMLDivElement | undefined;\n\n  // Escape closes fullscreen. An open layer above the overlay takes it first: a select\n  // menu opened from the panel, even one rendered inside it (`menuContainer`).\n  createEffect(() => {\n    if (!isFullscreen() || !local.closeOnEsc) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      // An Escape handled inside the panel, e.g. by a menu closing on it, keeps fullscreen.\n      if (event.key === \"Escape\" && !event.defaultPrevented && !hasOverlayLayerAbove(overlayEl)) {\n        // Handled: a FloatingWindow, Modal or Sheet around the panel skips it. Focus goes\n        // back into the tile, and their listener may come later in this dispatch.\n        event.preventDefault();\n        setMode(\"tile\");\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  let cardEl: HTMLDivElement | undefined;\n  let fullscreenButtonEl: HTMLButtonElement | HTMLAnchorElement | undefined;\n  let closeButtonEl: HTMLButtonElement | HTMLAnchorElement | undefined;\n  // Where focus goes back to when fullscreen ends; see the effect below.\n  let opener: Element | null = null;\n  let lastFocused: Element | null = null;\n\n  // The overlay and the card replace each other, so focus in the one that goes falls to\n  // <body>: focus in the overlay when fullscreen ends, on the tile's button when it\n  // begins. A FloatingWindow around the panel then misses the next Escape, as it takes\n  // Escape only while focus is inside it. So when fullscreen ends with focus on <body>,\n  // focus goes to the element focused last in the overlay if it survived into the tile,\n  // else to what had focus when fullscreen began, else to the tile's fullscreen button,\n  // else to the tile's first focusable element. Focus anywhere else is left alone.\n  createEffect(\n    on(isFullscreen, (fullscreen, wasFullscreen) => {\n      const active = document.activeElement;\n      if (fullscreen) {\n        opener = active === document.body ? null : active;\n        lastFocused = null;\n      } else if (wasFullscreen && (!active || active === document.body)) {\n        focusFirst([lastFocused, opener, fullscreenButtonEl, ...Array.from(cardEl?.querySelectorAll(FOCUSABLE) ?? [])]);\n      }\n    })\n  );\n\n  // Entering fullscreen removes the tile, so focus in it falls to <body>, behind an\n  // `aria-modal` overlay: Tab goes to the page under it and a screen reader is left on\n  // nothing. So when the overlay appears with focus on <body>, focus moves into it: to\n  // its close button, else to its first focusable element, else to the overlay itself.\n  // Focus elsewhere is left alone: on a control outside the panel that set a controlled\n  // `mode`, or on an element in the overlay that focused itself.\n  createEffect(() => {\n    const overlay = overlayEl;\n    const active = document.activeElement;\n    if (!isFullscreen() || !overlay?.isConnected || (active && active !== document.body)) return;\n    focusFirst([closeButtonEl, ...tabbables(overlay), overlay]);\n  });\n\n  // Tab stays in the overlay: it wraps at either end, and focus on <body> or on the page\n  // under the overlay comes back into it. Tab works as usual in what was opened from the\n  // panel: a layer above the overlay, or anything portaled after it (a menu, a picker\n  // panel). A Tab handled already is left alone too.\n  createEffect(() => {\n    if (!isFullscreen()) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      const overlay = overlayEl;\n      if (event.key !== \"Tab\" || event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;\n      if (!overlay?.isConnected) return;\n      const items = tabbables(overlay);\n      const first = items[0] ?? overlay;\n      const last = items[items.length - 1] ?? overlay;\n      const active = document.activeElement;\n      let target: HTMLElement | undefined;\n      if (active && active !== document.body && overlay.contains(active)) {\n        if (event.shiftKey ? active === first || active === overlay : active === last) {\n          target = event.shiftKey ? last : first;\n        }\n      } else if (\n        !hasOverlayLayerAbove(overlay) &&\n        (!active ||\n          active === document.body ||\n          overlay.compareDocumentPosition(active) & Node.DOCUMENT_POSITION_PRECEDING)\n      ) {\n        target = event.shiftKey ? last : first;\n      }\n      if (target) {\n        event.preventDefault();\n        target.focus();\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  const card = (): JSX.Element => (\n    <div\n      ref={mergeRefs(local.ref, (el) => (cardEl = el))}\n      class={cn(\"smwb-expansion-panel\", { \"smwb-expansion-panel_row\": isFullRow() }, local.class)}\n      data-testid=\"expansion-panel\"\n    >\n      <div class=\"smwb-expansion-panel__head\">\n        <div class=\"smwb-expansion-panel__header\">{local.header}</div>\n        {controlBar(false)}\n      </div>\n      <div class=\"smwb-expansion-panel__body\">{renderChildren(false)}</div>\n    </div>\n  );\n\n  return (\n    <Show when={isFullscreen()} fallback={card()}>\n      <>\n        <div class=\"smwb-expansion-panel__placeholder\" data-testid=\"expansion-panel-placeholder\">\n          <span>{labels().placeholder}</span>\n          <Button type=\"button\" variant=\"outlined\" size=\"small\" label={labels().placeholderClose} onClick={() => setMode(\"tile\")} />\n        </div>\n        <Portal mount={(isServer ? undefined : document.body) as Node}>\n          <div\n            ref={(el) => (overlayEl = el)}\n            class=\"smwb-expansion-panel__overlay smwb-dark\"\n            data-smwb-overlay-layer\n            role=\"dialog\"\n            aria-modal=\"true\"\n            tabIndex={-1}\n            data-testid=\"expansion-panel-overlay\"\n            onFocusIn={(event) => (lastFocused = event.target)}\n            onClick={onOverlayClick}\n          >\n            <div class=\"smwb-expansion-panel__dialog\">\n              <div class=\"smwb-expansion-panel__head\">\n                <div class=\"smwb-expansion-panel__header\">{local.header}</div>\n                {controlBar(true)}\n              </div>\n              <div class=\"smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen\">{renderChildren(true)}</div>\n            </div>\n          </div>\n        </Portal>\n      </>\n    </Show>\n  );\n}\n\nexport default ExpansionPanel;\n"],"names":["DEFAULT_LABELS","expandRow","collapseRow","expandFullscreen","closeFullscreen","placeholder","placeholderClose","focusFirst","targets","target","HTMLElement","isConnected","focus","getRootNode","activeElement","tabbables","container","Array","from","querySelectorAll","FOCUSABLE","filter","el","checkVisibility","visibilityProperty","ExpansionPanel","props","merged","mergeProps","defaultMode","disableExpand","noControls","closeOnOutsideClick","closeOnEsc","local","splitProps","mode","setMode","createControllableState","value","defaultValue","onChange","next","onModeChange","labels","effectiveMode","isFullRow","isFullscreen","toggleRow","current","openFullscreen","onOverlayClick","event","currentTarget","controlsContext","overlay","renderChildren","children","defaultControls","_$createComponent","Button","ref","closeButtonEl","type","variant","size","title","onClick","icon","Icon","name","_$memo","fullscreenButtonEl","controlBar","controls","renderControls","content","Show","when","c","_el$","_tmpl$","_$insert","createEffect","prev","document","body","style","overflow","onCleanup","overlayEl","onKeyDown","key","defaultPrevented","hasOverlayLayerAbove","preventDefault","addEventListener","removeEventListener","cardEl","opener","lastFocused","on","fullscreen","wasFullscreen","active","altKey","ctrlKey","metaKey","items","first","last","length","contains","shiftKey","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","card","_el$2","_tmpl$2","_el$3","firstChild","_el$4","_el$5","nextSibling","_ref$","mergeRefs","_$use","header","_$effect","_$className","cn","class","fallback","_el$6","_tmpl$3","_el$7","label","Portal","mount","isServer","undefined","_el$8","_tmpl$4","_el$9","_el$0","_el$1","_el$10","$$click","$$focusin","_$delegateEvents"],"mappings":"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"}

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

@@ -6,6 +6,8 @@ export interface KanbanProps extends JSX.HTMLAttributes<HTMLDivElement> {
      * pixels or any CSS length. 15.5rem by default.
      */
     columnWidth?: number | string;
+    /** Test id of the root `<div>`; `kanban` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLDivElement>;
 }
 export interface KanbanColumnProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "title"> {
@@ -19,6 +21,8 @@ export interface KanbanColumnProps extends Omit<JSX.HTMLAttributes<HTMLDivElemen
     empty?: JSX.Element;
     /** Under the cards, e.g. a link to the rest as a list. */
     footer?: JSX.Element;
+    /** Test id of the column's `<div>`; `kanban-column` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLDivElement>;
 }
 export interface KanbanCardProps extends Omit<JSX.HTMLAttributes<HTMLLIElement>, "title"> {
@@ -28,6 +32,8 @@ export interface KanbanCardProps extends Omit<JSX.HTMLAttributes<HTMLLIElement>,
     href?: string;
     /** Lines the title is clamped to: 3 by default. */
     titleLines?: number;
+    /** Test id of the card's `<li>`; `kanban-card` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLLIElement>;
 }
 /** A board: KanbanColumn children side by side, scrolling sideways when they do not fit. */

package/dist/components/dataDisplay/kanban/kanban.js

@@ -1,133 +1,143 @@
-import { use as g, spread as $, mergeProps as w, insert as r, createComponent as m, effect as K, setAttribute as h, memo as j, template as s } from "solid-js/web";
+import { use as g, spread as $, mergeProps as w, insert as n, createComponent as d, effect as K, setAttribute as h, memo as S, template as s } from "solid-js/web";
 import '../../../assets/styles/less/components/kanban/kanban.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                       */
-import { splitProps as k, mergeProps as x, children as b, Show as u, createUniqueId as A } from "solid-js";
+import { splitProps as k, mergeProps as x, children as b, Show as m, createUniqueId as A } from "solid-js";
 import y from "clsx";
 import { mergeRefs as v } from "../../../primitives/mergeRefs.js";
-var I = /* @__PURE__ */ s("<div data-testid=kanban>"), S = /* @__PURE__ */ s("<span class=smwb-kanban__count>"), W = /* @__PURE__ */ s("<ul class=smwb-kanban__cards role=list>"), q = /* @__PURE__ */ s("<div class=smwb-kanban__column-footer>"), B = /* @__PURE__ */ s("<div data-testid=kanban-column role=group><div class=smwb-kanban__column-header><div class=smwb-kanban__column-title>"), O = /* @__PURE__ */ s("<div class=smwb-kanban__empty>"), R = /* @__PURE__ */ s("<div class=smwb-kanban__card-body>"), U = /* @__PURE__ */ s("<li data-testid=kanban-card>"), z = /* @__PURE__ */ s("<div class=smwb-kanban__card-title>"), D = /* @__PURE__ */ s("<a class=smwb-kanban__card-title>");
-const C = (e) => typeof e == "object" && e ? e : {}, E = (e) => typeof e == "number" ? `${e}px` : e, f = (e) => e != null && e !== !1 && e !== !0 && e !== "";
-function Q(e) {
-  const [t, l] = k(e, ["class", "style", "columnWidth", "children", "ref"]);
+import { mergeStyle as C } from "../../../primitives/mergeStyle.js";
+var I = /* @__PURE__ */ s("<div>"), W = /* @__PURE__ */ s("<span class=smwb-kanban__count>"), q = /* @__PURE__ */ s("<ul class=smwb-kanban__cards role=list>"), B = /* @__PURE__ */ s("<div class=smwb-kanban__column-footer>"), R = /* @__PURE__ */ s("<div role=group><div class=smwb-kanban__column-header><div class=smwb-kanban__column-title>"), U = /* @__PURE__ */ s("<div class=smwb-kanban__empty>"), j = /* @__PURE__ */ s("<div class=smwb-kanban__card-body>"), z = /* @__PURE__ */ s("<li>"), D = /* @__PURE__ */ s("<div class=smwb-kanban__card-title>"), E = /* @__PURE__ */ s("<a class=smwb-kanban__card-title>");
+const F = (e) => typeof e == "number" ? `${e}px` : e, f = (e) => e != null && e !== !1 && e !== !0 && e !== "";
+function T(e) {
+  const [t, a] = k(e, ["class", "style", "columnWidth", "children", "ref", "data-testid"]);
   return (() => {
-    var c = I(), o = v(t.ref);
-    return typeof o == "function" && g(o, c), $(c, w(l, {
+    var c = I(), i = v(t.ref);
+    return typeof i == "function" && g(i, c), $(c, w({
+      get "data-testid"() {
+        return t["data-testid"] ?? "kanban";
+      }
+    }, a, {
       get class() {
         return y("smwb-kanban", t.class);
       },
       get style() {
-        return {
-          ...C(t.style),
-          "--smwb-kanban-column-width": E(t.columnWidth)
-        };
+        return C(t.style, {
+          "--smwb-kanban-column-width": F(t.columnWidth)
+        });
       }
-    }), !1, !0), r(c, () => t.children), c;
+    }), !1, !0), n(c, () => t.children), c;
   })();
 }
-function T(e) {
-  const [t, l] = k(e, ["class", "style", "title", "count", "accent", "empty", "footer", "children", "ref"]), c = `${A()}-title`, o = b(() => t.children), _ = b(() => t.empty), i = b(() => t.footer), p = () => o.toArray().some(f);
+function V(e) {
+  const [t, a] = k(e, ["class", "style", "title", "count", "accent", "empty", "footer", "children", "ref", "data-testid"]), c = `${A()}-title`, i = b(() => t.children), _ = b(() => t.empty), o = b(() => t.footer), p = () => i.toArray().some(f);
   return (() => {
-    var n = B(), d = n.firstChild, L = d.firstChild, P = v(t.ref);
-    return typeof P == "function" && g(P, n), h(n, "aria-labelledby", c), $(n, w(l, {
+    var r = R(), u = r.firstChild, L = u.firstChild, P = v(t.ref);
+    return typeof P == "function" && g(P, r), h(r, "aria-labelledby", c), $(r, w({
+      get "data-testid"() {
+        return t["data-testid"] ?? "kanban-column";
+      }
+    }, a, {
       get class() {
         return y("smwb-kanban__column", t.class);
       },
       get style() {
-        return {
-          ...C(t.style),
+        return C(t.style, {
           "--smwb-kanban-accent": t.accent
-        };
+        });
       }
-    }), !1, !0), h(L, "id", c), r(L, () => t.title), r(d, m(u, {
+    }), !1, !0), h(L, "id", c), n(L, () => t.title), n(u, d(m, {
       get when() {
-        return j(() => t.count !== void 0)() && t.count !== null;
+        return S(() => t.count !== void 0)() && t.count !== null;
       },
       get children() {
-        var a = S();
-        return r(a, () => t.count), a;
+        var l = W();
+        return n(l, () => t.count), l;
       }
-    }), null), r(n, m(u, {
+    }), null), n(r, d(m, {
       get when() {
         return p();
       },
       get fallback() {
-        return m(u, {
+        return d(m, {
           get when() {
             return f(_());
           },
           get children() {
-            var a = O();
-            return r(a, _), a;
+            var l = U();
+            return n(l, _), l;
           }
         });
       },
       get children() {
-        var a = W();
-        return r(a, o), a;
+        var l = q();
+        return n(l, i), l;
       }
-    }), null), r(n, m(u, {
+    }), null), n(r, d(m, {
       get when() {
-        return f(i());
+        return f(o());
       },
       get children() {
-        var a = q();
-        return r(a, i), a;
+        var l = B();
+        return n(l, o), l;
       }
-    }), null), n;
+    }), null), r;
   })();
 }
-function V(e) {
+function X(e) {
   const t = x({
     titleLines: 3
-  }, e), [l, c] = k(t, ["class", "style", "title", "href", "titleLines", "children", "ref"]), o = b(() => l.title), _ = b(() => l.children);
+  }, e), [a, c] = k(t, ["class", "style", "title", "href", "titleLines", "children", "ref", "data-testid"]), i = b(() => a.title), _ = b(() => a.children);
   return (() => {
-    var i = U(), p = v(l.ref);
-    return typeof p == "function" && g(p, i), $(i, w(c, {
+    var o = z(), p = v(a.ref);
+    return typeof p == "function" && g(p, o), $(o, w({
+      get "data-testid"() {
+        return a["data-testid"] ?? "kanban-card";
+      }
+    }, c, {
       get class() {
         return y("smwb-kanban__card", {
-          "smwb-kanban__card_link": !!l.href
-        }, l.class);
+          "smwb-kanban__card_link": !!a.href
+        }, a.class);
       },
       get style() {
-        return {
-          ...C(l.style),
-          "--smwb-kanban-title-lines": String(l.titleLines)
-        };
+        return C(a.style, {
+          "--smwb-kanban-title-lines": String(a.titleLines)
+        });
       }
-    }), !1, !0), r(i, m(u, {
+    }), !1, !0), n(o, d(m, {
       get when() {
-        return f(o());
+        return f(i());
       },
       get children() {
-        return m(u, {
+        return d(m, {
           get when() {
-            return l.href;
+            return a.href;
           },
           get fallback() {
             return (() => {
-              var n = z();
-              return r(n, o), n;
+              var r = D();
+              return n(r, i), r;
             })();
           },
-          children: (n) => (() => {
-            var d = D();
-            return r(d, o), K(() => h(d, "href", n())), d;
+          children: (r) => (() => {
+            var u = E();
+            return n(u, i), K(() => h(u, "href", r())), u;
           })()
         });
       }
-    }), null), r(i, m(u, {
+    }), null), n(o, d(m, {
       get when() {
         return f(_());
       },
       get children() {
-        var n = R();
-        return r(n, _), n;
+        var r = j();
+        return n(r, _), r;
       }
-    }), null), i;
+    }), null), o;
   })();
 }
 export {
-  Q as Kanban,
-  V as KanbanCard,
-  T as KanbanColumn
+  T as Kanban,
+  X as KanbanCard,
+  V as KanbanColumn
 };
 //# sourceMappingURL=kanban.js.map