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

package/dist/components/ix-group.js

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { c as createMutationObserver } from './mutation-observer.js';
-import { h as hasSlottedElements, d as defineCustomElement$6 } from './group-context-menu.js';
+import { h as hasSlottedElements } from './shadow-dom.js';
+import { d as defineCustomElement$6 } from './group-context-menu.js';
 import { d as defineCustomElement$5 } from './group-item.js';
 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 groupCss = ":host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;position:relative;max-width:19.75rem;border-color:var(--theme-group-item--border-color)}:host .group-header{height:4rem;min-height:4rem;max-height:4rem;border-radius:var(--theme-group--border-radius) var(--theme-group--border-radius) 0 0;display:flex;background-color:var(--theme-group-item--background);color:var(--theme-group-header--color);cursor:pointer}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-group-item--background--hover)}:host .group-header:not(.disabled):not(:disabled):hover.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):active{background-color:var(--theme-group-item--background--active)}:host .group-header:not(.disabled):not(:disabled):active.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled):focus-visible{border:1px solid var(--theme-color-focus-bdr);border-radius:var(--theme-default-border-radius) var(--theme-default-border-radius) 0px 0px;outline:none}:host .group-header.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header.selected .group-header-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header .group-header-selection-indicator{background-color:var(--theme-color-input--focus)}:host .group-header .group-header-selection-indicator.group-header-selection-indicator-item-selected{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header-clickable{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;width:100%;min-width:0}:host .group-header-selection-indicator{width:0.25rem;border-top-left-radius:var(--theme-group--border-radius)}:host .group-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:row;justify-content:space-between;min-width:0;flex-grow:1;padding:0.5rem;padding-left:0}:host .group-header-content .group-header-props-container{width:100%}:host .group-header-content .group-header-title{display:flex;align-items:center;font-size:1rem;font-weight:700;height:1.5rem}:host .group-header-content .group-header-title>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}:host .group-header-content .group-subheader{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color)}:host .expand-icon{padding:0.125rem 0.437rem;color:var(--theme-color-std-text)}:host .btn-expand-header{margin:0.5rem;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem;min-width:1.5rem}:host .group-content{display:flex;flex-direction:column;gap:1px;margin-top:1px}:host .footer{visibility:collapse;height:auto;min-height:0}:host .footer-visible{visibility:visible}:host .hidden{display:none}";
