@siemens/ix 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/components/ix-split-button.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './icon-button.js';
 import { d as defineCustomElement$2 } from './spinner.js';
 
-const splitButtonCss = ".btn-group ix-button:first-child .btn{border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:0px}.btn-group ix-button:last-child .btn{border-top-left-radius:0px;border-bottom-left-radius:0px}.btn-group ix-button:not(:first-child):not(:last-child) .btn{border-radius:0px;border-right:0px}:host{display:inline-block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .btn-group{position:relative;display:inline-flex;vertical-align:middle;width:100%}:host .btn-group>ix-button:nth-child(1){width:calc(100% - 2rem)}:host .btn-group>ix-button:nth-child(2){width:2rem}:host .middle-gap{gap:0.125rem}:host .left-button-border{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}";
+const splitButtonCss = ".btn-group ix-button:first-child .btn{border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:0px}.btn-group ix-button:last-child .btn{border-top-left-radius:0px;border-bottom-left-radius:0px}.btn-group ix-button:not(:first-child):not(:last-child) .btn{border-radius:0px;border-right:0px}:host{display:inline-block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .btn-group{position:relative;display:inline-flex;vertical-align:middle;width:100%}:host .btn-group>ix-button:nth-child(1){width:calc(100% - 2rem)}:host .btn-group>ix-button:nth-child(2){width:2rem}:host .middle-gap{gap:0.125rem}:host .left-button-border{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}";
 
 const SplitButton = /*@__PURE__*/ proxyCustomElement(class SplitButton extends HTMLElement {
   constructor() {
@@ -43,9 +43,8 @@ const SplitButton = /*@__PURE__*/ proxyCustomElement(class SplitButton extends H
       class: {
         'left-button-border': !this.outline,
       },
-      onClick: (e) => this.buttonClick.emit(e),
     };
-    return (h(Host, null, h("div", { class: { 'btn-group': true, 'middle-gap': !this.outline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon }))), h("ix-icon-button", Object.assign({}, buttonAttributes, { ref: (r) => (this.triggerElement = r), class: 'anchor', icon: this.splitIcon }))), h("ix-dropdown", { ref: (r) => (this.dropdownElement = r) }, h("slot", null))));
+    return (h(Host, null, h("div", { class: { 'btn-group': true, 'middle-gap': !this.outline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }))), h("ix-icon-button", Object.assign({}, buttonAttributes, { ref: (r) => (this.triggerElement = r), class: 'anchor', icon: this.splitIcon }))), h("ix-dropdown", { ref: (r) => (this.dropdownElement = r) }, h("slot", null))));
   }
   get hostElement() { return this; }
   static get style() { return splitButtonCss; }

package/dist/components/ix-split-button.js.map

