@siemens/ix 1.5.0 → 1.6.1

package/dist/components/button.js

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { g as getButtonClasses } from './base-button.js';
 
-const buttonCss = ".sc-ix-button-h{display:inline-block;width:auto;height:2rem}.disabled.sc-ix-button-h{pointer-events:none}.sc-ix-button-h .btn.sc-ix-button{width:100%;height:100%}";
+const buttonCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:150ms;padding:0 0.5rem;min-width:5rem;gap:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .glyph{margin-right:0.25rem;font-weight:400}.btn:focus-visible,.btn.focus{box-shadow:none}.btn-primary{border-radius:var(--theme-btn--border-radius)}.btn-primary,.btn-primary.focus,.btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}.btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-primary.selected{background-color:var(--theme-btn-primary--background--selected)}.btn-primary.hover,.btn-primary:hover{border-color:var(--theme-btn-primary--border-color--hover) !important;background-color:var(--theme-btn-primary--background--hover) !important;color:var(--theme-btn-primary--color--hover) !important}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-btn-primary--background--selected-hover);color:var(--theme-btn-primary--color--selected-hover)}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{border-color:var(--theme-btn-primary--border-color--active) !important;background-color:var(--theme-btn-primary--background--active) !important;color:var(--theme-btn-primary--color--active) !important}.btn-primary.selected:not(:disabled):not(.disabled):active,.btn-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-primary.selected.dropdown-toggle{background-color:var(--theme-btn-primary--background--selected-active);color:var(--theme-btn-primary--color--selected-active)}.btn-primary.disabled,.btn-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1}.btn-outline-primary{border-radius:var(--theme-btn--border-radius)}.btn-outline-primary,.btn-outline-primary.focus,.btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}.btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-primary.selected{background-color:var(--theme-btn-outline-primary--background--selected)}.btn-outline-primary.hover,.btn-outline-primary:hover{border-color:var(--theme-btn-outline-primary--border-color--hover) !important;background-color:var(--theme-btn-outline-primary--background--hover) !important;color:var(--theme-btn-outline-primary--color--hover) !important}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-btn-outline-primary--background--selected-hover);color:var(--theme-btn-outline-primary--color--selected-hover)}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{border-color:var(--theme-btn-outline-primary--border-color--active) !important;background-color:var(--theme-btn-outline-primary--background--active) !important;color:var(--theme-btn-outline-primary--color--active) !important}.btn-outline-primary.selected:not(:disabled):not(.disabled):active,.btn-outline-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.selected.dropdown-toggle{background-color:var(--theme-btn-outline-primary--background--selected-active);color:var(--theme-btn-outline-primary--color--selected-active)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1}.btn-invisible-primary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-primary,.btn-invisible-primary.focus,.btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);border-color:transparent}.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-primary.selected{background-color:var(--theme-btn-invisible-primary--background--selected)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover) !important;color:var(--theme-btn-invisible-primary--color--hover) !important}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-btn-invisible-primary--background--selected-hover);color:var(--theme-btn-invisible-primary--color--selected-hover)}.btn-invisible-primary:not(:disabled):not(.disabled):active,.btn-invisible-primary:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--active) !important;color:var(--theme-btn-invisible-primary--color--active) !important}.btn-invisible-primary.selected:not(:disabled):not(.disabled):active,.btn-invisible-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.selected.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--selected-active);color:var(--theme-btn-invisible-primary--color--selected-active)}.btn-invisible-primary.disabled,.btn-invisible-primary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1}.btn-secondary{border-radius:var(--theme-btn--border-radius)}.btn-secondary,.btn-secondary.focus,.btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}.btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-secondary.selected{background-color:var(--theme-btn-secondary--background--selected)}.btn-secondary.hover,.btn-secondary:hover{border-color:var(--theme-btn-secondary--border-color--hover) !important;background-color:var(--theme-btn-secondary--background--hover) !important;color:var(--theme-btn-secondary--color--hover) !important}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-btn-secondary--background--selected-hover);color:var(--theme-btn-secondary--color--selected-hover)}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{border-color:var(--theme-btn-secondary--border-color--active) !important;background-color:var(--theme-btn-secondary--background--active) !important;color:var(--theme-btn-secondary--color--active) !important}.btn-secondary.selected:not(:disabled):not(.disabled):active,.btn-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-secondary--background--selected-active);color:var(--theme-btn-secondary--color--selected-active)}.btn-secondary.disabled,.btn-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1}.btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}.btn-outline-secondary,.btn-outline-secondary.focus,.btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-secondary.selected{background-color:var(--theme-btn-outline-secondary--background--selected)}.btn-outline-secondary.hover,.btn-outline-secondary:hover{border-color:var(--theme-btn-outline-secondary--border-color--hover) !important;background-color:var(--theme-btn-outline-secondary--background--hover) !important;color:var(--theme-btn-outline-secondary--color--hover) !important}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-btn-outline-secondary--background--selected-hover);color:var(--theme-btn-outline-secondary--color--selected-hover)}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{border-color:var(--theme-btn-outline-secondary--border-color--active) !important;background-color:var(--theme-btn-outline-secondary--background--active) !important;color:var(--theme-btn-outline-secondary--color--active) !important}.btn-outline-secondary.selected:not(:disabled):not(.disabled):active,.btn-outline-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-outline-secondary--background--selected-active);color:var(--theme-btn-outline-secondary--color--selected-active)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1}.btn-invisible-secondary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-secondary,.btn-invisible-secondary.focus,.btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);border-color:transparent}.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-secondary.selected{background-color:var(--theme-btn-invisible-secondary--background--selected)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover) !important;color:var(--theme-btn-invisible-secondary--color--hover) !important}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-btn-invisible-secondary--background--selected-hover);color:var(--theme-btn-invisible-secondary--color--selected-hover)}.btn-invisible-secondary:not(:disabled):not(.disabled):active,.btn-invisible-secondary:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--active) !important;color:var(--theme-btn-invisible-secondary--color--active) !important}.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active,.btn-invisible-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--selected-active);color:var(--theme-btn-invisible-secondary--color--selected-active)}.btn-invisible-secondary.disabled,.btn-invisible-secondary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1}.btn-oval,.btn-icon{min-width:2rem;width:2rem}.btn-oval .glyph,.btn-icon .glyph{margin-right:0}.btn-oval{border-radius:6.25rem;width:2rem}.btn-icon-xs,.btn-icon-12{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.btn-icon-s,.btn-icon-16{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.btn-icon-32{height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host{display:inline-block;width:auto;height:2rem;vertical-align:middle}:host.disabled{pointer-events:none}:host .btn{width:100%;height:100%}:host button:not(:disabled){cursor:pointer}";
 
 const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.variant = 'Primary';
     this.outline = false;
     this.invisible = false;
@@ -21,7 +22,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
       } }, h("button", { type: this.type, class: getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, false, false, this.selected, this.disabled) }, h("slot", null))));
   }
   static get style() { return buttonCss; }
