@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/headless/source/components/dataDisplay/treeView/treeView.jsx

@@ -1,71 +1,143 @@
-import { For, Show, createContext, createSignal, mergeProps, splitProps, useContext } from "solid-js";
+import {
+  For,
+  Show,
+  createContext,
+  createMemo,
+  createSignal,
+  createUniqueId,
+  mergeProps,
+  splitProps,
+  useContext
+} from "solid-js";
 import cn from "clsx";
 import { Icon } from "../../base/icon";
 import { createControllableState } from "../../../primitives/createControllableState";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { isOwnClick } from "../../../utils/ownClick";
 const TreeContext = createContext();
+function sameItem(a, b) {
+  if (a === b) return true;
+  if (a.id !== b.id || a.label !== b.label || a.hasChildren !== b.hasChildren) return false;
+  const left = a.children;
+  const right = b.children;
+  if (left === right) return true;
+  if (!left || !right || left.length !== right.length) return false;
+  return left.every((child, idx) => {
+    const other = right[idx];
+    return !!other && child.id === other.id && child.label === other.label && child.hasChildren === other.hasChildren;
+  });
+}
+function TreeNodes(props) {
+  const entries = createMemo(
+    () => props.items.map((item, idx) => {
+      const path = props.path === "" ? `${idx}` : `${props.path}.${idx}`;
+      return { id: item.id ?? path, item, path };
+    })
+  );
+  const byId = createMemo(() => new Map(entries().map((entry) => [entry.id, entry])));
+  const ids = createMemo(() => entries().map((entry) => entry.id));
+  return <For each={ids()}>
+      {(id) => {
+    let last = byId().get(id);
+    const entry = () => last = byId().get(id) ?? last;
+    return props.wrap ? <div class="smwb-tree__wrapper" role="presentation">
+            <TreeNode entry={entry} />
+          </div> : <TreeNode entry={entry} />;
+  }}
+    </For>;
+}
 function TreeNode(props) {
   const ctx = useContext(TreeContext);
-  const nodeId = () => props.item.id ?? props.path;
-  const resolvedChildren = () => props.item.children ?? ctx.loadedChildren()[nodeId()];
-  const isLazy = () => ctx.hasLoader && (!!props.item.hasChildren || !!ctx.loadedChildren()[nodeId()]);
+  const nodeId = props.entry().id;
+  const item = () => props.entry().item;
+  const labelId = `${createUniqueId()}-label`;
+  const slotItem = createMemo(() => item(), void 0, { equals: sameItem });
+  const labelSlot = createMemo(
+    () => ctx.renderLabel ? ctx.renderLabel(slotItem(), nodeId) : slotItem().label
+  );
+  const resolvedChildren = () => item().children ?? ctx.loadedChildren()[nodeId];
+  const isLazy = () => ctx.hasLoader && (!!item().hasChildren || !!ctx.loadedChildren()[nodeId]);
   const hasChildNodes = () => !!resolvedChildren() && (resolvedChildren()?.length ?? 0) > 0 || isLazy();
-  const isOpen = () => ctx.expandedIds().includes(nodeId());
-  const isSelected = () => ctx.selectedIds().includes(nodeId());
-  const isLoading = () => ctx.loadingIds().includes(nodeId());
-  const onLabelClick = () => {
-    if (hasChildNodes()) {
-      if (!isOpen()) ctx.ensureLoaded(props.item, nodeId());
-      ctx.toggleExpanded(nodeId());
-    }
-    if (ctx.selectable) ctx.toggleSelected(nodeId());
+  const isOpen = () => ctx.expandedIds().includes(nodeId);
+  const isSelected = () => ctx.selectedIds().includes(nodeId);
+  const isLoading = () => ctx.loadingIds().includes(nodeId);
+  const toggleNode = () => {
+    if (!isOpen()) ctx.ensureLoaded(item(), nodeId);
+    ctx.toggleExpanded(nodeId);
+  };
+  const activateRow = () => {
+    if (ctx.toggleOnRowClick && hasChildNodes()) toggleNode();
+    if (ctx.selectable) ctx.toggleSelected(nodeId);
   };
   const onKeyDown = (event) => {
+    if (event.target !== event.currentTarget) return;
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
-      onLabelClick();
+      activateRow();
     } else if (event.key === "ArrowRight" && hasChildNodes()) {
-      ctx.ensureLoaded(props.item, nodeId());
-      ctx.setOpen(nodeId(), true);
+      ctx.ensureLoaded(item(), nodeId);
+      ctx.setOpen(nodeId, true);
     } else if (event.key === "ArrowLeft" && hasChildNodes()) {
-      ctx.setOpen(nodeId(), false);
+      ctx.setOpen(nodeId, false);
     }
   };
+  const onContentClick = (event) => {
+    if (isOwnClick(event)) activateRow();
+  };
   return <div
     class={cn("smwb-tree__node", { "smwb-tree__node_selected": isSelected() })}
     role="treeitem"
+    aria-labelledby={labelId}
     aria-expanded={hasChildNodes() ? isOpen() : void 0}
     aria-selected={ctx.selectable || ctx.checkboxes ? isSelected() : void 0}
   >
-      <span class="smwb-tree__node__content" onClick={onLabelClick} onKeyDown={onKeyDown} tabindex={0} role="button">
+      <div class="smwb-tree__node__row">
+        {
+    /*
+      A pointer shortcut: the keyboard expands with ArrowRight/ArrowLeft on the row, so the chevron is
+      decorative, unnamed and no Tab stop. If it ever becomes a real <button>, `aria-hidden` must go with
+      it (a focusable element inside `aria-hidden` is an ARIA violation) and it then needs a name plus
+      `aria-expanded`.
+    */
+  }
+        <span class="smwb-tree__node__toggle" aria-hidden="true" onClick={() => hasChildNodes() && toggleNode()}>
+          <Show when={hasChildNodes()}>
+            <Icon name={isOpen() ? "expand_more" : "chevron_right"} size={20} />
+          </Show>
+        </span>
         <Show when={ctx.checkboxes}>
           <input
     type="checkbox"
     class="smwb-tree__node__checkbox"
     checked={isSelected()}
-    onClick={(e) => e.stopPropagation()}
-    onChange={() => ctx.toggleSelected(nodeId())}
-    aria-label={props.item.label}
+    onChange={() => ctx.toggleSelected(nodeId)}
+    aria-label={item().label}
   />
         </Show>
-        <span class="smwb-tree__node__label">
-          <Show when={hasChildNodes()} fallback={<Icon name={ctx.listIcon} size={20} />}>
-            <Icon name={isOpen() ? ctx.nodeIcon.opened ?? "folder_open" : ctx.nodeIcon.closed ?? "folder"} fill={1} size={20} />
-          </Show>
-          {ctx.renderLabel ? ctx.renderLabel(props.item, nodeId()) : props.item.label}
+        <span class="smwb-tree__node__content" onClick={onContentClick} onKeyDown={onKeyDown} tabindex={0} role="button">
+          <span class="smwb-tree__node__label" id={labelId}>
+            <Show when={hasChildNodes()} fallback={<Icon name={ctx.listIcon} size={20} />}>
+              <Icon name={isOpen() ? ctx.nodeIcon.opened ?? "folder_open" : ctx.nodeIcon.closed ?? "folder"} fill={1} size={20} />
+            </Show>
+            {labelSlot()}
+          </span>
         </span>
-      </span>
+        <Show when={ctx.renderActions}>
+          {(renderActions) => {
+    const actionsSlot = createMemo(() => renderActions()(slotItem(), nodeId));
+    return <span class="smwb-tree__node__actions">{actionsSlot()}</span>;
+  }}
+        </Show>
+      </div>
       <Show when={hasChildNodes() && isOpen()}>
         <div role="group">
           <Show
     when={!(isLoading() && !resolvedChildren())}
     fallback={<div class="smwb-tree__node__loading" role="status">
-                Загрузка…
+                {ctx.loadingText}
               </div>}
   >
-            <For each={resolvedChildren() ?? []}>
-              {(child, idx) => <TreeNode item={child} path={`${props.path}.${idx()}`} />}
-            </For>
+            <TreeNodes items={resolvedChildren() ?? []} path={props.entry().path} />
           </Show>
         </div>
       </Show>
@@ -80,7 +152,8 @@ function TreeView(props) {
       defaultExpanded: [],
       defaultSelected: [],
       selectable: false,
-      checkboxes: false
+      checkboxes: false,
+      loadingText: "Loading\u2026"
     },
     props
   );
