@siemens/ix 0.0.0-20240419081748 → 0.0.0-20240522073858

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

@@ -107,6 +107,7 @@
   background-color: var(--theme-group-item--background);
   border: 1px solid transparent;
   color: var(--theme-color-std-text);
+  cursor: pointer;
   padding-left: 2.5rem;
 }
 :host > button:focus-visible {
@@ -155,6 +156,10 @@
   white-space: nowrap;
 }
 
+:host(.suppress-selection) {
+  pointer-events: none;
+}
+
 :host(.selected) {
   border-top-width: 0.062rem !important;
   background-color: var(--theme-color-ghost--selected);
@@ -163,20 +168,20 @@
   background-color: var(--theme-group-item-indicator--background--selected);
 }
 
-:host(:not(.suppress-selection):hover) {
+:host(:hover) {
   background-color: var(--theme-color-ghost--selected-hover);
   border-color: var(--theme-group-item--border-color--hover);
 }
 
-:host(:not(.suppress-selection).selected:hover) {
+:host(.selected:hover) {
   background-color: var(--theme-color-ghost--selected-hover);
 }
 
-:host(:not(.suppress-selection):active) {
+:host(:active) {
   background-color: var(--theme-color-ghost--selected-active);
   border-color: var(--theme-group-item--border-color--active);
 }
 
-:host(:not(.suppress-selection).selected:active) {
+:host(.selected:active) {
   background-color: var(--theme-color-ghost--selected-active);
 }

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

@@ -24,10 +24,10 @@ export class GroupItem {
         this.selectedChanged.emit(this.hostElement);
     }
     render() {
-        return (h(Host, { key: '5d465a80365854b2dc13389fcee91f0e824cf9c6', class: {
+        return (h(Host, { key: 'ec30959a56062acbad4443b9ca91fb8c99125b03', class: {
                 selected: this.selected && !this.suppressSelection,
                 'suppress-selection': this.suppressSelection,
-            } }, h("button", { key: 'df47595b58a38860ec502bb9478b3626a47c9d9d', tabindex: this.focusable ? 0 : -1 }, h("div", { key: '97b2949849401b49e746676b077b9b9f134ba4a0', class: "group-entry-selection-indicator" }), this.icon ? h("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (h("span", { class: "group-entry-text" }, h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (h("span", { class: "group-entry-text-secondary" }, h("span", { title: this.secondaryText }, this.secondaryText))) : null, h("slot", { key: '4b81d50e99262b562ffc5b4745059ad83973c8bf' }))));
+            } }, h("button", { key: 'e29e098d709f657d5109ff840d54e84b7c645d28', tabindex: this.focusable ? 0 : -1 }, h("div", { key: 'd82048e82f3a9de77f1acb19f9500c475f400147', class: "group-entry-selection-indicator" }), this.icon ? h("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (h("span", { class: "group-entry-text" }, h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (h("span", { class: "group-entry-text-secondary" }, h("span", { title: this.secondaryText }, this.secondaryText))) : null, h("slot", { key: '1cde0aba243ca5f3537ce589be9e44d3ba9e2494' }))));
     }
     static get is() { return "ix-group-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/group-item/group-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"group-item.js","sourceRoot":"","sources":["../../../../src/components/group-item/group-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,SAAS;;;;;iCAqBQ,KAAK;;yBAWb,IAAI;;;IAaxB,WAAW;QACT,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB;gBAClD,oBAAoB,EAAE,IAAI,CAAC,iBAAiB;aAC7C;YAED,+DAAQ,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACvC,4DAAK,KAAK,EAAC,iCAAiC,GAAO;gBAClD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,eAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,CAAC,CAAC,CAAC,IAAI;gBACjE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,YAAM,KAAK,EAAC,kBAAkB;oBAC5B,YAAM,KAAK,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,IAAI,CAAQ,CACrC,CACR,CAAC,CAAC,CAAC,IAAI;gBACP,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,YAAM,KAAK,EAAC,4BAA4B;oBACtC,YAAM,KAAK,EAAE,IAAI,CAAC,aAAa,IAAG,IAAI,CAAC,aAAa,CAAQ,CACvD,CACR,CAAC,CAAC,CAAC,IAAI;gBACR,8DAAa,CACN,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-item',\n  styleUrl: 'group-item.scss',\n  shadow: true,\n})\nexport class GroupItem {\n  @Element() hostElement!: HTMLIxGroupItemElement;\n\n  /**\n   * Group item icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Group item text\n   */\n  @Prop() text: string;\n\n  /**\n   * Group item secondary text\n   */\n  @Prop() secondaryText: string;\n\n  /**\n   * Supress the selection of the group\n   */\n  @Prop() suppressSelection = false;\n\n  /**\n   * Show selected state\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * The elements tabindex attribute will get set accordingly.\n   * If true tabindex will be 0, -1 otherwise.\n   */\n  @Prop() focusable = true;\n\n  /**\n   * Selection changed\n   */\n  @Event() selectedChanged: EventEmitter<HTMLIxGroupItemElement>;\n\n  /**\n   * Index\n   */\n  @Prop() index: number;\n\n  @Listen('click', { passive: true })\n  clickListen() {\n    if (this.suppressSelection) {\n      return;\n    }\n    this.selectedChanged.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected && !this.suppressSelection,\n          'suppress-selection': this.suppressSelection,\n        }}\n      >\n        <button tabindex={this.focusable ? 0 : -1}>\n          <div class=\"group-entry-selection-indicator\"></div>\n          {this.icon ? <ix-icon size=\"16\" name={this.icon}></ix-icon> : null}\n          {this.text ? (\n            <span class=\"group-entry-text\">\n              <span title={this.text}>{this.text}</span>\n            </span>\n          ) : null}\n          {this.secondaryText ? (\n            <span class=\"group-entry-text-secondary\">\n              <span title={this.secondaryText}>{this.secondaryText}</span>\n            </span>\n          ) : null}\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"group-item.js","sourceRoot":"","sources":["../../../src/components/group-item/group-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,SAAS;;;;;iCAqBQ,KAAK;;yBAWb,IAAI;;;IAaxB,WAAW;QACT,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB;gBAClD,oBAAoB,EAAE,IAAI,CAAC,iBAAiB;aAC7C;YAED,+DAAQ,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACvC,4DAAK,KAAK,EAAC,iCAAiC,GAAO;gBAClD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,eAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,CAAC,CAAC,CAAC,IAAI;gBACjE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,YAAM,KAAK,EAAC,kBAAkB;oBAC5B,YAAM,KAAK,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,IAAI,CAAQ,CACrC,CACR,CAAC,CAAC,CAAC,IAAI;gBACP,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,YAAM,KAAK,EAAC,4BAA4B;oBACtC,YAAM,KAAK,EAAE,IAAI,CAAC,aAAa,IAAG,IAAI,CAAC,aAAa,CAAQ,CACvD,CACR,CAAC,CAAC,CAAC,IAAI;gBACR,8DAAa,CACN,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-item',\n  styleUrl: 'group-item.scss',\n  shadow: true,\n})\nexport class GroupItem {\n  @Element() hostElement!: HTMLIxGroupItemElement;\n\n  /**\n   * Group item icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Group item text\n   */\n  @Prop() text: string;\n\n  /**\n   * Group item secondary text\n   */\n  @Prop() secondaryText: string;\n\n  /**\n   * Supress the selection of the group\n   */\n  @Prop() suppressSelection = false;\n\n  /**\n   * Show selected state\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * The elements tabindex attribute will get set accordingly.\n   * If true tabindex will be 0, -1 otherwise.\n   */\n  @Prop() focusable = true;\n\n  /**\n   * Selection changed\n   */\n  @Event() selectedChanged: EventEmitter<HTMLIxGroupItemElement>;\n\n  /**\n   * Index\n   */\n  @Prop() index: number;\n\n  @Listen('click', { passive: true })\n  clickListen() {\n    if (this.suppressSelection) {\n      return;\n    }\n    this.selectedChanged.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected && !this.suppressSelection,\n          'suppress-selection': this.suppressSelection,\n        }}\n      >\n        <button tabindex={this.focusable ? 0 : -1}>\n          <div class=\"group-entry-selection-indicator\"></div>\n          {this.icon ? <ix-icon size=\"16\" name={this.icon}></ix-icon> : null}\n          {this.text ? (\n            <span class=\"group-entry-text\">\n              <span title={this.text}>{this.text}</span>\n            </span>\n          ) : null}\n          {this.secondaryText ? (\n            <span class=\"group-entry-text-secondary\">\n              <span title={this.secondaryText}>{this.secondaryText}</span>\n            </span>\n          ) : null}\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/icon-button/base-icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-icon-button.js","sourceRoot":"","sources":["../../../../src/components/icon-button/base-icon-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,UAAU,EAAmB,MAAM,uBAAuB,CAAC;AAEpE,MAAM,UAAU,cAAc,CAAC,KAAoC;IACjE,OAAO,EAAC,UAAU,oBAAK,KAAK,IAAE,IAAI,EAAC,QAAQ,IAAc,CAAC;AAC5D,CAAC","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 { h } from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\n\nexport function BaseIconButton(props: Omit<BaseButtonProps, 'type'>) {\n  return <BaseButton {...props} type=\"button\"></BaseButton>;\n}\n"]}
+{"version":3,"file":"base-icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/base-icon-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,UAAU,EAAmB,MAAM,uBAAuB,CAAC;AAEpE,MAAM,UAAU,cAAc,CAAC,KAAoC;IACjE,OAAO,EAAC,UAAU,oBAAK,KAAK,IAAE,IAAI,EAAC,QAAQ,IAAc,CAAC;AAC5D,CAAC","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 { h } from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\n\nexport function BaseIconButton(props: Omit<BaseButtonProps, 'type'>) {\n  return <BaseButton {...props} type=\"button\"></BaseButton>;\n}\n"]}

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

@@ -218,6 +218,187 @@
   display: none;
 }
 
+:host .btn-danger {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-danger, :host .btn-danger.focus, :host .btn-danger:focus-visible {
+  background-color: var(--theme-btn-danger--background);
+  color: var(--theme-btn-danger--color);
+  --ix-button-color: var(--theme-btn-danger--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-danger--border-color);
+  border-style: solid;
+}
+:host .btn-danger:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-danger.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+: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 {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-danger.selected:not(.disabled):not(:disabled):active, :host .btn-danger.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+: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 {
+  border-color: var(--theme-btn-danger--border-color--hover);
+  background-color: var(--theme-btn-danger--background--hover);
+  color: var(--theme-btn-danger--color--hover);
+}
+:host .btn-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-danger:not(.disabled):not(:disabled):active, :host .btn-danger:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-btn-danger--border-color--active);
+  background-color: var(--theme-btn-danger--background--active);
+  color: var(--theme-btn-danger--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-danger.disabled, :host(.disabled) .btn-danger:disabled {
+  pointer-events: none;
+  border-color: var(--theme-btn-danger--border-color--disabled);
+  background-color: var(--theme-btn-danger--background--disabled);
+  color: var(--theme-btn-danger--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-danger--color--disabled);
+}
+
+:host .btn-outline-danger {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-outline-danger, :host .btn-outline-danger.focus, :host .btn-outline-danger:focus-visible {
+  background-color: var(--theme-btn-outline-danger--background);
+  color: var(--theme-btn-outline-danger--color);
+  --ix-button-color: var(--theme-btn-outline-danger--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-outline-danger--border-color);
+  border-style: solid;
+}
+:host .btn-outline-danger:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-outline-danger.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+: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 {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-danger.selected:not(.disabled):not(:disabled):active, :host .btn-outline-danger.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+: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 {
+  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);
+}
+:host .btn-outline-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-danger:not(.disabled):not(:disabled):active, :host .btn-outline-danger:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-btn-outline-danger--border-color--active);
+  background-color: var(--theme-btn-outline-danger--background--active);
+  color: var(--theme-btn-outline-danger--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-outline-danger.disabled, :host(.disabled) .btn-outline-danger:disabled {
+  pointer-events: none;
+  border-color: var(--theme-btn-outline-danger--border-color--disabled);
+  background-color: var(--theme-btn-outline-danger--background--disabled);
+  color: var(--theme-btn-outline-danger--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-outline-danger--color--disabled);
+}
+
+:host .btn-invisible-danger {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-invisible-danger, :host .btn-invisible-danger.focus, :host .btn-invisible-danger:focus-visible {
+  background-color: var(--theme-btn-invisible-danger--background);
+  color: var(--theme-btn-invisible-danger--color);
+  --ix-button-color: var(--theme-btn-invisible-danger--color);
+  border-color: transparent;
+}
+:host .btn-invisible-danger:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-invisible-danger.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+: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 {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-invisible-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):active, :host .btn-invisible-danger.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+: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 {
+  background-color: var(--theme-btn-invisible-danger--background--hover);
+  color: var(--theme-btn-invisible-danger--color--hover);
+}
+:host .btn-invisible-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-danger:not(.disabled):not(:disabled):active, :host .btn-invisible-danger:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-btn-invisible-danger--background--active);
+  color: var(--theme-btn-invisible-danger--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-invisible-danger.disabled, :host(.disabled) .btn-invisible-danger:disabled {
+  pointer-events: none;
+  background-color: var(--theme-btn-invisible-danger--background--disabled);
+  color: var(--theme-btn-invisible-danger--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-invisible-danger--color--disabled);
+}
+
 :host .btn-primary {
   border-radius: var(--theme-btn--border-radius);
 }

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

@@ -69,7 +69,7 @@ export class IconButton {
             type: this.type,
             extraClasses: this.getIconSizeClass(),
         };
-        return (h(Host, { key: '5916b0e04b1bfbc9e5487aa1ac0d75e006478d8b', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '7c52d9ac4f663ca2af20027d6ab6715ebd16b355' }, baseButtonProps))));
+        return (h(Host, { key: '0de06c10c66ae48a19a61794482353383007175d', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '151dac878b35e83b8cca149e8b68c28f1198d5db' }, baseButtonProps))));
     }
     static get is() { return "ix-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -110,7 +110,7 @@ export class IconButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconButtonVariant",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "resolved": "\"danger\" | \"primary\" | \"secondary\"",
                     "references": {
                         "IconButtonVariant": {
                             "location": "local",
@@ -122,7 +122,10 @@ export class IconButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.3.0 - variant danger"
+                        }],
                     "text": "Variant of button"
                 },
                 "attribute": "variant",

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../../src/components/icon-button/icon-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, Prop } from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { getFallbackLabelFromIconName } from '../utils/a11y';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton {\n  @Element() hostElement: HTMLIxIconButtonElement;\n\n  /**\n   * Accessibility label for the icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 2.1.0\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel: string;\n\n  /**\n   * Variant of button\n   */\n  @Prop() variant: IconButtonVariant = 'secondary';\n\n  /**\n   * Button outline\n   */\n  @Prop() outline: boolean;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost: boolean;\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon: string;\n\n  /**\n   * Size of icon in button\n   *\n   * @deprecated Only size 32 will be removed in 3.0.0\n   */\n  @Prop() size: '32' | '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   *\n   * @deprecated since 2.1.0 use `icon-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string;\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   *\n   * @since 2.0.0\n   */\n  @Prop() loading = false;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement: HTMLButtonElement;\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  dispatchFormEvents() {\n    if (this.type === 'submit' && this.submitButtonElement) {\n      this.submitButtonElement.click();\n    }\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '32' || this.size === '24' || !this.size,\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      ariaAttributes: {\n        'aria-label': this.a11yLabel\n          ? this.a11yLabel\n          : getFallbackLabelFromIconName(this.icon),\n      },\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: this.oval,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconColor: this.iconColor ?? this.color,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      extraClasses: this.getIconSizeClass(),\n    };\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-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, Prop } from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { getFallbackLabelFromIconName } from '../utils/a11y';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton {\n  @Element() hostElement: HTMLIxIconButtonElement;\n\n  /**\n   * Accessibility label for the icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 2.1.0\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel: string;\n\n  /**\n   * Variant of button\n   * @since 2.3.0 - variant danger\n   */\n  @Prop() variant: IconButtonVariant = 'secondary';\n\n  /**\n   * Button outline\n   */\n  @Prop() outline: boolean;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost: boolean;\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon: string;\n\n  /**\n   * Size of icon in button\n   *\n   * @deprecated Only size 32 will be removed in 3.0.0\n   */\n  @Prop() size: '32' | '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   *\n   * @deprecated since 2.1.0 use `icon-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string;\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   *\n   * @since 2.0.0\n   */\n  @Prop() loading = false;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement: HTMLButtonElement;\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  dispatchFormEvents() {\n    if (this.type === 'submit' && this.submitButtonElement) {\n      this.submitButtonElement.click();\n    }\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '32' || this.size === '24' || !this.size,\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      ariaAttributes: {\n        'aria-label': this.a11yLabel\n          ? this.a11yLabel\n          : getFallbackLabelFromIconName(this.icon),\n      },\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: this.oval,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconColor: this.iconColor ?? this.color,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      extraClasses: this.getIconSizeClass(),\n    };\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/icon-button/test/icon-button.ct.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.ct.js","sourceRoot":"","sources":["../../../../../src/components/icon-button/test/icon-button.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACxC,MAAM,KAAK,CAAC,wDAAwD,CAAC,CAAC;IAEtE,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC9C,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC7C,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAEpD,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AACxD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,4BAA4B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC3D,MAAM,KAAK,CAAC,iDAAiD,CAAC,CAAC;IAC/D,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAE9C,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;IAC7D,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAwB,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1E,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAC3D,CAAC,CAAC,CAAC","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 */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`<ix-icon-button icon=\"rocket\">Content</ix-icon-button>`);\n\n  const button = page.locator('ix-icon-button');\n  await expect(button).toHaveClass(/hydrated/);\n  expect(button.allInnerTexts).not.toEqual('Content');\n\n  await expect(button.locator('ix-icon')).toBeVisible();\n});\n\ntest('show spinner while loading', async ({ mount, page }) => {\n  await mount(`<ix-icon-button icon=\"rocket\"></ix-icon-button>`);\n  const button = page.locator('ix-icon-button');\n\n  await expect(button.locator('ix-spinner')).not.toBeVisible();\n  await button.evaluate((btn: HTMLIxButtonElement) => (btn.loading = true));\n  await expect(button.locator('ix-spinner')).toBeVisible();\n});\n"]}
+{"version":3,"file":"icon-button.ct.js","sourceRoot":"","sources":["../../../../src/components/icon-button/test/icon-button.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACxC,MAAM,KAAK,CAAC,wDAAwD,CAAC,CAAC;IAEtE,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC9C,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC7C,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAEpD,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AACxD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,4BAA4B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC3D,MAAM,KAAK,CAAC,iDAAiD,CAAC,CAAC;IAC/D,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAE9C,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;IAC7D,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAwB,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1E,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAC3D,CAAC,CAAC,CAAC","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 */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`<ix-icon-button icon=\"rocket\">Content</ix-icon-button>`);\n\n  const button = page.locator('ix-icon-button');\n  await expect(button).toHaveClass(/hydrated/);\n  expect(button.allInnerTexts).not.toEqual('Content');\n\n  await expect(button.locator('ix-icon')).toBeVisible();\n});\n\ntest('show spinner while loading', async ({ mount, page }) => {\n  await mount(`<ix-icon-button icon=\"rocket\"></ix-icon-button>`);\n  const button = page.locator('ix-icon-button');\n\n  await expect(button.locator('ix-spinner')).not.toBeVisible();\n  await button.evaluate((btn: HTMLIxButtonElement) => (btn.loading = true));\n  await expect(button.locator('ix-spinner')).toBeVisible();\n});\n"]}

package/dist/collection/components/icon-button/test/icon-button.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.spec.js","sourceRoot":"","sources":["../../../../../src/components/icon-button/test/icon-button.spec.ts"],"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 */\nimport { newSpecPage } from '@stencil/core/testing';\nimport { IconButton } from '../icon-button';\n\ndescribe('icon-button', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [IconButton],\n      html: `<ix-icon-button icon=\"rocket\" disabled></ix-icon-button>`,\n    });\n\n    await page.waitForChanges();\n    const btn = page.doc.querySelector('ix-icon-button');\n    expect(btn.className).toContain('disabled');\n  });\n\n  it('should submit form if type is submit', async () => {\n    const page = await newSpecPage({\n      components: [IconButton],\n      html: `\n      <form>\n        <input type=\"text\" />\n        <ix-icon-button type=\"submit\">Submit</ix-icon-button>s\n      </form>\n      `,\n    });\n\n    await page.waitForChanges();\n\n    const btn = page.doc\n      .querySelector('ix-icon-button[type=\"submit\"]')\n      .shadowRoot.querySelector('button');\n    const shadowButton = page.doc.querySelector(\n      'ix-icon-button[type=\"submit\"] > button'\n    ) as HTMLButtonElement;\n\n    const onClick = jest.fn();\n\n    shadowButton.addEventListener('click', onClick);\n\n    expect(btn).toBeDefined();\n    expect(shadowButton).toBeDefined();\n    expect(shadowButton.style.display).toStrictEqual('none');\n    expect(shadowButton.type).toStrictEqual('submit');\n    expect(shadowButton.tabIndex).toStrictEqual(-1);\n\n    btn.click();\n    expect(onClick).toHaveBeenCalled();\n  });\n\n  it('should not render submit button if normal button is requirers', async () => {\n    const page = await newSpecPage({\n      components: [IconButton],\n      html: `\n      <form>\n        <input type=\"text\" />\n        <ix-icon-button>Submit</ix-icon-button>s\n      </form>\n      `,\n    });\n\n    await page.waitForChanges();\n\n    const btn = page.doc\n      .querySelector('ix-icon-button')\n      .shadowRoot.querySelector('button');\n    const shadowButton = page.doc.querySelector(\n      'ix-icon-button > button'\n    ) as HTMLButtonElement;\n\n    expect(btn).toBeDefined();\n    expect(shadowButton).toBeNull();\n  });\n\n  describe('a11y', () => {\n    it('should have a fallback icon aria name', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"rocket\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Rocket');\n    });\n\n    it('should have a fallback icon aria name without fill postfix', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"about-filled\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('About');\n    });\n\n    it('should have a fallback icon aria name', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"about-battery-filled\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('About Battery');\n    });\n\n    it('should have a fallback icon aria name without numbers inside name', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"battery100-percentage\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Battery Percentage');\n    });\n\n    it('should have a fallback icon aria name without numbers between', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"battery-100-percentage\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Battery 100 Percentage');\n    });\n\n    it('should have a fallback icon with multiple dashes', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"text-circle-rectangle-filled\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Text Circle Rectangle');\n    });\n\n    it('should have an aria label', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button a11y-label=\"some label\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('some label');\n    });\n\n    it('should have an unknown aria label with an URL', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"https://someurl.com/test.svg\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Unknown');\n    });\n\n    it('should have an unknown aria label with an base64 encoded SVG', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"data:image/svg+xml\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Unknown');\n    });\n  });\n});\n"]}
+{"version":3,"file":"icon-button.spec.js","sourceRoot":"","sources":["../../../../src/components/icon-button/test/icon-button.spec.ts"],"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 */\nimport { newSpecPage } from '@stencil/core/testing';\nimport { IconButton } from '../icon-button';\n\ndescribe('icon-button', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [IconButton],\n      html: `<ix-icon-button icon=\"rocket\" disabled></ix-icon-button>`,\n    });\n\n    await page.waitForChanges();\n    const btn = page.doc.querySelector('ix-icon-button');\n    expect(btn.className).toContain('disabled');\n  });\n\n  it('should submit form if type is submit', async () => {\n    const page = await newSpecPage({\n      components: [IconButton],\n      html: `\n      <form>\n        <input type=\"text\" />\n        <ix-icon-button type=\"submit\">Submit</ix-icon-button>s\n      </form>\n      `,\n    });\n\n    await page.waitForChanges();\n\n    const btn = page.doc\n      .querySelector('ix-icon-button[type=\"submit\"]')\n      .shadowRoot.querySelector('button');\n    const shadowButton = page.doc.querySelector(\n      'ix-icon-button[type=\"submit\"] > button'\n    ) as HTMLButtonElement;\n\n    const onClick = jest.fn();\n\n    shadowButton.addEventListener('click', onClick);\n\n    expect(btn).toBeDefined();\n    expect(shadowButton).toBeDefined();\n    expect(shadowButton.style.display).toStrictEqual('none');\n    expect(shadowButton.type).toStrictEqual('submit');\n    expect(shadowButton.tabIndex).toStrictEqual(-1);\n\n    btn.click();\n    expect(onClick).toHaveBeenCalled();\n  });\n\n  it('should not render submit button if normal button is requirers', async () => {\n    const page = await newSpecPage({\n      components: [IconButton],\n      html: `\n      <form>\n        <input type=\"text\" />\n        <ix-icon-button>Submit</ix-icon-button>s\n      </form>\n      `,\n    });\n\n    await page.waitForChanges();\n\n    const btn = page.doc\n      .querySelector('ix-icon-button')\n      .shadowRoot.querySelector('button');\n    const shadowButton = page.doc.querySelector(\n      'ix-icon-button > button'\n    ) as HTMLButtonElement;\n\n    expect(btn).toBeDefined();\n    expect(shadowButton).toBeNull();\n  });\n\n  describe('a11y', () => {\n    it('should have a fallback icon aria name', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"rocket\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Rocket');\n    });\n\n    it('should have a fallback icon aria name without fill postfix', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"about-filled\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('About');\n    });\n\n    it('should have a fallback icon aria name', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"about-battery-filled\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('About Battery');\n    });\n\n    it('should have a fallback icon aria name without numbers inside name', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"battery100-percentage\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Battery Percentage');\n    });\n\n    it('should have a fallback icon aria name without numbers between', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"battery-100-percentage\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Battery 100 Percentage');\n    });\n\n    it('should have a fallback icon with multiple dashes', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"text-circle-rectangle-filled\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Text Circle Rectangle');\n    });\n\n    it('should have an aria label', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button a11y-label=\"some label\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('some label');\n    });\n\n    it('should have an unknown aria label with an URL', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"https://someurl.com/test.svg\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Unknown');\n    });\n\n    it('should have an unknown aria label with an base64 encoded SVG', async () => {\n      const page = await newSpecPage({\n        components: [IconButton],\n        html: `<ix-icon-button icon=\"data:image/svg+xml\"></ix-icon-button>`,\n      });\n\n      await page.waitForChanges();\n\n      const button = page.doc\n        .querySelector('ix-icon-button')\n        .shadowRoot.querySelector('button');\n\n      expect(button).toHaveAttribute('aria-label');\n      expect(button.getAttribute('aria-label')).toBe('Unknown');\n    });\n  });\n});\n"]}

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

