@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/headless/source/components/dataDisplay/chat/chatComposer.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chatComposer.tsx"],"sourcesContent":["import { type JSX, Show, createSignal, mergeProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { TextField } from \"../../inputs/textField\";\nimport { TextFieldWrapper } from \"../../inputs/textField/textFieldWrapper\";\nimport { ChatIconButton } from \"./chatIconButton\";\nimport { createId } from \"../../../primitives/createId\";\nimport { shouldComposerNewlineOnEnter } from \"./utils\";\n\nexport interface ChatComposerProps {\n  class?: string | undefined;\n  onSendMessage?: ((text: string) => void | Promise<void>) | undefined;\n  placeholder?: string | undefined;\n  disabled?: boolean | undefined;\n  sendAriaLabel?: string | undefined;\n  shiftEnterNewline?: boolean | undefined;\n  ctrlEnterNewline?: boolean | undefined;\n  fileUpload?: boolean | undefined;\n  attachInputId?: string | undefined;\n  onAttachClick?: (() => void) | undefined;\n  attachAriaLabel?: string | undefined;\n}\n\nfunction stopPropagation(event: Event): void {\n  event.stopPropagation();\n}\n\nfunction insertNewlineAtCursor(element: HTMLTextAreaElement, value: string, setValue: (next: string) => void): void {\n  const start = element.selectionStart ?? value.length;\n  const end = element.selectionEnd ?? value.length;\n  const nextValue = `${value.slice(0, start)}\\n${value.slice(end)}`;\n\n  setValue(nextValue);\n\n  requestAnimationFrame(() => {\n    element.selectionStart = start + 1;\n    element.selectionEnd = start + 1;\n  });\n}\n\nexport function ChatComposer(props: ChatComposerProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      placeholder: \"message\",\n      disabled: false,\n      sendAriaLabel: \"Send message\",\n      shiftEnterNewline: true,\n      ctrlEnterNewline: true,\n      fileUpload: false,\n      attachAriaLabel: \"Attach file\",\n    },\n    props\n  );\n\n  const [value, setValue] = createSignal(\"\");\n  const [isFocused, setIsFocused] = createSignal(false);\n  const inputId = createId();\n  let textareaRef: HTMLTextAreaElement | undefined;\n\n  const multiline = (): boolean => merged.shiftEnterNewline || merged.ctrlEnterNewline;\n  const canSend = (): boolean => Boolean(merged.onSendMessage) && value().trim().length > 0 && !merged.disabled;\n  const showAttach = (): boolean => merged.fileUpload && Boolean(merged.attachInputId || merged.onAttachClick);\n\n  const handleSend = (): void => {\n    if (!merged.onSendMessage) return;\n    const text = value().trim();\n    if (!text || merged.disabled) return;\n    void merged.onSendMessage(text);\n    setValue(\"\");\n  };\n\n  const handleKeyDown = (event: KeyboardEvent & { currentTarget: HTMLElement }): void => {\n    if (shouldComposerNewlineOnEnter(event, { shiftEnterNewline: merged.shiftEnterNewline, ctrlEnterNewline: merged.ctrlEnterNewline })) {\n      if (event.currentTarget instanceof HTMLTextAreaElement) {\n        event.preventDefault();\n        insertNewlineAtCursor(event.currentTarget, value(), setValue);\n      }\n      return;\n    }\n\n    if (event.key !== \"Enter\") return;\n\n    event.preventDefault();\n    handleSend();\n  };\n\n  const attachClass = (): string =>\n    cn(\"smwb-chat-icon-button\", \"smwb-chat-icon-button_edge-start\", merged.disabled && \"smwb-chat-icon-button_disabled\");\n\n  const attachButton = (): JSX.Element => (\n    <Show when={showAttach()}>\n      <Show\n        when={merged.attachInputId}\n        fallback={\n          <ChatIconButton\n            edge=\"start\"\n            aria-label={merged.attachAriaLabel}\n            data-testid=\"chat-composer-attach\"\n            disabled={merged.disabled}\n            onClick={() => merged.onAttachClick?.()}\n            onMouseDown={stopPropagation}\n          >\n            <Icon name=\"attach_file\" size={24} />\n          </ChatIconButton>\n        }\n      >\n        {(id) => (\n          <label\n            for={merged.disabled ? undefined : id()}\n            class={attachClass()}\n            aria-label={merged.attachAriaLabel}\n            aria-disabled={merged.disabled || undefined}\n            data-testid=\"chat-composer-attach\"\n            onMouseDown={stopPropagation}\n          >\n            <Icon name=\"attach_file\" size={24} />\n          </label>\n        )}\n      </Show>\n    </Show>\n  );\n\n  const sendButton = (): JSX.Element => (\n    <Show when={merged.onSendMessage}>\n      <ChatIconButton\n        edge=\"end\"\n        color=\"primary\"\n        aria-label={merged.sendAriaLabel}\n        data-testid=\"chat-composer-send\"\n        disabled={!canSend()}\n        onClick={handleSend}\n        onMouseDown={stopPropagation}\n      >\n        <Icon name=\"send\" size={24} />\n      </ChatIconButton>\n    </Show>\n  );\n\n  const onHolderMouseDown: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (textareaRef && event.currentTarget === event.target) {\n      event.preventDefault();\n      textareaRef.focus();\n    }\n  };\n\n  return (\n    <Show\n      when={!(showAttach() && !merged.onSendMessage)}\n      fallback={\n        <div class={cn(\"smwb-chat-composer\", \"smwb-chat-composer_attach-only\", merged.class)} data-testid=\"chat-composer\">\n          {attachButton()}\n        </div>\n      }\n    >\n      <Show\n        when={multiline()}\n        fallback={\n          <TextField\n            class={cn(\"smwb-chat-composer\", merged.class)}\n            data-testid=\"chat-composer\"\n            fullWidth\n            value={value()}\n            disabled={merged.disabled}\n            placeholder={merged.placeholder}\n            onChange={(event) => setValue(event.currentTarget.value)}\n            startAdornment={attachButton()}\n            endAdornment={sendButton()}\n            onKeyDown={handleKeyDown}\n          />\n        }\n      >\n        <TextFieldWrapper\n          class={cn(\"smwb-chat-composer\", merged.class)}\n          data-testid=\"chat-composer\"\n          fullWidth\n          disabled={merged.disabled}\n          isFilledState={value().length > 0}\n          isFocused={isFocused()}\n          for={inputId}\n          shrink={Boolean(merged.attachInputId || merged.onAttachClick) && showAttach()}\n          onHolderMouseDown={onHolderMouseDown}\n          startAdornment={attachButton()}\n          endAdornment={sendButton()}\n        >\n          <textarea\n            id={inputId}\n            ref={(el) => (textareaRef = el)}\n            class={cn(\n              \"smwb-text-field__input\",\n              \"smwb-chat-composer__input\",\n              \"smwb-text-field__input--show-placeholder\",\n              showAttach() && \"smwb-text-field__input--adornment-start\",\n              merged.onSendMessage && \"smwb-text-field__input--adornment-end\"\n            )}\n            value={value()}\n            disabled={merged.disabled}\n            placeholder={merged.placeholder}\n            rows={1}\n            onInput={(event) => setValue(event.currentTarget.value)}\n            onFocus={() => setIsFocused(true)}\n            onBlur={() => setIsFocused(false)}\n            onKeyDown={handleKeyDown}\n          />\n        </TextFieldWrapper>\n      </Show>\n    </Show>\n  );\n}\n\nexport default ChatComposer;\n"],"mappings":"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","names":[],"file":"chatComposer.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chatComposer.tsx"],"sourcesContent":["import { type JSX, Show, createSignal, mergeProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { TextField } from \"../../inputs/textField\";\nimport { TextFieldWrapper } from \"../../inputs/textField/textFieldWrapper\";\nimport { ChatIconButton } from \"./chatIconButton\";\nimport { createId } from \"../../../primitives/createId\";\nimport { shouldComposerNewlineOnEnter } from \"./utils\";\n\n/**\n * Deprecated: the props of the old chat input. Use `ComposerProps` — `Chat` now draws a `Composer` as its footer,\n * and the standalone `Composer` replaces these props (`onSendMessage` → `onSend`, `sendAriaLabel` → `sendLabel`,\n * `attachAriaLabel` → `attachLabel`, `fileUpload` + `attachInputId`/`onAttachClick` → `onAttach`,\n * `shiftEnterNewline` → `sendKey=\"enter\"`; `ctrlEnterNewline` has no equivalent — Ctrl/⌘+Enter always sends).\n * Removed in the next major.\n *\n * @deprecated Use `Composer` (`ComposerProps`); see the README section \"Migrating from ChatComposer\".\n */\nexport interface ChatComposerProps {\n  class?: string | undefined;\n  onSendMessage?: ((text: string) => void | Promise<void>) | undefined;\n  placeholder?: string | undefined;\n  disabled?: boolean | undefined;\n  sendAriaLabel?: string | undefined;\n  shiftEnterNewline?: boolean | undefined;\n  ctrlEnterNewline?: boolean | undefined;\n  fileUpload?: boolean | undefined;\n  attachInputId?: string | undefined;\n  onAttachClick?: (() => void) | undefined;\n  attachAriaLabel?: string | undefined;\n}\n\nfunction stopPropagation(event: Event): void {\n  event.stopPropagation();\n}\n\nfunction insertNewlineAtCursor(element: HTMLTextAreaElement, value: string, setValue: (next: string) => void): void {\n  const start = element.selectionStart ?? value.length;\n  const end = element.selectionEnd ?? value.length;\n  const nextValue = `${value.slice(0, start)}\\n${value.slice(end)}`;\n\n  setValue(nextValue);\n\n  requestAnimationFrame(() => {\n    element.selectionStart = start + 1;\n    element.selectionEnd = start + 1;\n  });\n}\n\n/**\n * Deprecated: the old chat input — Enter sends, a TextField-based DOM and the `chat-composer*` test ids.\n * `Chat` draws a `Composer` as its footer now, and the standalone `Composer` replaces this component\n * (`onSendMessage` → `onSend`, Enter-to-send → `sendKey=\"enter\"`). Kept for the migration and removed in the\n * next major; to keep this markup inside a Chat while migrating, pass `legacyComposer` to `Chat`.\n *\n * @deprecated Use `Composer`; see the README section \"Migrating from ChatComposer\".\n */\nexport function ChatComposer(props: ChatComposerProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      placeholder: \"message\",\n      disabled: false,\n      sendAriaLabel: \"Send message\",\n      shiftEnterNewline: true,\n      ctrlEnterNewline: true,\n      fileUpload: false,\n      attachAriaLabel: \"Attach file\",\n    },\n    props\n  );\n\n  const [value, setValue] = createSignal(\"\");\n  const [isFocused, setIsFocused] = createSignal(false);\n  const inputId = createId();\n  let textareaRef: HTMLTextAreaElement | undefined;\n\n  const multiline = (): boolean => merged.shiftEnterNewline || merged.ctrlEnterNewline;\n  const canSend = (): boolean => Boolean(merged.onSendMessage) && value().trim().length > 0 && !merged.disabled;\n  const showAttach = (): boolean => merged.fileUpload && Boolean(merged.attachInputId || merged.onAttachClick);\n\n  const handleSend = (): void => {\n    if (!merged.onSendMessage) return;\n    const text = value().trim();\n    if (!text || merged.disabled) return;\n    void merged.onSendMessage(text);\n    setValue(\"\");\n  };\n\n  const handleKeyDown = (event: KeyboardEvent & { currentTarget: HTMLElement }): void => {\n    // Enter that commits or cancels an IME composition belongs to the IME, not to the composer.\n    if (event.isComposing || event.keyCode === 229) return;\n\n    if (shouldComposerNewlineOnEnter(event, { shiftEnterNewline: merged.shiftEnterNewline, ctrlEnterNewline: merged.ctrlEnterNewline })) {\n      if (event.currentTarget instanceof HTMLTextAreaElement) {\n        event.preventDefault();\n        insertNewlineAtCursor(event.currentTarget, value(), setValue);\n      }\n      return;\n    }\n\n    if (event.key !== \"Enter\") return;\n\n    event.preventDefault();\n    handleSend();\n  };\n\n  const attachClass = (): string =>\n    cn(\"smwb-chat-icon-button\", \"smwb-chat-icon-button_edge-start\", merged.disabled && \"smwb-chat-icon-button_disabled\");\n\n  const attachButton = (): JSX.Element => (\n    <Show when={showAttach()}>\n      <Show\n        when={merged.attachInputId}\n        fallback={\n          <ChatIconButton\n            edge=\"start\"\n            aria-label={merged.attachAriaLabel}\n            data-testid=\"chat-composer-attach\"\n            disabled={merged.disabled}\n            onClick={() => merged.onAttachClick?.()}\n            onMouseDown={stopPropagation}\n          >\n            <Icon name=\"attach_file\" size={24} />\n          </ChatIconButton>\n        }\n      >\n        {(id) => (\n          <label\n            for={merged.disabled ? undefined : id()}\n            class={attachClass()}\n            aria-label={merged.attachAriaLabel}\n            aria-disabled={merged.disabled || undefined}\n            data-testid=\"chat-composer-attach\"\n            onMouseDown={stopPropagation}\n          >\n            <Icon name=\"attach_file\" size={24} />\n          </label>\n        )}\n      </Show>\n    </Show>\n  );\n\n  const sendButton = (): JSX.Element => (\n    <Show when={merged.onSendMessage}>\n      <ChatIconButton\n        edge=\"end\"\n        color=\"primary\"\n        aria-label={merged.sendAriaLabel}\n        data-testid=\"chat-composer-send\"\n        disabled={!canSend()}\n        onClick={handleSend}\n        onMouseDown={stopPropagation}\n      >\n        <Icon name=\"send\" size={24} />\n      </ChatIconButton>\n    </Show>\n  );\n\n  const onHolderMouseDown: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (textareaRef && event.currentTarget === event.target) {\n      event.preventDefault();\n      textareaRef.focus();\n    }\n  };\n\n  return (\n    <Show\n      when={!(showAttach() && !merged.onSendMessage)}\n      fallback={\n        <div class={cn(\"smwb-chat-composer\", \"smwb-chat-composer_attach-only\", merged.class)} data-testid=\"chat-composer\">\n          {attachButton()}\n        </div>\n      }\n    >\n      <Show\n        when={multiline()}\n        fallback={\n          <TextField\n            class={cn(\"smwb-chat-composer\", merged.class)}\n            data-testid=\"chat-composer\"\n            fullWidth\n            value={value()}\n            disabled={merged.disabled}\n            placeholder={merged.placeholder}\n            onChange={(event) => setValue(event.currentTarget.value)}\n            startAdornment={attachButton()}\n            endAdornment={sendButton()}\n            onKeyDown={handleKeyDown}\n          />\n        }\n      >\n        <TextFieldWrapper\n          class={cn(\"smwb-chat-composer\", merged.class)}\n          data-testid=\"chat-composer\"\n          fullWidth\n          disabled={merged.disabled}\n          isFilledState={value().length > 0}\n          isFocused={isFocused()}\n          for={inputId}\n          shrink={Boolean(merged.attachInputId || merged.onAttachClick) && showAttach()}\n          onHolderMouseDown={onHolderMouseDown}\n          startAdornment={attachButton()}\n          endAdornment={sendButton()}\n        >\n          <textarea\n            id={inputId}\n            ref={(el) => (textareaRef = el)}\n            class={cn(\n              \"smwb-text-field__input\",\n              \"smwb-chat-composer__input\",\n              \"smwb-text-field__input--show-placeholder\",\n              showAttach() && \"smwb-text-field__input--adornment-start\",\n              merged.onSendMessage && \"smwb-text-field__input--adornment-end\"\n            )}\n            value={value()}\n            disabled={merged.disabled}\n            placeholder={merged.placeholder}\n            rows={1}\n            onInput={(event) => setValue(event.currentTarget.value)}\n            onFocus={() => setIsFocused(true)}\n            onBlur={() => setIsFocused(false)}\n            onKeyDown={handleKeyDown}\n          />\n        </TextFieldWrapper>\n      </Show>\n    </Show>\n  );\n}\n\nexport default ChatComposer;\n"],"mappings":"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","names":[],"file":"chatComposer.jsx"}

