@smwb/ui-solid 0.12.1 → 0.13.0

package/dist/source/components/dataDisplay/expansionPanel/expansionPanel.jsx

@@ -1,12 +1,14 @@
 import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/expansionPanel/expansionPanel.entry.less";
-import { Show, createEffect, mergeProps, onCleanup, splitProps } from "solid-js";
+import { Show, createEffect, mergeProps, on, onCleanup, splitProps } from "solid-js";
 import { Portal, isServer } from "solid-js/web";
 import cn from "clsx";
 import { Button } from "../../inputs/button";
 import { Icon } from "../../base/icon";
 import { createControllableState } from "../../../primitives/createControllableState";
+import { FOCUSABLE } from "../../../primitives/createFocusTrap";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { hasOverlayLayerAbove } from "../../../primitives/overlayLayer";
 const DEFAULT_LABELS = {
   expandRow: "Expand to full row",
   collapseRow: "Collapse to grid",
@@ -15,6 +17,17 @@ const DEFAULT_LABELS = {
   placeholder: "Panel is open in fullscreen",
   placeholderClose: "Close"
 };
+const focusFirst = (targets) => {
+  for (const target of targets) {
+    if (!(target instanceof HTMLElement) || !target.isConnected) continue;
+    target.focus();
+    if (target.getRootNode().activeElement === target) return;
+  }
+};
+const tabbables = (container) => Array.from(container.querySelectorAll(FOCUSABLE)).filter(
+  // Older browsers (and jsdom) lack checkVisibility: count every match there.
+  (el) => typeof el.checkVisibility !== "function" || el.checkVisibility({ visibilityProperty: true })
+);
 function ExpansionPanel(props) {
   const merged = mergeProps(
     { defaultMode: "tile", disableExpand: false, noControls: false, closeOnOutsideClick: true, closeOnEsc: true },
@@ -47,6 +60,9 @@ function ExpansionPanel(props) {
   const toggleRow = () => setMode((current) => current === "row" ? "tile" : "row");
   const openFullscreen = () => setMode("fullscreen");
   const closeFullscreen = () => setMode("tile");
+  const onOverlayClick = (event) => {
+    if (local.closeOnOutsideClick && event.target === event.currentTarget) closeFullscreen();
+  };
   const controlsContext = (overlay) => ({
     mode: effectiveMode(),
     isFullscreen: overlay,
@@ -58,12 +74,14 @@ function ExpansionPanel(props) {
     labels: labels()
   });
   const renderChildren = (overlay) => {
-    const ctx = { mode: effectiveMode(), isFullscreen: overlay, isFullRow: overlay ? false : isFullRow() };
-    return typeof local.children === "function" ? local.children(ctx) : local.children;
+    const children = local.children;
+    if (typeof children !== "function") return children;
+    return children({ mode: effectiveMode(), isFullscreen: overlay, isFullRow: overlay ? false : isFullRow() });
   };
   const defaultControls = (overlay) => {
     if (overlay) {
       return <Button
+        ref={(el) => closeButtonEl = el}
         type="button"
         variant="outlined"
         size="small"
@@ -87,6 +105,7 @@ function ExpansionPanel(props) {
       icon={<Icon name={isFullRow() ? "grid_view" : "table_rows"} size={18} />}
     />
         <Button
+      ref={(el) => fullscreenButtonEl = el}
       type="button"
       variant="outlined"
       size="small"
@@ -100,7 +119,8 @@ function ExpansionPanel(props) {
   };
   const controlBar = (overlay) => {
     if (local.disableExpand || local.noControls) return null;
-    const content = local.renderControls ? typeof local.renderControls === "function" ? local.renderControls(controlsContext(overlay)) : local.renderControls : defaultControls(overlay);
+    const controls = local.renderControls;
+    const content = controls ? typeof controls === "function" ? controls(controlsContext(overlay)) : controls : defaultControls(overlay);
     return <Show when={content}>{(c) => <div class="smwb-expansion-panel__controls">{c()}</div>}</Show>;
   };
   createEffect(() => {
@@ -111,16 +131,68 @@ function ExpansionPanel(props) {
       document.body.style.overflow = prev;
     });
   });
+  let overlayEl;
   createEffect(() => {
     if (!isFullscreen() || !local.closeOnEsc) return;
     const onKeyDown = (event) => {
-      if (event.key === "Escape") setMode("tile");
+      if (event.key === "Escape" && !event.defaultPrevented && !hasOverlayLayerAbove(overlayEl)) {
+        event.preventDefault();
+        setMode("tile");
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    onCleanup(() => document.removeEventListener("keydown", onKeyDown));
+  });
+  let cardEl;
+  let fullscreenButtonEl;
+  let closeButtonEl;
+  let opener = null;
+  let lastFocused = null;
+  createEffect(
+    on(isFullscreen, (fullscreen, wasFullscreen) => {
+      const active = document.activeElement;
+      if (fullscreen) {
+        opener = active === document.body ? null : active;
+        lastFocused = null;
+      } else if (wasFullscreen && (!active || active === document.body)) {
+        focusFirst([lastFocused, opener, fullscreenButtonEl, ...Array.from(cardEl?.querySelectorAll(FOCUSABLE) ?? [])]);
+      }
+    })
+  );
+  createEffect(() => {
+    const overlay = overlayEl;
+    const active = document.activeElement;
+    if (!isFullscreen() || !overlay?.isConnected || active && active !== document.body) return;
+    focusFirst([closeButtonEl, ...tabbables(overlay), overlay]);
+  });
+  createEffect(() => {
+    if (!isFullscreen()) return;
+    const onKeyDown = (event) => {
+      const overlay = overlayEl;
+      if (event.key !== "Tab" || event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+      if (!overlay?.isConnected) return;
+      const items = tabbables(overlay);
+      const first = items[0] ?? overlay;
+      const last = items[items.length - 1] ?? overlay;
+      const active = document.activeElement;
+      let target;
+      if (active && active !== document.body && overlay.contains(active)) {
+        if (event.shiftKey ? active === first || active === overlay : active === last) {
+          target = event.shiftKey ? last : first;
+        }
+      } else if (!hasOverlayLayerAbove(overlay) && (!active || active === document.body || overlay.compareDocumentPosition(active) & Node.DOCUMENT_POSITION_PRECEDING)) {
+        target = event.shiftKey ? last : first;
+      }
+      if (target) {
+        event.preventDefault();
+        target.focus();
+      }
     };
     document.addEventListener("keydown", onKeyDown);
     onCleanup(() => document.removeEventListener("keydown", onKeyDown));
   });
   const card = () => <div
-    ref={mergeRefs(local.ref)}
+    ref={mergeRefs(local.ref, (el) => cardEl = el)}
     class={cn("smwb-expansion-panel", { "smwb-expansion-panel_row": isFullRow() }, local.class)}
     data-testid="expansion-panel"
   >
@@ -138,13 +210,15 @@ function ExpansionPanel(props) {
         </div>
         <Portal mount={isServer ? void 0 : document.body}>
           <div
+    ref={(el) => overlayEl = el}
     class="smwb-expansion-panel__overlay smwb-dark"
+    data-smwb-overlay-layer
     role="dialog"
     aria-modal="true"
+    tabIndex={-1}
     data-testid="expansion-panel-overlay"
-    onClick={local.closeOnOutsideClick ? (event) => {
-      if (event.target === event.currentTarget) setMode("tile");
-    } : void 0}
+    onFocusIn={(event) => lastFocused = event.target}
+    onClick={onOverlayClick}
   >
             <div class="smwb-expansion-panel__dialog">
               <div class="smwb-expansion-panel__head">

package/dist/source/components/dataDisplay/expansionPanel/expansionPanel.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/expansionPanel/expansionPanel.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/expansionPanel/expansionPanel.entry.less\";\nimport { 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"],"mappings":"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","names":[],"file":"expansionPanel.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/expansionPanel/expansionPanel.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/expansionPanel/expansionPanel.entry.less\";\nimport { 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"],"mappings":"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","names":[],"file":"expansionPanel.jsx"}

package/dist/source/components/dataDisplay/kanban/kanban.jsx

@@ -3,17 +3,17 @@ import "@smwb/ui-styles/less/components/kanban/kanban.entry.less";
 import { Show, children, createUniqueId, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
-const styleObject = (style) => typeof style === "object" && style ? style : {};
+import { mergeStyle } from "../../../primitives/mergeStyle";
 const cssLength = (value) => typeof value === "number" ? `${value}px` : value;
 const present = (value) => value !== void 0 && value !== null && value !== false && value !== true && value !== "";
 function Kanban(props) {
-  const [local, rest] = splitProps(props, ["class", "style", "columnWidth", "children", "ref"]);
+  const [local, rest] = splitProps(props, ["class", "style", "columnWidth", "children", "ref", "data-testid"]);
   return <div
-    data-testid="kanban"
+    data-testid={local["data-testid"] ?? "kanban"}
     {...rest}
     ref={mergeRefs(local.ref)}
     class={cn("smwb-kanban", local.class)}
-    style={{ ...styleObject(local.style), "--smwb-kanban-column-width": cssLength(local.columnWidth) }}
+    style={mergeStyle(local.style, { "--smwb-kanban-column-width": cssLength(local.columnWidth) })}
   >
       {local.children}
     </div>;
@@ -28,7 +28,8 @@ function KanbanColumn(props) {
     "empty",
     "footer",
     "children",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const titleId = `${createUniqueId()}-title`;
   const cards = children(() => local.children);
@@ -36,13 +37,13 @@ function KanbanColumn(props) {
   const footer = children(() => local.footer);
   const hasCards = () => cards.toArray().some(present);
   return <div
-    data-testid="kanban-column"
+    data-testid={local["data-testid"] ?? "kanban-column"}
     role="group"
     aria-labelledby={titleId}
     {...rest}
     ref={mergeRefs(local.ref)}
     class={cn("smwb-kanban__column", local.class)}
-    style={{ ...styleObject(local.style), "--smwb-kanban-accent": local.accent }}
+    style={mergeStyle(local.style, { "--smwb-kanban-accent": local.accent })}
   >
       <div class="smwb-kanban__column-header">
         <div class="smwb-kanban__column-title" id={titleId}>
@@ -69,15 +70,24 @@ function KanbanColumn(props) {
 }
 function KanbanCard(props) {
   const merged = mergeProps({ titleLines: 3 }, props);
-  const [local, rest] = splitProps(merged, ["class", "style", "title", "href", "titleLines", "children", "ref"]);
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "style",
+    "title",
+    "href",
+    "titleLines",
+    "children",
+    "ref",
+    "data-testid"
+  ]);
   const title = children(() => local.title);
   const body = children(() => local.children);
   return <li
-    data-testid="kanban-card"
+    data-testid={local["data-testid"] ?? "kanban-card"}
     {...rest}
     ref={mergeRefs(local.ref)}
     class={cn("smwb-kanban__card", { "smwb-kanban__card_link": Boolean(local.href) }, local.class)}
-    style={{ ...styleObject(local.style), "--smwb-kanban-title-lines": String(local.titleLines) }}
+    style={mergeStyle(local.style, { "--smwb-kanban-title-lines": String(local.titleLines) })}
   >
       <Show when={present(title())}>
         <Show when={local.href} fallback={<div class="smwb-kanban__card-title">{title()}</div>}>

package/dist/source/components/dataDisplay/kanban/kanban.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/kanban/kanban.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/kanban/kanban.entry.less\";\nimport { type JSX, type ParentProps, Show, children, createUniqueId, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface KanbanProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The narrowest a column gets before the board scrolls sideways: a number of\n   * pixels or any CSS length. 15.5rem by default.\n   */\n  columnWidth?: number | string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface KanbanColumnProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** The column's name: text or a badge. It names the column for assistive technology. */\n  title: JSX.Element;\n  /** How many cards the column holds (it may show fewer), beside the title. Nothing is shown for null. */\n  count?: number | string | null;\n  /** The column's colour, a stripe along its top: any CSS colour. */\n  accent?: string;\n  /** Shown in place of the cards when there are none, e.g. \"Empty\". */\n  empty?: JSX.Element;\n  /** Under the cards, e.g. a link to the rest as a list. */\n  footer?: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface KanbanCardProps extends Omit<JSX.HTMLAttributes<HTMLLIElement>, \"title\"> {\n  /** The card's title, clamped to `titleLines` lines. */\n  title?: JSX.Element;\n  /** Makes the title a link, and the whole card open it. */\n  href?: string;\n  /** Lines the title is clamped to: 3 by default. */\n  titleLines?: number;\n  ref?: Ref<HTMLLIElement>;\n}\n\ntype Style = JSX.CSSProperties | string | undefined;\n\nconst styleObject = (style: Style): JSX.CSSProperties => (typeof style === \"object\" && style ? style : {});\n\nconst cssLength = (value: number | string | undefined): string | undefined =>\n  typeof value === \"number\" ? `${value}px` : value;\n\nconst present = (value: unknown): boolean =>\n  value !== undefined && value !== null && value !== false && value !== true && value !== \"\";\n\n/** A board: KanbanColumn children side by side, scrolling sideways when they do not fit. */\nexport function Kanban(props: ParentProps<KanbanProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"style\", \"columnWidth\", \"children\", \"ref\"]);\n  return (\n    <div\n      data-testid=\"kanban\"\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-kanban\", local.class)}\n      style={{ ...styleObject(local.style), \"--smwb-kanban-column-width\": cssLength(local.columnWidth) }}\n    >\n      {local.children}\n    </div>\n  );\n}\n\n/** A column of the board: its title and count, then its KanbanCard children, or `empty` when it has none. */\nexport function KanbanColumn(props: ParentProps<KanbanColumnProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"style\",\n    \"title\",\n    \"count\",\n    \"accent\",\n    \"empty\",\n    \"footer\",\n    \"children\",\n    \"ref\",\n  ]);\n  const titleId = `${createUniqueId()}-title`;\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const cards = children(() => local.children);\n  const empty = children(() => local.empty);\n  const footer = children(() => local.footer);\n  const hasCards = (): boolean => cards.toArray().some(present);\n\n  return (\n    <div\n      data-testid=\"kanban-column\"\n      role=\"group\"\n      aria-labelledby={titleId}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-kanban__column\", local.class)}\n      style={{ ...styleObject(local.style), \"--smwb-kanban-accent\": local.accent }}\n    >\n      <div class=\"smwb-kanban__column-header\">\n        <div class=\"smwb-kanban__column-title\" id={titleId}>\n          {local.title}\n        </div>\n        <Show when={local.count !== undefined && local.count !== null}>\n          <span class=\"smwb-kanban__count\">{local.count}</span>\n        </Show>\n      </div>\n      <Show\n        when={hasCards()}\n        fallback={\n          <Show when={present(empty())}>\n            <div class=\"smwb-kanban__empty\">{empty()}</div>\n          </Show>\n        }\n      >\n        <ul class=\"smwb-kanban__cards\" role=\"list\">\n          {cards()}\n        </ul>\n      </Show>\n      <Show when={present(footer())}>\n        <div class=\"smwb-kanban__column-footer\">{footer()}</div>\n      </Show>\n    </div>\n  );\n}\n\n/**\n * A card on the board: its title (a link with `href`, and then the whole card\n * opens it) and the children under it.\n */\nexport function KanbanCard(props: ParentProps<KanbanCardProps>): JSX.Element {\n  const merged = mergeProps({ titleLines: 3 }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"style\", \"title\", \"href\", \"titleLines\", \"children\", \"ref\"]);\n\n  const title = children(() => local.title);\n  const body = children(() => local.children);\n\n  return (\n    <li\n      data-testid=\"kanban-card\"\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-kanban__card\", { \"smwb-kanban__card_link\": Boolean(local.href) }, local.class)}\n      style={{ ...styleObject(local.style), \"--smwb-kanban-title-lines\": String(local.titleLines) }}\n    >\n      <Show when={present(title())}>\n        <Show when={local.href} fallback={<div class=\"smwb-kanban__card-title\">{title()}</div>}>\n          {(href) => (\n            <a class=\"smwb-kanban__card-title\" href={href()}>\n              {title()}\n            </a>\n          )}\n        </Show>\n      </Show>\n      <Show when={present(body())}>\n        <div class=\"smwb-kanban__card-body\">{body()}</div>\n      </Show>\n    </li>\n  );\n}\n\nexport default Kanban;\n"],"mappings":"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","names":[],"file":"kanban.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/kanban/kanban.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/kanban/kanban.entry.less\";\nimport { type JSX, type ParentProps, Show, children, createUniqueId, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport interface KanbanProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The narrowest a column gets before the board scrolls sideways: a number of\n   * pixels or any CSS length. 15.5rem by default.\n   */\n  columnWidth?: number | string;\n  /** Test id of the root `<div>`; `kanban` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface KanbanColumnProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** The column's name: text or a badge. It names the column for assistive technology. */\n  title: JSX.Element;\n  /** How many cards the column holds (it may show fewer), beside the title. Nothing is shown for null. */\n  count?: number | string | null;\n  /** The column's colour, a stripe along its top: any CSS colour. */\n  accent?: string;\n  /** Shown in place of the cards when there are none, e.g. \"Empty\". */\n  empty?: JSX.Element;\n  /** Under the cards, e.g. a link to the rest as a list. */\n  footer?: JSX.Element;\n  /** Test id of the column's `<div>`; `kanban-column` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface KanbanCardProps extends Omit<JSX.HTMLAttributes<HTMLLIElement>, \"title\"> {\n  /** The card's title, clamped to `titleLines` lines. */\n  title?: JSX.Element;\n  /** Makes the title a link, and the whole card open it. */\n  href?: string;\n  /** Lines the title is clamped to: 3 by default. */\n  titleLines?: number;\n  /** Test id of the card's `<li>`; `kanban-card` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLLIElement>;\n}\n\nconst cssLength = (value: number | string | undefined): string | undefined =>\n  typeof value === \"number\" ? `${value}px` : value;\n\nconst present = (value: unknown): boolean =>\n  value !== undefined && value !== null && value !== false && value !== true && value !== \"\";\n\n/** A board: KanbanColumn children side by side, scrolling sideways when they do not fit. */\nexport function Kanban(props: ParentProps<KanbanProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"style\", \"columnWidth\", \"children\", \"ref\", \"data-testid\"]);\n  return (\n    <div\n      data-testid={local[\"data-testid\"] ?? \"kanban\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-kanban\", local.class)}\n      style={mergeStyle(local.style, { \"--smwb-kanban-column-width\": cssLength(local.columnWidth) })}\n    >\n      {local.children}\n    </div>\n  );\n}\n\n/** A column of the board: its title and count, then its KanbanCard children, or `empty` when it has none. */\nexport function KanbanColumn(props: ParentProps<KanbanColumnProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"style\",\n    \"title\",\n    \"count\",\n    \"accent\",\n    \"empty\",\n    \"footer\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n  const titleId = `${createUniqueId()}-title`;\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const cards = children(() => local.children);\n  const empty = children(() => local.empty);\n  const footer = children(() => local.footer);\n  const hasCards = (): boolean => cards.toArray().some(present);\n\n  return (\n    <div\n      data-testid={local[\"data-testid\"] ?? \"kanban-column\"}\n      role=\"group\"\n      aria-labelledby={titleId}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-kanban__column\", local.class)}\n      style={mergeStyle(local.style, { \"--smwb-kanban-accent\": local.accent })}\n    >\n      <div class=\"smwb-kanban__column-header\">\n        <div class=\"smwb-kanban__column-title\" id={titleId}>\n          {local.title}\n        </div>\n        <Show when={local.count !== undefined && local.count !== null}>\n          <span class=\"smwb-kanban__count\">{local.count}</span>\n        </Show>\n      </div>\n      <Show\n        when={hasCards()}\n        fallback={\n          <Show when={present(empty())}>\n            <div class=\"smwb-kanban__empty\">{empty()}</div>\n          </Show>\n        }\n      >\n        <ul class=\"smwb-kanban__cards\" role=\"list\">\n          {cards()}\n        </ul>\n      </Show>\n      <Show when={present(footer())}>\n        <div class=\"smwb-kanban__column-footer\">{footer()}</div>\n      </Show>\n    </div>\n  );\n}\n\n/**\n * A card on the board: its title (a link with `href`, and then the whole card\n * opens it) and the children under it.\n */\nexport function KanbanCard(props: ParentProps<KanbanCardProps>): JSX.Element {\n  const merged = mergeProps({ titleLines: 3 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"style\",\n    \"title\",\n    \"href\",\n    \"titleLines\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const title = children(() => local.title);\n  const body = children(() => local.children);\n\n  return (\n    <li\n      data-testid={local[\"data-testid\"] ?? \"kanban-card\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-kanban__card\", { \"smwb-kanban__card_link\": Boolean(local.href) }, local.class)}\n      style={mergeStyle(local.style, { \"--smwb-kanban-title-lines\": String(local.titleLines) })}\n    >\n      <Show when={present(title())}>\n        <Show when={local.href} fallback={<div class=\"smwb-kanban__card-title\">{title()}</div>}>\n          {(href) => (\n            <a class=\"smwb-kanban__card-title\" href={href()}>\n              {title()}\n            </a>\n          )}\n        </Show>\n      </Show>\n      <Show when={present(body())}>\n        <div class=\"smwb-kanban__card-body\">{body()}</div>\n      </Show>\n    </li>\n  );\n}\n\nexport default Kanban;\n"],"mappings":"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","names":[],"file":"kanban.jsx"}

package/dist/source/components/dataDisplay/lazyImage/lazyImage.jsx

@@ -53,7 +53,7 @@ function LazyImage(props) {
     src={resolvedSrc()}
     alt={local.alt ?? ""}
     loading={local.lazy ? "lazy" : void 0}
-    decoding="async"
+    decoding={rest.decoding ?? "async"}
     onError={onError}
   />
       </Show>

package/dist/source/components/dataDisplay/lazyImage/lazyImage.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/lazyImage/lazyImage.entry.less\";\nimport { type JSX, Show, children, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface LazyImageProps extends Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, \"onError\"> {\n  /** Image URL. When absent (or after a load error) the `fallback` is shown. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Rendered in place of the image when it is missing or fails to load. */\n  fallback?: JSX.Element | undefined;\n  /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */\n  lazy?: boolean;\n  /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `\"4 / 3\"`) to reserve space before load. */\n  aspectRatio?: string | number;\n  /** Fires on a load error (after the fallback is swapped in). */\n  onError?: (event: Event) => void;\n  ref?: Ref<HTMLImageElement>;\n}\n\n/**\n * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy\n * loading — the `<img decoding=async onError=…>` + `<Show>` dance hand-rolled in\n * every gallery, in one primitive. SSR-safe: renders the image markup on the\n * server; the IntersectionObserver only runs after mount on the client.\n */\nexport function LazyImage(props: LazyImageProps): JSX.Element {\n  const merged = mergeProps({ lazy: true }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"alt\",\n    \"fallback\",\n    \"lazy\",\n    \"aspectRatio\",\n    \"class\",\n    \"onError\",\n    \"ref\",\n  ]);\n\n  const [failed, setFailed] = createSignal(false);\n  // When lazy, hold the real src back until the element scrolls into view.\n  const [visible, setVisible] = createSignal(!merged.lazy);\n  let imgEl: HTMLImageElement | undefined;\n\n  onMount(() => {\n    if (!local.lazy || visible() || !imgEl) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setVisible(true);\n      return;\n    }\n    const io = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setVisible(true);\n        io.disconnect();\n      }\n    });\n    io.observe(imgEl);\n    onCleanup(() => io.disconnect());\n  });\n\n  const onError = (event: Event): void => {\n    setFailed(true);\n    local.onError?.(event);\n  };\n\n  const showFallback = (): boolean => failed() || !local.src;\n  const resolvedSrc = (): string | undefined => (visible() ? local.src : undefined);\n  // Read the fallback once, and only while it is drawn: markup passed as a prop\n  // is created anew on every read, and during hydration a copy the server never\n  // rendered has no DOM node.\n  const fallback = children(() => (showFallback() ? local.fallback : undefined));\n  const style = (): JSX.CSSProperties | undefined =>\n    local.aspectRatio != null ? { \"aspect-ratio\": String(local.aspectRatio) } : undefined;\n\n  return (\n    <span class={cn(\"smwb-lazy-image\", local.class, { \"smwb-lazy-image--empty\": showFallback() })} style={style()}>\n      <Show when={fallback()}>\n        <span class=\"smwb-lazy-image__fallback\">{fallback()}</span>\n      </Show>\n      <Show when={!showFallback()}>\n        <img\n          {...rest}\n          ref={mergeRefs(local.ref, (el) => (imgEl = el as HTMLImageElement))}\n          class=\"smwb-lazy-image__img\"\n          src={resolvedSrc()}\n          alt={local.alt ?? \"\"}\n          loading={local.lazy ? \"lazy\" : undefined}\n          decoding=\"async\"\n          onError={onError}\n        />\n      </Show>\n    </span>\n  );\n}\n\nexport default LazyImage;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,UAAU,cAAc,YAAY,WAAW,SAAS,kBAAkB;AACnG,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAuB7B,SAAS,UAAU,OAAoC;AAC5D,QAAM,SAAS,WAAW,EAAE,MAAM,KAAK,GAAG,KAAK;AAC/C,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAa,KAAK;AAE9C,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,CAAC,OAAO,IAAI;AACvD,MAAI;AAEJ,UAAQ,MAAM;AACZ,QAAI,CAAC,MAAM,QAAQ,QAAQ,KAAK,CAAC,MAAO;AACxC,QAAI,OAAO,yBAAyB,aAAa;AAC/C,iBAAW,IAAI;AACf;AAAA,IACF;AACA,UAAM,KAAK,IAAI,qBAAqB,CAAC,YAAY;AAC/C,UAAI,QAAQ,KAAK,CAAC,UAAU,MAAM,cAAc,GAAG;AACjD,mBAAW,IAAI;AACf,WAAG,WAAW;AAAA,MAChB;AAAA,IACF,CAAC;AACD,OAAG,QAAQ,KAAK;AAChB,cAAU,MAAM,GAAG,WAAW,CAAC;AAAA,EACjC,CAAC;AAED,QAAM,UAAU,CAAC,UAAuB;AACtC,cAAU,IAAI;AACd,UAAM,UAAU,KAAK;AAAA,EACvB;AAEA,QAAM,eAAe,MAAe,OAAO,KAAK,CAAC,MAAM;AACvD,QAAM,cAAc,MAA2B,QAAQ,IAAI,MAAM,MAAM;AAIvE,QAAM,WAAW,SAAS,MAAO,aAAa,IAAI,MAAM,WAAW,MAAU;AAC7E,QAAM,QAAQ,MACZ,MAAM,eAAe,OAAO,EAAE,gBAAgB,OAAO,MAAM,WAAW,EAAE,IAAI;AAE9E,SACE,CAAC,KAAK,OAAO,GAAG,mBAAmB,MAAM,OAAO,EAAE,0BAA0B,aAAa,EAAE,CAAC,GAAG,OAAO,MAAM,GAAG;AAAA,MAC7G,CAAC,KAAK,MAAM,SAAS,GAAG;AAAA,QACtB,CAAC,KAAK,MAAM,6BAA6B,SAAS,EAAE,EAAnD,KAA0D;AAAA,MAC7D,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,CAAC,aAAa,GAAG;AAAA,QAC3B,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,KAAK,CAAC,OAAQ,QAAQ,EAAuB;AAAA,IAClE,MAAM;AAAA,IACN,KAAK,YAAY;AAAA,IACjB,KAAK,MAAM,OAAO;AAAA,IAClB,SAAS,MAAM,OAAO,SAAS;AAAA,IAC/B,SAAS;AAAA,IACT,SAAS;AAAA,EACX,EAAE;AAAA,MACJ,EAXC,KAWM;AAAA,IACT,EAhBC;AAkBL;AAEA,IAAO,oBAAQ;","names":[],"file":"lazyImage.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/lazyImage/lazyImage.entry.less\";\nimport { type JSX, Show, children, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface LazyImageProps extends Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, \"onError\"> {\n  /** Image URL. When absent (or after a load error) the `fallback` is shown. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Rendered in place of the image when it is missing or fails to load. */\n  fallback?: JSX.Element | undefined;\n  /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */\n  lazy?: boolean;\n  /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `\"4 / 3\"`) to reserve space before load. */\n  aspectRatio?: string | number;\n  /** Fires on a load error (after the fallback is swapped in). */\n  onError?: (event: Event) => void;\n  ref?: Ref<HTMLImageElement>;\n}\n\n/**\n * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy\n * loading — the `<img decoding=async onError=…>` + `<Show>` dance hand-rolled in\n * every gallery, in one primitive. SSR-safe: renders the image markup on the\n * server; the IntersectionObserver only runs after mount on the client.\n */\nexport function LazyImage(props: LazyImageProps): JSX.Element {\n  const merged = mergeProps({ lazy: true }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"alt\",\n    \"fallback\",\n    \"lazy\",\n    \"aspectRatio\",\n    \"class\",\n    \"onError\",\n    \"ref\",\n  ]);\n\n  const [failed, setFailed] = createSignal(false);\n  // When lazy, hold the real src back until the element scrolls into view.\n  const [visible, setVisible] = createSignal(!merged.lazy);\n  let imgEl: HTMLImageElement | undefined;\n\n  onMount(() => {\n    if (!local.lazy || visible() || !imgEl) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setVisible(true);\n      return;\n    }\n    const io = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setVisible(true);\n        io.disconnect();\n      }\n    });\n    io.observe(imgEl);\n    onCleanup(() => io.disconnect());\n  });\n\n  const onError = (event: Event): void => {\n    setFailed(true);\n    local.onError?.(event);\n  };\n\n  const showFallback = (): boolean => failed() || !local.src;\n  const resolvedSrc = (): string | undefined => (visible() ? local.src : undefined);\n  // Read the fallback once, and only while it is drawn: markup passed as a prop\n  // is created anew on every read, and during hydration a copy the server never\n  // rendered has no DOM node.\n  const fallback = children(() => (showFallback() ? local.fallback : undefined));\n  const style = (): JSX.CSSProperties | undefined =>\n    local.aspectRatio != null ? { \"aspect-ratio\": String(local.aspectRatio) } : undefined;\n\n  return (\n    <span class={cn(\"smwb-lazy-image\", local.class, { \"smwb-lazy-image--empty\": showFallback() })} style={style()}>\n      <Show when={fallback()}>\n        <span class=\"smwb-lazy-image__fallback\">{fallback()}</span>\n      </Show>\n      <Show when={!showFallback()}>\n        <img\n          {...rest}\n          ref={mergeRefs(local.ref, (el) => (imgEl = el as HTMLImageElement))}\n          class=\"smwb-lazy-image__img\"\n          src={resolvedSrc()}\n          alt={local.alt ?? \"\"}\n          // `lazy` wins over the caller's loading; without it (undefined), the\n          // caller's stays. decoding=\"async\" is a default: the caller's wins,\n          // and an explicit undefined keeps it.\n          loading={local.lazy ? \"lazy\" : undefined}\n          decoding={rest.decoding ?? \"async\"}\n          onError={onError}\n        />\n      </Show>\n    </span>\n  );\n}\n\nexport default LazyImage;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,UAAU,cAAc,YAAY,WAAW,SAAS,kBAAkB;AACnG,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAuB7B,SAAS,UAAU,OAAoC;AAC5D,QAAM,SAAS,WAAW,EAAE,MAAM,KAAK,GAAG,KAAK;AAC/C,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAa,KAAK;AAE9C,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,CAAC,OAAO,IAAI;AACvD,MAAI;AAEJ,UAAQ,MAAM;AACZ,QAAI,CAAC,MAAM,QAAQ,QAAQ,KAAK,CAAC,MAAO;AACxC,QAAI,OAAO,yBAAyB,aAAa;AAC/C,iBAAW,IAAI;AACf;AAAA,IACF;AACA,UAAM,KAAK,IAAI,qBAAqB,CAAC,YAAY;AAC/C,UAAI,QAAQ,KAAK,CAAC,UAAU,MAAM,cAAc,GAAG;AACjD,mBAAW,IAAI;AACf,WAAG,WAAW;AAAA,MAChB;AAAA,IACF,CAAC;AACD,OAAG,QAAQ,KAAK;AAChB,cAAU,MAAM,GAAG,WAAW,CAAC;AAAA,EACjC,CAAC;AAED,QAAM,UAAU,CAAC,UAAuB;AACtC,cAAU,IAAI;AACd,UAAM,UAAU,KAAK;AAAA,EACvB;AAEA,QAAM,eAAe,MAAe,OAAO,KAAK,CAAC,MAAM;AACvD,QAAM,cAAc,MAA2B,QAAQ,IAAI,MAAM,MAAM;AAIvE,QAAM,WAAW,SAAS,MAAO,aAAa,IAAI,MAAM,WAAW,MAAU;AAC7E,QAAM,QAAQ,MACZ,MAAM,eAAe,OAAO,EAAE,gBAAgB,OAAO,MAAM,WAAW,EAAE,IAAI;AAE9E,SACE,CAAC,KAAK,OAAO,GAAG,mBAAmB,MAAM,OAAO,EAAE,0BAA0B,aAAa,EAAE,CAAC,GAAG,OAAO,MAAM,GAAG;AAAA,MAC7G,CAAC,KAAK,MAAM,SAAS,GAAG;AAAA,QACtB,CAAC,KAAK,MAAM,6BAA6B,SAAS,EAAE,EAAnD,KAA0D;AAAA,MAC7D,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,CAAC,aAAa,GAAG;AAAA,QAC3B,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,KAAK,CAAC,OAAQ,QAAQ,EAAuB;AAAA,IAClE,MAAM;AAAA,IACN,KAAK,YAAY;AAAA,IACjB,KAAK,MAAM,OAAO;AAAA,IAIlB,SAAS,MAAM,OAAO,SAAS;AAAA,IAC/B,UAAU,KAAK,YAAY;AAAA,IAC3B,SAAS;AAAA,EACX,EAAE;AAAA,MACJ,EAdC,KAcM;AAAA,IACT,EAnBC;AAqBL;AAEA,IAAO,oBAAQ;","names":[],"file":"lazyImage.jsx"}

package/dist/source/components/dataDisplay/list/list.jsx

@@ -4,13 +4,13 @@ import { Show, children, splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 function List(props) {
-  const [local, rest] = splitProps(props, ["class", "dense", "subheader", "children", "ref"]);
+  const [local, rest] = splitProps(props, ["class", "dense", "subheader", "children", "ref", "data-testid"]);
   const subheader = children(() => local.subheader);
   return <ul
     {...rest}
     ref={mergeRefs(local.ref)}
-    data-testid="list"
-    role="list"
+    data-testid={local["data-testid"] ?? "list"}
+    role={rest.role ?? "list"}
     class={cn("smwb-list", { "smwb-list_dense": local.dense }, local.class)}
   >
       <Show when={subheader()}>

package/dist/source/components/dataDisplay/list/list.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/list/list.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/list/list.entry.less\";\nimport { type JSX, type ParentProps, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ListProps extends JSX.HTMLAttributes<HTMLUListElement> {\n  /** Compact vertical rhythm. */\n  dense?: boolean;\n  /** Section subheader rendered before the items. */\n  subheader?: JSX.Element;\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport function List(props: ParentProps<ListProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"dense\", \"subheader\", \"children\", \"ref\"]);\n  // Read the subheader once: markup passed as a prop is created anew on every\n  // read, and during hydration a copy the server never rendered has no DOM node.\n  const subheader = children(() => local.subheader);\n  return (\n    <ul\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"list\"\n      role=\"list\"\n      class={cn(\"smwb-list\", { \"smwb-list_dense\": local.dense }, local.class)}\n    >\n      <Show when={subheader()}>\n        <li class=\"smwb-list__subheader\">{subheader()}</li>\n      </Show>\n      {local.children}\n    </ul>\n  );\n}\n\nexport default List;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,MAAM,UAAU,kBAAkB;AACvE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAU7B,SAAS,KAAK,OAA4C;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,SAAS,aAAa,YAAY,KAAK,CAAC;AAG1F,QAAM,YAAY,SAAS,MAAM,MAAM,SAAS;AAChD,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,OAAO,GAAG,aAAa,EAAE,mBAAmB,MAAM,MAAM,GAAG,MAAM,KAAK;AAAA,GACvE;AAAA,MACC,CAAC,KAAK,MAAM,UAAU,GAAG;AAAA,QACvB,CAAC,GAAG,MAAM,wBAAwB,UAAU,EAAE,EAA7C,GAAkD;AAAA,MACrD,EAFC,KAEM;AAAA,OACN,MAAM,SAAS;AAAA,IAClB,EAXC;AAaL;AAEA,IAAO,eAAQ;","names":[],"file":"list.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/list/list.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/list/list.entry.less\";\nimport { type JSX, type ParentProps, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ListProps extends JSX.HTMLAttributes<HTMLUListElement> {\n  /** Compact vertical rhythm. */\n  dense?: boolean;\n  /** Section subheader rendered before the items. */\n  subheader?: JSX.Element;\n  /** Test id of the root `<ul>`; `list` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport function List(props: ParentProps<ListProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"dense\", \"subheader\", \"children\", \"ref\", \"data-testid\"]);\n  // Read the subheader once: markup passed as a prop is created anew on every\n  // read, and during hydration a copy the server never rendered has no DOM node.\n  const subheader = children(() => local.subheader);\n  return (\n    <ul\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"list\"}\n      // A default: the caller's own wins, and an explicit undefined keeps it.\n      role={rest.role ?? \"list\"}\n      class={cn(\"smwb-list\", { \"smwb-list_dense\": local.dense }, local.class)}\n    >\n      <Show when={subheader()}>\n        <li class=\"smwb-list__subheader\">{subheader()}</li>\n      </Show>\n      {local.children}\n    </ul>\n  );\n}\n\nexport default List;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,MAAM,UAAU,kBAAkB;AACvE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAY7B,SAAS,KAAK,OAA4C;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,SAAS,aAAa,YAAY,OAAO,aAAa,CAAC;AAGzG,QAAM,YAAY,SAAS,MAAM,MAAM,SAAS;AAChD,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,aAAa,MAAM,aAAa,KAAK;AAAA,IAErC,MAAM,KAAK,QAAQ;AAAA,IACnB,OAAO,GAAG,aAAa,EAAE,mBAAmB,MAAM,MAAM,GAAG,MAAM,KAAK;AAAA,GACvE;AAAA,MACC,CAAC,KAAK,MAAM,UAAU,GAAG;AAAA,QACvB,CAAC,GAAG,MAAM,wBAAwB,UAAU,EAAE,EAA7C,GAAkD;AAAA,MACrD,EAFC,KAEM;AAAA,OACN,MAAM,SAAS;AAAA,IAClB,EAZC;AAcL;AAEA,IAAO,eAAQ;","names":[],"file":"list.jsx"}

package/dist/source/components/dataDisplay/list/listItem.jsx

@@ -16,22 +16,23 @@ function ListItem(props) {
     "ref"
   ]);
   const interactive = () => !!local.onClick && !local.disabled;
+  const onClick = (event) => {
+    if (!local.disabled) callHandler(local.onClick, event);
+  };
+  const onKeyDown = (event) => {
+    if (interactive() && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      callHandler(local.onClick, event);
+    }
+  };
   return <li
     ref={mergeRefs(local.ref)}
     role="listitem"
     tabindex={interactive() ? 0 : void 0}
     aria-disabled={local.disabled || void 0}
     aria-selected={local.selected || void 0}
-    onClick={local.disabled ? void 0 : local.onClick}
-    onKeyDown={interactive() ? (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        callHandler(
-          local.onClick,
-          event
-        );
-      }
-    } : void 0}
+    onClick={onClick}
+    onKeyDown={onKeyDown}
     class={cn("smwb-list__item", local.class, {
       "smwb-disabled": local.disabled,
       "smwb-selected": local.selected,

package/dist/source/components/dataDisplay/list/listItem.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/list/listItem.tsx"],"sourcesContent":["import { type JSX, type ParentProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface ListItemProps {\n  disabled?: boolean;\n  class?: string;\n  selected?: boolean;\n  /** Compact row. */\n  dense?: boolean;\n  /** Render a bottom divider. */\n  divider?: boolean;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  onClick?: JSX.EventHandlerUnion<HTMLLIElement, MouseEvent>;\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport function ListItem(props: ParentProps<ListItemProps>): JSX.Element {\n  const [local] = splitProps(props, [\n    \"class\",\n    \"children\",\n    \"disabled\",\n    \"selected\",\n    \"dense\",\n    \"divider\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"onClick\",\n    \"ref\",\n  ]);\n\n  const interactive = (): boolean => !!local.onClick && !local.disabled;\n\n  return (\n    <li\n      ref={mergeRefs(local.ref)}\n      role=\"listitem\"\n      tabindex={interactive() ? 0 : undefined}\n      aria-disabled={local.disabled || undefined}\n      aria-selected={local.selected || undefined}\n      onClick={local.disabled ? undefined : local.onClick}\n      onKeyDown={\n        interactive()\n          ? (event) => {\n              if (event.key === \"Enter\" || event.key === \" \") {\n                event.preventDefault();\n                callHandler(\n                  local.onClick,\n                  event as unknown as MouseEvent & { currentTarget: HTMLLIElement; target: Element }\n                );\n              }\n            }\n          : undefined\n      }\n      class={cn(\"smwb-list__item\", local.class, {\n        \"smwb-disabled\": local.disabled,\n        \"smwb-selected\": local.selected,\n        \"smwb-list__item_dense\": local.dense,\n        \"smwb-list__item_divider\": local.divider,\n      })}\n      data-testid=\"list-item\"\n    >\n      <span class=\"smwb-list__item__start\">{local.startAdornment}</span>\n      <span class=\"smwb-list__item__main\">{local.children}</span>\n      <span class=\"smwb-list__item__end\">{local.endAdornment}</span>\n    </li>\n  );\n}\n\nexport default ListItem;\n"],"mappings":"AAAA,SAAqC,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAgBrB,SAAS,SAAS,OAAgD;AACvE,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,cAAc,MAAe,CAAC,CAAC,MAAM,WAAW,CAAC,MAAM;AAE7D,SACE,CAAC;AAAA,IACC,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,KAAK;AAAA,IACL,UAAU,YAAY,IAAI,IAAI;AAAA,IAC9B,eAAe,MAAM,YAAY;AAAA,IACjC,eAAe,MAAM,YAAY;AAAA,IACjC,SAAS,MAAM,WAAW,SAAY,MAAM;AAAA,IAC5C,WACE,YAAY,IACR,CAAC,UAAU;AACT,UAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,cAAM,eAAe;AACrB;AAAA,UACE,MAAM;AAAA,UACN;AAAA,QACF;AAAA,MACF;AAAA,IACF,IACA;AAAA,IAEN,OAAO,GAAG,mBAAmB,MAAM,OAAO;AAAA,MACxC,iBAAiB,MAAM;AAAA,MACvB,iBAAiB,MAAM;AAAA,MACvB,yBAAyB,MAAM;AAAA,MAC/B,2BAA2B,MAAM;AAAA,IACnC,CAAC;AAAA,IACD,YAAY;AAAA,GACb;AAAA,MACC,CAAC,KAAK,MAAM,0BAA0B,MAAM,eAAe,EAA1D,KAAiE;AAAA,MAClE,CAAC,KAAK,MAAM,yBAAyB,MAAM,SAAS,EAAnD,KAA0D;AAAA,MAC3D,CAAC,KAAK,MAAM,wBAAwB,MAAM,aAAa,EAAtD,KAA6D;AAAA,IAChE,EA/BC;AAiCL;AAEA,IAAO,mBAAQ;","names":[],"file":"listItem.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/list/listItem.tsx"],"sourcesContent":["import { type JSX, type ParentProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface ListItemProps {\n  disabled?: boolean;\n  class?: string;\n  selected?: boolean;\n  /** Compact row. */\n  dense?: boolean;\n  /** Render a bottom divider. */\n  divider?: boolean;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  onClick?: JSX.EventHandlerUnion<HTMLLIElement, MouseEvent>;\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport function ListItem(props: ParentProps<ListItemProps>): JSX.Element {\n  const [local] = splitProps(props, [\n    \"class\",\n    \"children\",\n    \"disabled\",\n    \"selected\",\n    \"dense\",\n    \"divider\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"onClick\",\n    \"ref\",\n  ]);\n\n  const interactive = (): boolean => !!local.onClick && !local.disabled;\n\n  // Solid binds event handlers once, so both are always attached and read the\n  // props themselves: an item can be disabled, or get another onClick, after it\n  // renders.\n  const onClick: JSX.EventHandler<HTMLLIElement, MouseEvent> = (event) => {\n    if (!local.disabled) callHandler(local.onClick, event);\n  };\n  const onKeyDown: JSX.EventHandler<HTMLLIElement, KeyboardEvent> = (event) => {\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      callHandler(local.onClick, event as unknown as MouseEvent & { currentTarget: HTMLLIElement; target: Element });\n    }\n  };\n\n  return (\n    <li\n      ref={mergeRefs(local.ref)}\n      role=\"listitem\"\n      tabindex={interactive() ? 0 : undefined}\n      aria-disabled={local.disabled || undefined}\n      aria-selected={local.selected || undefined}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      class={cn(\"smwb-list__item\", local.class, {\n        \"smwb-disabled\": local.disabled,\n        \"smwb-selected\": local.selected,\n        \"smwb-list__item_dense\": local.dense,\n        \"smwb-list__item_divider\": local.divider,\n      })}\n      data-testid=\"list-item\"\n    >\n      <span class=\"smwb-list__item__start\">{local.startAdornment}</span>\n      <span class=\"smwb-list__item__main\">{local.children}</span>\n      <span class=\"smwb-list__item__end\">{local.endAdornment}</span>\n    </li>\n  );\n}\n\nexport default ListItem;\n"],"mappings":"AAAA,SAAqC,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAgBrB,SAAS,SAAS,OAAgD;AACvE,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,cAAc,MAAe,CAAC,CAAC,MAAM,WAAW,CAAC,MAAM;AAK7D,QAAM,UAAuD,CAAC,UAAU;AACtE,QAAI,CAAC,MAAM,SAAU,aAAY,MAAM,SAAS,KAAK;AAAA,EACvD;AACA,QAAM,YAA4D,CAAC,UAAU;AAC3E,QAAI,YAAY,MAAM,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AACjE,YAAM,eAAe;AACrB,kBAAY,MAAM,SAAS,KAAkF;AAAA,IAC/G;AAAA,EACF;AAEA,SACE,CAAC;AAAA,IACC,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,KAAK;AAAA,IACL,UAAU,YAAY,IAAI,IAAI;AAAA,IAC9B,eAAe,MAAM,YAAY;AAAA,IACjC,eAAe,MAAM,YAAY;AAAA,IACjC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO,GAAG,mBAAmB,MAAM,OAAO;AAAA,MACxC,iBAAiB,MAAM;AAAA,MACvB,iBAAiB,MAAM;AAAA,MACvB,yBAAyB,MAAM;AAAA,MAC/B,2BAA2B,MAAM;AAAA,IACnC,CAAC;AAAA,IACD,YAAY;AAAA,GACb;AAAA,MACC,CAAC,KAAK,MAAM,0BAA0B,MAAM,eAAe,EAA1D,KAAiE;AAAA,MAClE,CAAC,KAAK,MAAM,yBAAyB,MAAM,SAAS,EAAnD,KAA0D;AAAA,MAC3D,CAAC,KAAK,MAAM,wBAAwB,MAAM,aAAa,EAAtD,KAA6D;AAAA,IAChE,EAnBC;AAqBL;AAEA,IAAO,mBAAQ;","names":[],"file":"listItem.jsx"}

package/dist/source/components/dataDisplay/meter/meter.jsx

@@ -30,7 +30,8 @@ function Meter(props) {
     "thresholds",
     "color",
     "hideText",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const share = () => local.max > 0 ? Math.min(1, Math.max(0, local.value / local.max)) : 0;
   const color = () => local.color ?? meterColor(share(), local.thresholds);
@@ -48,7 +49,7 @@ function Meter(props) {
     aria-valuemin={0}
     aria-valuemax={local.max}
     aria-valuetext={`${local.value} ${local.ofLabel} ${local.max}`}
-    data-testid="meter"
+    data-testid={local["data-testid"] ?? "meter"}
     class={cn("smwb-meter", `smwb-meter_color-${color()}`, { "smwb-meter_bar-only": local.hideText }, local.class)}
   >
       <span class="smwb-meter__track" aria-hidden="true">

package/dist/source/components/dataDisplay/meter/meter.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/meter/meter.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/meter/meter.entry.less\";\nimport { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type MeterColor = \"neutral\" | \"primary\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\n/** From this share of `max` (0–1) on, the meter takes `color`. */\nexport interface MeterThreshold {\n  from: number;\n  color: MeterColor;\n}\n\n/** Info while under way, success when complete. */\nexport const DEFAULT_METER_THRESHOLDS: readonly MeterThreshold[] = [\n  { from: 0, color: \"info\" },\n  { from: 1, color: \"success\" },\n];\n\nexport interface MeterProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"role\"> {\n  /** How many are done (X of Y). */\n  value: number;\n  /** How many there are in all (X of Y). */\n  max: number;\n  /** What is measured — the accessible name, e.g. \"Requirements accepted\". */\n  label: string;\n  /** Visible text instead of \"X of Y\": markup, or a function of (value, max). */\n  text?: JSX.Element | ((value: number, max: number) => JSX.Element);\n  /** The word between the figures in the default text and in aria-valuetext. */\n  ofLabel?: string;\n  /** Colour by share of `max`: the last threshold the share reaches wins. */\n  thresholds?: readonly MeterThreshold[];\n  /** A fixed colour, instead of the thresholds. */\n  color?: MeterColor;\n  /** The bar only; the text stays available to assistive technology. */\n  hideText?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** The colour for a share of the whole: the last threshold (by `from`) the share reaches. */\nexport function meterColor(share: number, thresholds: readonly MeterThreshold[]): MeterColor {\n  let color: MeterColor = \"neutral\";\n  let from = -Infinity;\n  for (const threshold of thresholds) {\n    if (share >= threshold.from && threshold.from >= from) {\n      color = threshold.color;\n      from = threshold.from;\n    }\n  }\n  return color;\n}\n\n/** A share of a whole, \"X of Y\": a bar and the figures beside it, coloured by thresholds. */\nexport function Meter(props: MeterProps): JSX.Element {\n  const merged = mergeProps({ ofLabel: \"of\", thresholds: DEFAULT_METER_THRESHOLDS }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"value\",\n    \"max\",\n    \"label\",\n    \"text\",\n    \"ofLabel\",\n    \"thresholds\",\n    \"color\",\n    \"hideText\",\n    \"ref\",\n  ]);\n\n  const share = (): number => (local.max > 0 ? Math.min(1, Math.max(0, local.value / local.max)) : 0);\n  const color = (): MeterColor => local.color ?? meterColor(share(), local.thresholds);\n  // Read the text once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy made only to test it has no server DOM node. A\n  // function of (value, max) is kept as it is and called where the text renders.\n  const custom = children(() => local.text as JSX.Element);\n  const text = (): JSX.Element => {\n    const resolved = custom() as JSX.Element | ((value: number, max: number) => JSX.Element);\n    return typeof resolved === \"function\" ? resolved(local.value, local.max) : resolved;\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      role=\"meter\"\n      aria-label={local.label}\n      aria-valuenow={local.value}\n      aria-valuemin={0}\n      aria-valuemax={local.max}\n      aria-valuetext={`${local.value} ${local.ofLabel} ${local.max}`}\n      data-testid=\"meter\"\n      class={cn(\"smwb-meter\", `smwb-meter_color-${color()}`, { \"smwb-meter_bar-only\": local.hideText }, local.class)}\n    >\n      <span class=\"smwb-meter__track\" aria-hidden=\"true\">\n        <span class=\"smwb-meter__fill\" style={{ width: `${share() * 100}%` }} />\n      </span>\n      <Show when={!local.hideText}>\n        <span class=\"smwb-meter__text\" aria-hidden=\"true\">\n          <Show\n            when={custom() !== undefined}\n            fallback={\n              <>\n                <b class=\"smwb-meter__value\">{local.value}</b>\n                <span class=\"smwb-meter__of\">\n                  {\" \"}\n                  {local.ofLabel} {local.max}\n                </span>\n              </>\n            }\n          >\n            {text()}\n          </Show>\n        </span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Meter;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,UAAU,YAAY,kBAAkB;AACjE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAW7B,MAAM,2BAAsD;AAAA,EACjE,EAAE,MAAM,GAAG,OAAO,OAAO;AAAA,EACzB,EAAE,MAAM,GAAG,OAAO,UAAU;AAC9B;AAuBO,SAAS,WAAW,OAAe,YAAmD;AAC3F,MAAI,QAAoB;AACxB,MAAI,OAAO;AACX,aAAW,aAAa,YAAY;AAClC,QAAI,SAAS,UAAU,QAAQ,UAAU,QAAQ,MAAM;AACrD,cAAQ,UAAU;AAClB,aAAO,UAAU;AAAA,IACnB;AAAA,EACF;AACA,SAAO;AACT;AAGO,SAAS,MAAM,OAAgC;AACpD,QAAM,SAAS,WAAW,EAAE,SAAS,MAAM,YAAY,yBAAyB,GAAG,KAAK;AACxF,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,QAAQ,MAAe,MAAM,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,MAAM,QAAQ,MAAM,GAAG,CAAC,IAAI;AACjG,QAAM,QAAQ,MAAkB,MAAM,SAAS,WAAW,MAAM,GAAG,MAAM,UAAU;AAInF,QAAM,SAAS,SAAS,MAAM,MAAM,IAAmB;AACvD,QAAM,OAAO,MAAmB;AAC9B,UAAM,WAAW,OAAO;AACxB,WAAO,OAAO,aAAa,aAAa,SAAS,MAAM,OAAO,MAAM,GAAG,IAAI;AAAA,EAC7E;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,KAAK;AAAA,IACL,YAAY,MAAM;AAAA,IAClB,eAAe,MAAM;AAAA,IACrB,eAAe;AAAA,IACf,eAAe,MAAM;AAAA,IACrB,gBAAgB,GAAG,MAAM,KAAK,IAAI,MAAM,OAAO,IAAI,MAAM,GAAG;AAAA,IAC5D,YAAY;AAAA,IACZ,OAAO,GAAG,cAAc,oBAAoB,MAAM,CAAC,IAAI,EAAE,uBAAuB,MAAM,SAAS,GAAG,MAAM,KAAK;AAAA,GAC9G;AAAA,MACC,CAAC,KAAK,MAAM,oBAAoB,YAAY,OAAO;AAAA,QACjD,CAAC,KAAK,MAAM,mBAAmB,OAAO,EAAE,OAAO,GAAG,MAAM,IAAI,GAAG,IAAI,GAAG,EAAE;AAAA,MAC1E,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU;AAAA,QAC3B,CAAC,KAAK,MAAM,mBAAmB,YAAY,OAAO;AAAA,UAChD,CAAC;AAAA,IACC,MAAM,OAAO,MAAM;AAAA,IACnB,UACE,EAAE;AAAA,gBACA,CAAC,EAAE,MAAM,qBAAqB,MAAM,MAAM,EAAzC,EAA6C;AAAA,gBAC9C,CAAC,KAAK,MAAM,iBAAiB;AAAA,mBAC1B,IAAI;AAAA,mBACJ,MAAM,QAAQ,EAAE,MAAM,IAAI;AAAA,gBAC7B,EAHC,KAGM;AAAA,cACT;AAAA,GAEH;AAAA,aACE,KAAK,EAAE;AAAA,UACV,EAbC,KAaM;AAAA,QACT,EAfC,KAeM;AAAA,MACT,EAjBC,KAiBM;AAAA,IACT,EAjCC;AAmCL;AAEA,IAAO,gBAAQ;","names":[],"file":"meter.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/meter/meter.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/meter/meter.entry.less\";\nimport { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type MeterColor = \"neutral\" | \"primary\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\n/** From this share of `max` (0–1) on, the meter takes `color`. */\nexport interface MeterThreshold {\n  from: number;\n  color: MeterColor;\n}\n\n/** Info while under way, success when complete. */\nexport const DEFAULT_METER_THRESHOLDS: readonly MeterThreshold[] = [\n  { from: 0, color: \"info\" },\n  { from: 1, color: \"success\" },\n];\n\nexport interface MeterProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"role\"> {\n  /** How many are done (X of Y). */\n  value: number;\n  /** How many there are in all (X of Y). */\n  max: number;\n  /** What is measured — the accessible name, e.g. \"Requirements accepted\". */\n  label: string;\n  /** Visible text instead of \"X of Y\": markup, or a function of (value, max). */\n  text?: JSX.Element | ((value: number, max: number) => JSX.Element);\n  /** The word between the figures in the default text and in aria-valuetext. */\n  ofLabel?: string;\n  /** Colour by share of `max`: the last threshold the share reaches wins. */\n  thresholds?: readonly MeterThreshold[];\n  /** A fixed colour, instead of the thresholds. */\n  color?: MeterColor;\n  /** The bar only; the text stays available to assistive technology. */\n  hideText?: boolean;\n  /** Test id of the root `<div>`; `meter` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** The colour for a share of the whole: the last threshold (by `from`) the share reaches. */\nexport function meterColor(share: number, thresholds: readonly MeterThreshold[]): MeterColor {\n  let color: MeterColor = \"neutral\";\n  let from = -Infinity;\n  for (const threshold of thresholds) {\n    if (share >= threshold.from && threshold.from >= from) {\n      color = threshold.color;\n      from = threshold.from;\n    }\n  }\n  return color;\n}\n\n/** A share of a whole, \"X of Y\": a bar and the figures beside it, coloured by thresholds. */\nexport function Meter(props: MeterProps): JSX.Element {\n  const merged = mergeProps({ ofLabel: \"of\", thresholds: DEFAULT_METER_THRESHOLDS }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"value\",\n    \"max\",\n    \"label\",\n    \"text\",\n    \"ofLabel\",\n    \"thresholds\",\n    \"color\",\n    \"hideText\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const share = (): number => (local.max > 0 ? Math.min(1, Math.max(0, local.value / local.max)) : 0);\n  const color = (): MeterColor => local.color ?? meterColor(share(), local.thresholds);\n  // Read the text once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy made only to test it has no server DOM node. A\n  // function of (value, max) is kept as it is and called where the text renders.\n  const custom = children(() => local.text as JSX.Element);\n  const text = (): JSX.Element => {\n    const resolved = custom() as JSX.Element | ((value: number, max: number) => JSX.Element);\n    return typeof resolved === \"function\" ? resolved(local.value, local.max) : resolved;\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      role=\"meter\"\n      aria-label={local.label}\n      aria-valuenow={local.value}\n      aria-valuemin={0}\n      aria-valuemax={local.max}\n      aria-valuetext={`${local.value} ${local.ofLabel} ${local.max}`}\n      data-testid={local[\"data-testid\"] ?? \"meter\"}\n      class={cn(\"smwb-meter\", `smwb-meter_color-${color()}`, { \"smwb-meter_bar-only\": local.hideText }, local.class)}\n    >\n      <span class=\"smwb-meter__track\" aria-hidden=\"true\">\n        <span class=\"smwb-meter__fill\" style={{ width: `${share() * 100}%` }} />\n      </span>\n      <Show when={!local.hideText}>\n        <span class=\"smwb-meter__text\" aria-hidden=\"true\">\n          <Show\n            when={custom() !== undefined}\n            fallback={\n              <>\n                <b class=\"smwb-meter__value\">{local.value}</b>\n                <span class=\"smwb-meter__of\">\n                  {\" \"}\n                  {local.ofLabel} {local.max}\n                </span>\n              </>\n            }\n          >\n            {text()}\n          </Show>\n        </span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Meter;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,UAAU,YAAY,kBAAkB;AACjE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAW7B,MAAM,2BAAsD;AAAA,EACjE,EAAE,MAAM,GAAG,OAAO,OAAO;AAAA,EACzB,EAAE,MAAM,GAAG,OAAO,UAAU;AAC9B;AAyBO,SAAS,WAAW,OAAe,YAAmD;AAC3F,MAAI,QAAoB;AACxB,MAAI,OAAO;AACX,aAAW,aAAa,YAAY;AAClC,QAAI,SAAS,UAAU,QAAQ,UAAU,QAAQ,MAAM;AACrD,cAAQ,UAAU;AAClB,aAAO,UAAU;AAAA,IACnB;AAAA,EACF;AACA,SAAO;AACT;AAGO,SAAS,MAAM,OAAgC;AACpD,QAAM,SAAS,WAAW,EAAE,SAAS,MAAM,YAAY,yBAAyB,GAAG,KAAK;AACxF,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,QAAQ,MAAe,MAAM,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,MAAM,QAAQ,MAAM,GAAG,CAAC,IAAI;AACjG,QAAM,QAAQ,MAAkB,MAAM,SAAS,WAAW,MAAM,GAAG,MAAM,UAAU;AAInF,QAAM,SAAS,SAAS,MAAM,MAAM,IAAmB;AACvD,QAAM,OAAO,MAAmB;AAC9B,UAAM,WAAW,OAAO;AACxB,WAAO,OAAO,aAAa,aAAa,SAAS,MAAM,OAAO,MAAM,GAAG,IAAI;AAAA,EAC7E;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,KAAK;AAAA,IACL,YAAY,MAAM;AAAA,IAClB,eAAe,MAAM;AAAA,IACrB,eAAe;AAAA,IACf,eAAe,MAAM;AAAA,IACrB,gBAAgB,GAAG,MAAM,KAAK,IAAI,MAAM,OAAO,IAAI,MAAM,GAAG;AAAA,IAC5D,aAAa,MAAM,aAAa,KAAK;AAAA,IACrC,OAAO,GAAG,cAAc,oBAAoB,MAAM,CAAC,IAAI,EAAE,uBAAuB,MAAM,SAAS,GAAG,MAAM,KAAK;AAAA,GAC9G;AAAA,MACC,CAAC,KAAK,MAAM,oBAAoB,YAAY,OAAO;AAAA,QACjD,CAAC,KAAK,MAAM,mBAAmB,OAAO,EAAE,OAAO,GAAG,MAAM,IAAI,GAAG,IAAI,GAAG,EAAE;AAAA,MAC1E,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU;AAAA,QAC3B,CAAC,KAAK,MAAM,mBAAmB,YAAY,OAAO;AAAA,UAChD,CAAC;AAAA,IACC,MAAM,OAAO,MAAM;AAAA,IACnB,UACE,EAAE;AAAA,gBACA,CAAC,EAAE,MAAM,qBAAqB,MAAM,MAAM,EAAzC,EAA6C;AAAA,gBAC9C,CAAC,KAAK,MAAM,iBAAiB;AAAA,mBAC1B,IAAI;AAAA,mBACJ,MAAM,QAAQ,EAAE,MAAM,IAAI;AAAA,gBAC7B,EAHC,KAGM;AAAA,cACT;AAAA,GAEH;AAAA,aACE,KAAK,EAAE;AAAA,UACV,EAbC,KAaM;AAAA,QACT,EAfC,KAeM;AAAA,MACT,EAjBC,KAiBM;AAAA,IACT,EAjCC;AAmCL;AAEA,IAAO,gBAAQ;","names":[],"file":"meter.jsx"}

package/dist/source/components/dataDisplay/personChip/personChip.jsx

@@ -36,7 +36,8 @@ function PersonChip(props) {
     "colorSeed",
     "color",
     "meta",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   return <Dynamic
     component={local.href ? "a" : "span"}
@@ -46,7 +47,7 @@ function PersonChip(props) {
     title={local.compact ? local.name : void 0}
     role={local.compact && !local.href ? "img" : void 0}
     aria-label={local.compact ? local.name : void 0}
-    data-testid="person-chip"
+    data-testid={local["data-testid"] ?? "person-chip"}
     class={cn("smwb-person-chip", { "smwb-person-chip_link": !!local.href, "smwb-person-chip_compact": local.compact }, local.class)}
   >
       <Avatar