@siemens/ix 5.1.1 → 5.2.1

package/dist/collection/components/datetime-input/datetime-input.css

@@ -408,7 +408,7 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -417,37 +417,37 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
     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 .input-wrapper {
@@ -567,7 +567,7 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -576,37 +576,37 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
     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 input {

package/dist/collection/components/datetime-input/datetime-input.js

@@ -489,10 +489,10 @@ export class DatetimeInput extends Mixin(...DefaultMixins, InputPickerMixin) {
     }
     render() {
         const invalidText = getValidationText(this.isInputInvalid, this.invalidText, this.i18nErrorDateTimeUnparsable);
-        return (h(Host, { key: 'e3798b039b41158b1cf0c93f82f5aae2394b60b8', class: {
+        return (h(Host, { key: 'c6dab3c854539b33ce7bcdffdb441b96ae909c46', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '42e309eb2cab84b15a3053afb1d66018b62110cf', controlRef: this.inputElementRef, helperText: this.helperText, infoText: this.infoText, invalidText: invalidText, isInfo: this.isInfo, isInvalid: this.isInvalid, isValid: this.isValid, isWarning: this.isWarning, label: this.label, required: this.required, showTextAsTooltip: this.showTextAsTooltip, validText: this.validText, warningText: this.warningText }, this.renderInput()), h("ix-dropdown", { key: '5451e2a2275efe4558db30041b49b78ac203305a', class: "datetime-dropdown", closeBehavior: "outside", "data-testid": "datetime-dropdown", enableTopLayer: this.enableTopLayer, ref: this.dropdownElementRef, show: this.show, suppressOverflowBehavior: true, trigger: this.inputElementRef.waitForCurrent(), onShowChanged: (event) => {
+            } }, h("ix-field-wrapper", { key: 'cd147faf61199c60e0ab224af2dd2e56dcfea64a', controlRef: this.inputElementRef, helperText: this.helperText, infoText: this.infoText, invalidText: invalidText, isInfo: this.isInfo, isInvalid: this.isInvalid, isValid: this.isValid, isWarning: this.isWarning, label: this.label, required: this.required, showTextAsTooltip: this.showTextAsTooltip, validText: this.validText, warningText: this.warningText }, this.renderInput()), h("ix-dropdown", { key: '35ab730d2c304fb4aa71bc86c0994d0f1a952410', class: "datetime-dropdown", closeBehavior: "outside", "data-testid": "datetime-dropdown", enableTopLayer: this.enableTopLayer, ref: this.dropdownElementRef, show: this.show, suppressOverflowBehavior: true, trigger: this.inputElementRef.waitForCurrent(), onShowChanged: (event) => {
                 this.show = event.detail;
             }, focusTrapOptions: {
                 targetElement: this.datetimePickerRef,
@@ -504,7 +504,7 @@ export class DatetimeInput extends Mixin(...DefaultMixins, InputPickerMixin) {
                     datePickerElement?.focusActiveDay();
                 }
                 return true;
-            }, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'] }, h("ix-datetime-picker", { key: '3a469a3a476293d90dc7133feb94e9967c6d54bd', ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, dateFormat: this.dateOnlyFormat, embedded: true, from: this.from ?? '', i18nDone: this.i18nDone, i18nTime: this.i18nTime, locale: this.locale, maxDate: this.maxDate, maxTime: this.maxTime, minDate: this.minDate, minTime: this.minTime, ref: this.datetimePickerRef, showWeekNumbers: this.showWeekNumbers, singleSelection: true, time: this.time ?? '', timeFormat: this.timeOnlyFormat, weekStartIndex: this.weekStartIndex, onDateSelect: this.handleDateSelect }))));
+            }, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'] }, h("ix-datetime-picker", { key: '78934892208337ab3fdd71fe196dad5fd4914ec9', ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, dateFormat: this.dateOnlyFormat, embedded: true, from: this.from ?? '', i18nDone: this.i18nDone, i18nTime: this.i18nTime, locale: this.locale, maxDate: this.maxDate, maxTime: this.maxTime, minDate: this.minDate, minTime: this.minTime, ref: this.datetimePickerRef, showWeekNumbers: this.showWeekNumbers, singleSelection: true, time: this.time ?? '', timeFormat: this.timeOnlyFormat, weekStartIndex: this.weekStartIndex, onDateSelect: this.handleDateSelect }))));
     }
     static get is() { return "ix-datetime-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/datetime-picker/datetime-picker.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 ix-time-picker {

package/dist/collection/components/datetime-picker/datetime-picker.js

@@ -246,9 +246,9 @@ export class DatetimePicker {
     }
     render() {
         const { minTime, maxTime } = this.getEffectiveTimeConstraints();
-        return (h(Host, { key: '0eb6ec0e18a9794f023b8dd6dee89640b9a0a948' }, h("ix-date-time-card", { key: 'e45f91528b04c803324da4af217ebf7eda31dba0', hideHeader: true, hasFooter: true, embedded: this.embedded, corners: "rounded", noPadding: true }, h("ix-layout-grid", { key: '4cade86af3e6a77563e528d92d52c1d86079d0f9', class: "no-padding" }, h("ix-row", { key: '657adbd57b8334398f171b5aebf6e63cbc03b2af', class: "row-separator" }, h("ix-col", { key: '02d019f2a71c6c1c8cfa716a486acd7ed844c622', class: "col-separator" }, h("ix-date-picker", { key: 'efb6483f6528cec9660913bca6b51d907c59dd3f', ref: (ref) => (this.datePickerElement = ref), corners: "left", singleSelection: this.singleSelection, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, embedded: true, locale: this.locale, showWeekNumbers: this.showWeekNumbers, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, tabIndex: this.embedded ? -1 : 0,
-            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })), h("ix-col", { key: 'e0884bbeabca263427ed98d26febb94b9d90cf91' }, h("ix-time-picker", { key: '9b9088f1ed6568028ab41a7f9732e537a1438359', class: "min-width", ref: (ref) => (this.timePickerElement = ref), embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time, minTime: minTime, maxTime: maxTime, tabIndex: this.embedded ? -1 : 0,
-            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })))), h("div", { key: 'ad8dacb09da1525749481373191078dc1b85ba60', slot: "footer", class: "btn-select-date-container" }, h("ix-button", { key: '1124f92c6f59f14c74385f587f665537bd6cb9e2', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))));
+        return (h(Host, { key: '74103cbb608cda32c6ce7792b2c0a3638b04c02b' }, h("ix-date-time-card", { key: 'f9b1c284b74416ee9f84633ed1fd6fed292a341a', hideHeader: true, hasFooter: true, embedded: this.embedded, corners: "rounded", noPadding: true }, h("ix-layout-grid", { key: '3ec94694fb618b94535c799c31a711f73f577b02', class: "no-padding" }, h("ix-row", { key: 'd45083e8d657c9dc08c3a43150051ca4abf39593', class: "row-separator" }, h("ix-col", { key: '3688c2ee4e7dabf91953a3e685c7b8d10f087925', class: "col-separator" }, h("ix-date-picker", { key: '9f3bcce5cedd9d5bb449030c7c4cab16522c95f7', ref: (ref) => (this.datePickerElement = ref), corners: "left", singleSelection: this.singleSelection, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, embedded: true, locale: this.locale, showWeekNumbers: this.showWeekNumbers, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, tabIndex: this.embedded ? -1 : 0,
+            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })), h("ix-col", { key: '8d9e526e746b316e558144f0bf5a630168ddde6a' }, h("ix-time-picker", { key: '1d726de042a1b1b1d8b61870f028e4cd46b6a72e', class: "min-width", ref: (ref) => (this.timePickerElement = ref), embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time, minTime: minTime, maxTime: maxTime, tabIndex: this.embedded ? -1 : 0,
+            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })))), h("div", { key: '923cd8d5baad08e240c32c7ecaa33177afe4b12a', slot: "footer", class: "btn-select-date-container" }, h("ix-button", { key: '552314657eb3bf326e15b098561cff1cad0fc0d9', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))));
     }
     static get is() { return "ix-datetime-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/divider/divider.js

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 export class Divider {
     render() {
-        return h(Host, { key: 'eb2dfcf5c516b8b1469282e06edf116e63c7d66a' });
+        return h(Host, { key: '279e531d8f3dfd1b1cf2ca3ea1d41420e596c492' });
     }
     static get is() { return "ix-divider"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -396,7 +396,9 @@ export class Dropdown extends Mixin(...DefaultMixins) {
         }, {
             threshold: [0, 0.5, 1],
         });
-        this.intersectObserverTrigger.observe(this.anchorElement);
+        if (this.anchorElement) {
+            this.intersectObserverTrigger.observe(this.anchorElement);
+        }
     }
     createFallbackPlacement(side) {
         const alignment = this.placement.endsWith('-end') ? 'end' : 'start';
@@ -643,11 +645,15 @@ export class Dropdown extends Mixin(...DefaultMixins) {
         if (submenuIds.length === 0) {
             return;
         }
+        const dropdown = dropdownController.getDropdownById(submenuIds[0]);
+        if (!dropdown) {
+            return;
+        }
         event.detail.activeElement.classList.add('ix-dropdown-submenu-trigger-active');
-        dropdownController.present(dropdownController.getDropdownById(submenuIds[0]));
-        this.forwardQueryElement = dropdownController.getDropdownById(submenuIds[0]).hostElement;
+        dropdownController.present(dropdown);
+        this.forwardQueryElement = dropdown.hostElement;
         requestAnimationFrameNoNgZone(() => {
-            focusFirstDescendant(dropdownController.getDropdownById(submenuIds[0]).hostElement);
+            focusFirstDescendant(dropdown.hostElement);
         });
     }
     closeSubmenu() {
@@ -681,7 +687,7 @@ export class Dropdown extends Mixin(...DefaultMixins) {
         else if (this.hostRole) {
             ariaAttributes['role'] = this.hostRole;
         }
-        return (h(Host, { key: '316324b74a3654414f8ae385cec8a0fb7b5d2906', ...ariaAttributes, "aria-modal": "true", "data-ix-dropdown": this.dropdownElementId, "data-ix-focus-trap": true, class: {
+        return (h(Host, { key: '6f04440b82a4d0f62e2f15932a30a68107b988ec', ...ariaAttributes, "aria-modal": "true", "data-ix-dropdown": this.dropdownElementId, "data-ix-focus-trap": true, class: {
                 'dropdown-menu': true,
                 show: this.show,
                 // overflow handling not needed when using top-layer

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

@@ -33,13 +33,104 @@
 * 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-color-active: var(
+    --theme-btn-primary--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-color-active: var(
+    --theme-btn-secondary--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-color-active: var(
+    --theme-btn-tertiary--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-color-active: var(
+    --theme-btn-subtle-primary--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-color-active: var(
+    --theme-btn-subtle-secondary--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-color-active: var(
+    --theme-btn-subtle-tertiary--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-color-active: var(
+    --theme-btn-danger-primary--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-color-active: var(
+    --theme-btn-danger-secondary--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-color-active: var(
+    --theme-btn-danger-tertiary--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 +141,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -59,37 +150,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 +223,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 +299,38 @@
 }
 
 :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]) {
+  --ix-dropdown-button-primary-color: var(
+    --ix-dropdown-button-primary-color-active
+  );
+  --ix-dropdown-button-secondary-color: var(
+    --ix-dropdown-button-secondary-color-active
+  );
+  --ix-dropdown-button-tertiary-color: var(
+    --ix-dropdown-button-tertiary-color-active
+  );
+  --ix-dropdown-button-subtle-primary-color: var(
+    --ix-dropdown-button-subtle-primary-color-active
+  );
+  --ix-dropdown-button-subtle-secondary-color: var(
+    --ix-dropdown-button-subtle-secondary-color-active
+  );
+  --ix-dropdown-button-subtle-tertiary-color: var(
+    --ix-dropdown-button-subtle-tertiary-color-active
+  );
+  --ix-dropdown-button-danger-primary-color: var(
+    --ix-dropdown-button-danger-primary-color-active
+  );
+  --ix-dropdown-button-danger-secondary-color: var(
+    --ix-dropdown-button-danger-secondary-color-active
+  );
+  --ix-dropdown-button-danger-tertiary-color: var(
+    --ix-dropdown-button-danger-tertiary-color-active
+  );
 }
 
 :host([aria-expanded=true]:focus-visible) {

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

@@ -155,16 +155,19 @@ export class DropdownButton extends Mixin(...DefaultMixins, ComponentIdMixin, Ar
             this.hostContext?.datePicker ||
             this.hostContext?.splitButton ||
             this.hostContext?.tabs;
-        return (h(Host, { key: 'e25fa295fcfc662bcbd510ef9fa831d505901eb1', 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: '72aa176d5558297cbfd2bebd09a8f9826860e4e9', 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': true,
+                active: this.dropdownShow,
+            }, 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: 'bbb10a374801f0800f5386700957646072d01fb3', 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) => {
+                : iconChevronDownSmall, size: "24" }))))) : (h("div", null, h("ix-icon-button", { ...commonProperties, class: { active: this.dropdownShow }, 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: '4a3236943eb96d8c96c57457c3565dbf038da4a2', 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', {
@@ -173,7 +176,7 @@ export class DropdownButton extends Mixin(...DefaultMixins, ComponentIdMixin, Ar
                     detail: event.detail,
                 });
                 this.hostElement.dispatchEvent(scrollEvent);
-            } }, h("slot", { key: 'a41e74d2a2db2b1255485923390d4fbf14504504' }))));
+            } }, h("slot", { key: 'ad330d9330a8d6d56be634ef6270d7a42327d78e' }))));
     }
     static get is() { return "ix-dropdown-button"; }
     static get encapsulation() { return "shadow"; }