@siemens/ix 5.1.1 → 5.2.1

package/dist/collection/components/breadcrumb/breadcrumb.css

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

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -112,7 +112,7 @@ export class Breadcrumb extends Mixin(...DefaultMixins) {
         const labelLastItem = this.items?.[this.items.length - 1];
         this.inheritAriaAttributes['aria-label'] =
             this.inheritAriaAttributes['aria-label'] ?? 'Breadcrumbs';
-        return (h(Host, { key: 'c63417821c2568df84e4baac933ae48adebb9eaa', ...this.inheritAriaAttributes, role: "navigation" }, this.items?.length > this.visibleItemCount && (h("ix-dropdown-button", { key: '48cb02774fdb31022f0937c21e4bedf0b05d355c', "aria-label": this.ariaLabelPreviousButton, label: "...", variant: "tertiary", class: "previous-button", enableTopLayer: this.enableTopLayer }, h("ix-icon", { key: 'b71d928673dcd5e2499bc053df3778f0ef479f74', slot: "button-label", name: iconChevronRightSmall, size: "16", class: 'chevron' }), this.items
+        return (h(Host, { key: '37f2bfb26bb8702d913b0e08e1f9efd9a87302ea', ...this.inheritAriaAttributes, role: "navigation" }, this.items?.length > this.visibleItemCount && (h("ix-dropdown-button", { key: 'cf27730357a389142d8649e385e6421135a18fb7', "aria-label": this.ariaLabelPreviousButton, label: "...", variant: "tertiary", class: "previous-button", enableTopLayer: this.enableTopLayer }, h("ix-icon", { key: 'cf60a8e89ddda0271644cf1e7121f7859cebedc6', slot: "button-label", name: iconChevronRightSmall, size: "16", class: 'chevron' }), this.items
             .slice(0, this.items.length - this.visibleItemCount)
             .map((item) => {
             const label = item.label ?? item.innerText;
@@ -122,7 +122,7 @@ export class Breadcrumb extends Mixin(...DefaultMixins) {
                         label,
                     });
                 }, onItemClick: (event) => event.stopPropagation() }));
-        }))), h("div", { key: '28b88b7ea6fd07b602029e84d5ffb25fcc1a9c9d', class: "crumb-items" }, h("slot", { key: '377355ec37213169ce75c9a9114ed5111624890c' })), this.shouldRenderNextDropdown && (h("ix-dropdown-button", { key: '911d84229dce59da156efa9ea9878e86bd9849aa', label: labelLastItem.label ?? labelLastItem.innerText, class: "next-button", variant: "tertiary", enableTopLayer: this.enableTopLayer, "aria-current": "page" }, h("ix-icon", { key: '20982db434ac5647b57b29e9287ac9bcfa5ccf7b', slot: "button-label", name: iconChevronRightSmall, size: "16", class: 'chevron' }), this.nextItems?.map((item) => (h("ix-dropdown-item", { label: item.label, onClick: (e) => {
+        }))), h("div", { key: 'f54124b5a685d6e7cbba1bd2f83e4175ff28a9b2', class: "crumb-items" }, h("slot", { key: '293ff2dc40f01cf55af9ec10367f1daed671c212' })), this.shouldRenderNextDropdown && (h("ix-dropdown-button", { key: 'dfc9d903801442df97393e02e0e95b710b22e34f', label: labelLastItem.label ?? labelLastItem.innerText, class: "next-button", variant: "tertiary", enableTopLayer: this.enableTopLayer, "aria-current": "page" }, h("ix-icon", { key: 'feccea5c466a8239ea5d8be52c004b376adb257b', slot: "button-label", name: iconChevronRightSmall, size: "16", class: 'chevron' }), this.nextItems?.map((item) => (h("ix-dropdown-item", { label: item.label, onClick: (e) => {
                 this.nextClick.emit({
                     event: e,
                     item,

package/dist/collection/components/breadcrumb-item/breadcrumb-item.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: 2023 Siemens AG
 *
 * SPDX-License-Identifier: MIT
@@ -101,7 +109,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -110,37 +118,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host button,
@@ -212,7 +220,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -221,37 +229,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host button,
@@ -353,6 +361,12 @@
   color: var(--theme-btn-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-primary--border-color--active);
+  background-color: var(--theme-btn-primary--background--active);
+  color: var(--theme-btn-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -415,6 +429,12 @@
   color: var(--theme-btn-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-secondary--border-color--active);
+  background-color: var(--theme-btn-secondary--background--active);
+  color: var(--theme-btn-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -477,6 +497,12 @@
   color: var(--theme-btn-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-tertiary--border-color--active);
+  background-color: var(--theme-btn-tertiary--background--active);
+  color: var(--theme-btn-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -539,6 +565,12 @@
   color: var(--theme-btn-subtle-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-primary--border-color--active);
+  background-color: var(--theme-btn-subtle-primary--background--active);
+  color: var(--theme-btn-subtle-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -601,6 +633,12 @@
   color: var(--theme-btn-subtle-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-secondary--border-color--active);
+  background-color: var(--theme-btn-subtle-secondary--background--active);
+  color: var(--theme-btn-subtle-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -663,6 +701,12 @@
   color: var(--theme-btn-subtle-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-tertiary--border-color--active);
+  background-color: var(--theme-btn-subtle-tertiary--background--active);
+  color: var(--theme-btn-subtle-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -725,6 +769,12 @@
   color: var(--theme-btn-danger-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-primary--border-color--active);
+  background-color: var(--theme-btn-danger-primary--background--active);
+  color: var(--theme-btn-danger-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -787,6 +837,12 @@
   color: var(--theme-btn-danger-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-secondary--border-color--active);
+  background-color: var(--theme-btn-danger-secondary--background--active);
+  color: var(--theme-btn-danger-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -849,6 +905,12 @@
   color: var(--theme-btn-danger-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-tertiary--border-color--active);
+  background-color: var(--theme-btn-danger-tertiary--background--active);
+  color: var(--theme-btn-danger-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -885,7 +947,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -894,37 +956,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,
@@ -1026,6 +1088,12 @@
   color: var(--theme-btn-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-primary--border-color--active);
+  background-color: var(--theme-btn-primary--background--active);
+  color: var(--theme-btn-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -1088,6 +1156,12 @@
   color: var(--theme-btn-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-secondary--border-color--active);
+  background-color: var(--theme-btn-secondary--background--active);
+  color: var(--theme-btn-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -1150,6 +1224,12 @@
   color: var(--theme-btn-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-tertiary--border-color--active);
+  background-color: var(--theme-btn-tertiary--background--active);
+  color: var(--theme-btn-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -1212,6 +1292,12 @@
   color: var(--theme-btn-subtle-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-primary--border-color--active);
+  background-color: var(--theme-btn-subtle-primary--background--active);
+  color: var(--theme-btn-subtle-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -1274,6 +1360,12 @@
   color: var(--theme-btn-subtle-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-secondary--border-color--active);
+  background-color: var(--theme-btn-subtle-secondary--background--active);
+  color: var(--theme-btn-subtle-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -1336,6 +1428,12 @@
   color: var(--theme-btn-subtle-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-tertiary--border-color--active);
+  background-color: var(--theme-btn-subtle-tertiary--background--active);
+  color: var(--theme-btn-subtle-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -1398,6 +1496,12 @@
   color: var(--theme-btn-danger-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-primary--border-color--active);
+  background-color: var(--theme-btn-danger-primary--background--active);
+  color: var(--theme-btn-danger-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -1460,6 +1564,12 @@
   color: var(--theme-btn-danger-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-secondary--border-color--active);
+  background-color: var(--theme-btn-danger-secondary--background--active);
+  color: var(--theme-btn-danger-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -1522,6 +1632,12 @@
   color: var(--theme-btn-danger-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-tertiary--border-color--active);
+  background-color: var(--theme-btn-danger-tertiary--background--active);
+  color: var(--theme-btn-danger-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -1549,7 +1665,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -1558,37 +1674,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 li {