@@ -1 +1 @@
-{"file":"ix-split-button.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,qvBAAqvB;;MC6B/vB,WAAW;;;;;;mBAMgB,SAAS;mBAK7B,KAAK;iBAKP,KAAK;;gBAUN,EAAE;qBAKG,cAAc;oBAKf,KAAK;qBAKc,cAAc;kBAElC,KAAK;;EAUvB,IAAI,UAAU;IACZ,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAC1D,CAAC;GACH;EAEO,cAAc;IACpB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE;MAC/C,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;KACpD;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAED,MAAM;IACJ,MAAM,gBAAgB,GAAG;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,KAAK,EAAE;QACL,oBAAoB,EAAE,CAAC,IAAI,CAAC,OAAO;OACpC;MACD,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;KACzC,CAAC;IACF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,IAC3D,IAAI,CAAC,KAAK,IACT,iCAAe,gBAAgB,IAAE,IAAI,EAAE,IAAI,CAAC,IAAI,KAC7C,IAAI,CAAC,KAAK,CACD,KAEZ,sCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,IACC,CACnB,EACD,sCACM,gBAAgB,IACpB,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,IAAI,CAAC,SAAS,IACJ,CACd,EAEN,mBAAa,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IACjD,eAAa,CACD,CACT,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/split-button/split-button.scss?tag=ix-split-button&encapsulation=shadow","./src/components/split-button/split-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@import 'mixins/shadow-dom/component';\n@import 'components/button-group';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n\n  .btn-group {\n    position: relative;\n    display: inline-flex;\n    vertical-align: middle;\n    width: 100%;\n\n    > ix-button:nth-child(1) {\n      width: calc(100% - 2rem);\n    }\n\n    > ix-button:nth-child(2) {\n      width: 2rem;\n    }\n  }\n\n  .middle-gap {\n    gap: 0.125rem;\n  }\n\n  .left-button-border {\n    border-top-width: 0.125rem;\n    border-right-width: 0;\n    border-left-width: 0.125rem;\n    border-bottom-width: 0.125rem;\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\n\nexport type SplitButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-split-button',\n  styleUrl: 'split-button.scss',\n  shadow: true,\n})\nexport class SplitButton {\n  @Element() hostElement!: HTMLIxSplitButtonElement;\n\n  /**\n   * Color variant of button\n   */\n  @Prop() variant: SplitButtonVariant = 'primary';\n\n  /**\n   * Button outline variant\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Button label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon = '';\n\n  /**\n   * Icon of the button on the right\n   */\n  @Prop() splitIcon = 'context-menu';\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  @State() toggle = false;\n\n  /**\n   * Button clicked\n   */\n  @Event() buttonClick: EventEmitter<MouseEvent>;\n\n  private triggerElement: HTMLElement;\n  private dropdownElement: HTMLIxDropdownElement;\n\n  get splitItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-split-button-item')\n    );\n  }\n\n  private linkTriggerRef() {\n    if (this.triggerElement && this.dropdownElement) {\n      this.dropdownElement.trigger = this.triggerElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.linkTriggerRef();\n  }\n\n  render() {\n    const buttonAttributes = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      disabled: this.disabled,\n      class: {\n        'left-button-border': !this.outline,\n      },\n      onClick: (e) => this.buttonClick.emit(e),\n    };\n    return (\n      <Host>\n        <div class={{ 'btn-group': true, 'middle-gap': !this.outline }}>\n          {this.label ? (\n            <ix-button {...buttonAttributes} icon={this.icon}>\n              {this.label}\n            </ix-button>\n          ) : (\n            <ix-icon-button\n              {...buttonAttributes}\n              icon={this.icon}\n            ></ix-icon-button>\n          )}\n          <ix-icon-button\n            {...buttonAttributes}\n            ref={(r) => (this.triggerElement = r)}\n            class={'anchor'}\n            icon={this.splitIcon}\n          ></ix-icon-button>\n        </div>\n\n        <ix-dropdown ref={(r) => (this.dropdownElement = r)}>\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-split-button.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,oxCAAoxC;;MC6B9xC,WAAW;;;;;;mBAMgB,SAAS;mBAK7B,KAAK;iBAKP,KAAK;;gBAUN,EAAE;qBAKG,cAAc;oBAKf,KAAK;qBAKc,cAAc;kBAElC,KAAK;;EAUvB,IAAI,UAAU;IACZ,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAC1D,CAAC;GACH;EAEO,cAAc;IACpB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE;MAC/C,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;KACpD;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAED,MAAM;IACJ,MAAM,gBAAgB,GAAG;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,KAAK,EAAE;QACL,oBAAoB,EAAE,CAAC,IAAI,CAAC,OAAO;OACpC;KACF,CAAC;IACF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,IAC3D,IAAI,CAAC,KAAK,IACT,iCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,KAEvC,IAAI,CAAC,KAAK,CACD,KAEZ,sCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,IACxB,CACnB,EACD,sCACM,gBAAgB,IACpB,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,IAAI,CAAC,SAAS,IACJ,CACd,EAEN,mBAAa,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IACjD,eAAa,CACD,CACT,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/split-button/split-button.scss?tag=ix-split-button&encapsulation=shadow","./src/components/split-button/split-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@import 'mixins/shadow-dom/component';\n@import 'legacy/components/button-group';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n\n  .btn-group {\n    position: relative;\n    display: inline-flex;\n    vertical-align: middle;\n    width: 100%;\n\n    > ix-button:nth-child(1) {\n      width: calc(100% - 2rem);\n    }\n\n    > ix-button:nth-child(2) {\n      width: 2rem;\n    }\n  }\n\n  .middle-gap {\n    gap: 0.125rem;\n  }\n\n  .left-button-border {\n    border-top-width: 0.125rem;\n    border-right-width: 0;\n    border-left-width: 0.125rem;\n    border-bottom-width: 0.125rem;\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\n\nexport type SplitButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-split-button',\n  styleUrl: 'split-button.scss',\n  shadow: true,\n})\nexport class SplitButton {\n  @Element() hostElement!: HTMLIxSplitButtonElement;\n\n  /**\n   * Color variant of button\n   */\n  @Prop() variant: SplitButtonVariant = 'primary';\n\n  /**\n   * Button outline variant\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Button label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon = '';\n\n  /**\n   * Icon of the button on the right\n   */\n  @Prop() splitIcon = 'context-menu';\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  @State() toggle = false;\n\n  /**\n   * Button clicked\n   */\n  @Event() buttonClick: EventEmitter<MouseEvent>;\n\n  private triggerElement: HTMLElement;\n  private dropdownElement: HTMLIxDropdownElement;\n\n  get splitItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-split-button-item')\n    );\n  }\n\n  private linkTriggerRef() {\n    if (this.triggerElement && this.dropdownElement) {\n      this.dropdownElement.trigger = this.triggerElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.linkTriggerRef();\n  }\n\n  render() {\n    const buttonAttributes = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      disabled: this.disabled,\n      class: {\n        'left-button-border': !this.outline,\n      },\n    };\n    return (\n      <Host>\n        <div class={{ 'btn-group': true, 'middle-gap': !this.outline }}>\n          {this.label ? (\n            <ix-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            >\n              {this.label}\n            </ix-button>\n          ) : (\n            <ix-icon-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            ></ix-icon-button>\n          )}\n          <ix-icon-button\n            {...buttonAttributes}\n            ref={(r) => (this.triggerElement = r)}\n            class={'anchor'}\n            icon={this.splitIcon}\n          ></ix-icon-button>\n        </div>\n\n        <ix-dropdown ref={(r) => (this.dropdownElement = r)}>\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-tile.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const tileCss = ":host{min-width:11.937rem;max-width:11.937rem;width:11.937rem;display:flex;flex-direction:column;border:1px solid var(--theme-tile--border);border-radius:var(--theme-tile--border-radius);background-color:var(--theme-color-2);color:var(--theme-color-std-text);box-shadow:var(--theme-tile--box-shadow)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .tile-header{display:flex;align-items:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}:host .tile-header,:host .tile-subheader,:host .tile-content,:host .tile-footer{padding:0 1rem}:host .tile-header,:host .tile-content{flex-grow:1}:host .tile-header.has-content{display:flex;height:2.5rem;max-height:2.5rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}:host .tile-subheader{color:var(--theme-btn-invisible-secondary--color);flex-grow:0}:host .tile-footer.has-content{-webkit-border-before:1px solid var(--theme-color-1);border-block-start:1px solid var(--theme-color-1);height:2.5rem}:host(.tile-small){height:2.5rem;min-height:2.5rem;max-height:2.5rem}:host(.tile-medium){height:5rem;min-height:5rem;max-height:5rem}:host(.tile-big){height:10rem;min-height:10rem;max-height:10rem}:host(:active),:host(:focus-visible),:host(:visited){outline:none}";
+const tileCss = ":host{min-width:11.937rem;max-width:11.937rem;width:11.937rem;display:flex;flex-direction:column;border:1px solid var(--theme-tile--border);border-radius:var(--theme-tile--border-radius);background-color:var(--theme-color-2);color:var(--theme-color-std-text);box-shadow:var(--theme-tile--box-shadow)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tile-header{display:flex;align-items:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}:host .tile-header,:host .tile-subheader,:host .tile-content,:host .tile-footer{padding:0 1rem}:host .tile-header,:host .tile-content{flex-grow:1}:host .tile-header.has-content{display:flex;height:2.5rem;max-height:2.5rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}:host .tile-subheader{color:var(--theme-btn-invisible-secondary--color);flex-grow:0}:host .tile-footer.has-content{-webkit-border-before:1px solid var(--theme-color-1);border-block-start:1px solid var(--theme-color-1);height:2.5rem}:host(.tile-small){height:2.5rem;min-height:2.5rem;max-height:2.5rem}:host(.tile-medium){height:5rem;min-height:5rem;max-height:5rem}:host(.tile-big){height:10rem;min-height:10rem;max-height:10rem}:host(:active),:host(:focus-visible),:host(:visited){outline:none}";
 
 const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
   constructor() {

package/dist/components/ix-tile.js.map

@@ -1 +1 @@
-{"file":"ix-tile.js","mappings":";;AAAA,MAAM,OAAO,GAAG,41CAA41C;;MCgB/1C,IAAI;;;;;gBAM4B,QAAQ;yBAEjB,KAAK;yBACL,KAAK;;EAEvC,sBAAsB;IACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;GAC1E;EAED,sBAAsB;IACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;GAC1E;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;OAChC,IAED,WACE,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,aAAa,EAAE,IAAI,CAAC,aAAa;OAClC,IAED,YACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ,EACN,WAAK,KAAK,EAAC,gBAAgB,IACzB,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,WAAK,KAAK,EAAC,cAAc,IACvB,eAAa,CACT,EACN,WACE,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,aAAa,EAAE,IAAI,CAAC,aAAa;OAClC,IAED,YACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tile/tile.scss?tag=ix-tile&encapsulation=shadow","./src/components/tile/tile.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 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/fonts';\n\n@mixin set-height($height) {\n  height: $height;\n  min-height: $height;\n  max-height: $height;\n}\n\n$heightSmall: 2.5rem;\n$heightMedium: 5rem;\n$heightBig: 10rem;\n$width: 11.937rem;\n\n:host {\n  @include ix-component;\n\n  min-width: $width;\n  max-width: $width;\n  width: $width;\n\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--theme-tile--border);\n  border-radius: var(--theme-tile--border-radius);\n\n  background-color: var(--theme-color-2);\n  color: var(--theme-color-std-text);\n  box-shadow: var(--theme-tile--box-shadow);\n\n  // @each $key, $value in $color-map-status {\n  //   &.tile-#{$key} {\n  //     background-color: #{$value};\n  //     color: automatic-text-color($value, 65);\n  //   }\n  // }\n\n  .tile-header {\n    display: flex;\n    align-items: center;\n\n    @include text-l-title;\n  }\n\n  .tile-header,\n  .tile-subheader,\n  .tile-content,\n  .tile-footer {\n    padding: 0 $default-space;\n  }\n\n  .tile-header,\n  .tile-content {\n    flex-grow: 1;\n  }\n\n  .tile-header.has-content {\n    display: flex;\n    height: $large-control-height;\n    max-height: $large-control-height;\n    padding-inline-end: $small-space;\n  }\n\n  .tile-subheader {\n    color: var(--theme-btn-invisible-secondary--color);\n    flex-grow: 0;\n  }\n\n  .tile-footer.has-content {\n    border-block-start: 1px solid var(--theme-color-1);\n    height: $large-control-height;\n  }\n}\n\n:host(.tile-small) {\n  @include set-height($heightSmall);\n}\n\n:host(.tile-medium) {\n  @include set-height($heightMedium);\n}\n\n:host(.tile-big) {\n  @include set-height($heightBig);\n}\n\n:host(:active),\n:host(:focus-visible),\n:host(:visited) {\n  outline: none;\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, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ix-tile',\n  styleUrl: 'tile.scss',\n  shadow: true,\n})\nexport class Tile {\n  @Element() hostElement: HTMLIxTileElement;\n\n  /**\n   * Size of the tile - one of 'small', 'medium' or 'large'\n   */\n  @Prop() size: 'small' | 'medium' | 'big' = 'medium';\n\n  @State() hasHeaderSlot: boolean = false;\n  @State() hasFooterSlot: boolean = false;\n\n  handleHeaderSlotChange() {\n    this.hasHeaderSlot = !!this.hostElement.querySelector('[slot=\"header\"]');\n  }\n\n  handleFooterSlotChange() {\n    this.hasFooterSlot = !!this.hostElement.querySelector('[slot=\"footer\"]');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'tile-small': this.size === 'small',\n          'tile-medium': this.size === 'medium',\n          'tile-big': this.size === 'big',\n        }}\n      >\n        <div\n          class={{\n            'tile-header': true,\n            'has-content': this.hasHeaderSlot,\n          }}\n        >\n          <slot\n            name=\"header\"\n            onSlotchange={() => this.handleHeaderSlotChange()}\n          ></slot>\n        </div>\n        <div class=\"tile-subheader\">\n          <slot name=\"subheader\"></slot>\n        </div>\n        <div class=\"tile-content\">\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            'tile-footer': true,\n            'has-content': this.hasFooterSlot,\n          }}\n        >\n          <slot\n            name=\"footer\"\n            onSlotchange={() => this.handleFooterSlotChange()}\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-tile.js","mappings":";;AAAA,MAAM,OAAO,GAAG,23DAA23D;;MCgB93D,IAAI;;;;;gBAM4B,QAAQ;yBAEjB,KAAK;yBACL,KAAK;;EAEvC,sBAAsB;IACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;GAC1E;EAED,sBAAsB;IACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;GAC1E;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;OAChC,IAED,WACE,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,aAAa,EAAE,IAAI,CAAC,aAAa;OAClC,IAED,YACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ,EACN,WAAK,KAAK,EAAC,gBAAgB,IACzB,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,WAAK,KAAK,EAAC,cAAc,IACvB,eAAa,CACT,EACN,WACE,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,aAAa,EAAE,IAAI,CAAC,aAAa;OAClC,IAED,YACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tile/tile.scss?tag=ix-tile&encapsulation=shadow","./src/components/tile/tile.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 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n\n@mixin set-height($height) {\n  height: $height;\n  min-height: $height;\n  max-height: $height;\n}\n\n$heightSmall: 2.5rem;\n$heightMedium: 5rem;\n$heightBig: 10rem;\n$width: 11.937rem;\n\n:host {\n  @include ix-component;\n\n  min-width: $width;\n  max-width: $width;\n  width: $width;\n\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--theme-tile--border);\n  border-radius: var(--theme-tile--border-radius);\n\n  background-color: var(--theme-color-2);\n  color: var(--theme-color-std-text);\n  box-shadow: var(--theme-tile--box-shadow);\n\n  // @each $key, $value in $color-map-status {\n  //   &.tile-#{$key} {\n  //     background-color: #{$value};\n  //     color: automatic-text-color($value, 65);\n  //   }\n  // }\n\n  .tile-header {\n    display: flex;\n    align-items: center;\n\n    @include text-l-title;\n  }\n\n  .tile-header,\n  .tile-subheader,\n  .tile-content,\n  .tile-footer {\n    padding: 0 $default-space;\n  }\n\n  .tile-header,\n  .tile-content {\n    flex-grow: 1;\n  }\n\n  .tile-header.has-content {\n    display: flex;\n    height: $large-control-height;\n    max-height: $large-control-height;\n    padding-inline-end: $small-space;\n  }\n\n  .tile-subheader {\n    color: var(--theme-btn-invisible-secondary--color);\n    flex-grow: 0;\n  }\n\n  .tile-footer.has-content {\n    border-block-start: 1px solid var(--theme-color-1);\n    height: $large-control-height;\n  }\n}\n\n:host(.tile-small) {\n  @include set-height($heightSmall);\n}\n\n:host(.tile-medium) {\n  @include set-height($heightMedium);\n}\n\n:host(.tile-big) {\n  @include set-height($heightBig);\n}\n\n:host(:active),\n:host(:focus-visible),\n:host(:visited) {\n  outline: none;\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, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ix-tile',\n  styleUrl: 'tile.scss',\n  shadow: true,\n})\nexport class Tile {\n  @Element() hostElement: HTMLIxTileElement;\n\n  /**\n   * Size of the tile - one of 'small', 'medium' or 'large'\n   */\n  @Prop() size: 'small' | 'medium' | 'big' = 'medium';\n\n  @State() hasHeaderSlot: boolean = false;\n  @State() hasFooterSlot: boolean = false;\n\n  handleHeaderSlotChange() {\n    this.hasHeaderSlot = !!this.hostElement.querySelector('[slot=\"header\"]');\n  }\n\n  handleFooterSlotChange() {\n    this.hasFooterSlot = !!this.hostElement.querySelector('[slot=\"footer\"]');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'tile-small': this.size === 'small',\n          'tile-medium': this.size === 'medium',\n          'tile-big': this.size === 'big',\n        }}\n      >\n        <div\n          class={{\n            'tile-header': true,\n            'has-content': this.hasHeaderSlot,\n          }}\n        >\n          <slot\n            name=\"header\"\n            onSlotchange={() => this.handleHeaderSlotChange()}\n          ></slot>\n        </div>\n        <div class=\"tile-subheader\">\n          <slot name=\"subheader\"></slot>\n        </div>\n        <div class=\"tile-content\">\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            'tile-footer': true,\n            'has-content': this.hasFooterSlot,\n          }}\n        >\n          <slot\n            name=\"footer\"\n            onSlotchange={() => this.handleFooterSlotChange()}\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{ix-animated-tabs.d.ts → ix-toggle-button.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface IxAnimatedTabs extends Components.IxAnimatedTabs, HTMLElement {}
-export const IxAnimatedTabs: {
-  prototype: IxAnimatedTabs;
-  new (): IxAnimatedTabs;
+interface IxToggleButton extends Components.IxToggleButton, HTMLElement {}
+export const IxToggleButton: {
+  prototype: IxToggleButton;
+  new (): IxToggleButton;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/ix-toggle-button.js

@@ -0,0 +1,111 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { B as BaseButton } from './base-button.js';
+import { a as a11yBoolean } from './a11y.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './spinner.js';
+
+const toggleButtonCss = ".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);--ix-button-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-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-primary.hover,.btn-primary:hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.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);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}.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-color-ghost--selected-active);color:var(--theme-color-dynamic)}.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;--ix-button-color:var(--theme-btn-primary--color--disabled)}.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);--ix-button-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-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-primary.hover,.btn-outline-primary:hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.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);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}.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-color-ghost--selected-active);color:var(--theme-color-dynamic)}.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;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}.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);--ix-button-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-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.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);color:var(--theme-btn-invisible-primary--color--active)}.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-color-ghost--selected-active);color:var(--theme-color-dynamic)}.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;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}.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);--ix-button-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-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-secondary.hover,.btn-secondary:hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.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);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}.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-color-ghost--selected-active);color:var(--theme-color-dynamic)}.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;--ix-button-color:var(--theme-btn-secondary--color--disabled)}.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);--ix-button-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-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-secondary.hover,.btn-outline-secondary:hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.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);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}.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-color-ghost--selected-active);color:var(--theme-color-dynamic)}.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;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}.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);--ix-button-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-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.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);color:var(--theme-btn-invisible-secondary--color--active)}.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-color-ghost--selected-active);color:var(--theme-color-dynamic)}.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;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}.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 *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .btn{width:100%;height:100%}:host button:not(:disabled){cursor:pointer}:host(.disabled){pointer-events:none}";
+
+const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.pressedChange = createEvent(this, "pressedChange", 7);
+    this.variant = 'secondary';
+    this.outline = false;
+    this.ghost = false;
+    this.disabled = false;
+    this.loading = false;
+    this.icon = undefined;
+    this.pressed = false;
+  }
+  isIllegalToggleButtonConfig() {
+    return this.variant === 'primary' && (this.outline || this.ghost);
+  }
+  logIllegalConfig() {
+    console.warn('iX toggle button with illegal configuration detected. Variant "primary" can only be combined with "outline" or "ghost".');
+  }
+  onVariantChange() {
+    if (this.isIllegalToggleButtonConfig()) {
+      this.logIllegalConfig();
+    }
+  }
+  onGhostChange() {
+    this.onVariantChange();
+  }
+  onOutlineChange() {
+    this.onVariantChange();
+  }
+  componentDidLoad() {
+    this.onVariantChange();
+  }
+  dispatchPressedChange() {
+    this.pressedChange.emit(!this.pressed);
+  }
+  render() {
+    const baseButtonProps = {
+      variant: this.variant,
+      outline: this.outline,
+      ghost: this.ghost,
+      iconOnly: false,
+      iconOval: false,
+      selected: this.pressed,
+      disabled: this.disabled || this.loading,
+      icon: this.icon,
+      loading: this.loading,
+      onClick: () => this.dispatchPressedChange(),
+      type: 'button',
+      ariaAttributes: {
+        'aria-pressed': a11yBoolean(this.pressed),
+      },
+    };
+    return (h(Host, { class: {
+        disabled: this.disabled || this.loading,
+      } }, h(BaseButton, Object.assign({}, baseButtonProps), h("slot", null))));
+  }
+  static get watchers() { return {
+    "variant": ["onVariantChange"],
+    "ghost": ["onGhostChange"],
+    "outline": ["onOutlineChange"]
+  }; }
+  static get style() { return toggleButtonCss; }
+}, [1, "ix-toggle-button", {
+    "variant": [1],
+    "outline": [4],
+    "ghost": [4],
+    "disabled": [516],
+    "loading": [4],
+    "icon": [1],
+    "pressed": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-toggle-button", "ix-icon", "ix-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-toggle-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ToggleButton);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxToggleButton = ToggleButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxToggleButton, defineCustomElement };
+
+//# sourceMappingURL=ix-toggle-button.js.map

package/dist/components/ix-toggle-button.js.map

@@ -0,0 +1 @@
+{"file":"ix-toggle-button.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,gwaAAgwa;;MC8B3wa,YAAY;;;;;;mBAKU,WAAW;mBAK1B,KAAK;iBAKP,KAAK;oBAKe,KAAK;mBAKd,KAAK;;mBAUd,KAAK;;EAOf,2BAA2B;IACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;GACnE;EAEO,gBAAgB;IACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;GACH;EAGD,eAAe;IACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;MACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;GACF;EAGD,aAAa;IACX,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAGD,eAAe;IACb,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,gBAAgB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAEO,qBAAqB;IAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACxC;EAED,MAAM;IACJ,MAAM,eAAe,GAAoB;MACvC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,IAAI,CAAC,OAAO;MACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;MACvC,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;MAC3C,IAAI,EAAE,QAAQ;MACd,cAAc,EAAE;QACd,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;OAC1C;KACF,CAAC;IAEF,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;OACxC,IAED,EAAC,UAAU,oBAAK,eAAe,GAC7B,eAAa,CACF,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/toggle-button/toggle-button.scss?tag=ix-toggle-button&encapsulation=shadow","./src/components/toggle-button/toggle-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 'legacy/components/buttons';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  width: auto;\n  height: $x-large-space;\n  vertical-align: middle;\n\n  .btn {\n    width: 100%;\n    height: 100%;\n  }\n\n  button:not(:disabled) {\n    cursor: pointer;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\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 {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-toggle-button',\n  shadow: true,\n  styleUrl: './toggle-button.scss',\n})\nexport class ToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange: EventEmitter<boolean>;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n    };\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseButton {...baseButtonProps}>\n          <slot></slot>\n        </BaseButton>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-toggle.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { a as a11yBoolean } from './a11y.js';
 
-const toggleCss = ":host{display:inline-flex;position:relative;height:2rem;justify-content:flex-start;align-items:center;margin-right:0.25rem;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .switch{position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem;margin-right:0.25rem}:host .switch input{opacity:0;width:0;height:0}:host .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:150ms;border-radius:1.5rem}:host .slider:before{position:absolute;content:\"\";height:18px;width:18px;left:4px;bottom:3px;background-color:var(--theme-switch-thumb-off--background);transition:150ms;border-radius:50%}:host input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host input:focus-visible+.switch>.slider{outline:1px solid var(--theme-color-focus-bdr);outline-offset:1px}:host input:checked+.switch>.slider{background-color:var(--theme-switch-on--background)}:host input:checked+.switch>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.35rem)}:host input+.switch:hover>.slider{background-color:var(--theme-switch-off--background--hover)}:host input+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover)}:host input+.switch:active>.slider{background-color:var(--theme-switch-off--background--active)}:host input+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active)}:host input:checked+.switch:hover>.slider{background-color:var(--theme-switch-on--background--hover)}:host input:checked+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover)}:host input:checked+.switch:active>.slider{background-color:var(--theme-switch-on--background--active)}:host input:checked+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active)}:host input:indeterminate+.switch>.slider::before{transform:translateX(0.7rem)}:host .toggle-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.disabled){pointer-events:none}:host(.disabled) input+.switch{opacity:0.5}:host(.disabled) input+.switch>.slider{background-color:var(--theme-switch-off--background--disabled)}:host(.disabled) input+.switch>.slider:before{background-color:var(--theme-switch-thumb-off--background--disabled)}:host(.disabled) input:checked+.switch>.slider{background-color:var(--theme-switch-on--background--disabled)}:host(.disabled) input:checked+.switch>.slider:before{background-color:var(--theme-switch-thumb-on--background--disabled)}:host(.disabled) .toggle-text{color:var(--theme-color-weak-text)}";
+const toggleCss = ":host{display:inline-flex;position:relative;height:2rem;justify-content:flex-start;align-items:center;margin-right:0.25rem;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .switch{position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem;margin-right:0.25rem}:host .switch input{opacity:0;width:0;height:0}:host .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:150ms;border-radius:1.5rem}:host .slider:before{position:absolute;content:\"\";height:18px;width:18px;left:4px;bottom:3px;background-color:var(--theme-switch-thumb-off--background);transition:150ms;border-radius:50%}:host input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host input:focus-visible+.switch>.slider{outline:1px solid var(--theme-color-focus-bdr);outline-offset:1px}:host input:checked+.switch>.slider{background-color:var(--theme-switch-on--background)}:host input:checked+.switch>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.35rem)}:host input+.switch:hover>.slider{background-color:var(--theme-switch-off--background--hover)}:host input+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover)}:host input+.switch:active>.slider{background-color:var(--theme-switch-off--background--active)}:host input+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active)}:host input:checked+.switch:hover>.slider{background-color:var(--theme-switch-on--background--hover)}:host input:checked+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover)}:host input:checked+.switch:active>.slider{background-color:var(--theme-switch-on--background--active)}:host input:checked+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active)}:host input:indeterminate+.switch>.slider::before{transform:translateX(0.7rem)}:host .toggle-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.disabled){pointer-events:none}:host(.disabled) input+.switch{opacity:0.5}:host(.disabled) input+.switch>.slider{background-color:var(--theme-switch-off--background--disabled)}:host(.disabled) input+.switch>.slider:before{background-color:var(--theme-switch-thumb-off--background--disabled)}:host(.disabled) input:checked+.switch>.slider{background-color:var(--theme-switch-on--background--disabled)}:host(.disabled) input:checked+.switch>.slider:before{background-color:var(--theme-switch-thumb-on--background--disabled)}:host(.disabled) .toggle-text{color:var(--theme-color-weak-text)}";
 
 const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement {
   constructor() {

package/dist/components/ix-toggle.js.map

@@ -1 +1 @@
-{"file":"ix-toggle.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,gtFAAgtF;;MC0BrtF,MAAM;;;;;;mBAMiC,KAAK;oBAKpC,KAAK;yBAKgC,KAAK;kBAK5C,IAAI;mBAKH,KAAK;6BAKK,OAAO;oBAKhB,KAAK;;EAOxB,eAAe,CAAC,UAAmB;IACjC,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IACD,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;IAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAElD,aACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,UAAU,kBACD,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EACvC,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,eAAe,CAAE,KAAK,CAAC,MAAc,CAAC,OAAO,CAAC,GAE9C,EACT,aAAO,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,IAChC,YAAM,KAAK,EAAC,QAAQ,GAAQ,CACtB,EACP,CAAC,IAAI,CAAC,QAAQ,IACb,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,IAClB,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CACrC,KAEP,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,iBAAiB,CAClB,CACR,CACQ,IACT,IAAI,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/toggle/toggle.scss?tag=ix-toggle&encapsulation=shadow","./src/components/toggle/toggle.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 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: inline-flex;\n  position: relative;\n  height: 2rem;\n  justify-content: flex-start;\n  align-items: center;\n  margin-right: 0.25rem;\n\n  cursor: pointer;\n\n  .switch {\n    position: relative;\n    display: inline-block;\n    width: 3rem;\n    min-width: 3rem;\n    max-width: 3rem;\n    height: 1.5rem;\n    margin-right: 0.25rem;\n  }\n\n  .switch input {\n    opacity: 0;\n    width: 0;\n    height: 0;\n  }\n\n  .slider {\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--theme-switch-off--background);\n    transition: 150ms;\n    border-radius: 1.5rem;\n  }\n\n  .slider:before {\n    position: absolute;\n    content: '';\n    height: 18px;\n    width: 18px;\n    left: 4px;\n    bottom: 3px;\n    background-color: var(--theme-switch-thumb-off--background);\n    transition: 150ms;\n    border-radius: 50%;\n  }\n\n  input {\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n  }\n\n  input:focus-visible + .switch > .slider {\n    outline: 1px solid var(--theme-color-focus-bdr);\n    outline-offset: 1px;\n  }\n\n  input:checked + .switch > .slider {\n    background-color: var(--theme-switch-on--background);\n  }\n\n  input:checked + .switch > .slider::before {\n    background-color: var(--theme-switch-thumb-on--background);\n    transform: translateX(1.35rem);\n  }\n\n  // Toggle NOT checked\n  input + .switch:hover > .slider {\n    background-color: var(--theme-switch-off--background--hover);\n  }\n\n  input + .switch:hover > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--hover);\n  }\n\n  input + .switch:active > .slider {\n    background-color: var(--theme-switch-off--background--active);\n  }\n\n  input + .switch:active > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--active);\n  }\n\n  // Toggle checked\n  input:checked + .switch:hover > .slider {\n    background-color: var(--theme-switch-on--background--hover);\n  }\n\n  input:checked + .switch:hover > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--hover);\n  }\n\n  input:checked + .switch:active > .slider {\n    background-color: var(--theme-switch-on--background--active);\n  }\n\n  input:checked + .switch:active > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--active);\n  }\n\n  input:indeterminate + .switch > .slider::before {\n    transform: translateX(0.7rem);\n  }\n\n  .toggle-text {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  input + .switch {\n    opacity: 0.5;\n  }\n\n  input + .switch > .slider {\n    background-color: var(--theme-switch-off--background--disabled);\n  }\n\n  input + .switch > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--disabled);\n  }\n\n  input:checked + .switch > .slider {\n    background-color: var(--theme-switch-on--background--disabled);\n  }\n\n  input:checked + .switch > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--disabled);\n  }\n\n  .toggle-text {\n    color: var(--theme-color-weak-text);\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-toggle',\n  styleUrl: 'toggle.scss',\n  shadow: true,\n})\nexport class Toggle {\n  @Element() hostElement!: HTMLIxToggleElement;\n\n  /**\n   * Whether the slide-toggle element is checked or not.\n   */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * Whether the slide-toggle element is disabled or not.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the control is in indeterminate state\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /**\n   * Text for on state\n   */\n  @Prop() textOn = 'On';\n\n  /**\n   * Text for off state\n   */\n  @Prop() textOff = 'Off';\n\n  /**\n   * Text for indeterminate state\n   */\n  @Prop() textIndeterminate = 'Mixed';\n\n  /**\n   * Hide `on` and `off` text\n   */\n  @Prop() hideText = false;\n\n  /**\n   * An event will be dispatched each time the slide-toggle changes its value.\n   */\n  @Event() checkedChange: EventEmitter<boolean>;\n\n  onCheckedChange(newChecked: boolean) {\n    if (this.indeterminate) {\n      this.indeterminate = false;\n    }\n    this.checked = newChecked;\n    this.checkedChange.emit(this.checked);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n        onClick={() => this.onCheckedChange(!this.checked)}\n      >\n        <input\n          disabled={this.disabled}\n          indeterminate={this.indeterminate}\n          checked={this.checked}\n          role=\"switch\"\n          tabindex={0}\n          type=\"checkbox\"\n          aria-checked={a11yBoolean(this.checked)}\n          onChange={(event) =>\n            this.onCheckedChange((event.target as any).checked)\n          }\n        ></input>\n        <label class=\"switch\" tabIndex={-1}>\n          <span class=\"slider\"></span>\n        </label>\n        {!this.hideText ? (\n          <Fragment>\n            {!this.indeterminate ? (\n              <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n                {this.checked ? this.textOn : this.textOff}\n              </span>\n            ) : (\n              <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n                {this.textIndeterminate}\n              </span>\n            )}\n          </Fragment>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-toggle.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,+uGAA+uG;;MC0BpvG,MAAM;;;;;;mBAMiC,KAAK;oBAKpC,KAAK;yBAKgC,KAAK;kBAK5C,IAAI;mBAKH,KAAK;6BAKK,OAAO;oBAKhB,KAAK;;EAOxB,eAAe,CAAC,UAAmB;IACjC,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IACD,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;IAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAElD,aACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,UAAU,kBACD,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EACvC,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,eAAe,CAAE,KAAK,CAAC,MAAc,CAAC,OAAO,CAAC,GAE9C,EACT,aAAO,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,IAChC,YAAM,KAAK,EAAC,QAAQ,GAAQ,CACtB,EACP,CAAC,IAAI,CAAC,QAAQ,IACb,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,IAClB,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CACrC,KAEP,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,iBAAiB,CAClB,CACR,CACQ,IACT,IAAI,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/toggle/toggle.scss?tag=ix-toggle&encapsulation=shadow","./src/components/toggle/toggle.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 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: inline-flex;\n  position: relative;\n  height: 2rem;\n  justify-content: flex-start;\n  align-items: center;\n  margin-right: 0.25rem;\n\n  cursor: pointer;\n\n  .switch {\n    position: relative;\n    display: inline-block;\n    width: 3rem;\n    min-width: 3rem;\n    max-width: 3rem;\n    height: 1.5rem;\n    margin-right: 0.25rem;\n  }\n\n  .switch input {\n    opacity: 0;\n    width: 0;\n    height: 0;\n  }\n\n  .slider {\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--theme-switch-off--background);\n    transition: 150ms;\n    border-radius: 1.5rem;\n  }\n\n  .slider:before {\n    position: absolute;\n    content: '';\n    height: 18px;\n    width: 18px;\n    left: 4px;\n    bottom: 3px;\n    background-color: var(--theme-switch-thumb-off--background);\n    transition: 150ms;\n    border-radius: 50%;\n  }\n\n  input {\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n  }\n\n  input:focus-visible + .switch > .slider {\n    outline: 1px solid var(--theme-color-focus-bdr);\n    outline-offset: 1px;\n  }\n\n  input:checked + .switch > .slider {\n    background-color: var(--theme-switch-on--background);\n  }\n\n  input:checked + .switch > .slider::before {\n    background-color: var(--theme-switch-thumb-on--background);\n    transform: translateX(1.35rem);\n  }\n\n  // Toggle NOT checked\n  input + .switch:hover > .slider {\n    background-color: var(--theme-switch-off--background--hover);\n  }\n\n  input + .switch:hover > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--hover);\n  }\n\n  input + .switch:active > .slider {\n    background-color: var(--theme-switch-off--background--active);\n  }\n\n  input + .switch:active > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--active);\n  }\n\n  // Toggle checked\n  input:checked + .switch:hover > .slider {\n    background-color: var(--theme-switch-on--background--hover);\n  }\n\n  input:checked + .switch:hover > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--hover);\n  }\n\n  input:checked + .switch:active > .slider {\n    background-color: var(--theme-switch-on--background--active);\n  }\n\n  input:checked + .switch:active > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--active);\n  }\n\n  input:indeterminate + .switch > .slider::before {\n    transform: translateX(0.7rem);\n  }\n\n  .toggle-text {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  input + .switch {\n    opacity: 0.5;\n  }\n\n  input + .switch > .slider {\n    background-color: var(--theme-switch-off--background--disabled);\n  }\n\n  input + .switch > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--disabled);\n  }\n\n  input:checked + .switch > .slider {\n    background-color: var(--theme-switch-on--background--disabled);\n  }\n\n  input:checked + .switch > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--disabled);\n  }\n\n  .toggle-text {\n    color: var(--theme-color-weak-text);\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-toggle',\n  styleUrl: 'toggle.scss',\n  shadow: true,\n})\nexport class Toggle {\n  @Element() hostElement!: HTMLIxToggleElement;\n\n  /**\n   * Whether the slide-toggle element is checked or not.\n   */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * Whether the slide-toggle element is disabled or not.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the control is in indeterminate state\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /**\n   * Text for on state\n   */\n  @Prop() textOn = 'On';\n\n  /**\n   * Text for off state\n   */\n  @Prop() textOff = 'Off';\n\n  /**\n   * Text for indeterminate state\n   */\n  @Prop() textIndeterminate = 'Mixed';\n\n  /**\n   * Hide `on` and `off` text\n   */\n  @Prop() hideText = false;\n\n  /**\n   * An event will be dispatched each time the slide-toggle changes its value.\n   */\n  @Event() checkedChange: EventEmitter<boolean>;\n\n  onCheckedChange(newChecked: boolean) {\n    if (this.indeterminate) {\n      this.indeterminate = false;\n    }\n    this.checked = newChecked;\n    this.checkedChange.emit(this.checked);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n        onClick={() => this.onCheckedChange(!this.checked)}\n      >\n        <input\n          disabled={this.disabled}\n          indeterminate={this.indeterminate}\n          checked={this.checked}\n          role=\"switch\"\n          tabindex={0}\n          type=\"checkbox\"\n          aria-checked={a11yBoolean(this.checked)}\n          onChange={(event) =>\n            this.onCheckedChange((event.target as any).checked)\n          }\n        ></input>\n        <label class=\"switch\" tabIndex={-1}>\n          <span class=\"slider\"></span>\n        </label>\n        {!this.hideText ? (\n          <Fragment>\n            {!this.indeterminate ? (\n              <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n                {this.checked ? this.textOn : this.textOff}\n              </span>\n            ) : (\n              <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n                {this.textIndeterminate}\n              </span>\n            )}\n          </Fragment>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-tree.js

@@ -506,12 +506,13 @@ module.exports = exports['default'];
 
 const Hyperlist = /*@__PURE__*/getDefaultExportFromCjs(hyperlist);
 
-const treeCss = ".sc-ix-tree-h{display:block}";
+const treeCss = ":host{display:block}";
 
 const Tree = /*@__PURE__*/ proxyCustomElement(class Tree extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.contextChange = createEvent(this, "contextChange", 7);
     this.nodeToggled = createEvent(this, "nodeToggled", 7);
     this.nodeClicked = createEvent(this, "nodeClicked", 7);
@@ -525,6 +526,9 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class Tree extends HTMLElement {
     this.renderItem = undefined;
     this.context = {};
   }
+  updatePadding(element, item) {
+    element.style.paddingLeft = item.level + 'rem';
+  }
   getVirtualizerOptions() {
     const list = this.buildTreeList(this.model[this.root]);
     let setToggleListener = (item, el, index) => {
@@ -546,7 +550,7 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class Tree extends HTMLElement {
       total: list.length,
       generate: (index) => {
         const item = list[index];
-        const renderedTreeItem = this.host.querySelector(`[data-tree-node-id="${item.id}"]`);
+        const renderedTreeItem = this.hostElement.querySelector(`[data-tree-node-id="${item.id}"]`);
         const context = this.getContext(item.id);
         if (renderedTreeItem) {
           renderedTreeItem.hasChildren = item.hasChildren;
@@ -556,6 +560,7 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class Tree extends HTMLElement {
             const doUpdate = this.updates.get(item.id);
             doUpdate(item, Object.assign({}, this.context));
           }
+          this.updatePadding(renderedTreeItem, item);
           return renderedTreeItem;
         }
         const update = (callback) => {
@@ -570,8 +575,8 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class Tree extends HTMLElement {
         }
         const el = innerElement;
         el.setAttribute('data-tree-node-id', item.id);
-        el.style.paddingLeft = item.level + 'rem';
         el.style.paddingRight = '1rem';
+        this.updatePadding(el, item);
         if (!this.itemClickListener.has(el)) {
           const itemClickCallback = (e) => {
             e.preventDefault();
@@ -639,7 +644,7 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class Tree extends HTMLElement {
       });
       this.nodeRemoved.emit(removed);
     });
-    this.observer.observe(this.host, {
+    this.observer.observe(this.hostElement, {
       childList: true,
     });
   }
@@ -670,24 +675,27 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class Tree extends HTMLElement {
   }
   refreshList() {
     if (this.hyperlist) {
-      this.hyperlist.refresh(this.host, this.getVirtualizerOptions());
+      this.hyperlist.refresh(this.hostElement, this.getVirtualizerOptions());
     }
   }
   initList() {
     var _a;
+    if (!this.model) {
+      return;
+    }
     (_a = this.hyperlist) === null || _a === void 0 ? void 0 : _a.destroy();
     const config = this.getVirtualizerOptions();
-    this.hyperlist = new Hyperlist(this.host, config);
+    this.hyperlist = new Hyperlist(this.hostElement, config);
   }
   render() {
     return (h(Host, null, h("slot", null)));
   }
-  get host() { return this; }
+  get hostElement() { return this; }
   static get watchers() { return {
     "model": ["modelChange"]
   }; }
   static get style() { return treeCss; }
-}, [6, "ix-tree", {
+}, [1, "ix-tree", {
     "root": [1],
     "model": [16],
     "renderItem": [16],