package/dist/headless/source/components/dataDisplay/chat/chatIconButton.jsx

@@ -2,17 +2,27 @@ import { Show, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Ripple } from "../../base/ripple";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { callHandler } from "../../../primitives/callHandler";
 function ChatIconButton(props) {
-  const merged = mergeProps({ color: "default" }, props);
-  const [local, rest] = splitProps(merged, ["class", "children", "disabled", "edge", "color", "ref"]);
+  const merged = mergeProps({ color: "default", type: "button" }, props);
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "children",
+    "disabled",
+    "edge",
+    "color",
+    "ref",
+    // The button sets this on its root too; its own handler calls the caller's first.
+    "onPointerDown"
+  ]);
   let rippleActions;
   const onPointerDown = (event) => {
+    callHandler(local.onPointerDown, event);
     if (!local.disabled) rippleActions?.onRipple(event);
   };
   return <button
     {...rest}
     ref={mergeRefs(local.ref)}
-    type="button"
     class={cn(
       "smwb-chat-icon-button",
       local.edge === "start" && "smwb-chat-icon-button_edge-start",

package/dist/headless/source/components/dataDisplay/chat/chatIconButton.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chatIconButton.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ChatIconButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  edge?: \"start\" | \"end\" | undefined;\n  color?: \"default\" | \"primary\" | undefined;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function ChatIconButton(props: ParentProps<ChatIconButtonProps>): JSX.Element {\n  const merged = mergeProps({ color: \"default\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"children\", \"disabled\", \"edge\", \"color\", \"ref\"]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) rippleActions?.onRipple(event);\n  };\n\n  return (\n    <button\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      type=\"button\"\n      class={cn(\n        \"smwb-chat-icon-button\",\n        local.edge === \"start\" && \"smwb-chat-icon-button_edge-start\",\n        local.edge === \"end\" && \"smwb-chat-icon-button_edge-end\",\n        local.color === \"primary\" && \"smwb-chat-icon-button_primary\",\n        local.disabled && \"smwb-chat-icon-button_disabled\",\n        local.class\n      )}\n      disabled={local.disabled}\n      onPointerDown={onPointerDown}\n    >\n      {local.children}\n      <Show when={!local.disabled}>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} center />\n      </Show>\n    </button>\n  );\n}\n\nexport default ChatIconButton;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,iBAA2B;AAQ7B,SAAS,eAAe,OAAsD;AACnF,QAAM,SAAS,WAAW,EAAE,OAAO,UAAmB,GAAG,KAAK;AAC9D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,SAAS,YAAY,YAAY,QAAQ,SAAS,KAAK,CAAC;AAElG,MAAI;AAEJ,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,EACpD;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,KAAK;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,MAAM,SAAS,WAAW;AAAA,MAC1B,MAAM,SAAS,SAAS;AAAA,MACxB,MAAM,UAAU,aAAa;AAAA,MAC7B,MAAM,YAAY;AAAA,MAClB,MAAM;AAAA,IACR;AAAA,IACA,UAAU,MAAM;AAAA,IAChB,eAAe;AAAA,GAChB;AAAA,OACE,MAAM,SAAS;AAAA,MAChB,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU;AAAA,QAC3B,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,OAAO,EAAE;AAAA,MACtE,EAFC,KAEM;AAAA,IACT,EAnBC;AAqBL;AAEA,IAAO,yBAAQ;","names":[],"file":"chatIconButton.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chatIconButton.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface ChatIconButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  edge?: \"start\" | \"end\" | undefined;\n  color?: \"default\" | \"primary\" | undefined;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function ChatIconButton(props: ParentProps<ChatIconButtonProps>): JSX.Element {\n  // `type` is a default: the caller's wins.\n  const merged = mergeProps({ color: \"default\" as const, type: \"button\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"disabled\",\n    \"edge\",\n    \"color\",\n    \"ref\",\n    // The button sets this on its root too; its own handler calls the caller's first.\n    \"onPointerDown\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    if (!local.disabled) rippleActions?.onRipple(event);\n  };\n\n  return (\n    <button\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-chat-icon-button\",\n        local.edge === \"start\" && \"smwb-chat-icon-button_edge-start\",\n        local.edge === \"end\" && \"smwb-chat-icon-button_edge-end\",\n        local.color === \"primary\" && \"smwb-chat-icon-button_primary\",\n        local.disabled && \"smwb-chat-icon-button_disabled\",\n        local.class\n      )}\n      disabled={local.disabled}\n      onPointerDown={onPointerDown}\n    >\n      {local.children}\n      <Show when={!local.disabled}>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} center />\n      </Show>\n    </button>\n  );\n}\n\nexport default ChatIconButton;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAQrB,SAAS,eAAe,OAAsD;AAEnF,QAAM,SAAS,WAAW,EAAE,OAAO,WAAoB,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;AAAA,IAEA;AAAA,EACF,CAAC;AAED,MAAI;AAEJ,QAAM,gBAAmE,CAAC,UAAU;AAClF,gBAAY,MAAM,eAAe,KAAK;AACtC,QAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,EACpD;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,MAAM,SAAS,WAAW;AAAA,MAC1B,MAAM,SAAS,SAAS;AAAA,MACxB,MAAM,UAAU,aAAa;AAAA,MAC7B,MAAM,YAAY;AAAA,MAClB,MAAM;AAAA,IACR;AAAA,IACA,UAAU,MAAM;AAAA,IAChB,eAAe;AAAA,GAChB;AAAA,OACE,MAAM,SAAS;AAAA,MAChB,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU;AAAA,QAC3B,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,OAAO,EAAE;AAAA,MACtE,EAFC,KAEM;AAAA,IACT,EAlBC;AAoBL;AAEA,IAAO,yBAAQ;","names":[],"file":"chatIconButton.jsx"}

package/dist/headless/source/components/dataDisplay/chat/chatLayout.jsx

@@ -3,6 +3,7 @@ import cn from "clsx";
 import { Icon } from "../../base/icon";
 import { ChatIconButton } from "./chatIconButton";
 import { createControllableState } from "../../../primitives/createControllableState";
+import { mergeStyle } from "../../../primitives/mergeStyle";
 import { Chat } from "./chat";
 const len = (value) => typeof value === "number" ? `${value}px` : value;
 const floatingAnchorForSide = (side) => side === "left" ? "bottom-left" : "bottom-right";
@@ -31,7 +32,8 @@ function ChatLayout(props) {
     "floatingAnchor",
     "chat",
     "children",
-    "style"
+    "style",
+    "data-testid"
   ]);
   const [collapsed, setCollapsed] = createControllableState({
     value: () => local.collapsed,
@@ -61,17 +63,14 @@ function ChatLayout(props) {
       {local.chat.headerActions}
       {expandButton()}
     </>;
-  const rootStyle = () => ({
-    "--smwb-chat-layout-w": len(local.chatWidth),
-    ...typeof local.style === "object" && local.style ? local.style : {}
-  });
+  const rootStyle = () => mergeStyle({ "--smwb-chat-layout-w": len(local.chatWidth) }, local.style);
   return <Show
     when={collapsed()}
     fallback={<div
       {...rest}
       class={cn("smwb-chat-layout", `smwb-chat-layout_${local.side}`, local.class)}
       style={rootStyle()}
-      data-testid="chat-layout"
+      data-testid={local["data-testid"] ?? "chat-layout"}
       data-collapsed="false"
     >
           <Show when={local.side === "left"}>
@@ -93,7 +92,7 @@ function ChatLayout(props) {
     {...rest}
     class={cn("smwb-chat-layout", "smwb-chat-layout_collapsed", local.class)}
     style={rootStyle()}
-    data-testid="chat-layout"
+    data-testid={local["data-testid"] ?? "chat-layout"}
     data-collapsed="true"
   >
         <div class={cn("smwb-chat-layout__content", local.contentClass)} data-testid="chat-layout-content">

package/dist/headless/source/components/dataDisplay/chat/chatLayout.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chatLayout.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { ChatIconButton } from \"./chatIconButton\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { Chat, type ChatProps } from \"./chat\";\nimport type { ChatAnchor, ChatLayoutSide } from \"./types\";\n\nconst len = (value: number | string): string => (typeof value === \"number\" ? `${value}px` : value);\n\nconst floatingAnchorForSide = (side: ChatLayoutSide): ChatAnchor => (side === \"left\" ? \"bottom-left\" : \"bottom-right\");\n\nexport type ChatLayoutChatProps = Omit<\n  ChatProps,\n  | \"class\"\n  | \"embedded\"\n  | \"floatingTrigger\"\n  | \"anchor\"\n  | \"allowedLayouts\"\n  | \"layout\"\n  | \"defaultLayout\"\n  | \"open\"\n  | \"defaultOpen\"\n  | \"onOpenChange\"\n  | \"onLayoutChange\"\n>;\n\nexport interface ChatLayoutProps extends ParentProps, JSX.HTMLAttributes<HTMLDivElement> {\n  contentClass?: string | undefined;\n  chatClass?: string | undefined;\n  side?: ChatLayoutSide | undefined;\n  chatWidth?: number | string | undefined;\n  collapsed?: boolean | undefined;\n  defaultCollapsed?: boolean | undefined;\n  onCollapsedChange?: ((collapsed: boolean) => void) | undefined;\n  collapseAriaLabel?: string | undefined;\n  expandAriaLabel?: string | undefined;\n  floatingAnchor?: ChatAnchor | undefined;\n  chat: ChatLayoutChatProps;\n}\n\nexport function ChatLayout(props: ChatLayoutProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      side: \"right\" as const,\n      chatWidth: 400 as number | string,\n      defaultCollapsed: false,\n      collapseAriaLabel: \"Collapse chat panel\",\n      expandAriaLabel: \"Expand chat panel\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"contentClass\",\n    \"chatClass\",\n    \"side\",\n    \"chatWidth\",\n    \"collapsed\",\n    \"defaultCollapsed\",\n    \"onCollapsedChange\",\n    \"collapseAriaLabel\",\n    \"expandAriaLabel\",\n    \"floatingAnchor\",\n    \"chat\",\n    \"children\",\n    \"style\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.collapsed,\n    defaultValue: local.defaultCollapsed,\n    onChange: local.onCollapsedChange,\n  });\n\n  const [floatingOpen, setFloatingOpen] = createControllableState<boolean>({ defaultValue: false });\n\n  createEffect(() => {\n    if (!collapsed()) {\n      setFloatingOpen(false);\n    }\n  });\n\n  const anchor = (): ChatAnchor => local.floatingAnchor ?? floatingAnchorForSide(local.side);\n  const dockIcon = (): string => (local.side === \"left\" ? \"dock_to_left\" : \"dock_to_right\");\n  const collapseIcon = (): string => (local.side === \"left\" ? \"left_panel_close\" : \"right_panel_close\");\n\n  const collapseButton = (): JSX.Element => (\n    <ChatIconButton aria-label={local.collapseAriaLabel} data-testid=\"chat-layout-collapse\" onClick={() => setCollapsed(true)}>\n      <Icon name={collapseIcon()} size={18} />\n    </ChatIconButton>\n  );\n\n  const expandButton = (): JSX.Element => (\n    <ChatIconButton aria-label={local.expandAriaLabel} data-testid=\"chat-layout-expand\" onClick={() => setCollapsed(false)}>\n      <Icon name={dockIcon()} size={18} />\n    </ChatIconButton>\n  );\n\n  const dockedHeaderActions = (): JSX.Element => (\n    <>\n      {local.chat.headerActions}\n      {collapseButton()}\n    </>\n  );\n\n  const floatingHeaderActions = (): JSX.Element => (\n    <>\n      {local.chat.headerActions}\n      {expandButton()}\n    </>\n  );\n\n  const rootStyle = (): JSX.CSSProperties => ({\n    \"--smwb-chat-layout-w\": len(local.chatWidth),\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n  });\n\n  return (\n    <Show\n      when={collapsed()}\n      fallback={\n        <div\n          {...rest}\n          class={cn(\"smwb-chat-layout\", `smwb-chat-layout_${local.side}`, local.class)}\n          style={rootStyle()}\n          data-testid=\"chat-layout\"\n          data-collapsed=\"false\"\n        >\n          <Show when={local.side === \"left\"}>\n            <aside class=\"smwb-chat-layout__panel\" data-testid=\"chat-layout-panel\">\n              <Chat {...local.chat} class={local.chatClass} embedded allowedLayouts={[]} headerActions={dockedHeaderActions()} />\n            </aside>\n          </Show>\n          <div class={cn(\"smwb-chat-layout__content\", local.contentClass)} data-testid=\"chat-layout-content\">\n            {local.children}\n          </div>\n          <Show when={local.side === \"right\"}>\n            <aside class=\"smwb-chat-layout__panel\" data-testid=\"chat-layout-panel\">\n              <Chat {...local.chat} class={local.chatClass} embedded allowedLayouts={[]} headerActions={dockedHeaderActions()} />\n            </aside>\n          </Show>\n        </div>\n      }\n    >\n      <div\n        {...rest}\n        class={cn(\"smwb-chat-layout\", \"smwb-chat-layout_collapsed\", local.class)}\n        style={rootStyle()}\n        data-testid=\"chat-layout\"\n        data-collapsed=\"true\"\n      >\n        <div class={cn(\"smwb-chat-layout__content\", local.contentClass)} data-testid=\"chat-layout-content\">\n          {local.children}\n        </div>\n        <Chat\n          {...local.chat}\n          class={local.chatClass}\n          floatingTrigger\n          anchor={anchor()}\n          allowedLayouts={[\"floating\"]}\n          layout=\"floating\"\n          open={floatingOpen()}\n          onOpenChange={setFloatingOpen}\n          headerActions={floatingHeaderActions()}\n        />\n      </div>\n    </Show>\n  );\n}\n\nexport default ChatLayout;\n"],"mappings":"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","names":[],"file":"chatLayout.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chatLayout.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { ChatIconButton } from \"./chatIconButton\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\nimport { Chat, type ChatProps } from \"./chat\";\nimport type { ChatAnchor, ChatLayoutSide } from \"./types\";\n\nconst len = (value: number | string): string => (typeof value === \"number\" ? `${value}px` : value);\n\nconst floatingAnchorForSide = (side: ChatLayoutSide): ChatAnchor => (side === \"left\" ? \"bottom-left\" : \"bottom-right\");\n\nexport type ChatLayoutChatProps = Omit<\n  ChatProps,\n  | \"class\"\n  | \"embedded\"\n  | \"floatingTrigger\"\n  | \"anchor\"\n  | \"allowedLayouts\"\n  | \"layout\"\n  | \"defaultLayout\"\n  | \"open\"\n  | \"defaultOpen\"\n  | \"onOpenChange\"\n  | \"onLayoutChange\"\n>;\n\nexport interface ChatLayoutProps extends ParentProps, JSX.HTMLAttributes<HTMLDivElement> {\n  contentClass?: string | undefined;\n  chatClass?: string | undefined;\n  side?: ChatLayoutSide | undefined;\n  chatWidth?: number | string | undefined;\n  collapsed?: boolean | undefined;\n  defaultCollapsed?: boolean | undefined;\n  onCollapsedChange?: ((collapsed: boolean) => void) | undefined;\n  collapseAriaLabel?: string | undefined;\n  expandAriaLabel?: string | undefined;\n  floatingAnchor?: ChatAnchor | undefined;\n  chat: ChatLayoutChatProps;\n  /** Test id of the root `<div>`; `chat-layout` unless given. */\n  \"data-testid\"?: string | undefined;\n}\n\nexport function ChatLayout(props: ChatLayoutProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      side: \"right\" as const,\n      chatWidth: 400 as number | string,\n      defaultCollapsed: false,\n      collapseAriaLabel: \"Collapse chat panel\",\n      expandAriaLabel: \"Expand chat panel\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"contentClass\",\n    \"chatClass\",\n    \"side\",\n    \"chatWidth\",\n    \"collapsed\",\n    \"defaultCollapsed\",\n    \"onCollapsedChange\",\n    \"collapseAriaLabel\",\n    \"expandAriaLabel\",\n    \"floatingAnchor\",\n    \"chat\",\n    \"children\",\n    \"style\",\n    \"data-testid\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.collapsed,\n    defaultValue: local.defaultCollapsed,\n    onChange: local.onCollapsedChange,\n  });\n\n  const [floatingOpen, setFloatingOpen] = createControllableState<boolean>({ defaultValue: false });\n\n  createEffect(() => {\n    if (!collapsed()) {\n      setFloatingOpen(false);\n    }\n  });\n\n  const anchor = (): ChatAnchor => local.floatingAnchor ?? floatingAnchorForSide(local.side);\n  const dockIcon = (): string => (local.side === \"left\" ? \"dock_to_left\" : \"dock_to_right\");\n  const collapseIcon = (): string => (local.side === \"left\" ? \"left_panel_close\" : \"right_panel_close\");\n\n  const collapseButton = (): JSX.Element => (\n    <ChatIconButton aria-label={local.collapseAriaLabel} data-testid=\"chat-layout-collapse\" onClick={() => setCollapsed(true)}>\n      <Icon name={collapseIcon()} size={18} />\n    </ChatIconButton>\n  );\n\n  const expandButton = (): JSX.Element => (\n    <ChatIconButton aria-label={local.expandAriaLabel} data-testid=\"chat-layout-expand\" onClick={() => setCollapsed(false)}>\n      <Icon name={dockIcon()} size={18} />\n    </ChatIconButton>\n  );\n\n  const dockedHeaderActions = (): JSX.Element => (\n    <>\n      {local.chat.headerActions}\n      {collapseButton()}\n    </>\n  );\n\n  const floatingHeaderActions = (): JSX.Element => (\n    <>\n      {local.chat.headerActions}\n      {expandButton()}\n    </>\n  );\n\n  // The caller's style goes last: its own --smwb-chat-layout-w wins over chatWidth.\n  const rootStyle = (): JSX.CSSProperties | string | undefined =>\n    mergeStyle({ \"--smwb-chat-layout-w\": len(local.chatWidth) }, local.style);\n\n  return (\n    <Show\n      when={collapsed()}\n      fallback={\n        <div\n          {...rest}\n          class={cn(\"smwb-chat-layout\", `smwb-chat-layout_${local.side}`, local.class)}\n          style={rootStyle()}\n          data-testid={local[\"data-testid\"] ?? \"chat-layout\"}\n          data-collapsed=\"false\"\n        >\n          <Show when={local.side === \"left\"}>\n            <aside class=\"smwb-chat-layout__panel\" data-testid=\"chat-layout-panel\">\n              <Chat {...local.chat} class={local.chatClass} embedded allowedLayouts={[]} headerActions={dockedHeaderActions()} />\n            </aside>\n          </Show>\n          <div class={cn(\"smwb-chat-layout__content\", local.contentClass)} data-testid=\"chat-layout-content\">\n            {local.children}\n          </div>\n          <Show when={local.side === \"right\"}>\n            <aside class=\"smwb-chat-layout__panel\" data-testid=\"chat-layout-panel\">\n              <Chat {...local.chat} class={local.chatClass} embedded allowedLayouts={[]} headerActions={dockedHeaderActions()} />\n            </aside>\n          </Show>\n        </div>\n      }\n    >\n      <div\n        {...rest}\n        class={cn(\"smwb-chat-layout\", \"smwb-chat-layout_collapsed\", local.class)}\n        style={rootStyle()}\n        data-testid={local[\"data-testid\"] ?? \"chat-layout\"}\n        data-collapsed=\"true\"\n      >\n        <div class={cn(\"smwb-chat-layout__content\", local.contentClass)} data-testid=\"chat-layout-content\">\n          {local.children}\n        </div>\n        <Chat\n          {...local.chat}\n          class={local.chatClass}\n          floatingTrigger\n          anchor={anchor()}\n          allowedLayouts={[\"floating\"]}\n          layout=\"floating\"\n          open={floatingOpen()}\n          onOpenChange={setFloatingOpen}\n          headerActions={floatingHeaderActions()}\n        />\n      </div>\n    </Show>\n  );\n}\n\nexport default ChatLayout;\n"],"mappings":"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","names":[],"file":"chatLayout.jsx"}

package/dist/headless/source/components/dataDisplay/chat/chatOverlayLayout.jsx

@@ -1,5 +1,6 @@
 import { mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
+import { mergeStyle } from "../../../primitives/mergeStyle";
 import { Chat } from "./chat";
 const len = (value) => typeof value === "number" ? `${value}px` : value;
 const anchorForSide = (side) => side === "left" ? "bottom-left" : "bottom-right";
@@ -25,17 +26,15 @@ function ChatOverlayLayout(props) {
     "defaultOpen",
     "chat",
     "children",
-    "style"
+    "style",
+    "data-testid"
   ]);
-  const rootStyle = () => ({
-    "--smwb-chat-overlay-w": len(local.chatWidth),
-    ...typeof local.style === "object" && local.style ? local.style : {}
-  });
+  const rootStyle = () => mergeStyle({ "--smwb-chat-overlay-w": len(local.chatWidth) }, local.style);
   return <div
     {...rest}
     class={cn("smwb-chat-overlay-layout", local.class)}
     style={rootStyle()}
-    data-testid="chat-overlay-layout"
+    data-testid={local["data-testid"] ?? "chat-overlay-layout"}
   >
       <div class={cn("smwb-chat-overlay-layout__content", local.contentClass)} data-testid="chat-overlay-layout-content">
         {local.children}

package/dist/headless/source/components/dataDisplay/chat/chatOverlayLayout.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chatOverlayLayout.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Chat, type ChatProps } from \"./chat\";\nimport type { ChatAnchor, ChatLayoutMode, ChatLayoutSide } from \"./types\";\n\nconst len = (value: number | string): string => (typeof value === \"number\" ? `${value}px` : value);\n\nconst anchorForSide = (side: ChatLayoutSide): ChatAnchor => (side === \"left\" ? \"bottom-left\" : \"bottom-right\");\n\nexport type ChatOverlayLayoutChatProps = Omit<\n  ChatProps,\n  | \"class\"\n  | \"overlayContext\"\n  | \"embedded\"\n  | \"floatingTrigger\"\n  | \"anchor\"\n  | \"allowedLayouts\"\n  | \"layout\"\n  | \"defaultLayout\"\n  | \"onLayoutChange\"\n  | \"open\"\n  | \"defaultOpen\"\n  | \"onOpenChange\"\n>;\n\nexport interface ChatOverlayLayoutProps extends ParentProps, JSX.HTMLAttributes<HTMLDivElement> {\n  contentClass?: string | undefined;\n  chatClass?: string | undefined;\n  side?: ChatLayoutSide | undefined;\n  chatWidth?: number | string | undefined;\n  allowedLayouts?: ChatLayoutMode[] | undefined;\n  defaultLayout?: ChatLayoutMode | undefined;\n  defaultOpen?: boolean | undefined;\n  chat: ChatOverlayLayoutChatProps;\n}\n\nexport function ChatOverlayLayout(props: ChatOverlayLayoutProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      side: \"right\" as const,\n      chatWidth: 400 as number | string,\n      allowedLayouts: [\"fullHeight\", \"floating\"] as ChatLayoutMode[],\n      defaultLayout: \"fullHeight\" as ChatLayoutMode,\n      defaultOpen: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"contentClass\",\n    \"chatClass\",\n    \"side\",\n    \"chatWidth\",\n    \"allowedLayouts\",\n    \"defaultLayout\",\n    \"defaultOpen\",\n    \"chat\",\n    \"children\",\n    \"style\",\n  ]);\n\n  const rootStyle = (): JSX.CSSProperties => ({\n    \"--smwb-chat-overlay-w\": len(local.chatWidth),\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n  });\n\n  return (\n    <div\n      {...rest}\n      class={cn(\"smwb-chat-overlay-layout\", local.class)}\n      style={rootStyle()}\n      data-testid=\"chat-overlay-layout\"\n    >\n      <div class={cn(\"smwb-chat-overlay-layout__content\", local.contentClass)} data-testid=\"chat-overlay-layout-content\">\n        {local.children}\n      </div>\n      <Chat\n        {...local.chat}\n        class={local.chatClass}\n        overlayContext\n        floatingTrigger\n        anchor={anchorForSide(local.side)}\n        allowedLayouts={local.allowedLayouts}\n        defaultLayout={local.defaultLayout}\n        defaultOpen={local.defaultOpen}\n      />\n    </div>\n  );\n}\n\nexport default ChatOverlayLayout;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,YAA4B;AAGrC,MAAM,MAAM,CAAC,UAAoC,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AAE5F,MAAM,gBAAgB,CAAC,SAAsC,SAAS,SAAS,gBAAgB;AA6BxF,SAAS,kBAAkB,OAA4C;AAC5E,QAAM,SAAS;AAAA,IACb;AAAA,MACE,MAAM;AAAA,MACN,WAAW;AAAA,MACX,gBAAgB,CAAC,cAAc,UAAU;AAAA,MACzC,eAAe;AAAA,MACf,aAAa;AAAA,IACf;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,EACF,CAAC;AAED,QAAM,YAAY,OAA0B;AAAA,IAC1C,yBAAyB,IAAI,MAAM,SAAS;AAAA,IAC5C,GAAI,OAAO,MAAM,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ,CAAC;AAAA,EACtE;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,OAAO,GAAG,4BAA4B,MAAM,KAAK;AAAA,IACjD,OAAO,UAAU;AAAA,IACjB,YAAY;AAAA,GACb;AAAA,MACC,CAAC,IAAI,OAAO,GAAG,qCAAqC,MAAM,YAAY,GAAG,YAAY,8BAA8B;AAAA,SAChH,MAAM,SAAS;AAAA,MAClB,EAFC,IAEK;AAAA,MACN,CAAC;AAAA,QACK,MAAM;AAAA,IACV,OAAO,MAAM;AAAA,IACb;AAAA,IACA;AAAA,IACA,QAAQ,cAAc,MAAM,IAAI;AAAA,IAChC,gBAAgB,MAAM;AAAA,IACtB,eAAe,MAAM;AAAA,IACrB,aAAa,MAAM;AAAA,EACrB,EAAE;AAAA,IACJ,EAnBC;AAqBL;AAEA,IAAO,4BAAQ;","names":[],"file":"chatOverlayLayout.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chatOverlayLayout.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\nimport { Chat, type ChatProps } from \"./chat\";\nimport type { ChatAnchor, ChatLayoutMode, ChatLayoutSide } from \"./types\";\n\nconst len = (value: number | string): string => (typeof value === \"number\" ? `${value}px` : value);\n\nconst anchorForSide = (side: ChatLayoutSide): ChatAnchor => (side === \"left\" ? \"bottom-left\" : \"bottom-right\");\n\nexport type ChatOverlayLayoutChatProps = Omit<\n  ChatProps,\n  | \"class\"\n  | \"overlayContext\"\n  | \"embedded\"\n  | \"floatingTrigger\"\n  | \"anchor\"\n  | \"allowedLayouts\"\n  | \"layout\"\n  | \"defaultLayout\"\n  | \"onLayoutChange\"\n  | \"open\"\n  | \"defaultOpen\"\n  | \"onOpenChange\"\n>;\n\nexport interface ChatOverlayLayoutProps extends ParentProps, JSX.HTMLAttributes<HTMLDivElement> {\n  contentClass?: string | undefined;\n  chatClass?: string | undefined;\n  side?: ChatLayoutSide | undefined;\n  chatWidth?: number | string | undefined;\n  allowedLayouts?: ChatLayoutMode[] | undefined;\n  defaultLayout?: ChatLayoutMode | undefined;\n  defaultOpen?: boolean | undefined;\n  chat: ChatOverlayLayoutChatProps;\n  /** Test id of the root `<div>`; `chat-overlay-layout` unless given. */\n  \"data-testid\"?: string | undefined;\n}\n\nexport function ChatOverlayLayout(props: ChatOverlayLayoutProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      side: \"right\" as const,\n      chatWidth: 400 as number | string,\n      allowedLayouts: [\"fullHeight\", \"floating\"] as ChatLayoutMode[],\n      defaultLayout: \"fullHeight\" as ChatLayoutMode,\n      defaultOpen: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"contentClass\",\n    \"chatClass\",\n    \"side\",\n    \"chatWidth\",\n    \"allowedLayouts\",\n    \"defaultLayout\",\n    \"defaultOpen\",\n    \"chat\",\n    \"children\",\n    \"style\",\n    \"data-testid\",\n  ]);\n\n  // The caller's style goes last: its own --smwb-chat-overlay-w wins over chatWidth.\n  const rootStyle = (): JSX.CSSProperties | string | undefined =>\n    mergeStyle({ \"--smwb-chat-overlay-w\": len(local.chatWidth) }, local.style);\n\n  return (\n    <div\n      {...rest}\n      class={cn(\"smwb-chat-overlay-layout\", local.class)}\n      style={rootStyle()}\n      data-testid={local[\"data-testid\"] ?? \"chat-overlay-layout\"}\n    >\n      <div class={cn(\"smwb-chat-overlay-layout__content\", local.contentClass)} data-testid=\"chat-overlay-layout-content\">\n        {local.children}\n      </div>\n      <Chat\n        {...local.chat}\n        class={local.chatClass}\n        overlayContext\n        floatingTrigger\n        anchor={anchorForSide(local.side)}\n        allowedLayouts={local.allowedLayouts}\n        defaultLayout={local.defaultLayout}\n        defaultOpen={local.defaultOpen}\n      />\n    </div>\n  );\n}\n\nexport default ChatOverlayLayout;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,kBAAkB;AAC3B,SAAS,YAA4B;AAGrC,MAAM,MAAM,CAAC,UAAoC,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AAE5F,MAAM,gBAAgB,CAAC,SAAsC,SAAS,SAAS,gBAAgB;AA+BxF,SAAS,kBAAkB,OAA4C;AAC5E,QAAM,SAAS;AAAA,IACb;AAAA,MACE,MAAM;AAAA,MACN,WAAW;AAAA,MACX,gBAAgB,CAAC,cAAc,UAAU;AAAA,MACzC,eAAe;AAAA,MACf,aAAa;AAAA,IACf;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,EACF,CAAC;AAGD,QAAM,YAAY,MAChB,WAAW,EAAE,yBAAyB,IAAI,MAAM,SAAS,EAAE,GAAG,MAAM,KAAK;AAE3E,SACE,CAAC;AAAA,QACK;AAAA,IACJ,OAAO,GAAG,4BAA4B,MAAM,KAAK;AAAA,IACjD,OAAO,UAAU;AAAA,IACjB,aAAa,MAAM,aAAa,KAAK;AAAA,GACtC;AAAA,MACC,CAAC,IAAI,OAAO,GAAG,qCAAqC,MAAM,YAAY,GAAG,YAAY,8BAA8B;AAAA,SAChH,MAAM,SAAS;AAAA,MAClB,EAFC,IAEK;AAAA,MACN,CAAC;AAAA,QACK,MAAM;AAAA,IACV,OAAO,MAAM;AAAA,IACb;AAAA,IACA;AAAA,IACA,QAAQ,cAAc,MAAM,IAAI;AAAA,IAChC,gBAAgB,MAAM;AAAA,IACtB,eAAe,MAAM;AAAA,IACrB,aAAa,MAAM;AAAA,EACrB,EAAE;AAAA,IACJ,EAnBC;AAqBL;AAEA,IAAO,4BAAQ;","names":[],"file":"chatOverlayLayout.jsx"}

