@smwb/ui-solid 0.11.1 → 0.12.0

package/dist/source/components/dataDisplay/chat/chatMessageBubble.jsx

@@ -1,4 +1,4 @@
-import { Show } from "solid-js";
+import { Show, children } from "solid-js";
 import cn from "clsx";
 import { Typography } from "../typography";
 import { ChatAttachments } from "./chatAttachments";
@@ -6,6 +6,7 @@ import { ChatMessageAvatar } from "./chatMessageAvatar";
 import { ChatMessageStatus } from "./chatMessageStatus";
 import { formatChatTimestamp } from "./utils";
 function ChatMessageBubble(props) {
+  const text = children(() => props.text);
   const time = () => formatChatTimestamp(props.timestamp);
   const deliveryStatus = () => props.status ?? props.message.status;
   const statusToShow = () => props.showStatus && props.align === "end" ? deliveryStatus() : void 0;
@@ -20,8 +21,8 @@ function ChatMessageBubble(props) {
           </Typography>
         </Show>
         <div class={cn("smwb-chat-message__bubble", props.bubbleClass)}>
-          <Show when={props.text}>
-            <div class="smwb-chat-message__text">{props.text}</div>
+          <Show when={text()}>
+            <div class="smwb-chat-message__text">{text()}</div>
           </Show>
           <ChatAttachments attachments={props.attachments} enabled={props.showAttachments} />
         </div>

package/dist/source/components/dataDisplay/chat/chatMessageBubble.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/chat/chatMessageBubble.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Typography } from \"../typography\";\nimport { ChatAttachments } from \"./chatAttachments\";\nimport { ChatMessageAvatar } from \"./chatMessageAvatar\";\nimport { ChatMessageStatus } from \"./chatMessageStatus\";\nimport type {\n  ChatAttachment,\n  ChatAuthor,\n  ChatMessage,\n  ChatMessageStatusIcons,\n  ChatMessageStatusRenderContext,\n  ChatMessageStatus as ChatMessageStatusValue,\n} from \"./types\";\nimport { formatChatTimestamp } from \"./utils\";\n\nexport interface ChatMessageBubbleProps {\n  class?: string | undefined;\n  align: \"start\" | \"end\";\n  message: ChatMessage;\n  author?: ChatAuthor | undefined;\n  text?: JSX.Element;\n  attachments?: ChatAttachment[] | undefined;\n  timestamp?: string | Date | undefined;\n  status?: ChatMessageStatusValue | undefined;\n  showAvatars?: boolean | undefined;\n  showAttachments?: boolean | undefined;\n  showStatus?: boolean | undefined;\n  statusIcons?: (ChatMessageStatusIcons & Record<string, string | undefined>) | undefined;\n  renderStatus?: ((ctx: ChatMessageStatusRenderContext) => JSX.Element) | undefined;\n  bubbleClass?: string | undefined;\n}\n\nexport function ChatMessageBubble(props: ChatMessageBubbleProps): JSX.Element {\n  const time = (): string => formatChatTimestamp(props.timestamp);\n  const deliveryStatus = (): ChatMessageStatusValue | undefined => props.status ?? props.message.status;\n  const statusToShow = (): ChatMessageStatusValue | undefined =>\n    props.showStatus && props.align === \"end\" ? deliveryStatus() : undefined;\n\n  return (\n    <div class={cn(\"smwb-chat-message\", `smwb-chat-message_${props.align}`, props.class)} data-testid={`chat-message-${props.align}`}>\n      <Show when={props.align === \"start\"}>\n        <ChatMessageAvatar author={props.author} enabled={props.showAvatars} />\n      </Show>\n      <div class=\"smwb-chat-message__content\">\n        <Show when={props.author?.name}>\n          <Typography variant=\"caption\" class=\"smwb-chat-message__author\">\n            {props.author?.name}\n          </Typography>\n        </Show>\n        <div class={cn(\"smwb-chat-message__bubble\", props.bubbleClass)}>\n          <Show when={props.text}>\n            <div class=\"smwb-chat-message__text\">{props.text}</div>\n          </Show>\n          <ChatAttachments attachments={props.attachments} enabled={props.showAttachments} />\n        </div>\n        <Show when={time() || statusToShow()}>\n          <div class=\"smwb-chat-message__meta\" data-testid=\"chat-message-meta\">\n            <Show when={time()}>\n              <Typography variant=\"caption\" class=\"smwb-chat-message__time\">\n                {time()}\n              </Typography>\n            </Show>\n            <Show when={statusToShow()}>\n              {(status) => (\n                <ChatMessageStatus\n                  message={props.message}\n                  status={status()}\n                  statusIcons={props.statusIcons}\n                  renderStatus={props.renderStatus}\n                />\n              )}\n            </Show>\n          </div>\n        </Show>\n      </div>\n      <Show when={props.align === \"end\"}>\n        <ChatMessageAvatar author={props.author} enabled={props.showAvatars} />\n      </Show>\n    </div>\n  );\n}\n\nexport default ChatMessageBubble;\n"],"mappings":"AAAA,SAAmB,YAAY;AAC/B,OAAO,QAAQ;AACf,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AASlC,SAAS,2BAA2B;AAmB7B,SAAS,kBAAkB,OAA4C;AAC5E,QAAM,OAAO,MAAc,oBAAoB,MAAM,SAAS;AAC9D,QAAM,iBAAiB,MAA0C,MAAM,UAAU,MAAM,QAAQ;AAC/F,QAAM,eAAe,MACnB,MAAM,cAAc,MAAM,UAAU,QAAQ,eAAe,IAAI;AAEjE,SACE,CAAC,IAAI,OAAO,GAAG,qBAAqB,qBAAqB,MAAM,KAAK,IAAI,MAAM,KAAK,GAAG,aAAa,gBAAgB,MAAM,KAAK,IAAI;AAAA,MAChI,CAAC,KAAK,MAAM,MAAM,UAAU,SAAS;AAAA,QACnC,CAAC,kBAAkB,QAAQ,MAAM,QAAQ,SAAS,MAAM,aAAa,EAAE;AAAA,MACzE,EAFC,KAEM;AAAA,MACP,CAAC,IAAI,MAAM,6BAA6B;AAAA,QACtC,CAAC,KAAK,MAAM,MAAM,QAAQ,MAAM;AAAA,UAC9B,CAAC,WAAW,QAAQ,UAAU,MAAM,4BAA4B;AAAA,aAC7D,MAAM,QAAQ,KAAK;AAAA,UACtB,EAFC,WAEY;AAAA,QACf,EAJC,KAIM;AAAA,QACP,CAAC,IAAI,OAAO,GAAG,6BAA6B,MAAM,WAAW,GAAG;AAAA,UAC9D,CAAC,KAAK,MAAM,MAAM,MAAM;AAAA,YACtB,CAAC,IAAI,MAAM,2BAA2B,MAAM,KAAK,EAAhD,IAAsD;AAAA,UACzD,EAFC,KAEM;AAAA,UACP,CAAC,gBAAgB,aAAa,MAAM,aAAa,SAAS,MAAM,iBAAiB,EAAE;AAAA,QACrF,EALC,IAKK;AAAA,QACN,CAAC,KAAK,MAAM,KAAK,KAAK,aAAa,GAAG;AAAA,UACpC,CAAC,IAAI,MAAM,0BAA0B,YAAY,oBAAoB;AAAA,YACnE,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,cAClB,CAAC,WAAW,QAAQ,UAAU,MAAM,0BAA0B;AAAA,iBAC3D,KAAK,EAAE;AAAA,cACV,EAFC,WAEY;AAAA,YACf,EAJC,KAIM;AAAA,YACP,CAAC,KAAK,MAAM,aAAa,GAAG;AAAA,eACzB,CAAC,WACA,CAAC;AAAA,IACC,SAAS,MAAM;AAAA,IACf,QAAQ,OAAO;AAAA,IACf,aAAa,MAAM;AAAA,IACnB,cAAc,MAAM;AAAA,EACtB,GACA;AAAA,YACJ,EATC,KASM;AAAA,UACT,EAhBC,IAgBK;AAAA,QACR,EAlBC,KAkBM;AAAA,MACT,EA/BC,IA+BK;AAAA,MACN,CAAC,KAAK,MAAM,MAAM,UAAU,OAAO;AAAA,QACjC,CAAC,kBAAkB,QAAQ,MAAM,QAAQ,SAAS,MAAM,aAAa,EAAE;AAAA,MACzE,EAFC,KAEM;AAAA,IACT,EAvCC;AAyCL;AAEA,IAAO,4BAAQ;","names":[],"file":"chatMessageBubble.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/chat/chatMessageBubble.tsx"],"sourcesContent":["import { type JSX, Show, children } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Typography } from \"../typography\";\nimport { ChatAttachments } from \"./chatAttachments\";\nimport { ChatMessageAvatar } from \"./chatMessageAvatar\";\nimport { ChatMessageStatus } from \"./chatMessageStatus\";\nimport type {\n  ChatAttachment,\n  ChatAuthor,\n  ChatMessage,\n  ChatMessageStatusIcons,\n  ChatMessageStatusRenderContext,\n  ChatMessageStatus as ChatMessageStatusValue,\n} from \"./types\";\nimport { formatChatTimestamp } from \"./utils\";\n\nexport interface ChatMessageBubbleProps {\n  class?: string | undefined;\n  align: \"start\" | \"end\";\n  message: ChatMessage;\n  author?: ChatAuthor | undefined;\n  text?: JSX.Element;\n  attachments?: ChatAttachment[] | undefined;\n  timestamp?: string | Date | undefined;\n  status?: ChatMessageStatusValue | undefined;\n  showAvatars?: boolean | undefined;\n  showAttachments?: boolean | undefined;\n  showStatus?: boolean | undefined;\n  statusIcons?: (ChatMessageStatusIcons & Record<string, string | undefined>) | undefined;\n  renderStatus?: ((ctx: ChatMessageStatusRenderContext) => JSX.Element) | undefined;\n  bubbleClass?: string | undefined;\n}\n\nexport function ChatMessageBubble(props: ChatMessageBubbleProps): JSX.Element {\n  // Read the text once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const text = children(() => props.text);\n  const time = (): string => formatChatTimestamp(props.timestamp);\n  const deliveryStatus = (): ChatMessageStatusValue | undefined => props.status ?? props.message.status;\n  const statusToShow = (): ChatMessageStatusValue | undefined =>\n    props.showStatus && props.align === \"end\" ? deliveryStatus() : undefined;\n\n  return (\n    <div class={cn(\"smwb-chat-message\", `smwb-chat-message_${props.align}`, props.class)} data-testid={`chat-message-${props.align}`}>\n      <Show when={props.align === \"start\"}>\n        <ChatMessageAvatar author={props.author} enabled={props.showAvatars} />\n      </Show>\n      <div class=\"smwb-chat-message__content\">\n        <Show when={props.author?.name}>\n          <Typography variant=\"caption\" class=\"smwb-chat-message__author\">\n            {props.author?.name}\n          </Typography>\n        </Show>\n        <div class={cn(\"smwb-chat-message__bubble\", props.bubbleClass)}>\n          <Show when={text()}>\n            <div class=\"smwb-chat-message__text\">{text()}</div>\n          </Show>\n          <ChatAttachments attachments={props.attachments} enabled={props.showAttachments} />\n        </div>\n        <Show when={time() || statusToShow()}>\n          <div class=\"smwb-chat-message__meta\" data-testid=\"chat-message-meta\">\n            <Show when={time()}>\n              <Typography variant=\"caption\" class=\"smwb-chat-message__time\">\n                {time()}\n              </Typography>\n            </Show>\n            <Show when={statusToShow()}>\n              {(status) => (\n                <ChatMessageStatus\n                  message={props.message}\n                  status={status()}\n                  statusIcons={props.statusIcons}\n                  renderStatus={props.renderStatus}\n                />\n              )}\n            </Show>\n          </div>\n        </Show>\n      </div>\n      <Show when={props.align === \"end\"}>\n        <ChatMessageAvatar author={props.author} enabled={props.showAvatars} />\n      </Show>\n    </div>\n  );\n}\n\nexport default ChatMessageBubble;\n"],"mappings":"AAAA,SAAmB,MAAM,gBAAgB;AACzC,OAAO,QAAQ;AACf,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AASlC,SAAS,2BAA2B;AAmB7B,SAAS,kBAAkB,OAA4C;AAG5E,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,OAAO,MAAc,oBAAoB,MAAM,SAAS;AAC9D,QAAM,iBAAiB,MAA0C,MAAM,UAAU,MAAM,QAAQ;AAC/F,QAAM,eAAe,MACnB,MAAM,cAAc,MAAM,UAAU,QAAQ,eAAe,IAAI;AAEjE,SACE,CAAC,IAAI,OAAO,GAAG,qBAAqB,qBAAqB,MAAM,KAAK,IAAI,MAAM,KAAK,GAAG,aAAa,gBAAgB,MAAM,KAAK,IAAI;AAAA,MAChI,CAAC,KAAK,MAAM,MAAM,UAAU,SAAS;AAAA,QACnC,CAAC,kBAAkB,QAAQ,MAAM,QAAQ,SAAS,MAAM,aAAa,EAAE;AAAA,MACzE,EAFC,KAEM;AAAA,MACP,CAAC,IAAI,MAAM,6BAA6B;AAAA,QACtC,CAAC,KAAK,MAAM,MAAM,QAAQ,MAAM;AAAA,UAC9B,CAAC,WAAW,QAAQ,UAAU,MAAM,4BAA4B;AAAA,aAC7D,MAAM,QAAQ,KAAK;AAAA,UACtB,EAFC,WAEY;AAAA,QACf,EAJC,KAIM;AAAA,QACP,CAAC,IAAI,OAAO,GAAG,6BAA6B,MAAM,WAAW,GAAG;AAAA,UAC9D,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,YAClB,CAAC,IAAI,MAAM,2BAA2B,KAAK,EAAE,EAA5C,IAAkD;AAAA,UACrD,EAFC,KAEM;AAAA,UACP,CAAC,gBAAgB,aAAa,MAAM,aAAa,SAAS,MAAM,iBAAiB,EAAE;AAAA,QACrF,EALC,IAKK;AAAA,QACN,CAAC,KAAK,MAAM,KAAK,KAAK,aAAa,GAAG;AAAA,UACpC,CAAC,IAAI,MAAM,0BAA0B,YAAY,oBAAoB;AAAA,YACnE,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,cAClB,CAAC,WAAW,QAAQ,UAAU,MAAM,0BAA0B;AAAA,iBAC3D,KAAK,EAAE;AAAA,cACV,EAFC,WAEY;AAAA,YACf,EAJC,KAIM;AAAA,YACP,CAAC,KAAK,MAAM,aAAa,GAAG;AAAA,eACzB,CAAC,WACA,CAAC;AAAA,IACC,SAAS,MAAM;AAAA,IACf,QAAQ,OAAO;AAAA,IACf,aAAa,MAAM;AAAA,IACnB,cAAc,MAAM;AAAA,EACtB,GACA;AAAA,YACJ,EATC,KASM;AAAA,UACT,EAhBC,IAgBK;AAAA,QACR,EAlBC,KAkBM;AAAA,MACT,EA/BC,IA+BK;AAAA,MACN,CAAC,KAAK,MAAM,MAAM,UAAU,OAAO;AAAA,QACjC,CAAC,kBAAkB,QAAQ,MAAM,QAAQ,SAAS,MAAM,aAAa,EAAE;AAAA,MACzE,EAFC,KAEM;AAAA,IACT,EAvCC;AAyCL;AAEA,IAAO,4BAAQ;","names":[],"file":"chatMessageBubble.jsx"}