-}, [6, "ix-button", {
+}, [1, "ix-button", {
     "variant": [1],
     "outline": [4],
     "invisible": [4],

package/dist/components/button.js.map

@@ -1 +1 @@
-{"file":"button.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,oKAAoK;;MCmBzK,MAAM;;;;mBAIgB,SAAS;mBAKxB,KAAK;qBAOH,KAAK;iBAKT,KAAK;oBAKF,KAAK;oBAKY,KAAK;gBAKL,QAAQ;;EAE5C,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,cACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,gBAAgB,CACrB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAC5B,KAAK,EACL,KAAK,EACL,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,QAAQ,CACd,IAED,eAAa,CACN,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/button/button.scss?tag=ix-button&encapsulation=scoped","./src/components/button/button.tsx"],"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\n:host {\n  display: inline-block;\n  width: auto;\n  height: 2rem;\n\n  &.disabled {\n    pointer-events: none;\n  }\n\n  .btn {\n    width: 100%;\n    height: 100%;\n  }\n}\n","/*\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, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from './base-button';\n\nexport type ButtonVariant = 'Primary' | 'Secondary';\n\n@Component({\n  tag: 'ix-button',\n  scoped: true,\n  styleUrl: './button.scss',\n})\nexport class Button {\n  /**\n   * Button varaint\n   */\n  @Prop() variant: ButtonVariant = 'Primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Invisible button\n   *\n   * @deprecated use ghost property\n   */\n  @Prop() invisible = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Show button as selected. Should be used with outline or ghost\n   */\n  @Prop() selected = false;\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <button\n          type={this.type}\n          class={getButtonClasses(\n            this.variant,\n            this.outline,\n            this.ghost || this.invisible,\n            false,\n            false,\n            this.selected,\n            this.disabled\n          )}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"button.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,gwZAAgwZ;;MCmBrwZ,MAAM;;;;;mBAIgB,SAAS;mBAKxB,KAAK;qBAOH,KAAK;iBAKT,KAAK;oBAKF,KAAK;oBAKY,KAAK;gBAKL,QAAQ;;EAE5C,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,cACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,gBAAgB,CACrB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAC5B,KAAK,EACL,KAAK,EACL,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,QAAQ,CACd,IAED,eAAa,CACN,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/button/button.scss?tag=ix-button&encapsulation=shadow","./src/components/button/button.tsx"],"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\n@import 'common-variables';\n@import './components/buttons';\n\n:host {\n  display: inline-block;\n  width: auto;\n  height: 2rem;\n  vertical-align: middle;\n\n  &.disabled {\n    pointer-events: none;\n  }\n\n  .btn {\n    width: 100%;\n    height: 100%;\n  }\n\n  button:not(:disabled) {\n    cursor: pointer;\n  }\n}\n","/*\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, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from './base-button';\n\nexport type ButtonVariant = 'Primary' | 'Secondary';\n\n@Component({\n  tag: 'ix-button',\n  shadow: true,\n  styleUrl: './button.scss',\n})\nexport class Button {\n  /**\n   * Button variant\n   */\n  @Prop() variant: ButtonVariant = 'Primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Invisible button\n   *\n   * @deprecated use ghost property\n   */\n  @Prop() invisible = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Show button as selected. Should be used with outline or ghost\n   */\n  @Prop() selected = false;\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <button\n          type={this.type}\n          class={getButtonClasses(\n            this.variant,\n            this.outline,\n            this.ghost || this.invisible,\n            false,\n            false,\n            this.selected,\n            this.disabled\n          )}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/card-accordion.js

@@ -0,0 +1,80 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const cardAccordionCss = ":host{display:flex;position:relative;flex-direction:column;width:100%;height:2.5rem;max-height:2.5rem;transition:var(--theme-default-time) ease-in-out}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .expand-action{all:unset;display:flex;position:relative;-webkit-appearance:button;-moz-appearance:button;appearance:button;height:2.5rem;width:100%;background-color:var(--theme-color-component-1);align-items:center;justify-content:flex-start}:host .expand-action:not(.disabled):not(:disabled).hover,:host .expand-action:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .expand-action:not(.disabled):not(:disabled).active,:host .expand-action:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .expand-action:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .expand-action::before{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--ix-card-background);z-index:-1}:host .expand-action:not(.show),:host .expand-action:not(.show)::before{border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}:host .expand-icon{margin-left:0.5rem;transition:var(--theme-default-time) transform ease-in-out}:host .expand-icon.show{transform:rotate(90deg)}:host .expand-content{display:flex;flex-direction:column;opacity:0;position:absolute;top:2.5rem;transition:var(--theme-default-time) ease-in-out;width:100%;height:0;max-height:20rem;background-color:var(--theme-color-component-1)}:host .expand-content.show{height:15rem;opacity:1}:host .expand-content.show .expand-content-body{display:none;overflow:hidden}:host .expand-content.show .expand-content-body{display:block;overflow:auto}:host .expand-content-footer{display:block;position:relative;width:100%;height:1rem;margin-top:auto;margin-bottom:0px;background-color:var(--theme-color-component-1);border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}:host(.show){height:calc(15rem + 2.5rem);max-height:calc(15rem + 2.5rem)}";
+
+let accordionControlId = 0;
+const getAriaControlsId = (prefix = 'expand-content') => {
+  return [prefix, accordionControlId++].join('-');
+};
+const CardAccordion = /*@__PURE__*/ proxyCustomElement(class CardAccordion extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.accordionExpand = createEvent(this, "accordionExpand", 7);
+    this.expandContent = false;
+  }
+  get expandedContent() {
+    return this.hostElement.shadowRoot.querySelector('.expand-content');
+  }
+  onExpandActionClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.expandContent = !this.expandContent;
+    this.accordionExpand.emit({
+      expand: this.expandContent,
+      nativeEvent: event,
+    });
+    if (this.expandContent) {
+      this.scrollExpandedContentIntoView();
+    }
+  }
+  scrollExpandedContentIntoView() {
+    setTimeout(() => {
+      const rect = this.expandedContent.getBoundingClientRect();
+      if (rect.bottom > window.innerHeight) {
+        this.hostElement.shadowRoot
+          .querySelector('.expand-content')
+          .scrollIntoView(false);
+      }
+    }, 150);
+  }
+  render() {
+    return (h(Host, { slot: "card-accordion", class: {
+        show: this.expandContent,
+      } }, h("button", { tabIndex: 0, class: { 'expand-action': true, show: this.expandContent }, onClick: (event) => this.onExpandActionClick(event), role: "button", type: "button", "aria-expanded": this.expandContent, "aria-controls": getAriaControlsId() }, h("ix-icon", { name: "chevron-right-small", class: {
+        'expand-icon': true,
+        show: this.expandContent,
+      } })), h("div", { class: {
+        'expand-content': true,
+        show: this.expandContent,
+      } }, h("div", { class: 'expand-content-body' }, h("slot", null)), h("div", { class: 'expand-content-footer' }))));
+  }
+  get hostElement() { return this; }
+  static get style() { return cardAccordionCss; }
+}, [1, "ix-card-accordion", {
+    "expandContent": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-card-accordion", "ix-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-card-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CardAccordion);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { CardAccordion as C, defineCustomElement as d };
+
+//# sourceMappingURL=card-accordion.js.map

package/dist/components/card-accordion.js.map

@@ -0,0 +1 @@
+{"file":"card-accordion.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,ksEAAksE;;ACU3tE,IAAI,kBAAkB,GAAG,CAAC,CAAC;AAC3B,MAAM,iBAAiB,GAAG,CAAC,SAAiB,gBAAgB;EAC1D,OAAO,CAAC,MAAM,EAAE,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,CAAC,CAAC;MAeW,aAAa;;;;;;yBAQC,KAAK;;EAE9B,IAAI,eAAe;IACjB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;GACrE;EAED,mBAAmB,CAAC,KAAY;IAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;IACzC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;MACxB,MAAM,EAAE,IAAI,CAAC,aAAa;MAC1B,WAAW,EAAE,KAAK;KACnB,CAAC,CAAC;IAEH,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACtC;GACF;EAEO,6BAA6B;IACnC,UAAU,CAAC;MACT,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,CAAC;MAC1D,IAAI,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE;QACpC,IAAI,CAAC,WAAW,CAAC,UAAU;WACxB,aAAa,CAAC,iBAAiB,CAAC;WAChC,cAAc,CAAC,KAAK,CAAC,CAAC;OAC1B;KACF,EAAE,GAAG,CAAC,CAAC;GACT;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CAAC,aAAa;OACzB,IAED,cACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,EAC1D,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,EACnD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,aAAa,mBAClB,iBAAiB,EAAE,IAElC,eACE,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,IAAI,EAAE,IAAI,CAAC,aAAa;OACzB,GACQ,CACJ,EACT,WACE,KAAK,EAAE;QACL,gBAAgB,EAAE,IAAI;QACtB,IAAI,EAAE,IAAI,CAAC,aAAa;OACzB,IAED,WAAK,KAAK,EAAE,qBAAqB,IAC/B,eAAa,CACT,EACN,WAAK,KAAK,EAAE,uBAAuB,GAAQ,CACvC,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/card-accordion/card-accordion.scss?tag=ix-card-accordion&encapsulation=shadow","./src/components/card-accordion/card-accordion.tsx"],"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@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n$action-height: 2.5rem;\n$expand-content-height: 15rem;\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  height: $action-height;\n  max-height: $action-height;\n  transition: var(--theme-default-time) ease-in-out;\n\n  .expand-action {\n    all: unset;\n    display: flex;\n    position: relative;\n\n    appearance: button;\n\n    height: $action-height;\n    width: 100%;\n\n    background-color: var(--theme-color-component-1);\n    align-items: center;\n    justify-content: flex-start;\n    @include ghost-hover-pressed();\n\n    @include focus-visible {\n      outline: 1px solid var(--theme-color-focus-bdr);\n      outline-offset: var(--theme-btn--focus--outline-offset);\n    }\n  }\n\n  .expand-action::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: var(--ix-card-background);\n    z-index: -1;\n  }\n\n  .expand-action:not(.show),\n  .expand-action:not(.show)::before {\n    border-bottom-left-radius: var(--theme-default-border-radius);\n    border-bottom-right-radius: var(--theme-default-border-radius);\n  }\n\n  .expand-icon {\n    margin-left: 0.5rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .expand-icon.show {\n    transform: rotate(90deg);\n  }\n\n  .expand-content {\n    display: flex;\n    flex-direction: column;\n    opacity: 0;\n    position: absolute;\n    top: $action-height;\n    transition: var(--theme-default-time) ease-in-out;\n    width: 100%;\n    height: 0;\n    max-height: 20rem;\n    background-color: var(--theme-color-component-1);\n  }\n\n  .expand-content.show {\n    height: $expand-content-height;\n    opacity: 1;\n  }\n\n  .expand-content.show .expand-content-body {\n    display: none;\n    overflow: hidden;\n  }\n\n  .expand-content.show .expand-content-body {\n    display: block;\n    overflow: auto;\n  }\n\n  .expand-content-footer {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 1rem;\n\n    margin-top: auto;\n    margin-bottom: 0px;\n\n    background-color: var(--theme-color-component-1);\n    border-bottom-left-radius: var(--theme-default-border-radius);\n    border-bottom-right-radius: var(--theme-default-border-radius);\n  }\n}\n\n:host(.show) {\n  height: calc(#{$expand-content-height} + #{$action-height});\n  max-height: calc(#{$expand-content-height} + #{$action-height});\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  State,\n} from '@stencil/core';\n\nlet accordionControlId = 0;\nconst getAriaControlsId = (prefix: string = 'expand-content') => {\n  return [prefix, accordionControlId++].join('-');\n};\n\nexport type CardAccordionExpandChangeEvent = {\n  expand: boolean;\n  nativeEvent: Event;\n};\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-accordion',\n  styleUrl: 'card-accordion.scss',\n  shadow: true,\n})\nexport class CardAccordion {\n  @Element() hostElement: HTMLIxCardAccordionElement;\n\n  /**\n   * @internal\n   */\n  @Event() accordionExpand: EventEmitter<CardAccordionExpandChangeEvent>;\n\n  @State() expandContent = false;\n\n  get expandedContent() {\n    return this.hostElement.shadowRoot.querySelector('.expand-content');\n  }\n\n  onExpandActionClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.expandContent = !this.expandContent;\n    this.accordionExpand.emit({\n      expand: this.expandContent,\n      nativeEvent: event,\n    });\n\n    if (this.expandContent) {\n      this.scrollExpandedContentIntoView();\n    }\n  }\n\n  private scrollExpandedContentIntoView() {\n    setTimeout(() => {\n      const rect = this.expandedContent.getBoundingClientRect();\n      if (rect.bottom > window.innerHeight) {\n        this.hostElement.shadowRoot\n          .querySelector('.expand-content')\n          .scrollIntoView(false);\n      }\n    }, 150);\n  }\n\n  render() {\n    return (\n      <Host\n        slot=\"card-accordion\"\n        class={{\n          show: this.expandContent,\n        }}\n      >\n        <button\n          tabIndex={0}\n          class={{ 'expand-action': true, show: this.expandContent }}\n          onClick={(event) => this.onExpandActionClick(event)}\n          role=\"button\"\n          type=\"button\"\n          aria-expanded={this.expandContent}\n          aria-controls={getAriaControlsId()}\n        >\n          <ix-icon\n            name=\"chevron-right-small\"\n            class={{\n              'expand-icon': true,\n              show: this.expandContent,\n            }}\n          ></ix-icon>\n        </button>\n        <div\n          class={{\n            'expand-content': true,\n            show: this.expandContent,\n          }}\n        >\n          <div class={'expand-content-body'}>\n            <slot></slot>\n          </div>\n          <div class={'expand-content-footer'}></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/card-content.js

@@ -0,0 +1,32 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const cardContentCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;gap:0.5rem;height:100%}:host *,:host *::after,:host *::before{box-sizing:border-box}";
+
+const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get style() { return cardContentCss; }
+}, [1, "ix-card-content"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-card-content"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-card-content":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CardContent);
+      }
+      break;
+  } });
+}
+
+export { CardContent as C, defineCustomElement as d };
+
+//# sourceMappingURL=card-content.js.map

package/dist/components/card-content.js.map

