@carbon/ai-chat-components 0.10.0 → 0.11.0

package/es/components/workspace-shell/src/workspace-shell.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
 /**
  * Workspace Shell.
  *
@@ -11,7 +11,21 @@ import { LitElement } from "lit";
  *
  */
 declare class CDSAIChatWorkspaceShell extends LitElement {
-    static styles: any;
+    static styles: any[];
+    /**
+     * Enable automatic header collapsible behavior based on available space.
+     * When true, the header will automatically become collapsible when the
+     * body would have less space than the header. This prop is currently experimental
+     * and is subject to future changes.
+     *
+     * @experimental
+     */
+    autoCollapsibleHeader: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    private cleanupHeaderCollapsible;
+    private setupHeaderCollapsibleManager;
     render(): import("lit-html").TemplateResult<1>;
 }
 export { CDSAIChatWorkspaceShell };

package/es/components/workspace-shell/src/workspace-shell.js

@@ -7,12 +7,15 @@
 
 import { __decorate } from 'tslib';
 import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { carbonElement } from '../../../globals/decorators/carbon-element.js';
 import prefix from '../../../globals/settings.js';
+import commonStyles from '../../../globals/scss/common.scss.js';
 import styles from './workspace-shell.scss.js';
+import { HeaderCollapsibleManager } from './header-collapsible-manager.js';
 
 /*
- *  Copyright IBM Corp. 2025
+ *  Copyright IBM Corp. 2026
  *
  *  This source code is licensed under the Apache-2.0 license found in the
  *  LICENSE file in the root directory of this source tree.
@@ -31,21 +34,88 @@ import styles from './workspace-shell.scss.js';
  *
  */
 let CDSAIChatWorkspaceShell = class CDSAIChatWorkspaceShell extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Enable automatic header collapsible behavior based on available space.
+         * When true, the header will automatically become collapsible when the
+         * body would have less space than the header. This prop is currently experimental
+         * and is subject to future changes.
+         *
+         * @experimental
+         */
+        this.autoCollapsibleHeader = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupHeaderCollapsibleManager();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.headerCollapsibleManager?.disconnect();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // If autoCollapsibleHeader changes, setup or teardown manager
+        if (changedProperties.has("autoCollapsibleHeader")) {
+            if (this.autoCollapsibleHeader) {
+                this.setupHeaderCollapsibleManager();
+            }
+            else {
+                // Clean up: remove collapsible attribute from header before disconnecting
+                this.cleanupHeaderCollapsible();
+                this.headerCollapsibleManager?.disconnect();
+                this.headerCollapsibleManager = undefined;
+            }
+        }
+    }
+    cleanupHeaderCollapsible() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        const headerSlot = this.shadowRoot.querySelector('slot[name="header"]');
+        const headerElement = headerSlot?.assignedElements()[0];
+        if (headerElement) {
+            headerElement.removeAttribute("collapsible");
+        }
+    }
+    setupHeaderCollapsibleManager() {
+        // Only setup if feature is enabled
+        if (!this.autoCollapsibleHeader) {
+            return;
+        }
+        // Don't create a new manager if one already exists
+        if (this.headerCollapsibleManager) {
+            return;
+        }
+        this.updateComplete.then(() => {
+            if (!this.shadowRoot) {
+                return;
+            }
+            // Double-check in case manager was created while waiting for updateComplete
+            if (this.headerCollapsibleManager) {
+                return;
+            }
+            this.headerCollapsibleManager = new HeaderCollapsibleManager(this.shadowRoot, this);
+            this.headerCollapsibleManager.connect((state) => {
+                this.headerCollapsibleManager?.updateHeaderCollapsible(state.shouldCollapse);
+            });
+        });
+    }
     render() {
         return html `
       <slot name="toolbar"></slot>
       <slot name="notification"></slot>
       <slot name="header"></slot>
-      </div>
-      <div class="body">
-        <slot name="body"></slot>
-      </div>
+      <slot name="body"></slot>
       <slot name="footer"></slot>
-  </div>
     `;
     }
 };
-CDSAIChatWorkspaceShell.styles = styles;
+CDSAIChatWorkspaceShell.styles = [commonStyles, styles];
+__decorate([
+    property({ type: Boolean, attribute: "auto-collapsible-header" })
+], CDSAIChatWorkspaceShell.prototype, "autoCollapsibleHeader", void 0);
 CDSAIChatWorkspaceShell = __decorate([
     carbonElement(`${prefix}-workspace-shell`)
 ], CDSAIChatWorkspaceShell);