package/dist/headless/source/components/dataDisplay/chat/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/dataDisplay/chat/index.ts"],
-  "sourcesContent": ["export { ChatLayout, default as ChatLayoutDefault } from \"./chatLayout\";\nexport type { ChatLayoutProps, ChatLayoutChatProps } from \"./chatLayout\";\nexport { ChatOverlayLayout } from \"./chatOverlayLayout\";\nexport type { ChatOverlayLayoutProps, ChatOverlayLayoutChatProps } from \"./chatOverlayLayout\";\nexport { Chat, default } from \"./chat\";\nexport type { ChatProps } from \"./chat\";\nexport { ChatShell } from \"./chatShell\";\nexport type { ChatShellProps } from \"./chatShell\";\nexport { ChatHeader } from \"./chatHeader\";\nexport type { ChatHeaderProps } from \"./chatHeader\";\nexport { ChatMessages } from \"./chatMessages\";\nexport type { ChatMessagesProps } from \"./chatMessages\";\nexport { ChatMessageItem } from \"./chatMessageItem\";\nexport type { ChatMessageItemProps } from \"./chatMessageItem\";\nexport { ChatMessageIncoming } from \"./chatMessageIncoming\";\nexport type { ChatMessageIncomingProps } from \"./chatMessageIncoming\";\nexport { ChatMessageOutgoing } from \"./chatMessageOutgoing\";\nexport type { ChatMessageOutgoingProps } from \"./chatMessageOutgoing\";\nexport { ChatMessageSystem } from \"./chatMessageSystem\";\nexport type { ChatMessageSystemProps } from \"./chatMessageSystem\";\nexport { ChatMessageBubble } from \"./chatMessageBubble\";\nexport type { ChatMessageBubbleProps } from \"./chatMessageBubble\";\nexport { ChatMessageSkeleton } from \"./chatMessageSkeleton\";\nexport type { ChatMessageSkeletonProps } from \"./chatMessageSkeleton\";\nexport { ChatMessageStatus } from \"./chatMessageStatus\";\nexport type { ChatMessageStatusProps } from \"./chatMessageStatus\";\nexport { ChatMessageAvatar } from \"./chatMessageAvatar\";\nexport type { ChatMessageAvatarProps } from \"./chatMessageAvatar\";\nexport { ChatAttachments } from \"./chatAttachments\";\nexport type { ChatAttachmentsProps } from \"./chatAttachments\";\nexport { ChatAttachmentImage } from \"./chatAttachmentImage\";\nexport type { ChatAttachmentImageProps } from \"./chatAttachmentImage\";\nexport { ChatIconButton } from \"./chatIconButton\";\nexport type { ChatIconButtonProps } from \"./chatIconButton\";\nexport { ChatComposer } from \"./chatComposer\";\nexport type { ChatComposerProps } from \"./chatComposer\";\nexport { createChatInfiniteScroll } from \"./useChatInfiniteScroll\";\nexport type { CreateChatInfiniteScrollParams } from \"./useChatInfiniteScroll\";\nexport { createChatFileUpload, resolveChatFileUploadMaxFiles } from \"./useChatFileUpload\";\nexport type { CreateChatFileUploadOptions, ChatFileUploadState } from \"./useChatFileUpload\";\nexport { createChatStickToBottom, isScrolledToBottom, scrollChatToBottom } from \"./useChatStickToBottom\";\nexport type { CreateChatStickToBottomParams } from \"./useChatStickToBottom\";\nexport type {\n  ChatMessage,\n  ChatAttachment,\n  ChatAuthor,\n  ChatMessageVariant,\n  ChatLayoutMode,\n  ChatAnchor,\n  ChatThemeMode,\n  ChatMessageRenderContext,\n  ChatLayoutSide,\n  ChatMessageDeliveryStatus,\n  ChatMessageStatus as ChatMessageStatusValue,\n  ChatMessageStatusIcons,\n  ChatMessageStatusRenderContext,\n} from \"./types\";\nexport {\n  CHAT_EXPAND_LAYOUTS,\n  CHAT_DEFAULT_FILE_UPLOAD_MAX_FILES,\n  CHAT_MESSAGE_DELIVERY_STATUSES,\n  CHAT_MESSAGE_STATUS_ICONS,\n  CHAT_MESSAGE_STATUS_LABELS,\n} from \"./types\";\nexport {\n  isImageAttachment,\n  formatChatTimestamp,\n  resolveAllowedLayouts,\n  isChatMessageDeliveryStatus,\n  resolveChatMessageStatusIcon,\n  resolveChatMessageStatusLabel,\n  shouldComposerNewlineOnEnter,\n  getChatLayoutActions,\n  shouldShowChatCloseButton,\n} from \"./utils\";\nexport type { ChatComposerNewlineOptions } from \"./utils\";\n"],
+  "sourcesContent": ["export { ChatLayout, default as ChatLayoutDefault } from \"./chatLayout\";\nexport type { ChatLayoutProps, ChatLayoutChatProps } from \"./chatLayout\";\nexport { ChatOverlayLayout } from \"./chatOverlayLayout\";\nexport type { ChatOverlayLayoutProps, ChatOverlayLayoutChatProps } from \"./chatOverlayLayout\";\nexport { Chat, default } from \"./chat\";\nexport type { ChatProps, ChatFooterComposerProps } from \"./chat\";\nexport { ChatShell } from \"./chatShell\";\nexport type { ChatShellProps } from \"./chatShell\";\nexport { ChatHeader } from \"./chatHeader\";\nexport type { ChatHeaderProps } from \"./chatHeader\";\nexport { ChatMessages } from \"./chatMessages\";\nexport type { ChatMessagesProps } from \"./chatMessages\";\nexport { ChatMessageItem } from \"./chatMessageItem\";\nexport type { ChatMessageItemProps } from \"./chatMessageItem\";\nexport { ChatMessageIncoming } from \"./chatMessageIncoming\";\nexport type { ChatMessageIncomingProps } from \"./chatMessageIncoming\";\nexport { ChatMessageOutgoing } from \"./chatMessageOutgoing\";\nexport type { ChatMessageOutgoingProps } from \"./chatMessageOutgoing\";\nexport { ChatMessageSystem } from \"./chatMessageSystem\";\nexport type { ChatMessageSystemProps } from \"./chatMessageSystem\";\nexport { ChatMessageBubble } from \"./chatMessageBubble\";\nexport type { ChatMessageBubbleProps } from \"./chatMessageBubble\";\nexport { ChatMessageSkeleton } from \"./chatMessageSkeleton\";\nexport type { ChatMessageSkeletonProps } from \"./chatMessageSkeleton\";\nexport { ChatMessageStatus } from \"./chatMessageStatus\";\nexport type { ChatMessageStatusProps } from \"./chatMessageStatus\";\nexport { ChatMessageAvatar } from \"./chatMessageAvatar\";\nexport type { ChatMessageAvatarProps } from \"./chatMessageAvatar\";\nexport { ChatAttachments } from \"./chatAttachments\";\nexport type { ChatAttachmentsProps } from \"./chatAttachments\";\nexport { ChatAttachmentImage } from \"./chatAttachmentImage\";\nexport type { ChatAttachmentImageProps } from \"./chatAttachmentImage\";\nexport { ChatIconButton } from \"./chatIconButton\";\nexport type { ChatIconButtonProps } from \"./chatIconButton\";\nexport { ChatComposer } from \"./chatComposer\";\nexport type { ChatComposerProps } from \"./chatComposer\";\nexport { createChatInfiniteScroll } from \"./useChatInfiniteScroll\";\nexport type { CreateChatInfiniteScrollParams } from \"./useChatInfiniteScroll\";\nexport { createChatFileUpload, resolveChatFileUploadMaxFiles } from \"./useChatFileUpload\";\nexport type { CreateChatFileUploadOptions, ChatFileUploadState } from \"./useChatFileUpload\";\nexport { createChatStickToBottom, isScrolledToBottom, scrollChatToBottom } from \"./useChatStickToBottom\";\nexport type { CreateChatStickToBottomParams } from \"./useChatStickToBottom\";\nexport type {\n  ChatMessage,\n  ChatAttachment,\n  ChatAuthor,\n  ChatMessageVariant,\n  ChatLayoutMode,\n  ChatAnchor,\n  ChatThemeMode,\n  ChatMessageRenderContext,\n  ChatLayoutSide,\n  ChatMessageDeliveryStatus,\n  ChatMessageStatus as ChatMessageStatusValue,\n  ChatMessageStatusIcons,\n  ChatMessageStatusRenderContext,\n} from \"./types\";\nexport {\n  CHAT_EXPAND_LAYOUTS,\n  CHAT_DEFAULT_FILE_UPLOAD_MAX_FILES,\n  CHAT_MESSAGE_DELIVERY_STATUSES,\n  CHAT_MESSAGE_STATUS_ICONS,\n  CHAT_MESSAGE_STATUS_LABELS,\n} from \"./types\";\nexport {\n  isImageAttachment,\n  formatChatTimestamp,\n  resolveAllowedLayouts,\n  isChatMessageDeliveryStatus,\n  resolveChatMessageStatusIcon,\n  resolveChatMessageStatusLabel,\n  shouldComposerNewlineOnEnter,\n  getChatLayoutActions,\n  shouldShowChatCloseButton,\n} from \"./utils\";\nexport type { ChatComposerNewlineOptions } from \"./utils\";\n"],
   "mappings": "AAAA,SAAS,YAAuB,WAAXA,gBAAoC;AAEzD,SAAS,yBAAyB;AAElC,SAAS,MAAM,WAAAA,gBAAe;AAE9B,SAAS,iBAAiB;AAE1B,SAAS,kBAAkB;AAE3B,SAAS,oBAAoB;AAE7B,SAAS,uBAAuB;AAEhC,SAAS,2BAA2B;AAEpC,SAAS,2BAA2B;AAEpC,SAAS,yBAAyB;AAElC,SAAS,yBAAyB;AAElC,SAAS,2BAA2B;AAEpC,SAAS,yBAAyB;AAElC,SAAS,yBAAyB;AAElC,SAAS,uBAAuB;AAEhC,SAAS,2BAA2B;AAEpC,SAAS,sBAAsB;AAE/B,SAAS,oBAAoB;AAE7B,SAAS,gCAAgC;AAEzC,SAAS,sBAAsB,qCAAqC;AAEpE,SAAS,yBAAyB,oBAAoB,0BAA0B;AAiBhF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
   "names": ["default"]
 }