package/dist/source/components/dataDisplay/chat/chatShell.jsx

@@ -1,4 +1,4 @@
-import { Show, createEffect, mergeProps, onCleanup, splitProps } from "solid-js";
+import { Show, children, createEffect, mergeProps, onCleanup, splitProps } from "solid-js";
 import { Portal, isServer } from "solid-js/web";
 import cn from "clsx";
 function ChatShell(props) {
@@ -27,31 +27,35 @@ function ChatShell(props) {
       document.body.style.overflow = prev;
     });
   });
-  const panel = () => <div
-    {...local.fileDropzoneRootProps ?? {}}
-    class={cn(
-      "smwb-chat-shell",
-      `smwb-chat-shell_${local.layout}`,
-      !local.embedded && `smwb-chat-shell_${local.anchor}`,
-      {
-        "smwb-dark": local.themeMode === "dark",
-        "smwb-chat-shell_embedded": local.embedded,
-        "smwb-chat-shell_overlay-context": local.overlayContext,
-        "smwb-chat-dropzone_active": local.fileDropzoneActive
-      },
-      local.class
-    )}
-    data-testid="chat-shell"
-    data-layout={local.layout}
-  >
-      <Show when={local.header}>
-        <div class="smwb-chat-shell__header">{local.header}</div>
-      </Show>
-      <div class="smwb-chat-shell__body">{local.children}</div>
-      <Show when={local.footer}>
-        <div class="smwb-chat-shell__footer">{local.footer}</div>
-      </Show>
-    </div>;
+  const panel = () => {
+    const header = children(() => local.header);
+    const footer = children(() => local.footer);
+    return <div
+      {...local.fileDropzoneRootProps ?? {}}
+      class={cn(
+        "smwb-chat-shell",
+        `smwb-chat-shell_${local.layout}`,
+        !local.embedded && `smwb-chat-shell_${local.anchor}`,
+        {
+          "smwb-dark": local.themeMode === "dark",
+          "smwb-chat-shell_embedded": local.embedded,
+          "smwb-chat-shell_overlay-context": local.overlayContext,
+          "smwb-chat-dropzone_active": local.fileDropzoneActive
+        },
+        local.class
+      )}
+      data-testid="chat-shell"
+      data-layout={local.layout}
+    >
+        <Show when={header()}>
+          <div class="smwb-chat-shell__header">{header()}</div>
+        </Show>
+        <div class="smwb-chat-shell__body">{local.children}</div>
+        <Show when={footer()}>
+          <div class="smwb-chat-shell__footer">{footer()}</div>
+        </Show>
+      </div>;
+  };
   return <Show when={local.layout !== "closed"}>
       <Show when={local.layout === "fullscreen"} fallback={panel()}>
         <Portal mount={isServer ? void 0 : document.body}>{panel()}</Portal>

package/dist/source/components/dataDisplay/chat/chatShell.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/chat/chatShell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport type { ChatAnchor, ChatLayoutMode, ChatThemeMode } from \"./types\";\n\nexport interface ChatShellProps extends ParentProps {\n  class?: string | undefined;\n  layout: ChatLayoutMode;\n  anchor?: ChatAnchor | undefined;\n  themeMode?: ChatThemeMode | undefined;\n  embedded?: boolean | undefined;\n  overlayContext?: boolean | undefined;\n  header?: JSX.Element;\n  footer?: JSX.Element;\n  fileDropzoneRootProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined;\n  fileDropzoneActive?: boolean | undefined;\n}\n\nexport function ChatShell(props: ChatShellProps): JSX.Element {\n  const merged = mergeProps(\n    { anchor: \"bottom-right\" as const, themeMode: \"inherit\" as const, embedded: false, overlayContext: false, fileDropzoneActive: false },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"layout\",\n    \"anchor\",\n    \"themeMode\",\n    \"embedded\",\n    \"overlayContext\",\n    \"header\",\n    \"footer\",\n    \"children\",\n    \"fileDropzoneRootProps\",\n    \"fileDropzoneActive\",\n  ]);\n\n  // Lock body scroll while a fullscreen chat is mounted.\n  createEffect(() => {\n    if (local.layout !== \"fullscreen\") 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  const panel = (): JSX.Element => (\n    <div\n      {...(local.fileDropzoneRootProps ?? {})}\n      class={cn(\n        \"smwb-chat-shell\",\n        `smwb-chat-shell_${local.layout}`,\n        !local.embedded && `smwb-chat-shell_${local.anchor}`,\n        {\n          \"smwb-dark\": local.themeMode === \"dark\",\n          \"smwb-chat-shell_embedded\": local.embedded,\n          \"smwb-chat-shell_overlay-context\": local.overlayContext,\n          \"smwb-chat-dropzone_active\": local.fileDropzoneActive,\n        },\n        local.class\n      )}\n      data-testid=\"chat-shell\"\n      data-layout={local.layout}\n    >\n      <Show when={local.header}>\n        <div class=\"smwb-chat-shell__header\">{local.header}</div>\n      </Show>\n      <div class=\"smwb-chat-shell__body\">{local.children}</div>\n      <Show when={local.footer}>\n        <div class=\"smwb-chat-shell__footer\">{local.footer}</div>\n      </Show>\n    </div>\n  );\n\n  return (\n    <Show when={local.layout !== \"closed\"}>\n      <Show when={local.layout === \"fullscreen\"} fallback={panel()}>\n        <Portal mount={(isServer ? undefined : document.body) as Node}>{panel()}</Portal>\n      </Show>\n    </Show>\n  );\n}\n\nexport default ChatShell;\n"],"mappings":"AAAA,SAAqC,MAAM,cAAc,YAAY,WAAW,kBAAkB;AAClG,SAAS,QAAQ,gBAAgB;AACjC,OAAO,QAAQ;AAgBR,SAAS,UAAU,OAAoC;AAC5D,QAAM,SAAS;AAAA,IACb,EAAE,QAAQ,gBAAyB,WAAW,WAAoB,UAAU,OAAO,gBAAgB,OAAO,oBAAoB,MAAM;AAAA,IACpI;AAAA,EACF;AACA,QAAM,CAAC,KAAK,IAAI,WAAW,QAAQ;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,eAAa,MAAM;AACjB,QAAI,MAAM,WAAW,aAAc;AACnC,UAAM,OAAO,SAAS,KAAK,MAAM;AACjC,aAAS,KAAK,MAAM,WAAW;AAC/B,cAAU,MAAM;AACd,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC,CAAC;AAAA,EACH,CAAC;AAED,QAAM,QAAQ,MACZ,CAAC;AAAA,QACM,MAAM,yBAAyB,CAAC;AAAA,IACrC,OAAO;AAAA,MACL;AAAA,MACA,mBAAmB,MAAM,MAAM;AAAA,MAC/B,CAAC,MAAM,YAAY,mBAAmB,MAAM,MAAM;AAAA,MAClD;AAAA,QACE,aAAa,MAAM,cAAc;AAAA,QACjC,4BAA4B,MAAM;AAAA,QAClC,mCAAmC,MAAM;AAAA,QACzC,6BAA6B,MAAM;AAAA,MACrC;AAAA,MACA,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,IACZ,aAAa,MAAM;AAAA,GACpB;AAAA,MACC,CAAC,KAAK,MAAM,MAAM,QAAQ;AAAA,QACxB,CAAC,IAAI,MAAM,2BAA2B,MAAM,OAAO,EAAlD,IAAwD;AAAA,MAC3D,EAFC,KAEM;AAAA,MACP,CAAC,IAAI,MAAM,yBAAyB,MAAM,SAAS,EAAlD,IAAwD;AAAA,MACzD,CAAC,KAAK,MAAM,MAAM,QAAQ;AAAA,QACxB,CAAC,IAAI,MAAM,2BAA2B,MAAM,OAAO,EAAlD,IAAwD;AAAA,MAC3D,EAFC,KAEM;AAAA,IACT,EAxBC;AA2BH,SACE,CAAC,KAAK,MAAM,MAAM,WAAW,UAAU;AAAA,MACrC,CAAC,KAAK,MAAM,MAAM,WAAW,cAAc,UAAU,MAAM,GAAG;AAAA,QAC5D,CAAC,OAAO,OAAQ,WAAW,SAAY,SAAS,OAAgB,MAAM,EAAE,EAAvE,OAAgF;AAAA,MACnF,EAFC,KAEM;AAAA,IACT,EAJC;AAML;AAEA,IAAO,oBAAQ;","names":[],"file":"chatShell.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/chat/chatShell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport type { ChatAnchor, ChatLayoutMode, ChatThemeMode } from \"./types\";\n\nexport interface ChatShellProps extends ParentProps {\n  class?: string | undefined;\n  layout: ChatLayoutMode;\n  anchor?: ChatAnchor | undefined;\n  themeMode?: ChatThemeMode | undefined;\n  embedded?: boolean | undefined;\n  overlayContext?: boolean | undefined;\n  header?: JSX.Element;\n  footer?: JSX.Element;\n  fileDropzoneRootProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined;\n  fileDropzoneActive?: boolean | undefined;\n}\n\nexport function ChatShell(props: ChatShellProps): JSX.Element {\n  const merged = mergeProps(\n    { anchor: \"bottom-right\" as const, themeMode: \"inherit\" as const, embedded: false, overlayContext: false, fileDropzoneActive: false },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"layout\",\n    \"anchor\",\n    \"themeMode\",\n    \"embedded\",\n    \"overlayContext\",\n    \"header\",\n    \"footer\",\n    \"children\",\n    \"fileDropzoneRootProps\",\n    \"fileDropzoneActive\",\n  ]);\n\n  // Lock body scroll while a fullscreen chat is mounted.\n  createEffect(() => {\n    if (local.layout !== \"fullscreen\") 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  const panel = (): JSX.Element => {\n    // Read the header and the footer once, where the panel is drawn: markup\n    // passed as a prop is created anew on every read, and during hydration a\n    // copy the server never rendered has no DOM node.\n    const header = children(() => local.header);\n    const footer = children(() => local.footer);\n    return (\n      <div\n        {...(local.fileDropzoneRootProps ?? {})}\n        class={cn(\n          \"smwb-chat-shell\",\n          `smwb-chat-shell_${local.layout}`,\n          !local.embedded && `smwb-chat-shell_${local.anchor}`,\n          {\n            \"smwb-dark\": local.themeMode === \"dark\",\n            \"smwb-chat-shell_embedded\": local.embedded,\n            \"smwb-chat-shell_overlay-context\": local.overlayContext,\n            \"smwb-chat-dropzone_active\": local.fileDropzoneActive,\n          },\n          local.class\n        )}\n        data-testid=\"chat-shell\"\n        data-layout={local.layout}\n      >\n        <Show when={header()}>\n          <div class=\"smwb-chat-shell__header\">{header()}</div>\n        </Show>\n        <div class=\"smwb-chat-shell__body\">{local.children}</div>\n        <Show when={footer()}>\n          <div class=\"smwb-chat-shell__footer\">{footer()}</div>\n        </Show>\n      </div>\n    );\n  };\n\n  return (\n    <Show when={local.layout !== \"closed\"}>\n      <Show when={local.layout === \"fullscreen\"} fallback={panel()}>\n        <Portal mount={(isServer ? undefined : document.body) as Node}>{panel()}</Portal>\n      </Show>\n    </Show>\n  );\n}\n\nexport default ChatShell;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,cAAc,YAAY,WAAW,kBAAkB;AAC5G,SAAS,QAAQ,gBAAgB;AACjC,OAAO,QAAQ;AAgBR,SAAS,UAAU,OAAoC;AAC5D,QAAM,SAAS;AAAA,IACb,EAAE,QAAQ,gBAAyB,WAAW,WAAoB,UAAU,OAAO,gBAAgB,OAAO,oBAAoB,MAAM;AAAA,IACpI;AAAA,EACF;AACA,QAAM,CAAC,KAAK,IAAI,WAAW,QAAQ;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,eAAa,MAAM;AACjB,QAAI,MAAM,WAAW,aAAc;AACnC,UAAM,OAAO,SAAS,KAAK,MAAM;AACjC,aAAS,KAAK,MAAM,WAAW;AAC/B,cAAU,MAAM;AACd,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC,CAAC;AAAA,EACH,CAAC;AAED,QAAM,QAAQ,MAAmB;AAI/B,UAAM,SAAS,SAAS,MAAM,MAAM,MAAM;AAC1C,UAAM,SAAS,SAAS,MAAM,MAAM,MAAM;AAC1C,WACE,CAAC;AAAA,UACM,MAAM,yBAAyB,CAAC;AAAA,MACrC,OAAO;AAAA,QACL;AAAA,QACA,mBAAmB,MAAM,MAAM;AAAA,QAC/B,CAAC,MAAM,YAAY,mBAAmB,MAAM,MAAM;AAAA,QAClD;AAAA,UACE,aAAa,MAAM,cAAc;AAAA,UACjC,4BAA4B,MAAM;AAAA,UAClC,mCAAmC,MAAM;AAAA,UACzC,6BAA6B,MAAM;AAAA,QACrC;AAAA,QACA,MAAM;AAAA,MACR;AAAA,MACA,YAAY;AAAA,MACZ,aAAa,MAAM;AAAA,KACpB;AAAA,QACC,CAAC,KAAK,MAAM,OAAO,GAAG;AAAA,UACpB,CAAC,IAAI,MAAM,2BAA2B,OAAO,EAAE,EAA9C,IAAoD;AAAA,QACvD,EAFC,KAEM;AAAA,QACP,CAAC,IAAI,MAAM,yBAAyB,MAAM,SAAS,EAAlD,IAAwD;AAAA,QACzD,CAAC,KAAK,MAAM,OAAO,GAAG;AAAA,UACpB,CAAC,IAAI,MAAM,2BAA2B,OAAO,EAAE,EAA9C,IAAoD;AAAA,QACvD,EAFC,KAEM;AAAA,MACT,EAxBC;AAAA,EA0BL;AAEA,SACE,CAAC,KAAK,MAAM,MAAM,WAAW,UAAU;AAAA,MACrC,CAAC,KAAK,MAAM,MAAM,WAAW,cAAc,UAAU,MAAM,GAAG;AAAA,QAC5D,CAAC,OAAO,OAAQ,WAAW,SAAY,SAAS,OAAgB,MAAM,EAAE,EAAvE,OAAgF;AAAA,MACnF,EAFC,KAEM;AAAA,IACT,EAJC;AAML;AAEA,IAAO,oBAAQ;","names":[],"file":"chatShell.jsx"}

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

@@ -1,10 +1,17 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/chip/chip.entry.less";
-import { Show, mergeProps, splitProps } from "solid-js";
+import { Show, children, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Ripple } from "../../base/ripple";
 import { Icon } from "../../base/icon";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 import { callHandler } from "../../../primitives/callHandler";
+function DeleteIcon(props) {
+  const icon = children(() => props.icon);
+  return <Show when={icon()} fallback={<Icon name="cancel" size={18} fill={1} />}>
+      {icon()}
+    </Show>;
+}
 function Chip(props) {
   const merged = mergeProps(
     {
@@ -36,6 +43,7 @@ function Chip(props) {
     "deleteAriaLabel",
     "ref"
   ]);
+  const icon = children(() => local.icon);
   let rippleActions;
   const onPointerDown = (event) => {
     if (!local.disabled) {
@@ -56,8 +64,8 @@ function Chip(props) {
   );
   const clickable = () => !!local.onClick && !local.disabled;
   const inner = () => <>
-      <Show when={local.icon}>
-        <span class="smwb-chip__icon">{local.icon}</span>
+      <Show when={icon()}>
+        <span class="smwb-chip__icon">{icon()}</span>
       </Show>
       <span class="smwb-chip__label">{local.label}</span>
       <Show when={local.onDelete}>
@@ -69,9 +77,7 @@ function Chip(props) {
     onClick={local.onDelete}
     onMouseDown={onDeleteMouseDown}
   >
-          <Show when={local.deleteIcon} fallback={<Icon name="cancel" size={18} fill={1} />}>
-            {local.deleteIcon}
-          </Show>
+          <DeleteIcon icon={local.deleteIcon} />
         </button>
       </Show>
       <Ripple actionRef={(actions) => rippleActions = actions} />

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/chip/chip.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/chip/chip.entry.less\";\nimport { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type ChipColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ChipProps extends JSX.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {\n  variant?: \"filled\" | \"outlined\";\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  onDelete?: (event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void;\n  icon?: JSX.Element;\n  deleteIcon?: JSX.Element;\n  label: string;\n  onClick?: () => void;\n  onDeleteMouseDown?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;\n  disabled?: boolean;\n  asLink?: boolean;\n  href?: string;\n  /** Open the link in a new tab (asLink only). */\n  target?: string;\n  selected?: boolean;\n  /** Accessible label for the delete control. */\n  deleteAriaLabel?: string;\n  ref?: Ref<HTMLSpanElement | HTMLAnchorElement>;\n}\n\nexport function Chip(props: ChipProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      target: \"_blank\",\n      variant: \"filled\" as const,\n      size: \"medium\" as const,\n      color: \"default\" as ChipColor,\n      disabled: false,\n      deleteAriaLabel: \"Remove\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"class\",\n    \"deleteIcon\",\n    \"icon\",\n    \"onDelete\",\n    \"onDeleteMouseDown\",\n    \"asLink\",\n    \"href\",\n    \"target\",\n    \"selected\",\n    \"variant\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"onClick\",\n    \"deleteAriaLabel\",\n    \"ref\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  const onDeleteMouseDown: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    callHandler(local.onDeleteMouseDown, event);\n    event.stopPropagation();\n  };\n\n  const classes = (): string =>\n    cn(\n      \"smwb-chip\",\n      `smwb-${local.variant}`,\n      `smwb-chip_size-${local.size}`,\n      local.color !== \"default\" && `smwb-chip_color-${local.color}`,\n      local.class,\n      { \"smwb-disabled\": local.disabled, \"smwb-selected\": local.selected }\n    );\n\n  const clickable = (): boolean => !!local.onClick && !local.disabled;\n\n  const inner = (): JSX.Element => (\n    <>\n      <Show when={local.icon}>\n        <span class=\"smwb-chip__icon\">{local.icon}</span>\n      </Show>\n      <span class=\"smwb-chip__label\">{local.label}</span>\n      <Show when={local.onDelete}>\n        <button\n          type=\"button\"\n          class=\"smwb-chip__delete-icon\"\n          aria-label={local.deleteAriaLabel}\n          disabled={local.disabled}\n          onClick={local.onDelete}\n          onMouseDown={onDeleteMouseDown}\n        >\n          <Show when={local.deleteIcon} fallback={<Icon name=\"cancel\" size={18} fill={1} />}>\n            {local.deleteIcon}\n          </Show>\n        </button>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </>\n  );\n\n  return (\n    <Show\n      when={local.asLink && local.href}\n      fallback={\n        <span\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          data-testid=\"chip\"\n          class={classes()}\n          role={clickable() ? \"button\" : undefined}\n          tabindex={clickable() ? 0 : undefined}\n          aria-disabled={local.disabled || undefined}\n          onClick={clickable() ? () => local.onClick?.() : undefined}\n          onKeyDown={\n            clickable()\n              ? (event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault();\n                    local.onClick?.();\n                  }\n                }\n              : undefined\n          }\n          onPointerDown={onPointerDown}\n        >\n          {inner()}\n        </span>\n      }\n    >\n      <a\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        data-testid=\"chip-link\"\n        class={classes()}\n        href={local.href}\n        onPointerDown={onPointerDown}\n        target={local.target}\n        rel=\"noreferrer\"\n      >\n        {inner()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Chip;\n"],"mappings":"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","names":[],"file":"chip.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/chip/chip.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/chip/chip.entry.less\";\nimport { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type ChipColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ChipProps extends JSX.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {\n  variant?: \"filled\" | \"outlined\";\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  onDelete?: (event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void;\n  icon?: JSX.Element;\n  deleteIcon?: JSX.Element;\n  label: string;\n  onClick?: () => void;\n  onDeleteMouseDown?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;\n  disabled?: boolean;\n  asLink?: boolean;\n  href?: string;\n  /** Open the link in a new tab (asLink only). */\n  target?: string;\n  selected?: boolean;\n  /** Accessible label for the delete control. */\n  deleteAriaLabel?: string;\n  ref?: Ref<HTMLSpanElement | HTMLAnchorElement>;\n}\n\n/**\n * The delete control's icon: a custom one or the default. It is read here, only\n * when the control renders — markup created and not rendered has no server node\n * to hydrate against either.\n */\nfunction DeleteIcon(props: { icon: JSX.Element }): JSX.Element {\n  const icon = children(() => props.icon);\n  return (\n    <Show when={icon()} fallback={<Icon name=\"cancel\" size={18} fill={1} />}>\n      {icon()}\n    </Show>\n  );\n}\n\nexport function Chip(props: ChipProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      target: \"_blank\",\n      variant: \"filled\" as const,\n      size: \"medium\" as const,\n      color: \"default\" as ChipColor,\n      disabled: false,\n      deleteAriaLabel: \"Remove\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"class\",\n    \"deleteIcon\",\n    \"icon\",\n    \"onDelete\",\n    \"onDeleteMouseDown\",\n    \"asLink\",\n    \"href\",\n    \"target\",\n    \"selected\",\n    \"variant\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"onClick\",\n    \"deleteAriaLabel\",\n    \"ref\",\n  ]);\n\n  // Read the icon once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for the <Show> test has no server DOM\n  // node to adopt (\"Unable to find DOM nodes for hydration key\").\n  const icon = children(() => local.icon);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  const onDeleteMouseDown: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    callHandler(local.onDeleteMouseDown, event);\n    event.stopPropagation();\n  };\n\n  const classes = (): string =>\n    cn(\n      \"smwb-chip\",\n      `smwb-${local.variant}`,\n      `smwb-chip_size-${local.size}`,\n      local.color !== \"default\" && `smwb-chip_color-${local.color}`,\n      local.class,\n      { \"smwb-disabled\": local.disabled, \"smwb-selected\": local.selected }\n    );\n\n  const clickable = (): boolean => !!local.onClick && !local.disabled;\n\n  const inner = (): JSX.Element => (\n    <>\n      <Show when={icon()}>\n        <span class=\"smwb-chip__icon\">{icon()}</span>\n      </Show>\n      <span class=\"smwb-chip__label\">{local.label}</span>\n      <Show when={local.onDelete}>\n        <button\n          type=\"button\"\n          class=\"smwb-chip__delete-icon\"\n          aria-label={local.deleteAriaLabel}\n          disabled={local.disabled}\n          onClick={local.onDelete}\n          onMouseDown={onDeleteMouseDown}\n        >\n          <DeleteIcon icon={local.deleteIcon} />\n        </button>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </>\n  );\n\n  return (\n    <Show\n      when={local.asLink && local.href}\n      fallback={\n        <span\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          data-testid=\"chip\"\n          class={classes()}\n          role={clickable() ? \"button\" : undefined}\n          tabindex={clickable() ? 0 : undefined}\n          aria-disabled={local.disabled || undefined}\n          onClick={clickable() ? () => local.onClick?.() : undefined}\n          onKeyDown={\n            clickable()\n              ? (event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault();\n                    local.onClick?.();\n                  }\n                }\n              : undefined\n          }\n          onPointerDown={onPointerDown}\n        >\n          {inner()}\n        </span>\n      }\n    >\n      <a\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        data-testid=\"chip-link\"\n        class={classes()}\n        href={local.href}\n        onPointerDown={onPointerDown}\n        target={local.target}\n        rel=\"noreferrer\"\n      >\n        {inner()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Chip;\n"],"mappings":"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","names":[],"file":"chip.jsx"}

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

@@ -1,3 +1,4 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/chipGroup/chipGroup.entry.less";
 import { For, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/chipGroup/chipGroup.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/chipGroup/chipGroup.entry.less\";\nimport { type JSX, For, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Chip, type ChipColor } from \"../chip\";\n\nexport interface ChipGroupOption {\n  value: string;\n  label: string;\n  icon?: JSX.Element;\n  disabled?: boolean;\n}\n\nexport interface ChipGroupProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  options: ChipGroupOption[];\n  /** Selected value (single) or values (when `multiple`). */\n  value?: string | string[];\n  /** Allow more than one selected chip (value becomes a string[]). */\n  multiple?: boolean;\n  onChange?: (value: string | string[]) => void;\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  disabled?: boolean;\n}\n\n/**\n * A multi/single-select toggle group built on `Chip` — the \"chip as a toggle\"\n * loop (selected → filled, else outlined; `role=group`) that apps re-hand-roll\n * for filters / segmented controls. Pass an `options` array and a controlled\n * `value`; `onChange` returns the next value (string, or string[] when multiple).\n */\nexport function ChipGroup(props: ChipGroupProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as const, color: \"primary\" as ChipColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"options\",\n    \"value\",\n    \"multiple\",\n    \"onChange\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"class\",\n  ]);\n\n  const selectedValues = (): string[] => {\n    if (local.value == null) return [];\n    return Array.isArray(local.value) ? local.value : [local.value];\n  };\n  const isSelected = (value: string): boolean => selectedValues().includes(value);\n\n  const toggle = (value: string): void => {\n    if (local.multiple) {\n      const current = selectedValues();\n      const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];\n      local.onChange?.(next);\n    } else {\n      local.onChange?.(value);\n    }\n  };\n\n  return (\n    <div {...rest} role=\"group\" class={cn(\"smwb-chip-group\", local.class)}>\n      <For each={local.options}>\n        {(option) => (\n          <Chip\n            label={option.label}\n            size={local.size}\n            color={local.color}\n            selected={isSelected(option.value)}\n            variant={isSelected(option.value) ? \"filled\" : \"outlined\"}\n            disabled={!!(local.disabled || option.disabled)}\n            onClick={() => toggle(option.value)}\n            {...(option.icon ? { icon: option.icon } : {})}\n          />\n        )}\n      </For>\n    </div>\n  );\n}\n\nexport default ChipGroup;\n"],"mappings":"AAAA,OAAO;AACP,SAAmB,KAAK,YAAY,kBAAkB;AACtD,OAAO,QAAQ;AACf,SAAS,YAA4B;AA2B9B,SAAS,UAAU,OAAoC;AAC5D,QAAM,SAAS,WAAW,EAAE,MAAM,UAAmB,OAAO,UAAuB,GAAG,KAAK;AAC3F,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,iBAAiB,MAAgB;AACrC,QAAI,MAAM,SAAS,KAAM,QAAO,CAAC;AACjC,WAAO,MAAM,QAAQ,MAAM,KAAK,IAAI,MAAM,QAAQ,CAAC,MAAM,KAAK;AAAA,EAChE;AACA,QAAM,aAAa,CAAC,UAA2B,eAAe,EAAE,SAAS,KAAK;AAE9E,QAAM,SAAS,CAAC,UAAwB;AACtC,QAAI,MAAM,UAAU;AAClB,YAAM,UAAU,eAAe;AAC/B,YAAM,OAAO,QAAQ,SAAS,KAAK,IAAI,QAAQ,OAAO,CAAC,MAAM,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,KAAK;AAC9F,YAAM,WAAW,IAAI;AAAA,IACvB,OAAO;AACL,YAAM,WAAW,KAAK;AAAA,IACxB;AAAA,EACF;AAEA,SACE,CAAC,QAAQ,MAAM,KAAK,QAAQ,OAAO,GAAG,mBAAmB,MAAM,KAAK,GAAG;AAAA,MACrE,CAAC,IAAI,MAAM,MAAM,SAAS;AAAA,SACvB,CAAC,WACA,CAAC;AAAA,IACC,OAAO,OAAO;AAAA,IACd,MAAM,MAAM;AAAA,IACZ,OAAO,MAAM;AAAA,IACb,UAAU,WAAW,OAAO,KAAK;AAAA,IACjC,SAAS,WAAW,OAAO,KAAK,IAAI,WAAW;AAAA,IAC/C,UAAU,CAAC,EAAE,MAAM,YAAY,OAAO;AAAA,IACtC,SAAS,MAAM,OAAO,OAAO,KAAK;AAAA,QAC7B,OAAO,OAAO,EAAE,MAAM,OAAO,KAAK,IAAI,CAAC;AAAA,EAC9C,GACA;AAAA,MACJ,EAbC,IAaK;AAAA,IACR,EAfC;AAiBL;AAEA,IAAO,oBAAQ;","names":[],"file":"chipGroup.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/chipGroup/chipGroup.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/chipGroup/chipGroup.entry.less\";\nimport { type JSX, For, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Chip, type ChipColor } from \"../chip\";\n\nexport interface ChipGroupOption {\n  value: string;\n  label: string;\n  icon?: JSX.Element;\n  disabled?: boolean;\n}\n\nexport interface ChipGroupProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  options: ChipGroupOption[];\n  /** Selected value (single) or values (when `multiple`). */\n  value?: string | string[];\n  /** Allow more than one selected chip (value becomes a string[]). */\n  multiple?: boolean;\n  onChange?: (value: string | string[]) => void;\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  disabled?: boolean;\n}\n\n/**\n * A multi/single-select toggle group built on `Chip` — the \"chip as a toggle\"\n * loop (selected → filled, else outlined; `role=group`) that apps re-hand-roll\n * for filters / segmented controls. Pass an `options` array and a controlled\n * `value`; `onChange` returns the next value (string, or string[] when multiple).\n */\nexport function ChipGroup(props: ChipGroupProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as const, color: \"primary\" as ChipColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"options\",\n    \"value\",\n    \"multiple\",\n    \"onChange\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"class\",\n  ]);\n\n  const selectedValues = (): string[] => {\n    if (local.value == null) return [];\n    return Array.isArray(local.value) ? local.value : [local.value];\n  };\n  const isSelected = (value: string): boolean => selectedValues().includes(value);\n\n  const toggle = (value: string): void => {\n    if (local.multiple) {\n      const current = selectedValues();\n      const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];\n      local.onChange?.(next);\n    } else {\n      local.onChange?.(value);\n    }\n  };\n\n  return (\n    <div {...rest} role=\"group\" class={cn(\"smwb-chip-group\", local.class)}>\n      <For each={local.options}>\n        {(option) => (\n          <Chip\n            label={option.label}\n            size={local.size}\n            color={local.color}\n            selected={isSelected(option.value)}\n            variant={isSelected(option.value) ? \"filled\" : \"outlined\"}\n            disabled={!!(local.disabled || option.disabled)}\n            onClick={() => toggle(option.value)}\n            {...(option.icon ? { icon: option.icon } : {})}\n          />\n        )}\n      </For>\n    </div>\n  );\n}\n\nexport default ChipGroup;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,KAAK,YAAY,kBAAkB;AACtD,OAAO,QAAQ;AACf,SAAS,YAA4B;AA2B9B,SAAS,UAAU,OAAoC;AAC5D,QAAM,SAAS,WAAW,EAAE,MAAM,UAAmB,OAAO,UAAuB,GAAG,KAAK;AAC3F,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,iBAAiB,MAAgB;AACrC,QAAI,MAAM,SAAS,KAAM,QAAO,CAAC;AACjC,WAAO,MAAM,QAAQ,MAAM,KAAK,IAAI,MAAM,QAAQ,CAAC,MAAM,KAAK;AAAA,EAChE;AACA,QAAM,aAAa,CAAC,UAA2B,eAAe,EAAE,SAAS,KAAK;AAE9E,QAAM,SAAS,CAAC,UAAwB;AACtC,QAAI,MAAM,UAAU;AAClB,YAAM,UAAU,eAAe;AAC/B,YAAM,OAAO,QAAQ,SAAS,KAAK,IAAI,QAAQ,OAAO,CAAC,MAAM,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,KAAK;AAC9F,YAAM,WAAW,IAAI;AAAA,IACvB,OAAO;AACL,YAAM,WAAW,KAAK;AAAA,IACxB;AAAA,EACF;AAEA,SACE,CAAC,QAAQ,MAAM,KAAK,QAAQ,OAAO,GAAG,mBAAmB,MAAM,KAAK,GAAG;AAAA,MACrE,CAAC,IAAI,MAAM,MAAM,SAAS;AAAA,SACvB,CAAC,WACA,CAAC;AAAA,IACC,OAAO,OAAO;AAAA,IACd,MAAM,MAAM;AAAA,IACZ,OAAO,MAAM;AAAA,IACb,UAAU,WAAW,OAAO,KAAK;AAAA,IACjC,SAAS,WAAW,OAAO,KAAK,IAAI,WAAW;AAAA,IAC/C,UAAU,CAAC,EAAE,MAAM,YAAY,OAAO;AAAA,IACtC,SAAS,MAAM,OAAO,OAAO,KAAK;AAAA,QAC7B,OAAO,OAAO,EAAE,MAAM,OAAO,KAAK,IAAI,CAAC;AAAA,EAC9C,GACA;AAAA,MACJ,EAbC,IAaK;AAAA,IACR,EAfC;AAiBL;AAEA,IAAO,oBAAQ;","names":[],"file":"chipGroup.jsx"}

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

@@ -0,0 +1,44 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
+import "@smwb/ui-styles/less/components/descriptionList/descriptionList.entry.less";
+import { For, createMemo, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function DescriptionItem(props) {
+  const [local, rest] = splitProps(props, ["class", "term", "children", "ref"]);
+  return <div {...rest} ref={mergeRefs(local.ref)} class={cn("smwb-description-list__item", local.class)}>
+      <dt class="smwb-description-list__term">{local.term}</dt>
+      <dd class="smwb-description-list__details">{local.children}</dd>
+    </div>;
+}
+function DescriptionList(props) {
+  const merged = mergeProps({ layout: "auto" }, props);
+  const [local, rest] = splitProps(merged, ["class", "style", "items", "layout", "termWidth", "dense", "children", "ref"]);
+  const items = createMemo(() => local.items ?? []);
+  const style = () => {
+    if (local.termWidth === void 0) return local.style;
+    const width = typeof local.termWidth === "number" ? `${local.termWidth}px` : local.termWidth;
+    if (typeof local.style === "string") return `${local.style};--smwb-description-term:${width}`;
+    return { ...local.style, "--smwb-description-term": width };
+  };
+  return <dl
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn(
+      "smwb-description-list",
+      `smwb-description-list_${local.layout}`,
+      { "smwb-description-list_dense": local.dense },
+      local.class
+    )}
+    style={style()}
+  >
+      <For each={items()}>{(item) => <DescriptionItem term={item.term}>{item.description}</DescriptionItem>}</For>
+      {local.children}
+    </dl>;
+}
+var descriptionList_default = DescriptionList;
+export {
+  DescriptionItem,
+  DescriptionList,
+  descriptionList_default as default
+};
+//# sourceMappingURL=descriptionList.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/dataDisplay/descriptionList/descriptionList.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/descriptionList/descriptionList.entry.less\";\nimport { type JSX, type ParentProps, For, createMemo, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface DescriptionListEntry {\n  term: JSX.Element;\n  description: JSX.Element;\n}\n\n/**\n * `auto`: the term beside its description while the list's container is at\n * least 420px wide, above it when narrower (a container query). `row` and\n * `stacked` fix one layout.\n */\nexport type DescriptionListLayout = \"auto\" | \"row\" | \"stacked\";\n\nexport interface DescriptionListProps extends JSX.HTMLAttributes<HTMLDListElement> {\n  /** The pairs as data; `DescriptionItem` children work too, and come after them. */\n  items?: DescriptionListEntry[];\n  layout?: DescriptionListLayout;\n  /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */\n  termWidth?: number | string;\n  /** Tighter spacing, for side panels. */\n  dense?: boolean;\n  ref?: Ref<HTMLDListElement>;\n}\n\nexport interface DescriptionItemProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** The field's name. */\n  term: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** One pair: the term and, as children, its description. */\nexport function DescriptionItem(props: ParentProps<DescriptionItemProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"term\", \"children\", \"ref\"]);\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-description-list__item\", local.class)}>\n      <dt class=\"smwb-description-list__term\">{local.term}</dt>\n      <dd class=\"smwb-description-list__details\">{local.children}</dd>\n    </div>\n  );\n}\n\n/** Field–value pairs (a `<dl>`): side by side, stacking on a narrow container. */\nexport function DescriptionList(props: ParentProps<DescriptionListProps>): JSX.Element {\n  const merged = mergeProps({ layout: \"auto\" as DescriptionListLayout }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"style\", \"items\", \"layout\", \"termWidth\", \"dense\", \"children\", \"ref\"]);\n\n  // Read the items once: an inline array is re-evaluated on every read, creating\n  // the markup in it again, and during hydration the extra copies have no server\n  // DOM nodes to adopt.\n  const items = createMemo(() => local.items ?? []);\n\n  const style = (): JSX.CSSProperties | string | undefined => {\n    if (local.termWidth === undefined) return local.style;\n    const width = typeof local.termWidth === \"number\" ? `${local.termWidth}px` : local.termWidth;\n    if (typeof local.style === \"string\") return `${local.style};--smwb-description-term:${width}`;\n    return { ...local.style, \"--smwb-description-term\": width };\n  };\n\n  return (\n    <dl\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-description-list\",\n        `smwb-description-list_${local.layout}`,\n        { \"smwb-description-list_dense\": local.dense },\n        local.class\n      )}\n      style={style()}\n    >\n      <For each={items()}>{(item) => <DescriptionItem term={item.term}>{item.description}</DescriptionItem>}</For>\n      {local.children}\n    </dl>\n  );\n}\n\nexport default DescriptionList;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,KAAK,YAAY,YAAY,kBAAkB;AACpF,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAgC7B,SAAS,gBAAgB,OAAuD;AACrF,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,QAAQ,YAAY,KAAK,CAAC;AAC5E,SACE,CAAC,QAAQ,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,OAAO,GAAG,+BAA+B,MAAM,KAAK,GAAG;AAAA,MAC/F,CAAC,GAAG,MAAM,+BAA+B,MAAM,KAAK,EAAnD,GAAwD;AAAA,MACzD,CAAC,GAAG,MAAM,kCAAkC,MAAM,SAAS,EAA1D,GAA+D;AAAA,IAClE,EAHC;AAKL;AAGO,SAAS,gBAAgB,OAAuD;AACrF,QAAM,SAAS,WAAW,EAAE,QAAQ,OAAgC,GAAG,KAAK;AAC5E,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,SAAS,SAAS,SAAS,UAAU,aAAa,SAAS,YAAY,KAAK,CAAC;AAKvH,QAAM,QAAQ,WAAW,MAAM,MAAM,SAAS,CAAC,CAAC;AAEhD,QAAM,QAAQ,MAA8C;AAC1D,QAAI,MAAM,cAAc,OAAW,QAAO,MAAM;AAChD,UAAM,QAAQ,OAAO,MAAM,cAAc,WAAW,GAAG,MAAM,SAAS,OAAO,MAAM;AACnF,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,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,yBAAyB,MAAM,MAAM;AAAA,MACrC,EAAE,+BAA+B,MAAM,MAAM;AAAA,MAC7C,MAAM;AAAA,IACR;AAAA,IACA,OAAO,MAAM;AAAA,GACd;AAAA,MACC,CAAC,IAAI,MAAM,MAAM,IAAI,CAAC,SAAS,CAAC,gBAAgB,MAAM,KAAK,OAAO,KAAK,YAAY,EAAnD,iBAAsE,EAArG,IAA2G;AAAA,OAC3G,MAAM,SAAS;AAAA,IAClB,EAbC;AAeL;AAEA,IAAO,0BAAQ;","names":[],"file":"descriptionList.jsx"}

package/dist/source/components/dataDisplay/descriptionList/index.js

@@ -0,0 +1,7 @@
+import { DescriptionList, DescriptionItem, default as default2 } from "./descriptionList";
+export {
+  DescriptionItem,
+  DescriptionList,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/dataDisplay/descriptionList/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataDisplay/descriptionList/index.ts"],
+  "sourcesContent": ["export { DescriptionList, DescriptionItem, default } from \"./descriptionList\";\nexport type {\n  DescriptionListProps,\n  DescriptionItemProps,\n  DescriptionListEntry,\n  DescriptionListLayout,\n} from \"./descriptionList\";\n"],
+  "mappings": "AAAA,SAAS,iBAAiB,iBAAiB,WAAAA,gBAAe;",
+  "names": ["default"]
+}

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

@@ -1,3 +1,4 @@
+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 { Portal, isServer } from "solid-js/web";

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/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, 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"}

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

@@ -1,3 +1,4 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/imagesList/imagesList.entry.less";
 import { mergeProps, splitProps } from "solid-js";
 import cn from "clsx";

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/imagesList/imagesList.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/imagesList/imagesList.entry.less\";\nimport { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { ImagesListContext } from \"./imagesListContext\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ImagesListProps {\n  class?: string;\n  rowsHeight?: number;\n  cols: number;\n  variant?: \"woven\" | \"masonry\" | \"default\";\n  gap?: number;\n  \"aria-label\"?: string;\n  id?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function ImagesList(props: ParentProps<ImagesListProps>): JSX.Element {\n  const merged = mergeProps({ gap: 4, cols: 3, rowsHeight: 0, variant: \"default\" as const }, props);\n  const [local] = splitProps(merged, [\"class\", \"children\", \"gap\", \"cols\", \"rowsHeight\", \"variant\", \"aria-label\", \"id\", \"ref\"]);\n\n  return (\n    <ImagesListContext.Provider value={{ rowsHeight: local.rowsHeight, variant: local.variant }}>\n      <div class={cn(\"smwb-gallery\", local.class)} data-testid=\"images-list\" ref={mergeRefs(local.ref)} id={local.id}>\n        <ul\n          aria-label={local[\"aria-label\"]}\n          class={cn(\"smwb-gallery__list\", `smwb-${local.variant}`)}\n          style={{ \"--cols-count\": `${local.cols}`, \"--gap\": `${local.gap}px` }}\n        >\n          {local.children}\n        </ul>\n      </div>\n    </ImagesListContext.Provider>\n  );\n}\n\nexport default ImagesList;\n"],"mappings":"AAAA,OAAO;AACP,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,yBAAyB;AAClC,SAAS,iBAA2B;AAa7B,SAAS,WAAW,OAAkD;AAC3E,QAAM,SAAS,WAAW,EAAE,KAAK,GAAG,MAAM,GAAG,YAAY,GAAG,SAAS,UAAmB,GAAG,KAAK;AAChG,QAAM,CAAC,KAAK,IAAI,WAAW,QAAQ,CAAC,SAAS,YAAY,OAAO,QAAQ,cAAc,WAAW,cAAc,MAAM,KAAK,CAAC;AAE3H,SACE,CAAC,kBAAkB,SAAS,OAAO,EAAE,YAAY,MAAM,YAAY,SAAS,MAAM,QAAQ,GAAG;AAAA,MAC3F,CAAC,IAAI,OAAO,GAAG,gBAAgB,MAAM,KAAK,GAAG,YAAY,cAAc,KAAK,UAAU,MAAM,GAAG,GAAG,IAAI,MAAM,IAAI;AAAA,QAC9G,CAAC;AAAA,IACC,YAAY,MAAM,YAAY;AAAA,IAC9B,OAAO,GAAG,sBAAsB,QAAQ,MAAM,OAAO,EAAE;AAAA,IACvD,OAAO,EAAE,gBAAgB,GAAG,MAAM,IAAI,IAAI,SAAS,GAAG,MAAM,GAAG,KAAK;AAAA,GACrE;AAAA,WACE,MAAM,SAAS;AAAA,QAClB,EANC,GAMI;AAAA,MACP,EARC,IAQK;AAAA,IACR,EAVC,kBAAkB;AAYvB;AAEA,IAAO,qBAAQ;","names":[],"file":"imagesList.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/imagesList/imagesList.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/imagesList/imagesList.entry.less\";\nimport { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { ImagesListContext } from \"./imagesListContext\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ImagesListProps {\n  class?: string;\n  rowsHeight?: number;\n  cols: number;\n  variant?: \"woven\" | \"masonry\" | \"default\";\n  gap?: number;\n  \"aria-label\"?: string;\n  id?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function ImagesList(props: ParentProps<ImagesListProps>): JSX.Element {\n  const merged = mergeProps({ gap: 4, cols: 3, rowsHeight: 0, variant: \"default\" as const }, props);\n  const [local] = splitProps(merged, [\"class\", \"children\", \"gap\", \"cols\", \"rowsHeight\", \"variant\", \"aria-label\", \"id\", \"ref\"]);\n\n  return (\n    <ImagesListContext.Provider value={{ rowsHeight: local.rowsHeight, variant: local.variant }}>\n      <div class={cn(\"smwb-gallery\", local.class)} data-testid=\"images-list\" ref={mergeRefs(local.ref)} id={local.id}>\n        <ul\n          aria-label={local[\"aria-label\"]}\n          class={cn(\"smwb-gallery__list\", `smwb-${local.variant}`)}\n          style={{ \"--cols-count\": `${local.cols}`, \"--gap\": `${local.gap}px` }}\n        >\n          {local.children}\n        </ul>\n      </div>\n    </ImagesListContext.Provider>\n  );\n}\n\nexport default ImagesList;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,yBAAyB;AAClC,SAAS,iBAA2B;AAa7B,SAAS,WAAW,OAAkD;AAC3E,QAAM,SAAS,WAAW,EAAE,KAAK,GAAG,MAAM,GAAG,YAAY,GAAG,SAAS,UAAmB,GAAG,KAAK;AAChG,QAAM,CAAC,KAAK,IAAI,WAAW,QAAQ,CAAC,SAAS,YAAY,OAAO,QAAQ,cAAc,WAAW,cAAc,MAAM,KAAK,CAAC;AAE3H,SACE,CAAC,kBAAkB,SAAS,OAAO,EAAE,YAAY,MAAM,YAAY,SAAS,MAAM,QAAQ,GAAG;AAAA,MAC3F,CAAC,IAAI,OAAO,GAAG,gBAAgB,MAAM,KAAK,GAAG,YAAY,cAAc,KAAK,UAAU,MAAM,GAAG,GAAG,IAAI,MAAM,IAAI;AAAA,QAC9G,CAAC;AAAA,IACC,YAAY,MAAM,YAAY;AAAA,IAC9B,OAAO,GAAG,sBAAsB,QAAQ,MAAM,OAAO,EAAE;AAAA,IACvD,OAAO,EAAE,gBAAgB,GAAG,MAAM,IAAI,IAAI,SAAS,GAAG,MAAM,GAAG,KAAK;AAAA,GACrE;AAAA,WACE,MAAM,SAAS;AAAA,QAClB,EANC,GAMI;AAAA,MACP,EARC,IAQK;AAAA,IACR,EAVC,kBAAkB;AAYvB;AAEA,IAAO,qBAAQ;","names":[],"file":"imagesList.jsx"}