@@ -97,9 +170,13 @@ function TreeView(props) {
     "onSelectedChange",
     "selectable",
     "checkboxes",
+    "toggleOnRowClick",
     "renderLabel",
+    "renderActions",
+    "loadingText",
     "loadChildren",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const [loadedChildren, setLoadedChildren] = createSignal({});
   const [loadingIds, setLoadingIds] = createSignal([]);
@@ -149,6 +226,12 @@ function TreeView(props) {
     get checkboxes() {
       return local.checkboxes;
     },
+    get toggleOnRowClick() {
+      return local.toggleOnRowClick ?? !local.selectable;
+    },
+    get loadingText() {
+      return local.loadingText;
+    },
     get nodeIcon() {
       return local.nodeIcon;
     },
@@ -158,17 +241,22 @@ function TreeView(props) {
     get renderLabel() {
       return local.renderLabel;
     },
+    get renderActions() {
+      return local.renderActions;
+    },
     get hasLoader() {
       return !!local.loadChildren;
     }
   };
   return <TreeContext.Provider value={contextValue}>
-      <div {...rest} data-testid="tree-view" ref={mergeRefs(local.ref)} role="tree" class={cn("smwb-tree", local.class)}>
-        <For each={local.data}>
-          {(node, idx) => <div class="smwb-tree__wrapper" role="presentation">
-              <TreeNode item={node} path={`${idx()}`} />
-            </div>}
-        </For>
+      <div
+    {...rest}
+    data-testid={local["data-testid"] ?? "tree-view"}
+    ref={mergeRefs(local.ref)}
+    role="tree"
+    class={cn("smwb-tree", local.class)}
+  >
+        <TreeNodes items={local.data} path="" wrap />
       </div>
     </TreeContext.Provider>;
 }

package/dist/headless/source/components/dataDisplay/treeView/treeView.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/treeView/treeView.tsx"],"sourcesContent":["import { type Accessor, type JSX, For, Show, createContext, createSignal, mergeProps, splitProps, useContext } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ITreeNodeItem {\n  /** Stable identifier. Falls back to the positional path when omitted. */\n  id?: string;\n  label: string;\n  children?: ITreeNodeItem[];\n  /** Hint that the node is expandable even before its children are loaded. */\n  hasChildren?: boolean;\n}\n\nexport interface TreeViewProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  nodeIcon?: { opened?: string; closed?: string };\n  listIcon?: string;\n  data: ITreeNodeItem[];\n  expanded?: string[];\n  defaultExpanded?: string[];\n  onExpandedChange?: (expanded: string[]) => void;\n  selected?: string[];\n  defaultSelected?: string[];\n  /** Reports the full selection plus, for user toggles, the node that just changed. */\n  onSelectedChange?: (selected: string[], changed?: { id: string; selected: boolean }) => void;\n  selectable?: boolean;\n  checkboxes?: boolean;\n  renderLabel?: (item: ITreeNodeItem, nodeId: string) => JSX.Element;\n  loadChildren?: (item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface TreeContextValue {\n  expandedIds: Accessor<string[]>;\n  selectedIds: Accessor<string[]>;\n  loadedChildren: Accessor<Record<string, ITreeNodeItem[]>>;\n  loadingIds: Accessor<string[]>;\n  toggleExpanded: (id: string) => void;\n  setOpen: (id: string, open: boolean) => void;\n  toggleSelected: (id: string) => void;\n  ensureLoaded: (item: ITreeNodeItem, nodeId: string) => void;\n  selectable: boolean;\n  checkboxes: boolean;\n  nodeIcon: { opened?: string; closed?: string };\n  listIcon: string;\n  renderLabel: ((item: ITreeNodeItem, nodeId: string) => JSX.Element) | undefined;\n  hasLoader: boolean;\n}\n\nconst TreeContext = createContext<TreeContextValue>();\n\nfunction TreeNode(props: { item: ITreeNodeItem; path: string }): JSX.Element {\n  const ctx = useContext(TreeContext)!;\n  const nodeId = (): string => props.item.id ?? props.path;\n  const resolvedChildren = (): ITreeNodeItem[] | undefined => props.item.children ?? ctx.loadedChildren()[nodeId()];\n  const isLazy = (): boolean => ctx.hasLoader && (!!props.item.hasChildren || !!ctx.loadedChildren()[nodeId()]);\n  const hasChildNodes = (): boolean => (!!resolvedChildren() && (resolvedChildren()?.length ?? 0) > 0) || isLazy();\n  const isOpen = (): boolean => ctx.expandedIds().includes(nodeId());\n  const isSelected = (): boolean => ctx.selectedIds().includes(nodeId());\n  const isLoading = (): boolean => ctx.loadingIds().includes(nodeId());\n\n  const onLabelClick = (): void => {\n    if (hasChildNodes()) {\n      if (!isOpen()) ctx.ensureLoaded(props.item, nodeId());\n      ctx.toggleExpanded(nodeId());\n    }\n    if (ctx.selectable) ctx.toggleSelected(nodeId());\n  };\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      onLabelClick();\n    } else if (event.key === \"ArrowRight\" && hasChildNodes()) {\n      ctx.ensureLoaded(props.item, nodeId());\n      ctx.setOpen(nodeId(), true);\n    } else if (event.key === \"ArrowLeft\" && hasChildNodes()) {\n      ctx.setOpen(nodeId(), false);\n    }\n  };\n\n  return (\n    <div\n      class={cn(\"smwb-tree__node\", { \"smwb-tree__node_selected\": isSelected() })}\n      role=\"treeitem\"\n      aria-expanded={hasChildNodes() ? isOpen() : undefined}\n      aria-selected={ctx.selectable || ctx.checkboxes ? isSelected() : undefined}\n    >\n      <span class=\"smwb-tree__node__content\" onClick={onLabelClick} onKeyDown={onKeyDown} tabindex={0} role=\"button\">\n        <Show when={ctx.checkboxes}>\n          <input\n            type=\"checkbox\"\n            class=\"smwb-tree__node__checkbox\"\n            checked={isSelected()}\n            onClick={(e) => e.stopPropagation()}\n            onChange={() => ctx.toggleSelected(nodeId())}\n            aria-label={props.item.label}\n          />\n        </Show>\n        <span class=\"smwb-tree__node__label\">\n          <Show when={hasChildNodes()} fallback={<Icon name={ctx.listIcon} size={20} />}>\n            <Icon name={isOpen() ? ctx.nodeIcon.opened ?? \"folder_open\" : ctx.nodeIcon.closed ?? \"folder\"} fill={1} size={20} />\n          </Show>\n          {ctx.renderLabel ? ctx.renderLabel(props.item, nodeId()) : props.item.label}\n        </span>\n      </span>\n      <Show when={hasChildNodes() && isOpen()}>\n        <div role=\"group\">\n          <Show\n            when={!(isLoading() && !resolvedChildren())}\n            fallback={\n              <div class=\"smwb-tree__node__loading\" role=\"status\">\n                Загрузка…\n              </div>\n            }\n          >\n            <For each={resolvedChildren() ?? []}>\n              {(child, idx) => <TreeNode item={child} path={`${props.path}.${idx()}`} />}\n            </For>\n          </Show>\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport function TreeView(props: TreeViewProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      listIcon: \"draft\",\n      nodeIcon: { closed: \"folder\", opened: \"folder_open\" } as { opened?: string; closed?: string },\n      data: [] as ITreeNodeItem[],\n      defaultExpanded: [] as string[],\n      defaultSelected: [] as string[],\n      selectable: false,\n      checkboxes: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"listIcon\",\n    \"nodeIcon\",\n    \"data\",\n    \"expanded\",\n    \"defaultExpanded\",\n    \"onExpandedChange\",\n    \"selected\",\n    \"defaultSelected\",\n    \"onSelectedChange\",\n    \"selectable\",\n    \"checkboxes\",\n    \"renderLabel\",\n    \"loadChildren\",\n    \"ref\",\n  ]);\n\n  const [loadedChildren, setLoadedChildren] = createSignal<Record<string, ITreeNodeItem[]>>({});\n  const [loadingIds, setLoadingIds] = createSignal<string[]>([]);\n  const [expandedIds, setExpandedIds] = createControllableState<string[]>({\n    value: () => local.expanded,\n    defaultValue: local.defaultExpanded,\n    onChange: (next) => local.onExpandedChange?.(next),\n  });\n  let lastToggled: { id: string; selected: boolean } | undefined;\n  const [selectedIds, setSelectedIds] = createControllableState<string[]>({\n    value: () => local.selected,\n    defaultValue: local.defaultSelected,\n    onChange: (next) => {\n      // createControllableState calls onChange synchronously from the setter,\n      // so lastToggled still refers to the toggle that caused this change.\n      const changed = lastToggled;\n      lastToggled = undefined;\n      local.onSelectedChange?.(next, changed);\n    },\n  });\n\n  const toggleExpanded = (id: string): void =>\n    setExpandedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n\n  const setOpen = (id: string, open: boolean): void =>\n    setExpandedIds((prev) => {\n      const has = prev.includes(id);\n      if (open && !has) return [...prev, id];\n      if (!open && has) return prev.filter((x) => x !== id);\n      return prev;\n    });\n\n  const toggleSelected = (id: string): void => {\n    lastToggled = { id, selected: !selectedIds().includes(id) };\n    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n  };\n\n  const ensureLoaded = (item: ITreeNodeItem, nodeId: string): void => {\n    if (!local.loadChildren || loadedChildren()[nodeId] || (item.children && item.children.length > 0)) return;\n    setLoadingIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]));\n    void local\n      .loadChildren(item, nodeId)\n      .then((children) => setLoadedChildren((prev) => ({ ...prev, [nodeId]: children })))\n      .finally(() => setLoadingIds((prev) => prev.filter((x) => x !== nodeId)));\n  };\n\n  const contextValue: TreeContextValue = {\n    expandedIds,\n    selectedIds,\n    loadedChildren,\n    loadingIds,\n    toggleExpanded,\n    setOpen,\n    toggleSelected,\n    ensureLoaded,\n    get selectable() {\n      return local.selectable;\n    },\n    get checkboxes() {\n      return local.checkboxes;\n    },\n    get nodeIcon() {\n      return local.nodeIcon;\n    },\n    get listIcon() {\n      return local.listIcon;\n    },\n    get renderLabel() {\n      return local.renderLabel;\n    },\n    get hasLoader() {\n      return !!local.loadChildren;\n    },\n  };\n\n  return (\n    <TreeContext.Provider value={contextValue}>\n      <div {...rest} data-testid=\"tree-view\" ref={mergeRefs(local.ref)} role=\"tree\" class={cn(\"smwb-tree\", local.class)}>\n        <For each={local.data}>\n          {(node, idx) => (\n            <div class=\"smwb-tree__wrapper\" role=\"presentation\">\n              <TreeNode item={node} path={`${idx()}`} />\n            </div>\n          )}\n        </For>\n      </div>\n    </TreeContext.Provider>\n  );\n}\n\nexport default TreeView;\n"],"mappings":"AAAA,SAAkC,KAAK,MAAM,eAAe,cAAc,YAAY,YAAY,kBAAkB;AACpH,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,+BAA+B;AACxC,SAAS,iBAA2B;AA8CpC,MAAM,cAAc,cAAgC;AAEpD,SAAS,SAAS,OAA2D;AAC3E,QAAM,MAAM,WAAW,WAAW;AAClC,QAAM,SAAS,MAAc,MAAM,KAAK,MAAM,MAAM;AACpD,QAAM,mBAAmB,MAAmC,MAAM,KAAK,YAAY,IAAI,eAAe,EAAE,OAAO,CAAC;AAChH,QAAM,SAAS,MAAe,IAAI,cAAc,CAAC,CAAC,MAAM,KAAK,eAAe,CAAC,CAAC,IAAI,eAAe,EAAE,OAAO,CAAC;AAC3G,QAAM,gBAAgB,MAAgB,CAAC,CAAC,iBAAiB,MAAM,iBAAiB,GAAG,UAAU,KAAK,KAAM,OAAO;AAC/G,QAAM,SAAS,MAAe,IAAI,YAAY,EAAE,SAAS,OAAO,CAAC;AACjE,QAAM,aAAa,MAAe,IAAI,YAAY,EAAE,SAAS,OAAO,CAAC;AACrE,QAAM,YAAY,MAAe,IAAI,WAAW,EAAE,SAAS,OAAO,CAAC;AAEnE,QAAM,eAAe,MAAY;AAC/B,QAAI,cAAc,GAAG;AACnB,UAAI,CAAC,OAAO,EAAG,KAAI,aAAa,MAAM,MAAM,OAAO,CAAC;AACpD,UAAI,eAAe,OAAO,CAAC;AAAA,IAC7B;AACA,QAAI,IAAI,WAAY,KAAI,eAAe,OAAO,CAAC;AAAA,EACjD;AAEA,QAAM,YAA8D,CAAC,UAAU;AAC7E,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,YAAM,eAAe;AACrB,mBAAa;AAAA,IACf,WAAW,MAAM,QAAQ,gBAAgB,cAAc,GAAG;AACxD,UAAI,aAAa,MAAM,MAAM,OAAO,CAAC;AACrC,UAAI,QAAQ,OAAO,GAAG,IAAI;AAAA,IAC5B,WAAW,MAAM,QAAQ,eAAe,cAAc,GAAG;AACvD,UAAI,QAAQ,OAAO,GAAG,KAAK;AAAA,IAC7B;AAAA,EACF;AAEA,SACE,CAAC;AAAA,IACC,OAAO,GAAG,mBAAmB,EAAE,4BAA4B,WAAW,EAAE,CAAC;AAAA,IACzE,KAAK;AAAA,IACL,eAAe,cAAc,IAAI,OAAO,IAAI;AAAA,IAC5C,eAAe,IAAI,cAAc,IAAI,aAAa,WAAW,IAAI;AAAA,GAClE;AAAA,MACC,CAAC,KAAK,MAAM,2BAA2B,SAAS,cAAc,WAAW,WAAW,UAAU,GAAG,KAAK,SAAS;AAAA,QAC7G,CAAC,KAAK,MAAM,IAAI,YAAY;AAAA,UAC1B,CAAC;AAAA,IACC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,SAAS,WAAW;AAAA,IACpB,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,IAClC,UAAU,MAAM,IAAI,eAAe,OAAO,CAAC;AAAA,IAC3C,YAAY,MAAM,KAAK;AAAA,EACzB,EAAE;AAAA,QACJ,EATC,KASM;AAAA,QACP,CAAC,KAAK,MAAM,yBAAyB;AAAA,UACnC,CAAC,KAAK,MAAM,cAAc,GAAG,UAAU,CAAC,KAAK,MAAM,IAAI,UAAU,MAAM,IAAI,IAAI;AAAA,YAC7E,CAAC,KAAK,MAAM,OAAO,IAAI,IAAI,SAAS,UAAU,gBAAgB,IAAI,SAAS,UAAU,UAAU,MAAM,GAAG,MAAM,IAAI,EAAE;AAAA,UACtH,EAFC,KAEM;AAAA,WACN,IAAI,cAAc,IAAI,YAAY,MAAM,MAAM,OAAO,CAAC,IAAI,MAAM,KAAK,MAAM;AAAA,QAC9E,EALC,KAKM;AAAA,MACT,EAjBC,KAiBM;AAAA,MACP,CAAC,KAAK,MAAM,cAAc,KAAK,OAAO,GAAG;AAAA,QACvC,CAAC,IAAI,KAAK,QAAQ;AAAA,UAChB,CAAC;AAAA,IACC,MAAM,EAAE,UAAU,KAAK,CAAC,iBAAiB;AAAA,IACzC,UACE,CAAC,IAAI,MAAM,2BAA2B,KAAK,SAAS;AAAA;AAAA,cAEpD,EAFC;AAAA,GAIJ;AAAA,YACC,CAAC,IAAI,MAAM,iBAAiB,KAAK,CAAC,GAAG;AAAA,eAClC,CAAC,OAAO,QAAQ,CAAC,SAAS,MAAM,OAAO,MAAM,GAAG,MAAM,IAAI,IAAI,IAAI,CAAC,IAAI,GAAG;AAAA,YAC7E,EAFC,IAEK;AAAA,UACR,EAXC,KAWM;AAAA,QACT,EAbC,IAaK;AAAA,MACR,EAfC,KAeM;AAAA,IACT,EAxCC;AA0CL;AAEO,SAAS,SAAS,OAAmC;AAC1D,QAAM,SAAS;AAAA,IACb;AAAA,MACE,UAAU;AAAA,MACV,UAAU,EAAE,QAAQ,UAAU,QAAQ,cAAc;AAAA,MACpD,MAAM,CAAC;AAAA,MACP,iBAAiB,CAAC;AAAA,MAClB,iBAAiB,CAAC;AAAA,MAClB,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,IACA;AAAA,EACF;AACA,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,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAA8C,CAAC,CAAC;AAC5F,QAAM,CAAC,YAAY,aAAa,IAAI,aAAuB,CAAC,CAAC;AAC7D,QAAM,CAAC,aAAa,cAAc,IAAI,wBAAkC;AAAA,IACtE,OAAO,MAAM,MAAM;AAAA,IACnB,cAAc,MAAM;AAAA,IACpB,UAAU,CAAC,SAAS,MAAM,mBAAmB,IAAI;AAAA,EACnD,CAAC;AACD,MAAI;AACJ,QAAM,CAAC,aAAa,cAAc,IAAI,wBAAkC;AAAA,IACtE,OAAO,MAAM,MAAM;AAAA,IACnB,cAAc,MAAM;AAAA,IACpB,UAAU,CAAC,SAAS;AAGlB,YAAM,UAAU;AAChB,oBAAc;AACd,YAAM,mBAAmB,MAAM,OAAO;AAAA,IACxC;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB,CAAC,OACtB,eAAe,CAAC,SAAU,KAAK,SAAS,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,MAAM,EAAE,IAAI,CAAC,GAAG,MAAM,EAAE,CAAE;AAE7F,QAAM,UAAU,CAAC,IAAY,SAC3B,eAAe,CAAC,SAAS;AACvB,UAAM,MAAM,KAAK,SAAS,EAAE;AAC5B,QAAI,QAAQ,CAAC,IAAK,QAAO,CAAC,GAAG,MAAM,EAAE;AACrC,QAAI,CAAC,QAAQ,IAAK,QAAO,KAAK,OAAO,CAAC,MAAM,MAAM,EAAE;AACpD,WAAO;AAAA,EACT,CAAC;AAEH,QAAM,iBAAiB,CAAC,OAAqB;AAC3C,kBAAc,EAAE,IAAI,UAAU,CAAC,YAAY,EAAE,SAAS,EAAE,EAAE;AAC1D,mBAAe,CAAC,SAAU,KAAK,SAAS,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,MAAM,EAAE,IAAI,CAAC,GAAG,MAAM,EAAE,CAAE;AAAA,EAC7F;AAEA,QAAM,eAAe,CAAC,MAAqB,WAAyB;AAClE,QAAI,CAAC,MAAM,gBAAgB,eAAe,EAAE,MAAM,KAAM,KAAK,YAAY,KAAK,SAAS,SAAS,EAAI;AACpG,kBAAc,CAAC,SAAU,KAAK,SAAS,MAAM,IAAI,OAAO,CAAC,GAAG,MAAM,MAAM,CAAE;AAC1E,SAAK,MACF,aAAa,MAAM,MAAM,EACzB,KAAK,CAAC,aAAa,kBAAkB,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,MAAM,GAAG,SAAS,EAAE,CAAC,EACjF,QAAQ,MAAM,cAAc,CAAC,SAAS,KAAK,OAAO,CAAC,MAAM,MAAM,MAAM,CAAC,CAAC;AAAA,EAC5E;AAEA,QAAM,eAAiC;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI,aAAa;AACf,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,aAAa;AACf,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,WAAW;AACb,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,WAAW;AACb,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,cAAc;AAChB,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,YAAY;AACd,aAAO,CAAC,CAAC,MAAM;AAAA,IACjB;AAAA,EACF;AAEA,SACE,CAAC,YAAY,SAAS,OAAO,cAAc;AAAA,MACzC,CAAC,QAAQ,MAAM,YAAY,YAAY,KAAK,UAAU,MAAM,GAAG,GAAG,KAAK,OAAO,OAAO,GAAG,aAAa,MAAM,KAAK,GAAG;AAAA,QACjH,CAAC,IAAI,MAAM,MAAM,MAAM;AAAA,WACpB,CAAC,MAAM,QACN,CAAC,IAAI,MAAM,qBAAqB,KAAK,eAAe;AAAA,cAClD,CAAC,SAAS,MAAM,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,EAAE;AAAA,YAC5C,EAFC,KAGD;AAAA,QACJ,EANC,IAMK;AAAA,MACR,EARC,IAQK;AAAA,IACR,EAVC,YAAY;AAYjB;AAEA,IAAO,mBAAQ;","names":[],"file":"treeView.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/treeView/treeView.tsx"],"sourcesContent":["import {\n  type Accessor,\n  type JSX,\n  For,\n  Show,\n  createContext,\n  createMemo,\n  createSignal,\n  createUniqueId,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { isOwnClick } from \"../../../utils/ownClick\";\n\nexport interface ITreeNodeItem {\n  /** Stable identifier. Falls back to the positional path when omitted. */\n  id?: string;\n  label: string;\n  children?: ITreeNodeItem[];\n  /** Hint that the node is expandable even before its children are loaded. */\n  hasChildren?: boolean;\n}\n\nexport interface TreeViewProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  nodeIcon?: { opened?: string; closed?: string };\n  listIcon?: string;\n  data: ITreeNodeItem[];\n  expanded?: string[];\n  defaultExpanded?: string[];\n  onExpandedChange?: (expanded: string[]) => void;\n  selected?: string[];\n  defaultSelected?: string[];\n  /** Reports the full selection plus, for user toggles, the node that just changed. */\n  onSelectedChange?: (selected: string[], changed?: { id: string; selected: boolean }) => void;\n  /**\n   * Enables row selection: a click, Enter or Space on a row toggles its selection. The chevron and the\n   * Left/Right keys never change it.\n   */\n  selectable?: boolean;\n  /** Renders a checkbox per node bound to selection. */\n  checkboxes?: boolean;\n  /**\n   * Whether a click, Enter or Space on a row also expands or collapses its children. The chevron and the\n   * Right/Left keys always do. Defaults to `true` while the tree is not `selectable` (a row has nothing else to\n   * do) and to `false` otherwise, so that selecting a row leaves it open or closed.\n   */\n  toggleOnRowClick?: boolean;\n  /** Custom node renderer. */\n  renderLabel?: (item: ITreeNodeItem, nodeId: string) => JSX.Element;\n  /**\n   * Per-node actions (buttons, a menu trigger), drawn at the end of the row. They sit beside the row's\n   * button, not inside it, so they take their own clicks, Enter and Space, focus and accessible names.\n   */\n  renderActions?: (item: ITreeNodeItem, nodeId: string) => JSX.Element;\n  /** Text shown while `loadChildren` is pending; \"Loading…\" unless given. */\n  loadingText?: string;\n  /** Lazily resolves children the first time a node is expanded. */\n  loadChildren?: (item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>;\n  /** Test id of the root `<div>`; `tree-view` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface TreeContextValue {\n  expandedIds: Accessor<string[]>;\n  selectedIds: Accessor<string[]>;\n  loadedChildren: Accessor<Record<string, ITreeNodeItem[]>>;\n  loadingIds: Accessor<string[]>;\n  toggleExpanded: (id: string) => void;\n  setOpen: (id: string, open: boolean) => void;\n  toggleSelected: (id: string) => void;\n  ensureLoaded: (item: ITreeNodeItem, nodeId: string) => void;\n  selectable: boolean;\n  checkboxes: boolean;\n  toggleOnRowClick: boolean;\n  loadingText: string;\n  nodeIcon: { opened?: string; closed?: string };\n  listIcon: string;\n  renderLabel: ((item: ITreeNodeItem, nodeId: string) => JSX.Element) | undefined;\n  renderActions: ((item: ITreeNodeItem, nodeId: string) => JSX.Element) | undefined;\n  hasLoader: boolean;\n}\n\nconst TreeContext = createContext<TreeContextValue>();\n\ninterface TreeEntry {\n  id: string;\n  item: ITreeNodeItem;\n  path: string;\n}\n\n/**\n * Whether two items are the same as far as a row's own markup goes. A caller that refetches hands the tree\n * brand-new objects for the same nodes, and comparing those by identity would rebuild the `renderLabel` /\n * `renderActions` output on every refetch: Solid replaces a dynamic child, so the elements the caller drew\n * (and the focus in them, an open menu anchored to one, a caret) would be thrown away while the row around\n * them survives. Children are compared one level deep — a row draws that it has them, not their subtrees.\n */\nfunction sameItem(a: ITreeNodeItem, b: ITreeNodeItem): boolean {\n  if (a === b) return true;\n  if (a.id !== b.id || a.label !== b.label || a.hasChildren !== b.hasChildren) return false;\n  const left = a.children;\n  const right = b.children;\n  if (left === right) return true;\n  if (!left || !right || left.length !== right.length) return false;\n  return left.every((child, idx) => {\n    const other = right[idx];\n    return !!other && child.id === other.id && child.label === other.label && child.hasChildren === other.hasChildren;\n  });\n}\n\n/**\n * The rows of one level, keyed by node id. `For` keys by reference, so it would rebuild every row (and drop\n * the focus in it) whenever the caller hands in new objects for the same nodes. It is given the ids instead:\n * equal strings are the same row, and a row reads its item from the current data.\n */\nfunction TreeNodes(props: { items: ITreeNodeItem[]; path: string; wrap?: boolean }): JSX.Element {\n  const entries = createMemo<TreeEntry[]>(() =>\n    props.items.map((item, idx) => {\n      const path = props.path === \"\" ? `${idx}` : `${props.path}.${idx}`;\n      return { id: item.id ?? path, item, path };\n    })\n  );\n  const byId = createMemo(() => new Map(entries().map((entry) => [entry.id, entry])));\n  const ids = createMemo(() => entries().map((entry) => entry.id));\n\n  return (\n    <For each={ids()}>\n      {(id) => {\n        // A removed row is disposed after the lookup recomputes, so keep the last entry for that pass.\n        let last = byId().get(id)!;\n        const entry = (): TreeEntry => (last = byId().get(id) ?? last);\n        return props.wrap ? (\n          <div class=\"smwb-tree__wrapper\" role=\"presentation\">\n            <TreeNode entry={entry} />\n          </div>\n        ) : (\n          <TreeNode entry={entry} />\n        );\n      }}\n    </For>\n  );\n}\n\nfunction TreeNode(props: { entry: Accessor<TreeEntry> }): JSX.Element {\n  const ctx = useContext(TreeContext)!;\n  // The id is the row's identity and never changes while the row lives.\n  const nodeId = props.entry().id;\n  const item = (): ITreeNodeItem => props.entry().item;\n  // Names the treeitem: its own content would drag the actions and the checkbox into the node's name.\n  const labelId = `${createUniqueId()}-label`;\n  // What the caller's renderers see. Held by value, not by identity, so a refetch that hands in new\n  // objects for the same nodes does not rebuild the slots below (see sameItem).\n  const slotItem = createMemo(() => item(), undefined, { equals: sameItem });\n  const labelSlot = createMemo<JSX.Element>(() =>\n    ctx.renderLabel ? ctx.renderLabel(slotItem(), nodeId) : slotItem().label\n  );\n  const resolvedChildren = (): ITreeNodeItem[] | undefined => item().children ?? ctx.loadedChildren()[nodeId];\n  const isLazy = (): boolean => ctx.hasLoader && (!!item().hasChildren || !!ctx.loadedChildren()[nodeId]);\n  const hasChildNodes = (): boolean => (!!resolvedChildren() && (resolvedChildren()?.length ?? 0) > 0) || isLazy();\n  const isOpen = (): boolean => ctx.expandedIds().includes(nodeId);\n  const isSelected = (): boolean => ctx.selectedIds().includes(nodeId);\n  const isLoading = (): boolean => ctx.loadingIds().includes(nodeId);\n\n  const toggleNode = (): void => {\n    if (!isOpen()) ctx.ensureLoaded(item(), nodeId);\n    ctx.toggleExpanded(nodeId);\n  };\n\n  const activateRow = (): void => {\n    if (ctx.toggleOnRowClick && hasChildNodes()) toggleNode();\n    if (ctx.selectable) ctx.toggleSelected(nodeId);\n  };\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    // Keys from controls a custom label draws are theirs.\n    if (event.target !== event.currentTarget) return;\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      activateRow();\n    } else if (event.key === \"ArrowRight\" && hasChildNodes()) {\n      ctx.ensureLoaded(item(), nodeId);\n      ctx.setOpen(nodeId, true);\n    } else if (event.key === \"ArrowLeft\" && hasChildNodes()) {\n      ctx.setOpen(nodeId, false);\n    }\n  };\n\n  const onContentClick: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) => {\n    if (isOwnClick(event)) activateRow();\n  };\n\n  return (\n    <div\n      class={cn(\"smwb-tree__node\", { \"smwb-tree__node_selected\": isSelected() })}\n      role=\"treeitem\"\n      aria-labelledby={labelId}\n      aria-expanded={hasChildNodes() ? isOpen() : undefined}\n      aria-selected={ctx.selectable || ctx.checkboxes ? isSelected() : undefined}\n    >\n      <div class=\"smwb-tree__node__row\">\n        {/*\n          A pointer shortcut: the keyboard expands with ArrowRight/ArrowLeft on the row, so the chevron is\n          decorative, unnamed and no Tab stop. If it ever becomes a real <button>, `aria-hidden` must go with\n          it (a focusable element inside `aria-hidden` is an ARIA violation) and it then needs a name plus\n          `aria-expanded`.\n        */}\n        <span class=\"smwb-tree__node__toggle\" aria-hidden=\"true\" onClick={() => hasChildNodes() && toggleNode()}>\n          <Show when={hasChildNodes()}>\n            <Icon name={isOpen() ? \"expand_more\" : \"chevron_right\"} size={20} />\n          </Show>\n        </span>\n        <Show when={ctx.checkboxes}>\n          <input\n            type=\"checkbox\"\n            class=\"smwb-tree__node__checkbox\"\n            checked={isSelected()}\n            onChange={() => ctx.toggleSelected(nodeId)}\n            aria-label={item().label}\n          />\n        </Show>\n        <span class=\"smwb-tree__node__content\" onClick={onContentClick} onKeyDown={onKeyDown} tabindex={0} role=\"button\">\n          <span class=\"smwb-tree__node__label\" id={labelId}>\n            <Show when={hasChildNodes()} fallback={<Icon name={ctx.listIcon} size={20} />}>\n              <Icon name={isOpen() ? ctx.nodeIcon.opened ?? \"folder_open\" : ctx.nodeIcon.closed ?? \"folder\"} fill={1} size={20} />\n            </Show>\n            {labelSlot()}\n          </span>\n        </span>\n        <Show when={ctx.renderActions}>\n          {(renderActions) => {\n            // Created inside the branch that draws it, so SSR and hydration agree on which keys exist.\n            const actionsSlot = createMemo<JSX.Element>(() => renderActions()(slotItem(), nodeId));\n            return <span class=\"smwb-tree__node__actions\">{actionsSlot()}</span>;\n          }}\n        </Show>\n      </div>\n      <Show when={hasChildNodes() && isOpen()}>\n        <div role=\"group\">\n          <Show\n            when={!(isLoading() && !resolvedChildren())}\n            fallback={\n              <div class=\"smwb-tree__node__loading\" role=\"status\">\n                {ctx.loadingText}\n              </div>\n            }\n          >\n            <TreeNodes items={resolvedChildren() ?? []} path={props.entry().path} />\n          </Show>\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport function TreeView(props: TreeViewProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      listIcon: \"draft\",\n      nodeIcon: { closed: \"folder\", opened: \"folder_open\" } as { opened?: string; closed?: string },\n      data: [] as ITreeNodeItem[],\n      defaultExpanded: [] as string[],\n      defaultSelected: [] as string[],\n      selectable: false,\n      checkboxes: false,\n      loadingText: \"Loading…\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"listIcon\",\n    \"nodeIcon\",\n    \"data\",\n    \"expanded\",\n    \"defaultExpanded\",\n    \"onExpandedChange\",\n    \"selected\",\n    \"defaultSelected\",\n    \"onSelectedChange\",\n    \"selectable\",\n    \"checkboxes\",\n    \"toggleOnRowClick\",\n    \"renderLabel\",\n    \"renderActions\",\n    \"loadingText\",\n    \"loadChildren\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const [loadedChildren, setLoadedChildren] = createSignal<Record<string, ITreeNodeItem[]>>({});\n  const [loadingIds, setLoadingIds] = createSignal<string[]>([]);\n  const [expandedIds, setExpandedIds] = createControllableState<string[]>({\n    value: () => local.expanded,\n    defaultValue: local.defaultExpanded,\n    onChange: (next) => local.onExpandedChange?.(next),\n  });\n  let lastToggled: { id: string; selected: boolean } | undefined;\n  const [selectedIds, setSelectedIds] = createControllableState<string[]>({\n    value: () => local.selected,\n    defaultValue: local.defaultSelected,\n    onChange: (next) => {\n      // createControllableState calls onChange synchronously from the setter,\n      // so lastToggled still refers to the toggle that caused this change.\n      const changed = lastToggled;\n      lastToggled = undefined;\n      local.onSelectedChange?.(next, changed);\n    },\n  });\n\n  const toggleExpanded = (id: string): void =>\n    setExpandedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n\n  const setOpen = (id: string, open: boolean): void =>\n    setExpandedIds((prev) => {\n      const has = prev.includes(id);\n      if (open && !has) return [...prev, id];\n      if (!open && has) return prev.filter((x) => x !== id);\n      return prev;\n    });\n\n  const toggleSelected = (id: string): void => {\n    lastToggled = { id, selected: !selectedIds().includes(id) };\n    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n  };\n\n  const ensureLoaded = (item: ITreeNodeItem, nodeId: string): void => {\n    if (!local.loadChildren || loadedChildren()[nodeId] || (item.children && item.children.length > 0)) return;\n    setLoadingIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]));\n    void local\n      .loadChildren(item, nodeId)\n      .then((children) => setLoadedChildren((prev) => ({ ...prev, [nodeId]: children })))\n      .finally(() => setLoadingIds((prev) => prev.filter((x) => x !== nodeId)));\n  };\n\n  const contextValue: TreeContextValue = {\n    expandedIds,\n    selectedIds,\n    loadedChildren,\n    loadingIds,\n    toggleExpanded,\n    setOpen,\n    toggleSelected,\n    ensureLoaded,\n    get selectable() {\n      return local.selectable;\n    },\n    get checkboxes() {\n      return local.checkboxes;\n    },\n    get toggleOnRowClick() {\n      return local.toggleOnRowClick ?? !local.selectable;\n    },\n    get loadingText() {\n      return local.loadingText;\n    },\n    get nodeIcon() {\n      return local.nodeIcon;\n    },\n    get listIcon() {\n      return local.listIcon;\n    },\n    get renderLabel() {\n      return local.renderLabel;\n    },\n    get renderActions() {\n      return local.renderActions;\n    },\n    get hasLoader() {\n      return !!local.loadChildren;\n    },\n  };\n\n  return (\n    <TreeContext.Provider value={contextValue}>\n      <div\n        {...rest}\n        data-testid={local[\"data-testid\"] ?? \"tree-view\"}\n        ref={mergeRefs(local.ref)}\n        role=\"tree\"\n        class={cn(\"smwb-tree\", local.class)}\n      >\n        <TreeNodes items={local.data} path=\"\" wrap />\n      </div>\n    </TreeContext.Provider>\n  );\n}\n\nexport default TreeView;\n"],"mappings":"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","names":[],"file":"treeView.jsx"}

package/dist/headless/source/components/dataDisplay/typography/typography.jsx

@@ -2,6 +2,7 @@ import { mergeProps, splitProps } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { mergeStyle } from "../../../primitives/mergeStyle";
 const defaultTag = {
   h1: "h1",
   h2: "h2",
@@ -35,12 +36,7 @@ function Typography(props) {
     "ref"
   ]);
   const clamped = () => local.lines !== void 0 && local.lines > 0;
-  const style = () => {
-    if (!clamped()) return local.style;
-    const lines = String(local.lines);
-    if (typeof local.style === "string") return `${local.style};--smwb-typography-lines:${lines}`;
-    return { ...local.style, "--smwb-typography-lines": lines };
-  };
+  const style = () => mergeStyle(local.style, { "--smwb-typography-lines": clamped() ? String(local.lines) : void 0 });
   return <Dynamic
     component={local.component ?? defaultTag[local.variant]}
     ref={mergeRefs(local.ref)}

package/dist/headless/source/components/dataDisplay/typography/typography.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/typography/typography.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type TypographyVariant =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"subtitle1\"\n  | \"subtitle2\"\n  | \"body1\"\n  | \"body2\"\n  | \"caption\"\n  | \"overline\"\n  | \"button\";\n\nexport type TypographyColor =\n  | \"inherit\"\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"textPrimary\"\n  | \"textSecondary\"\n  | \"disabled\";\n\nconst defaultTag: Record<TypographyVariant, string> = {\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  h4: \"h4\",\n  h5: \"h5\",\n  h6: \"h6\",\n  // A subtitle is not a heading: as h6 it would break the page's outline.\n  subtitle1: \"p\",\n  subtitle2: \"p\",\n  body1: \"p\",\n  body2: \"p\",\n  caption: \"span\",\n  overline: \"span\",\n  button: \"span\",\n};\n\nexport interface TypographyProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: TypographyVariant;\n  color?: TypographyColor;\n  align?: \"left\" | \"center\" | \"right\" | \"justify\";\n  /** Add a bottom margin (block rhythm). */\n  gutterBottom?: boolean;\n  /** Truncate with an ellipsis on a single line. */\n  noWrap?: boolean;\n  /** Truncate with an ellipsis after this many lines. */\n  lines?: number;\n  /** Digits of equal width (`tabular-nums`), so figures line up in KPIs and tables. */\n  tabularNums?: boolean;\n  /** Render as a different element. */\n  component?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Typography(props: ParentProps<TypographyProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"body1\" as TypographyVariant, color: \"inherit\" as TypographyColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"variant\",\n    \"color\",\n    \"align\",\n    \"gutterBottom\",\n    \"noWrap\",\n    \"lines\",\n    \"tabularNums\",\n    \"component\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const clamped = (): boolean => local.lines !== undefined && local.lines > 0;\n  // The line count travels as a custom property, merged into the caller's style.\n  const style = (): JSX.CSSProperties | string | undefined => {\n    if (!clamped()) return local.style;\n    const lines = String(local.lines);\n    if (typeof local.style === \"string\") return `${local.style};--smwb-typography-lines:${lines}`;\n    return { ...local.style, \"--smwb-typography-lines\": lines };\n  };\n\n  return (\n    <Dynamic\n      component={local.component ?? defaultTag[local.variant]}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-typography\",\n        `smwb-typography_${local.variant}`,\n        local.color !== \"inherit\" && `smwb-typography_color-${local.color}`,\n        local.align && `smwb-typography_align-${local.align}`,\n        {\n          \"smwb-typography_gutter\": local.gutterBottom,\n          \"smwb-typography_nowrap\": local.noWrap,\n          \"smwb-typography_clamp\": clamped(),\n          \"smwb-typography_tabular-nums\": local.tabularNums,\n        },\n        local.class\n      )}\n      style={style()}\n      {...rest}\n    >\n      {local.children}\n    </Dynamic>\n  );\n}\n\nexport default Typography;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,iBAA2B;AA6BpC,MAAM,aAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA;AAAA,EAEJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AACV;AAmBO,SAAS,WAAW,OAAkD;AAC3E,QAAM,SAAS,WAAW,EAAE,SAAS,SAA8B,OAAO,UAA6B,GAAG,KAAK;AAC/G,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,IACA;AAAA,EACF,CAAC;AAED,QAAM,UAAU,MAAe,MAAM,UAAU,UAAa,MAAM,QAAQ;AAE1E,QAAM,QAAQ,MAA8C;AAC1D,QAAI,CAAC,QAAQ,EAAG,QAAO,MAAM;AAC7B,UAAM,QAAQ,OAAO,MAAM,KAAK;AAChC,QAAI,OAAO,MAAM,UAAU,SAAU,QAAO,GAAG,MAAM,KAAK,4BAA4B,KAAK;AAC3F,WAAO,EAAE,GAAG,MAAM,OAAO,2BAA2B,MAAM;AAAA,EAC5D;AAEA,SACE,CAAC;AAAA,IACC,WAAW,MAAM,aAAa,WAAW,MAAM,OAAO;AAAA,IACtD,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,mBAAmB,MAAM,OAAO;AAAA,MAChC,MAAM,UAAU,aAAa,yBAAyB,MAAM,KAAK;AAAA,MACjE,MAAM,SAAS,yBAAyB,MAAM,KAAK;AAAA,MACnD;AAAA,QACE,0BAA0B,MAAM;AAAA,QAChC,0BAA0B,MAAM;AAAA,QAChC,yBAAyB,QAAQ;AAAA,QACjC,gCAAgC,MAAM;AAAA,MACxC;AAAA,MACA,MAAM;AAAA,IACR;AAAA,IACA,OAAO,MAAM;AAAA,QACT;AAAA,GACL;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EApBC;AAsBL;AAEA,IAAO,qBAAQ;","names":[],"file":"typography.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/typography/typography.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport type TypographyVariant =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"subtitle1\"\n  | \"subtitle2\"\n  | \"body1\"\n  | \"body2\"\n  | \"caption\"\n  | \"overline\"\n  | \"button\";\n\nexport type TypographyColor =\n  | \"inherit\"\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"textPrimary\"\n  | \"textSecondary\"\n  | \"disabled\";\n\nconst defaultTag: Record<TypographyVariant, string> = {\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  h4: \"h4\",\n  h5: \"h5\",\n  h6: \"h6\",\n  // A subtitle is not a heading: as h6 it would break the page's outline.\n  subtitle1: \"p\",\n  subtitle2: \"p\",\n  body1: \"p\",\n  body2: \"p\",\n  caption: \"span\",\n  overline: \"span\",\n  button: \"span\",\n};\n\nexport interface TypographyProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: TypographyVariant;\n  color?: TypographyColor;\n  align?: \"left\" | \"center\" | \"right\" | \"justify\";\n  /** Add a bottom margin (block rhythm). */\n  gutterBottom?: boolean;\n  /** Truncate with an ellipsis on a single line. */\n  noWrap?: boolean;\n  /** Truncate with an ellipsis after this many lines. */\n  lines?: number;\n  /** Digits of equal width (`tabular-nums`), so figures line up in KPIs and tables. */\n  tabularNums?: boolean;\n  /** Render as a different element. */\n  component?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Typography(props: ParentProps<TypographyProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"body1\" as TypographyVariant, color: \"inherit\" as TypographyColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"variant\",\n    \"color\",\n    \"align\",\n    \"gutterBottom\",\n    \"noWrap\",\n    \"lines\",\n    \"tabularNums\",\n    \"component\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const clamped = (): boolean => local.lines !== undefined && local.lines > 0;\n  // The line count travels as a custom property, merged into the caller's style.\n  const style = (): JSX.CSSProperties | string | undefined =>\n    mergeStyle(local.style, { \"--smwb-typography-lines\": clamped() ? String(local.lines) : undefined });\n\n  return (\n    <Dynamic\n      component={local.component ?? defaultTag[local.variant]}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-typography\",\n        `smwb-typography_${local.variant}`,\n        local.color !== \"inherit\" && `smwb-typography_color-${local.color}`,\n        local.align && `smwb-typography_align-${local.align}`,\n        {\n          \"smwb-typography_gutter\": local.gutterBottom,\n          \"smwb-typography_nowrap\": local.noWrap,\n          \"smwb-typography_clamp\": clamped(),\n          \"smwb-typography_tabular-nums\": local.tabularNums,\n        },\n        local.class\n      )}\n      style={style()}\n      {...rest}\n    >\n      {local.children}\n    </Dynamic>\n  );\n}\n\nexport default Typography;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,kBAAkB;AA6B3B,MAAM,aAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA;AAAA,EAEJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AACV;AAmBO,SAAS,WAAW,OAAkD;AAC3E,QAAM,SAAS,WAAW,EAAE,SAAS,SAA8B,OAAO,UAA6B,GAAG,KAAK;AAC/G,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,IACA;AAAA,EACF,CAAC;AAED,QAAM,UAAU,MAAe,MAAM,UAAU,UAAa,MAAM,QAAQ;AAE1E,QAAM,QAAQ,MACZ,WAAW,MAAM,OAAO,EAAE,2BAA2B,QAAQ,IAAI,OAAO,MAAM,KAAK,IAAI,OAAU,CAAC;AAEpG,SACE,CAAC;AAAA,IACC,WAAW,MAAM,aAAa,WAAW,MAAM,OAAO;AAAA,IACtD,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,mBAAmB,MAAM,OAAO;AAAA,MAChC,MAAM,UAAU,aAAa,yBAAyB,MAAM,KAAK;AAAA,MACjE,MAAM,SAAS,yBAAyB,MAAM,KAAK;AAAA,MACnD;AAAA,QACE,0BAA0B,MAAM;AAAA,QAChC,0BAA0B,MAAM;AAAA,QAChC,yBAAyB,QAAQ;AAAA,QACjC,gCAAgC,MAAM;AAAA,MACxC;AAAA,MACA,MAAM;AAAA,IACR;AAAA,IACA,OAAO,MAAM;AAAA,QACT;AAAA,GACL;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EApBC;AAsBL;AAEA,IAAO,qBAAQ;","names":[],"file":"typography.jsx"}