+const groupCss = ":host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;position:relative;max-width:19.75rem;border-color:var(--theme-group-item--border-color)}:host .group-header{height:4rem;min-height:4rem;max-height:4rem;border-radius:var(--theme-group--border-radius) var(--theme-group--border-radius) 0 0;display:flex;background-color:var(--theme-group-item--background);color:var(--theme-group-header--color);cursor:pointer}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-group-item--background--hover)}:host .group-header:not(.disabled):not(:disabled):hover.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):active,:host .group-header:not(.disabled):not(:disabled).active{background-color:var(--theme-group-item--background--active)}:host .group-header:not(.disabled):not(:disabled):active.selected,:host .group-header:not(.disabled):not(:disabled).active.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled):focus-visible{border:1px solid var(--theme-color-focus-bdr);border-radius:var(--theme-default-border-radius) var(--theme-default-border-radius) 0px 0px;outline:none}:host .group-header.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header.selected .group-header-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header .group-header-selection-indicator{background-color:var(--theme-color-input--focus)}:host .group-header .group-header-selection-indicator.group-header-selection-indicator-item-selected{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header-clickable{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;width:100%;min-width:0}:host .group-header-selection-indicator{width:0.25rem;border-top-left-radius:var(--theme-group--border-radius)}:host .group-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:row;justify-content:space-between;min-width:0;flex-grow:1;padding:0.5rem;padding-left:0}:host .group-header-content .group-header-props-container{width:100%}:host .group-header-content .group-header-title{display:flex;align-items:center;font-size:1rem;font-weight:700;height:1.5rem}:host .group-header-content .group-header-title>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}:host .group-header-content .group-subheader{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color)}:host .expand-icon{padding:0.125rem 0.437rem;color:var(--theme-color-std-text)}:host .btn-expand-header{margin:0.5rem;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem;min-width:1.5rem}:host .group-content{display:flex;flex-direction:column;gap:1px;margin-top:1px}:host .footer{visibility:collapse;height:auto;min-height:0}:host .footer-visible{visibility:visible}:host .hidden{display:none}";
 
 const Group = /*@__PURE__*/ proxyCustomElement(class Group extends HTMLElement {
   constructor() {

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

@@ -1 +1 @@
-{"file":"ix-group.js","mappings":"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","names":[],"sources":["./src/components/group/group.scss?tag=ix-group&encapsulation=shadow","./src/components/group/group.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/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ellipsis;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  max-width: 19.75rem;\n  border-color: var(--theme-group-item--border-color);\n\n  .group-header {\n    height: 4rem;\n    min-height: 4rem;\n    max-height: 4rem;\n    border-radius: var(--theme-group--border-radius)\n      var(--theme-group--border-radius) 0 0;\n    display: flex;\n    background-color: var(--theme-group-item--background);\n    color: var(--theme-group-header--color);\n\n    cursor: pointer;\n\n    @include hover {\n      background-color: var(--theme-group-item--background--hover);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include focus-visible {\n      border: 1px solid var(--theme-color-focus-bdr);\n      border-radius: var(--theme-default-border-radius)\n        var(--theme-default-border-radius) 0px 0px;\n      outline: none;\n    }\n\n    &.selected {\n      background-color: var(--theme-group-item--background--selected);\n\n      .group-header-selection-indicator {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n\n    .group-header-selection-indicator {\n      background-color: var(--theme-color-input--focus);\n\n      &.group-header-selection-indicator-item-selected {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n  }\n\n  .group-header-clickable {\n    @include ellipsis;\n\n    display: flex;\n    width: 100%;\n    min-width: 0;\n  }\n\n  .group-header-selection-indicator {\n    width: $tiny-space;\n    border-top-left-radius: var(--theme-group--border-radius);\n  }\n\n  .group-header-content {\n    @include ellipsis;\n\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    min-width: 0;\n    flex-grow: 1;\n    padding: 0.5rem;\n    padding-left: 0;\n\n    .group-header-props-container {\n      width: 100%;\n    }\n\n    .group-header-title {\n      display: flex;\n      align-items: center;\n      font-size: 1rem;\n      font-weight: $font-weight-bold;\n      height: 1.5rem;\n\n      & > * {\n        @include ellipsis;\n\n        min-width: 0;\n      }\n    }\n\n    .group-subheader {\n      @include ellipsis();\n\n      height: 1.25rem;\n      font-size: 0.875rem;\n      color: var(--theme-group-subheader--color);\n    }\n  }\n\n  .expand-icon {\n    padding: 0.125rem 0.437rem;\n    color: var(--theme-color-std-text);\n  }\n\n  .btn-expand-header {\n    margin: $small-space;\n    margin-inline-end: $tiny-space;\n    min-width: 1.5rem;\n  }\n\n  .group-content {\n    display: flex;\n    flex-direction: column;\n    gap: 1px;\n    margin-top: 1px;\n  }\n\n  .footer {\n    visibility: collapse;\n    height: auto;\n    min-height: 0;\n  }\n\n  .footer-visible {\n    visibility: visible;\n  }\n\n  .hidden {\n    display: none;\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  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  shadow: true,\n})\nexport class Group {\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected: boolean;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged: EventEmitter<boolean>;\n\n  @State() itemSelected = false;\n  @State() dropdownTriggerRef: HTMLElement;\n  @State() slotSize = this.groupItems.length;\n  @State() footerVisible = false;\n\n  private observer: MutationObserver;\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.shadowRoot.querySelector('.group-content');\n  }\n\n  private onExpandClick(event: Event) {\n    this.collapsed = !this.collapsed;\n\n    this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n  }\n\n  private onHeaderClick(event: Event) {\n    this.setGroupSelection(!this.selected);\n\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n    }\n  }\n\n  private onItemClick(index: number) {\n    if (index === this.index) {\n      this.index = undefined;\n      this.selectItem.emit(undefined);\n    } else {\n      this.index = index;\n      this.selectItem.emit(index);\n    }\n\n    if (this.index >= 0) {\n      this.itemSelected = true;\n    } else this.itemSelected = false;\n\n    this.setGroupSelection(false);\n  }\n\n  private setGroupSelection(selection: boolean) {\n    if (!this.suppressHeaderSelection) {\n      this.selected = selection;\n      this.selectGroup.emit(this.selected);\n    }\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"footer\"]'\n    );\n\n    if (slot) {\n      this.footerVisible = hasSlottedElements(slot);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      if (this.selected === true) {\n        item.selected = false;\n        this.index = undefined;\n        this.itemSelected = false;\n        return;\n      }\n      item.selected = index === this.index;\n      item.index = index;\n    });\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => {\n      this.slotSize = this.groupItems.length;\n    });\n\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n\n    this.groupContent.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        this.onItemClick(evt.detail.index);\n      }\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div\n              class={{\n                'group-header-selection-indicator': true,\n                'group-header-selection-indicator-item-selected':\n                  this.itemSelected,\n              }}\n            ></div>\n            <div class=\"btn-expand-header\">\n              <ix-icon\n                class={{\n                  hidden: this.slotSize === 0,\n                }}\n                name={`chevron-${this.collapsed ? 'right' : 'down'}-small`}\n                onClick={(e) => this.onExpandClick(e)}\n              ></ix-icon>\n            </div>\n\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n          }}\n        >\n          {!this.collapsed ? (\n            <Fragment>\n              <slot></slot>\n              <ix-group-item\n                suppressSelection={true}\n                focusable={false}\n                class={{\n                  footer: true,\n                  'footer-visible': this.footerVisible,\n                }}\n              >\n                <slot\n                  name=\"footer\"\n                  onSlotchange={() => this.onSlotChange()}\n                ></slot>\n              </ix-group-item>\n            </Fragment>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-group.js","mappings":"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","names":[],"sources":["./src/components/group/group.scss?tag=ix-group&encapsulation=shadow","./src/components/group/group.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/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ellipsis;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  max-width: 19.75rem;\n  border-color: var(--theme-group-item--border-color);\n\n  .group-header {\n    height: 4rem;\n    min-height: 4rem;\n    max-height: 4rem;\n    border-radius: var(--theme-group--border-radius)\n      var(--theme-group--border-radius) 0 0;\n    display: flex;\n    background-color: var(--theme-group-item--background);\n    color: var(--theme-group-header--color);\n\n    cursor: pointer;\n\n    @include hover {\n      background-color: var(--theme-group-item--background--hover);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include focus-visible {\n      border: 1px solid var(--theme-color-focus-bdr);\n      border-radius: var(--theme-default-border-radius)\n        var(--theme-default-border-radius) 0px 0px;\n      outline: none;\n    }\n\n    &.selected {\n      background-color: var(--theme-group-item--background--selected);\n\n      .group-header-selection-indicator {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n\n    .group-header-selection-indicator {\n      background-color: var(--theme-color-input--focus);\n\n      &.group-header-selection-indicator-item-selected {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n  }\n\n  .group-header-clickable {\n    @include ellipsis;\n\n    display: flex;\n    width: 100%;\n    min-width: 0;\n  }\n\n  .group-header-selection-indicator {\n    width: $tiny-space;\n    border-top-left-radius: var(--theme-group--border-radius);\n  }\n\n  .group-header-content {\n    @include ellipsis;\n\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    min-width: 0;\n    flex-grow: 1;\n    padding: 0.5rem;\n    padding-left: 0;\n\n    .group-header-props-container {\n      width: 100%;\n    }\n\n    .group-header-title {\n      display: flex;\n      align-items: center;\n      font-size: 1rem;\n      font-weight: $font-weight-bold;\n      height: 1.5rem;\n\n      & > * {\n        @include ellipsis;\n\n        min-width: 0;\n      }\n    }\n\n    .group-subheader {\n      @include ellipsis();\n\n      height: 1.25rem;\n      font-size: 0.875rem;\n      color: var(--theme-group-subheader--color);\n    }\n  }\n\n  .expand-icon {\n    padding: 0.125rem 0.437rem;\n    color: var(--theme-color-std-text);\n  }\n\n  .btn-expand-header {\n    margin: $small-space;\n    margin-inline-end: $tiny-space;\n    min-width: 1.5rem;\n  }\n\n  .group-content {\n    display: flex;\n    flex-direction: column;\n    gap: 1px;\n    margin-top: 1px;\n  }\n\n  .footer {\n    visibility: collapse;\n    height: auto;\n    min-height: 0;\n  }\n\n  .footer-visible {\n    visibility: visible;\n  }\n\n  .hidden {\n    display: none;\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  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  shadow: true,\n})\nexport class Group {\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected: boolean;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged: EventEmitter<boolean>;\n\n  @State() itemSelected = false;\n  @State() dropdownTriggerRef: HTMLElement;\n  @State() slotSize = this.groupItems.length;\n  @State() footerVisible = false;\n\n  private observer: MutationObserver;\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.shadowRoot.querySelector('.group-content');\n  }\n\n  private onExpandClick(event: Event) {\n    this.collapsed = !this.collapsed;\n\n    this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n  }\n\n  private onHeaderClick(event: Event) {\n    this.setGroupSelection(!this.selected);\n\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n    }\n  }\n\n  private onItemClick(index: number) {\n    if (index === this.index) {\n      this.index = undefined;\n      this.selectItem.emit(undefined);\n    } else {\n      this.index = index;\n      this.selectItem.emit(index);\n    }\n\n    if (this.index >= 0) {\n      this.itemSelected = true;\n    } else this.itemSelected = false;\n\n    this.setGroupSelection(false);\n  }\n\n  private setGroupSelection(selection: boolean) {\n    if (!this.suppressHeaderSelection) {\n      this.selected = selection;\n      this.selectGroup.emit(this.selected);\n    }\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"footer\"]'\n    );\n\n    if (slot) {\n      this.footerVisible = hasSlottedElements(slot);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      if (this.selected === true) {\n        item.selected = false;\n        this.index = undefined;\n        this.itemSelected = false;\n        return;\n      }\n      item.selected = index === this.index;\n      item.index = index;\n    });\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => {\n      this.slotSize = this.groupItems.length;\n    });\n\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n\n    this.groupContent.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        this.onItemClick(evt.detail.index);\n      }\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div\n              class={{\n                'group-header-selection-indicator': true,\n                'group-header-selection-indicator-item-selected':\n                  this.itemSelected,\n              }}\n            ></div>\n            <div class=\"btn-expand-header\">\n              <ix-icon\n                class={{\n                  hidden: this.slotSize === 0,\n                }}\n                name={`chevron-${this.collapsed ? 'right' : 'down'}-small`}\n                onClick={(e) => this.onExpandClick(e)}\n              ></ix-icon>\n            </div>\n\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n          }}\n        >\n          {!this.collapsed ? (\n            <Fragment>\n              <slot></slot>\n              <ix-group-item\n                suppressSelection={true}\n                focusable={false}\n                class={{\n                  footer: true,\n                  'footer-visible': this.footerVisible,\n                }}\n              >\n                <slot\n                  name=\"footer\"\n                  onSlotchange={() => this.onSlotChange()}\n                ></slot>\n              </ix-group-item>\n            </Fragment>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-icon-toggle-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IxIconToggleButton extends Components.IxIconToggleButton, HTMLElement {}
+export const IxIconToggleButton: {
+  prototype: IxIconToggleButton;
+  new (): IxIconToggleButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,122 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { B as BaseIconButton } from './base-icon-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 iconToggleButtonCss = ":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}: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 button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host(.disabled){cursor:default}*,*::after,*::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}::-webkit-scrollbar-corner{display:none}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .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}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;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)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .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}:host .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)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{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)}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;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)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .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}:host .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)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;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)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .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}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;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)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .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}:host .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)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{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)}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;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)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .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}:host .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)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;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)}:host{display:inline-flex;justify-content:center;align-items:center}:host button{width:100%;height:100%;overflow:hidden;padding:0}:host button.btn-oval{border-radius:6.25rem}:host ix-icon{color:var(--ix-icon-button-color);margin:0}:host ix-spinner{margin:0}:host(.btn-icon-12){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host(.btn-icon-16){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host(.btn-icon-32){height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host(.btn-icon-12) ix-spinner{height:12px;width:12px}:host(.btn-icon-16) ix-spinner{height:16px;width:16px}:host(.btn-icon-32) ix-spinner{height:24px;width:24px}";
+
+const IconToggleButton = /*@__PURE__*/ proxyCustomElement(class IconToggleButton extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.pressedChange = createEvent(this, "pressedChange", 7);
+    this.variant = 'secondary';
+    this.outline = false;
+    this.ghost = false;
+    this.icon = undefined;
+    this.pressed = false;
+    this.size = '24';
+    this.disabled = false;
+    this.loading = 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);
+  }
+  getIconSizeClass() {
+    return {
+      'btn-icon-12': this.size === '12',
+      'btn-icon-16': this.size === '16',
+      'btn-icon-32': this.size === '24',
+    };
+  }
+  render() {
+    const baseButtonProps = {
+      variant: this.variant,
+      outline: this.outline,
+      ghost: this.ghost,
+      iconOnly: true,
+      iconOval: false,
+      selected: this.pressed,
+      disabled: this.disabled || this.loading,
+      icon: this.icon,
+      iconSize: this.size,
+      loading: this.loading,
+      onClick: () => this.dispatchPressedChange(),
+      type: 'button',
+      ariaAttributes: {
+        'aria-pressed': a11yBoolean(this.pressed),
+      },
+      extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
+    };
+    console.log(baseButtonProps, this.disabled, this.loading);
+    return (h(Host, { class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({}, baseButtonProps))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "variant": ["onVariantChange"],
+    "ghost": ["onGhostChange"],
+    "outline": ["onOutlineChange"]
+  }; }
+  static get style() { return iconToggleButtonCss; }
+}, [1, "ix-icon-toggle-button", {
+    "variant": [1],
+    "outline": [4],
+    "ghost": [4],
+    "icon": [1],
+    "pressed": [4],
+    "size": [1],
+    "disabled": [516],
+    "loading": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-icon-toggle-button", "ix-icon", "ix-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-icon-toggle-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, IconToggleButton);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxIconToggleButton = IconToggleButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxIconToggleButton, defineCustomElement };
+
+//# sourceMappingURL=ix-icon-toggle-button.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-icon-toggle-button.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,24fAA24f;;MCgC15f,gBAAgB;;;;;;mBAKM,WAAW;mBAK1B,KAAK;iBAKP,KAAK;;mBAUH,KAAK;gBAKY,IAAI;oBAKH,KAAK;mBAKd,KAAK;;EASxB,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;EAEO,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;KAClC,CAAC;GACH;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,IAAI;MACd,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,QAAQ,EAAE,IAAI,CAAC,IAAI;MACnB,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;MACD,YAAY,kBACV,aAAa,EAAE,IAAI,IAChB,IAAI,CAAC,gBAAgB,EAAE,CAC3B;KACF,CAAC;IACF,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAE1D,QACE,EAAC,IAAI,IACH,KAAK,kCACA,IAAI,CAAC,gBAAgB,EAAE,KAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,OAGzC,EAAC,cAAc,oBAAK,eAAe,EAAmB,CACjD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/icon-toggle-button/icon-toggle-button.scss?tag=ix-icon-toggle-button&encapsulation=shadow","./src/components/icon-toggle-button/icon-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 '../icon-button/icon-button-mixin.scss';\n\n@include base-icon-button;\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  Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-icon-toggle-button',\n  shadow: true,\n  styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange: EventEmitter<boolean>;\n\n  @Element() hostElement: HTMLIxIconToggleButtonElement;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24',\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n      extraClasses: {\n        'icon-button': true,\n        ...this.getIconSizeClass(),\n      },\n    };\n    console.log(baseButtonProps, this.disabled, this.loading);\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-input-group.js

@@ -1,38 +1,109 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getSlottedElements } from './shadow-dom.js';
 
-const inputGroupCss = ".sc-ix-input-group-h{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.sc-ix-input-group-h .group.sc-ix-input-group{display:flex;position:absolute;align-items:center;height:100%}.sc-ix-input-group-h .group-start.sc-ix-input-group{left:0px;height:2rem}.sc-ix-input-group-h .group-end.sc-ix-input-group{right:0px;height:2rem}.sc-ix-input-group-h .sc-ix-input-group-s>*{display:flex}";
+const inputGroupCss = ":host{position:relative;display:flex;width:100%;flex-wrap:wrap;align-items:stretch}: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 .group{display:flex;position:absolute;align-items:center;height:100%}:host .group-start{left:0px;height:2rem;margin-left:0.375rem;color:var(--theme-color-soft-text)}:host .group-end{right:0px;height:2rem;margin-right:0.375rem;color:var(--theme-color-soft-text)}:host ::slotted(*){display:flex}";
 
 const InputGroup = /*@__PURE__*/ proxyCustomElement(class InputGroup extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
+    this.inputPaddingLeft = 0;
+    this.inputPaddingRight = 0;
   }
-  componentDidRender() {
-    let paddingRight = 15;
-    let paddingLeft = 15;
-    this.host.querySelectorAll('[slot="input-end"]').forEach((item) => {
-      item.classList.add('input-group-label');
-      paddingRight += item.getBoundingClientRect().width;
+  get inputElement() {
+    return this.hostElement.querySelector('input');
+  }
+  componentWillLoad() {
+    var _a;
+    const { valid } = this.inputElement.validity;
+    this.inputElement.addEventListener('valid', () => {
+      this.onValidInput();
+    });
+    this.inputElement.addEventListener('invalid', () => {
+      this.onInvalidInput();
     });
-    this.host.querySelectorAll('[slot="input-start"]').forEach((item) => {
-      item.classList.add('input-group-label');
-      paddingLeft += item.getBoundingClientRect().width;
+    this.inputElement.addEventListener('input', () => {
+      this.startSlotChanged();
     });
-    const inputElement = this.host.querySelector('input.form-control');
-    if (inputElement) {
-      inputElement.style.paddingRight = paddingRight + 'px';
-      inputElement.style.paddingLeft = paddingLeft + 'px';
+    (_a = this.inputElement.form) === null || _a === void 0 ? void 0 : _a.addEventListener('submit', () => {
+      this.startSlotChanged();
+    });
+    valid ? this.onValidInput() : this.onInvalidInput();
+  }
+  componentDidRender() {
+    this.prepareInputElement();
+  }
+  onValidInput() {
+    this.startSlotChanged();
+  }
+  onInvalidInput() {
+    this.startSlotChanged();
+  }
+  prepareInputElement() {
+    if (this.inputElement) {
+      this.inputElement.style.width = '100%';
+      if (this.inputPaddingRight !== 0) {
+        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';
+      }
+      else {
+        this.inputElement.style.paddingRight = 'none';
+      }
+      if (this.inputPaddingLeft !== 0) {
+        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';
+      }
+      else {
+        this.inputElement.style.paddingLeft = 'none';
+      }
     }
     else {
-      console.warn('You used the ix-input-group without an input-tag, e.g. <input class="form-control" />');
+      console.warn('You used the ix-input-group without an input tag, e.g. <input class="form-control" />');
+    }
+  }
+  startSlotChanged() {
+    var _a, _b;
+    const slot = this.hostElement.shadowRoot.querySelector('slot[name="input-start"]');
+    const startPadding = this.getChildrenWidth(slot);
+    if (startPadding !== 0) {
+      this.inputPaddingLeft = 15 + startPadding;
+    }
+    if (!this.inputElement) {
+      return;
+    }
+    if ((((_a = this.inputElement.form) === null || _a === void 0 ? void 0 : _a.classList.contains('was-validated')) ||
+      ((_b = this.inputElement.form) === null || _b === void 0 ? void 0 : _b.noValidate) === false) &&
+      !this.inputElement.validity.valid) {
+      this.inputElement.style.backgroundPositionX = `${this.inputPaddingLeft}px`;
+      this.inputPaddingLeft += 32;
     }
   }
+  endSlotChanged() {
+    const slot = this.hostElement.shadowRoot.querySelector('slot[name="input-end"]');
+    this.inputPaddingRight = 15 + this.getChildrenWidth(slot);
+  }
+  getChildrenWidth(slotElement) {
+    if (!slotElement) {
+      return 0;
+    }
+    const endElements = getSlottedElements(slotElement);
+    if (endElements.length === 0) {
+      return 0;
+    }
+    let width = 0;
+    endElements.forEach((element) => {
+      width += element.getBoundingClientRect().width;
+    });
+    return width;
+  }
   render() {
-    return (h(Host, null, h("div", { class: "group group-start" }, h("slot", { name: "input-start" })), h("slot", null), h("div", { class: "group group-end" }, h("slot", { name: "input-end" }))));
+    return (h(Host, null, h("div", { class: "group group-start" }, h("slot", { name: "input-start", onSlotchange: () => this.startSlotChanged() })), h("slot", null), h("div", { class: "group group-end" }, h("slot", { name: "input-end", onSlotchange: () => this.endSlotChanged() }))));
   }
-  get host() { return this; }
+  get hostElement() { return this; }
   static get style() { return inputGroupCss; }
-}, [6, "ix-input-group"]);
+}, [1, "ix-input-group", {
+    "inputPaddingLeft": [32],
+    "inputPaddingRight": [32]
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/ix-input-group.js.map

@@ -1 +1 @@
-{"file":"ix-input-group.js","mappings":";;AAAA,MAAM,aAAa,GAAG,0ZAA0Z;;MCgBna,UAAU;;;;;EAGrB,kBAAkB;IAChB,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,IAAI,WAAW,GAAG,EAAE,CAAC;IACrB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;MAC5D,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;MACxC,YAAY,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;KACpD,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;MAC9D,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;MACxC,WAAW,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;KACnD,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAC1C,oBAAoB,CACD,CAAC;IAEtB,IAAI,YAAY,EAAE;MAChB,YAAY,CAAC,KAAK,CAAC,YAAY,GAAG,YAAY,GAAG,IAAI,CAAC;MACtD,YAAY,CAAC,KAAK,CAAC,WAAW,GAAG,WAAW,GAAG,IAAI,CAAC;KACrD;SAAM;MACL,OAAO,CAAC,IAAI,CACV,uFAAuF,CACxF,CAAC;KACH;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,mBAAmB,IAC5B,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,EACN,eAAa,EACb,WAAK,KAAK,EAAC,iBAAiB,IAC1B,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=scoped","./src/components/input-group/input-group.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  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  width: 100%;\n\n  .group {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    height: 100%;\n  }\n\n  .group-start {\n    left: 0px;\n    height: 2rem;\n  }\n\n  .group-end {\n    right: 0px;\n    height: 2rem;\n  }\n\n  ::slotted(*) {\n    display: flex;\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, Element, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  scoped: true,\n})\nexport class InputGroup {\n  @Element() host!: HTMLIxInputGroupElement;\n\n  componentDidRender() {\n    let paddingRight = 15;\n    let paddingLeft = 15;\n    this.host.querySelectorAll('[slot=\"input-end\"]').forEach((item) => {\n      item.classList.add('input-group-label');\n      paddingRight += item.getBoundingClientRect().width;\n    });\n\n    this.host.querySelectorAll('[slot=\"input-start\"]').forEach((item) => {\n      item.classList.add('input-group-label');\n      paddingLeft += item.getBoundingClientRect().width;\n    });\n\n    const inputElement = this.host.querySelector(\n      'input.form-control'\n    ) as HTMLInputElement;\n\n    if (inputElement) {\n      inputElement.style.paddingRight = paddingRight + 'px';\n      inputElement.style.paddingLeft = paddingLeft + 'px';\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input-tag, e.g. <input class=\"form-control\" />'\n      );\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"group group-start\">\n          <slot name=\"input-start\"></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot name=\"input-end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-input-group.js","mappings":"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","names":[],"sources":["./src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=shadow","./src/components/input-group/input-group.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  position: relative;\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  align-items: stretch;\n\n  .group {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    height: 100%;\n  }\n\n  .group-start {\n    left: 0px;\n    height: 2rem;\n    margin-left: 0.375rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  .group-end {\n    right: 0px;\n    height: 2rem;\n    margin-right: 0.375rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(*) {\n    display: flex;\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, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() hostElement!: HTMLIxInputGroupElement;\n\n  @State() inputPaddingLeft = 0;\n  @State() inputPaddingRight = 0;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input') as HTMLInputElement;\n  }\n\n  componentWillLoad() {\n    const { valid } = this.inputElement.validity;\n    this.inputElement.addEventListener('valid', () => {\n      this.onValidInput();\n    });\n    this.inputElement.addEventListener('invalid', () => {\n      this.onInvalidInput();\n    });\n    this.inputElement.addEventListener('input', () => {\n      this.startSlotChanged();\n    });\n\n    this.inputElement.form?.addEventListener('submit', () => {\n      this.startSlotChanged();\n    });\n\n    valid ? this.onValidInput() : this.onInvalidInput();\n  }\n\n  componentDidRender() {\n    this.prepareInputElement();\n  }\n\n  private onValidInput() {\n    this.startSlotChanged();\n  }\n\n  private onInvalidInput() {\n    this.startSlotChanged();\n  }\n\n  private prepareInputElement() {\n    if (this.inputElement) {\n      this.inputElement.style.width = '100%';\n\n      if (this.inputPaddingRight !== 0) {\n        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n      } else {\n        this.inputElement.style.paddingRight = 'none';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = 'none';\n      }\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input tag, e.g. <input class=\"form-control\" />'\n      );\n    }\n  }\n\n  private startSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-start\"]'\n    );\n    const startPadding = this.getChildrenWidth(slot);\n\n    if (startPadding !== 0) {\n      this.inputPaddingLeft = 15 + startPadding;\n    }\n\n    if (!this.inputElement) {\n      return;\n    }\n\n    if (\n      (this.inputElement.form?.classList.contains('was-validated') ||\n        this.inputElement.form?.noValidate === false) &&\n      !this.inputElement.validity.valid\n    ) {\n      this.inputElement.style.backgroundPositionX = `${this.inputPaddingLeft}px`;\n      this.inputPaddingLeft += 32;\n    }\n  }\n\n  private endSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-end\"]'\n    );\n    this.inputPaddingRight = 15 + this.getChildrenWidth(slot);\n  }\n\n  private getChildrenWidth(slotElement: Element) {\n    if (!slotElement) {\n      return 0;\n    }\n\n    const endElements = getSlottedElements<HTMLElement>(slotElement);\n    if (endElements.length === 0) {\n      return 0;\n    }\n\n    let width = 0;\n\n    endElements.forEach((element) => {\n      width += element.getBoundingClientRect().width;\n    });\n\n    return width;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"group group-start\">\n          <slot\n            name=\"input-start\"\n            onSlotchange={() => this.startSlotChanged()}\n          ></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot\n            name=\"input-end\"\n            onSlotchange={() => this.endSlotChanged()}\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ix-kpi.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const kpiCss = ":host{display:flex;flex-grow:1;height:2.5rem;border-radius:var(--theme-kpi--border-radius);padding:0.375rem 0.25rem;min-width:0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .kpi-container{display:flex;height:100%;width:100%;-webkit-border-after:2px solid grey;border-block-end:2px solid grey}:host .kpi-container.alarm{border-block-end-color:var(--theme-color-alarm)}:host .kpi-container.warning{border-block-end-color:var(--theme-color-warning)}:host .kpi-container .kpi-label{display:flex;align-items:center;color:var(--theme-kpi-display-label--color);flex-grow:1;flex-shrink:9999}:host .kpi-container .kpi-label ix-icon{-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}:host .kpi-container .kpi-value-container{display:flex;align-items:flex-end}:host .kpi-container .kpi-value{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);color:var(--theme-kpi-display-value--color)}:host .kpi-container .kpi-unit{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;color:var(--theme-kpi-display-units--color)}:host .kpi-container .kpi-label,:host .kpi-container .kpi-unit{-webkit-margin-before:0.125rem;margin-block-start:0.125rem}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):hover{background-color:var(--theme-kpi-display--background--hover)}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):active{background-color:var(--theme-kpi-display--background--active)}:host:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--focus--border-color)}:host(.stacked){height:3.75rem}:host(.stacked) .kpi-container{justify-content:center;flex-wrap:wrap}:host(.stacked) .kpi-container .kpi-label{width:100%;justify-content:center}";
+const kpiCss = ":host{display:flex;flex-grow:1;height:2.5rem;border-radius:var(--theme-kpi--border-radius);padding:0.375rem 0.25rem;min-width:0}: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 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .kpi-container{display:flex;height:100%;width:100%;-webkit-border-after:2px solid grey;border-block-end:2px solid grey}:host .kpi-container.alarm{border-block-end-color:var(--theme-color-alarm)}:host .kpi-container.warning{border-block-end-color:var(--theme-color-warning)}:host .kpi-container .kpi-label{display:flex;align-items:center;color:var(--theme-kpi-display-label--color);flex-grow:1;flex-shrink:9999}:host .kpi-container .kpi-label ix-icon{-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}:host .kpi-container .kpi-value-container{display:flex;align-items:flex-end}:host .kpi-container .kpi-value{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);color:var(--theme-kpi-display-value--color)}:host .kpi-container .kpi-unit{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;color:var(--theme-kpi-display-units--color)}:host .kpi-container .kpi-label,:host .kpi-container .kpi-unit{-webkit-margin-before:0.125rem;margin-block-start:0.125rem}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):hover{background-color:var(--theme-kpi-display--background--hover)}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):active,:host:not(.disabled):not(:disabled).active{background-color:var(--theme-kpi-display--background--active)}:host:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--focus--border-color)}:host(.stacked){height:3.75rem}:host(.stacked) .kpi-container{justify-content:center;flex-wrap:wrap}:host(.stacked) .kpi-container .kpi-label{width:100%;justify-content:center}";
 
 const Kpi = /*@__PURE__*/ proxyCustomElement(class Kpi extends HTMLElement {
   constructor() {

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

@@ -1 +1 @@
-{"file":"ix-kpi.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,45DAA45D;;MCgB95D,GAAG;;;;;;;;iBAmBmC,SAAS;uBAKT,YAAY;;EAErD,YAAY;IAClB,QAAQ,IAAI,CAAC,KAAK;MAChB,KAAK,OAAO;QACV,QACE,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,GACA,EACX;MAEJ,KAAK,SAAS;QACZ,QACE,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,IAAI,GACA,EACX;MAEJ;QACE,OAAO,EAAE,CAAC;KACb;GACF;EAEO,cAAc;IACpB,IAAI,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;IAE7C,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KAC3C;IAED,OAAO,OAAO,CAAC;GAChB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU;OACzC,IAED,WACE,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;QAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;OAClC,IAED,YAAM,KAAK,EAAC,WAAW,IACpB,IAAI,CAAC,YAAY,EAAE,EACpB,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C,EACP,YAAM,KAAK,EAAC,qBAAqB,IAC/B,YAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC1C,IAAI,CAAC,IAAI,GAAG,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,GAAG,EAAE,CACtD,CACH,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/kpi/kpi.scss?tag=ix-kpi&encapsulation=shadow","./src/components/kpi/kpi.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/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-grow: 1;\n  height: $large-control-height;\n  border-radius: var(--theme-kpi--border-radius);\n  padding: 0.375rem $tiny-space;\n  min-width: 0;\n\n  span {\n    @include ellipsis;\n  }\n\n  .kpi-container {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    border-block-end: 2px solid grey;\n\n    &.alarm {\n      border-block-end-color: var(--theme-color-alarm);\n    }\n\n    &.warning {\n      border-block-end-color: var(--theme-color-warning);\n    }\n\n    .kpi-label {\n      display: flex;\n      align-items: center;\n      color: var(--theme-kpi-display-label--color);\n      flex-grow: 1;\n      flex-shrink: 9999;\n\n      ix-icon {\n        margin-inline-end: $tiny-space;\n      }\n    }\n\n    .kpi-value-container {\n      display: flex;\n      align-items: flex-end;\n    }\n\n    .kpi-value {\n      @include text-xl;\n\n      color: var(--theme-kpi-display-value--color);\n    }\n\n    .kpi-unit {\n      margin-inline-start: $small-space;\n      color: var(--theme-kpi-display-units--color);\n    }\n\n    .kpi-label,\n    .kpi-unit {\n      margin-block-start: 0.125rem;\n    }\n  }\n\n  @include hover {\n    background-color: var(--theme-kpi-display--background--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-kpi-display--background--active);\n  }\n\n  @include focus-visible {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(.stacked) {\n  height: 3.75rem;\n\n  .kpi-container {\n    justify-content: center;\n    flex-wrap: wrap;\n\n    .kpi-label {\n      width: 100%;\n      justify-content: center;\n    }\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';\n\n@Component({\n  tag: 'ix-kpi',\n  styleUrl: 'kpi.scss',\n  shadow: true,\n})\nexport class Kpi {\n  /**\n   *\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() value: string | number;\n\n  /**\n   *\n   */\n  @Prop() unit: string;\n\n  /**\n   *\n   */\n  @Prop() state: 'neutral' | 'warning' | 'alarm' = 'neutral';\n\n  /**\n   *\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  private getStateIcon() {\n    switch (this.state) {\n      case 'alarm':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name=\"alarm\"\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name=\"warning\"\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private getTooltipText() {\n    let tooltip = `${this.label}: ${this.value}`;\n\n    if (this.unit) {\n      tooltip = tooltip.concat(` ${this.unit}`);\n    }\n\n    return tooltip;\n  }\n\n  render() {\n    return (\n      <Host\n        title={this.getTooltipText()}\n        tabindex=\"1\"\n        class={{\n          stacked: this.orientation === 'vertical',\n        }}\n      >\n        <div\n          class={{\n            'kpi-container': true,\n            alarm: this.state === 'alarm',\n            warning: this.state === 'warning',\n          }}\n        >\n          <span class=\"kpi-label\">\n            {this.getStateIcon()}\n            <span class=\"kpi-label-text\">{this.label}</span>\n          </span>\n          <span class=\"kpi-value-container\">\n            <span class=\"kpi-value\">{this.value}</span>\n            {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-kpi.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,s+EAAs+E;;MCgBx+E,GAAG;;;;;;;;iBAmBmC,SAAS;uBAKT,YAAY;;EAErD,YAAY;IAClB,QAAQ,IAAI,CAAC,KAAK;MAChB,KAAK,OAAO;QACV,QACE,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,GACA,EACX;MAEJ,KAAK,SAAS;QACZ,QACE,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,IAAI,GACA,EACX;MAEJ;QACE,OAAO,EAAE,CAAC;KACb;GACF;EAEO,cAAc;IACpB,IAAI,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;IAE7C,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KAC3C;IAED,OAAO,OAAO,CAAC;GAChB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU;OACzC,IAED,WACE,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;QAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;OAClC,IAED,YAAM,KAAK,EAAC,WAAW,IACpB,IAAI,CAAC,YAAY,EAAE,EACpB,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C,EACP,YAAM,KAAK,EAAC,qBAAqB,IAC/B,YAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC1C,IAAI,CAAC,IAAI,GAAG,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,GAAG,EAAE,CACtD,CACH,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/kpi/kpi.scss?tag=ix-kpi&encapsulation=shadow","./src/components/kpi/kpi.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/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-grow: 1;\n  height: $large-control-height;\n  border-radius: var(--theme-kpi--border-radius);\n  padding: 0.375rem $tiny-space;\n  min-width: 0;\n\n  span {\n    @include ellipsis;\n  }\n\n  .kpi-container {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    border-block-end: 2px solid grey;\n\n    &.alarm {\n      border-block-end-color: var(--theme-color-alarm);\n    }\n\n    &.warning {\n      border-block-end-color: var(--theme-color-warning);\n    }\n\n    .kpi-label {\n      display: flex;\n      align-items: center;\n      color: var(--theme-kpi-display-label--color);\n      flex-grow: 1;\n      flex-shrink: 9999;\n\n      ix-icon {\n        margin-inline-end: $tiny-space;\n      }\n    }\n\n    .kpi-value-container {\n      display: flex;\n      align-items: flex-end;\n    }\n\n    .kpi-value {\n      @include text-xl;\n\n      color: var(--theme-kpi-display-value--color);\n    }\n\n    .kpi-unit {\n      margin-inline-start: $small-space;\n      color: var(--theme-kpi-display-units--color);\n    }\n\n    .kpi-label,\n    .kpi-unit {\n      margin-block-start: 0.125rem;\n    }\n  }\n\n  @include hover {\n    background-color: var(--theme-kpi-display--background--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-kpi-display--background--active);\n  }\n\n  @include focus-visible {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(.stacked) {\n  height: 3.75rem;\n\n  .kpi-container {\n    justify-content: center;\n    flex-wrap: wrap;\n\n    .kpi-label {\n      width: 100%;\n      justify-content: center;\n    }\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';\n\n@Component({\n  tag: 'ix-kpi',\n  styleUrl: 'kpi.scss',\n  shadow: true,\n})\nexport class Kpi {\n  /**\n   *\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() value: string | number;\n\n  /**\n   *\n   */\n  @Prop() unit: string;\n\n  /**\n   *\n   */\n  @Prop() state: 'neutral' | 'warning' | 'alarm' = 'neutral';\n\n  /**\n   *\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  private getStateIcon() {\n    switch (this.state) {\n      case 'alarm':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name=\"alarm\"\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name=\"warning\"\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private getTooltipText() {\n    let tooltip = `${this.label}: ${this.value}`;\n\n    if (this.unit) {\n      tooltip = tooltip.concat(` ${this.unit}`);\n    }\n\n    return tooltip;\n  }\n\n  render() {\n    return (\n      <Host\n        title={this.getTooltipText()}\n        tabindex=\"1\"\n        class={{\n          stacked: this.orientation === 'vertical',\n        }}\n      >\n        <div\n          class={{\n            'kpi-container': true,\n            alarm: this.state === 'alarm',\n            warning: this.state === 'warning',\n          }}\n        >\n          <span class=\"kpi-label\">\n            {this.getStateIcon()}\n            <span class=\"kpi-label-text\">{this.label}</span>\n          </span>\n          <span class=\"kpi-value-container\">\n            <span class=\"kpi-value\">{this.value}</span>\n            {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const linkButtonCss = ".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-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;--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-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;--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-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;--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-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;--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-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;--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-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;--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-flex;height:2rem;font-size:0.875rem;font-weight:400;min-width:2rem}:host .link-button{display:inline-flex;position:relative;width:100%;padding:0 0.25rem 0 0;align-items:center;justify-content:center;background-color:transparent;color:var(--theme-color-primary);cursor:pointer;text-decoration:none}:host .link-button .link{display:block;position:relative;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .link-button:not(.disabled):not(:disabled){cursor:pointer}:host .link-button:not(.disabled):not(:disabled):hover{color:var(--theme-color-dynamic--hover)}:host .link-button:not(.disabled):not(:disabled):hover .link{text-decoration:underline;text-underline-offset:0.2rem}:host .link-button:not(.disabled):not(:disabled){cursor:pointer}:host .link-button:not(.disabled):not(:disabled):active{color:var(--theme-color-dynamic--active)}:host .link-button:not(.disabled):not(:disabled):active .link{text-decoration:underline;text-underline-offset:0.2rem}:host .link-button.disabled{cursor:default;color:var(--theme-color-weak-text)}:host .link-button a{all:unset}:host :focus-visible{outline:1px solid var(--theme-color-focus-bdr)}";
+const linkButtonCss = ".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-flex;height:2rem;font-size:0.875rem;font-weight:400;min-width:2rem}:host .link-button{display:inline-flex;position:relative;width:100%;padding:0 0.25rem 0 0;align-items:center;justify-content:center;background-color:transparent;color:var(--theme-color-primary);cursor:pointer;text-decoration:none}:host .link-button .link{display:block;position:relative;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .link-button:not(.disabled):not(:disabled){cursor:pointer}:host .link-button:not(.disabled):not(:disabled):hover{color:var(--theme-color-dynamic--hover)}:host .link-button:not(.disabled):not(:disabled):hover .link{text-decoration:underline;text-underline-offset:0.2rem}:host .link-button:not(.disabled):not(:disabled){cursor:pointer}:host .link-button:not(.disabled):not(:disabled):active,:host .link-button:not(.disabled):not(:disabled).active{color:var(--theme-color-dynamic--active)}:host .link-button:not(.disabled):not(:disabled):active .link,:host .link-button:not(.disabled):not(:disabled).active .link{text-decoration:underline;text-underline-offset:0.2rem}:host .link-button.disabled{cursor:default;color:var(--theme-color-weak-text)}:host .link-button a{all:unset}:host :focus-visible{outline:1px solid var(--theme-color-focus-bdr)}";
 
 const LinkButton = /*@__PURE__*/ proxyCustomElement(class LinkButton extends HTMLElement {
   constructor() {

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

@@ -1 +1 @@
-{"file":"ix-link-button.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,s8cAAs8c;;MCmB/8c,UAAU;;;;;oBAIF,KAAK;;kBAYkC,OAAO;;EAEjE,MAAM;IACJ,QACE,EAAC,IAAI,QACH,SACE,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,EACD,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,EAC1C,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,eAAS,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,qBAAqB,EAAC,IAAI,EAAC,IAAI,GAAW,EACrE,WACE,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eAAa,CACT,CACJ,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/link-button/link-button.scss?tag=ix-link-button&encapsulation=shadow","./src/components/link-button/link-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@import 'mixins/hover';\n\n:host {\n  display: inline-flex;\n  height: $x-large-space;\n  font-size: $font-size-default;\n  font-weight: $font-weight-normal;\n  min-width: $x-large-space;\n\n  .link-button {\n    display: inline-flex;\n    position: relative;\n    width: 100%;\n    padding: 0 $tiny-space 0 0;\n    align-items: center;\n    justify-content: center;\n    background-color: transparent;\n    color: var(--theme-color-primary);\n    cursor: pointer;\n    text-decoration: none;\n\n    .link {\n      display: block;\n      position: relative;\n      width: 100%;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n\n    @include hover {\n      color: var(--theme-color-dynamic--hover);\n\n      .link {\n        text-decoration: underline;\n        text-underline-offset: 0.2rem;\n      }\n    }\n\n    @include active {\n      color: var(--theme-color-dynamic--active);\n\n      .link {\n        text-decoration: underline;\n        text-underline-offset: 0.2rem;\n      }\n    }\n\n    &.disabled {\n      cursor: default;\n      color: var(--theme-color-weak-text);\n    }\n\n    a {\n      all: unset;\n    }\n  }\n\n  :focus-visible {\n    outline: 1px solid var(--theme-color-focus-bdr);\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';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-link-button',\n  styleUrl: 'link-button.scss',\n  shadow: true,\n})\nexport class LinkButton {\n  /**\n   * Disable the link button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Url for the link button\n   */\n  @Prop() url: string;\n\n  /**\n   * Specifies where to open the link\n   *\n   * https://www.w3schools.com/html/html_links.asp\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  render() {\n    return (\n      <Host>\n        <a\n          title={this.url}\n          tabindex=\"0\"\n          class={{\n            'link-button': true,\n            disabled: this.disabled,\n          }}\n          href={this.disabled ? undefined : this.url}\n          target={this.target}\n        >\n          <ix-icon class=\"icon\" name=\"chevron-right-small\" size=\"16\"></ix-icon>\n          <div\n            class={{\n              link: true,\n              disabled: this.disabled,\n            }}\n          >\n            <slot></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-link-button.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,svbAAsvb;;MCmB/vb,UAAU;;;;;oBAIF,KAAK;;kBAYkC,OAAO;;EAEjE,MAAM;IACJ,QACE,EAAC,IAAI,QACH,SACE,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,EACD,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,EAC1C,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,eAAS,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,qBAAqB,EAAC,IAAI,EAAC,IAAI,GAAW,EACrE,WACE,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eAAa,CACT,CACJ,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/link-button/link-button.scss?tag=ix-link-button&encapsulation=shadow","./src/components/link-button/link-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/hover';\n\n:host {\n  display: inline-flex;\n  height: $x-large-space;\n  font-size: $font-size-default;\n  font-weight: $font-weight-normal;\n  min-width: $x-large-space;\n\n  .link-button {\n    display: inline-flex;\n    position: relative;\n    width: 100%;\n    padding: 0 $tiny-space 0 0;\n    align-items: center;\n    justify-content: center;\n    background-color: transparent;\n    color: var(--theme-color-primary);\n    cursor: pointer;\n    text-decoration: none;\n\n    .link {\n      display: block;\n      position: relative;\n      width: 100%;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n\n    @include hover {\n      color: var(--theme-color-dynamic--hover);\n\n      .link {\n        text-decoration: underline;\n        text-underline-offset: 0.2rem;\n      }\n    }\n\n    @include active {\n      color: var(--theme-color-dynamic--active);\n\n      .link {\n        text-decoration: underline;\n        text-underline-offset: 0.2rem;\n      }\n    }\n\n    &.disabled {\n      cursor: default;\n      color: var(--theme-color-weak-text);\n    }\n\n    a {\n      all: unset;\n    }\n  }\n\n  :focus-visible {\n    outline: 1px solid var(--theme-color-focus-bdr);\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';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-link-button',\n  styleUrl: 'link-button.scss',\n  shadow: true,\n})\nexport class LinkButton {\n  /**\n   * Disable the link button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Url for the link button\n   */\n  @Prop() url: string;\n\n  /**\n   * Specifies where to open the link\n   *\n   * https://www.w3schools.com/html/html_links.asp\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  render() {\n    return (\n      <Host>\n        <a\n          title={this.url}\n          tabindex=\"0\"\n          class={{\n            'link-button': true,\n            disabled: this.disabled,\n          }}\n          href={this.disabled ? undefined : this.url}\n          target={this.target}\n        >\n          <ix-icon class=\"icon\" name=\"chevron-right-small\" size=\"16\"></ix-icon>\n          <div\n            class={{\n              link: true,\n              disabled: this.disabled,\n            }}\n          >\n            <slot></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}