@siemens/ix 5.1.0 → 5.2.0

package/dist/collection/components/toast/toast-container.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 {

package/dist/collection/components/toast/toast-container.js

@@ -8,6 +8,9 @@
  */
 import { h, Host } from "@stencil/core";
 import { TypedEvent } from "../utils/typed-event";
+/**
+ * @slot default - Toast messages.
+ */
 export class ToastContainer {
     hostElement;
     /**
@@ -66,10 +69,10 @@ export class ToastContainer {
         };
     }
     render() {
-        return (h(Host, { key: '87023a7ec041ea773611f6cd2f775a0b5bc0d487', class: {
+        return (h(Host, { key: '2b7b81cc4a3cbef019ea2e3d80289932f851d1ad', class: {
                 'toast-container--bottom-right': this.position === 'bottom-right',
                 'toast-container--top-right': this.position === 'top-right',
-            } }, h("slot", { key: '2f5a7d0cc8277b74e8965bd28979af5ae2bcf8d0' })));
+            } }, h("slot", { key: '8782fca12768a3a18aa03b480e06fa01a8f35968' })));
     }
     static get is() { return "ix-toast-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toast/toast.css

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

package/dist/collection/components/toast/toast.js

@@ -8,6 +8,10 @@
  */
 import { h, Host, } from "@stencil/core";
 import { iconClose, iconError, iconInfo, iconSuccess, iconWarning, } from "@siemens/ix-icons/icons";
+/**
+ * @slot default - Toast message content.
+ * @slot action - Action displayed next to the toast message.
+ */
 export class Toast {
     /**
      * Toast type
@@ -104,11 +108,11 @@ export class Toast {
             animationPlayState: this.touched || this.paused ? 'paused' : 'running',
         };
         progressBarClass.push('toast-progress-bar--animated');
-        return (h(Host, { key: 'd1d8b347562ec19da710d70d55ae49b6d1a3de72', role: "alert", "aria-live": "polite", "aria-atomic": "true", class: "animate__animated animate__fadeIn" }, h("div", { key: 'bef026521215c457e713eb33d5e0b424a5fb5e1a', class: "toast-body", onPointerLeave: () => {
+        return (h(Host, { key: '23320a0cad0f80260f080d3ccb893b97b0de3430', role: "alert", "aria-live": "polite", "aria-atomic": "true", class: "animate__animated animate__fadeIn" }, h("div", { key: 'e11be14a88b8b220d42810dc902c67f3b4bc6048', class: "toast-body", onPointerLeave: () => {
                 this.touched = false;
             }, onPointerEnter: () => {
                 this.touched = true;
-            } }, (this.type || this.icon) && !this.hideIcon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: 'f7c486254ea1e82a1dd3f70424cdc02ea5d6cc08', class: "toast-content" }, this.toastTitle ? (h("ix-typography", { class: "toast-title", format: "h5" }, this.toastTitle)) : null, h("div", { key: '80b15dbaa38fc4ec0803af9a9a19e45d979ec2fb', class: "toast-message" }, h("slot", { key: 'de6bb9039690a987e2b0915ef5430eca6cdda681' })), h("div", { key: 'dd88a6baa8fb34e871c2391f9d740dd2c5c64c9b', class: "toast-action" }, h("slot", { key: '47f87d3ba3d6e16bc5367529b1e3ad5102e001de', name: "action" }))), h("div", { key: '6d63eb42fac0c5d05c073071169e574d20627878', class: "toast-close" }, h("ix-icon-button", { key: '3b81c1dd6dc012e46912f6d7356078d90f48f397', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.closeToast.emit(), "aria-label": this.ariaLabelCloseIconButton }))), !this.preventAutoClose && (h("div", { key: '9b6712243f444d7d55bdd172b64676b5aba7c2a8', class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
+            } }, (this.type || this.icon) && !this.hideIcon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: '303876065f69252b89566c73aebb23bf28ebf221', class: "toast-content" }, this.toastTitle ? (h("ix-typography", { class: "toast-title", format: "h5" }, this.toastTitle)) : null, h("div", { key: 'bf8e2ae5a9b24c7161f1823ce9542172cd092006', class: "toast-message" }, h("slot", { key: 'f60b4dae5967a6f192d432012273ab3e602f9cf3' })), h("div", { key: '97d552f3014e0f428d8beb4d1a31e6ba3b9085cd', class: "toast-action" }, h("slot", { key: 'a107a97f28acc21d33024ab7a2f33ccb571648c2', name: "action" }))), h("div", { key: 'b074eab437358b57a65aa2c6d96f3860cb04536e', class: "toast-close" }, h("ix-icon-button", { key: '8ca71069c1dbf7c25186357ebf508e7f69bf3c92', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.closeToast.emit(), "aria-label": this.ariaLabelCloseIconButton }))), !this.preventAutoClose && (h("div", { key: '4dc63a7a7ed80ac9758db43acc0200ad71a4fae0', class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
                 this.close();
             }, onTransitionEnd: () => {
                 if (this.progress === 0) {

package/dist/collection/components/toggle/toggle.css

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

package/dist/collection/components/toggle/toggle.js

@@ -148,7 +148,7 @@ export class Toggle extends Mixin(...DefaultMixins, InheritAriaAttributesMixin)
         const ariaChecked = this.indeterminate
             ? 'mixed'
             : a11yBoolean(this.checked);
-        return (h(Host, { key: '41d91ada6ad7f8f0000ff5c636274df99b5bcec3', ...this.inheritAriaAttributes, role: "switch", tabindex: this.disabled ? -1 : 0, "aria-label": ariaLabel, "aria-checked": ariaChecked, "aria-disabled": a11yBoolean(this.disabled), "aria-required": a11yBoolean(this.required), class: {
+        return (h(Host, { key: 'dcc719533d7ebad6ebfc175db7fcce81ca432f6c', ...this.inheritAriaAttributes, role: "switch", tabindex: this.disabled ? -1 : 0, "aria-label": ariaLabel, "aria-checked": ariaChecked, "aria-disabled": a11yBoolean(this.disabled), "aria-required": a11yBoolean(this.required), class: {
                 disabled: this.disabled,
             }, onBlur: () => this.ixBlur.emit(), onFocus: () => (this.touched = true), onKeyDown: (e) => {
                 if (this.disabled)
@@ -161,11 +161,11 @@ export class Toggle extends Mixin(...DefaultMixins, InheritAriaAttributesMixin)
                 if (!this.disabled) {
                     this.onCheckedChange(!this.checked);
                 }
-            } }, h("div", { key: 'd712114dae9e0316346e6fb20b3ae28678308788', class: "wrapper" }, h("div", { key: '433f2624d9b2b619961a893c5ca4c13f628fa3a6', class: {
+            } }, h("div", { key: '86cac25e18858e76e535df0c0a66e94dc5ca4c30', class: "wrapper" }, h("div", { key: '63eb080dd311b49c211e57abc8b1b5830a8fb81c', class: {
                 switch: true,
                 checked: this.checked,
                 indeterminate: this.indeterminate,
-            }, "aria-hidden": "true" }, h("div", { key: '02272dc7dad538380fe15e57835ac470e1327c4e', class: "slider" })), !this.hideText && (h("ix-typography", { key: '1917d18ba54dbcacb7995dafa45082d3ce7bc36d', class: "label", "aria-hidden": "true" }, toggleText)))));
+            }, "aria-hidden": "true" }, h("div", { key: 'a2f46d4412c3f51d93ffe20d9e8e7681c50f2fa8', class: "slider" })), !this.hideText && (h("ix-typography", { key: '8ed5848b4641a0152b937e8e3fdb9ce4d45ff1d3', class: "label", "aria-hidden": "true" }, toggleText)))));
     }
     static get is() { return "ix-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle-button/toggle-button.css

@@ -73,6 +73,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);
@@ -93,7 +101,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -102,37 +110,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,
@@ -204,7 +212,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -213,37 +221,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,
@@ -865,7 +873,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -874,37 +882,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 .btn {

package/dist/collection/components/toggle-button/toggle-button.js

@@ -11,6 +11,9 @@ import { BaseButton } from "../button/base-button";
 import { a11yBoolean, getFallbackLabelFromIconName } from "../utils/a11y";
 import { DefaultMixins } from "../utils/internal/component";
 import { InheritAriaAttributesMixin, } from "../utils/internal/mixins/accessibility/inherit-aria-attributes.mixin";
+/**
+ * @slot default - Toggle button label.
+ */
 export class ToggleButton extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
     constructor() {
         super();
@@ -67,9 +70,9 @@ export class ToggleButton extends Mixin(...DefaultMixins, InheritAriaAttributesM
                     getFallbackLabelFromIconName(this.icon),
             },
         };
-        return (h(Host, { key: '22c2548a493307f2efc554a137e4e6ba93d913a4', class: {
+        return (h(Host, { key: '128350f4501a9f4eb89c6510edafe59c00a0b1e8', class: {
                 disabled: this.disabled || this.loading,
-            } }, h(BaseButton, { key: '015a3ad74d231eaf896c29c6ab5fae45e6cf4fb5', ...baseButtonProps }, h("slot", { key: 'ad0158fc047212e96f296147b753f6847af768bc' }))));
+            } }, h(BaseButton, { key: '9dc929b6fa46e7260b5504b2627c94c794916ad5', ...baseButtonProps }, h("slot", { key: 'b98585200dbee6bfdda03aa1d06243e72106c3e7' }))));
     }
     static get is() { return "ix-toggle-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -18,6 +18,7 @@ let tooltipInstance = 0;
 /**
  * @slot title-icon - Icon displayed next to the tooltip title. The icon will be displayed as 16x16px.
  * @slot title-content - Content of tooltip title
+ * @slot default - Tooltip body content.
  */
 export class Tooltip {
     /**
@@ -368,7 +369,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: '8aed42852f615787c48fa06b0682738a1f330440', role: "tooltip", class: { visible: this.visible } }, h("dialog", { key: 'f9291fb22d6a57c8cb4e6a2ad00b93291e21ba8e', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, h("div", { key: 'b3549060bdc5e21ce10c3a131d96172b156e4b15', class: "tooltip-container" }, h("div", { key: '9faaaf7ad71f73267270b97d2d4ba06de1c9db15', class: "content-wrapper" }, h("div", { key: '2613a69b5ade812a9bf6850c40ea0b6c3b231c29', class: 'tooltip-title' }, h("slot", { key: 'b4e2bd1cbefd7a1e684967e876404e9df78b3c2b', name: "title-icon", onSlotchange: (e) => this.handleTitleIconSlotChange(e) }), h("ix-typography", { key: 'ad34b68a4b538da01990d41b8ba5f35e6f54f71a', format: "h5" }, this.titleContent, h("slot", { key: '670455a0bfda60771c9af9b1b1890826f9a9431f', name: "title-content" }))), h("slot", { key: '82e0591cfb4861702b6a65f8e598d6475e5054f6' }), h("div", { key: '19145d17a5db3aaaf1750f3e6fcb0091d4baad4c', class: "arrow" }))))));
+        return (h(Host, { key: '59edeeb4c78daf4679cb73e1639781e2df1d57c0', role: "tooltip", class: { visible: this.visible } }, h("dialog", { key: 'c1e5d1fcddb87609654c945e42b04379a94cae79', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, h("div", { key: '3e24a73fb904b4a8861322e84a97ed72234c672c', class: "tooltip-container" }, h("div", { key: 'aa68b5bbe623e094fa5311ee19dbd96090776779', class: "content-wrapper" }, h("div", { key: 'c3304e93fc6fa38c3f31ebf3773054247bfa1c61', class: 'tooltip-title' }, h("slot", { key: '5859428cdc8a2502930760a2cb8491ba506200e0', name: "title-icon", onSlotchange: (e) => this.handleTitleIconSlotChange(e) }), h("ix-typography", { key: 'dcb18580a59c5cf0200b89d176e8ca56fca98b24', format: "h5" }, this.titleContent, h("slot", { key: 'b495bec36b40b39538f54aeee58591b3815e3cf6', name: "title-content" }))), h("slot", { key: '59970a04ae9909460aeb2c4f9a515ed1ce7b2863' }), h("div", { key: 'ff994a212b5b355ed18a002f2e8aaadaaae09b1b', class: "arrow" }))))));
     }
     static get is() { return "ix-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tree/tree.js

@@ -11,6 +11,9 @@ import { dropdownController } from "../dropdown/dropdown-controller";
 import { renderDefaultItem } from "../tree-item/default-tree-item";
 import { VirtualList } from "./../utils/lazy-list";
 import { defaultRefreshTreeOptions } from "./tree.types";
+/**
+ * @slot default - Tree items.
+ */
 export class Tree {
     hostElement;
     /**
@@ -301,7 +304,7 @@ export class Tree {
         this.nodeClicked.emit(id);
     }
     render() {
-        return (h(Host, { key: '2559d80cdc3622837771d6f9484117b5d8ae15db', onClick: (event) => this.onTreeItemClick(event) }, h("slot", { key: 'f1b3e2121e4833481dcf91594f38434318de84bc' })));
+        return (h(Host, { key: '855ec01de8c175c0248069737dcfa240d3848264', onClick: (event) => this.onTreeItemClick(event) }, h("slot", { key: 'ffc4b5117f8bda3710030ee85cdbceed417133c0' })));
     }
     static get is() { return "ix-tree"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tree-item/tree-item.css

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

package/dist/collection/components/tree-item/tree-item.js

@@ -8,6 +8,9 @@
  */
 import { h, Host } from "@stencil/core";
 import { iconChevronRightSmall } from "@siemens/ix-icons/icons";
+/**
+ * @slot default - Tree item content and nested items.
+ */
 export class TreeItem {
     /**
      * Text
@@ -41,10 +44,10 @@ export class TreeItem {
     itemClick;
     render() {
         const isDisabled = this.disabled || this.context?.isDisabled;
-        return (h(Host, { key: 'e7e34e163bd93d7cd473167c20f6fe5cfc7a555b', class: {
+        return (h(Host, { key: 'f59b4c0d450339118b34d3b61b340a10ca988930', class: {
                 selected: !!this.context?.isSelected,
                 disabled: !!isDisabled,
-            } }, h("div", { key: 'ad4deffb89068a0e74f3b0596f59de1262f549b3', class: "icon-toggle-container" }, this.hasChildren ? (h("ix-icon", { name: iconChevronRightSmall, size: "24", class: {
+            } }, h("div", { key: 'd2a671021cc391d53bd120b81a436a84aded80b7', class: "icon-toggle-container" }, this.hasChildren ? (h("ix-icon", { name: iconChevronRightSmall, size: "24", class: {
                 ['icon-toggle-down']: !!this.context?.isExpanded,
             }, color: "color-std-text", onClick: (e) => {
                 if (isDisabled) {
@@ -56,12 +59,12 @@ export class TreeItem {
             }, "aria-label": this.ariaLabelChevronIcon ??
                 (this.context?.isExpanded
                     ? 'Collapse tree item'
-                    : 'Expand tree item') })) : null), h("div", { key: '632ac5edca96314ec279e229eb77c1b12fbc9af1', class: "tree-node-container", onClick: () => {
+                    : 'Expand tree item') })) : null), h("div", { key: '9f8858524c797a1bccc7f282fd916024f660b09b', class: "tree-node-container", onClick: () => {
                 if (isDisabled) {
                     return;
                 }
                 this.itemClick.emit();
-            } }, h("div", { key: 'b2532d4c136111a563c4e54cbe1d8d6bfae3a20b', class: "tree-node-text" }, this.text), h("slot", { key: 'daf4d0a32bba8574b11903205fb8cecdf8ab3d11' }))));
+            } }, h("div", { key: 'b0f742b8aeea57c22eefe520e0bff25dabe49b40', class: "tree-node-text" }, this.text), h("slot", { key: 'd18611d1682b05902d218993d2733f86be879b74' }))));
     }
     static get is() { return "ix-tree-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/typography/typography.css

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

package/dist/collection/components/typography/typography.js

@@ -7,6 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from "@stencil/core";
+/**
+ * @slot default - Text content.
+ */
 export class IxTypography {
     /**
      * Text format
@@ -43,7 +46,7 @@ export class IxTypography {
                 color: IxTypography.getTextColor(this.textColor),
             };
         }
-        return (h(Host, { key: '618a929c958412cf860566ff38de557af16b4df1', class: typographyClass, style: style }, h("slot", { key: 'a766532919f0d8aa5e844b5501c724c5a149b2c0' })));
+        return (h(Host, { key: 'dcc0f169666286fcce7f0f0f5808e1e0d72bca90', class: typographyClass, style: style }, h("slot", { key: '9da2618e58af8dd12536c7d535d628173b33e956' })));
     }
     static get is() { return "ix-typography"; }
     static get encapsulation() { return "shadow"; }