@@ -0,0 +1 @@
+{"file":"card-content.js","mappings":";;AAAA,MAAM,cAAc,GAAG,wKAAwK;;MCUlL,WAAW;;;;;;EACtB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/card-content/card-content.scss?tag=ix-card-content&encapsulation=shadow","./src/components/card-content/card-content.tsx"],"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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.5rem;\n  // min-height: 8rem;\n  height: 100%;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/card-title.js

@@ -0,0 +1,32 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const cardTitleCss = ":host{display:flex;position:relative;flex-direction:row;align-items:center;padding:0px;margin-bottom:0.5rem;gap:1rem;width:100%}:host .title-actions{display:flex;position:relative;flex-direction:row;gap:0.25rem;margin-left:auto;margin-right:0px}";
+
+const CardHeader = /*@__PURE__*/ proxyCustomElement(class CardHeader extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("slot", null), h("div", { class: "title-actions" }, h("slot", { name: "title-actions" }))));
+  }
+  static get style() { return cardTitleCss; }
+}, [1, "ix-card-title"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-card-title"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-card-title":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CardHeader);
+      }
+      break;
+  } });
+}
+
+export { CardHeader as C, defineCustomElement as d };
+
+//# sourceMappingURL=card-title.js.map

package/dist/components/card-title.js.map

@@ -0,0 +1 @@
+{"file":"card-title.js","mappings":";;AAAA,MAAM,YAAY,GAAG,uPAAuP;;MCY/P,UAAU;;;;;;EACrB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,EACb,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/card-title/card-title.scss?tag=ix-card-title&encapsulation=shadow","./src/components/card-title/card-title.tsx"],"sourcesContent":["@import 'common-variables';\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  align-items: center;\n  padding: 0px;\n  margin-bottom: $small-space;\n  gap: $default-space;\n\n  width: 100%;\n\n  .title-actions {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    gap: 0.25rem;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @slot title-actions - Place additional actions inside title\n *\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-title',\n  styleUrl: 'card-title.scss',\n  shadow: true,\n})\nexport class CardHeader {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n        <div class=\"title-actions\">\n          <slot name=\"title-actions\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/card.js

@@ -0,0 +1,36 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const cardCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;align-self:flex-start;overflow:hidden;width:20rem;border:1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));border-radius:var(--theme-default-border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .card-content{display:block;position:relative;flex-shrink:0;flex-grow:1;width:100%;padding:1rem 1rem;height:calc(100% - 2rem);background-color:var(--ix-card-background, transparent);border-top-left-radius:var(--theme-default-border-radius);border-top-right-radius:var(--theme-default-border-radius)}:host .card-footer{display:flex;position:relative;width:100%}:host(.card-insight){--ix-card-background:transparent;--ix-card-border-color:var(--theme-color-soft-bdr)}:host(.card-notification){--ix-card-background:var(--theme-color-component-1)}:host(.card-alarm){--ix-card-background:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}:host(.card-critical){--ix-card-background:var(--theme-color-critical);color:var(--theme-color-critical--contrast)}:host(.card-warning){--ix-card-background:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}:host(.card-success){--ix-card-background:var(--theme-color-success);color:var(--theme-color-success--contrast)}:host(.card-info){--ix-card-background:var(--theme-color-info);color:var(--theme-color-info--contrast)}:host(.card-neutral){--ix-card-background:var(--theme-color-neutral);color:var(--theme-color-neutral--contrast)}:host(:not(.card-insight)){--ix-card-border-color:transparent}";
+
+const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.variant = 'insight';
+  }
+  render() {
+    return (h(Host, { class: `card-${this.variant}` }, h("div", { class: "card-content" }, h("slot", null)), h("div", { class: "card-footer" }, h("slot", { name: "card-accordion" }))));
+  }
+  get hostElement() { return this; }
+  static get style() { return cardCss; }
+}, [1, "ix-card", {
+    "variant": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Card);
+      }
+      break;
+  } });
+}
+
+export { Card as C, defineCustomElement as d };
+
+//# sourceMappingURL=card.js.map

package/dist/components/card.js.map

@@ -0,0 +1 @@
+{"file":"card.js","mappings":";;AAAA,MAAM,OAAO,GAAG,qjDAAqjD;;MCoBxjD,IAAI;;;;;mBAMgB,SAAS;;EAExC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,OAAO,EAAE,IACjC,WAAK,KAAK,EAAC,cAAc,IACvB,eAAa,CACT,EACN,WAAK,KAAK,EAAC,aAAa,IACtB,YAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/card/card.scss?tag=ix-card&encapsulation=shadow","./src/components/card/card.tsx"],"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@import 'mixins/shadow-dom/component';\n\n$paddingContentLeftRight: 1rem;\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: flex-start;\n  overflow: hidden;\n\n  width: 20rem;\n\n  border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));\n  border-radius: var(--theme-default-border-radius);\n\n  .card-content {\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    flex-grow: 1;\n    width: 100%;\n    padding: 1rem $paddingContentLeftRight;\n    // min-height: calc(13.5rem - 2.5rem);\n    height: calc(100% - 2rem);\n    background-color: var(--ix-card-background, transparent);\n    border-top-left-radius: var(--theme-default-border-radius);\n    border-top-right-radius: var(--theme-default-border-radius);\n  }\n\n  .card-footer {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n}\n\n:host(.card-insight) {\n  --ix-card-background: transparent;\n  --ix-card-border-color: var(--theme-color-soft-bdr);\n}\n\n:host(.card-notification) {\n  --ix-card-background: var(--theme-color-component-1);\n}\n\n:host(.card-alarm) {\n  --ix-card-background: var(--theme-color-alarm);\n  color: var(--theme-color-alarm--contrast);\n}\n\n:host(.card-critical) {\n  --ix-card-background: var(--theme-color-critical);\n  color: var(--theme-color-critical--contrast);\n}\n\n:host(.card-warning) {\n  --ix-card-background: var(--theme-color-warning);\n  color: var(--theme-color-warning--contrast);\n}\n\n:host(.card-success) {\n  --ix-card-background: var(--theme-color-success);\n  color: var(--theme-color-success--contrast);\n}\n\n:host(.card-info) {\n  --ix-card-background: var(--theme-color-info);\n  color: var(--theme-color-info--contrast);\n}\n\n:host(.card-neutral) {\n  --ix-card-background: var(--theme-color-neutral);\n  color: var(--theme-color-neutral--contrast);\n}\n\n:host(:not(.card-insight)) {\n  --ix-card-border-color: transparent;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\nexport class Card {\n  @Element() hostElement: HTMLIxCardElement;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: CardVariant = 'insight';\n\n  render() {\n    return (\n      <Host class={`card-${this.variant}`}>\n        <div class=\"card-content\">\n          <slot></slot>\n        </div>\n        <div class=\"card-footer\">\n          <slot name=\"card-accordion\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/icon-button.js

@@ -2,12 +2,13 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { g as getButtonClasses } from './base-button.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
-const iconButtonCss = ".disabled.sc-ix-icon-button-h{pointer-events:none}.sc-ix-icon-button-h .icon-button.sc-ix-icon-button{padding:0;overflow:hidden}";
+const iconButtonCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:150ms;padding:0 0.5rem;min-width:5rem;gap:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .glyph{margin-right:0.25rem;font-weight:400}.btn:focus-visible,.btn.focus{box-shadow:none}.btn-primary{border-radius:var(--theme-btn--border-radius)}.btn-primary,.btn-primary.focus,.btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}.btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-primary.selected{background-color:var(--theme-btn-primary--background--selected)}.btn-primary.hover,.btn-primary:hover{border-color:var(--theme-btn-primary--border-color--hover) !important;background-color:var(--theme-btn-primary--background--hover) !important;color:var(--theme-btn-primary--color--hover) !important}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-btn-primary--background--selected-hover);color:var(--theme-btn-primary--color--selected-hover)}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{border-color:var(--theme-btn-primary--border-color--active) !important;background-color:var(--theme-btn-primary--background--active) !important;color:var(--theme-btn-primary--color--active) !important}.btn-primary.selected:not(:disabled):not(.disabled):active,.btn-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-primary.selected.dropdown-toggle{background-color:var(--theme-btn-primary--background--selected-active);color:var(--theme-btn-primary--color--selected-active)}.btn-primary.disabled,.btn-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1}.btn-outline-primary{border-radius:var(--theme-btn--border-radius)}.btn-outline-primary,.btn-outline-primary.focus,.btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}.btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-primary.selected{background-color:var(--theme-btn-outline-primary--background--selected)}.btn-outline-primary.hover,.btn-outline-primary:hover{border-color:var(--theme-btn-outline-primary--border-color--hover) !important;background-color:var(--theme-btn-outline-primary--background--hover) !important;color:var(--theme-btn-outline-primary--color--hover) !important}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-btn-outline-primary--background--selected-hover);color:var(--theme-btn-outline-primary--color--selected-hover)}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{border-color:var(--theme-btn-outline-primary--border-color--active) !important;background-color:var(--theme-btn-outline-primary--background--active) !important;color:var(--theme-btn-outline-primary--color--active) !important}.btn-outline-primary.selected:not(:disabled):not(.disabled):active,.btn-outline-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.selected.dropdown-toggle{background-color:var(--theme-btn-outline-primary--background--selected-active);color:var(--theme-btn-outline-primary--color--selected-active)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1}.btn-invisible-primary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-primary,.btn-invisible-primary.focus,.btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);border-color:transparent}.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-primary.selected{background-color:var(--theme-btn-invisible-primary--background--selected)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover) !important;color:var(--theme-btn-invisible-primary--color--hover) !important}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-btn-invisible-primary--background--selected-hover);color:var(--theme-btn-invisible-primary--color--selected-hover)}.btn-invisible-primary:not(:disabled):not(.disabled):active,.btn-invisible-primary:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--active) !important;color:var(--theme-btn-invisible-primary--color--active) !important}.btn-invisible-primary.selected:not(:disabled):not(.disabled):active,.btn-invisible-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.selected.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--selected-active);color:var(--theme-btn-invisible-primary--color--selected-active)}.btn-invisible-primary.disabled,.btn-invisible-primary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1}.btn-secondary{border-radius:var(--theme-btn--border-radius)}.btn-secondary,.btn-secondary.focus,.btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}.btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-secondary.selected{background-color:var(--theme-btn-secondary--background--selected)}.btn-secondary.hover,.btn-secondary:hover{border-color:var(--theme-btn-secondary--border-color--hover) !important;background-color:var(--theme-btn-secondary--background--hover) !important;color:var(--theme-btn-secondary--color--hover) !important}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-btn-secondary--background--selected-hover);color:var(--theme-btn-secondary--color--selected-hover)}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{border-color:var(--theme-btn-secondary--border-color--active) !important;background-color:var(--theme-btn-secondary--background--active) !important;color:var(--theme-btn-secondary--color--active) !important}.btn-secondary.selected:not(:disabled):not(.disabled):active,.btn-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-secondary--background--selected-active);color:var(--theme-btn-secondary--color--selected-active)}.btn-secondary.disabled,.btn-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1}.btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}.btn-outline-secondary,.btn-outline-secondary.focus,.btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-secondary.selected{background-color:var(--theme-btn-outline-secondary--background--selected)}.btn-outline-secondary.hover,.btn-outline-secondary:hover{border-color:var(--theme-btn-outline-secondary--border-color--hover) !important;background-color:var(--theme-btn-outline-secondary--background--hover) !important;color:var(--theme-btn-outline-secondary--color--hover) !important}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-btn-outline-secondary--background--selected-hover);color:var(--theme-btn-outline-secondary--color--selected-hover)}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{border-color:var(--theme-btn-outline-secondary--border-color--active) !important;background-color:var(--theme-btn-outline-secondary--background--active) !important;color:var(--theme-btn-outline-secondary--color--active) !important}.btn-outline-secondary.selected:not(:disabled):not(.disabled):active,.btn-outline-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-outline-secondary--background--selected-active);color:var(--theme-btn-outline-secondary--color--selected-active)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1}.btn-invisible-secondary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-secondary,.btn-invisible-secondary.focus,.btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);border-color:transparent}.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-secondary.selected{background-color:var(--theme-btn-invisible-secondary--background--selected)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover) !important;color:var(--theme-btn-invisible-secondary--color--hover) !important}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-btn-invisible-secondary--background--selected-hover);color:var(--theme-btn-invisible-secondary--color--selected-hover)}.btn-invisible-secondary:not(:disabled):not(.disabled):active,.btn-invisible-secondary:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--active) !important;color:var(--theme-btn-invisible-secondary--color--active) !important}.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active,.btn-invisible-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--selected-active);color:var(--theme-btn-invisible-secondary--color--selected-active)}.btn-invisible-secondary.disabled,.btn-invisible-secondary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1}.btn-oval,.btn-icon{min-width:2rem;width:2rem}.btn-oval .glyph,.btn-icon .glyph{margin-right:0}.btn-oval{border-radius:6.25rem;width:2rem}.btn-icon-xs,.btn-icon-12{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.btn-icon-s,.btn-icon-16{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.btn-icon-32{height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host{display:inline-block;vertical-align:middle}:host.disabled{pointer-events:none}:host .icon-button{padding:0;overflow:hidden}:host button:not(:disabled){cursor:pointer}";
 
 const IconButton = /*@__PURE__*/ proxyCustomElement(class IconButton extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.variant = 'Secondary';
     this.outline = undefined;
     this.invisible = undefined;
@@ -20,14 +21,21 @@ const IconButton = /*@__PURE__*/ proxyCustomElement(class IconButton extends HTM
     this.disabled = false;
     this.type = 'button';
   }
+  getIconSizeClass() {
+    return {
+      'btn-icon-12': this.size === '12',
+      'btn-icon-16': this.size === '16',
+      'btn-icon-32': this.size === '32' || this.size === '24' || !this.size,
+    };
+  }
   getIconButtonClasses() {
-    return Object.assign(Object.assign({}, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, this.oval, this.selected, this.disabled)), { 'icon-button': true, 'btn-icon-12': this.size === '12', 'btn-icon-16': this.size === '16', 'btn-icon-32': this.size === '32' || this.size === '24' || !this.size });
+    return Object.assign(Object.assign(Object.assign({}, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, this.oval, this.selected, this.disabled)), { 'icon-button': true }), this.getIconSizeClass());
   }
   render() {
-    return (h(Host, { class: { disabled: this.disabled } }, h("button", { class: this.getIconButtonClasses(), type: this.type }, h("ix-icon", { size: this.size, name: this.icon, color: this.color }), h("div", { style: { display: 'none' } }, h("slot", null)))));
+    return (h(Host, { class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled }) }, h("button", { class: this.getIconButtonClasses(), type: this.type }, h("ix-icon", { size: this.size, name: this.icon, color: this.color }), h("div", { style: { display: 'none' } }, h("slot", null)))));
   }
   static get style() { return iconButtonCss; }