package/es/components/workspace-shell/src/workspace-shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"workspace-shell.js","sources":["../../../../src/components/workspace-shell/src/workspace-shell.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAOH;;;;;;;;;;AAUG;AAEH,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU,CAAA;IAG9C,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA;;;;;;;;;;KAUV;IACH;;AAdO,uBAAA,CAAA,MAAM,GAAG,MAAH;AADT,uBAAuB,GAAA,UAAA,CAAA;AAD5B,IAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,gBAAA,CAAkB;AACpC,CAAA,EAAA,uBAAuB,CAgB5B;AAGD,gCAAe,uBAAuB;;;;"}
+{"version":3,"file":"workspace-shell.js","sources":["../../../../src/components/workspace-shell/src/workspace-shell.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAUH;;;;;;;;;;AAUG;AAEH,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU,CAAA;AAAhD,IAAA,WAAA,GAAA;;AAGE;;;;;;;AAOG;QAEH,IAAA,CAAA,qBAAqB,GAAG,KAAK;IA2F/B;IApFE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,6BAA6B,EAAE;IACtC;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;AAC5B,QAAA,IAAI,CAAC,wBAAwB,EAAE,UAAU,EAAE;IAC7C;AAEA,IAAA,OAAO,CAAC,iBAAiC,EAAA;AACvC,QAAA,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC;;AAGhC,QAAA,IAAI,iBAAiB,CAAC,GAAG,CAAC,uBAAuB,CAAC,EAAE;AAClD,YAAA,IAAI,IAAI,CAAC,qBAAqB,EAAE;gBAC9B,IAAI,CAAC,6BAA6B,EAAE;YACtC;iBAAO;;gBAEL,IAAI,CAAC,wBAAwB,EAAE;AAC/B,gBAAA,IAAI,CAAC,wBAAwB,EAAE,UAAU,EAAE;AAC3C,gBAAA,IAAI,CAAC,wBAAwB,GAAG,SAAS;YAC3C;QACF;IACF;IAEQ,wBAAwB,GAAA;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB;QACF;QAEA,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAC9C,qBAAqB,CACtB;QACD,MAAM,aAAa,GAAG,UAAU,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAgB;QAEtE,IAAI,aAAa,EAAE;AACjB,YAAA,aAAa,CAAC,eAAe,CAAC,aAAa,CAAC;QAC9C;IACF;IAEQ,6BAA6B,GAAA;;AAEnC,QAAA,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE;YAC/B;QACF;;AAGA,QAAA,IAAI,IAAI,CAAC,wBAAwB,EAAE;YACjC;QACF;AAEA,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAK;AAC5B,YAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;gBACpB;YACF;;AAGA,YAAA,IAAI,IAAI,CAAC,wBAAwB,EAAE;gBACjC;YACF;AAEA,YAAA,IAAI,CAAC,wBAAwB,GAAG,IAAI,wBAAwB,CAC1D,IAAI,CAAC,UAAU,EACf,IAAI,CACL;YAED,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;gBAC9C,IAAI,CAAC,wBAAwB,EAAE,uBAAuB,CACpD,KAAK,CAAC,cAAc,CACrB;AACH,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;IACJ;IAEA,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA;;;;;;KAMV;IACH;;AArGO,uBAAA,CAAA,MAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC;AAWtC,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,yBAAyB,EAAE;AACnC,CAAA,EAAA,uBAAA,CAAA,SAAA,EAAA,uBAAA,EAAA,MAAA,CAAA;AAZ1B,uBAAuB,GAAA,UAAA,CAAA;AAD5B,IAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,gBAAA,CAAkB;AACpC,CAAA,EAAA,uBAAuB,CAuG5B;AAGD,gCAAe,uBAAuB;;;;"}

package/es/components/workspace-shell/src/workspace-shell.scss.js

@@ -7,7 +7,7 @@
 
 import { css } from 'lit';
 
-var styles = css(["a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{font-feature-settings:\"liga\" 1;border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}button,input,select,textarea{border-radius:0;font-family:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-background,#fff);color:var(--cds-text-primary,#161616);line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;text-rendering:optimizeLegibility}code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}strong{font-weight:600}@media screen and (-ms-high-contrast:active){svg{fill:ButtonText}}h1{font-size:var(--cds-heading-06-font-size,2.625rem);font-weight:var(--cds-heading-06-font-weight,300);letter-spacing:var(--cds-heading-06-letter-spacing,0);line-height:var(--cds-heading-06-line-height,1.199)}h2{font-size:var(--cds-heading-05-font-size,2rem);font-weight:var(--cds-heading-05-font-weight,400);letter-spacing:var(--cds-heading-05-letter-spacing,0);line-height:var(--cds-heading-05-line-height,1.25)}h3{font-size:var(--cds-heading-04-font-size,1.75rem);font-weight:var(--cds-heading-04-font-weight,400);letter-spacing:var(--cds-heading-04-letter-spacing,0);line-height:var(--cds-heading-04-line-height,1.28572)}h4{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);letter-spacing:var(--cds-heading-03-letter-spacing,0);line-height:var(--cds-heading-03-line-height,1.4)}h5{font-size:var(--cds-heading-02-font-size,1rem);font-weight:var(--cds-heading-02-font-weight,600);letter-spacing:var(--cds-heading-02-letter-spacing,0);line-height:var(--cds-heading-02-line-height,1.5)}h6{font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);letter-spacing:var(--cds-heading-01-letter-spacing,.16px);line-height:var(--cds-heading-01-line-height,1.42857)}p{font-size:var(--cds-body-02-font-size,1rem);font-weight:var(--cds-body-02-font-weight,400);letter-spacing:var(--cds-body-02-letter-spacing,0);line-height:var(--cds-body-02-line-height,1.5)}a{color:var(--cds-link-primary,#0062fe)}em{font-style:italic}.workspace{block-size:100%;display:flex;flex-direction:row;inline-size:100%;max-block-size:100%;max-inline-size:100%;overflow:hidden}.body{flex-grow:1}:host(cds-aichat-workspace-shell){background-color:var(--cds-chat-shell-background);block-size:100%;border:.0625rem solid var(--cds-chat-bubble-border,#e0e0e0);border-radius:.5rem;box-shadow:-10px 0 100px -24px var(--cds-ai-popover-shadow-outer-01,rgba(0,67,206,.06)),0 10px 40px -24px var(--cds-ai-popover-shadow-outer-02,rgba(0,0,0,.04));box-sizing:border-box!important;color:var(--cds-text-secondary,#525252);display:flex;flex-direction:column;font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);inline-size:100%;letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);overflow:hidden}:host(cds-aichat-workspace-shell) slot[name=toolbar]{min-inline-size:0}:host(cds-aichat-workspace-shell) ::slotted([slot=notification]){box-sizing:border-box;max-inline-size:100%!important}::slotted(cds-aichat-toolbar){border-block-end:.0625rem solid var(--cds-chat-bubble-border);box-sizing:border-box;display:grid;inline-size:100%;max-inline-size:100%;min-inline-size:0}.cds-aichat-workspace-shell__toolbar-action{display:grid;grid-auto-columns:2.5rem;grid-auto-flow:column}.cds-aichat-workspace-shell__toolbar-action ::slotted(cds-ai-label){block-size:2.5rem}:host(cds-aichat-workspace-shell-body){block-size:100%;display:block;min-block-size:0;overflow:auto;padding:1.5rem 2rem}"]);
+var styles = css([":host(cds-aichat-workspace-shell){background-color:var(--cds-chat-shell-background);block-size:100%;border:.0625rem solid var(--cds-chat-bubble-border,#e0e0e0);border-radius:.5rem;box-shadow:-10px 0 100px -24px var(--cds-ai-popover-shadow-outer-01,rgba(0,67,206,.06)),0 10px 40px -24px var(--cds-ai-popover-shadow-outer-02,rgba(0,0,0,.04));box-sizing:border-box!important;color:var(--cds-text-secondary,#525252);display:flex;flex-direction:column;font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);inline-size:100%;letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);min-block-size:25rem}:host(cds-aichat-workspace-shell) slot[name=toolbar]{flex-shrink:0;min-inline-size:0}:host(cds-aichat-workspace-shell) slot[name=notification]{flex-shrink:0}:host(cds-aichat-workspace-shell) ::slotted([slot=notification]){box-sizing:border-box;max-inline-size:100%!important}:host(cds-aichat-workspace-shell) slot[name=header]{flex-shrink:0}:host(cds-aichat-workspace-shell) slot[name=body]{flex:1 1 auto;min-block-size:0}:host(cds-aichat-workspace-shell) slot[name=footer]{flex-shrink:0}::slotted(cds-aichat-toolbar){border-block-end:.0625rem solid var(--cds-chat-bubble-border);box-sizing:border-box;inline-size:100%;max-inline-size:100%;min-inline-size:0}.cds-aichat-workspace-shell__toolbar-action{display:grid;grid-auto-columns:2.5rem;grid-auto-flow:column}.cds-aichat-workspace-shell__toolbar-action ::slotted(cds-ai-label){block-size:2.5rem}:host(cds-aichat-workspace-shell-body){display:flex;flex-direction:column;min-block-size:0;overflow:auto;padding:1.5rem 2rem}"]);
 
 export { styles as default };
 //# sourceMappingURL=workspace-shell.scss.js.map

package/es/globals/scss/common.scss.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+var commonStyles = css([".cds--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}:host{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px;border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}:host *,:host :after,:host :before{box-sizing:inherit}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:1em;margin:0;padding:0;vertical-align:baseline}button,input,select,textarea{border-radius:0;font-family:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}"]);
+
+export { commonStyles as default };
+//# sourceMappingURL=common.scss.js.map

package/es/globals/scss/common.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/es/globals/utils/focus-utils.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Gets the deepest active element, traversing through all shadow DOM boundaries.
+ * This handles nested shadow roots, slotted elements, and will return the actual
+ * focused element regardless of how many shadow DOM levels exist.
+ *
+ * @returns The deepest active element, or null if no element has focus
+ */
+declare function getDeepActiveElement(): Element | null;
+/**
+ * Checks if an element should be ignored due to visibility or accessibility attributes.
+ *
+ * @param element - The DOM element to check
+ * @param exceptions - Array of selectors to ignore when checking the element (e.g., 'dialog', '[popover]')
+ * @returns True if the element should be ignored by focus management, false otherwise
+ */
+declare function isElementInvisible(element: Element, exceptions?: string[]): boolean;
+/**
+ * Checks if an element is focusable. An element is considered focusable if it matches
+ * standard focusable elements criteria (such as buttons, inputs, etc., that are not disabled
+ * and do not have a negative tabindex) or is a custom element with a shadow root that delegates focus.
+ * Based on https://gist.github.com/oscarmarina/9ce95f491a4c53ed01d989de4a87c0c9
+ *
+ * @param element - The DOM element to check for focusability
+ * @returns True if the element is focusable, false otherwise
+ */
+declare function isFocusable(element: Element): boolean;
+/**
+ * Attempts to focus an element if it's focusable, visible, and not disabled.
+ * This is an enhanced version that checks visibility, accessibility attributes,
+ * and proper focusability before attempting to set focus. It is shadow DOM aware
+ * and handles slotted elements correctly.
+ *
+ * @param element - The element to attempt to focus
+ * @param exceptions - Array of selectors to ignore when checking visibility (e.g., 'dialog', '[popover]')
+ * @returns True if focus was successfully set, false otherwise
+ */
+declare function tryFocus(element: Element | null | undefined, exceptions?: string[]): boolean;
+/**
+ * Traverse the composed tree from the root, selecting elements that meet the provided filter criteria.
+ * This function properly handles Shadow DOM boundaries.
+ * Based on https://github.com/JanMiksovsky/elix/blob/main/src/core/dom.js#L320
+ *
+ * @param node - The root node for traversal
+ * @param whatToShow - NodeFilter code for node types to include (use 0 to retrieve all nodes)
+ * @param filter - Filters nodes. Child nodes are considered even if parent does not satisfy the filter
+ * @param skipNode - Determines whether to skip a node and its children
+ * @returns An iterator yielding nodes meeting the filter criteria
+ */
+declare function walkComposedTree(node: Node, whatToShow?: number, filter?: (node: Node) => boolean, skipNode?: (node: Node) => boolean): IterableIterator<Node>;
+/**
+ * Retrieves the first and last focusable children of a node using a TreeWalker.
+ *
+ * @param walker - The TreeWalker object used to traverse the node's children
+ * @returns A tuple containing the first and last focusable children. If no focusable children are found, `null` is returned for both
+ */
+declare function getFirstAndLastFocusableChildren(walker: IterableIterator<HTMLElement>): [first: HTMLElement | null, last: HTMLElement | null];
+export { getDeepActiveElement, isElementInvisible, isFocusable, tryFocus, walkComposedTree, getFirstAndLastFocusableChildren, };

package/es/globals/utils/focus-utils.js

@@ -0,0 +1,180 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ *  Copyright IBM Corp. 2026
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */
+/**
+ * Gets the deepest active element, traversing through all shadow DOM boundaries.
+ * This handles nested shadow roots, slotted elements, and will return the actual
+ * focused element regardless of how many shadow DOM levels exist.
+ *
+ * @returns The deepest active element, or null if no element has focus
+ */
+function getDeepActiveElement() {
+    let activeElement = document.activeElement;
+    // Traverse through all shadow DOM levels and handle slotted elements
+    while (activeElement) {
+        // If the active element is a slot, get the actual assigned element that has focus
+        if (activeElement instanceof HTMLSlotElement) {
+            const assignedElements = activeElement.assignedElements({
+                flatten: true,
+            });
+            // Find which assigned element actually has focus
+            const focusedAssigned = assignedElements.find((el) => {
+                if (el.shadowRoot?.activeElement) {
+                    return true;
+                }
+                return (el === document.activeElement || el.contains(document.activeElement));
+            });
+            if (focusedAssigned) {
+                activeElement = focusedAssigned;
+                continue;
+            }
+        }
+        // Check if there's a shadow root with an active element
+        const shadowRoot = activeElement.shadowRoot;
+        if (shadowRoot?.activeElement) {
+            activeElement = shadowRoot.activeElement;
+            continue;
+        }
+        // No deeper level found
+        break;
+    }
+    return activeElement;
+}
+/**
+ * Checks if an element should be ignored due to visibility or accessibility attributes.
+ *
+ * @param element - The DOM element to check
+ * @param exceptions - Array of selectors to ignore when checking the element (e.g., 'dialog', '[popover]')
+ * @returns True if the element should be ignored by focus management, false otherwise
+ */
+function isElementInvisible(element, exceptions = ["dialog", "[popover]"]) {
+    if (!element || !(element instanceof HTMLElement)) {
+        return false;
+    }
+    if (exceptions.length > 0 && element.matches(exceptions.join(","))) {
+        return false;
+    }
+    const computedStyle = window.getComputedStyle(element);
+    const isStyleHidden = computedStyle.display === "none" || computedStyle.visibility === "hidden";
+    const isAttributeHidden = element.matches('[disabled], [hidden], [inert], [aria-hidden="true"]');
+    return isStyleHidden || isAttributeHidden;
+}
+/**
+ * Checks if an element is focusable. An element is considered focusable if it matches
+ * standard focusable elements criteria (such as buttons, inputs, etc., that are not disabled
+ * and do not have a negative tabindex) or is a custom element with a shadow root that delegates focus.
+ * Based on https://gist.github.com/oscarmarina/9ce95f491a4c53ed01d989de4a87c0c9
+ *
+ * @param element - The DOM element to check for focusability
+ * @returns True if the element is focusable, false otherwise
+ */
+function isFocusable(element) {
+    if (!(element instanceof HTMLElement)) {
+        return false;
+    }
+    // https://stackoverflow.com/a/30753870/76472
+    const knownFocusableElements = 'a[href],area[href],button:not([disabled]),details,iframe,object,input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[contentEditable="true"],[tabindex]:not([tabindex^="-"])';
+    if (element.matches(knownFocusableElements)) {
+        return true;
+    }
+    const isDisabledCustomElement = element.localName.includes("-") &&
+        element.matches('[disabled], [aria-disabled="true"]');
+    if (isDisabledCustomElement) {
+        return false;
+    }
+    return element.shadowRoot?.delegatesFocus ?? false;
+}
+/**
+ * Attempts to focus an element if it's focusable, visible, and not disabled.
+ * This is an enhanced version that checks visibility, accessibility attributes,
+ * and proper focusability before attempting to set focus. It is shadow DOM aware
+ * and handles slotted elements correctly.
+ *
+ * @param element - The element to attempt to focus
+ * @param exceptions - Array of selectors to ignore when checking visibility (e.g., 'dialog', '[popover]')
+ * @returns True if focus was successfully set, false otherwise
+ */
+function tryFocus(element, exceptions) {
+    if (!element || !(element instanceof HTMLElement)) {
+        return false;
+    }
+    // Check if element is invisible or should be ignored
+    if (isElementInvisible(element, exceptions)) {
+        return false;
+    }
+    // Check if element is focusable
+    if (!isFocusable(element)) {
+        return false;
+    }
+    // Get the current deep active element (shadow DOM aware)
+    const previousActiveElement = getDeepActiveElement();
+    // Only call focus if the element doesn't already have focus
+    if (previousActiveElement !== element) {
+        element.focus();
+    }
+    // Verify focus was actually set by checking the deep active element
+    // This works across shadow DOM boundaries, with slotted elements, and delegatesFocus configurations
+    const currentActiveElement = getDeepActiveElement();
+    return (currentActiveElement === element || element.contains(currentActiveElement));
+}
+/**
+ * Traverse the composed tree from the root, selecting elements that meet the provided filter criteria.
+ * This function properly handles Shadow DOM boundaries.
+ * Based on https://github.com/JanMiksovsky/elix/blob/main/src/core/dom.js#L320
+ *
+ * @param node - The root node for traversal
+ * @param whatToShow - NodeFilter code for node types to include (use 0 to retrieve all nodes)
+ * @param filter - Filters nodes. Child nodes are considered even if parent does not satisfy the filter
+ * @param skipNode - Determines whether to skip a node and its children
+ * @returns An iterator yielding nodes meeting the filter criteria
+ */
+function* walkComposedTree(node, whatToShow = 0, filter = () => true, skipNode = () => false) {
+    if ((whatToShow && node.nodeType !== whatToShow) || skipNode(node)) {
+        return;
+    }
+    if (filter(node)) {
+        yield node;
+    }
+    const children = 
+    // eslint-disable-next-line no-nested-ternary
+    node instanceof HTMLElement && node.shadowRoot
+        ? node.shadowRoot.children
+        : node instanceof HTMLSlotElement
+            ? node.assignedNodes({ flatten: true })
+            : node.childNodes;
+    for (const child of children) {
+        yield* walkComposedTree(child, whatToShow, filter, skipNode);
+    }
+}
+/**
+ * Retrieves the first and last focusable children of a node using a TreeWalker.
+ *
+ * @param walker - The TreeWalker object used to traverse the node's children
+ * @returns A tuple containing the first and last focusable children. If no focusable children are found, `null` is returned for both
+ */
+function getFirstAndLastFocusableChildren(walker) {
+    let firstFocusableChild = null;
+    let lastFocusableChild = null;
+    for (const currentNode of walker) {
+        if (!firstFocusableChild) {
+            firstFocusableChild = currentNode;
+        }
+        lastFocusableChild = currentNode;
+    }
+    return [firstFocusableChild, lastFocusableChild];
+}
+
+export { getDeepActiveElement, getFirstAndLastFocusableChildren, isElementInvisible, isFocusable, tryFocus, walkComposedTree };
+//# sourceMappingURL=focus-utils.js.map

package/es/globals/utils/focus-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-utils.js","sources":["../../../src/globals/utils/focus-utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAAA;;;;;;;AAOG;AAEH;;;;;;AAMG;AACH,SAAS,oBAAoB,GAAA;AAC3B,IAAA,IAAI,aAAa,GAAG,QAAQ,CAAC,aAAa;;IAG1C,OAAO,aAAa,EAAE;;AAEpB,QAAA,IAAI,aAAa,YAAY,eAAe,EAAE;AAC5C,YAAA,MAAM,gBAAgB,GAAG,aAAa,CAAC,gBAAgB,CAAC;AACtD,gBAAA,OAAO,EAAE,IAAI;AACd,aAAA,CAAC;;YAEF,MAAM,eAAe,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,EAAE,KAAI;AACnD,gBAAA,IAAK,EAAU,CAAC,UAAU,EAAE,aAAa,EAAE;AACzC,oBAAA,OAAO,IAAI;gBACb;AACA,gBAAA,QACE,EAAE,KAAK,QAAQ,CAAC,aAAa,IAAI,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC;AAExE,YAAA,CAAC,CAAC;YACF,IAAI,eAAe,EAAE;gBACnB,aAAa,GAAG,eAAe;gBAC/B;YACF;QACF;;AAGA,QAAA,MAAM,UAAU,GAAI,aAAqB,CAAC,UAAU;AACpD,QAAA,IAAI,UAAU,EAAE,aAAa,EAAE;AAC7B,YAAA,aAAa,GAAG,UAAU,CAAC,aAAa;YACxC;QACF;;QAGA;IACF;AAEA,IAAA,OAAO,aAAa;AACtB;AAEA;;;;;;AAMG;AACH,SAAS,kBAAkB,CACzB,OAAgB,EAChB,aAAuB,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAA;IAE9C,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,YAAY,WAAW,CAAC,EAAE;AACjD,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE;AAClE,QAAA,OAAO,KAAK;IACd;IAEA,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC;AACtD,IAAA,MAAM,aAAa,GACjB,aAAa,CAAC,OAAO,KAAK,MAAM,IAAI,aAAa,CAAC,UAAU,KAAK,QAAQ;IAC3E,MAAM,iBAAiB,GAAG,OAAO,CAAC,OAAO,CACvC,qDAAqD,CACtD;IAED,OAAO,aAAa,IAAI,iBAAiB;AAC3C;AAEA;;;;;;;;AAQG;AACH,SAAS,WAAW,CAAC,OAAgB,EAAA;AACnC,IAAA,IAAI,EAAE,OAAO,YAAY,WAAW,CAAC,EAAE;AACrC,QAAA,OAAO,KAAK;IACd;;IAGA,MAAM,sBAAsB,GAC1B,gMAAgM;AAElM,IAAA,IAAI,OAAO,CAAC,OAAO,CAAC,sBAAsB,CAAC,EAAE;AAC3C,QAAA,OAAO,IAAI;IACb;IAEA,MAAM,uBAAuB,GAC3B,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC;AAC/B,QAAA,OAAO,CAAC,OAAO,CAAC,oCAAoC,CAAC;IAEvD,IAAI,uBAAuB,EAAE;AAC3B,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,OAAO,OAAO,CAAC,UAAU,EAAE,cAAc,IAAI,KAAK;AACpD;AAEA;;;;;;;;;AASG;AACH,SAAS,QAAQ,CACf,OAAmC,EACnC,UAAqB,EAAA;IAErB,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,YAAY,WAAW,CAAC,EAAE;AACjD,QAAA,OAAO,KAAK;IACd;;AAGA,IAAA,IAAI,kBAAkB,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;AAC3C,QAAA,OAAO,KAAK;IACd;;AAGA,IAAA,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE;AACzB,QAAA,OAAO,KAAK;IACd;;AAGA,IAAA,MAAM,qBAAqB,GAAG,oBAAoB,EAAE;;AAGpD,IAAA,IAAI,qBAAqB,KAAK,OAAO,EAAE;QACrC,OAAO,CAAC,KAAK,EAAE;IACjB;;;AAIA,IAAA,MAAM,oBAAoB,GAAG,oBAAoB,EAAE;AACnD,IAAA,QACE,oBAAoB,KAAK,OAAO,IAAI,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAC;AAE9E;AAEA;;;;;;;;;;AAUG;AACH,UAAU,gBAAgB,CACxB,IAAU,EACV,UAAU,GAAG,CAAC,EACd,SAAkC,MAAM,IAAI,EAC5C,WAAoC,MAAM,KAAK,EAAA;AAE/C,IAAA,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,KAAK,QAAQ,CAAC,IAAI,CAAC,EAAE;QAClE;IACF;AAEA,IAAA,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE;AAChB,QAAA,MAAM,IAAI;IACZ;AAEA,IAAA,MAAM,QAAQ;;AAEZ,IAAA,IAAI,YAAY,WAAW,IAAI,IAAI,CAAC;AAClC,UAAE,IAAI,CAAC,UAAU,CAAC;UAChB,IAAI,YAAY;cACd,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AACtC,cAAE,IAAI,CAAC,UAAU;AAEvB,IAAA,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE;AAC5B,QAAA,OAAO,gBAAgB,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC;IAC9D;AACF;AAEA;;;;;AAKG;AACH,SAAS,gCAAgC,CACvC,MAAqC,EAAA;IAErC,IAAI,mBAAmB,GAAuB,IAAI;IAClD,IAAI,kBAAkB,GAAuB,IAAI;AAEjD,IAAA,KAAK,MAAM,WAAW,IAAI,MAAM,EAAE;QAChC,IAAI,CAAC,mBAAmB,EAAE;YACxB,mBAAmB,GAAG,WAAW;QACnC;QACA,kBAAkB,GAAG,WAAW;IAClC;AAEA,IAAA,OAAO,CAAC,mBAAmB,EAAE,kBAAkB,CAAC;AAClD;;;;"}

package/es/react/card.d.ts

@@ -1,9 +1,6 @@
 import React from "react";
-import CDSAIChatCard from "../components/card/src/card.js";
-import CDSAIChatCardFooter from "../components/card/src/card-footer.js";
-import CDSAIChatCardSteps from "../components/card/src/card-steps.js";
-declare const Card: React.ForwardRefExoticComponent<Omit<Record<string, unknown>, "ref"> & React.RefAttributes<CDSAIChatCard>>;
-declare const CardFooter: React.ForwardRefExoticComponent<Omit<Record<string, unknown>, "ref"> & React.RefAttributes<CDSAIChatCardFooter>>;
-declare const CardSteps: React.ForwardRefExoticComponent<Omit<Record<string, unknown>, "ref"> & React.RefAttributes<CDSAIChatCardSteps>>;
+declare const Card: React.ComponentType<any>;
+declare const CardFooter: React.ComponentType<any>;
+declare const CardSteps: React.ComponentType<any>;
 export { Card, CardFooter, CardSteps };
 export default Card;

package/es/react/chain-of-thought-step.d.ts

@@ -1,4 +1,3 @@
 import React from "react";
-import { CDSAIChatChainOfThoughtStep } from "../components/chain-of-thought/src/chain-of-thought-step.js";
-declare const ChainOfThoughtStep: React.ForwardRefExoticComponent<Omit<Record<string, unknown>, "ref"> & React.RefAttributes<CDSAIChatChainOfThoughtStep>>;
+declare const ChainOfThoughtStep: React.ComponentType<any>;
 export default ChainOfThoughtStep;

package/es/react/chain-of-thought-toggle.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import CDSAIChatChainOfThoughtToggle from "../components/chain-of-thought/src/chain-of-thought-toggle.js";
 import { type ChainOfThoughtToggleEventDetail } from "../components/chain-of-thought/defs.js";
-declare const ChainOfThoughtToggle: React.ForwardRefExoticComponent<Omit<Record<string, unknown>, "ref"> & React.RefAttributes<CDSAIChatChainOfThoughtToggle>>;
+declare const ChainOfThoughtToggle: React.ComponentType<any>;
 export type { ChainOfThoughtToggleEventDetail };
 export default ChainOfThoughtToggle;

package/es/react/chain-of-thought.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
-import CDSAIChatChainOfThought from "../components/chain-of-thought/src/chain-of-thought.js";
 import { type ChainOfThoughtOnToggle, ChainOfThoughtStepStatus, type ChainOfThoughtStepToggleEventDetail, type ChainOfThoughtToggleEventDetail } from "../components/chain-of-thought/defs.js";
-declare const ChainOfThought: React.ForwardRefExoticComponent<Omit<Record<string, unknown>, "ref"> & React.RefAttributes<CDSAIChatChainOfThought>>;
+declare const ChainOfThought: React.ComponentType<any>;
 export type { ChainOfThoughtOnToggle, ChainOfThoughtStepToggleEventDetail, ChainOfThoughtToggleEventDetail, };
 export { ChainOfThoughtStepStatus };
 export default ChainOfThought;

package/es/react/chat-button.d.ts

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from "react";
-import AIChatButton, { CHAT_BUTTON_KIND, CHAT_BUTTON_TYPE, CHAT_BUTTON_SIZE, CHAT_BUTTON_TOOLTIP_ALIGNMENT, CHAT_BUTTON_TOOLTIP_POSITION } from "../components/chat-button/src/chat-button.js";
-declare const ChatButton: React.ForwardRefExoticComponent<Omit<Record<string, unknown>, "ref"> & React.RefAttributes<AIChatButton>>;
+import { CHAT_BUTTON_KIND, CHAT_BUTTON_TYPE, CHAT_BUTTON_SIZE, CHAT_BUTTON_TOOLTIP_ALIGNMENT, CHAT_BUTTON_TOOLTIP_POSITION } from "../components/chat-button/src/chat-button.js";
+declare const ChatButton: React.ComponentType<any>;
 export default ChatButton;
 export { CHAT_BUTTON_KIND, CHAT_BUTTON_TYPE, CHAT_BUTTON_SIZE, CHAT_BUTTON_TOOLTIP_ALIGNMENT, CHAT_BUTTON_TOOLTIP_POSITION, };

package/es/react/chat-button.js

@@ -10,7 +10,7 @@ import React from 'react';
 import AIChatButton from '../components/chat-button/src/chat-button.js';
 import { withWebComponentBridge } from './utils/withWebComponentBridge.js';
 export { CHAT_BUTTON_SIZE } from '../components/chat-button/defs.js';
-export { BUTTON_KIND as CHAT_BUTTON_KIND, BUTTON_TYPE as CHAT_BUTTON_TOOLTIP_ALIGNMENT, BUTTON_TYPE as CHAT_BUTTON_TOOLTIP_POSITION, BUTTON_TYPE as CHAT_BUTTON_TYPE } from '@carbon/web-components/es/components/button/button.js';
+export { BUTTON_KIND as CHAT_BUTTON_KIND, BUTTON_TOOLTIP_ALIGNMENT as CHAT_BUTTON_TOOLTIP_ALIGNMENT, BUTTON_TOOLTIP_POSITION as CHAT_BUTTON_TOOLTIP_POSITION, BUTTON_TYPE as CHAT_BUTTON_TYPE } from '@carbon/web-components/es/components/button/button.js';
 
 /**
  * @license

package/es/react/chat-header.d.ts

@@ -0,0 +1,73 @@
+import React from "react";
+import type { ToolbarAction } from "./toolbar.js";
+export interface ChatHeaderProps {
+    /** Array of actions that can overflow into a menu when space is limited. */
+    actions?: ToolbarAction[];
+    /** Enable overflow behavior for actions. */
+    overflow?: boolean;
+    /** Optional header title text to display. */
+    headerTitle?: string;
+    /** Optional name text to display after the title. */
+    headerName?: string;
+    /** Type of navigation to display: 'back', 'overflow', or 'none'. */
+    navigationType?: "back" | "overflow" | "none";
+    /** Icon for the back button (CarbonIcon object). */
+    navigationBackIcon?: any;
+    /** Label/tooltip text for the back button. */
+    navigationBackLabel?: string;
+    /** Click handler for the back button. */
+    navigationBackOnClick?: () => void;
+    /** Array of overflow menu items with text and onClick handlers. */
+    navigationOverflowItems?: Array<{
+        text: string;
+        onClick?: () => void;
+        href?: string;
+        target?: string;
+        disabled?: boolean;
+        testId?: string;
+    }>;
+    /** Label/tooltip text for the overflow menu button. */
+    navigationOverflowLabel?: string;
+    /** ARIA label for the overflow menu. */
+    navigationOverflowAriaLabel?: string;
+    /** Click handler for when the overflow menu button is clicked (menu opened). */
+    navigationOverflowOnClick?: () => void;
+}
+/**
+ * Extended interface that includes the imperative handle methods.
+ * Use with React.useRef<ChatHeaderHandle>() to access focus management.
+ *
+ * @example
+ * ```tsx
+ * const headerRef = useRef<ChatHeaderHandle>(null);
+ *
+ * const handleFocusRequest = () => {
+ *   const focused = headerRef.current?.requestFocus();
+ *   if (!focused) {
+ *     // Try focusing somewhere else, like the input field
+ *     inputRef.current?.focus();
+ *   }
+ * };
+ * ```
+ */
+export interface ChatHeaderHandle {
+    /**
+     * Requests focus on the best available focusable element within the component.
+     * Returns true if focus was successfully set, false otherwise.
+     *
+     * Priority order:
+     * 1. First enabled button in fixed-actions slot (usually close button)
+     * 2. First enabled button in navigation slot (back button or overflow menu)
+     * 3. First enabled action button from actions array
+     * 4. Any other focusable element
+     */
+    requestFocus(): boolean;
+}
+/**
+ * ChatHeader component with automatic icon transformation support.
+ *
+ * Accepts navigation icons as either CarbonIcon objects or React icon components from @carbon/icons-react.
+ * React icons are automatically transformed to the CarbonIcon format expected by the web component.
+ */
+declare const ChatHeader: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
+export default ChatHeader;

