@siemens/ix 5.1.1 → 5.2.1

package/dist/collection/components/card-list/card-list.css

@@ -22,6 +22,14 @@
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
+/*
+* SPDX-FileCopyrightText: 2024 Siemens AG
+*
+* SPDX-License-Identifier: MIT
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
 :host {
   display: flex;
   position: relative;
@@ -34,7 +42,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -43,37 +51,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .CardList_Title {
@@ -151,6 +159,10 @@
   --ix-card-border-color: var(--theme-color-primary);
   color: var(--theme-color-primary);
 }
+:host .Show__All__Card:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
 :host .CardList__Style__Infinite__Scroll .Show__All__Card {
   margin-top: 2.375rem;
 }

package/dist/collection/components/card-list/card-list.js

@@ -92,6 +92,47 @@ export class CardList {
         this.collapse = !this.collapse;
         this.collapseChanged.emit(this.collapse);
     }
+    findFirstFocusable(root) {
+        const focusableSelectors = 'button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+        const direct = root.querySelector?.(focusableSelectors);
+        if (direct)
+            return direct;
+        for (const child of Array.from(root.querySelectorAll?.('*') ?? [])) {
+            const el = child;
+            if (el.shadowRoot) {
+                const found = this.findFirstFocusable(el.shadowRoot);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    focusFirstVisibleCard(startIndex = 0) {
+        requestAnimationFrameNoNgZone(() => {
+            requestAnimationFrameNoNgZone(() => {
+                const firstNewlyVisible = this.getListChildren()
+                    .slice(startIndex)
+                    .find((el) => el instanceof HTMLElement &&
+                    !el.classList.contains('display-none'));
+                if (!firstNewlyVisible)
+                    return;
+                const internalFocusable = firstNewlyVisible.shadowRoot
+                    ? this.findFirstFocusable(firstNewlyVisible.shadowRoot)
+                    : null;
+                if (internalFocusable) {
+                    internalFocusable.focus({ preventScroll: false });
+                    return;
+                }
+                if (firstNewlyVisible.hasAttribute('tabindex')) {
+                    firstNewlyVisible.focus({ preventScroll: false });
+                    return;
+                }
+                firstNewlyVisible.setAttribute('tabindex', '-1');
+                firstNewlyVisible.focus({ preventScroll: false });
+                firstNewlyVisible.removeAttribute('tabindex');
+            });
+        });
+    }
     handleClick(emitter, event) {
         const { defaultPrevented } = emitter.emit({
             nativeEvent: event,
@@ -99,12 +140,26 @@ export class CardList {
         if (defaultPrevented) {
             return;
         }
+        const wasShowingAll = this.isShowingAll;
+        const firstNewCardIndex = this.maxVisibleCards;
         this.isShowingAll = !this.isShowingAll;
         this.changeVisibilityOfSlotChildren();
+        if (!wasShowingAll) {
+            this.focusFirstVisibleCard(firstNewCardIndex);
+        }
     }
     onShowAllClick(event) {
         this.handleClick(this.showAllClick, event);
     }
+    onShowMoreCardClick(event) {
+        if (event instanceof KeyboardEvent) {
+            if (event.key !== 'Enter' && event.key !== ' ') {
+                return;
+            }
+            event.preventDefault();
+        }
+        this.handleClick(this.showMoreCardClick, event);
+    }
     getListChildren() {
         const slot = this.hostElement.shadowRoot.querySelector('.CardList__Content > slot');
         return slot.assignedElements({ flatten: true });
@@ -205,22 +260,20 @@ export class CardList {
         }
     }
     render() {
-        return (h(Host, { key: '8bcf64535742038e957dfc635c73ed0ed47279ec' }, h(CardListTitle, { key: 'b8f10c342836f5dc40cac1c4146302292638e36b', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
+        return (h(Host, { key: 'b059c2e39c50301922ad5ed51cc4e246aa3e358d' }, h(CardListTitle, { key: '61a6b0c4fd65257a6754ce34d2564f6513709946', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
                 ? this.numberOfAllChildElements
-                : this.showAllCount, showLess: this.isShowingAll, labelShowLess: this.i18nShowLess, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: '5b58a1b417432b173720024ab2cb5a1987e8b6d6', class: {
+                : this.showAllCount, showLess: this.isShowingAll, labelShowLess: this.i18nShowLess, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: '5a328de0d50c9e5600cf7183145a372edd9f4305', class: {
                 CardList__Overflow: true,
-            }, style: this.computeMaskLayer() }, h("div", { key: 'c29a2167cd3cfafec0201e5b94991f315d4fbf63', class: {
+            }, style: this.computeMaskLayer() }, h("div", { key: '29b54713584c4e904f0dd7cb7240588c66efaddf', class: {
                 CardList__Content: true,
                 CardList__Content__Collapsed: this.collapse,
                 CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',
                 CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',
-            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: '3507c68ab7bbd51d0fb0f3757ff81b6fe9ca5059', onSlotchange: () => {
+            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: 'cf8bc87f8b737a784317993f72a9bcfb45a2db15', onSlotchange: () => {
                 this.changeVisibilityOfSlotChildren();
-            } }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
+            } }), this.isShowMoreCardVisible() ? (h("ix-card", { role: "button", tabindex: "0", "aria-label": `${this.i18nMoreCards} (${this.numberOfOverflowingElements})`, class: {
                 Show__All__Card: true,
-            }, onClick: (event) => {
-                this.handleClick(this.showMoreCardClick, event);
-            } }, h("ix-card-content", null, h("div", { class: "Show__All__Card__Content" }, h("ix-icon", { name: iconMoreMenu, size: '32', class: 'Show__All__Card__Icon' }), h("span", { class: "Show__All__Card__Text" }, this.i18nMoreCards, " (", this.numberOfOverflowingElements, ")"))))) : null))));
+            }, onClick: (event) => this.onShowMoreCardClick(event), onKeyDown: (event) => this.onShowMoreCardClick(event) }, h("ix-card-content", null, h("div", { class: "Show__All__Card__Content" }, h("ix-icon", { name: iconMoreMenu, size: '32', class: 'Show__All__Card__Icon' }), h("span", { class: "Show__All__Card__Text" }, this.i18nMoreCards, " (", this.numberOfOverflowingElements, ")"))))) : null))));
     }
     static get is() { return "ix-card-list"; }
     static get encapsulation() { return "shadow"; }
@@ -521,12 +574,16 @@ export class CardList {
                     "text": "Fire event when the show more card is clicked."
                 },
                 "complexType": {
-                    "original": "{\n    nativeEvent: MouseEvent;\n  }",
-                    "resolved": "{ nativeEvent: MouseEvent; }",
+                    "original": "{\n    nativeEvent: MouseEvent | KeyboardEvent;\n  }",
+                    "resolved": "{ nativeEvent: MouseEvent | KeyboardEvent; }",
                     "references": {
                         "MouseEvent": {
                             "location": "global",
                             "id": "global::MouseEvent"
+                        },
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
                         }
                     }
                 }

package/dist/collection/components/card-title/card-title.js

@@ -5,7 +5,7 @@ import { h, Host } from "@stencil/core";
  */
 export class CardHeader {
     render() {
-        return (h(Host, { key: 'c50fb67ce42087c697968348b95fb02101b15b86' }, h("slot", { key: '0c245caa0f0e71ba88966b1e11eac12d598b2d9d' }), h("div", { key: '90ff563a14756a276e6188ebee294fb484c18a77', class: "title-actions" }, h("slot", { key: '1da997f39903021f1edb96508982fb699cc8b3a6', name: "title-actions" }))));
+        return (h(Host, { key: '9c9d2e38edbd21c21f2fbc3c451f0f73728463f5' }, h("slot", { key: '72878e063e7df669a90da5caeff705dd794080fc' }), h("div", { key: 'ed8aa8ecef81523223b40c3497de63306df4a4a0', class: "title-actions" }, h("slot", { key: '3827e0881d1617636640a2953476fb2bfb13f881', name: "title-actions" }))));
     }
     static get is() { return "ix-card-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/category-filter/category-filter.css

@@ -81,6 +81,14 @@
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
+/*
+* SPDX-FileCopyrightText: 2026 Siemens AG
+*
+* SPDX-License-Identifier: MIT
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
 :host {
   --ix-button-border-radius-left: var(--theme-btn--border-radius);
   --ix-button-border-radius-right: var(--theme-btn--border-radius);
@@ -101,7 +109,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -110,37 +118,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host button,
@@ -212,7 +220,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -221,37 +229,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host button,
@@ -353,6 +361,12 @@
   color: var(--theme-btn-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-primary--border-color--active);
+  background-color: var(--theme-btn-primary--background--active);
+  color: var(--theme-btn-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -415,6 +429,12 @@
   color: var(--theme-btn-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-secondary--border-color--active);
+  background-color: var(--theme-btn-secondary--background--active);
+  color: var(--theme-btn-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -477,6 +497,12 @@
   color: var(--theme-btn-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-tertiary--border-color--active);
+  background-color: var(--theme-btn-tertiary--background--active);
+  color: var(--theme-btn-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -539,6 +565,12 @@
   color: var(--theme-btn-subtle-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-primary--border-color--active);
+  background-color: var(--theme-btn-subtle-primary--background--active);
+  color: var(--theme-btn-subtle-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -601,6 +633,12 @@
   color: var(--theme-btn-subtle-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-secondary--border-color--active);
+  background-color: var(--theme-btn-subtle-secondary--background--active);
+  color: var(--theme-btn-subtle-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -663,6 +701,12 @@
   color: var(--theme-btn-subtle-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-tertiary--border-color--active);
+  background-color: var(--theme-btn-subtle-tertiary--background--active);
+  color: var(--theme-btn-subtle-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -725,6 +769,12 @@
   color: var(--theme-btn-danger-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-primary--border-color--active);
+  background-color: var(--theme-btn-danger-primary--background--active);
+  color: var(--theme-btn-danger-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -787,6 +837,12 @@
   color: var(--theme-btn-danger-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-secondary--border-color--active);
+  background-color: var(--theme-btn-danger-secondary--background--active);
+  color: var(--theme-btn-danger-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -849,6 +905,12 @@
   color: var(--theme-btn-danger-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-tertiary--border-color--active);
+  background-color: var(--theme-btn-danger-tertiary--background--active);
+  color: var(--theme-btn-danger-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -1100,7 +1162,7 @@ button.dropdown-toggle::after {
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -1109,37 +1171,37 @@ button.dropdown-toggle::after {
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .reset-button {

package/dist/collection/components/category-filter/category-filter.js

@@ -566,7 +566,7 @@ export class CategoryFilter {
         return (h("ix-icon-button", { onClick: (e) => this.resetFilter(e), class: {
                 'reset-button': true,
                 'hide-reset-button': !this.filterTokens.length && this.category === '',
-            }, variant: "tertiary", oval: true, icon: iconClear, iconColor: "color-soft-text", size: "16", "aria-label": this.ariaLabelResetButton }));
+            }, variant: "tertiary", icon: iconClear, iconColor: "color-soft-text", size: "16", "aria-label": this.ariaLabelResetButton }));
     }
     getIconColor() {
         if (this.disabled) {
@@ -578,19 +578,19 @@ export class CategoryFilter {
         return 'color-primary';
     }
     render() {
-        return (h(Host, { key: '85dbdb78b8e91f24bd024a7f807981c1be021949' }, h("form", { key: 'c7bbb49d432f280a07decbe120f73d6c797d8cc7', ref: (el) => (this.formElement = el) }, h("div", { key: '0564d4922c264f58cdbd27da56913b09fc7ab9a5', "read-only": this.readonly, class: {
+        return (h(Host, { key: '213c9455760e956792f5d8852799e1329c2aee2c' }, h("form", { key: 'fe985e2330a24b77ad5345c6e7667b7be24df66e', ref: (el) => (this.formElement = el) }, h("div", { key: '2c453e7d5d7d216942b6f389e97b348030c5a099', "read-only": this.readonly, class: {
                 'input-container': true,
                 disabled: this.disabled,
                 focus: this.hasFocus,
                 readonly: this.readonly,
                 'no-icon': this.hideIcon,
-            } }, h("ix-icon", { key: '3807f9bee30d44bcca3a8aefda6889958f5fa781', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: this.icon ?? iconSearch, size: "16" }), h("div", { key: 'eee8f5b467efe653a186361cd6db76a6a92bdb15', class: "token-container" }, h("div", { key: 'd82c1963974f8213fab1b90473d8f0c883306281', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("span", { key: value.toString(), class: {
+            } }, h("ix-icon", { key: '30946f69374b99e3593b9cbe89ff9dd43a6e83af', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: this.icon ?? iconSearch, size: "16" }), h("div", { key: 'c6da3b3838ac0f8d5ee2e80235b3f9670d34e9b4', class: "token-container" }, h("div", { key: '9748e927c040ccb216dea26abaa48f3aa2535f64', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("span", { key: value.toString(), class: {
                 animate__animated: true,
                 animate__fadein: true,
             } }, h("ix-filter-chip", { disabled: this.disabled, readonly: this.readonly, onClick: (e) => e.stopPropagation(), onCloseClick: () => this.removeToken(index) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (h("span", { class: {
                 'category-preview': true,
                 'display-none': this.category === '',
-            } }, this.categories[this.category]?.label)), h("input", { key: 'bb6d42b5691fa761ed9f8196edce521e5e5e04aa', class: {
+            } }, this.categories[this.category]?.label)), h("input", { key: 'e01a1f24f7cd7c514b641532ce25e754e03837fd', class: {
                 'text-input': true,
                 'hide-placeholder': this.readonly || this.disabled || this.category !== '',
             }, autocomplete: "off", name: "category-filter-input", disabled: this.disabled, readonly: this.readonly, ref: this.textInput, type: "text", placeholder: this.placeholder, ...this.a11yAttributes, "aria-label": this.ariaLabelFilterInput }))), !this.readonly && !this.disabled && this.getResetButton())), this.disabled || this.readonly ? ('') : (h("ix-dropdown", { show: this.showDropdown, closeBehavior: "outside", offset: { mainAxis: 2 }, anchor: this.textInput?.waitForCurrent(), trigger: this.hostElement, header: this.getDropdownHeader(), enableTopLayer: this.enableTopLayer }, this.renderDropdownContent()))));

package/dist/collection/components/chat/chat.css

@@ -0,0 +1,114 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+* SPDX-FileCopyrightText: 2024 Siemens AG
+*
+* SPDX-License-Identifier: MIT
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/*
+* SPDX-FileCopyrightText: 2024 Siemens AG
+*
+* SPDX-License-Identifier: MIT
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  min-width: 27rem;
+  max-width: calc(45rem + var(--theme-space-5));
+  box-sizing: border-box;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host *::-webkit-scrollbar-button {
+  display: none;
+}
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
+:host * {
+  /* width */
+}
+:host *::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host * {
+  /* Track */
+}
+:host *::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host *::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host * {
+  /* Handle */
+}
+:host *::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host * {
+  /* Handle on hover */
+}
+:host *::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host *::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .messages {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--theme-space-5);
+  min-height: 0;
+  width: 100%;
+  padding: var(--theme-space-5);
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+:host .messages ::slotted(*) {
+  width: 100%;
+  max-width: 45rem;
+  flex: 0 0 auto;
+}
+:host .prompt {
+  display: none;
+  flex: 0 0 auto;
+  width: 100%;
+  padding: var(--theme-space-5);
+  box-sizing: border-box;
+}
+:host .prompt ::slotted(*) {
+  width: 100%;
+  max-width: 45rem;
+}
+
+:host(.has-prompt) .prompt {
+  display: flex;
+  justify-content: center;
+}