@siemens/ix 0.0.0-20240508065324 → 0.0.0-20240522073858

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

@@ -94,7 +94,7 @@ export class IconToggleButton {
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonVariant",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "resolved": "\"danger\" | \"primary\" | \"secondary\"",
                     "references": {
                         "ButtonVariant": {
                             "location": "import",

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

@@ -1 +1 @@
-{"version":3,"file":"icon-toggle-button.js","sourceRoot":"","sources":["../../../../src/components/icon-toggle-button/icon-toggle-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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-icon-toggle-button',\n  shadow: true,\n  styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\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   * Icon name\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange: EventEmitter<boolean>;\n\n  @Element() hostElement: HTMLIxIconToggleButtonElement;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\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 === '24',\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n      extraClasses: {\n        'icon-button': true,\n        ...this.getIconSizeClass(),\n      },\n    };\n    console.log(baseButtonProps, this.disabled, this.loading);\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-toggle-button.js","sourceRoot":"","sources":["../../../src/components/icon-toggle-button/icon-toggle-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C;;GAEG;AAMH,MAAM,OAAO,gBAAgB;;uBAKM,WAAW;uBAK1B,KAAK;qBAKP,KAAK;;uBAUH,KAAK;oBAKY,IAAI;wBAKH,KAAK;uBAKd,KAAK;;IASxB,2BAA2B;QACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IACpE,CAAC;IAEO,gBAAgB;QACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;IACJ,CAAC;IAGD,eAAe;QACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE,CAAC;YACvC,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAGD,aAAa;QACX,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAGD,eAAe;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC;IAEO,gBAAgB;QACtB,OAAO;YACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAClC,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,IAAI;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE;YAC3C,IAAI,EAAE,QAAQ;YACd,cAAc,EAAE;gBACd,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;aAC1C;YACD,YAAY,kBACV,aAAa,EAAE,IAAI,IAChB,IAAI,CAAC,gBAAgB,EAAE,CAC3B;SACF,CAAC;QACF,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAE1D,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,kCACA,IAAI,CAAC,gBAAgB,EAAE,KAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YAGzC,EAAC,cAAc,qEAAK,eAAe,EAAmB,CACjD,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  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-icon-toggle-button',\n  shadow: true,\n  styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\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   * Icon name\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange: EventEmitter<boolean>;\n\n  @Element() hostElement: HTMLIxIconToggleButtonElement;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\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 === '24',\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n      extraClasses: {\n        'icon-button': true,\n        ...this.getIconSizeClass(),\n      },\n    };\n    console.log(baseButtonProps, this.disabled, this.loading);\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/input-group/input-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","sourceRoot":"","sources":["../../../../src/components/input-group/input-group.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, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() hostElement!: HTMLIxInputGroupElement;\n\n  @State() disabled = false;\n\n  @State() inputPaddingLeft = 0;\n  @State() inputPaddingRight = 0;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input') as HTMLInputElement;\n  }\n\n  private observer: MutationObserver;\n\n  componentWillLoad() {\n    const { valid } = this.inputElement.validity;\n    this.inputElement.addEventListener('valid', () => {\n      this.onValidInput();\n    });\n    this.inputElement.addEventListener('invalid', () => {\n      this.onInvalidInput();\n    });\n    this.inputElement.addEventListener('input', () => {\n      this.startSlotChanged();\n    });\n\n    this.inputElement.form?.addEventListener('submit', () => {\n      this.startSlotChanged();\n    });\n\n    valid ? this.onValidInput() : this.onInvalidInput();\n\n    this.observer = new MutationObserver(() => {\n      this.slotChanged();\n      this.startSlotChanged();\n      this.endSlotChanged();\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      characterData: true,\n    });\n  }\n\n  componentDidRender() {\n    this.prepareInputElement();\n  }\n\n  private onValidInput() {\n    this.startSlotChanged();\n  }\n\n  private onInvalidInput() {\n    this.startSlotChanged();\n  }\n\n  private prepareInputElement() {\n    if (this.inputElement) {\n      this.inputElement.style.width = '100%';\n\n      if (this.inputPaddingRight !== 0) {\n        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n      } else {\n        this.inputElement.style.paddingRight = '0.5rem';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = '0.5rem';\n      }\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input tag, e.g. <input class=\"form-control\" />'\n      );\n    }\n  }\n\n  private slotChanged() {\n    this.disabled = this.inputElement?.disabled;\n  }\n\n  private startSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-start\"]'\n    );\n\n    setTimeout(() => {\n      const startPadding = this.getChildrenWidth(slot);\n\n      if (startPadding !== 0) {\n        this.inputPaddingLeft = 11 + startPadding;\n      } else {\n        this.inputPaddingLeft = 0;\n      }\n\n      if (!this.inputElement) {\n        return;\n      }\n\n      const isInputInvalid =\n        !this.inputElement.validity.valid ||\n        this.inputElement.classList.contains('is-invalid');\n\n      const formWasValidated =\n        this.inputElement.form?.classList.contains('was-validated') ||\n        this.inputElement.form?.noValidate === false;\n\n      if (formWasValidated && isInputInvalid) {\n        const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;\n        this.inputElement.style.backgroundPosition = `left ${left}px center`;\n        this.inputPaddingLeft += 26;\n      }\n    });\n  }\n\n  private endSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-end\"]'\n    );\n\n    setTimeout(() => {\n      this.inputPaddingRight = 15 + this.getChildrenWidth(slot);\n    });\n  }\n\n  private getChildrenWidth(slotElement: Element) {\n    if (!slotElement) {\n      return 0;\n    }\n\n    const endElements = getSlottedElements<HTMLElement>(slotElement);\n    if (endElements.length === 0) {\n      return 0;\n    }\n\n    let width = 0;\n\n    endElements.forEach((element) => {\n      width += element.getBoundingClientRect().width;\n    });\n\n    return width;\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }}>\n        <div class=\"group group-start\">\n          <slot name=\"input-start\"></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot name=\"input-end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"input-group.js","sourceRoot":"","sources":["../../../src/components/input-group/input-group.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, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() hostElement!: HTMLIxInputGroupElement;\n\n  @State() disabled = false;\n\n  @State() inputPaddingLeft = 0;\n  @State() inputPaddingRight = 0;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input') as HTMLInputElement;\n  }\n\n  private observer: MutationObserver;\n\n  componentWillLoad() {\n    const { valid } = this.inputElement.validity;\n    this.inputElement.addEventListener('valid', () => {\n      this.onValidInput();\n    });\n    this.inputElement.addEventListener('invalid', () => {\n      this.onInvalidInput();\n    });\n    this.inputElement.addEventListener('input', () => {\n      this.startSlotChanged();\n    });\n\n    this.inputElement.form?.addEventListener('submit', () => {\n      this.startSlotChanged();\n    });\n\n    valid ? this.onValidInput() : this.onInvalidInput();\n\n    this.observer = new MutationObserver(() => {\n      this.slotChanged();\n      this.startSlotChanged();\n      this.endSlotChanged();\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      characterData: true,\n    });\n  }\n\n  componentDidRender() {\n    this.prepareInputElement();\n  }\n\n  private onValidInput() {\n    this.startSlotChanged();\n  }\n\n  private onInvalidInput() {\n    this.startSlotChanged();\n  }\n\n  private prepareInputElement() {\n    if (this.inputElement) {\n      this.inputElement.style.width = '100%';\n\n      if (this.inputPaddingRight !== 0) {\n        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n      } else {\n        this.inputElement.style.paddingRight = '0.5rem';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = '0.5rem';\n      }\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input tag, e.g. <input class=\"form-control\" />'\n      );\n    }\n  }\n\n  private slotChanged() {\n    this.disabled = this.inputElement?.disabled;\n  }\n\n  private startSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-start\"]'\n    );\n\n    setTimeout(() => {\n      const startPadding = this.getChildrenWidth(slot);\n\n      if (startPadding !== 0) {\n        this.inputPaddingLeft = 11 + startPadding;\n      } else {\n        this.inputPaddingLeft = 0;\n      }\n\n      if (!this.inputElement) {\n        return;\n      }\n\n      const isInputInvalid =\n        !this.inputElement.validity.valid ||\n        this.inputElement.classList.contains('is-invalid');\n\n      const formWasValidated =\n        this.inputElement.form?.classList.contains('was-validated') ||\n        this.inputElement.form?.noValidate === false;\n\n      if (formWasValidated && isInputInvalid) {\n        const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;\n        this.inputElement.style.backgroundPosition = `left ${left}px center`;\n        this.inputPaddingLeft += 26;\n      }\n    });\n  }\n\n  private endSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-end\"]'\n    );\n\n    setTimeout(() => {\n      this.inputPaddingRight = 15 + this.getChildrenWidth(slot);\n    });\n  }\n\n  private getChildrenWidth(slotElement: Element) {\n    if (!slotElement) {\n      return 0;\n    }\n\n    const endElements = getSlottedElements<HTMLElement>(slotElement);\n    if (endElements.length === 0) {\n      return 0;\n    }\n\n    let width = 0;\n\n    endElements.forEach((element) => {\n      width += element.getBoundingClientRect().width;\n    });\n\n    return width;\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }}>\n        <div class=\"group group-start\">\n          <slot name=\"input-start\"></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot name=\"input-end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}