package/dist/headless/source/components/dataDisplay/chat/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/dataDisplay/chat/utils.ts"],
-  "sourcesContent": ["import {\n  type ChatAttachment,\n  type ChatLayoutMode,\n  CHAT_EXPAND_LAYOUTS,\n  CHAT_MESSAGE_DELIVERY_STATUSES,\n  CHAT_MESSAGE_STATUS_ICONS,\n  CHAT_MESSAGE_STATUS_LABELS,\n  type ChatMessageDeliveryStatus,\n  type ChatMessageStatus,\n  type ChatMessageStatusIcons,\n} from \"./types\";\n\nexport function isChatMessageDeliveryStatus(status: ChatMessageStatus): status is ChatMessageDeliveryStatus {\n  return CHAT_MESSAGE_DELIVERY_STATUSES.includes(status as ChatMessageDeliveryStatus);\n}\n\nexport function resolveChatMessageStatusIcon(\n  status: ChatMessageStatus,\n  icons?: ChatMessageStatusIcons & Record<string, string | undefined>\n): string | undefined {\n  const custom = icons?.[status];\n  if (custom) {\n    return custom;\n  }\n\n  if (isChatMessageDeliveryStatus(status)) {\n    return CHAT_MESSAGE_STATUS_ICONS[status];\n  }\n\n  return undefined;\n}\n\nexport function resolveChatMessageStatusLabel(status: ChatMessageStatus): string {\n  if (isChatMessageDeliveryStatus(status)) {\n    return CHAT_MESSAGE_STATUS_LABELS[status];\n  }\n\n  return String(status);\n}\n\nexport function isImageAttachment(attachment: ChatAttachment): boolean {\n  if (attachment.mimeType?.startsWith(\"image/\")) {\n    return true;\n  }\n\n  return /\\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(attachment.name);\n}\n\nexport function formatChatTimestamp(value?: string | Date): string {\n  if (!value) {\n    return \"\";\n  }\n\n  const date = value instanceof Date ? value : new Date(value);\n\n  if (Number.isNaN(date.getTime())) {\n    return String(value);\n  }\n\n  return new Intl.DateTimeFormat(undefined, {\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  }).format(date);\n}\n\nexport function resolveAllowedLayouts(input?: ChatLayoutMode[]): ChatLayoutMode[] {\n  if (input == null) {\n    return [\"floating\"];\n  }\n\n  if (input.length === 0) {\n    return [];\n  }\n\n  return CHAT_EXPAND_LAYOUTS.filter((mode) => input.includes(mode));\n}\n\nexport function pickInitialLayout(allowed: ChatLayoutMode[], preferred?: ChatLayoutMode): ChatLayoutMode {\n  if (preferred && preferred !== \"closed\" && allowed.includes(preferred)) {\n    return preferred;\n  }\n\n  return allowed[0] ?? \"floating\";\n}\n\nexport function getChatLayoutActions(\n  allowedLayouts: ChatLayoutMode[],\n  currentLayout?: ChatLayoutMode\n): Exclude<ChatLayoutMode, \"closed\">[] {\n  return resolveAllowedLayouts(allowedLayouts).filter(\n    (mode): mode is Exclude<ChatLayoutMode, \"closed\"> => mode !== \"closed\" && mode !== currentLayout\n  );\n}\n\nexport function shouldShowChatCloseButton(options: {\n  floatingTrigger?: boolean | undefined;\n  embedded?: boolean | undefined;\n  overlayContext?: boolean | undefined;\n  effectiveLayout?: ChatLayoutMode | undefined;\n  showCloseButton?: boolean | undefined;\n}): boolean {\n  if (options.showCloseButton === false) {\n    return false;\n  }\n\n  if (options.showCloseButton === true) {\n    return true;\n  }\n\n  if (\n    options.overlayContext &&\n    options.floatingTrigger &&\n    !options.embedded &&\n    (options.effectiveLayout === \"floating\" || options.effectiveLayout === \"fullHeight\")\n  ) {\n    return true;\n  }\n\n  return Boolean(options.floatingTrigger && !options.embedded && options.effectiveLayout === \"floating\");\n}\n\nexport interface ChatComposerNewlineOptions {\n  shiftEnterNewline?: boolean;\n  ctrlEnterNewline?: boolean;\n}\n\nexport function shouldComposerNewlineOnEnter(\n  event: { key: string; shiftKey: boolean; ctrlKey: boolean; metaKey: boolean },\n  options: ChatComposerNewlineOptions = {}\n): boolean {\n  if (event.key !== \"Enter\") {\n    return false;\n  }\n\n  const { shiftEnterNewline = true, ctrlEnterNewline = true } = options;\n  const isCtrl = event.ctrlKey || event.metaKey;\n\n  if (shiftEnterNewline && event.shiftKey && !isCtrl) {\n    return true;\n  }\n\n  if (ctrlEnterNewline && isCtrl && !event.shiftKey) {\n    return true;\n  }\n\n  return false;\n}\n"],
-  "mappings": "AAAA;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAEA,SAAS,4BAA4B,QAAgE;AAC1G,SAAO,+BAA+B,SAAS,MAAmC;AACpF;AAEO,SAAS,6BACd,QACA,OACoB;AACpB,QAAM,SAAS,QAAQ,MAAM;AAC7B,MAAI,QAAQ;AACV,WAAO;AAAA,EACT;AAEA,MAAI,4BAA4B,MAAM,GAAG;AACvC,WAAO,0BAA0B,MAAM;AAAA,EACzC;AAEA,SAAO;AACT;AAEO,SAAS,8BAA8B,QAAmC;AAC/E,MAAI,4BAA4B,MAAM,GAAG;AACvC,WAAO,2BAA2B,MAAM;AAAA,EAC1C;AAEA,SAAO,OAAO,MAAM;AACtB;AAEO,SAAS,kBAAkB,YAAqC;AACrE,MAAI,WAAW,UAAU,WAAW,QAAQ,GAAG;AAC7C,WAAO;AAAA,EACT;AAEA,SAAO,mCAAmC,KAAK,WAAW,IAAI;AAChE;AAEO,SAAS,oBAAoB,OAA+B;AACjE,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,iBAAiB,OAAO,QAAQ,IAAI,KAAK,KAAK;AAE3D,MAAI,OAAO,MAAM,KAAK,QAAQ,CAAC,GAAG;AAChC,WAAO,OAAO,KAAK;AAAA,EACrB;AAEA,SAAO,IAAI,KAAK,eAAe,QAAW;AAAA,IACxC,MAAM;AAAA,IACN,QAAQ;AAAA,EACV,CAAC,EAAE,OAAO,IAAI;AAChB;AAEO,SAAS,sBAAsB,OAA4C;AAChF,MAAI,SAAS,MAAM;AACjB,WAAO,CAAC,UAAU;AAAA,EACpB;AAEA,MAAI,MAAM,WAAW,GAAG;AACtB,WAAO,CAAC;AAAA,EACV;AAEA,SAAO,oBAAoB,OAAO,CAAC,SAAS,MAAM,SAAS,IAAI,CAAC;AAClE;AAEO,SAAS,kBAAkB,SAA2B,WAA4C;AACvG,MAAI,aAAa,cAAc,YAAY,QAAQ,SAAS,SAAS,GAAG;AACtE,WAAO;AAAA,EACT;AAEA,SAAO,QAAQ,CAAC,KAAK;AACvB;AAEO,SAAS,qBACd,gBACA,eACqC;AACrC,SAAO,sBAAsB,cAAc,EAAE;AAAA,IAC3C,CAAC,SAAoD,SAAS,YAAY,SAAS;AAAA,EACrF;AACF;AAEO,SAAS,0BAA0B,SAM9B;AACV,MAAI,QAAQ,oBAAoB,OAAO;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,oBAAoB,MAAM;AACpC,WAAO;AAAA,EACT;AAEA,MACE,QAAQ,kBACR,QAAQ,mBACR,CAAC,QAAQ,aACR,QAAQ,oBAAoB,cAAc,QAAQ,oBAAoB,eACvE;AACA,WAAO;AAAA,EACT;AAEA,SAAO,QAAQ,QAAQ,mBAAmB,CAAC,QAAQ,YAAY,QAAQ,oBAAoB,UAAU;AACvG;AAOO,SAAS,6BACd,OACA,UAAsC,CAAC,GAC9B;AACT,MAAI,MAAM,QAAQ,SAAS;AACzB,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,oBAAoB,MAAM,mBAAmB,KAAK,IAAI;AAC9D,QAAM,SAAS,MAAM,WAAW,MAAM;AAEtC,MAAI,qBAAqB,MAAM,YAAY,CAAC,QAAQ;AAClD,WAAO;AAAA,EACT;AAEA,MAAI,oBAAoB,UAAU,CAAC,MAAM,UAAU;AACjD,WAAO;AAAA,EACT;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import {\n  type ChatAttachment,\n  type ChatLayoutMode,\n  CHAT_EXPAND_LAYOUTS,\n  CHAT_MESSAGE_DELIVERY_STATUSES,\n  CHAT_MESSAGE_STATUS_ICONS,\n  CHAT_MESSAGE_STATUS_LABELS,\n  type ChatMessageDeliveryStatus,\n  type ChatMessageStatus,\n  type ChatMessageStatusIcons,\n} from \"./types\";\n\nexport function isChatMessageDeliveryStatus(status: ChatMessageStatus): status is ChatMessageDeliveryStatus {\n  return CHAT_MESSAGE_DELIVERY_STATUSES.includes(status as ChatMessageDeliveryStatus);\n}\n\nexport function resolveChatMessageStatusIcon(\n  status: ChatMessageStatus,\n  icons?: ChatMessageStatusIcons & Record<string, string | undefined>\n): string | undefined {\n  const custom = icons?.[status];\n  if (custom) {\n    return custom;\n  }\n\n  if (isChatMessageDeliveryStatus(status)) {\n    return CHAT_MESSAGE_STATUS_ICONS[status];\n  }\n\n  return undefined;\n}\n\nexport function resolveChatMessageStatusLabel(status: ChatMessageStatus): string {\n  if (isChatMessageDeliveryStatus(status)) {\n    return CHAT_MESSAGE_STATUS_LABELS[status];\n  }\n\n  return String(status);\n}\n\nexport function isImageAttachment(attachment: ChatAttachment): boolean {\n  if (attachment.mimeType?.startsWith(\"image/\")) {\n    return true;\n  }\n\n  return /\\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(attachment.name);\n}\n\nexport function formatChatTimestamp(value?: string | Date): string {\n  if (!value) {\n    return \"\";\n  }\n\n  const date = value instanceof Date ? value : new Date(value);\n\n  if (Number.isNaN(date.getTime())) {\n    return String(value);\n  }\n\n  return new Intl.DateTimeFormat(undefined, {\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  }).format(date);\n}\n\nexport function resolveAllowedLayouts(input?: ChatLayoutMode[]): ChatLayoutMode[] {\n  if (input == null) {\n    return [\"floating\"];\n  }\n\n  if (input.length === 0) {\n    return [];\n  }\n\n  return CHAT_EXPAND_LAYOUTS.filter((mode) => input.includes(mode));\n}\n\nexport function pickInitialLayout(allowed: ChatLayoutMode[], preferred?: ChatLayoutMode): ChatLayoutMode {\n  if (preferred && preferred !== \"closed\" && allowed.includes(preferred)) {\n    return preferred;\n  }\n\n  return allowed[0] ?? \"floating\";\n}\n\nexport function getChatLayoutActions(\n  allowedLayouts: ChatLayoutMode[],\n  currentLayout?: ChatLayoutMode\n): Exclude<ChatLayoutMode, \"closed\">[] {\n  return resolveAllowedLayouts(allowedLayouts).filter(\n    (mode): mode is Exclude<ChatLayoutMode, \"closed\"> => mode !== \"closed\" && mode !== currentLayout\n  );\n}\n\nexport function shouldShowChatCloseButton(options: {\n  floatingTrigger?: boolean | undefined;\n  embedded?: boolean | undefined;\n  overlayContext?: boolean | undefined;\n  effectiveLayout?: ChatLayoutMode | undefined;\n  showCloseButton?: boolean | undefined;\n}): boolean {\n  if (options.showCloseButton === false) {\n    return false;\n  }\n\n  if (options.showCloseButton === true) {\n    return true;\n  }\n\n  if (\n    options.overlayContext &&\n    options.floatingTrigger &&\n    !options.embedded &&\n    (options.effectiveLayout === \"floating\" || options.effectiveLayout === \"fullHeight\")\n  ) {\n    return true;\n  }\n\n  return Boolean(options.floatingTrigger && !options.embedded && options.effectiveLayout === \"floating\");\n}\n\n/**\n * Deprecated: the newline flags of the old `ChatComposer`. `Composer` picks the send key with `sendKey` instead\n * (`\"enter\"` = Enter sends, Shift+Enter makes a newline; `\"modEnter\"` = Ctrl/\u2318+Enter sends). Removed with\n * `ChatComposer` in the next major.\n *\n * @deprecated Use `Composer`'s `sendKey`; see the README section \"Migrating from ChatComposer\".\n */\nexport interface ChatComposerNewlineOptions {\n  shiftEnterNewline?: boolean;\n  ctrlEnterNewline?: boolean;\n}\n\n/**\n * Deprecated: the key rule of the old `ChatComposer` (which Enter sends, which makes a newline).\n * `Composer` resolves the same choice through `sendKey` in `resolveComposerKeyAction`, and `Chat` draws a `Composer`\n * by default. Kept for `ChatComposer` and `legacyComposer` only; removed in the next major.\n *\n * @deprecated Use `Composer`'s `sendKey`; see the README section \"Migrating from ChatComposer\".\n */\nexport function shouldComposerNewlineOnEnter(\n  event: { key: string; shiftKey: boolean; ctrlKey: boolean; metaKey: boolean },\n  options: ChatComposerNewlineOptions = {}\n): boolean {\n  if (event.key !== \"Enter\") {\n    return false;\n  }\n\n  const { shiftEnterNewline = true, ctrlEnterNewline = true } = options;\n  const isCtrl = event.ctrlKey || event.metaKey;\n\n  if (shiftEnterNewline && event.shiftKey && !isCtrl) {\n    return true;\n  }\n\n  if (ctrlEnterNewline && isCtrl && !event.shiftKey) {\n    return true;\n  }\n\n  return false;\n}\n"],
+  "mappings": "AAAA;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAEA,SAAS,4BAA4B,QAAgE;AAC1G,SAAO,+BAA+B,SAAS,MAAmC;AACpF;AAEO,SAAS,6BACd,QACA,OACoB;AACpB,QAAM,SAAS,QAAQ,MAAM;AAC7B,MAAI,QAAQ;AACV,WAAO;AAAA,EACT;AAEA,MAAI,4BAA4B,MAAM,GAAG;AACvC,WAAO,0BAA0B,MAAM;AAAA,EACzC;AAEA,SAAO;AACT;AAEO,SAAS,8BAA8B,QAAmC;AAC/E,MAAI,4BAA4B,MAAM,GAAG;AACvC,WAAO,2BAA2B,MAAM;AAAA,EAC1C;AAEA,SAAO,OAAO,MAAM;AACtB;AAEO,SAAS,kBAAkB,YAAqC;AACrE,MAAI,WAAW,UAAU,WAAW,QAAQ,GAAG;AAC7C,WAAO;AAAA,EACT;AAEA,SAAO,mCAAmC,KAAK,WAAW,IAAI;AAChE;AAEO,SAAS,oBAAoB,OAA+B;AACjE,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,iBAAiB,OAAO,QAAQ,IAAI,KAAK,KAAK;AAE3D,MAAI,OAAO,MAAM,KAAK,QAAQ,CAAC,GAAG;AAChC,WAAO,OAAO,KAAK;AAAA,EACrB;AAEA,SAAO,IAAI,KAAK,eAAe,QAAW;AAAA,IACxC,MAAM;AAAA,IACN,QAAQ;AAAA,EACV,CAAC,EAAE,OAAO,IAAI;AAChB;AAEO,SAAS,sBAAsB,OAA4C;AAChF,MAAI,SAAS,MAAM;AACjB,WAAO,CAAC,UAAU;AAAA,EACpB;AAEA,MAAI,MAAM,WAAW,GAAG;AACtB,WAAO,CAAC;AAAA,EACV;AAEA,SAAO,oBAAoB,OAAO,CAAC,SAAS,MAAM,SAAS,IAAI,CAAC;AAClE;AAEO,SAAS,kBAAkB,SAA2B,WAA4C;AACvG,MAAI,aAAa,cAAc,YAAY,QAAQ,SAAS,SAAS,GAAG;AACtE,WAAO;AAAA,EACT;AAEA,SAAO,QAAQ,CAAC,KAAK;AACvB;AAEO,SAAS,qBACd,gBACA,eACqC;AACrC,SAAO,sBAAsB,cAAc,EAAE;AAAA,IAC3C,CAAC,SAAoD,SAAS,YAAY,SAAS;AAAA,EACrF;AACF;AAEO,SAAS,0BAA0B,SAM9B;AACV,MAAI,QAAQ,oBAAoB,OAAO;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,oBAAoB,MAAM;AACpC,WAAO;AAAA,EACT;AAEA,MACE,QAAQ,kBACR,QAAQ,mBACR,CAAC,QAAQ,aACR,QAAQ,oBAAoB,cAAc,QAAQ,oBAAoB,eACvE;AACA,WAAO;AAAA,EACT;AAEA,SAAO,QAAQ,QAAQ,mBAAmB,CAAC,QAAQ,YAAY,QAAQ,oBAAoB,UAAU;AACvG;AAqBO,SAAS,6BACd,OACA,UAAsC,CAAC,GAC9B;AACT,MAAI,MAAM,QAAQ,SAAS;AACzB,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,oBAAoB,MAAM,mBAAmB,KAAK,IAAI;AAC9D,QAAM,SAAS,MAAM,WAAW,MAAM;AAEtC,MAAI,qBAAqB,MAAM,YAAY,CAAC,QAAQ;AAClD,WAAO;AAAA,EACT;AAEA,MAAI,oBAAoB,UAAU,CAAC,MAAM,UAAU;AACjD,WAAO;AAAA,EACT;AAEA,SAAO;AACT;",
   "names": []
 }

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