-}, [6, "ix-icon-button", {
+}, [1, "ix-icon-button", {
     "variant": [1],
     "outline": [4],
     "invisible": [4],

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

@@ -1 +1 @@
-{"file":"icon-button.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,kIAAkI;;MCoB3I,UAAU;;;;mBAIgB,WAAW;;;;;;gBAgCN,IAAI;;oBAU3B,KAAK;oBAKL,KAAK;gBAKY,QAAQ;;EAEpC,oBAAoB;IAC1B,uCACK,gBAAgB,CACjB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAC5B,IAAI,EACJ,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,QAAQ,CACd,KACD,aAAa,EAAE,IAAI,EACnB,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,EACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,EACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,IACrE;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IACtC,cAAQ,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IACzD,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,EAChE,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAC7B,eAAa,CACT,CACC,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=scoped","./src/components/icon-button/icon-button.tsx"],"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:host {\n  &.disabled {\n    pointer-events: none;\n  }\n\n  .icon-button {\n    padding: 0;\n    overflow: hidden;\n  }\n}\n","/*\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, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from '../button/base-button';\nimport { Button, ButtonVariant } from '../button/button';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  scoped: true,\n})\nexport class IconButton implements Button {\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   * @deprecated Use ghost property\n   */\n  @Prop() invisible: 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   * Button icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '32' | '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() color: string;\n\n  /**\n   * Selected state only working with outline or invisible\n   */\n  @Prop() selected = false;\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  private getIconButtonClasses() {\n    return {\n      ...getButtonClasses(\n        this.variant,\n        this.outline,\n        this.ghost || this.invisible,\n        true,\n        this.oval,\n        this.selected,\n        this.disabled\n      ),\n      'icon-button': true,\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    return (\n      <Host class={{ disabled: this.disabled }}>\n        <button class={this.getIconButtonClasses()} type={this.type}>\n          <ix-icon size={this.size} name={this.icon} color={this.color} />\n          <div style={{ display: 'none' }}>\n            <slot></slot>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"icon-button.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,ovZAAovZ;;MCoB7vZ,UAAU;;;;;mBAIgB,WAAW;;;;;;gBAgCN,IAAI;;oBAU3B,KAAK;oBAKL,KAAK;gBAKY,QAAQ;;EAEpC,gBAAgB;IACtB,OAAO;MACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI;KACtE,CAAC;GACH;EAEO,oBAAoB;IAC1B,qDACK,gBAAgB,CACjB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAC5B,IAAI,EACJ,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,QAAQ,CACd,KACD,aAAa,EAAE,IAAI,KAChB,IAAI,CAAC,gBAAgB,EAAE,EAC1B;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,kCAAO,IAAI,CAAC,gBAAgB,EAAE,KAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,OAChE,cAAQ,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IACzD,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,EAChE,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAC7B,eAAa,CACT,CACC,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"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\n@import 'common-variables';\n@import './components/buttons';\n\n:host {\n  display: inline-block;\n  vertical-align: middle;\n\n  &.disabled {\n    pointer-events: none;\n  }\n\n  .icon-button {\n    padding: 0;\n    overflow: hidden;\n  }\n\n  button:not(:disabled) {\n    cursor: pointer;\n  }\n}\n","/*\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, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from '../button/base-button';\nimport { Button, ButtonVariant } from '../button/button';\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 implements Button {\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   * @deprecated Use ghost property\n   */\n  @Prop() invisible: 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   * Button icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '32' | '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() color: string;\n\n  /**\n   * Selected state only working with outline or invisible\n   */\n  @Prop() selected = false;\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  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  private getIconButtonClasses() {\n    return {\n      ...getButtonClasses(\n        this.variant,\n        this.outline,\n        this.ghost || this.invisible,\n        true,\n        this.oval,\n        this.selected,\n        this.disabled\n      ),\n      'icon-button': true,\n      ...this.getIconSizeClass(),\n    };\n  }\n\n  render() {\n    return (\n      <Host class={{ ...this.getIconSizeClass(), disabled: this.disabled }}>\n        <button class={this.getIconButtonClasses()} type={this.type}>\n          <ix-icon size={this.size} name={this.icon} color={this.color} />\n          <div style={{ display: 'none' }}>\n            <slot></slot>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/icon.js

@@ -1,37 +1,110 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const iconCss = ".sc-ix-icon-h{display:inline-flex;height:1.5rem;width:1.5rem;color:var(--theme-color-std-text)}.sc-ix-icon-h i.sc-ix-icon{color:inherit;transition:color 150ms}.size-12.sc-ix-icon-h{height:0.75rem;width:0.75rem}.size-16.sc-ix-icon-h{height:1rem;width:1rem}.size-32.sc-ix-icon-h{height:2rem;width:2rem}";
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
+ */
+const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');
+let parser = null;
+function parseSVGDataContent(content) {
+  if (typeof window['DOMParser'] === 'undefined') {
+    console.warn('DOMParser not supported by your browser.');
+    return;
+  }
+  if (parser === null) {
+    parser = new window['DOMParser']();
+  }
+  const svgDocument = parser.parseFromString(content, 'text/html');
+  const svgElement = svgDocument.querySelector('svg');
+  if (!svgElement) {
+    throw Error('No valid svg data provided');
+  }
+  return svgElement.outerHTML;
+}
+async function fetchSVG(url) {
+  const response = await fetch(url);
+  const responseText = await response.text();
+  if (!response.ok) {
+    console.error(responseText);
+    return '';
+  }
+  return responseText;
+}
+async function resolveIcon(icon) {
+  const { src, name } = icon;
+  if (name) {
+    if (isSvgDataUrl(name)) {
+      return parseSVGDataContent(name);
+    }
+    //Fallback return undefined to render web font icon
+    return;
+  }
+  if (isSvgDataUrl(src)) {
+    return parseSVGDataContent(src);
+  }
+  return fetchSVG(src);
+}
+
+const iconCss = ".glyph{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-family:\"ix-icons\";font-size:1.5rem;font-weight:500}.glyph-lg{font-size:1.3333333333em;line-height:0.75em;vertical-align:-15%}.glyph-2x{font-size:2em}.glyph-3x{font-size:3em}.glyph-4x{font-size:4em}.glyph-5x{font-size:5em}.glyph-fw{width:1.2857142857em;text-align:center}.glyph-12{font-size:0.75rem}.glyph-16{font-size:1rem}.glyph-24{font-size:1.5rem}.glyph-32{font-size:2rem}.glyph-about-filled:before{content:\"\\ea01\"}.glyph-about:before{content:\"\\ea02\"}.glyph-add-circle-filled:before{content:\"\\ea03\"}.glyph-add-circle:before{content:\"\\ea04\"}.glyph-add-document-note:before{content:\"\\ea05\"}.glyph-add-eye-filled:before{content:\"\\ea06\"}.glyph-add-eye:before{content:\"\\ea07\"}.glyph-add-task-list:before{content:\"\\ea08\"}.glyph-add-task:before{content:\"\\ea09\"}.glyph-add:before{content:\"\\ea0a\"}.glyph-ai:before{content:\"\\ea0b\"}.glyph-alarm-bell-cancelled-filled:before{content:\"\\ea0c\"}.glyph-alarm-bell-cancelled:before{content:\"\\ea0d\"}.glyph-alarm-bell-filled:before{content:\"\\ea0e\"}.glyph-alarm-bell:before{content:\"\\ea0f\"}.glyph-alarm-clock-filled:before{content:\"\\ea10\"}.glyph-alarm-clock:before{content:\"\\ea11\"}.glyph-alarm-filled:before{content:\"\\ea12\"}.glyph-alarm:before{content:\"\\ea13\"}.glyph-analyze:before{content:\"\\ea14\"}.glyph-anomaly-found:before{content:\"\\ea15\"}.glyph-anomaly:before{content:\"\\ea16\"}.glyph-app-menu:before{content:\"\\ea17\"}.glyph-apps:before{content:\"\\ea18\"}.glyph-arrow-down-right:before{content:\"\\ea19\"}.glyph-arrow-down:before{content:\"\\ea1a\"}.glyph-arrow-left:before{content:\"\\ea1b\"}.glyph-arrow-right-down:before{content:\"\\ea1c\"}.glyph-arrow-right:before{content:\"\\ea1d\"}.glyph-arrow-up:before{content:\"\\ea1e\"}.glyph-attach:before{content:\"\\ea1f\"}.glyph-attachment-upload:before{content:\"\\ea20\"}.glyph-audio-description1:before{content:\"\\ea21\"}.glyph-audio-description2:before{content:\"\\ea22\"}.glyph-audit-report:before{content:\"\\ea23\"}.glyph-average:before{content:\"\\ea24\"}.glyph-backup-filled:before{content:\"\\ea25\"}.glyph-backup:before{content:\"\\ea26\"}.glyph-bar-code:before{content:\"\\ea27\"}.glyph-barchart:before{content:\"\\ea28\"}.glyph-battery-check:before{content:\"\\ea29\"}.glyph-battery-empty-question:before{content:\"\\ea2a\"}.glyph-battery-empty:before{content:\"\\ea2b\"}.glyph-battery-exclamation:before{content:\"\\ea2c\"}.glyph-battery-full-check:before{content:\"\\ea2d\"}.glyph-battery-full:before{content:\"\\ea2e\"}.glyph-battery-half:before{content:\"\\ea2f\"}.glyph-battery-low:before{content:\"\\ea30\"}.glyph-battery-quarter:before{content:\"\\ea31\"}.glyph-battery-slash:before{content:\"\\ea32\"}.glyph-battery-three-quarter:before{content:\"\\ea33\"}.glyph-battery-xmark:before{content:\"\\ea34\"}.glyph-bezier-curve:before{content:\"\\ea35\"}.glyph-binoculars-filled:before{content:\"\\ea36\"}.glyph-binoculars:before{content:\"\\ea37\"}.glyph-blazor:before{content:\"\\ea38\"}.glyph-book:before{content:\"\\ea39\"}.glyph-bookmark-filled:before{content:\"\\ea3a\"}.glyph-bookmark:before{content:\"\\ea3b\"}.glyph-boundary-signals:before{content:\"\\ea3c\"}.glyph-building1-filled:before{content:\"\\ea3d\"}.glyph-building1:before{content:\"\\ea3e\"}.glyph-building2-filled:before{content:\"\\ea3f\"}.glyph-building2:before{content:\"\\ea40\"}.glyph-bulb-filled:before{content:\"\\ea41\"}.glyph-bulb:before{content:\"\\ea42\"}.glyph-calendar-filled:before{content:\"\\ea43\"}.glyph-calendar-settings:before{content:\"\\ea44\"}.glyph-calendar:before{content:\"\\ea45\"}.glyph-cancel:before{content:\"\\ea46\"}.glyph-cancelled:before{content:\"\\ea47\"}.glyph-capacity-filled:before{content:\"\\ea48\"}.glyph-capacity:before{content:\"\\ea49\"}.glyph-capture:before{content:\"\\ea4a\"}.glyph-car-filled:before{content:\"\\ea4b\"}.glyph-car:before{content:\"\\ea4c\"}.glyph-card-layout-filled:before{content:\"\\ea4d\"}.glyph-card-layout:before{content:\"\\ea4e\"}.glyph-chart-cursor:before{content:\"\\ea4f\"}.glyph-chart-curve-linear:before{content:\"\\ea50\"}.glyph-chart-curve-spline:before{content:\"\\ea51\"}.glyph-chart-curve-stepped:before{content:\"\\ea52\"}.glyph-chart-diagram-add:before{content:\"\\ea53\"}.glyph-chart-diagram:before{content:\"\\ea54\"}.glyph-chart-diagrams:before{content:\"\\ea55\"}.glyph-chart-labels-filled:before{content:\"\\ea56\"}.glyph-chart-labels:before{content:\"\\ea57\"}.glyph-check-in:before{content:\"\\ea58\"}.glyph-check-out:before{content:\"\\ea59\"}.glyph-checkbox-component-checked:before{content:\"\\ea5a\"}.glyph-checkbox-component-mixed:before{content:\"\\ea5b\"}.glyph-checkbox-component-unchecked:before{content:\"\\ea5c\"}.glyph-checkbox-filled:before{content:\"\\ea5d\"}.glyph-checkbox:before{content:\"\\ea5e\"}.glyph-checkboxes-filled:before{content:\"\\ea5f\"}.glyph-checkboxes:before{content:\"\\ea60\"}.glyph-chevron-down-small:before{content:\"\\ea61\"}.glyph-chevron-down:before{content:\"\\ea62\"}.glyph-chevron-left-small:before{content:\"\\ea63\"}.glyph-chevron-left:before{content:\"\\ea64\"}.glyph-chevron-right-small:before{content:\"\\ea65\"}.glyph-chevron-right:before{content:\"\\ea66\"}.glyph-chevron-up-small:before{content:\"\\ea67\"}.glyph-chevron-up:before{content:\"\\ea68\"}.glyph-circle-dot-filled:before{content:\"\\ea69\"}.glyph-circle-dot:before{content:\"\\ea6a\"}.glyph-circle-filled:before{content:\"\\ea6b\"}.glyph-circle-pause-filled:before{content:\"\\ea6c\"}.glyph-circle-pause:before{content:\"\\ea6d\"}.glyph-circle-play-filled:before{content:\"\\ea6e\"}.glyph-circle-play:before{content:\"\\ea6f\"}.glyph-circle-stop-filled:before{content:\"\\ea70\"}.glyph-circle-stop:before{content:\"\\ea71\"}.glyph-circle:before{content:\"\\ea72\"}.glyph-clear-filter-filled:before{content:\"\\ea73\"}.glyph-clear-filter:before{content:\"\\ea74\"}.glyph-clear:before{content:\"\\ea75\"}.glyph-clock-filled:before{content:\"\\ea76\"}.glyph-clock:before{content:\"\\ea77\"}.glyph-close-small:before{content:\"\\ea78\"}.glyph-close:before{content:\"\\ea79\"}.glyph-cloud-download-add-filled:before{content:\"\\ea7a\"}.glyph-cloud-download-add:before{content:\"\\ea7b\"}.glyph-cloud-download-filled:before{content:\"\\ea7c\"}.glyph-cloud-download-list-filled:before{content:\"\\ea7d\"}.glyph-cloud-download-list:before{content:\"\\ea7e\"}.glyph-cloud-download:before{content:\"\\ea7f\"}.glyph-cloud-filled:before{content:\"\\ea80\"}.glyph-cloud-new-filled:before{content:\"\\ea81\"}.glyph-cloud-new:before{content:\"\\ea82\"}.glyph-cloud-success-filled:before{content:\"\\ea83\"}.glyph-cloud-success:before{content:\"\\ea84\"}.glyph-cloud-upload-filled:before{content:\"\\ea85\"}.glyph-cloud-upload:before{content:\"\\ea86\"}.glyph-cloud:before{content:\"\\ea87\"}.glyph-code:before{content:\"\\ea88\"}.glyph-cogwheel-filled:before{content:\"\\ea89\"}.glyph-cogwheel:before{content:\"\\ea8a\"}.glyph-combine:before{content:\"\\ea8b\"}.glyph-compact-disc-filled:before{content:\"\\ea8c\"}.glyph-compact-disc:before{content:\"\\ea8d\"}.glyph-compound-block:before{content:\"\\ea8e\"}.glyph-configuration:before{content:\"\\ea8f\"}.glyph-configure-filled:before{content:\"\\ea90\"}.glyph-configure:before{content:\"\\ea91\"}.glyph-connected:before{content:\"\\ea92\"}.glyph-connector-chart-filled:before{content:\"\\ea93\"}.glyph-connector-chart:before{content:\"\\ea94\"}.glyph-connector-filled:before{content:\"\\ea95\"}.glyph-connector-hex-filled:before{content:\"\\ea96\"}.glyph-connector-hex:before{content:\"\\ea97\"}.glyph-connector-rect-filled:before{content:\"\\ea98\"}.glyph-connector-rect:before{content:\"\\ea99\"}.glyph-connector-rhomb-filled:before{content:\"\\ea9a\"}.glyph-connector-rhomb:before{content:\"\\ea9b\"}.glyph-connector:before{content:\"\\ea9c\"}.glyph-consistency-check:before{content:\"\\ea9d\"}.glyph-contact-details-filled:before{content:\"\\ea9e\"}.glyph-contact-details:before{content:\"\\ea9f\"}.glyph-context-menu:before{content:\"\\eaa0\"}.glyph-controlled-device:before{content:\"\\eaa1\"}.glyph-controller-device:before{content:\"\\eaa2\"}.glyph-copy:before{content:\"\\eaa3\"}.glyph-corner-arrow-up-left:before{content:\"\\eaa4\"}.glyph-couch-filled:before{content:\"\\eaa5\"}.glyph-couch:before{content:\"\\eaa6\"}.glyph-create-plant-filled:before{content:\"\\eaa7\"}.glyph-create-plant:before{content:\"\\eaa8\"}.glyph-cut:before{content:\"\\eaa9\"}.glyph-cycle:before{content:\"\\eaaa\"}.glyph-data-egress:before{content:\"\\eaab\"}.glyph-data-ingress-egress:before{content:\"\\eaac\"}.glyph-data-ingress:before{content:\"\\eaad\"}.glyph-database-filled:before{content:\"\\eaae\"}.glyph-database:before{content:\"\\eaaf\"}.glyph-details:before{content:\"\\eab0\"}.glyph-diagram-module-library:before{content:\"\\eab1\"}.glyph-diagram-module-new:before{content:\"\\eab2\"}.glyph-diagram-module:before{content:\"\\eab3\"}.glyph-diamond:before{content:\"\\eab4\"}.glyph-disconnected:before{content:\"\\eab5\"}.glyph-disk-filled:before{content:\"\\eab6\"}.glyph-disk-pen:before{content:\"\\eab7\"}.glyph-disk:before{content:\"\\eab8\"}.glyph-distribution:before{content:\"\\eab9\"}.glyph-doc-document:before{content:\"\\eaba\"}.glyph-document-bulk:before{content:\"\\eabb\"}.glyph-document-info:before{content:\"\\eabc\"}.glyph-document-link:before{content:\"\\eabd\"}.glyph-document-management:before{content:\"\\eabe\"}.glyph-document-reference:before{content:\"\\eabf\"}.glyph-document-settings:before{content:\"\\eac0\"}.glyph-document-success:before{content:\"\\eac1\"}.glyph-document:before{content:\"\\eac2\"}.glyph-double-check:before{content:\"\\eac3\"}.glyph-double-chevron-down:before{content:\"\\eac4\"}.glyph-double-chevron-left:before{content:\"\\eac5\"}.glyph-double-chevron-right:before{content:\"\\eac6\"}.glyph-double-chevron-up:before{content:\"\\eac7\"}.glyph-doublet-filled:before{content:\"\\eac8\"}.glyph-doublet:before{content:\"\\eac9\"}.glyph-download-add:before{content:\"\\eaca\"}.glyph-download-list:before{content:\"\\eacb\"}.glyph-download:before{content:\"\\eacc\"}.glyph-drop:before{content:\"\\eacd\"}.glyph-duplicate-document:before{content:\"\\eace\"}.glyph-duplicate:before{content:\"\\eacf\"}.glyph-e-mail-filled:before{content:\"\\ead0\"}.glyph-e-mail:before{content:\"\\ead1\"}.glyph-earth-filled:before{content:\"\\ead2\"}.glyph-earth:before{content:\"\\ead3\"}.glyph-edit-plant:before{content:\"\\ead4\"}.glyph-ellipse-arc:before{content:\"\\ead5\"}.glyph-ellipse-filled:before{content:\"\\ead6\"}.glyph-ellipse:before{content:\"\\ead7\"}.glyph-error-filled:before{content:\"\\ead8\"}.glyph-error:before{content:\"\\ead9\"}.glyph-explore-filled:before{content:\"\\eada\"}.glyph-explore:before{content:\"\\eadb\"}.glyph-export:before{content:\"\\eadc\"}.glyph-eye-cancelled-filled:before{content:\"\\eadd\"}.glyph-eye-cancelled:before{content:\"\\eade\"}.glyph-eye-filled:before{content:\"\\eadf\"}.glyph-eye:before{content:\"\\eae0\"}.glyph-factory-reset-filled:before{content:\"\\eae1\"}.glyph-factory-reset:before{content:\"\\eae2\"}.glyph-filter-filled:before{content:\"\\eae3\"}.glyph-filter-outline:before{content:\"\\eae4\"}.glyph-filter:before{content:\"\\eae5\"}.glyph-flag-filled:before{content:\"\\eae6\"}.glyph-flag:before{content:\"\\eae7\"}.glyph-folder-down-filled:before{content:\"\\eae8\"}.glyph-folder-down:before{content:\"\\eae9\"}.glyph-folder-filled:before{content:\"\\eaea\"}.glyph-folder-new-filled:before{content:\"\\eaeb\"}.glyph-folder-new-outline:before{content:\"\\eaec\"}.glyph-folder-new:before{content:\"\\eaed\"}.glyph-folder-open-filled:before{content:\"\\eaee\"}.glyph-folder-open-outline:before{content:\"\\eaef\"}.glyph-folder-open:before{content:\"\\eaf0\"}.glyph-folder-outline:before{content:\"\\eaf1\"}.glyph-folder-up-filled:before{content:\"\\eaf2\"}.glyph-folder-up:before{content:\"\\eaf3\"}.glyph-folder:before{content:\"\\eaf4\"}.glyph-full-screeen-exit:before{content:\"\\eaf5\"}.glyph-full-screeen:before{content:\"\\eaf6\"}.glyph-function-block-library:before{content:\"\\eaf7\"}.glyph-function-block-new:before{content:\"\\eaf8\"}.glyph-function-block:before{content:\"\\eaf9\"}.glyph-function-diagram-new:before{content:\"\\eafa\"}.glyph-function-diagram:before{content:\"\\eafb\"}.glyph-gauge-filled:before{content:\"\\eafc\"}.glyph-gauge:before{content:\"\\eafd\"}.glyph-gaugechart:before{content:\"\\eafe\"}.glyph-global-plant-filled:before{content:\"\\eaff\"}.glyph-global-plant:before{content:\"\\eb00\"}.glyph-globe-filled:before{content:\"\\eb01\"}.glyph-globe:before{content:\"\\eb02\"}.glyph-goto:before{content:\"\\eb03\"}.glyph-group:before{content:\"\\eb04\"}.glyph-hard-reset:before{content:\"\\eb05\"}.glyph-hardware-cabinet:before{content:\"\\eb06\"}.glyph-health-filled:before{content:\"\\eb07\"}.glyph-health:before{content:\"\\eb08\"}.glyph-heart-filled:before{content:\"\\eb09\"}.glyph-heart:before{content:\"\\eb0a\"}.glyph-hexagon-vertical-bars-database-filled:before{content:\"\\eb0b\"}.glyph-hexagon-vertical-bars-database:before{content:\"\\eb0c\"}.glyph-hexagon-vertical-bars-filled:before{content:\"\\eb0d\"}.glyph-hexagon-vertical-bars:before{content:\"\\eb0e\"}.glyph-hierarchy:before{content:\"\\eb0f\"}.glyph-highlight-filled:before{content:\"\\eb10\"}.glyph-highlight:before{content:\"\\eb11\"}.glyph-history-list:before{content:\"\\eb12\"}.glyph-history:before{content:\"\\eb13\"}.glyph-home-filled:before{content:\"\\eb14\"}.glyph-home:before{content:\"\\eb15\"}.glyph-hourglass:before{content:\"\\eb16\"}.glyph-image-filled:before{content:\"\\eb17\"}.glyph-image:before{content:\"\\eb18\"}.glyph-import:before{content:\"\\eb19\"}.glyph-info-feed:before{content:\"\\eb1a\"}.glyph-info-filled:before{content:\"\\eb1b\"}.glyph-info:before{content:\"\\eb1c\"}.glyph-ingestion-report:before{content:\"\\eb1d\"}.glyph-ingestion:before{content:\"\\eb1e\"}.glyph-ink-pen:before{content:\"\\eb1f\"}.glyph-inquiry-filled:before{content:\"\\eb20\"}.glyph-inquiry-mail:before{content:\"\\eb21\"}.glyph-inquiry:before{content:\"\\eb22\"}.glyph-item-details-filled:before{content:\"\\eb23\"}.glyph-item-details:before{content:\"\\eb24\"}.glyph-label-filled:before{content:\"\\eb25\"}.glyph-label:before{content:\"\\eb26\"}.glyph-language-filled:before{content:\"\\eb27\"}.glyph-language:before{content:\"\\eb28\"}.glyph-layers-filled:before{content:\"\\eb29\"}.glyph-layers:before{content:\"\\eb2a\"}.glyph-leaf:before{content:\"\\eb2b\"}.glyph-legal:before{content:\"\\eb2c\"}.glyph-library-new:before{content:\"\\eb2d\"}.glyph-library:before{content:\"\\eb2e\"}.glyph-license:before{content:\"\\eb2f\"}.glyph-light-dark:before{content:\"\\eb30\"}.glyph-line-diagonal:before{content:\"\\eb31\"}.glyph-link:before{content:\"\\eb32\"}.glyph-list:before{content:\"\\eb33\"}.glyph-live-schedule:before{content:\"\\eb34\"}.glyph-location-filled:before{content:\"\\eb35\"}.glyph-location-outline:before{content:\"\\eb36\"}.glyph-location:before{content:\"\\eb37\"}.glyph-lock-filled:before{content:\"\\eb38\"}.glyph-lock-key-filled:before{content:\"\\eb39\"}.glyph-lock-key:before{content:\"\\eb3a\"}.glyph-lock:before{content:\"\\eb3b\"}.glyph-log-in:before{content:\"\\eb3c\"}.glyph-log-out:before{content:\"\\eb3d\"}.glyph-log:before{content:\"\\eb3e\"}.glyph-logic-diagram:before{content:\"\\eb3f\"}.glyph-lower-limit:before{content:\"\\eb40\"}.glyph-mail-filled:before{content:\"\\eb41\"}.glyph-mail:before{content:\"\\eb42\"}.glyph-maintenance-documents:before{content:\"\\eb43\"}.glyph-maintenance-info:before{content:\"\\eb44\"}.glyph-maintenance-warning-filled:before{content:\"\\eb45\"}.glyph-maintenance-warning:before{content:\"\\eb46\"}.glyph-maintenance:before{content:\"\\eb47\"}.glyph-mandatory-done:before{content:\"\\eb48\"}.glyph-mandatory:before{content:\"\\eb49\"}.glyph-map:before{content:\"\\eb4a\"}.glyph-maximize:before{content:\"\\eb4b\"}.glyph-microphone-filled:before{content:\"\\eb4c\"}.glyph-microphone:before{content:\"\\eb4d\"}.glyph-minimize:before{content:\"\\eb4e\"}.glyph-minus:before{content:\"\\eb4f\"}.glyph-mix:before{content:\"\\eb50\"}.glyph-monitor-filled:before{content:\"\\eb51\"}.glyph-monitor-trend:before{content:\"\\eb52\"}.glyph-monitor:before{content:\"\\eb53\"}.glyph-monitoring-add:before{content:\"\\eb54\"}.glyph-monitoring:before{content:\"\\eb55\"}.glyph-monitorings:before{content:\"\\eb56\"}.glyph-moon-filled:before{content:\"\\eb57\"}.glyph-moon:before{content:\"\\eb58\"}.glyph-more-menu:before{content:\"\\eb59\"}.glyph-mouse-click-filled:before{content:\"\\eb5a\"}.glyph-mouse-click:before{content:\"\\eb5b\"}.glyph-mouse-select-filled:before{content:\"\\eb5c\"}.glyph-mouse-select:before{content:\"\\eb5d\"}.glyph-mp4-document:before{content:\"\\eb5e\"}.glyph-namur-check-function-filled:before{content:\"\\eb5f\"}.glyph-namur-check-function:before{content:\"\\eb60\"}.glyph-namur-failure-filled:before{content:\"\\eb61\"}.glyph-namur-failure:before{content:\"\\eb62\"}.glyph-namur-maintenance-required-filled:before{content:\"\\eb63\"}.glyph-namur-maintenance-required:before{content:\"\\eb64\"}.glyph-namur-ok-filled:before{content:\"\\eb65\"}.glyph-namur-ok:before{content:\"\\eb66\"}.glyph-namur-out-of-spec-filled:before{content:\"\\eb67\"}.glyph-namur-out-of-spec:before{content:\"\\eb68\"}.glyph-navigation-filled:before{content:\"\\eb69\"}.glyph-navigation-left:before{content:\"\\eb6a\"}.glyph-navigation-right:before{content:\"\\eb6b\"}.glyph-navigation:before{content:\"\\eb6c\"}.glyph-new-indicator-filled:before{content:\"\\eb6d\"}.glyph-new-indicator:before{content:\"\\eb6e\"}.glyph-no-filter-filled:before{content:\"\\eb6f\"}.glyph-no-filter:before{content:\"\\eb70\"}.glyph-no-image:before{content:\"\\eb71\"}.glyph-note-filled:before{content:\"\\eb72\"}.glyph-note:before{content:\"\\eb73\"}.glyph-notification-filled:before{content:\"\\eb74\"}.glyph-notification:before{content:\"\\eb75\"}.glyph-notifications-filled:before{content:\"\\eb76\"}.glyph-notifications:before{content:\"\\eb77\"}.glyph-ontology-filled:before{content:\"\\eb78\"}.glyph-ontology:before{content:\"\\eb79\"}.glyph-open-external:before{content:\"\\eb7a\"}.glyph-open-file-filled:before{content:\"\\eb7b\"}.glyph-open-file:before{content:\"\\eb7c\"}.glyph-operate-plant-filled:before{content:\"\\eb7d\"}.glyph-operate-plant:before{content:\"\\eb7e\"}.glyph-optimize:before{content:\"\\eb7f\"}.glyph-p-and-i-symbols:before{content:\"\\eb80\"}.glyph-p-i-diagram:before{content:\"\\eb81\"}.glyph-pan:before{content:\"\\eb82\"}.glyph-paste:before{content:\"\\eb83\"}.glyph-pause:before{content:\"\\eb84\"}.glyph-pc-tower-filled:before{content:\"\\eb85\"}.glyph-pc-tower:before{content:\"\\eb86\"}.glyph-pdf-document:before{content:\"\\eb87\"}.glyph-pen-filled:before{content:\"\\eb88\"}.glyph-pen:before{content:\"\\eb89\"}.glyph-phone-filled:before{content:\"\\eb8a\"}.glyph-phone:before{content:\"\\eb8b\"}.glyph-photo-camera-add:before{content:\"\\eb8c\"}.glyph-photo-camera-filled:before{content:\"\\eb8d\"}.glyph-photo-camera:before{content:\"\\eb8e\"}.glyph-photo-cameras:before{content:\"\\eb8f\"}.glyph-piechart-filled:before{content:\"\\eb90\"}.glyph-piechart:before{content:\"\\eb91\"}.glyph-pin-filled:before{content:\"\\eb92\"}.glyph-pin:before{content:\"\\eb93\"}.glyph-plant-filled:before{content:\"\\eb94\"}.glyph-plant-handbook-filled:before{content:\"\\eb95\"}.glyph-plant-handbook:before{content:\"\\eb96\"}.glyph-plant-outline:before{content:\"\\eb97\"}.glyph-plant-security:before{content:\"\\eb98\"}.glyph-plant-settings-filled:before{content:\"\\eb99\"}.glyph-plant-settings:before{content:\"\\eb9a\"}.glyph-plant-user-filled:before{content:\"\\eb9b\"}.glyph-plant-user:before{content:\"\\eb9c\"}.glyph-plant:before{content:\"\\eb9d\"}.glyph-plants-filled:before{content:\"\\eb9e\"}.glyph-plants:before{content:\"\\eb9f\"}.glyph-play-filled:before{content:\"\\eba0\"}.glyph-play-pause-filled:before{content:\"\\eba1\"}.glyph-play-pause:before{content:\"\\eba2\"}.glyph-play-stepwise-filled:before{content:\"\\eba3\"}.glyph-play-stepwise:before{content:\"\\eba4\"}.glyph-play:before{content:\"\\eba5\"}.glyph-plus-minus-times-divide:before{content:\"\\eba6\"}.glyph-plus:before{content:\"\\eba7\"}.glyph-point-up-filled:before{content:\"\\eba8\"}.glyph-point-up:before{content:\"\\eba9\"}.glyph-polar-plot:before{content:\"\\ebaa\"}.glyph-polygon-filled:before{content:\"\\ebab\"}.glyph-polygon-line:before{content:\"\\ebac\"}.glyph-polygon:before{content:\"\\ebad\"}.glyph-ppt-document:before{content:\"\\ebae\"}.glyph-print-filled:before{content:\"\\ebaf\"}.glyph-print:before{content:\"\\ebb0\"}.glyph-prio-high:before{content:\"\\ebb1\"}.glyph-prio-low:before{content:\"\\ebb2\"}.glyph-prio-middle:before{content:\"\\ebb3\"}.glyph-product-catalog:before{content:\"\\ebb4\"}.glyph-product-management:before{content:\"\\ebb5\"}.glyph-product:before{content:\"\\ebb6\"}.glyph-project-configuration:before{content:\"\\ebb7\"}.glyph-project-new:before{content:\"\\ebb8\"}.glyph-project-scenarios:before{content:\"\\ebb9\"}.glyph-project:before{content:\"\\ebba\"}.glyph-protocol:before{content:\"\\ebbb\"}.glyph-publish-document:before{content:\"\\ebbc\"}.glyph-publish:before{content:\"\\ebbd\"}.glyph-qr-code:before{content:\"\\ebbe\"}.glyph-quality-report:before{content:\"\\ebbf\"}.glyph-question-filled:before{content:\"\\ebc0\"}.glyph-question:before{content:\"\\ebc1\"}.glyph-radarchart:before{content:\"\\ebc2\"}.glyph-radio-waves-off:before{content:\"\\ebc3\"}.glyph-radio-waves:before{content:\"\\ebc4\"}.glyph-random-filled:before{content:\"\\ebc5\"}.glyph-random:before{content:\"\\ebc6\"}.glyph-reboot:before{content:\"\\ebc7\"}.glyph-rectangle-filled:before{content:\"\\ebc8\"}.glyph-rectangle:before{content:\"\\ebc9\"}.glyph-redo:before{content:\"\\ebca\"}.glyph-reference:before{content:\"\\ebcb\"}.glyph-refresh-cancelled:before{content:\"\\ebcc\"}.glyph-refresh:before{content:\"\\ebcd\"}.glyph-reload:before{content:\"\\ebce\"}.glyph-remove-eye-filled:before{content:\"\\ebcf\"}.glyph-remove-eye:before{content:\"\\ebd0\"}.glyph-rename:before{content:\"\\ebd1\"}.glyph-replace:before{content:\"\\ebd2\"}.glyph-report-barchart:before{content:\"\\ebd3\"}.glyph-report-linechart:before{content:\"\\ebd4\"}.glyph-report-text:before{content:\"\\ebd5\"}.glyph-reset:before{content:\"\\ebd6\"}.glyph-restore-backup-filled:before{content:\"\\ebd7\"}.glyph-restore-backup-pc:before{content:\"\\ebd8\"}.glyph-restore-backup:before{content:\"\\ebd9\"}.glyph-rhomb-filled:before{content:\"\\ebda\"}.glyph-rhomb:before{content:\"\\ebdb\"}.glyph-road-filled:before{content:\"\\ebdc\"}.glyph-road:before{content:\"\\ebdd\"}.glyph-rocket-filled:before{content:\"\\ebde\"}.glyph-rocket:before{content:\"\\ebdf\"}.glyph-route-target:before{content:\"\\ebe0\"}.glyph-route:before{content:\"\\ebe1\"}.glyph-scatterplot:before{content:\"\\ebe2\"}.glyph-scheduler-filled:before{content:\"\\ebe3\"}.glyph-scheduler:before{content:\"\\ebe4\"}.glyph-screen-filled:before{content:\"\\ebe5\"}.glyph-screen:before{content:\"\\ebe6\"}.glyph-screenshot-filled:before{content:\"\\ebe7\"}.glyph-screenshot:before{content:\"\\ebe8\"}.glyph-script-add:before{content:\"\\ebe9\"}.glyph-script:before{content:\"\\ebea\"}.glyph-scripts:before{content:\"\\ebeb\"}.glyph-search:before{content:\"\\ebec\"}.glyph-share-filled:before{content:\"\\ebed\"}.glyph-share:before{content:\"\\ebee\"}.glyph-shopping-cart-filled:before{content:\"\\ebef\"}.glyph-shopping-cart:before{content:\"\\ebf0\"}.glyph-shout-filled:before{content:\"\\ebf1\"}.glyph-shout:before{content:\"\\ebf2\"}.glyph-sign-language:before{content:\"\\ebf3\"}.glyph-signal-strength-0:before{content:\"\\ebf4\"}.glyph-signal-strength-1:before{content:\"\\ebf5\"}.glyph-signal-strength-2:before{content:\"\\ebf6\"}.glyph-signal-strength-3:before{content:\"\\ebf7\"}.glyph-signal-strength-4:before{content:\"\\ebf8\"}.glyph-signal-strength-5:before{content:\"\\ebf9\"}.glyph-signal-strength-6:before{content:\"\\ebfa\"}.glyph-signal-strength-7:before{content:\"\\ebfb\"}.glyph-signal-strength-8:before{content:\"\\ebfc\"}.glyph-simit-component:before{content:\"\\ebfd\"}.glyph-simit-macro-component-editor:before{content:\"\\ebfe\"}.glyph-simit-macro:before{content:\"\\ebff\"}.glyph-single-check:before{content:\"\\ec00\"}.glyph-skip-back-filled:before{content:\"\\ec01\"}.glyph-skip-back:before{content:\"\\ec02\"}.glyph-skip-filled:before{content:\"\\ec03\"}.glyph-skip:before{content:\"\\ec04\"}.glyph-snowflake:before{content:\"\\ec05\"}.glyph-sort-ascending:before{content:\"\\ec06\"}.glyph-sort-descending:before{content:\"\\ec07\"}.glyph-sort:before{content:\"\\ec08\"}.glyph-sound-loud-filled:before{content:\"\\ec09\"}.glyph-sound-loud:before{content:\"\\ec0a\"}.glyph-sound-mute-filled:before{content:\"\\ec0b\"}.glyph-sound-mute:before{content:\"\\ec0c\"}.glyph-sound-off-filled:before{content:\"\\ec0d\"}.glyph-sound-off:before{content:\"\\ec0e\"}.glyph-sound-quiet-filled:before{content:\"\\ec0f\"}.glyph-sound-quiet:before{content:\"\\ec10\"}.glyph-spatial:before{content:\"\\ec11\"}.glyph-split-horizontally:before{content:\"\\ec12\"}.glyph-split-vertically:before{content:\"\\ec13\"}.glyph-standby:before{content:\"\\ec14\"}.glyph-star-add-filled:before{content:\"\\ec15\"}.glyph-star-add:before{content:\"\\ec16\"}.glyph-star-cancelled-filled:before{content:\"\\ec17\"}.glyph-star-cancelled:before{content:\"\\ec18\"}.glyph-star-filled:before{content:\"\\ec19\"}.glyph-star-list-filled:before{content:\"\\ec1a\"}.glyph-star-list:before{content:\"\\ec1b\"}.glyph-star:before{content:\"\\ec1c\"}.glyph-start-data-analysis:before{content:\"\\ec1d\"}.glyph-steering-user-filled:before{content:\"\\ec1e\"}.glyph-steering-user:before{content:\"\\ec1f\"}.glyph-steering:before{content:\"\\ec20\"}.glyph-stethoscope:before{content:\"\\ec21\"}.glyph-stop-filled:before{content:\"\\ec22\"}.glyph-stop:before{content:\"\\ec23\"}.glyph-success-filled:before{content:\"\\ec24\"}.glyph-success:before{content:\"\\ec25\"}.glyph-sun-filled:before{content:\"\\ec26\"}.glyph-sun:before{content:\"\\ec27\"}.glyph-support:before{content:\"\\ec28\"}.glyph-surveillance-filled:before{content:\"\\ec29\"}.glyph-surveillance:before{content:\"\\ec2a\"}.glyph-svg-document:before{content:\"\\ec2b\"}.glyph-swap-left-right:before{content:\"\\ec2c\"}.glyph-switch-slider:before{content:\"\\ec2d\"}.glyph-table-columns:before{content:\"\\ec2e\"}.glyph-table-rows:before{content:\"\\ec2f\"}.glyph-table-settings:before{content:\"\\ec30\"}.glyph-table:before{content:\"\\ec31\"}.glyph-tag-filled:before{content:\"\\ec32\"}.glyph-tag-plus-filled:before{content:\"\\ec33\"}.glyph-tag-plus:before{content:\"\\ec34\"}.glyph-tag:before{content:\"\\ec35\"}.glyph-tasks-all:before{content:\"\\ec36\"}.glyph-tasks-done:before{content:\"\\ec37\"}.glyph-tasks-open:before{content:\"\\ec38\"}.glyph-text-circle-rectangle-filled:before{content:\"\\ec39\"}.glyph-text-circle-rectangle:before{content:\"\\ec3a\"}.glyph-text-document:before{content:\"\\ec3b\"}.glyph-text:before{content:\"\\ec3c\"}.glyph-threshold-cancelled:before{content:\"\\ec3d\"}.glyph-threshold-off:before{content:\"\\ec3e\"}.glyph-threshold-on:before{content:\"\\ec3f\"}.glyph-to-be-published:before{content:\"\\ec40\"}.glyph-to-search:before{content:\"\\ec41\"}.glyph-topic-filled:before{content:\"\\ec42\"}.glyph-topic:before{content:\"\\ec43\"}.glyph-touch-filled:before{content:\"\\ec44\"}.glyph-touch:before{content:\"\\ec45\"}.glyph-trashcan-filled:before{content:\"\\ec46\"}.glyph-trashcan:before{content:\"\\ec47\"}.glyph-tree:before{content:\"\\ec48\"}.glyph-trend:before{content:\"\\ec49\"}.glyph-triangle-filled:before{content:\"\\ec4a\"}.glyph-triangle:before{content:\"\\ec4b\"}.glyph-truck-filled:before{content:\"\\ec4c\"}.glyph-truck:before{content:\"\\ec4d\"}.glyph-tulip-filled:before{content:\"\\ec4e\"}.glyph-tulip:before{content:\"\\ec4f\"}.glyph-txt-document:before{content:\"\\ec50\"}.glyph-undo:before{content:\"\\ec51\"}.glyph-ungroup:before{content:\"\\ec52\"}.glyph-unlock-filled:before{content:\"\\ec53\"}.glyph-unlock-plant-filled:before{content:\"\\ec54\"}.glyph-unlock-plant:before{content:\"\\ec55\"}.glyph-unlock:before{content:\"\\ec56\"}.glyph-upload-document-note:before{content:\"\\ec57\"}.glyph-upload-success:before{content:\"\\ec58\"}.glyph-upload:before{content:\"\\ec59\"}.glyph-upper-limit:before{content:\"\\ec5a\"}.glyph-user-check-filled:before{content:\"\\ec5b\"}.glyph-user-check:before{content:\"\\ec5c\"}.glyph-user-filled:before{content:\"\\ec5d\"}.glyph-user-management-filled:before{content:\"\\ec5e\"}.glyph-user-management:before{content:\"\\ec5f\"}.glyph-user-profile-filled:before{content:\"\\ec60\"}.glyph-user-profile:before{content:\"\\ec61\"}.glyph-user-settings-filled:before{content:\"\\ec62\"}.glyph-user-settings:before{content:\"\\ec63\"}.glyph-user:before{content:\"\\ec64\"}.glyph-validate:before{content:\"\\ec65\"}.glyph-vdi-folder:before{content:\"\\ec66\"}.glyph-version-history:before{content:\"\\ec67\"}.glyph-video-file-filled:before{content:\"\\ec68\"}.glyph-video-file:before{content:\"\\ec69\"}.glyph-warning-filled:before{content:\"\\ec6a\"}.glyph-warning-rhomb-filled:before{content:\"\\ec6b\"}.glyph-warning-rhomb:before{content:\"\\ec6c\"}.glyph-warning:before{content:\"\\ec6d\"}.glyph-water-bathing:before{content:\"\\ec6e\"}.glyph-water-fish:before{content:\"\\ec6f\"}.glyph-water-sunbathing:before{content:\"\\ec70\"}.glyph-waveform:before{content:\"\\ec71\"}.glyph-webcam-filled:before{content:\"\\ec72\"}.glyph-webcam:before{content:\"\\ec73\"}.glyph-wlan-off:before{content:\"\\ec74\"}.glyph-wlan-strength-0:before{content:\"\\ec75\"}.glyph-wlan-strength-1:before{content:\"\\ec76\"}.glyph-wlan-strength-2:before{content:\"\\ec77\"}.glyph-wlan-strength-3:before{content:\"\\ec78\"}.glyph-work-case-filled:before{content:\"\\ec79\"}.glyph-work-case:before{content:\"\\ec7a\"}.glyph-x-axis-settings:before{content:\"\\ec7b\"}.glyph-xls-document:before{content:\"\\ec7c\"}.glyph-xml-document:before{content:\"\\ec7d\"}.glyph-y-axis-settings:before{content:\"\\ec7e\"}.glyph-youtube-filled:before{content:\"\\ec7f\"}.glyph-youtube:before{content:\"\\ec80\"}.glyph-zoom-in:before{content:\"\\ec81\"}.glyph-zoom-out:before{content:\"\\ec82\"}.glyph-zoom-selection:before{content:\"\\ec83\"}:host{display:inline-flex;height:1.5rem;width:1.5rem}:host i{color:inherit;transition:color 150ms}:host .svg-container{display:block;position:relative;width:100%;height:100%}:host .svg-container>svg{height:1.5rem;width:1.5rem}:host .svg-container>svg [fill]{fill:var(--theme-color-std-text)}:host .skeleton-box{display:inline-block;height:1em;position:relative;overflow:hidden;background-color:#dddbdd}:host .skeleton-box::after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background-image:linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{100%{transform:translateX(100%)}}:host(.size-12){height:0.75rem;width:0.75rem}:host(.size-12) .svg-container>svg{height:0.75rem;width:0.75rem}:host(.size-16){height:1rem;width:1rem}:host(.size-16) .svg-container>svg{height:1rem;width:1rem}:host(.size-32){height:2rem;width:2rem}:host(.size-32) .svg-container>svg{height:2rem;width:2rem}";
 
 const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.size = undefined;
     this.color = undefined;
     this.name = undefined;
+    this.src = undefined;
+    this.svgContent = undefined;
+  }
+  connectedCallback() {
+    this.loadIconContent();
+  }
+  async loadIconContent() {
+    this.svgContent = await resolveIcon(this);
   }
   render() {
-    return (h(Host, { style: {
-        color: this.color ? `var(--theme-${this.color})` : 'inherit',
-      }, class: {
+    const style = {};
+    if (this.color) {
+      style['color'] = `var(--theme-${this.color})`;
+    }
+    if (this.name && !this.svgContent) {
+      const iconName = this.name;
+      return (h(Host, { style: style, class: {
+          ['size-12']: this.size === '12',
+          ['size-16']: this.size === '16',
+          ['size-24']: this.size === '24',
+          ['size-32']: this.size === '32',
+        } }, h("i", { class: {
+          'glyph': true,
+          [`glyph-${iconName}`]: true,
+          'glyph-12': this.size === '12',
+          'glyph-16': this.size === '16',
+          'glyph-24': this.size === '24',
+          'glyph-32': this.size === '32',
+        } })));
+    }
+    return (h(Host, { style: style, class: {
         ['size-12']: this.size === '12',
         ['size-16']: this.size === '16',
         ['size-24']: this.size === '24',
         ['size-32']: this.size === '32',
-      } }, h("i", { class: {
-        glyph: true,
-        [`glyph-${this.name}`]: true,
-        'glyph-12': this.size === '12',
-        'glyph-16': this.size === '16',
-        'glyph-24': this.size === '24',
-        'glyph-32': this.size === '32',
-      } }, h("slot", null))));
+      } }, this.svgContent ? (h("div", { class: 'svg-container', innerHTML: this.svgContent })) : (h("span", { class: "skeleton-box", style: {
+        width: '100%',
+        height: '100%',
+      } }))));
   }
+  static get watchers() { return {
+    "src": ["loadIconContent"],
+    "name": ["loadIconContent"]
+  }; }
   static get style() { return iconCss; }
-}, [6, "ix-icon", {
+}, [1, "ix-icon", {
     "size": [1],
     "color": [1],
-    "name": [513]
+    "name": [513],
+    "src": [1],
+    "svgContent": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {