@siemens/ix 5.1.0 → 5.2.0

package/dist/cjs/{validation-DJaUH-UR.js → validation-B1izlD8M.js}

@@ -55,25 +55,60 @@ function checkFieldClasses(hostElement, includeChildren = false) {
         isWarning: classListContains(hostElement, 'ix-warning', includeChildren),
     };
 }
+/**
+ * Thrown when a form control’s native input is not available yet (or already gone).
+ */
+class NativeInputNotFoundError extends Error {
+    constructor(message = 'Input element not found') {
+        super(message);
+        this.name = 'NativeInputNotFoundError';
+    }
+}
+function isMissingNativeInputError(error) {
+    return (error instanceof NativeInputNotFoundError ||
+        // Cross-bundle / duplicated class copies still carry the stable name.
+        (error instanceof Error && error.name === 'NativeInputNotFoundError'));
+}
 function HookValidationLifecycle(options) {
     return (proto, methodName) => {
         let checkIfRequiredFunction;
         let classMutationObserver;
+        let checkTimeoutId = null;
         const { componentWillLoad, disconnectedCallback, connectedCallback } = proto;
         proto.connectedCallback = function () {
             const host = index.getElement(this);
+            if (checkTimeoutId != null) {
+                clearTimeout(checkTimeoutId);
+                checkTimeoutId = null;
+            }
             checkIfRequiredFunction = async () => {
                 const skipValidation = await shouldSuppressInternalValidation(host);
-                if (skipValidation) {
+                if (skipValidation || !host.isConnected) {
                     return;
                 }
                 if (!index$1.isIxInputFieldComponent(host)) {
                     return;
                 }
-                const validationElement = await host.getNativeInputElement?.();
+                let validationElement;
+                try {
+                    validationElement = await host.getNativeInputElement?.();
+                }
+                catch (error) {
+                    // Expected during connect/teardown when the native input is unset (e.g. ix-select).
+                    if (!isMissingNativeInputError(error)) {
+                        throw error;
+                    }
+                    validationElement = undefined;
+                }
+                if (!host.isConnected) {
+                    return;
+                }
                 if (host.hasValidValue && typeof host.hasValidValue === 'function') {
                     const hasValue = await host.hasValidValue();
                     const touched = await isTouched(host);
+                    if (!host.isConnected) {
+                        return;
+                    }
                     if (host.required) {
                         host.classList.toggle('ix-invalid--required', !hasValue && touched);
                     }
@@ -85,12 +120,18 @@ function HookValidationLifecycle(options) {
                     typeof host.getValidityState === 'function') {
                     const validityState = await host.getValidityState();
                     const touched = await isTouched(host);
+                    if (!host.isConnected) {
+                        return;
+                    }
                     host.classList.toggle(`ix-invalid--validity-patternMismatch`, validityState.patternMismatch);
                     host.classList.toggle('ix-invalid--validity-invalid', !validityState.valid && touched);
                     const fieldWrapper = host.shadowRoot?.querySelector('ix-field-wrapper');
                     if (validationElement && fieldWrapper) {
                         const ariaErrorMessageElement = await fieldWrapper.getAriaErrorMessageElement();
                         const ariaHelperMessageElement = await fieldWrapper.getAriaHelperMessageElement();
+                        if (!host.isConnected) {
+                            return;
+                        }
                         if (ariaHelperMessageElement) {
                             validationElement.setAttribute('aria-describedby', `${ariaHelperMessageElement.id}`);
                         }
@@ -110,7 +151,17 @@ function HookValidationLifecycle(options) {
             host.addEventListener('checkedChange', checkIfRequiredFunction);
             host.addEventListener('valueChange', checkIfRequiredFunction);
             host.addEventListener('ixBlur', checkIfRequiredFunction);
-            setTimeout(checkIfRequiredFunction);
+            checkTimeoutId = setTimeout(() => {
+                checkTimeoutId = null;
+                if (checkIfRequiredFunction) {
+                    void checkIfRequiredFunction().catch((error) => {
+                        if (isMissingNativeInputError(error)) {
+                            return;
+                        }
+                        console.error(error);
+                    });
+                }
+            });
             return connectedCallback?.call(this);
         };
         proto.componentWillLoad = function () {
@@ -125,6 +176,10 @@ function HookValidationLifecycle(options) {
         };
         proto.disconnectedCallback = function () {
             const host = index.getElement(this);
+            if (checkTimeoutId != null) {
+                clearTimeout(checkTimeoutId);
+                checkTimeoutId = null;
+            }
             if (host && classMutationObserver) {
                 classMutationObserver.destroy();
                 classMutationObserver = null;
@@ -147,6 +202,7 @@ function getValidationText(isInputInvalid, customInvalidText, i18nFallbackText)
 }
 
 exports.HookValidationLifecycle = HookValidationLifecycle;
+exports.NativeInputNotFoundError = NativeInputNotFoundError;
 exports.checkFieldClasses = checkFieldClasses;
 exports.createClassMutationObserver = createClassMutationObserver;
 exports.getValidationText = getValidationText;

package/dist/collection/collection-manifest.json

@@ -7,6 +7,7 @@
     "components/application-header/application-header.js",
     "components/application-header/application-switch-modal/application-switch-modal.js",
     "components/avatar/avatar.js",
+    "components/badge/badge.js",
     "components/blind/blind.js",
     "components/breadcrumb/breadcrumb.js",
     "components/breadcrumb-item/breadcrumb-item.js",
@@ -16,6 +17,11 @@
     "components/card-list/card-list.js",
     "components/card-title/card-title.js",
     "components/category-filter/category-filter.js",
+    "components/chat/chat.js",
+    "components/chat-ai-message/chat-ai-message.js",
+    "components/chat-attachment/chat-attachment.js",
+    "components/chat-input/chat-input.js",
+    "components/chat-user-message/chat-user-message.js",
     "components/checkbox/checkbox.js",
     "components/checkbox-group/checkbox-group.js",
     "components/chip/chip.js",

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

@@ -37,7 +37,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -46,37 +46,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 {

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

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 import { a11yBoolean, getFallbackLabelFromIconName } from "../utils/a11y";
 /**
- * @slot - Place additional non-interactive content inside the card. Avoid interactive elements (links, buttons, inputs) as the card itself is rendered as a single button.
+ * @slot default - Place additional non-interactive content inside the card. Avoid interactive elements (links, buttons, inputs) as the card itself is rendered as a single button.
  */
 export class IxActionCard {
     /**
@@ -57,8 +57,8 @@ export class IxActionCard {
         const ariaLabelledBy = !this.ariaLabelCard && this.heading
             ? 'ix-action-card-heading'
             : undefined;
-        return (h(Host, { key: 'b56ab72218bf3b098acb7d1f7bbbc967dc7851c9' }, h("button", { key: '87ef305e4149a4f883f52b9d2d26cc3080073082', type: "button", disabled: this.passive, "aria-label": this.ariaLabelCard, "aria-labelledby": ariaLabelledBy }, h("ix-card", { key: '5064b548f6434036d5c46e9162e4bad1f06f3a40', selected: this.selected, variant: this.variant, passive: this.passive, class: this.passive ? undefined : 'pointer' }, h("ix-card-content", { key: 'dbfb7bcda7ae018721e8e1d06f85b2fadd8330d0' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon ||
-                getFallbackLabelFromIconName(this.icon) })) : null, h("div", { key: '51a82f1f462f9638980f7f2b18a4cfd54db24cf6' }, this.heading ? (h("ix-typography", { id: "ix-action-card-heading", "aria-hidden": a11yBoolean(!ariaLabelledBy), format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5", "text-color": this.getSubheadingTextColor() }, this.subheading)) : null, h("slot", { key: 'c8ae09e93db05dab6f0a1820c0022c9142b6cc54' })))))));
+        return (h(Host, { key: '13c017461553dde76509473679c2c0942f0536ef' }, h("button", { key: 'b0a154fff6809c67e595a90137ba46eaab2654ed', type: "button", disabled: this.passive, "aria-label": this.ariaLabelCard, "aria-labelledby": ariaLabelledBy }, h("ix-card", { key: '1718627fa2718bf42b19d8b967ea556fa0b7bc09', selected: this.selected, variant: this.variant, passive: this.passive, class: this.passive ? undefined : 'pointer' }, h("ix-card-content", { key: 'fa854f2be562cd938122504d2f531f4f9bac52e9' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon ||
+                getFallbackLabelFromIconName(this.icon) })) : null, h("div", { key: 'bcf7099102118877945d25a908b988e6bfccf00f' }, this.heading ? (h("ix-typography", { id: "ix-action-card-heading", "aria-hidden": a11yBoolean(!ariaLabelledBy), format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5", "text-color": this.getSubheadingTextColor() }, this.subheading)) : null, h("slot", { key: 'd77220fa34088b62378d3c095c50f87e4442a002' })))))));
     }
     static get is() { return "ix-action-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/application/application.css

@@ -34,7 +34,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -43,37 +43,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 ix-application-header {

package/dist/collection/components/application/application.js

@@ -13,6 +13,13 @@ import { useContextProvider } from "../utils/context";
 import { menuController } from "../utils/menu-service/menu-service";
 import { hasSlottedElements } from "../utils/shadow-dom";
 import { themeSwitcher } from "../utils/theme-switcher";
+/**
+ * @slot application-header - Header displayed at the top of the application.
+ * @slot menu - Main application navigation.
+ * @slot application-sidebar - Sidebar displayed next to the main content.
+ * @slot default - Main application content.
+ * @slot bottom - Footer displayed below the main content.
+ */
 export class Application {
     hostElement;
     /**
@@ -118,12 +125,12 @@ export class Application {
         });
     }
     render() {
-        return (h(Host, { key: 'b580ca5dbbd164b45beb5b6863fc3f6ffd830f08', "data-role": "", class: {
+        return (h(Host, { key: 'cf020f40f480159fd1949387d82bb4f9def90ec0', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, h("slot", { key: '6055d2a286d3b90e4aca43bee094e509ab4780fd', name: "application-header" }), h("div", { key: '6418c3369dc0525d99c29015d5717a791a2ddd4c', class: "application" }, h("slot", { key: 'a6adda421cf6294d34da129a5dd3bc366f6384ca', name: "menu" }), h("aside", { key: '3f359f1ef65e8fa1f35f4001b23ec10d32a7d5be', class: {
+            } }, h("slot", { key: 'a2f00e2aeca45e27c775b3ff98bdc71a45b9462d', name: "application-header" }), h("div", { key: '24def38eb1881d5aa3204a9c0ebb4ac18a79cf52', class: "application" }, h("slot", { key: '16fbf3b5ced61520056cfbf540bc2653b67e1b63', name: "menu" }), h("aside", { key: '8f7fca6b4c7ec5fd13af2c0aac292e32a0fd6744', class: {
                 'application-sidebar': true,
                 slotted: this.applicationSidebarSlotted,
-            }, onClick: () => this.onContentClick() }, h("slot", { key: 'f335892f90b7d9f9020bbeb5b9a732404bfcde00', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("div", { key: '93333ea8c99802b366971d1c9717418262fc649d', class: "content-area" }, h("main", { key: '79fe70895b7725377b679b98c04784f6fd7ff789', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '22d8f248280108d31903f67e7678804cf78dc658' })), h("footer", { key: '9e541aa388f2aaf44d8f41987ded1bcd863a22f6', class: "footer" }, h("slot", { key: '9b87eb43ced974fca634e1f4c1282669be3135b4', name: "bottom" }))))));
+            }, onClick: () => this.onContentClick() }, h("slot", { key: '10ddd10b40d68daacae0766af6fd35970a2e6792', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("div", { key: '9174218df39d64bf2259041e113f42ecdde223b5', class: "content-area" }, h("main", { key: '38e2510f631cb1e65fa407c8a5d763baf085a49e', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'c6217838be3d5367c530e5a4301e9571ff823304' })), h("footer", { key: 'c6b419361dddd826a03bb74563d7ce3ac0d1ec10', class: "footer" }, h("slot", { key: '51674410bb529c5733d665ef99213d25fc000dd0', name: "bottom" }))))));
     }
     static get is() { return "ix-application"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/application-header/application-header.css

@@ -51,7 +51,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -60,37 +60,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 .left-side,

package/dist/collection/components/application-header/application-header.js

@@ -21,6 +21,7 @@ import { hasSlottedElements } from "../utils/shadow-dom";
  * @slot secondary - Place additional items inside the header. They will appear after logo and name. If the screen size is small, the items will be shown inside a dropdown.
  * @slot overflow - Use this slot to display additional items that do not fit in the default or secondary slot.
  * @slot logo - Place a company logo inside the header. Alternatively the companyLogo property can be set.
+ * @slot ix-application-header-avatar - Place an avatar at the end of the header.
  */
 export class ApplicationHeader {
     hostElement;
@@ -234,31 +235,31 @@ export class ApplicationHeader {
             this.breakpoint !== 'sm' &&
             this.suppressResponsive === false;
         const showCompanyLogoByProperty = this.breakpoint !== 'sm' && !!this.companyLogo;
-        return (h(Host, { key: '65415a8abe50d9b368d9c71001a0968cf2264fb8', class: {
+        return (h(Host, { key: 'e748601f8379536c62fe20edf48634ec7373fdbe', class: {
                 [`breakpoint-${this.breakpoint}`]: true,
                 'hide-bottom-border': this.hideBottomBorder,
-            }, slot: "application-header", role: "banner" }, h("div", { key: '79849e061e06d01eba6f4d802f48d226480857b2', class: "left-side" }, this.appIcon && this.breakpoint !== 'sm' && (h("div", { key: 'b5c6140d263e7ff6ffe3937a4341bcd2b9935104', class: {
+            }, slot: "application-header", role: "banner" }, h("div", { key: '0153872edf217449e8b7ac4eaad0b7304e44f171', class: "left-side" }, this.appIcon && this.breakpoint !== 'sm' && (h("div", { key: '4934436922dca879c5ecbd8fd19379000fcea7be', class: {
                 'app-icon': true,
                 'app-icon-outline': this.appIconOutline,
-            } }, h("img", { key: '00fb44e36f25856a0e2ad2c333d2a5a5014415d3', src: this.appIcon, alt: this.appIconAlt }))), (this.showMenu || showMenuByApplicationFrame) && (h("ix-menu-expand-icon", { key: '2d123f6cfbc21a61680328b3a81638ba49413c8f', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (h("ix-icon-button", { key: '5b887225419c66e36ef5dfd369647d41c4f3ca41', onClick: () => this.showAppSwitch(), icon: iconApps, variant: "subtle-tertiary", class: {
+            } }, h("img", { key: 'c253d49a3a37507daace6db886c33e899c3de9be', src: this.appIcon, alt: this.appIconAlt }))), (this.showMenu || showMenuByApplicationFrame) && (h("ix-menu-expand-icon", { key: 'e4bcdb607e5f50873f0f90bc6a1bad167d8b6cbf', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (h("ix-icon-button", { key: '6de3d4401ecd71c97b0008bb8bf4142ee68aa3ac', onClick: () => this.showAppSwitch(), icon: iconApps, variant: "subtle-tertiary", class: {
                 'app-switch': true,
                 'without-app-icon': !this.appIcon,
-            }, "aria-label": this.ariaLabelAppSwitchIconButton })), showCompanyLogoByProperty && (h("div", { key: '8c2dc3e31111a04c5e7aecabd11b458dc1c6b199', class: "logo" }, h("img", { key: '0594b3e00eb190ac2beef24df3c6987668c1fd69', src: this.companyLogo, alt: this.companyLogoAlt }))), h("div", { key: 'b51ceb91b1079d363999026e560874b0c2a1e390', class: {
+            }, "aria-label": this.ariaLabelAppSwitchIconButton })), showCompanyLogoByProperty && (h("div", { key: '549e18052627c090a6ac795276cbb5ca3d44d3a4', class: "logo" }, h("img", { key: '89a662b47ae47e1e2a59065bf67f9abae02aa337', src: this.companyLogo, alt: this.companyLogoAlt }))), h("div", { key: 'a1f5332a2abc48f3e33fff59d3b1d512b1babab7', class: {
                 logo: true,
                 'hide-logo': !this.hasSlottedLogo,
-            } }, h("slot", { key: '2659560a89277665227c8169cd1f40493ca50957', name: "logo", onSlotchange: () => (this.hasSlottedLogo = this.checkLogoSlot()) })), h("div", { key: '80f65852355d615792c0a923d174095aac094fea', class: "name" }, h("ix-typography", { key: 'ab984e7163d972ada42958f53a0ce58e9236cf34', format: "body-lg", class: "application-name" }, this.name), this.nameSuffix && this.breakpoint !== 'sm' && (h("ix-typography", { key: '9cd307c5ec49d7988084918d2f7e741669e501c9', format: "body-xs", class: "application-name-suffix" }, this.nameSuffix)))), h("div", { key: '9336ed1416b6e532a92d266809296f8509f35490', class: { 'right-side': true, sm: this.breakpoint === 'sm' } }, this.breakpoint !== 'sm' && (h("div", { key: 'daad8a4304d6276f4b4ac9c5e00ec939f3121a8c', class: "secondary" }, h("slot", { key: '2c6948ba05eb8fad24ef6a7fdddef62edd7b6f3b', name: "secondary" }))), h("div", { key: '49d1396f97cb218001107b8b189a66f9b6e1cc4a', class: "content" }, this.breakpoint !== 'sm' && h("slot", { key: 'a261e8552476f9d8b90101a4e471575a1787b076' }), h("ix-icon-button", { key: '0cd13b5d1bcc3d9aeb2a16465529833595af57d6', class: {
+            } }, h("slot", { key: 'd7961a13bcd1939607fc164f38b8a037838c3546', name: "logo", onSlotchange: () => (this.hasSlottedLogo = this.checkLogoSlot()) })), h("div", { key: 'd8824ebba9f3e8c938581d8bc4e822383a014cd4', class: "name" }, h("ix-typography", { key: 'e9add4d68d6fb7748d3f660cafea9651512c06b0', format: "body-lg", class: "application-name" }, this.name), this.nameSuffix && this.breakpoint !== 'sm' && (h("ix-typography", { key: 'a4ff0de3510e4466b03818f4cf486e2cf6cf81fa', format: "body-xs", class: "application-name-suffix" }, this.nameSuffix)))), h("div", { key: 'bace1c6516c55779fb03b24fa17f951d5fbd3380', class: { 'right-side': true, sm: this.breakpoint === 'sm' } }, this.breakpoint !== 'sm' && (h("div", { key: 'a16cd7e3894c90e3914f1914b4f01b755f86e8f2', class: "secondary" }, h("slot", { key: '46dab9c71d01179bab155b26d74318f5aeac914d', name: "secondary" }))), h("div", { key: '5bb2ff0dc16081eb95ad3d2261215b9c91c44591', class: "content" }, this.breakpoint !== 'sm' && h("slot", { key: '652934ebe4966258b5574275f130c8ff3c108320' }), h("ix-icon-button", { key: 'e43e93204884512375a5e3aa58f8942d5ffadabd', class: {
                 'context-menu': true,
                 'context-menu-visible': this.hasOverflowContextMenu,
-            }, "data-context-menu": true, "data-testid": "show-more", icon: iconMoreMenu, variant: "subtle-tertiary", "aria-label": this.ariaLabelMoreMenuIconButton, "aria-hidden": a11yBoolean(!this.hasOverflowContextMenu) }), h("ix-dropdown", { key: '2340aec42fc9d4a23d3fc257dabd24b44789c60f', "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton(), "aria-hidden": a11yBoolean(!this.hasOverflowContextMenu), enableTopLayer: this.enableTopLayer }, h("div", { key: 'ba14593b7d8365c205f61792a71f1f83190a3683', class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, this.breakpoint === 'sm' && (h("div", { key: '612c535b854e7254ebcad06edf9f41ad745babcb', class: {
+            }, "data-context-menu": true, "data-testid": "show-more", icon: iconMoreMenu, variant: "subtle-tertiary", "aria-label": this.ariaLabelMoreMenuIconButton, "aria-hidden": a11yBoolean(!this.hasOverflowContextMenu) }), h("ix-dropdown", { key: '40504c3b1da650adfac72d3b599dc76826f87db3', "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton(), "aria-hidden": a11yBoolean(!this.hasOverflowContextMenu), enableTopLayer: this.enableTopLayer }, h("div", { key: '32354b88745e7d3abc82092508d7e239dc7cdd08', class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, this.breakpoint === 'sm' && (h("div", { key: 'fbb40a8a3fc271d790e777e14bd0d761a2ffa9c2', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasSecondarySlotElements,
-            } }, h("slot", { key: '6a8c8df87ce24ca24cee6738e16cae3150370573', name: "secondary", onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), this.breakpoint === 'sm' && (h("div", { key: 'ffb74288c8b2f71941c9f9c4d710c4fe44c9996a', class: {
+            } }, h("slot", { key: '8810899a0a8af80c84cbd9ea850571f851133dd1', name: "secondary", onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), this.breakpoint === 'sm' && (h("div", { key: '29ab95c0abfae49bfcef966e8d886989c5913667', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasDefaultSlotElements,
-            } }, h("slot", { key: '4d7d25254108d0297137f624a4ed248a4b8e8a7f', onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), h("div", { key: '188ccce5cc9eddf0bdadc92716a98f82491c3fcf', class: {
+            } }, h("slot", { key: '1ba46d784afe0ec5cdc13dee3a428b78c8d8ad45', onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), h("div", { key: '426357c44559b9f8e262d327f3f9e9293c3dfdee', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasOverflowSlotElements,
-            } }, h("slot", { key: 'f5c7c0c2efec69700a7f44c90a89f56aec34ac85', name: "overflow", onSlotchange: () => this.updateHasSlotAssignedElementsStates() })))), h("slot", { key: '002c29f2656a44471f7990d50354bf2767ca2021', name: "ix-application-header-avatar" })))));
+            } }, h("slot", { key: 'caa7b3ba3108478d3b50c2a67d33f844f66b9891', name: "overflow", onSlotchange: () => this.updateHasSlotAssignedElementsStates() })))), h("slot", { key: '3816f891d0c7980680d61acd9828e90e01b84e33', name: "ix-application-header-avatar" })))));
     }
     static get is() { return "ix-application-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/application-header/application-switch-modal/application-switch-modal.css

@@ -38,7 +38,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -47,37 +47,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 .content {

package/dist/collection/components/avatar/avatar.css

@@ -74,6 +74,14 @@
 * 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.
+*/
+/*
 * SPDX-FileCopyrightText: 2024 Siemens AG
 *
 * SPDX-License-Identifier: MIT
@@ -103,7 +111,7 @@
   width: -moz-fit-content;
   width: fit-content;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -112,37 +120,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 .avatar {

package/dist/collection/components/avatar/avatar.js

@@ -28,6 +28,9 @@ function AvatarImage(props) {
 function UserInfo(props) {
     return (h(Fragment, null, h("div", { class: "user-info", onClick: (event) => event.preventDefault() }, h(AvatarImage, { image: props.image, initials: props.initials, ariaLabel: props.ariaLabel }), h("div", { class: "user" }, h("div", { class: "username" }, props.userName), props.extra && (h("ix-typography", { class: "extra", "text-color": 'soft' }, props.extra))))));
 }
+/**
+ * @slot default - Custom content displayed inside the avatar dropdown when placed inside header.
+ */
 export class Avatar extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActiveDescendantMixin) {
     constructor() {
         super();