@@ -218,6 +218,187 @@
   display: none;
 }
 
+:host .btn-danger {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-danger, :host .btn-danger.focus, :host .btn-danger:focus-visible {
+  background-color: var(--theme-btn-danger--background);
+  color: var(--theme-btn-danger--color);
+  --ix-button-color: var(--theme-btn-danger--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-danger--border-color);
+  border-style: solid;
+}
+:host .btn-danger:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-danger.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+: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 {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-danger.selected:not(.disabled):not(:disabled):active, :host .btn-danger.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+: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 {
+  border-color: var(--theme-btn-danger--border-color--hover);
+  background-color: var(--theme-btn-danger--background--hover);
+  color: var(--theme-btn-danger--color--hover);
+}
+:host .btn-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-danger:not(.disabled):not(:disabled):active, :host .btn-danger:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-btn-danger--border-color--active);
+  background-color: var(--theme-btn-danger--background--active);
+  color: var(--theme-btn-danger--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-danger.disabled, :host(.disabled) .btn-danger:disabled {
+  pointer-events: none;
+  border-color: var(--theme-btn-danger--border-color--disabled);
+  background-color: var(--theme-btn-danger--background--disabled);
+  color: var(--theme-btn-danger--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-danger--color--disabled);
+}
+
+:host .btn-outline-danger {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-outline-danger, :host .btn-outline-danger.focus, :host .btn-outline-danger:focus-visible {
+  background-color: var(--theme-btn-outline-danger--background);
+  color: var(--theme-btn-outline-danger--color);
+  --ix-button-color: var(--theme-btn-outline-danger--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-outline-danger--border-color);
+  border-style: solid;
+}
+:host .btn-outline-danger:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-outline-danger.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+: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 {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-danger.selected:not(.disabled):not(:disabled):active, :host .btn-outline-danger.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+: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 {
+  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);
+}
+:host .btn-outline-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-danger:not(.disabled):not(:disabled):active, :host .btn-outline-danger:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-btn-outline-danger--border-color--active);
+  background-color: var(--theme-btn-outline-danger--background--active);
+  color: var(--theme-btn-outline-danger--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-outline-danger.disabled, :host(.disabled) .btn-outline-danger:disabled {
+  pointer-events: none;
+  border-color: var(--theme-btn-outline-danger--border-color--disabled);
+  background-color: var(--theme-btn-outline-danger--background--disabled);
+  color: var(--theme-btn-outline-danger--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-outline-danger--color--disabled);
+}
+
+:host .btn-invisible-danger {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-invisible-danger, :host .btn-invisible-danger.focus, :host .btn-invisible-danger:focus-visible {
+  background-color: var(--theme-btn-invisible-danger--background);
+  color: var(--theme-btn-invisible-danger--color);
+  --ix-button-color: var(--theme-btn-invisible-danger--color);
+  border-color: transparent;
+}
+:host .btn-invisible-danger:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-invisible-danger.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+: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 {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-invisible-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):active, :host .btn-invisible-danger.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+: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 {
+  background-color: var(--theme-btn-invisible-danger--background--hover);
+  color: var(--theme-btn-invisible-danger--color--hover);
+}
+:host .btn-invisible-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-danger:not(.disabled):not(:disabled):active, :host .btn-invisible-danger:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-btn-invisible-danger--background--active);
+  color: var(--theme-btn-invisible-danger--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-invisible-danger.disabled, :host(.disabled) .btn-invisible-danger:disabled {
+  pointer-events: none;
+  background-color: var(--theme-btn-invisible-danger--background--disabled);
+  color: var(--theme-btn-invisible-danger--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-invisible-danger--color--disabled);
+}
+
 :host .btn-primary {
   border-radius: var(--theme-btn--border-radius);
 }

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

@@ -73,7 +73,7 @@ export class IconToggleButton {
             extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
         };
         console.log(baseButtonProps, this.disabled, this.loading);
-        return (h(Host, { key: 'd36e5f7e9bad1ea53f65d5b2b805f69e4e76e4b0', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '1e19be2923cec5d80bb27cc96ef50caf267bcd70' }, baseButtonProps))));
+        return (h(Host, { key: '90281a49cd680bd8cf611726bf0c6370452432d1', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '12a0e3c4c9654c522dbf65bb43744143b842c44c' }, baseButtonProps))));
     }
     static get is() { return "ix-icon-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -94,7 +94,7 @@ export class IconToggleButton {
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonVariant",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "resolved": "\"danger\" | \"primary\" | \"secondary\"",
                     "references": {
                         "ButtonVariant": {
                             "location": "import",