package/dist/headless/source/components/feedBack/emptyState/emptyState.jsx

@@ -6,7 +6,17 @@ const ICON_SIZE = { block: { medium: 32, small: 24 }, inline: { medium: 18, smal
 const present = (value) => value !== void 0 && value !== null && value !== false && value !== "" && !(Array.isArray(value) && value.length === 0);
 function EmptyState(props) {
   const merged = mergeProps({ variant: "block", size: "medium" }, props);
-  const [local, rest] = splitProps(merged, ["class", "title", "icon", "actions", "variant", "size", "children", "ref"]);
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "title",
+    "icon",
+    "actions",
+    "variant",
+    "size",
+    "children",
+    "ref",
+    "data-testid"
+  ]);
   const icon = children(() => local.icon);
   const title = children(() => local.title);
   const message = children(() => local.children);
@@ -16,7 +26,7 @@ function EmptyState(props) {
     return typeof resolved === "string" ? resolved : void 0;
   };
   return <div
-    data-testid="empty-state"
+    data-testid={local["data-testid"] ?? "empty-state"}
     {...rest}
     ref={mergeRefs(local.ref)}
     class={cn("smwb-empty-state", `smwb-empty-state_${local.variant}`, `smwb-empty-state_${local.size}`, local.class)}

package/dist/headless/source/components/feedBack/emptyState/emptyState.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/feedBack/emptyState/emptyState.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface EmptyStateProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** What is empty, e.g. \"No works yet\". */\n  title?: JSX.Element;\n  /** An icon name, or an icon element. Decorative: the title and the message say it all. */\n  icon?: JSX.Element | string;\n  /** What the reader can do about it: buttons or links. */\n  actions?: JSX.Element;\n  /**\n   * `block` (default): centred, for an empty page, panel or card.\n   * `inline`: a muted line of text, for a list, a table or a column that came\n   * out empty; an action follows the last word.\n   */\n  variant?: \"block\" | \"inline\";\n  /** `small`: tighter, for a narrow column or a card. */\n  size?: \"small\" | \"medium\";\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst ICON_SIZE = { block: { medium: 32, small: 24 }, inline: { medium: 18, small: 16 } } as const;\n\nconst present = (value: unknown): boolean =>\n  value !== undefined &&\n  value !== null &&\n  value !== false &&\n  value !== \"\" &&\n  !(Array.isArray(value) && value.length === 0);\n\n/**\n * What a list, a table or a panel shows when it has nothing: an icon, a title,\n * the message (the children) and actions.\n */\nexport function EmptyState(props: ParentProps<EmptyStateProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"block\" as const, size: \"medium\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"title\", \"icon\", \"actions\", \"variant\", \"size\", \"children\", \"ref\"]);\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 icon = children(() => local.icon);\n  const title = children(() => local.title);\n  const message = children(() => local.children);\n  const actions = children(() => local.actions);\n  const iconName = (): string | undefined => {\n    const resolved = icon();\n    return typeof resolved === \"string\" ? resolved : undefined;\n  };\n\n  return (\n    <div\n      data-testid=\"empty-state\"\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-empty-state\", `smwb-empty-state_${local.variant}`, `smwb-empty-state_${local.size}`, local.class)}\n    >\n      <Show when={present(icon())}>\n        <span class=\"smwb-empty-state__icon\" aria-hidden=\"true\">\n          <Show when={iconName()} fallback={icon()}>\n            {(name) => <Icon name={name()} size={ICON_SIZE[local.variant][local.size]} />}\n          </Show>\n        </span>\n      </Show>\n      <Show when={present(title())}>\n        <div class=\"smwb-empty-state__title\">{title()}</div>\n      </Show>\n      <Show when={present(message())}>\n        <div class=\"smwb-empty-state__description\">{message()}</div>\n      </Show>\n      <Show when={present(actions())}>\n        <div class=\"smwb-empty-state__actions\">{actions()}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport default EmptyState;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAoBpC,MAAM,YAAY,EAAE,OAAO,EAAE,QAAQ,IAAI,OAAO,GAAG,GAAG,QAAQ,EAAE,QAAQ,IAAI,OAAO,GAAG,EAAE;AAExF,MAAM,UAAU,CAAC,UACf,UAAU,UACV,UAAU,QACV,UAAU,SACV,UAAU,MACV,EAAE,MAAM,QAAQ,KAAK,KAAK,MAAM,WAAW;AAMtC,SAAS,WAAW,OAAkD;AAC3E,QAAM,SAAS,WAAW,EAAE,SAAS,SAAkB,MAAM,SAAkB,GAAG,KAAK;AACvF,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,SAAS,SAAS,QAAQ,WAAW,WAAW,QAAQ,YAAY,KAAK,CAAC;AAIpH,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,QAAQ,SAAS,MAAM,MAAM,KAAK;AACxC,QAAM,UAAU,SAAS,MAAM,MAAM,QAAQ;AAC7C,QAAM,UAAU,SAAS,MAAM,MAAM,OAAO;AAC5C,QAAM,WAAW,MAA0B;AACzC,UAAM,WAAW,KAAK;AACtB,WAAO,OAAO,aAAa,WAAW,WAAW;AAAA,EACnD;AAEA,SACE,CAAC;AAAA,IACC,YAAY;AAAA,QACR;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,oBAAoB,oBAAoB,MAAM,OAAO,IAAI,oBAAoB,MAAM,IAAI,IAAI,MAAM,KAAK;AAAA,GACjH;AAAA,MACC,CAAC,KAAK,MAAM,QAAQ,KAAK,CAAC,GAAG;AAAA,QAC3B,CAAC,KAAK,MAAM,yBAAyB,YAAY,OAAO;AAAA,UACtD,CAAC,KAAK,MAAM,SAAS,GAAG,UAAU,KAAK,GAAG;AAAA,aACvC,CAAC,SAAS,CAAC,KAAK,MAAM,KAAK,GAAG,MAAM,UAAU,MAAM,OAAO,EAAE,MAAM,IAAI,GAAG,GAAG;AAAA,UAChF,EAFC,KAEM;AAAA,QACT,EAJC,KAIM;AAAA,MACT,EANC,KAMM;AAAA,MACP,CAAC,KAAK,MAAM,QAAQ,MAAM,CAAC,GAAG;AAAA,QAC5B,CAAC,IAAI,MAAM,2BAA2B,MAAM,EAAE,EAA7C,IAAmD;AAAA,MACtD,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,QAAQ,QAAQ,CAAC,GAAG;AAAA,QAC9B,CAAC,IAAI,MAAM,iCAAiC,QAAQ,EAAE,EAArD,IAA2D;AAAA,MAC9D,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,QAAQ,QAAQ,CAAC,GAAG;AAAA,QAC9B,CAAC,IAAI,MAAM,6BAA6B,QAAQ,EAAE,EAAjD,IAAuD;AAAA,MAC1D,EAFC,KAEM;AAAA,IACT,EAtBC;AAwBL;AAEA,IAAO,qBAAQ;","names":[],"file":"emptyState.jsx"}
+{"version":3,"sources":["../../../../../../src/components/feedBack/emptyState/emptyState.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface EmptyStateProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** What is empty, e.g. \"No works yet\". */\n  title?: JSX.Element;\n  /** An icon name, or an icon element. Decorative: the title and the message say it all. */\n  icon?: JSX.Element | string;\n  /** What the reader can do about it: buttons or links. */\n  actions?: JSX.Element;\n  /**\n   * `block` (default): centred, for an empty page, panel or card.\n   * `inline`: a muted line of text, for a list, a table or a column that came\n   * out empty; an action follows the last word.\n   */\n  variant?: \"block\" | \"inline\";\n  /** `small`: tighter, for a narrow column or a card. */\n  size?: \"small\" | \"medium\";\n  /** Test id of the root `<div>`; `empty-state` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst ICON_SIZE = { block: { medium: 32, small: 24 }, inline: { medium: 18, small: 16 } } as const;\n\nconst present = (value: unknown): boolean =>\n  value !== undefined &&\n  value !== null &&\n  value !== false &&\n  value !== \"\" &&\n  !(Array.isArray(value) && value.length === 0);\n\n/**\n * What a list, a table or a panel shows when it has nothing: an icon, a title,\n * the message (the children) and actions.\n */\nexport function EmptyState(props: ParentProps<EmptyStateProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"block\" as const, size: \"medium\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"title\",\n    \"icon\",\n    \"actions\",\n    \"variant\",\n    \"size\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const icon = children(() => local.icon);\n  const title = children(() => local.title);\n  const message = children(() => local.children);\n  const actions = children(() => local.actions);\n  const iconName = (): string | undefined => {\n    const resolved = icon();\n    return typeof resolved === \"string\" ? resolved : undefined;\n  };\n\n  return (\n    <div\n      data-testid={local[\"data-testid\"] ?? \"empty-state\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-empty-state\", `smwb-empty-state_${local.variant}`, `smwb-empty-state_${local.size}`, local.class)}\n    >\n      <Show when={present(icon())}>\n        <span class=\"smwb-empty-state__icon\" aria-hidden=\"true\">\n          <Show when={iconName()} fallback={icon()}>\n            {(name) => <Icon name={name()} size={ICON_SIZE[local.variant][local.size]} />}\n          </Show>\n        </span>\n      </Show>\n      <Show when={present(title())}>\n        <div class=\"smwb-empty-state__title\">{title()}</div>\n      </Show>\n      <Show when={present(message())}>\n        <div class=\"smwb-empty-state__description\">{message()}</div>\n      </Show>\n      <Show when={present(actions())}>\n        <div class=\"smwb-empty-state__actions\">{actions()}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport default EmptyState;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAsBpC,MAAM,YAAY,EAAE,OAAO,EAAE,QAAQ,IAAI,OAAO,GAAG,GAAG,QAAQ,EAAE,QAAQ,IAAI,OAAO,GAAG,EAAE;AAExF,MAAM,UAAU,CAAC,UACf,UAAU,UACV,UAAU,QACV,UAAU,SACV,UAAU,MACV,EAAE,MAAM,QAAQ,KAAK,KAAK,MAAM,WAAW;AAMtC,SAAS,WAAW,OAAkD;AAC3E,QAAM,SAAS,WAAW,EAAE,SAAS,SAAkB,MAAM,SAAkB,GAAG,KAAK;AACvF,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,EACF,CAAC;AAID,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,QAAQ,SAAS,MAAM,MAAM,KAAK;AACxC,QAAM,UAAU,SAAS,MAAM,MAAM,QAAQ;AAC7C,QAAM,UAAU,SAAS,MAAM,MAAM,OAAO;AAC5C,QAAM,WAAW,MAA0B;AACzC,UAAM,WAAW,KAAK;AACtB,WAAO,OAAO,aAAa,WAAW,WAAW;AAAA,EACnD;AAEA,SACE,CAAC;AAAA,IACC,aAAa,MAAM,aAAa,KAAK;AAAA,QACjC;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,oBAAoB,oBAAoB,MAAM,OAAO,IAAI,oBAAoB,MAAM,IAAI,IAAI,MAAM,KAAK;AAAA,GACjH;AAAA,MACC,CAAC,KAAK,MAAM,QAAQ,KAAK,CAAC,GAAG;AAAA,QAC3B,CAAC,KAAK,MAAM,yBAAyB,YAAY,OAAO;AAAA,UACtD,CAAC,KAAK,MAAM,SAAS,GAAG,UAAU,KAAK,GAAG;AAAA,aACvC,CAAC,SAAS,CAAC,KAAK,MAAM,KAAK,GAAG,MAAM,UAAU,MAAM,OAAO,EAAE,MAAM,IAAI,GAAG,GAAG;AAAA,UAChF,EAFC,KAEM;AAAA,QACT,EAJC,KAIM;AAAA,MACT,EANC,KAMM;AAAA,MACP,CAAC,KAAK,MAAM,QAAQ,MAAM,CAAC,GAAG;AAAA,QAC5B,CAAC,IAAI,MAAM,2BAA2B,MAAM,EAAE,EAA7C,IAAmD;AAAA,MACtD,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,QAAQ,QAAQ,CAAC,GAAG;AAAA,QAC9B,CAAC,IAAI,MAAM,iCAAiC,QAAQ,EAAE,EAArD,IAA2D;AAAA,MAC9D,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,QAAQ,QAAQ,CAAC,GAAG;AAAA,QAC9B,CAAC,IAAI,MAAM,6BAA6B,QAAQ,EAAE,EAAjD,IAAuD;AAAA,MAC1D,EAFC,KAEM;AAAA,IACT,EAtBC;AAwBL;AAEA,IAAO,qBAAQ;","names":[],"file":"emptyState.jsx"}

package/dist/headless/source/components/feedBack/message/message.jsx

@@ -12,14 +12,15 @@ function MessageContainer(props) {
     "variant",
     "onClose",
     "closeAriaLabel",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const resolvedSeverity = () => local.severity ?? local.type;
   return <div
     {...rest}
-    data-testid="message"
-    role="alert"
-    aria-live={resolvedSeverity() === "error" ? "assertive" : "polite"}
+    data-testid={local["data-testid"] ?? "message"}
+    role={rest.role ?? "alert"}
+    aria-live={rest["aria-live"] ?? (resolvedSeverity() === "error" ? "assertive" : "polite")}
     class={cn("smwb-message", `smwb-message_${local.variant}`, local.class, {
       [`smwb-message_${resolvedSeverity()}`]: Boolean(resolvedSeverity())
     })}

package/dist/headless/source/components/feedBack/message/message.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/feedBack/message/message.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type MessageSeverity = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface MessageProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  variant?: \"outlined\" | \"filled\" | \"left-accent\";\n  onClose?: () => void;\n  /** @deprecated use `severity`. */\n  type?: MessageSeverity;\n  /** Semantic severity of the message. */\n  severity?: MessageSeverity;\n  /** Accessible label for the close button. */\n  closeAriaLabel?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function MessageContainer(props: ParentProps<MessageProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"filled\" as const, closeAriaLabel: \"Close\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"type\",\n    \"severity\",\n    \"variant\",\n    \"onClose\",\n    \"closeAriaLabel\",\n    \"ref\",\n  ]);\n\n  const resolvedSeverity = (): MessageSeverity | undefined => local.severity ?? local.type;\n\n  return (\n    <div\n      {...rest}\n      data-testid=\"message\"\n      role=\"alert\"\n      aria-live={resolvedSeverity() === \"error\" ? \"assertive\" : \"polite\"}\n      class={cn(\"smwb-message\", `smwb-message_${local.variant}`, local.class, {\n        [`smwb-message_${resolvedSeverity()}`]: Boolean(resolvedSeverity()),\n      })}\n      ref={mergeRefs(local.ref)}\n    >\n      {local.children}\n      <Show when={local.onClose}>\n        <button\n          class=\"smwb-message__close-btn\"\n          onClick={() => local.onClose?.()}\n          aria-label={local.closeAriaLabel}\n          type=\"button\"\n        >\n          <Icon name=\"close\" weight={1000} />\n        </button>\n      </Show>\n    </div>\n  );\n}\n\nfunction Header(props: ParentProps): JSX.Element {\n  return <div class=\"smwb-message__header\">{props.children}</div>;\n}\n\nexport const Message = Object.assign(MessageContainer, { Header });\n\nexport default Message;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAgB7B,SAAS,iBAAiB,OAA+C;AAC9E,QAAM,SAAS,WAAW,EAAE,SAAS,UAAmB,gBAAgB,QAAQ,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,EACF,CAAC;AAED,QAAM,mBAAmB,MAAmC,MAAM,YAAY,MAAM;AAEpF,SACE,CAAC;AAAA,QACK;AAAA,IACJ,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,WAAW,iBAAiB,MAAM,UAAU,cAAc;AAAA,IAC1D,OAAO,GAAG,gBAAgB,gBAAgB,MAAM,OAAO,IAAI,MAAM,OAAO;AAAA,MACtE,CAAC,gBAAgB,iBAAiB,CAAC,EAAE,GAAG,QAAQ,iBAAiB,CAAC;AAAA,IACpE,CAAC;AAAA,IACD,KAAK,UAAU,MAAM,GAAG;AAAA,GACzB;AAAA,OACE,MAAM,SAAS;AAAA,MAChB,CAAC,KAAK,MAAM,MAAM,SAAS;AAAA,QACzB,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS,MAAM,MAAM,UAAU;AAAA,IAC/B,YAAY,MAAM;AAAA,IAClB,KAAK;AAAA,GACN;AAAA,UACC,CAAC,KAAK,KAAK,QAAQ,QAAQ,KAAM,EAAE;AAAA,QACrC,EAPC,OAOQ;AAAA,MACX,EATC,KASM;AAAA,IACT,EArBC;AAuBL;AAEA,SAAS,OAAO,OAAiC;AAC/C,SAAO,CAAC,IAAI,MAAM,wBAAwB,MAAM,SAAS,EAAjD;AACV;AAEO,MAAM,UAAU,OAAO,OAAO,kBAAkB,EAAE,OAAO,CAAC;AAEjE,IAAO,kBAAQ;","names":[],"file":"message.jsx"}
+{"version":3,"sources":["../../../../../../src/components/feedBack/message/message.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type MessageSeverity = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface MessageProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  variant?: \"outlined\" | \"filled\" | \"left-accent\";\n  onClose?: () => void;\n  /** @deprecated use `severity`. */\n  type?: MessageSeverity;\n  /** Semantic severity of the message. */\n  severity?: MessageSeverity;\n  /** Accessible label for the close button. */\n  closeAriaLabel?: string;\n  /** Test id of the root `<div>`; `message` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function MessageContainer(props: ParentProps<MessageProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"filled\" as const, closeAriaLabel: \"Close\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"type\",\n    \"severity\",\n    \"variant\",\n    \"onClose\",\n    \"closeAriaLabel\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const resolvedSeverity = (): MessageSeverity | undefined => local.severity ?? local.type;\n\n  return (\n    <div\n      {...rest}\n      data-testid={local[\"data-testid\"] ?? \"message\"}\n      // Defaults: the caller's own role and aria-live win, and an explicit\n      // undefined keeps these.\n      role={rest.role ?? \"alert\"}\n      aria-live={rest[\"aria-live\"] ?? (resolvedSeverity() === \"error\" ? \"assertive\" : \"polite\")}\n      class={cn(\"smwb-message\", `smwb-message_${local.variant}`, local.class, {\n        [`smwb-message_${resolvedSeverity()}`]: Boolean(resolvedSeverity()),\n      })}\n      ref={mergeRefs(local.ref)}\n    >\n      {local.children}\n      <Show when={local.onClose}>\n        <button\n          class=\"smwb-message__close-btn\"\n          onClick={() => local.onClose?.()}\n          aria-label={local.closeAriaLabel}\n          type=\"button\"\n        >\n          <Icon name=\"close\" weight={1000} />\n        </button>\n      </Show>\n    </div>\n  );\n}\n\nfunction Header(props: ParentProps): JSX.Element {\n  return <div class=\"smwb-message__header\">{props.children}</div>;\n}\n\nexport const Message = Object.assign(MessageContainer, { Header });\n\nexport default Message;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAkB7B,SAAS,iBAAiB,OAA+C;AAC9E,QAAM,SAAS,WAAW,EAAE,SAAS,UAAmB,gBAAgB,QAAQ,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,EACF,CAAC;AAED,QAAM,mBAAmB,MAAmC,MAAM,YAAY,MAAM;AAEpF,SACE,CAAC;AAAA,QACK;AAAA,IACJ,aAAa,MAAM,aAAa,KAAK;AAAA,IAGrC,MAAM,KAAK,QAAQ;AAAA,IACnB,WAAW,KAAK,WAAW,MAAM,iBAAiB,MAAM,UAAU,cAAc;AAAA,IAChF,OAAO,GAAG,gBAAgB,gBAAgB,MAAM,OAAO,IAAI,MAAM,OAAO;AAAA,MACtE,CAAC,gBAAgB,iBAAiB,CAAC,EAAE,GAAG,QAAQ,iBAAiB,CAAC;AAAA,IACpE,CAAC;AAAA,IACD,KAAK,UAAU,MAAM,GAAG;AAAA,GACzB;AAAA,OACE,MAAM,SAAS;AAAA,MAChB,CAAC,KAAK,MAAM,MAAM,SAAS;AAAA,QACzB,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS,MAAM,MAAM,UAAU;AAAA,IAC/B,YAAY,MAAM;AAAA,IAClB,KAAK;AAAA,GACN;AAAA,UACC,CAAC,KAAK,KAAK,QAAQ,QAAQ,KAAM,EAAE;AAAA,QACrC,EAPC,OAOQ;AAAA,MACX,EATC,KASM;AAAA,IACT,EAvBC;AAyBL;AAEA,SAAS,OAAO,OAAiC;AAC/C,SAAO,CAAC,IAAI,MAAM,wBAAwB,MAAM,SAAS,EAAjD;AACV;AAEO,MAAM,UAAU,OAAO,OAAO,kBAAkB,EAAE,OAAO,CAAC;AAEjE,IAAO,kBAAQ;","names":[],"file":"message.jsx"}

package/dist/headless/source/components/feedBack/modal/modal.jsx

@@ -1,9 +1,18 @@
-import { Show, createEffect, mergeProps, onCleanup, splitProps } from "solid-js";
+import {
+  Show,
+  createEffect,
+  createSignal,
+  mergeProps,
+  on,
+  onCleanup,
+  splitProps
+} from "solid-js";
 import { Dynamic, Portal, isServer } from "solid-js/web";
 import cn from "clsx";
 import { createCssTransition } from "../../../primitives/createCssTransition";
 import { createFocusTrap } from "../../../primitives/createFocusTrap";
 import { isTopOverlayLayer } from "../../../primitives/overlayLayer";
+import { restoreFocus } from "../../../primitives/restoreFocus";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 const OVERLAY_CLASSNAMES = {
   appear: "smwb-modal__overlay-appear",
@@ -15,6 +24,11 @@ const OVERLAY_CLASSNAMES = {
   exit: "smwb-modal__overlay-exit",
   exitActive: "smwb-modal__overlay-exit-active"
 };
+function isTopModal(overlay) {
+  if (!overlay || typeof document === "undefined") return true;
+  const open = document.querySelectorAll(".smwb-modal__overlay:not(.smwb-modal__overlay-exit)");
+  return open[open.length - 1] === overlay;
+}
 function ModalBase(props) {
   const merged = mergeProps(
     {
@@ -44,37 +58,56 @@ function ModalBase(props) {
     "closeOnEsc",
     "ref"
   ]);
-  let contentEl;
+  const [contentEl, setContentEl] = createSignal();
   let overlayEl;
+  createEffect(
+    on(
+      () => local.open,
+      (open) => {
+        if (!open) return;
+        const opener = contentEl()?.contains(document.activeElement) ? null : document.activeElement;
+        onCleanup(() => restoreFocus(opener, contentEl()));
+      }
+    )
+  );
   const transition = createCssTransition({
     in: () => local.open,
     timeout: { appear: 225, enter: 225, exit: 150 },
     classNames: OVERLAY_CLASSNAMES,
     appear: !local.disableAppearAnimation
   });
-  createFocusTrap({ active: () => local.open && transition.mounted(), container: () => contentEl });
+  createFocusTrap({
+    active: () => local.open && transition.mounted(),
+    container: contentEl,
+    restoreFocus: false,
+    isTopmost: () => isTopModal(overlayEl)
+  });
   createEffect(() => {
     if (!local.open || !local.closeOnEsc || !local.onClose) return;
     const onKeyDown = (event) => {
-      if (event.key === "Escape" && isTopOverlayLayer(overlayEl)) local.onClose?.();
+      if (event.key === "Escape" && !event.defaultPrevented && isTopOverlayLayer(overlayEl)) local.onClose?.();
     };
     document.addEventListener("keydown", onKeyDown);
     onCleanup(() => document.removeEventListener("keydown", onKeyDown));
   });
+  const onOverlayClick = () => {
+    if (local.closeOnOutsideClick) local.onClose?.();
+  };
   return <Show when={transition.mounted()}>
       <Portal mount={isServer ? void 0 : document.body}>
         <div
     ref={(el) => overlayEl = el}
     data-smwb-overlay-layer
     class={cn("smwb-modal__overlay", `smwb-${local.backdrop}`, `smwb-${local.size}`, transition.classes())}
-    onClick={local.closeOnOutsideClick && local.onClose ? () => local.onClose?.() : void 0}
+    onClick={onOverlayClick}
   >
           <Dynamic
     component={local.asForm ? "form" : "div"}
     {...rest}
-    ref={mergeRefs(local.ref, (el) => contentEl = el)}
+    ref={mergeRefs(local.ref, (el) => setContentEl(el))}
     class={cn("smwb-modal", `smwb-${local.size}`, `smwb-${local.animation}`, local.class)}
     onClick={(event) => event.stopPropagation()}
+    tabindex={-1}
     role={local.role}
     aria-modal="true"
   >

package/dist/headless/source/components/feedBack/modal/modal.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Dynamic, Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { createFocusTrap } from \"../../../primitives/createFocusTrap\";\nimport { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  class?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst OVERLAY_CLASSNAMES = {\n  appear: \"smwb-modal__overlay-appear\",\n  appearActive: \"smwb-modal__overlay-appear-active\",\n  appearDone: \"smwb-modal__overlay-appear-done\",\n  enter: \"smwb-modal__overlay-enter\",\n  enterActive: \"smwb-modal__overlay-enter-active\",\n  enterDone: \"smwb-modal__overlay-enter-done\",\n  exit: \"smwb-modal__overlay-exit\",\n  exitActive: \"smwb-modal__overlay-exit-active\",\n};\n\nfunction ModalBase(props: ParentProps<ModalProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      animation: \"fade\" as const,\n      backdrop: \"dark\" as const,\n      size: \"large\" as const,\n      closeOnOutsideClick: true,\n      asForm: false,\n      disableAppearAnimation: false,\n      role: \"dialog\" as const,\n      closeOnEsc: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"onClose\",\n    \"open\",\n    \"class\",\n    \"animation\",\n    \"backdrop\",\n    \"size\",\n    \"closeOnOutsideClick\",\n    \"asForm\",\n    \"disableAppearAnimation\",\n    \"role\",\n    \"closeOnEsc\",\n    \"ref\",\n  ]);\n\n  let contentEl: HTMLDivElement | undefined;\n  let overlayEl: HTMLDivElement | undefined;\n\n  const transition = createCssTransition({\n    in: () => local.open,\n    timeout: { appear: 225, enter: 225, exit: 150 },\n    classNames: OVERLAY_CLASSNAMES,\n    appear: !local.disableAppearAnimation,\n  });\n\n  createFocusTrap({ active: () => local.open && transition.mounted(), container: () => contentEl });\n\n  createEffect(() => {\n    if (!local.open || !local.closeOnEsc || !local.onClose) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      // Only the topmost overlay layer reacts to Escape.\n      if (event.key === \"Escape\" && isTopOverlayLayer(overlayEl)) local.onClose?.();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  return (\n    <Show when={transition.mounted()}>\n      <Portal mount={(isServer ? undefined : document.body) as Node}>\n        <div\n          ref={(el) => (overlayEl = el)}\n          data-smwb-overlay-layer\n          class={cn(\"smwb-modal__overlay\", `smwb-${local.backdrop}`, `smwb-${local.size}`, transition.classes())}\n          onClick={local.closeOnOutsideClick && local.onClose ? () => local.onClose?.() : undefined}\n        >\n          <Dynamic\n            component={local.asForm ? \"form\" : \"div\"}\n            {...rest}\n            ref={mergeRefs(local.ref, (el) => (contentEl = el as HTMLDivElement))}\n            class={cn(\"smwb-modal\", `smwb-${local.size}`, `smwb-${local.animation}`, local.class)}\n            onClick={(event: MouseEvent) => event.stopPropagation()}\n            role={local.role}\n            aria-modal=\"true\"\n          >\n            {local.children}\n          </Dynamic>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\nexport interface ModalSlotProps {\n  class?: string;\n}\n\nexport function Header(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__header\", props.class)}>{props.children}</div>;\n}\n\nexport function Content(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__content\", props.class)}>{props.children}</div>;\n}\n\nexport function Footer(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__footer\", props.class)}>{props.children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, { Footer, Header, Content });\n\nexport default Modal;\n"],"mappings":"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","names":[],"file":"modal.jsx"}
+{"version":3,"sources":["../../../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  Show,\n  createEffect,\n  createSignal,\n  mergeProps,\n  on,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport { Dynamic, Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { createFocusTrap } from \"../../../primitives/createFocusTrap\";\nimport { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { restoreFocus } from \"../../../primitives/restoreFocus\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  class?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst OVERLAY_CLASSNAMES = {\n  appear: \"smwb-modal__overlay-appear\",\n  appearActive: \"smwb-modal__overlay-appear-active\",\n  appearDone: \"smwb-modal__overlay-appear-done\",\n  enter: \"smwb-modal__overlay-enter\",\n  enterActive: \"smwb-modal__overlay-enter-active\",\n  enterDone: \"smwb-modal__overlay-enter-done\",\n  exit: \"smwb-modal__overlay-exit\",\n  exitActive: \"smwb-modal__overlay-exit-active\",\n};\n\n/**\n * Whether `overlay` is the last open Modal overlay; a dialog stacked above it owns Tab. Fading-out\n * ones do not count. Not `isTopOverlayLayer`: menus, select dropdowns and pickers are overlay\n * layers too, and a select dropdown open inside a Modal must not switch the Modal's trap off.\n */\nfunction isTopModal(overlay: Element | null | undefined): boolean {\n  if (!overlay || typeof document === \"undefined\") return true;\n  const open = document.querySelectorAll(\".smwb-modal__overlay:not(.smwb-modal__overlay-exit)\");\n  return open[open.length - 1] === overlay;\n}\n\n/**\n * A modal dialog: portaled to `<body>`, animated, closed by Escape or a backdrop click.\n *\n * While open it traps Tab/Shift+Tab inside the dialog and moves the focus into it (the first tab\n * stop, else the dialog itself), unless a child has already focused itself. On close, and on\n * unmount while open, the focus goes back to the element that had it when the dialog opened —\n * unless the app has moved the focus elsewhere by then.\n * Of stacked dialogs only the topmost one handles Tab.\n */\nfunction ModalBase(props: ParentProps<ModalProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      animation: \"fade\" as const,\n      backdrop: \"dark\" as const,\n      size: \"large\" as const,\n      closeOnOutsideClick: true,\n      asForm: false,\n      disableAppearAnimation: false,\n      role: \"dialog\" as const,\n      closeOnEsc: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"onClose\",\n    \"open\",\n    \"class\",\n    \"animation\",\n    \"backdrop\",\n    \"size\",\n    \"closeOnOutsideClick\",\n    \"asForm\",\n    \"disableAppearAnimation\",\n    \"role\",\n    \"closeOnEsc\",\n    \"ref\",\n  ]);\n\n  // A signal, not a plain `let`: the dialog is built by a portal, so on a closed→open transition\n  // the trap's effect runs before the ref below has assigned anything. A plain variable is not\n  // tracked, so the trap bailed on the empty container and never armed itself again — Tab then\n  // walked focus out of an open dialog. Writing a signal re-runs the trap once the node lands.\n  const [contentEl, setContentEl] = createSignal<HTMLDivElement | undefined>();\n  let overlayEl: HTMLDivElement | undefined;\n\n  // Created before the transition and the trap: effects run in creation order, so the opener is read\n  // before the trap's `autoFocus` moves the focus and before a child's `onMount` focuses itself.\n  createEffect(\n    on(\n      () => local.open,\n      (open) => {\n        if (!open) return;\n        // The element focused when the dialog opens gets focus back when it closes or unmounts while open,\n        // unless the app has moved focus out of the dialog by then (see restoreFocus).\n        const opener = contentEl()?.contains(document.activeElement) ? null : document.activeElement;\n        onCleanup(() => restoreFocus(opener, contentEl()));\n      }\n    )\n  );\n\n  const transition = createCssTransition({\n    in: () => local.open,\n    timeout: { appear: 225, enter: 225, exit: 150 },\n    classNames: OVERLAY_CLASSNAMES,\n    appear: !local.disableAppearAnimation,\n  });\n\n  createFocusTrap({\n    active: () => local.open && transition.mounted(),\n    container: contentEl,\n    restoreFocus: false,\n    isTopmost: () => isTopModal(overlayEl),\n  });\n\n  createEffect(() => {\n    if (!local.open || !local.closeOnEsc || !local.onClose) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      // Only the topmost overlay layer reacts to Escape, and not to one handled inside\n      // it, e.g. by a menu closing on it.\n      if (event.key === \"Escape\" && !event.defaultPrevented && isTopOverlayLayer(overlayEl)) local.onClose?.();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  // Always attached and checks the props itself. Solid binds event handlers\n  // once, and the portal builds the overlay in a tracked scope, so choosing the\n  // handler by these props there would rebuild the dialog, content included,\n  // whenever one of them changes.\n  const onOverlayClick = (): void => {\n    if (local.closeOnOutsideClick) local.onClose?.();\n  };\n\n  return (\n    <Show when={transition.mounted()}>\n      <Portal mount={(isServer ? undefined : document.body) as Node}>\n        <div\n          ref={(el) => (overlayEl = el)}\n          data-smwb-overlay-layer\n          class={cn(\"smwb-modal__overlay\", `smwb-${local.backdrop}`, `smwb-${local.size}`, transition.classes())}\n          onClick={onOverlayClick}\n        >\n          <Dynamic\n            component={local.asForm ? \"form\" : \"div\"}\n            {...rest}\n            ref={mergeRefs(local.ref, (el) => setContentEl(el as HTMLDivElement))}\n            class={cn(\"smwb-modal\", `smwb-${local.size}`, `smwb-${local.animation}`, local.class)}\n            onClick={(event: MouseEvent) => event.stopPropagation()}\n            tabindex={-1}\n            role={local.role}\n            aria-modal=\"true\"\n          >\n            {local.children}\n          </Dynamic>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\nexport interface ModalSlotProps {\n  class?: string;\n}\n\nexport function Header(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__header\", props.class)}>{props.children}</div>;\n}\n\nexport function Content(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__content\", props.class)}>{props.children}</div>;\n}\n\nexport function Footer(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__footer\", props.class)}>{props.children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, { Footer, Header, Content });\n\nexport default Modal;\n"],"mappings":"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","names":[],"file":"modal.jsx"}