package/dist/source/components/dataDisplay/imagesList/imagesListItem/imagesListItem.jsx

@@ -1,5 +1,6 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/imagesList/imagesListItem/imagesListItem.entry.less";
-import { Show, createEffect, createSignal, mergeProps, splitProps } from "solid-js";
+import { Show, children, createEffect, createSignal, mergeProps, onCleanup, splitProps } from "solid-js";
 import cn from "clsx";
 import { ImagesListItemModal } from "./imagesListItemModal";
 import { useImagesListContext } from "../imagesListContext";
@@ -15,10 +16,16 @@ function ImagesListItem(props) {
     "itemBarPlacement",
     "alt"
   ]);
+  const itemBar = children(() => local.itemBarContent);
   const ctx = useImagesListContext();
   const [isOpen, setIsOpen] = createSignal(false);
   createEffect(() => {
-    document.body.style.overflow = isOpen() ? "hidden" : "auto";
+    if (!isOpen()) return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    onCleanup(() => {
+      document.body.style.overflow = previous;
+    });
   });
   const style = () => ({
     height: ctx.rowsHeight ? `${ctx.rowsHeight * local.rows}px` : "",
@@ -36,11 +43,11 @@ function ImagesListItem(props) {
           <div class="smwb-gallery-item__img-wrapper">
             <img src={local.src} alt={local.alt || "image"} class={cn("smwb-gallery-item__img", { "smwb-rounded": local.rounded })} />
           </div>
-          <Show when={local.itemBarContent}>
+          <Show when={itemBar()}>
             <div
     class={cn("smwb-gallery-item__bar", local.class, `smwb-${local.itemBarPlacement}`, { "smwb-rounded": local.rounded })}
   >
-              {local.itemBarContent}
+              {itemBar()}
             </div>
           </Show>
         </div>

package/dist/source/components/dataDisplay/imagesList/imagesListItem/imagesListItem.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItem.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/imagesList/imagesListItem/imagesListItem.entry.less\";\nimport { type JSX, Show, createEffect, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { ImagesListItemModal } from \"./imagesListItemModal\";\nimport { useImagesListContext } from \"../imagesListContext\";\n\nexport interface ImagesListItemProps {\n  class?: string;\n  src: string;\n  rowsHeight?: number;\n  cols: number;\n  rows: number;\n  rounded?: boolean;\n  itemBarPlacement?: \"top\" | \"bottom\" | \"under\";\n  itemBarContent?: JSX.Element;\n  alt?: string;\n}\n\nexport function ImagesListItem(props: ImagesListItemProps): JSX.Element {\n  const merged = mergeProps({ cols: 1, rows: 1, itemBarPlacement: \"bottom\" as const, alt: \"image\" }, props);\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"src\",\n    \"rounded\",\n    \"itemBarContent\",\n    \"cols\",\n    \"rows\",\n    \"itemBarPlacement\",\n    \"alt\",\n  ]);\n\n  const ctx = useImagesListContext();\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  createEffect(() => {\n    document.body.style.overflow = isOpen() ? \"hidden\" : \"auto\";\n  });\n\n  const style = (): JSX.CSSProperties => ({\n    height: ctx.rowsHeight ? `${ctx.rowsHeight * local.rows}px` : \"\",\n    \"grid-row-end\": `span ${local.rows}`,\n    \"grid-column-end\": `span ${local.cols}`,\n  });\n\n  return (\n    <>\n      <li\n        data-testid=\"images-list-item\"\n        class={cn(\"smwb-gallery__list__item\", local.class, \"smwb-gallery-item\", `smwb-${ctx.variant}`)}\n        onClick={() => setIsOpen(true)}\n        style={style()}\n      >\n        <div class=\"smwb-gallery-item__inner\">\n          <div class=\"smwb-gallery-item__img-wrapper\">\n            <img src={local.src} alt={local.alt || \"image\"} class={cn(\"smwb-gallery-item__img\", { \"smwb-rounded\": local.rounded })} />\n          </div>\n          <Show when={local.itemBarContent}>\n            <div\n              class={cn(\"smwb-gallery-item__bar\", local.class, `smwb-${local.itemBarPlacement}`, { \"smwb-rounded\": local.rounded })}\n            >\n              {local.itemBarContent}\n            </div>\n          </Show>\n        </div>\n      </li>\n      <ImagesListItemModal src={local.src} onClose={() => setIsOpen(false)} isOpen={isOpen()} />\n    </>\n  );\n}\n\nexport default ImagesListItem;\n"],"mappings":"AAAA,OAAO;AACP,SAAmB,MAAM,cAAc,cAAc,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AAc9B,SAAS,eAAe,OAAyC;AACtE,QAAM,SAAS,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,kBAAkB,UAAmB,KAAK,QAAQ,GAAG,KAAK;AACxG,QAAM,CAAC,KAAK,IAAI,WAAW,QAAQ;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,MAAM,qBAAqB;AACjC,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAa,KAAK;AAE9C,eAAa,MAAM;AACjB,aAAS,KAAK,MAAM,WAAW,OAAO,IAAI,WAAW;AAAA,EACvD,CAAC;AAED,QAAM,QAAQ,OAA0B;AAAA,IACtC,QAAQ,IAAI,aAAa,GAAG,IAAI,aAAa,MAAM,IAAI,OAAO;AAAA,IAC9D,gBAAgB,QAAQ,MAAM,IAAI;AAAA,IAClC,mBAAmB,QAAQ,MAAM,IAAI;AAAA,EACvC;AAEA,SACE,EAAE;AAAA,MACA,CAAC;AAAA,IACC,YAAY;AAAA,IACZ,OAAO,GAAG,4BAA4B,MAAM,OAAO,qBAAqB,QAAQ,IAAI,OAAO,EAAE;AAAA,IAC7F,SAAS,MAAM,UAAU,IAAI;AAAA,IAC7B,OAAO,MAAM;AAAA,GACd;AAAA,QACC,CAAC,IAAI,MAAM,2BAA2B;AAAA,UACpC,CAAC,IAAI,MAAM,iCAAiC;AAAA,YAC1C,CAAC,IAAI,KAAK,MAAM,KAAK,KAAK,MAAM,OAAO,SAAS,OAAO,GAAG,0BAA0B,EAAE,gBAAgB,MAAM,QAAQ,CAAC,GAAG,EAAE;AAAA,UAC5H,EAFC,IAEK;AAAA,UACN,CAAC,KAAK,MAAM,MAAM,gBAAgB;AAAA,YAChC,CAAC;AAAA,IACC,OAAO,GAAG,0BAA0B,MAAM,OAAO,QAAQ,MAAM,gBAAgB,IAAI,EAAE,gBAAgB,MAAM,QAAQ,CAAC;AAAA,GACrH;AAAA,eACE,MAAM,eAAe;AAAA,YACxB,EAJC,IAIK;AAAA,UACR,EANC,KAMM;AAAA,QACT,EAXC,IAWK;AAAA,MACR,EAlBC,GAkBI;AAAA,MACL,CAAC,oBAAoB,KAAK,MAAM,KAAK,SAAS,MAAM,UAAU,KAAK,GAAG,QAAQ,OAAO,GAAG,EAAE;AAAA,IAC5F;AAEJ;AAEA,IAAO,yBAAQ;","names":[],"file":"imagesListItem.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItem.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/imagesList/imagesListItem/imagesListItem.entry.less\";\nimport { type JSX, Show, children, createEffect, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { ImagesListItemModal } from \"./imagesListItemModal\";\nimport { useImagesListContext } from \"../imagesListContext\";\n\nexport interface ImagesListItemProps {\n  class?: string;\n  src: string;\n  rowsHeight?: number;\n  cols: number;\n  rows: number;\n  rounded?: boolean;\n  itemBarPlacement?: \"top\" | \"bottom\" | \"under\";\n  itemBarContent?: JSX.Element;\n  alt?: string;\n}\n\nexport function ImagesListItem(props: ImagesListItemProps): JSX.Element {\n  const merged = mergeProps({ cols: 1, rows: 1, itemBarPlacement: \"bottom\" as const, alt: \"image\" }, props);\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"src\",\n    \"rounded\",\n    \"itemBarContent\",\n    \"cols\",\n    \"rows\",\n    \"itemBarPlacement\",\n    \"alt\",\n  ]);\n  // Read once: markup passed as a prop is created anew on every read, and\n  // during hydration a copy the server never rendered has no DOM node.\n  const itemBar = children(() => local.itemBarContent);\n\n  const ctx = useImagesListContext();\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  // Lock the page's scroll while the viewer is open, and give it back as it was.\n  // (Every item used to set it to \"auto\" when it mounted, undoing another lock.)\n  createEffect(() => {\n    if (!isOpen()) return;\n    const previous = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    onCleanup(() => {\n      document.body.style.overflow = previous;\n    });\n  });\n\n  const style = (): JSX.CSSProperties => ({\n    height: ctx.rowsHeight ? `${ctx.rowsHeight * local.rows}px` : \"\",\n    \"grid-row-end\": `span ${local.rows}`,\n    \"grid-column-end\": `span ${local.cols}`,\n  });\n\n  return (\n    <>\n      <li\n        data-testid=\"images-list-item\"\n        class={cn(\"smwb-gallery__list__item\", local.class, \"smwb-gallery-item\", `smwb-${ctx.variant}`)}\n        onClick={() => setIsOpen(true)}\n        style={style()}\n      >\n        <div class=\"smwb-gallery-item__inner\">\n          <div class=\"smwb-gallery-item__img-wrapper\">\n            <img src={local.src} alt={local.alt || \"image\"} class={cn(\"smwb-gallery-item__img\", { \"smwb-rounded\": local.rounded })} />\n          </div>\n          <Show when={itemBar()}>\n            <div\n              class={cn(\"smwb-gallery-item__bar\", local.class, `smwb-${local.itemBarPlacement}`, { \"smwb-rounded\": local.rounded })}\n            >\n              {itemBar()}\n            </div>\n          </Show>\n        </div>\n      </li>\n      <ImagesListItemModal src={local.src} onClose={() => setIsOpen(false)} isOpen={isOpen()} />\n    </>\n  );\n}\n\nexport default ImagesListItem;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,UAAU,cAAc,cAAc,YAAY,WAAW,kBAAkB;AACxG,OAAO,QAAQ;AACf,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AAc9B,SAAS,eAAe,OAAyC;AACtE,QAAM,SAAS,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,kBAAkB,UAAmB,KAAK,QAAQ,GAAG,KAAK;AACxG,QAAM,CAAC,KAAK,IAAI,WAAW,QAAQ;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,QAAM,UAAU,SAAS,MAAM,MAAM,cAAc;AAEnD,QAAM,MAAM,qBAAqB;AACjC,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAa,KAAK;AAI9C,eAAa,MAAM;AACjB,QAAI,CAAC,OAAO,EAAG;AACf,UAAM,WAAW,SAAS,KAAK,MAAM;AACrC,aAAS,KAAK,MAAM,WAAW;AAC/B,cAAU,MAAM;AACd,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC,CAAC;AAAA,EACH,CAAC;AAED,QAAM,QAAQ,OAA0B;AAAA,IACtC,QAAQ,IAAI,aAAa,GAAG,IAAI,aAAa,MAAM,IAAI,OAAO;AAAA,IAC9D,gBAAgB,QAAQ,MAAM,IAAI;AAAA,IAClC,mBAAmB,QAAQ,MAAM,IAAI;AAAA,EACvC;AAEA,SACE,EAAE;AAAA,MACA,CAAC;AAAA,IACC,YAAY;AAAA,IACZ,OAAO,GAAG,4BAA4B,MAAM,OAAO,qBAAqB,QAAQ,IAAI,OAAO,EAAE;AAAA,IAC7F,SAAS,MAAM,UAAU,IAAI;AAAA,IAC7B,OAAO,MAAM;AAAA,GACd;AAAA,QACC,CAAC,IAAI,MAAM,2BAA2B;AAAA,UACpC,CAAC,IAAI,MAAM,iCAAiC;AAAA,YAC1C,CAAC,IAAI,KAAK,MAAM,KAAK,KAAK,MAAM,OAAO,SAAS,OAAO,GAAG,0BAA0B,EAAE,gBAAgB,MAAM,QAAQ,CAAC,GAAG,EAAE;AAAA,UAC5H,EAFC,IAEK;AAAA,UACN,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,YACrB,CAAC;AAAA,IACC,OAAO,GAAG,0BAA0B,MAAM,OAAO,QAAQ,MAAM,gBAAgB,IAAI,EAAE,gBAAgB,MAAM,QAAQ,CAAC;AAAA,GACrH;AAAA,eACE,QAAQ,EAAE;AAAA,YACb,EAJC,IAIK;AAAA,UACR,EANC,KAMM;AAAA,QACT,EAXC,IAWK;AAAA,MACR,EAlBC,GAkBI;AAAA,MACL,CAAC,oBAAoB,KAAK,MAAM,KAAK,SAAS,MAAM,UAAU,KAAK,GAAG,QAAQ,OAAO,GAAG,EAAE;AAAA,IAC5F;AAEJ;AAEA,IAAO,yBAAQ;","names":[],"file":"imagesListItem.jsx"}

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

@@ -0,0 +1,8 @@
+import { Kanban, KanbanColumn, KanbanCard, default as default2 } from "./kanban";
+export {
+  Kanban,
+  KanbanCard,
+  KanbanColumn,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/dataDisplay/kanban/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataDisplay/kanban/index.ts"],
+  "sourcesContent": ["export { Kanban, KanbanColumn, KanbanCard, default } from \"./kanban\";\nexport type { KanbanProps, KanbanColumnProps, KanbanCardProps } from \"./kanban\";\n"],
+  "mappings": "AAAA,SAAS,QAAQ,cAAc,YAAY,WAAAA,gBAAe;",
+  "names": ["default"]
+}