package/es/react/chat-header.js

@@ -0,0 +1,55 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { jsx } from 'react/jsx-runtime';
+import { createComponent } from '@lit/react';
+import React from 'react';
+import CdsAiChatChatHeader from '../components/chat-shell/src/chat-header.js';
+import { withWebComponentBridge } from './utils/withWebComponentBridge.js';
+import { transformReactIconToCarbonIcon } from './utils/iconTransform.js';
+
+// Base chat header component from @lit/react
+const BaseChatHeader = withWebComponentBridge(createComponent({
+    tagName: "cds-aichat-chat-header",
+    elementClass: CdsAiChatChatHeader,
+    react: React,
+}));
+/**
+ * ChatHeader component with automatic icon transformation support.
+ *
+ * Accepts navigation icons as either CarbonIcon objects or React icon components from @carbon/icons-react.
+ * React icons are automatically transformed to the CarbonIcon format expected by the web component.
+ */
+const ChatHeader = React.forwardRef((props, ref) => {
+    const { navigationBackIcon, navigationOverflowIcon, actions, ...restProps } = props;
+    // Transform navigation icons if they're React components
+    const transformedNavigationBackIcon = React.useMemo(() => {
+        return navigationBackIcon
+            ? transformReactIconToCarbonIcon(navigationBackIcon, 16)
+            : undefined;
+    }, [navigationBackIcon]);
+    const transformedNavigationOverflowIcon = React.useMemo(() => {
+        return navigationOverflowIcon
+            ? transformReactIconToCarbonIcon(navigationOverflowIcon, 16)
+            : undefined;
+    }, [navigationOverflowIcon]);
+    // Transform action icons if actions are provided
+    const transformedActions = React.useMemo(() => {
+        if (!actions) {
+            return undefined;
+        }
+        return actions.map((action) => ({
+            ...action,
+            icon: transformReactIconToCarbonIcon(action.icon, 16),
+        }));
+    }, [actions]);
+    return (jsx(BaseChatHeader, { ref: ref, navigationBackIcon: transformedNavigationBackIcon, navigationOverflowIcon: transformedNavigationOverflowIcon, actions: transformedActions, ...restProps }));
+});
+ChatHeader.displayName = "ChatHeader";
+
+export { ChatHeader as default };
+//# sourceMappingURL=chat-header.js.map

