@siemens/ix 5.1.0 → 5.2.0

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

@@ -33,13 +33,158 @@
 * 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.
+*/
+/*
+* 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-dropdown-button-border-radius: var(--theme-btn--border-radius);
+  --ix-dropdown-button-focus-outline-color: var(--theme-color-focus-bdr);
+  --ix-dropdown-button-focus-outline-offset: var(
+    --theme-btn--focus--outline-offset
+  );
+  --ix-dropdown-button-primary-color: var(--theme-btn-primary--color);
+  --ix-dropdown-button-primary-color-disabled: var(
+    --theme-btn-primary--color--disabled
+  );
+  --ix-dropdown-button-primary-background-active: var(
+    --theme-btn-primary--background--active
+  );
+  --ix-dropdown-button-primary-color-active: var(
+    --theme-btn-primary--color--active
+  );
+  --ix-dropdown-button-primary-border-color-active: var(
+    --theme-btn-primary--border-color--active
+  );
+  --ix-dropdown-button-secondary-color: var(--theme-btn-secondary--color);
+  --ix-dropdown-button-secondary-color-disabled: var(
+    --theme-btn-secondary--color--disabled
+  );
+  --ix-dropdown-button-secondary-background-active: var(
+    --theme-btn-secondary--background--active
+  );
+  --ix-dropdown-button-secondary-color-active: var(
+    --theme-btn-secondary--color--active
+  );
+  --ix-dropdown-button-secondary-border-color-active: var(
+    --theme-btn-secondary--border-color--active
+  );
+  --ix-dropdown-button-tertiary-color: var(--theme-btn-tertiary--color);
+  --ix-dropdown-button-tertiary-color-disabled: var(
+    --theme-btn-tertiary--color--disabled
+  );
+  --ix-dropdown-button-tertiary-background-active: var(
+    --theme-btn-tertiary--background--active
+  );
+  --ix-dropdown-button-tertiary-color-active: var(
+    --theme-btn-tertiary--color--active
+  );
+  --ix-dropdown-button-tertiary-border-color-active: var(
+    --theme-btn-tertiary--border-color--active
+  );
+  --ix-dropdown-button-subtle-primary-color: var(--theme-btn-subtle-primary--color);
+  --ix-dropdown-button-subtle-primary-color-disabled: var(
+    --theme-btn-subtle-primary--color--disabled
+  );
+  --ix-dropdown-button-subtle-primary-background-active: var(
+    --theme-btn-subtle-primary--background--active
+  );
+  --ix-dropdown-button-subtle-primary-color-active: var(
+    --theme-btn-subtle-primary--color--active
+  );
+  --ix-dropdown-button-subtle-primary-border-color-active: var(
+    --theme-btn-subtle-primary--border-color--active
+  );
+  --ix-dropdown-button-subtle-secondary-color: var(--theme-btn-subtle-secondary--color);
+  --ix-dropdown-button-subtle-secondary-color-disabled: var(
+    --theme-btn-subtle-secondary--color--disabled
+  );
+  --ix-dropdown-button-subtle-secondary-background-active: var(
+    --theme-btn-subtle-secondary--background--active
+  );
+  --ix-dropdown-button-subtle-secondary-color-active: var(
+    --theme-btn-subtle-secondary--color--active
+  );
+  --ix-dropdown-button-subtle-secondary-border-color-active: var(
+    --theme-btn-subtle-secondary--border-color--active
+  );
+  --ix-dropdown-button-subtle-tertiary-color: var(--theme-btn-subtle-tertiary--color);
+  --ix-dropdown-button-subtle-tertiary-color-disabled: var(
+    --theme-btn-subtle-tertiary--color--disabled
+  );
+  --ix-dropdown-button-subtle-tertiary-background-active: var(
+    --theme-btn-subtle-tertiary--background--active
+  );
+  --ix-dropdown-button-subtle-tertiary-color-active: var(
+    --theme-btn-subtle-tertiary--color--active
+  );
+  --ix-dropdown-button-subtle-tertiary-border-color-active: var(
+    --theme-btn-subtle-tertiary--border-color--active
+  );
+  --ix-dropdown-button-danger-primary-color: var(--theme-btn-danger-primary--color);
+  --ix-dropdown-button-danger-primary-color-disabled: var(
+    --theme-btn-danger-primary--color--disabled
+  );
+  --ix-dropdown-button-danger-primary-background-active: var(
+    --theme-btn-danger-primary--background--active
+  );
+  --ix-dropdown-button-danger-primary-color-active: var(
+    --theme-btn-danger-primary--color--active
+  );
+  --ix-dropdown-button-danger-primary-border-color-active: var(
+    --theme-btn-danger-primary--border-color--active
+  );
+  --ix-dropdown-button-danger-secondary-color: var(--theme-btn-danger-secondary--color);
+  --ix-dropdown-button-danger-secondary-color-disabled: var(
+    --theme-btn-danger-secondary--color--disabled
+  );
+  --ix-dropdown-button-danger-secondary-background-active: var(
+    --theme-btn-danger-secondary--background--active
+  );
+  --ix-dropdown-button-danger-secondary-color-active: var(
+    --theme-btn-danger-secondary--color--active
+  );
+  --ix-dropdown-button-danger-secondary-border-color-active: var(
+    --theme-btn-danger-secondary--border-color--active
+  );
+  --ix-dropdown-button-danger-tertiary-color: var(--theme-btn-danger-tertiary--color);
+  --ix-dropdown-button-danger-tertiary-color-disabled: var(
+    --theme-btn-danger-tertiary--color--disabled
+  );
+  --ix-dropdown-button-danger-tertiary-background-active: var(
+    --theme-btn-danger-tertiary--background--active
+  );
+  --ix-dropdown-button-danger-tertiary-color-active: var(
+    --theme-btn-danger-tertiary--color--active
+  );
+  --ix-dropdown-button-danger-tertiary-border-color-active: var(
+    --theme-btn-danger-tertiary--border-color--active
+  );
+}
+
 :host {
   display: inline-block;
   position: relative;
   height: 2rem;
   width: auto;
-  --ix-dropdown-button-border-radius-left: var(--theme-btn--border-radius);
-  --ix-dropdown-button-border-radius-right: var(--theme-btn--border-radius);
+  --ix-dropdown-button-border-radius-left: var(
+    --ix-dropdown-button-border-radius
+  );
+  --ix-dropdown-button-border-radius-right: var(
+    --ix-dropdown-button-border-radius
+  );
   border-top-left-radius: var(--ix-dropdown-button-border-radius-left);
   border-bottom-left-radius: var(--ix-dropdown-button-border-radius-left);
   border-top-right-radius: var(--ix-dropdown-button-border-radius-right);
@@ -50,7 +195,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -59,37 +204,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 .hide {
@@ -132,61 +277,61 @@
   border-left: 4px solid transparent;
   border-top: 0 solid transparent;
   border-bottom: 4px solid;
-  color: var(--theme-btn-primary--color);
+  color: var(--ix-dropdown-button-primary-color);
 }
 :host .triangle.primary {
-  color: var(--theme-btn-primary--color);
+  color: var(--ix-dropdown-button-primary-color);
 }
 :host .triangle.secondary {
-  color: var(--theme-btn-secondary--color);
+  color: var(--ix-dropdown-button-secondary-color);
 }
 :host .triangle.tertiary {
-  color: var(--theme-btn-tertiary--color);
+  color: var(--ix-dropdown-button-tertiary-color);
 }
 :host .triangle.primary.disabled {
-  color: var(--theme-btn-primary--color--disabled);
+  color: var(--ix-dropdown-button-primary-color-disabled);
 }
 :host .triangle.secondary.disabled {
-  color: var(--theme-btn-secondary--color--disabled);
+  color: var(--ix-dropdown-button-secondary-color-disabled);
 }
 :host .triangle.tertiary.disabled {
-  color: var(--theme-btn-tertiary--color--disabled);
+  color: var(--ix-dropdown-button-tertiary-color-disabled);
 }
 :host .triangle.subtle-primary {
-  color: var(--theme-btn-subtle-primary--color);
+  color: var(--ix-dropdown-button-subtle-primary-color);
 }
 :host .triangle.subtle-secondary {
-  color: var(--theme-btn-subtle-secondary--color);
+  color: var(--ix-dropdown-button-subtle-secondary-color);
 }
 :host .triangle.subtle-tertiary {
-  color: var(--theme-btn-subtle-tertiary--color);
+  color: var(--ix-dropdown-button-subtle-tertiary-color);
 }
 :host .triangle.subtle-primary.disabled {
-  color: var(--theme-btn-subtle-primary--color--disabled);
+  color: var(--ix-dropdown-button-subtle-primary-color-disabled);
 }
 :host .triangle.subtle-secondary.disabled {
-  color: var(--theme-btn-subtle-secondary--color--disabled);
+  color: var(--ix-dropdown-button-subtle-secondary-color-disabled);
 }
 :host .triangle.subtle-tertiary.disabled {
-  color: var(--theme-btn-subtle-tertiary--color--disabled);
+  color: var(--ix-dropdown-button-subtle-tertiary-color-disabled);
 }
 :host .triangle.danger-primary {
-  color: var(--theme-btn-danger-primary--color);
+  color: var(--ix-dropdown-button-danger-primary-color);
 }
 :host .triangle.danger-secondary {
-  color: var(--theme-btn-danger-secondary--color);
+  color: var(--ix-dropdown-button-danger-secondary-color);
 }
 :host .triangle.danger-tertiary {
-  color: var(--theme-btn-danger-tertiary--color);
+  color: var(--ix-dropdown-button-danger-tertiary-color);
 }
 :host .triangle.danger-primary.disabled {
-  color: var(--theme-btn-danger-primary--color--disabled);
+  color: var(--ix-dropdown-button-danger-primary-color-disabled);
 }
 :host .triangle.danger-secondary.disabled {
-  color: var(--theme-btn-danger-secondary--color--disabled);
+  color: var(--ix-dropdown-button-danger-secondary-color-disabled);
 }
 :host .triangle.danger-tertiary.disabled {
-  color: var(--theme-btn-danger-tertiary--color--disabled);
+  color: var(--ix-dropdown-button-danger-tertiary-color-disabled);
 }
 :host .content {
   display: flex;
@@ -208,8 +353,155 @@
 }
 
 :host(:focus-visible) {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
+  outline: 1px solid var(--ix-dropdown-button-focus-outline-color);
+  outline-offset: var(--ix-dropdown-button-focus-outline-offset);
+}
+
+:host([aria-expanded=true]) {
+  --theme-btn-primary--background: var(
+    --ix-dropdown-button-primary-background-active
+  );
+  --theme-btn-primary--background--hover: var(
+    --ix-dropdown-button-primary-background-active
+  );
+  --theme-btn-primary--color: var(--ix-dropdown-button-primary-color-active);
+  --theme-btn-primary--color--hover: var(
+    --ix-dropdown-button-primary-color-active
+  );
+  --theme-btn-primary--border-color: var(
+    --ix-dropdown-button-primary-border-color-active
+  );
+  --theme-btn-primary--border-color--hover: var(
+    --ix-dropdown-button-primary-border-color-active
+  );
+  --theme-btn-secondary--background: var(
+    --ix-dropdown-button-secondary-background-active
+  );
+  --theme-btn-secondary--background--hover: var(
+    --ix-dropdown-button-secondary-background-active
+  );
+  --theme-btn-secondary--color: var(--ix-dropdown-button-secondary-color-active);
+  --theme-btn-secondary--color--hover: var(
+    --ix-dropdown-button-secondary-color-active
+  );
+  --theme-btn-secondary--border-color: var(
+    --ix-dropdown-button-secondary-border-color-active
+  );
+  --theme-btn-secondary--border-color--hover: var(
+    --ix-dropdown-button-secondary-border-color-active
+  );
+  --theme-btn-tertiary--background: var(
+    --ix-dropdown-button-tertiary-background-active
+  );
+  --theme-btn-tertiary--background--hover: var(
+    --ix-dropdown-button-tertiary-background-active
+  );
+  --theme-btn-tertiary--color: var(--ix-dropdown-button-tertiary-color-active);
+  --theme-btn-tertiary--color--hover: var(
+    --ix-dropdown-button-tertiary-color-active
+  );
+  --theme-btn-tertiary--border-color: var(
+    --ix-dropdown-button-tertiary-border-color-active
+  );
+  --theme-btn-tertiary--border-color--hover: var(
+    --ix-dropdown-button-tertiary-border-color-active
+  );
+  --theme-btn-subtle-primary--background: var(
+    --ix-dropdown-button-subtle-primary-background-active
+  );
+  --theme-btn-subtle-primary--background--hover: var(
+    --ix-dropdown-button-subtle-primary-background-active
+  );
+  --theme-btn-subtle-primary--color: var(--ix-dropdown-button-subtle-primary-color-active);
+  --theme-btn-subtle-primary--color--hover: var(
+    --ix-dropdown-button-subtle-primary-color-active
+  );
+  --theme-btn-subtle-primary--border-color: var(
+    --ix-dropdown-button-subtle-primary-border-color-active
+  );
+  --theme-btn-subtle-primary--border-color--hover: var(
+    --ix-dropdown-button-subtle-primary-border-color-active
+  );
+  --theme-btn-subtle-secondary--background: var(
+    --ix-dropdown-button-subtle-secondary-background-active
+  );
+  --theme-btn-subtle-secondary--background--hover: var(
+    --ix-dropdown-button-subtle-secondary-background-active
+  );
+  --theme-btn-subtle-secondary--color: var(--ix-dropdown-button-subtle-secondary-color-active);
+  --theme-btn-subtle-secondary--color--hover: var(
+    --ix-dropdown-button-subtle-secondary-color-active
+  );
+  --theme-btn-subtle-secondary--border-color: var(
+    --ix-dropdown-button-subtle-secondary-border-color-active
+  );
+  --theme-btn-subtle-secondary--border-color--hover: var(
+    --ix-dropdown-button-subtle-secondary-border-color-active
+  );
+  --theme-btn-subtle-tertiary--background: var(
+    --ix-dropdown-button-subtle-tertiary-background-active
+  );
+  --theme-btn-subtle-tertiary--background--hover: var(
+    --ix-dropdown-button-subtle-tertiary-background-active
+  );
+  --theme-btn-subtle-tertiary--color: var(--ix-dropdown-button-subtle-tertiary-color-active);
+  --theme-btn-subtle-tertiary--color--hover: var(
+    --ix-dropdown-button-subtle-tertiary-color-active
+  );
+  --theme-btn-subtle-tertiary--border-color: var(
+    --ix-dropdown-button-subtle-tertiary-border-color-active
+  );
+  --theme-btn-subtle-tertiary--border-color--hover: var(
+    --ix-dropdown-button-subtle-tertiary-border-color-active
+  );
+  --theme-btn-danger-primary--background: var(
+    --ix-dropdown-button-danger-primary-background-active
+  );
+  --theme-btn-danger-primary--background--hover: var(
+    --ix-dropdown-button-danger-primary-background-active
+  );
+  --theme-btn-danger-primary--color: var(--ix-dropdown-button-danger-primary-color-active);
+  --theme-btn-danger-primary--color--hover: var(
+    --ix-dropdown-button-danger-primary-color-active
+  );
+  --theme-btn-danger-primary--border-color: var(
+    --ix-dropdown-button-danger-primary-border-color-active
+  );
+  --theme-btn-danger-primary--border-color--hover: var(
+    --ix-dropdown-button-danger-primary-border-color-active
+  );
+  --theme-btn-danger-secondary--background: var(
+    --ix-dropdown-button-danger-secondary-background-active
+  );
+  --theme-btn-danger-secondary--background--hover: var(
+    --ix-dropdown-button-danger-secondary-background-active
+  );
+  --theme-btn-danger-secondary--color: var(--ix-dropdown-button-danger-secondary-color-active);
+  --theme-btn-danger-secondary--color--hover: var(
+    --ix-dropdown-button-danger-secondary-color-active
+  );
+  --theme-btn-danger-secondary--border-color: var(
+    --ix-dropdown-button-danger-secondary-border-color-active
+  );
+  --theme-btn-danger-secondary--border-color--hover: var(
+    --ix-dropdown-button-danger-secondary-border-color-active
+  );
+  --theme-btn-danger-tertiary--background: var(
+    --ix-dropdown-button-danger-tertiary-background-active
+  );
+  --theme-btn-danger-tertiary--background--hover: var(
+    --ix-dropdown-button-danger-tertiary-background-active
+  );
+  --theme-btn-danger-tertiary--color: var(--ix-dropdown-button-danger-tertiary-color-active);
+  --theme-btn-danger-tertiary--color--hover: var(
+    --ix-dropdown-button-danger-tertiary-color-active
+  );
+  --theme-btn-danger-tertiary--border-color: var(
+    --ix-dropdown-button-danger-tertiary-border-color-active
+  );
+  --theme-btn-danger-tertiary--border-color--hover: var(
+    --ix-dropdown-button-danger-tertiary-border-color-active
+  );
 }
 
 :host([aria-expanded=true]:focus-visible) {

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

@@ -14,6 +14,10 @@ import { DefaultMixins } from "../utils/internal/component";
 import { AriaActiveDescendantMixin, } from "../utils/internal/mixins/accessibility/aria-activedescendant.mixin";
 import { ComponentIdMixin, } from "../utils/internal/mixins/id.mixin";
 import { closestPassShadow } from "../utils/shadow-dom";
+/**
+ * @slot button-label - Custom content displayed next to the button label.
+ * @slot default - Dropdown items.
+ */
 export class DropdownButton extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActiveDescendantMixin) {
     constructor() {
         super();
@@ -151,16 +155,16 @@ export class DropdownButton extends Mixin(...DefaultMixins, ComponentIdMixin, Ar
             this.hostContext?.datePicker ||
             this.hostContext?.splitButton ||
             this.hostContext?.tabs;
-        return (h(Host, { key: '66fd74e40043daa08bb5a8c06e41bb64a11c8341', class: {
+        return (h(Host, { key: 'ab9705c11ce957fc00a5dbe361e7e50fd8fab6c8', class: {
                 disabled: this.disabled,
                 'host-context-breadcrumb': !!this.hostContext?.breadcrumb,
                 'host-context-date-picker': !!this.hostContext?.datePicker,
                 'host-context-tabs': !!this.hostContext?.tabs,
-            }, ref: this.dropdownAnchor, tabIndex: this.disabled ? -1 : 0, ...ariaAttributes }, h("div", { key: '06ba01710bbf5ce23e3eed2a28b9d32d5c0f4d55', class: "dropdown-button" }, this.label || this.label === null ? (h("ix-button", { ...commonProperties, class: 'internal-button', alignment: "start", ref: (ref) => forceTabIndex(ref, -1), ariaLabelButton: this.ariaLabelDropdownButton ??
+            }, ref: this.dropdownAnchor, tabIndex: this.disabled ? -1 : 0, ...ariaAttributes }, h("div", { key: '09be27cd7b565ebcc71c37983c6300afa1a95802', class: "dropdown-button" }, this.label || this.label === null ? (h("ix-button", { ...commonProperties, class: 'internal-button', alignment: "start", ref: (ref) => forceTabIndex(ref, -1), ariaLabelButton: this.ariaLabelDropdownButton ??
                 (this.dropdownShow ? 'Close dropdown' : 'Open dropdown') }, h("div", { class: 'content' }, this.icon ? (h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, h("div", { class: 'button-label' }, this.label), h("slot", { name: "button-label" }), !hideChevron && (h("ix-icon", { "aria-hidden": "true", name: this.dropdownShow
                 ? iconChevronUpSmall
                 : iconChevronDownSmall, size: "24" }))))) : (h("div", null, h("ix-icon-button", { ...commonProperties, icon: this.icon, ref: (ref) => forceTabIndex(ref, -1), "aria-label": this.ariaLabelDropdownButton ??
-                (this.dropdownShow ? 'Close dropdown' : 'Open dropdown') }), !hideChevron && this.getTriangle()))), h("ix-dropdown", { key: '14ade5a93e488c58f66e6b48d0073fd6c3dc1914', role: "menu", ref: this.dropdownRef, id: `dropdown-button-menu-${this.dropdownButtonId}`, "aria-labelledby": `dropdown-button-${this.dropdownButtonId}`, trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior, enableTopLayer: this.enableTopLayer, disableFocusTrap: true, focusCheckedItem: this.focusCheckedItem, onShowChanged: (event) => this.onDropdownShowChanged(event), onScroll: (event) => {
+                (this.dropdownShow ? 'Close dropdown' : 'Open dropdown') }), !hideChevron && this.getTriangle()))), h("ix-dropdown", { key: 'a71d02c22bd6d0f79d8f4dbfa0b7bfe77e339e8f', role: "menu", ref: this.dropdownRef, id: `dropdown-button-menu-${this.dropdownButtonId}`, "aria-labelledby": `dropdown-button-${this.dropdownButtonId}`, trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior, enableTopLayer: this.enableTopLayer, disableFocusTrap: true, focusCheckedItem: this.focusCheckedItem, onShowChanged: (event) => this.onDropdownShowChanged(event), onScroll: (event) => {
                 // Need to dispatch the event again to handle infinite scroll of ix-date-picker,
                 // as the scroll event does not bubble beyond the shadow root
                 const scrollEvent = new CustomEvent('scroll', {
@@ -169,7 +173,7 @@ export class DropdownButton extends Mixin(...DefaultMixins, ComponentIdMixin, Ar
                     detail: event.detail,
                 });
                 this.hostElement.dispatchEvent(scrollEvent);
-            } }, h("slot", { key: '2dc84d3ac4f9e004011acef979e5d4671170884c' }))));
+            } }, h("slot", { key: '330b19b734d3ed649967f7360f5d1424fed3d665' }))));
     }
     static get is() { return "ix-dropdown-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-header/dropdown-header.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,36 +47,36 @@
     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/dropdown-header/dropdown-header.js

@@ -13,7 +13,7 @@ export class DropdownHeader {
      */
     label;
     render() {
-        return (h(Host, { key: '44755533997a737c2767b5cf5b849ec5c18c0efa' }, h("ix-typography", { key: 'f94459f4fc66fc47d7fa22c88477d5041b7c6fb7', class: 'category-text', format: 'h5' }, this.label)));
+        return (h(Host, { key: '63b4eb22a2aab032a71925d57c534d278bdf74c9' }, h("ix-typography", { key: 'bae57293ab2bf9a0bf1e3c60edc4df7b8e7ef17d', class: 'category-text', format: 'h5' }, this.label)));
     }
     static get is() { return "ix-dropdown-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -54,37 +54,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 .dropdown-item {
@@ -127,7 +127,7 @@
   text-overflow: ellipsis;
   white-space: pre;
 }
-:host .submenu-icon {
+:host .dropdown-item-end {
   margin-left: auto;
 }
 

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

@@ -13,6 +13,9 @@ import { IX_FOCUS_VISIBLE } from "../utils/focus/focus-utilities";
 import { DefaultMixins } from "../utils/internal/component";
 import { ComponentIdMixin, } from "../utils/internal/mixins/id.mixin";
 import { FocusVisibleMixin } from "../utils/internal/mixins/focus-visible.mixin";
+/**
+ * @slot default - Dropdown item content.
+ */
 export class DropdownItem extends Mixin(...DefaultMixins, ComponentIdMixin, FocusVisibleMixin) {
     constructor() {
         super();
@@ -86,7 +89,7 @@ export class DropdownItem extends Mixin(...DefaultMixins, ComponentIdMixin, Focu
                 'aria-expanded': 'false',
             };
         }
-        return (h(Host, { key: 'c3d7d2a14964fa2a609d5e028cdb14b802b02ada', id: id, role: this.itemRole, "aria-disabled": a11yBoolean(this.disabled), "aria-label": this.hostElement.ariaLabel ?? this.ariaLabelButton, class: {
+        return (h(Host, { key: 'f1c9bb57644764f6787c20fb7fe12e8d2e757d8c', id: id, role: this.itemRole, "aria-disabled": a11yBoolean(this.disabled), "aria-label": this.hostElement.ariaLabel ?? this.ariaLabelButton, class: {
                 hover: this.hover,
                 'icon-only': this.isIconOnly(),
                 disabled: this.disabled,
@@ -101,11 +104,11 @@ export class DropdownItem extends Mixin(...DefaultMixins, ComponentIdMixin, Focu
                 if (!this.disabled && (event.key === 'Enter' || event.key === ' ')) {
                     this.emitItemClick();
                 }
-            }, ...submenuAriaAttributes }, h("div", { key: '016ddf6f6b319b4d9e02541c95f02d76088cdbb6', class: {
+            }, ...submenuAriaAttributes }, h("div", { key: '7b2bba29e4d206d6bcd3698c86a614b7c89040f4', class: {
                 'dropdown-item': true,
                 'no-checked-field': this.suppressChecked,
                 disabled: this.disabled,
-            } }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { "aria-hidden": "true", class: "checkmark", name: iconSingleCheck, size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon, "aria-label": this.ariaLabelIcon })) : null, h("div", { key: '81ae34e7f76381ba84af73893c9882cedd958149', class: "dropdown-item-text" }, this.label, h("slot", { key: '9482ebc515d9de96a48bd747ab3293f1c1640a11' })), this.isSubMenu ? (h("ix-icon", { name: iconChevronRightSmall, class: 'submenu-icon' })) : null)));
+            } }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { "aria-hidden": "true", class: "checkmark", name: iconSingleCheck, size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon, "aria-label": this.ariaLabelIcon })) : null, h("div", { key: '9e7eaec28999e3d461e1cef864de78430e79687e', class: "dropdown-item-text" }, this.label, h("slot", { key: '9995e3e812948823f2d0bcfc81522626d550a0bd' })), h("div", { key: 'dd1f0367cf02891353a150b5b93eb7408435a0c9', class: "dropdown-item-end" }, h("slot", { key: '86e9ad8d4950f020309abad73c151038bf3344c2', name: "end" }), this.isSubMenu ? (h("ix-icon", { name: iconChevronRightSmall, class: 'submenu-icon' })) : null))));
     }
     static get is() { return "ix-dropdown-item"; }
     static get encapsulation() { return "shadow"; }