@siemens/ix 3.0.0 → 3.1.0

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

@@ -245,7 +245,7 @@
 :host .btn-danger.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-danger.selected:not(.disabled):not(:disabled):hover {
+:host .btn-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-danger.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -259,7 +259,7 @@
 :host .btn-danger:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-danger:not(.disabled):not(:disabled):hover, :host .btn-danger:not(.disabled):not(:disabled):hover {
+:host .btn-danger:not(.disabled):not(:disabled):hover, :host .btn-danger:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-danger--border-color--hover);
   background-color: var(--theme-btn-danger--background--hover);
   color: var(--theme-btn-danger--color--hover);
@@ -307,7 +307,7 @@
 :host .btn-outline-danger.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover {
+:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-danger.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -321,7 +321,7 @@
 :host .btn-outline-danger:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-danger:not(.disabled):not(:disabled):hover, :host .btn-outline-danger:not(.disabled):not(:disabled):hover {
+:host .btn-outline-danger:not(.disabled):not(:disabled):hover, :host .btn-outline-danger:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-outline-danger--border-color--hover);
   background-color: var(--theme-btn-outline-danger--background--hover);
   color: var(--theme-btn-outline-danger--color--hover);
@@ -367,7 +367,7 @@
 :host .btn-invisible-danger.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -381,7 +381,7 @@
 :host .btn-invisible-danger:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-danger:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-danger:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-btn-invisible-danger--background--hover);
   color: var(--theme-btn-invisible-danger--color--hover);
 }
@@ -426,7 +426,7 @@
 :host .btn-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -440,7 +440,7 @@
 :host .btn-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-primary:not(.disabled):not(:disabled):hover, :host .btn-primary:not(.disabled):not(:disabled):hover {
+:host .btn-primary:not(.disabled):not(:disabled):hover, :host .btn-primary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-primary--border-color--hover);
   background-color: var(--theme-btn-primary--background--hover);
   color: var(--theme-btn-primary--color--hover);
@@ -488,7 +488,7 @@
 :host .btn-outline-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -502,7 +502,7 @@
 :host .btn-outline-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-primary:not(.disabled):not(:disabled):hover, :host .btn-outline-primary:not(.disabled):not(:disabled):hover {
+:host .btn-outline-primary:not(.disabled):not(:disabled):hover, :host .btn-outline-primary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-outline-primary--border-color--hover);
   background-color: var(--theme-btn-outline-primary--background--hover);
   color: var(--theme-btn-outline-primary--color--hover);
@@ -548,7 +548,7 @@
 :host .btn-invisible-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -562,7 +562,7 @@
 :host .btn-invisible-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-primary:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-primary:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-btn-invisible-primary--background--hover);
   color: var(--theme-btn-invisible-primary--color--hover);
 }
@@ -607,7 +607,7 @@
 :host .btn-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -621,7 +621,7 @@
 :host .btn-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-secondary:not(.disabled):not(:disabled):hover, :host .btn-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-secondary:not(.disabled):not(:disabled):hover, :host .btn-secondary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-secondary--border-color--hover);
   background-color: var(--theme-btn-secondary--background--hover);
   color: var(--theme-btn-secondary--color--hover);
@@ -669,7 +669,7 @@
 :host .btn-outline-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -683,7 +683,7 @@
 :host .btn-outline-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-secondary:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-outline-secondary:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-outline-secondary--border-color--hover);
   background-color: var(--theme-btn-outline-secondary--background--hover);
   color: var(--theme-btn-outline-secondary--color--hover);
@@ -729,7 +729,7 @@
 :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -743,7 +743,7 @@
 :host .btn-invisible-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-btn-invisible-secondary--background--hover);
   color: var(--theme-btn-invisible-secondary--color--hover);
 }
@@ -881,7 +881,7 @@
 :host .btn-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -895,7 +895,7 @@
 :host .btn-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-primary:not(.disabled):not(:disabled):hover, :host .btn-primary:not(.disabled):not(:disabled):hover {
+:host .btn-primary:not(.disabled):not(:disabled):hover, :host .btn-primary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-primary--border-color--hover);
   background-color: var(--theme-btn-primary--background--hover);
   color: var(--theme-btn-primary--color--hover);
@@ -943,7 +943,7 @@
 :host .btn-outline-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -957,7 +957,7 @@
 :host .btn-outline-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-primary:not(.disabled):not(:disabled):hover, :host .btn-outline-primary:not(.disabled):not(:disabled):hover {
+:host .btn-outline-primary:not(.disabled):not(:disabled):hover, :host .btn-outline-primary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-outline-primary--border-color--hover);
   background-color: var(--theme-btn-outline-primary--background--hover);
   color: var(--theme-btn-outline-primary--color--hover);
@@ -1003,7 +1003,7 @@
 :host .btn-invisible-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -1017,7 +1017,7 @@
 :host .btn-invisible-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-primary:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-primary:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-btn-invisible-primary--background--hover);
   color: var(--theme-btn-invisible-primary--color--hover);
 }
@@ -1062,7 +1062,7 @@
 :host .btn-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -1076,7 +1076,7 @@
 :host .btn-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-secondary:not(.disabled):not(:disabled):hover, :host .btn-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-secondary:not(.disabled):not(:disabled):hover, :host .btn-secondary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-secondary--border-color--hover);
   background-color: var(--theme-btn-secondary--background--hover);
   color: var(--theme-btn-secondary--color--hover);
@@ -1124,7 +1124,7 @@
 :host .btn-outline-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -1138,7 +1138,7 @@
 :host .btn-outline-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-secondary:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-outline-secondary:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-outline-secondary--border-color--hover);
   background-color: var(--theme-btn-outline-secondary--background--hover);
   color: var(--theme-btn-outline-secondary--color--hover);
@@ -1184,7 +1184,7 @@
 :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -1198,7 +1198,7 @@
 :host .btn-invisible-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-btn-invisible-secondary--background--hover);
   color: var(--theme-btn-invisible-secondary--color--hover);
 }

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

@@ -87,7 +87,7 @@ export class BreadcrumbItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -106,7 +106,7 @@ export class BreadcrumbItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,

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

@@ -169,7 +169,7 @@
 :host .btn-danger.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-danger.selected:not(.disabled):not(:disabled):hover {
+:host .btn-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-danger.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -183,7 +183,7 @@
 :host .btn-danger:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-danger:not(.disabled):not(:disabled):hover, :host .btn-danger:not(.disabled):not(:disabled):hover {
+:host .btn-danger:not(.disabled):not(:disabled):hover, :host .btn-danger:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-danger--border-color--hover);
   background-color: var(--theme-btn-danger--background--hover);
   color: var(--theme-btn-danger--color--hover);
@@ -231,7 +231,7 @@
 :host .btn-outline-danger.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover {
+:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-danger.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -245,7 +245,7 @@
 :host .btn-outline-danger:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-danger:not(.disabled):not(:disabled):hover, :host .btn-outline-danger:not(.disabled):not(:disabled):hover {
+:host .btn-outline-danger:not(.disabled):not(:disabled):hover, :host .btn-outline-danger:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-outline-danger--border-color--hover);
   background-color: var(--theme-btn-outline-danger--background--hover);
   color: var(--theme-btn-outline-danger--color--hover);
@@ -291,7 +291,7 @@
 :host .btn-invisible-danger.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -305,7 +305,7 @@
 :host .btn-invisible-danger:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-danger:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-danger:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-btn-invisible-danger--background--hover);
   color: var(--theme-btn-invisible-danger--color--hover);
 }
@@ -350,7 +350,7 @@
 :host .btn-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -364,7 +364,7 @@
 :host .btn-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-primary:not(.disabled):not(:disabled):hover, :host .btn-primary:not(.disabled):not(:disabled):hover {
+:host .btn-primary:not(.disabled):not(:disabled):hover, :host .btn-primary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-primary--border-color--hover);
   background-color: var(--theme-btn-primary--background--hover);
   color: var(--theme-btn-primary--color--hover);
@@ -412,7 +412,7 @@
 :host .btn-outline-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -426,7 +426,7 @@
 :host .btn-outline-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-primary:not(.disabled):not(:disabled):hover, :host .btn-outline-primary:not(.disabled):not(:disabled):hover {
+:host .btn-outline-primary:not(.disabled):not(:disabled):hover, :host .btn-outline-primary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-outline-primary--border-color--hover);
   background-color: var(--theme-btn-outline-primary--background--hover);
   color: var(--theme-btn-outline-primary--color--hover);
@@ -472,7 +472,7 @@
 :host .btn-invisible-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -486,7 +486,7 @@
 :host .btn-invisible-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-primary:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-primary:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-btn-invisible-primary--background--hover);
   color: var(--theme-btn-invisible-primary--color--hover);
 }
@@ -531,7 +531,7 @@
 :host .btn-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -545,7 +545,7 @@
 :host .btn-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-secondary:not(.disabled):not(:disabled):hover, :host .btn-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-secondary:not(.disabled):not(:disabled):hover, :host .btn-secondary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-secondary--border-color--hover);
   background-color: var(--theme-btn-secondary--background--hover);
   color: var(--theme-btn-secondary--color--hover);
@@ -593,7 +593,7 @@
 :host .btn-outline-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -607,7 +607,7 @@
 :host .btn-outline-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-secondary:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-outline-secondary:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-outline-secondary--border-color--hover);
   background-color: var(--theme-btn-outline-secondary--background--hover);
   color: var(--theme-btn-outline-secondary--color--hover);
@@ -653,7 +653,7 @@
 :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -667,7 +667,7 @@
 :host .btn-invisible-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-btn-invisible-secondary--background--hover);
   color: var(--theme-btn-invisible-secondary--color--hover);
 }

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

@@ -6,7 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { BaseButton } from "./base-button";
 export class Button {
     constructor() {
@@ -46,13 +46,27 @@ export class Button {
         }
     }
     componentDidLoad() {
-        if (this.type === 'submit') {
-            const submitButton = document.createElement('button');
-            submitButton.style.display = 'none';
-            submitButton.type = 'submit';
-            submitButton.tabIndex = -1;
-            this.hostElement.appendChild(submitButton);
-            this.submitButtonElement = submitButton;
+        if (this.type !== 'submit') {
+            return;
+        }
+        const submitButton = document.createElement('button');
+        submitButton.style.display = 'none';
+        submitButton.type = 'submit';
+        submitButton.tabIndex = -1;
+        if (this.form) {
+            submitButton.setAttribute('form', this.form);
+        }
+        this.hostElement.appendChild(submitButton);
+        this.submitButtonElement = submitButton;
+    }
+    handleFormChange(newValue) {
+        if (this.submitButtonElement) {
+            if (newValue) {
+                this.submitButtonElement.setAttribute('form', newValue);
+            }
+            else {
+                this.submitButtonElement.removeAttribute('form');
+            }
         }
     }
     componentDidRender() {
@@ -90,9 +104,9 @@ export class Button {
             alignment: this.alignment,
             tabIndex: this.hostElement.tabIndex,
         };
-        return (h(Host, { key: 'af8b3a0b70b1fcd0ca6fad617e63d00207e57e7f', tabindex: this.disabled ? -1 : 0, class: {
+        return (h(Host, { key: 'de117e8374cf25073732e14ced0583a67a53b54b', tabindex: this.disabled ? -1 : 0, class: {
                 disabled: this.disabled || this.loading,
-            }, onFocus: () => this.setFocus() }, h(BaseButton, Object.assign({ key: '50b2bd12cc7afa6b017dfbe0f22dcfc299210c54' }, baseButtonProps), h("slot", { key: 'e0e3bf75b418b147df886d82a73a0635c198211e' }))));
+            }, onFocus: () => this.setFocus() }, h(BaseButton, Object.assign({ key: '39b6019cede041ff3ea36edebd70001ad7e7228c' }, baseButtonProps), h("slot", { key: '9c59689c0b54defe8a435854dfe4c993de1eb758' }))));
     }
     static get is() { return "ix-button"; }
     static get encapsulation() { return "shadow"; }
@@ -234,13 +248,35 @@ export class Button {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "form": {
+                "type": "string",
+                "attribute": "form",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "3.1.0"
+                        }],
+                    "text": "Provide a form element ID to automatically submit the from if the button is pressed. Only works in combination with type=\"submit\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "icon": {
                 "type": "string",
                 "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -302,6 +338,12 @@ export class Button {
         };
     }
     static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "form",