package/es/react/chat-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-header.js","sources":["../../src/react/chat-header.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;AA4FA;AACA,MAAM,cAAc,GAAG,sBAAsB,CAC3C,eAAe,CAAC;AACd,IAAA,OAAO,EAAE,wBAAwB;AACjC,IAAA,YAAY,EAAE,mBAAmB;AACjC,IAAA,KAAK,EAAE,KAAK;AACb,CAAA,CAAC,CACH;AAED;;;;;AAKG;AACH,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAW,CAAC,KAAK,EAAE,GAAG,KAAI;AAC3D,IAAA,MAAM,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GACzE,KAAK;;AAGP,IAAA,MAAM,6BAA6B,GAAG,KAAK,CAAC,OAAO,CAAC,MAAK;AACvD,QAAA,OAAO;AACL,cAAE,8BAA8B,CAAC,kBAAkB,EAAE,EAAE;cACrD,SAAS;AACf,IAAA,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAExB,IAAA,MAAM,iCAAiC,GAAG,KAAK,CAAC,OAAO,CAAC,MAAK;AAC3D,QAAA,OAAO;AACL,cAAE,8BAA8B,CAAC,sBAAsB,EAAE,EAAE;cACzD,SAAS;AACf,IAAA,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC;;AAG5B,IAAA,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC,MAAK;QAC5C,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,SAAS;QAClB;QAEA,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAqB,MAAM;AAC7C,YAAA,GAAG,MAAM;YACT,IAAI,EAAE,8BAA8B,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC;AACtD,SAAA,CAAC,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEb,QACEA,IAAC,cAAc,EAAA,EACb,GAAG,EAAE,GAAG,EACR,kBAAkB,EAAE,6BAA6B,EACjD,sBAAsB,EAAE,iCAAiC,EACzD,OAAO,EAAE,kBAAkB,EAAA,GACvB,SAAS,EAAA,CACb;AAEN,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}