@@ -4,6 +4,8 @@ import { Ripple } from "../../base/ripple";
 import { Icon } from "../../base/icon";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 import { callHandler } from "../../../primitives/callHandler";
+import { isOwnClick } from "../../../utils/ownClick";
+import { splitControlProps } from "../../../utils/controlProps";
 function DeleteIcon(props) {
   const icon = children(() => props.icon);
   return <Show when={icon()} fallback={<Icon name="cancel" size={18} fill={1} />}>
@@ -24,6 +26,7 @@ function Chip(props) {
   );
   const [local, rest] = splitProps(merged, [
     "label",
+    "labelId",
     "class",
     "deleteIcon",
     "icon",
@@ -38,16 +41,24 @@ function Chip(props) {
     "color",
     "disabled",
     "onClick",
+    // The chip sets these on its root too; its own handlers call the caller's first.
+    "onKeyDown",
+    "onPointerDown",
     "deleteAriaLabel",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const icon = children(() => local.icon);
   let rippleActions;
   const onPointerDown = (event) => {
+    callHandler(local.onPointerDown, event);
     if (!local.disabled) {
       rippleActions?.onRipple(event);
     }
   };
+  const onDeleteClick = (event) => {
+    local.onDelete?.(event);
+  };
   const onDeleteMouseDown = (event) => {
     callHandler(local.onDeleteMouseDown, event);
     event.stopPropagation();
@@ -61,18 +72,35 @@ function Chip(props) {
     { "smwb-disabled": local.disabled, "smwb-selected": local.selected }
   );
   const clickable = () => !!local.onClick && !local.disabled;
-  const inner = () => <>
+  const [control, box] = splitControlProps(rest, () => !!local.onClick);
+  let content;
+  const onKeyDown = (event) => {
+    callHandler(local.onKeyDown, event);
+    if (!clickable() || event.target !== content) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      local.onClick?.();
+    }
+  };
+  const onChipClick = (event) => {
+    if (isOwnClick(event, content ?? null)) local.onClick?.();
+  };
+  const iconAndLabel = () => <>
       <Show when={icon()}>
         <span class="smwb-chip__icon">{icon()}</span>
       </Show>
-      <span class="smwb-chip__label">{local.label}</span>
+      <span id={local.labelId} class="smwb-chip__label">
+        {local.label}
+      </span>
+    </>;
+  const trailing = () => <>
       <Show when={local.onDelete}>
         <button
     type="button"
     class="smwb-chip__delete-icon"
     aria-label={local.deleteAriaLabel}
     disabled={local.disabled}
-    onClick={local.onDelete}
+    onClick={onDeleteClick}
     onMouseDown={onDeleteMouseDown}
   >
           <DeleteIcon icon={local.deleteIcon} />
@@ -83,36 +111,44 @@ function Chip(props) {
   return <Show
     when={local.asLink && local.href}
     fallback={<span
-      {...rest}
+      {...box}
       ref={mergeRefs(local.ref)}
-      data-testid="chip"
+      data-testid={local["data-testid"] ?? "chip"}
       class={classes()}
-      role={clickable() ? "button" : void 0}
-      tabindex={clickable() ? 0 : void 0}
-      aria-disabled={local.disabled || void 0}
-      onClick={clickable() ? () => local.onClick?.() : void 0}
-      onKeyDown={clickable() ? (event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          local.onClick?.();
-        }
-      } : void 0}
+      aria-disabled={!local.onClick && local.disabled || void 0}
+      onClick={clickable() ? onChipClick : void 0}
+      onKeyDown={onKeyDown}
       onPointerDown={onPointerDown}
     >
-          {inner()}
+          <span
+      {...control}
+      ref={(el) => content = el}
+      class="smwb-chip__content"
+      role={local.onClick ? "button" : void 0}
+      tabindex={control.tabindex ?? (clickable() ? 0 : void 0)}
+      aria-disabled={!!local.onClick && local.disabled || void 0}
+    >
+            {iconAndLabel()}
+          </span>
+          {
+      /* Beside the button, not in it: the delete button keeps its name and input. */
+    }
+          {trailing()}
         </span>}
   >
       <a
     {...rest}
     ref={mergeRefs(local.ref)}
-    data-testid="chip-link"
+    data-testid={local["data-testid"] ?? "chip-link"}
     class={classes()}
     href={local.href}
+    onKeyDown={local.onKeyDown}
     onPointerDown={onPointerDown}
     target={local.target}
     rel="noreferrer"
   >
-        {inner()}
+        {iconAndLabel()}
+        {trailing()}
       </a>
     </Show>;
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/chip/chip.tsx"],"sourcesContent":["import { 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"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/chip/chip.tsx"],"sourcesContent":["import { 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\";\nimport { isOwnClick } from \"../../../utils/ownClick\";\nimport { splitControlProps } from \"../../../utils/controlProps\";\n\nexport type ChipColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ChipProps extends JSX.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {\n  /**\n   * Class name(s) for the chip's root, a `<span>` (an `<a>` with `asLink`). `style`, `id`, `data-*`, `aria-hidden`,\n   * `ref` and event handlers go to the root too. In a clickable chip (`onClick`), `role`, `tabindex`, `onFocus`,\n   * `onBlur` and the other `aria-*` attributes go to its button, `.smwb-chip__content` (the icon and the label), which\n   * is also the element to focus. Otherwise they stay on the root, which holds the delete button too.\n   */\n  class?: string | undefined;\n  variant?: \"filled\" | \"outlined\";\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  /**\n   * Shows a delete button in the chip and runs when it is pressed: a click, or\n   * Enter / Space while the button has focus. In a clickable chip it sits\n   * beside the chip's button, not inside it, and pressing it does not run the\n   * chip's `onClick`.\n   */\n  onDelete?: (event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void;\n  icon?: JSX.Element;\n  deleteIcon?: JSX.Element;\n  label: string;\n  /**\n   * Makes the chip clickable: its icon and label become a button, named by\n   * them, with a focus ring around the whole chip. The delete button is not\n   * part of that button but its sibling, so it keeps its own name.\n   *\n   * Runs on a click on the chip and on Enter / Space while the chip's button\n   * has focus, but not on a click or key on the delete button.\n   */\n  onClick?: () => void;\n  onDeleteMouseDown?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;\n  /**\n   * Disables the chip: it is dimmed, takes no pointer input and says `aria-disabled`, and its delete button is\n   * disabled too. With `onClick` the chip is still a button, out of the tab order.\n   */\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  /**\n   * Id of the label's element, for another element to take the chip's text as\n   * its name (`aria-labelledby`) without the delete button's name.\n   */\n  labelId?: string | undefined;\n  /** Accessible label for the delete control. */\n  deleteAriaLabel?: string;\n  /** Test id of the root; `chip`, or `chip-link` for a link, unless given. */\n  \"data-testid\"?: string | undefined;\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    \"labelId\",\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    // The chip sets these on its root too; its own handlers call the caller's first.\n    \"onKeyDown\",\n    \"onPointerDown\",\n    \"deleteAriaLabel\",\n    \"ref\",\n    \"data-testid\",\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: JSX.EventHandler<HTMLSpanElement | HTMLAnchorElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    if (!local.disabled) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  // Reads onDelete on each click. Solid binds event handlers once, and <Show>\n  // builds the button in a tracked scope, so binding onDelete itself there\n  // would rebuild the button for each new onDelete.\n  const onDeleteClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    local.onDelete?.(event);\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  // With onClick the chip's content is its button, and what the chip is to the\n  // keyboard and to assistive tech goes there. Without it the chip is not a\n  // control: the caller's role and ARIA attributes stay on the root, around\n  // the delete button too.\n  const [control, box] = splitControlProps(rest, () => !!local.onClick);\n  let content: HTMLSpanElement | undefined;\n\n  // Keys pressed on the delete button bubble up here too; only the keys of the\n  // chip's button activate it.\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (!clickable() || event.target !== content) return;\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      local.onClick?.();\n    }\n  };\n\n  // A click on the chip's button, or on its padding, activates the chip: not\n  // one on the delete button, nor one in a Portal rendered inside, which Solid\n  // delivers here too.\n  const onChipClick: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) => {\n    if (isOwnClick(event, content ?? null)) local.onClick?.();\n  };\n\n  // The chip's own content: its button when it is clickable.\n  const iconAndLabel = (): JSX.Element => (\n    <>\n      <Show when={icon()}>\n        <span class=\"smwb-chip__icon\">{icon()}</span>\n      </Show>\n      <span id={local.labelId} class=\"smwb-chip__label\">\n        {local.label}\n      </span>\n    </>\n  );\n  // After the content: in a clickable chip, beside its button, not in it.\n  const trailing = (): JSX.Element => (\n    <>\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={onDeleteClick}\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          {...box}\n          ref={mergeRefs(local.ref)}\n          data-testid={local[\"data-testid\"] ?? \"chip\"}\n          class={classes()}\n          // A disabled chip says so where the caller's ARIA attributes are: on\n          // its button with onClick, on the root without. Where it sets none\n          // (undefined), the caller's stay.\n          aria-disabled={(!local.onClick && local.disabled) || undefined}\n          onClick={clickable() ? onChipClick : undefined}\n          onKeyDown={onKeyDown}\n          onPointerDown={onPointerDown}\n        >\n          <span\n            {...control}\n            ref={(el) => (content = el)}\n            class=\"smwb-chip__content\"\n            // With onClick the content is the chip's button, and a disabled chip\n            // says so: these win over the caller's, and where the chip sets none\n            // (undefined), the caller's stay. Its tabindex is a default: the\n            // caller's wins, e.g. for roving focus.\n            role={local.onClick ? \"button\" : undefined}\n            tabindex={control.tabindex ?? (clickable() ? 0 : undefined)}\n            aria-disabled={(!!local.onClick && local.disabled) || undefined}\n          >\n            {iconAndLabel()}\n          </span>\n          {/* Beside the button, not in it: the delete button keeps its name and input. */}\n          {trailing()}\n        </span>\n      }\n    >\n      <a\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        data-testid={local[\"data-testid\"] ?? \"chip-link\"}\n        class={classes()}\n        href={local.href}\n        onKeyDown={local.onKeyDown}\n        onPointerDown={onPointerDown}\n        target={local.target}\n        rel=\"noreferrer\"\n      >\n        {iconAndLabel()}\n        {trailing()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Chip;\n"],"mappings":"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","names":[],"file":"chip.jsx"}

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

@@ -27,20 +27,23 @@ function ChipGroup(props) {
       local.onChange?.(value);
     }
   };
-  return <div {...rest} role="group" class={cn("smwb-chip-group", local.class)}>
+  return (
+    // role="group" is a default: the caller's own wins, and an explicit undefined keeps it.
+    <div {...rest} role={rest.role ?? "group"} class={cn("smwb-chip-group", local.class)}>
       <For each={local.options}>
         {(option) => <Chip
-    label={option.label}
-    size={local.size}
-    color={local.color}
-    selected={isSelected(option.value)}
-    variant={isSelected(option.value) ? "filled" : "outlined"}
-    disabled={!!(local.disabled || option.disabled)}
-    onClick={() => toggle(option.value)}
-    {...option.icon ? { icon: option.icon } : {}}
-  />}
+      label={option.label}
+      size={local.size}
+      color={local.color}
+      selected={isSelected(option.value)}
+      variant={isSelected(option.value) ? "filled" : "outlined"}
+      disabled={!!(local.disabled || option.disabled)}
+      onClick={() => toggle(option.value)}
+      {...option.icon ? { icon: option.icon } : {}}
+    />}
       </For>
-    </div>;
+    </div>
+  );
 }
 var chipGroup_default = ChipGroup;
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/chipGroup/chipGroup.tsx"],"sourcesContent":["import { 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,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 { 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    // role=\"group\" is a default: the caller's own wins, and an explicit undefined keeps it.\n    <div {...rest} role={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,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;AAAA;AAAA,IAEE,CAAC,QAAQ,MAAM,MAAM,KAAK,QAAQ,SAAS,OAAO,GAAG,mBAAmB,MAAM,KAAK,GAAG;AAAA,MACpF,CAAC,IAAI,MAAM,MAAM,SAAS;AAAA,SACvB,CAAC,WACA,CAAC;AAAA,MACC,OAAO,OAAO;AAAA,MACd,MAAM,MAAM;AAAA,MACZ,OAAO,MAAM;AAAA,MACb,UAAU,WAAW,OAAO,KAAK;AAAA,MACjC,SAAS,WAAW,OAAO,KAAK,IAAI,WAAW;AAAA,MAC/C,UAAU,CAAC,EAAE,MAAM,YAAY,OAAO;AAAA,MACtC,SAAS,MAAM,OAAO,OAAO,KAAK;AAAA,UAC7B,OAAO,OAAO,EAAE,MAAM,OAAO,KAAK,IAAI,CAAC;AAAA,IAC9C,GACA;AAAA,MACJ,EAbC,IAaK;AAAA,IACR,EAfC;AAAA;AAiBL;AAEA,IAAO,oBAAQ;","names":[],"file":"chipGroup.jsx"}