+                "methodName": "handleFormChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "click",

package/dist/collection/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Listen, Prop } from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from './base-button';\nimport { IxButtonComponent } from './button-component';\n\nexport type ButtonVariant = 'danger' | 'primary' | 'secondary';\n\n@Component({\n  tag: 'ix-button',\n  shadow: true,\n  styleUrl: './button.scss',\n})\nexport class Button implements IxButtonComponent {\n  /**\n   * Button variant\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /** @internal */\n  @Prop() alignment: 'center' | 'start' = 'center';\n\n  /** @internal */\n  @Prop() iconSize: '12' | '16' | '24' = '24';\n\n  @Element() hostElement!: HTMLIxButtonElement;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement?: HTMLButtonElement;\n\n  @Listen('click', { capture: true })\n  handleClick(event: Event) {\n    if (this.disabled || this.loading) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  componentDidLoad() {\n    if (this.type === 'submit') {\n      const submitButton = document.createElement('button');\n      submitButton.style.display = 'none';\n      submitButton.type = 'submit';\n      submitButton.tabIndex = -1;\n      this.hostElement.appendChild(submitButton);\n\n      this.submitButtonElement = submitButton;\n    }\n  }\n\n  componentDidRender() {\n    if (\n      this.submitButtonElement &&\n      !this.hostElement.contains(this.submitButtonElement)\n    ) {\n      this.hostElement.appendChild(this.submitButtonElement);\n    }\n  }\n\n  dispatchFormEvents() {\n    if (\n      this.type === 'submit' &&\n      this.submitButtonElement &&\n      !this.disabled &&\n      !this.loading\n    ) {\n      this.submitButtonElement.click();\n    }\n  }\n\n  setFocus() {\n    this.hostElement.shadowRoot!.querySelector('button')?.focus();\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.iconSize,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      alignment: this.alignment,\n      tabIndex: this.hostElement.tabIndex,\n    };\n\n    return (\n      <Host\n        tabindex={this.disabled ? -1 : 0}\n        class={{\n          disabled: this.disabled || this.loading,\n        }}\n        onFocus={() => this.setFocus()}\n      >\n        <BaseButton {...baseButtonProps}>\n          <slot></slot>\n        </BaseButton>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from './base-button';\nimport { IxButtonComponent } from './button-component';\n\nexport type ButtonVariant = 'danger' | 'primary' | 'secondary';\n\n@Component({\n  tag: 'ix-button',\n  shadow: true,\n  styleUrl: './button.scss',\n})\nexport class Button implements IxButtonComponent {\n  /**\n   * Button variant\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Provide a form element ID to automatically submit the from if the button is pressed. Only works in combination with type=\"submit\".\n   *\n   * @since 3.1.0\n   */\n  @Prop() form?: string;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /** @internal */\n  @Prop() alignment: 'center' | 'start' = 'center';\n\n  /** @internal */\n  @Prop() iconSize: '12' | '16' | '24' = '24';\n\n  @Element() hostElement!: HTMLIxButtonElement;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement?: HTMLButtonElement;\n\n  @Listen('click', { capture: true })\n  handleClick(event: Event) {\n    if (this.disabled || this.loading) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  componentDidLoad() {\n    if (this.type !== 'submit') {\n      return;\n    }\n    const submitButton = document.createElement('button');\n    submitButton.style.display = 'none';\n    submitButton.type = 'submit';\n    submitButton.tabIndex = -1;\n\n    if (this.form) {\n      submitButton.setAttribute('form', this.form);\n    }\n    this.hostElement.appendChild(submitButton);\n    this.submitButtonElement = submitButton;\n  }\n\n  @Watch('form')\n  handleFormChange(newValue: string | undefined) {\n    if (this.submitButtonElement) {\n      if (newValue) {\n        this.submitButtonElement.setAttribute('form', newValue);\n      } else {\n        this.submitButtonElement.removeAttribute('form');\n      }\n    }\n  }\n\n  componentDidRender() {\n    if (\n      this.submitButtonElement &&\n      !this.hostElement.contains(this.submitButtonElement)\n    ) {\n      this.hostElement.appendChild(this.submitButtonElement);\n    }\n  }\n\n  dispatchFormEvents() {\n    if (\n      this.type === 'submit' &&\n      this.submitButtonElement &&\n      !this.disabled &&\n      !this.loading\n    ) {\n      this.submitButtonElement.click();\n    }\n  }\n\n  setFocus() {\n    this.hostElement.shadowRoot!.querySelector('button')?.focus();\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.iconSize,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      alignment: this.alignment,\n      tabIndex: this.hostElement.tabIndex,\n    };\n\n    return (\n      <Host\n        tabindex={this.disabled ? -1 : 0}\n        class={{\n          disabled: this.disabled || this.loading,\n        }}\n        onFocus={() => this.setFocus()}\n      >\n        <BaseButton {...baseButtonProps}>\n          <slot></slot>\n        </BaseButton>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/button/test/button.ct.js

@@ -81,4 +81,73 @@ regressionTest('form can be submitted multiple times', async ({ mount, page }) =
     await expect(button).not.toHaveAttribute('disabled');
     await expect(button).not.toHaveClass(/loading/);
 });
+regressionTest('should not submit form when form attribute is not set', async ({ mount, page }) => {
+    await mount(`
+    <form id="test-form">
+      <input type="text" name="test-input">
+    </form>
+    <ix-button type="submit">Submit</ix-button>
+  `);
+    await page.evaluate(() => {
+        window.isFormSubmitted = false;
+        const form = document.getElementById('test-form');
+        if (!form) {
+            return;
+        }
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            window.isFormSubmitted = true;
+        });
+    });
+    const button = page.locator('ix-button');
+    await button.click();
+    const formSubmitted = await page.evaluate(() => window.isFormSubmitted);
+    expect(formSubmitted).toBe(false);
+});
+regressionTest('should not submit if form attribute is invalid', async ({ mount, page }) => {
+    await mount(`
+    <form id="test-form">
+      <input type="text" name="test-input">
+    </form>
+    <ix-button type="submit" form="invalid-form">Submit</ix-button>
+  `);
+    await page.evaluate(() => {
+        window.isFormSubmitted = false;
+        const form = document.getElementById('test-form');
+        if (!form) {
+            return;
+        }
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            window.isFormSubmitted = true;
+        });
+    });
+    const button = page.locator('ix-button');
+    await button.click();
+    const isFormSubmitted = await page.evaluate(() => window.isFormSubmitted);
+    expect(isFormSubmitted).toBe(false);
+});
+regressionTest('should submit form when form attribute is set', async ({ mount, page }) => {
+    await mount(`
+    <form id="test-form">
+      <input type="text" name="test-input">
+    </form>
+    <ix-button type="submit" form="test-form">Submit</ix-button>
+  `);
+    await page.evaluate(() => {
+        window.isFormSubmitted = false;
+        const form = document.getElementById('test-form');
+        if (!form) {
+            return;
+        }
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            window.isFormSubmitted = true;
+        });
+    });
+    const button = page.locator('ix-button');
+    await button.click();
+    const formSubmitted = await page.evaluate(() => window.isFormSubmitted);
+    expect(formSubmitted).toBe(true);
+});
 //# sourceMappingURL=button.ct.js.map