@siemens/ix 4.2.0 → 4.3.0

package/dist/esm/ix-field-label.ix-field-wrapper.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-field-label.ix-field-wrapper.entry.js","sources":["src/components/utils/input/index.ts","src/components/field-label/field-label.scss?tag=ix-field-label&encapsulation=shadow","src/components/field-label/field-label.tsx","src/components/field-wrapper/field-wrapper.scss?tag=ix-field-wrapper&encapsulation=shadow","src/components/field-wrapper/field-wrapper.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { EventEmitter } from '@stencil/core';\nimport { IxComponent } from '../internal';\n\nexport * from './validation';\n\nexport interface FieldWrapperInterface {\n  /**\n   * Label for the field component\n   */\n  label?: string;\n  /**\n   * Show text below the field component which show additional information\n   */\n  helperText?: string;\n  /**\n   * Info text for the field component\n   */\n  infoText?: string;\n  /**\n   * Warning text for the field component\n   */\n  warningText?: string;\n  /**\n   * Error text for the field component\n   */\n  invalidText?: string;\n  /**\n   * Valid text for the field component\n   */\n  validText?: string;\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  showTextAsTooltip?: boolean;\n}\n\nexport type HTMLIxFormComponentElement<T> = HTMLElement & IxFormComponent<T>;\nexport type HTMLIxInputFieldComponentElement<T> =\n  HTMLIxFormComponentElement<T> & IxInputFieldComponent<T>;\n\nexport interface IxFormValidationState {\n  // Annotate as @State()\n  isInvalid: boolean;\n  // Annotate as @State()\n  isValid: boolean;\n  // Annotate as @State()\n  isInfo: boolean;\n  // Annotate as @State()\n  isWarning: boolean;\n}\n\nexport interface IxFormComponent<T = string> extends IxComponent {\n  // Private internal\n  formInternals: ElementInternals;\n\n  // Annotate as @Prop({ reflect: true })\n  required?: boolean;\n  // Annotate as @Prop({ reflect: true })\n  name?: string;\n  // Annotate as @Prop()\n  value?: T;\n  // Annotate as @Prop()\n  disabled: boolean;\n\n  valueChange: EventEmitter<T>;\n  ixBlur: EventEmitter<void>;\n\n  updateFormInternalValue(value: T): void | Promise<void>;\n  hasValidValue(): Promise<boolean>;\n  getValidityState?(): Promise<ValidityState>;\n  getAssociatedFormElement(): Promise<HTMLFormElement | null>;\n  isTouched?(): Promise<boolean>;\n}\n\nexport interface IxInputFieldComponent<T = string>\n  extends IxFormComponent<T>,\n    IxFormValidationState,\n    FieldWrapperInterface {\n  // Annotate as @Prop()\n  placeholder?: string;\n  // Annotate as @Prop()\n  readonly: boolean;\n\n  // Annotate as @Method()\n  getNativeInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement>;\n\n  // Annotate as @Method()\n  focusInput(): Promise<void>;\n}\n\nexport function isIxInputFieldComponent<T>(\n  obj: HTMLElement | IxFormComponent<T>\n): obj is HTMLIxInputFieldComponentElement<T> {\n  return (\n    obj &&\n    'getAssociatedFormElement' in obj &&\n    typeof obj.getAssociatedFormElement === 'function' &&\n    'getNativeInputElement' in obj &&\n    typeof obj.getNativeInputElement === 'function'\n  );\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: inline-block;\n  position: relative;\n\n  margin-top: 0.5rem;\n  margin-bottom: 0.25rem;\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  HTMLIxFormComponentElement,\n  isIxInputFieldComponent,\n} from '../utils/input';\nimport { IxComponent } from '../utils/internal';\nimport { MakeRef, makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-field-label',\n  styleUrl: 'field-label.scss',\n  shadow: true,\n})\nexport class FormFieldLabel implements IxComponent {\n  @Element() hostElement!: HTMLIxFieldLabelElement;\n\n  /**\n   * A value is required or must be checked for the form to be submittable\n   */\n  @Prop({ reflect: true, mutable: true }) required?: boolean;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop({ reflect: true }) htmlFor?: string;\n\n  /** @internal */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  /** @internal */\n  @Prop({ mutable: true }) isInvalid: boolean = false;\n\n  private readonly htmlForObserver = new MutationObserver(() =>\n    this.checkForInternalState()\n  );\n  private htmlForClassObserver?: ClassMutationObserver;\n  private controlRefClassObserver?: ClassMutationObserver;\n  private a11yAttributes: A11yAttributes = {};\n  private readonly labelRef = makeRef<HTMLLabelElement>();\n\n  connectedCallback() {\n    this.registerHtmlForObserver();\n    this.registerControlRefObserver();\n  }\n\n  disconnectedCallback(): void {\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n  }\n\n  componentWillRender() {\n    this.checkForInternalState();\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  @Watch('htmlFor')\n  private registerHtmlForObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n\n    if (this.htmlFor) {\n      this.htmlForObserver.observe(window.document, {\n        childList: true,\n        subtree: true,\n      });\n    }\n  }\n\n  @Watch('controlRef')\n  private async registerControlRefObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n\n      this.controlRefClassObserver = createClassMutationObserver(input, () =>\n        this.checkForInvalidState(input)\n      );\n    }\n  }\n\n  private registerHtmlForClassObserver(\n    forElement: HTMLIxFormComponentElement<unknown>\n  ) {\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n\n    this.htmlForClassObserver = createClassMutationObserver(forElement, () =>\n      this.checkForInvalidState(forElement)\n    );\n  }\n\n  private checkForInvalidState(elementToCheck: HTMLElement) {\n    this.isInvalid =\n      elementToCheck.classList.contains('is-invalid') ||\n      elementToCheck.classList.contains('ix-invalid');\n  }\n\n  private async checkForInternalState() {\n    if (this.htmlFor) {\n      const forElement = document.getElementById(\n        this.htmlFor\n      ) as HTMLIxFormComponentElement<unknown>;\n      if (forElement) {\n        if (typeof forElement.required === 'boolean') {\n          this.required = forElement.required;\n        }\n\n        this.registerHtmlForClassObserver(forElement);\n        this.checkForInvalidState(forElement);\n      }\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n      this.required = (\n        input as HTMLInputElement | HTMLTextAreaElement\n      ).required;\n    }\n  }\n\n  private async focusOnClick() {\n    if (this.htmlFor) {\n      const target = document.getElementById(this.htmlFor);\n      if (target) {\n        let input: HTMLElement | null = null;\n        if (isIxInputFieldComponent(target)) {\n          input = await target.getNativeInputElement();\n        } else {\n          input = target;\n        }\n        if (typeof input.focus === 'function') {\n          input.focus();\n        }\n      }\n    }\n\n    if (this.controlRef) {\n      (await this.controlRef.waitForCurrent()).focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host onClick={() => this.focusOnClick()}>\n        <label\n          htmlFor={this.htmlFor}\n          {...this.a11yAttributes}\n          ref={this.labelRef}\n        >\n          <ix-typography\n            textColor={this.isInvalid ? 'alarm' : 'soft'}\n            format=\"label\"\n          >\n            <slot></slot>\n            {this.required && <span>*</span>}\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n","@use \"./field-wrapper.mixins.scss\";\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n\n  .slot-wrapper {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 0.25rem;\n  }\n\n  .field-bottom,\n  .field-top {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    justify-content: space-between;\n    gap: 1rem;\n    width: min-content;\n    min-width: 100%;\n  }\n\n  .field-bottom .bottom-right {\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  @include field-wrapper.helper-text;\n\n  .bottom-text {\n    margin-top: 0.25rem;\n    margin-bottom: 0.25rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { FieldWrapperInterface } from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { hasAnyText, HelperText } from './helper-text-util';\n\n/** @internal */\n@Component({\n  tag: 'ix-field-wrapper',\n  styleUrl: 'field-wrapper.scss',\n  shadow: true,\n})\nexport class FieldWrapper implements FieldWrapperInterface {\n  @Element() hostElement!: HTMLIxFieldWrapperElement;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Is the field component invalid\n   */\n  @Prop() isInvalid: boolean = false;\n\n  /**\n   * Is the field component valid\n   */\n  @Prop() isValid: boolean = false;\n\n  /**\n   * Is the field component info\n   */\n  @Prop() isInfo: boolean = false;\n\n  /**\n   * Is the field component warning\n   */\n  @Prop() isWarning: boolean = false;\n\n  /**\n   * Show helper, error, info, warning text as tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  /**\n   * Show label as required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlForLabel?: string;\n\n  /**\n   * The control element that the label is associated with\n   */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  private readonly slotRef = makeRef<HTMLDivElement>();\n\n  render() {\n    const textOptions = {\n      invalidText: this.invalidText,\n      isInvalid: this.isInvalid,\n      isValid: this.isValid,\n      validText: this.validText,\n      isWarning: this.isWarning,\n      warningText: this.warningText,\n      isInfo: this.isInfo,\n      infoText: this.infoText,\n      helperText: this.helperText,\n    };\n    return (\n      <Host>\n        {this.label && (\n          <div class=\"field-top\">\n            <ix-field-label\n              required={this.required}\n              htmlFor={this.htmlForLabel}\n              controlRef={this.controlRef}\n              isInvalid={this.isInvalid}\n            >\n              {this.label}\n            </ix-field-label>\n          </div>\n        )}\n        <div\n          class={{\n            'slot-wrapper': true,\n          }}\n          ref={this.slotRef}\n        >\n          <slot></slot>\n        </div>\n        <div class={'field-bottom'}>\n          {!this.showTextAsTooltip && <HelperText {...textOptions} />}\n          <div class=\"bottom-right\">\n            <slot name=\"bottom-right\"></slot>\n          </div>\n        </div>\n\n        {this.showTextAsTooltip === true && hasAnyText(textOptions) && (\n          <ix-tooltip\n            for={this.slotRef.waitForCurrent()}\n            showDelay={500}\n            placement=\"bottom\"\n          >\n            <HelperText {...textOptions} />\n          </ix-tooltip>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":["HelperText"],"mappings":"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"}
+{"version":3,"file":"ix-field-label.ix-field-wrapper.entry.js","sources":["src/components/utils/input/index.ts","src/components/field-label/field-label.scss?tag=ix-field-label&encapsulation=shadow","src/components/field-label/field-label.tsx","src/components/field-wrapper/field-wrapper.scss?tag=ix-field-wrapper&encapsulation=shadow","src/components/field-wrapper/field-wrapper.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { EventEmitter } from '@stencil/core';\nimport { IxComponent } from '../internal';\n\nexport * from './validation';\n\nexport interface FieldWrapperInterface {\n  /**\n   * Label for the field component\n   */\n  label?: string;\n  /**\n   * Show text below the field component which show additional information\n   */\n  helperText?: string;\n  /**\n   * Info text for the field component\n   */\n  infoText?: string;\n  /**\n   * Warning text for the field component\n   */\n  warningText?: string;\n  /**\n   * Error text for the field component\n   */\n  invalidText?: string;\n  /**\n   * Valid text for the field component\n   */\n  validText?: string;\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  showTextAsTooltip?: boolean;\n}\n\nexport type HTMLIxFormComponentElement<T> = HTMLElement & IxFormComponent<T>;\nexport type HTMLIxInputFieldComponentElement<T> =\n  HTMLIxFormComponentElement<T> & IxInputFieldComponent<T>;\n\nexport interface IxFormValidationState {\n  // Annotate as @State()\n  isInvalid: boolean;\n  // Annotate as @State()\n  isValid: boolean;\n  // Annotate as @State()\n  isInfo: boolean;\n  // Annotate as @State()\n  isWarning: boolean;\n}\n\nexport interface IxFormComponent<T = string> extends IxComponent {\n  // Private internal\n  formInternals: ElementInternals;\n\n  // Annotate as @Prop({ reflect: true })\n  required?: boolean;\n  // Annotate as @Prop({ reflect: true })\n  name?: string;\n  // Annotate as @Prop()\n  value?: T;\n  // Annotate as @Prop()\n  disabled: boolean;\n\n  valueChange: EventEmitter<T>;\n  ixBlur: EventEmitter<void>;\n\n  updateFormInternalValue(value: T): void | Promise<void>;\n  hasValidValue(): Promise<boolean>;\n  getValidityState?(): Promise<ValidityState>;\n  getAssociatedFormElement(): Promise<HTMLFormElement | null>;\n  isTouched?(): Promise<boolean>;\n}\n\nexport interface IxInputFieldComponent<T = string>\n  extends IxFormComponent<T>,\n    IxFormValidationState,\n    FieldWrapperInterface {\n  // Annotate as @Prop()\n  placeholder?: string;\n  // Annotate as @Prop()\n  readonly: boolean;\n\n  // Annotate as @Method()\n  getNativeInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement>;\n\n  // Annotate as @Method()\n  focusInput(): Promise<void>;\n}\n\nexport function isIxInputFieldComponent<T>(\n  obj: HTMLElement | IxFormComponent<T>\n): obj is HTMLIxInputFieldComponentElement<T> {\n  return (\n    obj &&\n    'getAssociatedFormElement' in obj &&\n    typeof obj.getAssociatedFormElement === 'function' &&\n    'getNativeInputElement' in obj &&\n    typeof obj.getNativeInputElement === 'function'\n  );\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: inline-block;\n  position: relative;\n\n  margin-top: 0.5rem;\n  margin-bottom: 0.25rem;\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  HTMLIxFormComponentElement,\n  isIxInputFieldComponent,\n} from '../utils/input';\nimport { IxComponent } from '../utils/internal';\nimport { MakeRef, makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-field-label',\n  styleUrl: 'field-label.scss',\n  shadow: true,\n})\nexport class FormFieldLabel implements IxComponent {\n  @Element() hostElement!: HTMLIxFieldLabelElement;\n\n  /**\n   * A value is required or must be checked for the form to be submittable\n   */\n  @Prop({ reflect: true, mutable: true }) required?: boolean;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop({ reflect: true }) htmlFor?: string;\n\n  /** @internal */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  /** @internal */\n  @Prop({ mutable: true }) isInvalid: boolean = false;\n\n  private explicitIsInvalid: boolean | undefined = undefined;\n\n  @Watch('isInvalid')\n  isInvalidChanged(newValue: boolean) {\n    this.explicitIsInvalid = newValue;\n  }\n\n  private readonly htmlForObserver = new MutationObserver(() =>\n    this.checkForInternalState()\n  );\n  private htmlForClassObserver?: ClassMutationObserver;\n  private controlRefClassObserver?: ClassMutationObserver;\n  private a11yAttributes: A11yAttributes = {};\n  private readonly labelRef = makeRef<HTMLLabelElement>();\n\n  connectedCallback() {\n    this.registerHtmlForObserver();\n    this.registerControlRefObserver();\n  }\n\n  disconnectedCallback(): void {\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n  }\n\n  componentWillRender() {\n    this.checkForInternalState();\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  @Watch('htmlFor')\n  private registerHtmlForObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n\n    if (this.htmlFor) {\n      this.htmlForObserver.observe(window.document, {\n        childList: true,\n        subtree: true,\n      });\n    }\n  }\n\n  @Watch('controlRef')\n  private async registerControlRefObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n\n    if (this.controlRef && !this.htmlFor) {\n      const input = await this.controlRef.waitForCurrent();\n\n      this.controlRefClassObserver = createClassMutationObserver(input, () =>\n        this.checkForInvalidState(input)\n      );\n    }\n  }\n\n  private registerHtmlForClassObserver(\n    forElement: HTMLIxFormComponentElement<unknown>\n  ) {\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n\n    this.htmlForClassObserver = createClassMutationObserver(forElement, () =>\n      this.checkForInvalidState(forElement)\n    );\n  }\n\n  private checkForInvalidState(elementToCheck: HTMLElement) {\n    const hasInvalidClass =\n      elementToCheck.classList.contains('is-invalid') ||\n      elementToCheck.classList.contains('ix-invalid');\n\n    this.isInvalid = this.explicitIsInvalid ?? hasInvalidClass;\n  }\n\n  private async checkForInternalState() {\n    if (this.htmlFor) {\n      const forElement = document.getElementById(\n        this.htmlFor\n      ) as HTMLIxFormComponentElement<unknown>;\n      if (forElement) {\n        if (typeof forElement.required === 'boolean') {\n          this.required = forElement.required;\n        }\n\n        this.registerHtmlForClassObserver(forElement);\n        this.checkForInvalidState(forElement);\n        return;\n      }\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n      this.required = (\n        input as HTMLInputElement | HTMLTextAreaElement\n      ).required;\n    }\n  }\n\n  private async focusOnClick() {\n    if (this.htmlFor) {\n      const target = document.getElementById(this.htmlFor);\n      if (target) {\n        let input: HTMLElement | null = null;\n        if (isIxInputFieldComponent(target)) {\n          input = await target.getNativeInputElement();\n        } else {\n          input = target;\n        }\n        if (typeof input.focus === 'function') {\n          input.focus();\n        }\n      }\n    }\n\n    if (this.controlRef) {\n      (await this.controlRef.waitForCurrent()).focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host onClick={() => this.focusOnClick()}>\n        <label\n          htmlFor={this.htmlFor}\n          {...this.a11yAttributes}\n          ref={this.labelRef}\n        >\n          <ix-typography\n            textColor={this.isInvalid ? 'alarm' : 'soft'}\n            format=\"label\"\n          >\n            <slot></slot>\n            {this.required && <span>*</span>}\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n","@use \"./field-wrapper.mixins.scss\";\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n\n  .slot-wrapper {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 0.25rem;\n  }\n\n  .field-bottom,\n  .field-top {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    justify-content: space-between;\n    gap: 1rem;\n    width: min-content;\n    min-width: 100%;\n  }\n\n  .field-bottom .bottom-right {\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  @include field-wrapper.helper-text;\n\n  .bottom-text {\n    margin-top: 0.25rem;\n    margin-bottom: 0.25rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { FieldWrapperInterface } from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { hasAnyText, HelperText } from './helper-text-util';\n\n/** @internal */\n@Component({\n  tag: 'ix-field-wrapper',\n  styleUrl: 'field-wrapper.scss',\n  shadow: true,\n})\nexport class FieldWrapper implements FieldWrapperInterface {\n  @Element() hostElement!: HTMLIxFieldWrapperElement;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Is the field component invalid\n   */\n  @Prop() isInvalid: boolean = false;\n\n  /**\n   * Is the field component valid\n   */\n  @Prop() isValid: boolean = false;\n\n  /**\n   * Is the field component info\n   */\n  @Prop() isInfo: boolean = false;\n\n  /**\n   * Is the field component warning\n   */\n  @Prop() isWarning: boolean = false;\n\n  /**\n   * Show helper, error, info, warning text as tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  /**\n   * Show label as required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlForLabel?: string;\n\n  /**\n   * The control element that the label is associated with\n   */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  private readonly slotRef = makeRef<HTMLDivElement>();\n\n  render() {\n    const textOptions = {\n      invalidText: this.invalidText,\n      isInvalid: this.isInvalid,\n      isValid: this.isValid,\n      validText: this.validText,\n      isWarning: this.isWarning,\n      warningText: this.warningText,\n      isInfo: this.isInfo,\n      infoText: this.infoText,\n      helperText: this.helperText,\n    };\n    return (\n      <Host>\n        {this.label && (\n          <div class=\"field-top\">\n            <ix-field-label\n              required={this.required}\n              htmlFor={this.htmlForLabel}\n              controlRef={this.controlRef}\n              isInvalid={this.isInvalid}\n            >\n              {this.label}\n            </ix-field-label>\n          </div>\n        )}\n        <div\n          class={{\n            'slot-wrapper': true,\n          }}\n          ref={this.slotRef}\n        >\n          <slot></slot>\n        </div>\n        <div class={'field-bottom'}>\n          {!this.showTextAsTooltip && <HelperText {...textOptions} />}\n          <div class=\"bottom-right\">\n            <slot name=\"bottom-right\"></slot>\n          </div>\n        </div>\n\n        {this.showTextAsTooltip === true && hasAnyText(textOptions) && (\n          <ix-tooltip\n            for={this.slotRef.waitForCurrent()}\n            showDelay={500}\n            placement=\"bottom\"\n          >\n            <HelperText {...textOptions} />\n          </ix-tooltip>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":["HelperText"],"mappings":"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"}

package/dist/esm/ix-field-label_2.entry.js

@@ -20,10 +20,14 @@ const FormFieldLabel = class {
         registerInstance(this, hostRef);
         /** @internal */
         this.isInvalid = false;
+        this.explicitIsInvalid = undefined;
         this.htmlForObserver = new MutationObserver(() => this.checkForInternalState());
         this.a11yAttributes = {};
         this.labelRef = makeRef();
     }
+    isInvalidChanged(newValue) {
+        this.explicitIsInvalid = newValue;
+    }
     connectedCallback() {
         this.registerHtmlForObserver();
         this.registerControlRefObserver();
@@ -66,7 +70,7 @@ const FormFieldLabel = class {
         if (this.controlRefClassObserver) {
             this.controlRefClassObserver.destroy();
         }
-        if (this.controlRef) {
+        if (this.controlRef && !this.htmlFor) {
             const input = await this.controlRef.waitForCurrent();
             this.controlRefClassObserver = createClassMutationObserver(input, () => this.checkForInvalidState(input));
         }
@@ -78,9 +82,10 @@ const FormFieldLabel = class {
         this.htmlForClassObserver = createClassMutationObserver(forElement, () => this.checkForInvalidState(forElement));
     }
     checkForInvalidState(elementToCheck) {
-        this.isInvalid =
-            elementToCheck.classList.contains('is-invalid') ||
-                elementToCheck.classList.contains('ix-invalid');
+        var _a;
+        const hasInvalidClass = elementToCheck.classList.contains('is-invalid') ||
+            elementToCheck.classList.contains('ix-invalid');
+        this.isInvalid = (_a = this.explicitIsInvalid) !== null && _a !== void 0 ? _a : hasInvalidClass;
     }
     async checkForInternalState() {
         if (this.htmlFor) {
@@ -91,6 +96,7 @@ const FormFieldLabel = class {
                 }
                 this.registerHtmlForClassObserver(forElement);
                 this.checkForInvalidState(forElement);
+                return;
             }
         }
         if (this.controlRef) {
@@ -119,10 +125,11 @@ const FormFieldLabel = class {
         }
     }
     render() {
-        return (h(Host, { key: 'ca4f1ba84a3a19a4d15aa517272c90bebf782e13', onClick: () => this.focusOnClick() }, h("label", Object.assign({ key: '44e2386d5dd7c51d3b5a9e1530e986b15ba64d23', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), h("ix-typography", { key: 'ab97048f7a521ad398438795ba7a5ccba2571f4c', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, h("slot", { key: 'faf628440f832acb412c7f5b40dab4620da785d7' }), this.required && h("span", { key: 'd15676e3bf2d645ce2e1fc8f3bd91af23b6ec725' }, "*")))));
+        return (h(Host, { key: '1a8134a30a1b101f6bfd678f905eb88e927e47d6', onClick: () => this.focusOnClick() }, h("label", Object.assign({ key: 'ef6df6072485fb72ea02a0a9800be3be15e84314', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), h("ix-typography", { key: '572975edeae54d15932c3b6091ed63dfff8bb231', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, h("slot", { key: '452847ea7365cefc945bc6166bf2e8fd44d3f530' }), this.required && h("span", { key: '5e85f801d6fe8a01d6595a55bb263d0bcf91a888' }, "*")))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
+        "isInvalid": ["isInvalidChanged"],
         "htmlFor": ["registerHtmlForObserver"],
         "controlRef": ["registerControlRefObserver"]
     }; }
@@ -172,9 +179,9 @@ const FieldWrapper = class {
             infoText: this.infoText,
             helperText: this.helperText,
         };
-        return (h(Host, { key: 'a27a9cefcce30e8dc30ca6a3fd72164227e86fdf' }, this.label && (h("div", { key: 'ef4a8585d24c3b0400e85b1a21bd9344e01bcb47', class: "field-top" }, h("ix-field-label", { key: '93c9f7cfbbde681956a7676721f1dd0821907e89', required: this.required, htmlFor: this.htmlForLabel, controlRef: this.controlRef, isInvalid: this.isInvalid }, this.label))), h("div", { key: '3a26cb08a91fc7c0f10de83a5b722b5af66f059f', class: {
+        return (h(Host, { key: '531b08942bf31c36043fb3d7cd3af489f2fe83b0' }, this.label && (h("div", { key: '49b9ef124fc2d69fb2528585d7b232b2e3d6d4b6', class: "field-top" }, h("ix-field-label", { key: '20a089a72de7ee3045c048c19d868ff3b4be2706', required: this.required, htmlFor: this.htmlForLabel, controlRef: this.controlRef, isInvalid: this.isInvalid }, this.label))), h("div", { key: '80c8ce58eb73379755757b2cef6b318cdc279b6b', class: {
                 'slot-wrapper': true,
-            }, ref: this.slotRef }, h("slot", { key: 'fe73a444a23928cee7f7899cc3bb6aef76eefa68' })), h("div", { key: 'bc5fa34c5a05e49427e63a87d70db0735a0a0b80', class: 'field-bottom' }, !this.showTextAsTooltip && h(HelperText$1, Object.assign({ key: '67abdfcf2448d8df422cd0ee39c162f423e5c564' }, textOptions)), h("div", { key: 'fecb02a2e534980491ea776cdc952b1aeea41286', class: "bottom-right" }, h("slot", { key: '9a958f810edf477be93394d887724c9763c57f17', name: "bottom-right" }))), this.showTextAsTooltip === true && hasAnyText(textOptions) && (h("ix-tooltip", { key: 'd3d8810548d267811e5f298fbb41f657abbae27d', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, h(HelperText$1, Object.assign({ key: '44c241959d5db7e91c00a08a843a51dfc9307256' }, textOptions))))));
+            }, ref: this.slotRef }, h("slot", { key: 'f41f0681742e9f783092bad7484c851e2b987c99' })), h("div", { key: '9db46e23621d508e08fe87cae69a3698491347dc', class: 'field-bottom' }, !this.showTextAsTooltip && h(HelperText$1, Object.assign({ key: '29802c92675a34cd215740a5df6fae77ed36368f' }, textOptions)), h("div", { key: 'b94a1cc2acd5f8379e768fda9f222af6cb85f2b7', class: "bottom-right" }, h("slot", { key: '3c5ba2d9a6d4671b6fadba6e06455ae229894f94', name: "bottom-right" }))), this.showTextAsTooltip === true && hasAnyText(textOptions) && (h("ix-tooltip", { key: '890c4a39781fbb14b96660691fd6f6fe96a30e0b', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, h(HelperText$1, Object.assign({ key: '638410fd78282cf38065635a79cceeb064a2a10e' }, textOptions))))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-filter-chip_2.entry.js

@@ -22,7 +22,7 @@ const FilterChip = class {
         this.closeClick.emit();
     }
     render() {
-        return (h(Host, { key: '03b4a6c34e034efe267406a523a902e85665b351', class: { disabled: this.disabled, readonly: this.readonly }, title: this.hostElement.textContent }, h("div", { key: '75c8992cf2e8dc2d2ff76d1579219ff4bef46fd2', class: "slot-container" }, h("slot", { key: 'ea52727be5fa2cda2f9ddaa2a7a37a1c7c1f4f91' })), !this.disabled && !this.readonly ? (h("ix-icon-button", { variant: "tertiary", oval: true, icon: iconCloseSmall, size: "16", tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: (e) => this.onCloseClick(e), "aria-label": this.ariaLabelCloseIconButton })) : null));
+        return (h(Host, { key: 'e583d14307f98b55f1ff4be4b9c3897776eaae75', class: { disabled: this.disabled, readonly: this.readonly }, title: this.hostElement.textContent }, h("div", { key: '998751b62b8266368176fe1186a6dd2f311199be', class: "slot-container" }, h("slot", { key: '2861044a08d5b237444cda5bb5fafe0bc0c97790' })), !this.disabled && !this.readonly ? (h("ix-icon-button", { variant: "tertiary", oval: true, icon: iconCloseSmall, size: "16", tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: (e) => this.onCloseClick(e), "aria-label": this.ariaLabelCloseIconButton })) : null));
     }
     get hostElement() { return getElement(this); }
 };
@@ -108,7 +108,7 @@ const SelectItem = class {
         }
     }
     render() {
-        return (h(Host, { key: '1602a154d8a1d9b4ee3d1755aea08df7a719cd37' }, h("ix-dropdown-item", { key: 'd02799ffee6add3546eafe812785b4ba9532ba6b', class: {
+        return (h(Host, { key: 'd471aafd061cccdd058502fb02f16aa79fd7d37b' }, h("ix-dropdown-item", { key: '6e57ba4665445e0ea0222f16177821a6fe53867e', class: {
                 'select-item-checked': this.selected,
             }, checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
     }

package/dist/esm/ix-flip-tile-content.entry.js

@@ -13,7 +13,7 @@ const FlipTileContent = class {
         this.contentVisible = false;
     }
     render() {
-        return h(Host, { key: '264e3539d6c5abcd8716968a4128da99ca191375' }, this.contentVisible ? h("slot", null) : null);
+        return h(Host, { key: '002fbfde1a46839d622af7fb2be6dff5ca99aa87' }, this.contentVisible ? h("slot", null) : null);
     }
 };
 FlipTileContent.style = flipTileContentCss;

package/dist/esm/ix-flip-tile.entry.js

@@ -114,7 +114,7 @@ const FlipTile = class {
         }, 2 * Animation.defaultTime);
     }
     render() {
-        return (h(Host, { key: '32727b4df750f9d1892f365a7e8d729447be05ac', class: {
+        return (h(Host, { key: 'a54038f2dbaeffac796822404e2d186c742a5357', class: {
                 [`flip-tile-variant-${this.variant}`]: true,
             }, style: {
                 height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
@@ -123,10 +123,10 @@ const FlipTile = class {
                 width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-            } }, h("div", { key: 'e58093dce55ede49f9f1782327c73918ee21d2c6', class: "flip-tile-container" }, h("div", { key: 'bd60e44b5b04177c4003936aa15d6539cd093883', class: "flip-tile-header" }, h("div", { key: '792d0e39b406fb50561f3c35c0340ee827b568e6', class: "header-slot-container text-l-title" }, h("slot", { key: '9e320aef9f89689b594c9555e154c8795dbdb233', name: "header" })), h("ix-icon-button", { key: 'dc0a042565001a79ea17e33671f4c2486b702ebf', icon: iconEye, variant: "tertiary", onClick: () => this.toggleIndex(), "aria-label": this.ariaLabelEyeIconButton })), h("div", { key: 'fa61544ccf0e16884c4d747e0e7cc174216d7906', class: "content-container" }, h("slot", { key: '1ed79120c3e926bb5f48a0e1980f5dfb785050f8' })), h("div", { key: '543216df0a9e93c9a739b921259e529eb494e751', class: {
+            } }, h("div", { key: '0bf12231b1cdeb0afe41d9d45c06fdef4cdedaf4', class: "flip-tile-container" }, h("div", { key: '3e9da89ed0b9cf7595e4c1d317d21ed1b55aa9d7', class: "flip-tile-header" }, h("div", { key: 'd4e7cc2a8162254ea3c7c4a0a031346b7a35e3d9', class: "header-slot-container text-l-title" }, h("slot", { key: 'dd9e2244a75179ceb4ac9647b403a5e2b01fd2ae', name: "header" })), h("ix-icon-button", { key: '74a5abdba3bf0c90222fc7bf7064742c0ea85b80', icon: iconEye, variant: "tertiary", onClick: () => this.toggleIndex(), "aria-label": this.ariaLabelEyeIconButton })), h("div", { key: '636884dbf0b0143e4f30061cd6e0472c83fe698a', class: "content-container" }, h("slot", { key: 'b94b3a488e7a137b06505290ab351724c5f01fca' })), h("div", { key: 'a15153c86848df2dd14b1423c686b9655d6fcdc1', class: {
                 footer: true,
                 'show-footer': this.hasFooterSlot,
-            } }, h("slot", { key: '271f61fc236be2813cec900c788fe4bfcb2c285d', name: "footer", onSlotchange: (event) => this.handleFooterSlotChange(event) })))));
+            } }, h("slot", { key: '68d0585ff19d8a29fc8ccfdb2ec6302f767e3a94', name: "footer", onSlotchange: (event) => this.handleFooterSlotChange(event) })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ix-group-context-menu_2.entry.js

@@ -34,7 +34,7 @@ const GroupContextMenu = class {
         this.configureDropdown(dropdownElement, triggerElement);
     }
     render() {
-        return (h(Host, { key: '13eed06b9866e6d59f3972d2940f752d8f245b52' }, h("ix-icon-button", { key: '6fc57583df2308b3fa234d8fd675cbcb05a55974', class: { hide: !this.showContextMenu }, size: "24", variant: "subtle-tertiary", icon: iconContextMenu }), h("slot", { key: 'b56d53e0b2154c0eefcd99fdd8eeb508457b7641', onSlotchange: () => this.onSlotChange() })));
+        return (h(Host, { key: 'd3b00dddd05f3ac944f61b8a4098883dffe2acc2' }, h("ix-icon-button", { key: '0d427b8b754020e83b4aa03686a9fea1d8fbffc0', class: { hide: !this.showContextMenu }, size: "24", variant: "subtle-tertiary", icon: iconContextMenu }), h("slot", { key: 'baef7854222010ff76fc784c50804e4f343eafc3', onSlotchange: () => this.onSlotChange() })));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-group.entry.js

@@ -136,27 +136,27 @@ const Group = class {
         }
     }
     render() {
-        return (h(Host, { key: 'b93d2c8f1290baa2983945ce349b90e95bf18696' }, h("div", { key: '3e9ce7ce3402f48bb17612a97bf9bee85767c6aa', class: {
+        return (h(Host, { key: '99b00ca8c88730036688974abd67ff0534dd4d17' }, h("div", { key: '47384431d36ce7cdc5a2e81ecd682d6a0dd13b53', class: {
                 'group-header': true,
                 expand: this.expanded,
                 selected: this.selected,
-            }, tabindex: "0" }, h("div", { key: 'daeb1087643b9f0267b3e2ba13a3973486730888', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: '9771b2df1e5b68339aa9c4689de4b2d24bc09341', class: {
+            }, tabindex: "0" }, h("div", { key: '68968fc5816ca0fef0ae658a6925cc6b8ee3479a', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: 'a26153957aa76d882d95a3f88318c01517078a64', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), h("div", { key: 'e0e1454e780614a31955720bd7b62d7bfec1b7e0', class: "btn-expand-header" }, h("ix-icon", { key: '0742c7515bbac3d3ba0221a5c3b0860d6a1792a2', "data-testid": "expand-collapsed-icon", class: {
+            } }), h("div", { key: '01427b28c1b873a1875bd4c2093fee6d900bdf89', class: "btn-expand-header" }, h("ix-icon", { key: '1feb76e98b4ebda01d902b76065cdcefa0dde5a4', "data-testid": "expand-collapsed-icon", class: {
                 hidden: !this.showExpandCollapsedIcon,
-            }, name: this.expanded ? iconChevronUpSmall : iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), h("div", { key: '4aa355b5a3a7f70977275139779000b2474a4a91', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: 'c782251ecc1044aa3f7923d8f58b7f9c28700b4f', name: "header" }))), this.hasDropdown && (h("ix-group-context-menu", { key: '0899d27a51f412aea136b00fcae9ab32859670f4' }, h("slot", { key: '76f9b3b94312879ac5e349546172e3d95aefce78', name: "dropdown" })))), h("div", { key: 'f6a6aac17d8685244c28b8c6ecd24c966985ba1b', class: {
+            }, name: this.expanded ? iconChevronUpSmall : iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), h("div", { key: '5c6232f9b9a36ccbfa2f0e9352a5e739e202e275', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: '592d03499639a45183c8837b421a33bbffbae954', name: "header" }))), this.hasDropdown && (h("ix-group-context-menu", { key: 'f666ce19d8441bd3afc40800128e6326da14615e' }, h("slot", { key: '96d9509e35fbf388d31fbc832fc31dd2167842a8', name: "dropdown" })))), h("div", { key: '3d6f649530d00fd19761bb84ed4bf8769b0bec14', class: {
                 'group-content': true,
-            } }, h("div", { key: 'f805cc015b7bf9c919ea9129500e4af8773b7f63', style: {
+            } }, h("div", { key: 'cad4a7c42f5402400add10d1d5ac57174aa34b6e', style: {
                 display: this.expanded ? 'contents' : 'none',
-            } }, h("slot", { key: '703791e124429a91a5798429443c3494d18b262d', onSlotchange: () => {
+            } }, h("slot", { key: '305a97c24f58db1e1d1264876c99316aceda6e8d', onSlotchange: () => {
                 var _a;
                 const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
                 this.showExpandCollapsedIcon = hasSlottedElements(slot);
-            } }), h("ix-group-item", { key: '5e471c137730667bd459ac80943369b59f81c544', class: {
+            } }), h("ix-group-item", { key: 'f19cce4aad2fc8465f57d94bb6a6b228204120e6', class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            }, groupFooter: true, suppressSelection: true }, h("slot", { key: '84526685ab81de426a70ecfb52db3211b4a3219b', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            }, groupFooter: true, suppressSelection: true }, h("slot", { key: 'c073314bc4528f7559c8c1cfa43b88881d7a4e49', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ix-helper-text.entry.js

@@ -48,7 +48,7 @@ const HelperText = class {
         this.validationResults = checkFieldClasses(forElement);
     }
     render() {
-        return (h(Host, { key: '95d6dfb6a163ee5e6b4d7d478780af394427548c' }, h(HelperText$1, Object.assign({ key: 'dc7f97b4cb8b2563c1a1089764e25eb63c75b583', helperText: this.helperText,
+        return (h(Host, { key: 'aa99794dc7b9c59abf2fdd8f2ac8112cf705a5ad' }, h(HelperText$1, Object.assign({ key: 'c3e36ebbae8617aa43cf2616242b035739ab4cc7', helperText: this.helperText,
             invalidText: this.invalidText,
             validText: this.validText,
             infoText: this.infoText,

package/dist/esm/ix-icon-button.ix-spinner.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-icon-button.ix-spinner.entry.js","sources":["src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx","src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","src/components/spinner/spinner.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@use './icon-button-mixin.scss';\n\n@include icon-button-mixin.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 { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport {\n  getFallbackLabelFromIconName,\n  a11yHostAttributes,\n} from '../utils/a11y';\nimport type { IconButtonVariant } from './icon-button.types';\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton {\n  @Element() hostElement!: HTMLIxIconButtonElement;\n\n  /**\n   * Accessibility label for the icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @deprecated Set the native `aria-label` on the ix-icon-button host element. Will be removed in 5.0.0\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Variant of button\n   */\n  @Prop() variant: IconButtonVariant = 'subtle-primary';\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Size of icon in button\n   *\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() iconColor?: string;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   */\n  @Prop() loading = false;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement!: HTMLButtonElement;\n\n  componentDidLoad() {\n    if (this.type === 'submit') {\n      const submitButton = document.createElement('button');\n      submitButton.style.display = 'none';\n      submitButton.type = 'submit';\n      submitButton.tabIndex = -1;\n      this.hostElement.appendChild(submitButton);\n\n      this.submitButtonElement = submitButton;\n    }\n  }\n\n  dispatchFormEvents() {\n    if (this.type === 'submit' && this.submitButtonElement) {\n      this.submitButtonElement.click();\n    }\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24' || !this.size,\n    };\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n\n    const baseButtonProps: BaseButtonProps = {\n      ariaAttributes: {\n        'aria-label':\n          a11y['aria-label'] ??\n          this.a11yLabel ??\n          getFallbackLabelFromIconName(this.icon),\n      },\n      variant: this.variant,\n      iconOnly: true,\n      iconOval: this.oval,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconColor: this.iconColor,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      extraClasses: this.getIconSizeClass(),\n    };\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n","/*\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@use 'mixins/shadow-dom/component';\n\n@mixin ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 4px) {\n  :host {\n    display: block;\n    position: relative;\n\n    @include component.ix-component;\n  }\n\n  .#{$size-name} {\n    width: $size;\n    height: $size;\n    min-width: $size;\n    min-height: $size;\n    max-width: $size;\n    max-height: $size;\n    border-radius: 100%;\n    position: relative;\n    animation: rotate 2s linear infinite;\n\n    @keyframes rotate {\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes clipMask {\n      0% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n      12.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n      }\n      25% {\n        clip-path: polygon(\n          50% 50%,\n          0 0,\n          100% 0,\n          100% 100%,\n          100% 100%,\n          100% 100%\n        );\n      }\n      37.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n      }\n      50% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      62.5% {\n        clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      75% {\n        clip-path: polygon(\n          50% 50%,\n          100% 100%,\n          100% 100%,\n          100% 100%,\n          0 100%,\n          0 0\n        );\n      }\n      87.5% {\n        clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n      }\n      100% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n    }\n  }\n\n  .#{$size-name}::after {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid\n      var(--ix-button-color, var(--theme-color-soft-text));\n    animation: clipMask 3s linear infinite;\n  }\n\n  .#{$size-name}:not(.hide-track)::before {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    //TODO(IX-3400): Replace track color with proper CSS variables when available\n    border: $track-size solid var(--theme-color-component-3);\n  }\n\n  .primary::after {\n    border-color: var(--theme-color-dynamic);\n  }\n\n  .primary::before {\n    border-color: var(--theme-color-ghost--hover);\n  }\n}\n\n@include ix-spinner($size-name: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($size-name: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($size-name: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($size-name: 'large', $size: 6rem, $track-size: 4px);\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() hostElement!: HTMLIxSpinnerElement;\n\n  /**\n   * Variant of spinner\n   */\n  @Prop() variant: 'primary' | 'secondary' = 'secondary';\n\n  /**\n   * Size of spinner\n   */\n  @Prop() size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' =\n    'medium';\n\n  /**\n   * @internal\n   */\n  @Prop() hideTrack = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            primary: this.variant === 'primary',\n            [this.size]: true,\n            'hide-track': this.hideTrack,\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ix-icon-button.ix-spinner.entry.js","sources":["src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx","src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","src/components/spinner/spinner.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@use './icon-button-mixin.scss';\n\n@include icon-button-mixin.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 { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport {\n  a11yHostAttributes,\n  getFallbackLabelFromIconName,\n} from '../utils/a11y';\nimport type { IconButtonVariant } from './icon-button.types';\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton {\n  @Element() hostElement!: HTMLIxIconButtonElement;\n\n  /**\n   * Accessibility label for the icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @deprecated Set the native `aria-label` on the ix-icon-button host element. Will be removed in 5.0.0\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Variant of button\n   */\n  @Prop() variant: IconButtonVariant = 'subtle-primary';\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Size of icon in button\n   *\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() iconColor?: string;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   */\n  @Prop() loading = false;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement!: HTMLButtonElement;\n\n  componentDidLoad() {\n    if (this.type === 'submit') {\n      const submitButton = document.createElement('button');\n      submitButton.style.display = 'none';\n      submitButton.type = 'submit';\n      submitButton.tabIndex = -1;\n      this.hostElement.appendChild(submitButton);\n\n      this.submitButtonElement = submitButton;\n    }\n  }\n\n  dispatchFormEvents() {\n    if (this.type === 'submit' && this.submitButtonElement) {\n      this.submitButtonElement.click();\n    }\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24' || !this.size,\n    };\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n\n    const baseButtonProps: BaseButtonProps = {\n      ariaAttributes: {\n        'aria-label':\n          a11y['aria-label'] ??\n          this.a11yLabel ??\n          getFallbackLabelFromIconName(this.icon),\n      },\n      variant: this.variant,\n      iconOnly: true,\n      iconOval: this.oval,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconColor: this.iconColor,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      extraClasses: this.getIconSizeClass(),\n      tabIndex: this.hostElement.hasAttribute('tabindex')\n        ? this.hostElement.tabIndex\n        : undefined,\n    };\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n","/*\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@use 'mixins/shadow-dom/component';\n\n@mixin ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 4px) {\n  :host {\n    display: block;\n    position: relative;\n\n    @include component.ix-component;\n  }\n\n  .#{$size-name} {\n    width: $size;\n    height: $size;\n    min-width: $size;\n    min-height: $size;\n    max-width: $size;\n    max-height: $size;\n    border-radius: 100%;\n    position: relative;\n    animation: rotate 2s linear infinite;\n\n    @keyframes rotate {\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes clipMask {\n      0% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n      12.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n      }\n      25% {\n        clip-path: polygon(\n          50% 50%,\n          0 0,\n          100% 0,\n          100% 100%,\n          100% 100%,\n          100% 100%\n        );\n      }\n      37.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n      }\n      50% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      62.5% {\n        clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      75% {\n        clip-path: polygon(\n          50% 50%,\n          100% 100%,\n          100% 100%,\n          100% 100%,\n          0 100%,\n          0 0\n        );\n      }\n      87.5% {\n        clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n      }\n      100% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n    }\n  }\n\n  .#{$size-name}::after {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid\n      var(--ix-button-color, var(--theme-color-soft-text));\n    animation: clipMask 3s linear infinite;\n  }\n\n  .#{$size-name}:not(.hide-track)::before {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    //TODO(IX-3400): Replace track color with proper CSS variables when available\n    border: $track-size solid var(--theme-color-component-3);\n  }\n\n  .primary::after {\n    border-color: var(--theme-color-dynamic);\n  }\n\n  .primary::before {\n    border-color: var(--theme-color-ghost--hover);\n  }\n}\n\n@include ix-spinner($size-name: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($size-name: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($size-name: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($size-name: 'large', $size: 6rem, $track-size: 4px);\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() hostElement!: HTMLIxSpinnerElement;\n\n  /**\n   * Variant of spinner\n   */\n  @Prop() variant: 'primary' | 'secondary' = 'secondary';\n\n  /**\n   * Size of spinner\n   */\n  @Prop() size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' =\n    'medium';\n\n  /**\n   * @internal\n   */\n  @Prop() hideTrack = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            primary: this.variant === 'primary',\n            [this.size]: true,\n            'hide-track': this.hideTrack,\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ix-icon-button_2.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-CtoreFVF.js';
-import { B as BaseIconButton } from './base-icon-button-B3ULQ24g.js';
+import { B as BaseIconButton } from './base-icon-button-rBR4ri6c.js';
 import { b as a11yHostAttributes, g as getFallbackLabelFromIconName } from './a11y-Bb7pDeaQ.js';
-import './base-button-TVpiK7pg.js';
+import './base-button-D4FlHdn0.js';
 
 const iconButtonCss = ":host{--ix-button-border-radius-left:var(--theme-btn--border-radius);--ix-button-border-radius-right:var(--theme-btn--border-radius);display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button,:host a{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 .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none;margin-right:0.25rem}:host .icon-right{margin-left:0.25rem}:host(.disabled){cursor:default}:host{--ix-button-border-radius-left:var(--theme-btn--border-radius);--ix-button-border-radius-right:var(--theme-btn--border-radius);display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button,:host a{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 .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none;margin-right:0.25rem}:host .icon-right{margin-left:0.25rem}:host(.disabled){cursor:default}:host .btn-primary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}: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-btn-primary--background--pressed);color:var(--theme-btn-primary--color--pressed)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-primary--background--pressed-hover);color:var(--theme-btn-primary--color--pressed-hover)}: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-btn-primary--background--pressed-hover);color:var(--theme-btn-primary--color--pressed-active)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover,: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){pointer-events:none}: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-secondary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}: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-btn-secondary--background--pressed);color:var(--theme-btn-secondary--color--pressed)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-secondary--background--pressed-hover);color:var(--theme-btn-secondary--color--pressed-hover)}: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-btn-secondary--background--pressed-hover);color:var(--theme-btn-secondary--color--pressed-active)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover,: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){pointer-events:none}: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-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-tertiary,:host .btn-tertiary.focus,:host .btn-tertiary:focus-visible{background-color:var(--theme-btn-tertiary--background);color:var(--theme-btn-tertiary--color);--ix-button-color:var(--theme-btn-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-tertiary--border-color);border-style:solid}:host .btn-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-tertiary.selected{background-color:var(--theme-btn-tertiary--background--pressed);color:var(--theme-btn-tertiary--color--pressed)}:host .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-hover)}:host .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-active)}:host .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary:not(.disabled):not(:disabled):hover,:host .btn-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-tertiary--border-color--hover);background-color:var(--theme-btn-tertiary--background--hover);color:var(--theme-btn-tertiary--color--hover)}:host .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary:not(.disabled):not(:disabled):active,:host .btn-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-tertiary--border-color--active);background-color:var(--theme-btn-tertiary--background--active);color:var(--theme-btn-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-tertiary.disabled,:host(.disabled) .btn-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-tertiary--border-color--disabled);background-color:var(--theme-btn-tertiary--background--disabled);color:var(--theme-btn-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-tertiary--color--disabled)}:host .btn-subtle-primary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-primary,:host .btn-subtle-primary.focus,:host .btn-subtle-primary:focus-visible{background-color:var(--theme-btn-subtle-primary--background);color:var(--theme-btn-subtle-primary--color);--ix-button-color:var(--theme-btn-subtle-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-primary--border-color);border-style:solid}:host .btn-subtle-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-subtle-primary.selected{background-color:var(--theme-btn-subtle-primary--background--pressed);color:var(--theme-btn-subtle-primary--color--pressed)}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-primary--background--pressed-hover);color:var(--theme-btn-subtle-primary--color--pressed-hover)}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-primary--background--pressed-hover);color:var(--theme-btn-subtle-primary--color--pressed-active)}:host .btn-subtle-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary:not(.disabled):not(:disabled):hover,:host .btn-subtle-primary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-primary--border-color--hover);background-color:var(--theme-btn-subtle-primary--background--hover);color:var(--theme-btn-subtle-primary--color--hover)}:host .btn-subtle-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary:not(.disabled):not(:disabled):active,:host .btn-subtle-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-primary--border-color--active);background-color:var(--theme-btn-subtle-primary--background--active);color:var(--theme-btn-subtle-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-primary.disabled,:host(.disabled) .btn-subtle-primary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-primary--border-color--disabled);background-color:var(--theme-btn-subtle-primary--background--disabled);color:var(--theme-btn-subtle-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-primary--color--disabled)}:host .btn-subtle-secondary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-secondary,:host .btn-subtle-secondary.focus,:host .btn-subtle-secondary:focus-visible{background-color:var(--theme-btn-subtle-secondary--background);color:var(--theme-btn-subtle-secondary--color);--ix-button-color:var(--theme-btn-subtle-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-secondary--border-color);border-style:solid}:host .btn-subtle-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-subtle-secondary.selected{background-color:var(--theme-btn-subtle-secondary--background--pressed);color:var(--theme-btn-subtle-secondary--color--pressed)}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-secondary--background--pressed-hover);color:var(--theme-btn-subtle-secondary--color--pressed-hover)}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-secondary--background--pressed-hover);color:var(--theme-btn-subtle-secondary--color--pressed-active)}:host .btn-subtle-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary:not(.disabled):not(:disabled):hover,:host .btn-subtle-secondary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-secondary--border-color--hover);background-color:var(--theme-btn-subtle-secondary--background--hover);color:var(--theme-btn-subtle-secondary--color--hover)}:host .btn-subtle-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary:not(.disabled):not(:disabled):active,:host .btn-subtle-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-secondary--border-color--active);background-color:var(--theme-btn-subtle-secondary--background--active);color:var(--theme-btn-subtle-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-secondary.disabled,:host(.disabled) .btn-subtle-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-secondary--border-color--disabled);background-color:var(--theme-btn-subtle-secondary--background--disabled);color:var(--theme-btn-subtle-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-secondary--color--disabled)}:host .btn-subtle-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-tertiary,:host .btn-subtle-tertiary.focus,:host .btn-subtle-tertiary:focus-visible{background-color:var(--theme-btn-subtle-tertiary--background);color:var(--theme-btn-subtle-tertiary--color);--ix-button-color:var(--theme-btn-subtle-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-tertiary--border-color);border-style:solid}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-subtle-tertiary.selected{background-color:var(--theme-btn-subtle-tertiary--background--pressed);color:var(--theme-btn-subtle-tertiary--color--pressed)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-hover)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-active)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-tertiary--border-color--hover);background-color:var(--theme-btn-subtle-tertiary--background--hover);color:var(--theme-btn-subtle-tertiary--color--hover)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-tertiary--border-color--active);background-color:var(--theme-btn-subtle-tertiary--background--active);color:var(--theme-btn-subtle-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-tertiary.disabled,:host(.disabled) .btn-subtle-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-tertiary--border-color--disabled);background-color:var(--theme-btn-subtle-tertiary--background--disabled);color:var(--theme-btn-subtle-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-tertiary--color--disabled)}:host .btn-danger-primary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-primary,:host .btn-danger-primary.focus,:host .btn-danger-primary:focus-visible{background-color:var(--theme-btn-danger-primary--background);color:var(--theme-btn-danger-primary--color);--ix-button-color:var(--theme-btn-danger-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-primary--border-color);border-style:solid}:host .btn-danger-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-danger-primary.selected{background-color:var(--theme-btn-danger-primary--background--pressed);color:var(--theme-btn-danger-primary--color--pressed)}:host .btn-danger-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-primary--background--pressed-hover);color:var(--theme-btn-danger-primary--color--pressed-hover)}:host .btn-danger-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-primary--background--pressed-hover);color:var(--theme-btn-danger-primary--color--pressed-active)}:host .btn-danger-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary:not(.disabled):not(:disabled):hover,:host .btn-danger-primary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-primary--border-color--hover);background-color:var(--theme-btn-danger-primary--background--hover);color:var(--theme-btn-danger-primary--color--hover)}:host .btn-danger-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary:not(.disabled):not(:disabled):active,:host .btn-danger-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger-primary--border-color--active);background-color:var(--theme-btn-danger-primary--background--active);color:var(--theme-btn-danger-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger-primary.disabled,:host(.disabled) .btn-danger-primary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-primary--border-color--disabled);background-color:var(--theme-btn-danger-primary--background--disabled);color:var(--theme-btn-danger-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-primary--color--disabled)}:host .btn-danger-secondary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-secondary,:host .btn-danger-secondary.focus,:host .btn-danger-secondary:focus-visible{background-color:var(--theme-btn-danger-secondary--background);color:var(--theme-btn-danger-secondary--color);--ix-button-color:var(--theme-btn-danger-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-secondary--border-color);border-style:solid}:host .btn-danger-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-danger-secondary.selected{background-color:var(--theme-btn-danger-secondary--background--pressed);color:var(--theme-btn-danger-secondary--color--pressed)}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-secondary--background--pressed-hover);color:var(--theme-btn-danger-secondary--color--pressed-hover)}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-secondary--background--pressed-hover);color:var(--theme-btn-danger-secondary--color--pressed-active)}:host .btn-danger-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary:not(.disabled):not(:disabled):hover,:host .btn-danger-secondary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-secondary--border-color--hover);background-color:var(--theme-btn-danger-secondary--background--hover);color:var(--theme-btn-danger-secondary--color--hover)}:host .btn-danger-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary:not(.disabled):not(:disabled):active,:host .btn-danger-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger-secondary--border-color--active);background-color:var(--theme-btn-danger-secondary--background--active);color:var(--theme-btn-danger-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger-secondary.disabled,:host(.disabled) .btn-danger-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-secondary--border-color--disabled);background-color:var(--theme-btn-danger-secondary--background--disabled);color:var(--theme-btn-danger-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-secondary--color--disabled)}:host .btn-danger-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-tertiary,:host .btn-danger-tertiary.focus,:host .btn-danger-tertiary:focus-visible{background-color:var(--theme-btn-danger-tertiary--background);color:var(--theme-btn-danger-tertiary--color);--ix-button-color:var(--theme-btn-danger-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-tertiary--border-color);border-style:solid}:host .btn-danger-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger-tertiary.selected{background-color:var(--theme-btn-danger-tertiary--background--pressed);color:var(--theme-btn-danger-tertiary--color--pressed)}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-tertiary--background--pressed-hover);color:var(--theme-btn-danger-tertiary--color--pressed-hover)}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-tertiary--background--pressed-hover);color:var(--theme-btn-danger-tertiary--color--pressed-active)}:host .btn-danger-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary:not(.disabled):not(:disabled):hover,:host .btn-danger-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-tertiary--border-color--hover);background-color:var(--theme-btn-danger-tertiary--background--hover);color:var(--theme-btn-danger-tertiary--color--hover)}:host .btn-danger-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary:not(.disabled):not(:disabled):active,:host .btn-danger-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger-tertiary--border-color--active);background-color:var(--theme-btn-danger-tertiary--background--active);color:var(--theme-btn-danger-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger-tertiary.disabled,:host(.disabled) .btn-danger-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-tertiary--border-color--disabled);background-color:var(--theme-btn-danger-tertiary--background--disabled);color:var(--theme-btn-danger-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-tertiary--color--disabled)}*,*::after,*::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){*{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}::-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{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 .icon{color:var(--ix-icon-button-color, currentColor);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}";
 
@@ -75,8 +75,11 @@ const IconButton = class {
             onClick: () => this.dispatchFormEvents(),
             type: this.type,
             extraClasses: this.getIconSizeClass(),
+            tabIndex: this.hostElement.hasAttribute('tabindex')
+                ? this.hostElement.tabIndex
+                : undefined,
         };
-        return (h(Host, { key: '04486b7d26d2b34a920b53f683b3b1b591b95311', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '94936955261d6fc13e78ea98ddb3cf98d3fda058' }, baseButtonProps))));
+        return (h(Host, { key: '2acf097d64918e4f19ead5560414cb07e791fe8c', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: 'b7e2432d7cc3362048c1e65d642e3abef43dec82' }, baseButtonProps))));
     }
     get hostElement() { return getElement(this); }
 };
@@ -101,7 +104,7 @@ const Spinner = class {
         this.hideTrack = false;
     }
     render() {
-        return (h(Host, { key: '6f99a58994e1eb03a05b6af195b843094ebea59b' }, h("div", { key: '01ff7d8f23eb80440970086c8791471623cfe424', class: {
+        return (h(Host, { key: '8aa6edb9059ebaafe7f052083ca680c2bc5df2cc' }, h("div", { key: 'ef628ecd03a1a6b3cdd36d90fb60676fc03fc90d', class: {
                 primary: this.variant === 'primary',
                 [this.size]: true,
                 'hide-track': this.hideTrack,

package/dist/esm/ix-icon-toggle-button.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CtoreFVF.js';
-import { B as BaseIconButton } from './base-icon-button-B3ULQ24g.js';
+import { B as BaseIconButton } from './base-icon-button-rBR4ri6c.js';
 import { a as a11yBoolean } from './a11y-Bb7pDeaQ.js';
-import './base-button-TVpiK7pg.js';
+import './base-button-D4FlHdn0.js';
 
 const iconToggleButtonCss = ":host{--ix-button-border-radius-left:var(--theme-btn--border-radius);--ix-button-border-radius-right:var(--theme-btn--border-radius);display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button,:host a{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 .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none;margin-right:0.25rem}:host .icon-right{margin-left:0.25rem}:host(.disabled){cursor:default}:host{--ix-button-border-radius-left:var(--theme-btn--border-radius);--ix-button-border-radius-right:var(--theme-btn--border-radius);display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button,:host a{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 .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none;margin-right:0.25rem}:host .icon-right{margin-left:0.25rem}:host(.disabled){cursor:default}:host .btn-primary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}: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-btn-primary--background--pressed);color:var(--theme-btn-primary--color--pressed)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-primary--background--pressed-hover);color:var(--theme-btn-primary--color--pressed-hover)}: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-btn-primary--background--pressed-hover);color:var(--theme-btn-primary--color--pressed-active)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover,: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){pointer-events:none}: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-secondary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}: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-btn-secondary--background--pressed);color:var(--theme-btn-secondary--color--pressed)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-secondary--background--pressed-hover);color:var(--theme-btn-secondary--color--pressed-hover)}: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-btn-secondary--background--pressed-hover);color:var(--theme-btn-secondary--color--pressed-active)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover,: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){pointer-events:none}: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-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-tertiary,:host .btn-tertiary.focus,:host .btn-tertiary:focus-visible{background-color:var(--theme-btn-tertiary--background);color:var(--theme-btn-tertiary--color);--ix-button-color:var(--theme-btn-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-tertiary--border-color);border-style:solid}:host .btn-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-tertiary.selected{background-color:var(--theme-btn-tertiary--background--pressed);color:var(--theme-btn-tertiary--color--pressed)}:host .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-hover)}:host .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-active)}:host .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary:not(.disabled):not(:disabled):hover,:host .btn-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-tertiary--border-color--hover);background-color:var(--theme-btn-tertiary--background--hover);color:var(--theme-btn-tertiary--color--hover)}:host .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary:not(.disabled):not(:disabled):active,:host .btn-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-tertiary--border-color--active);background-color:var(--theme-btn-tertiary--background--active);color:var(--theme-btn-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-tertiary.disabled,:host(.disabled) .btn-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-tertiary--border-color--disabled);background-color:var(--theme-btn-tertiary--background--disabled);color:var(--theme-btn-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-tertiary--color--disabled)}:host .btn-subtle-primary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-primary,:host .btn-subtle-primary.focus,:host .btn-subtle-primary:focus-visible{background-color:var(--theme-btn-subtle-primary--background);color:var(--theme-btn-subtle-primary--color);--ix-button-color:var(--theme-btn-subtle-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-primary--border-color);border-style:solid}:host .btn-subtle-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-subtle-primary.selected{background-color:var(--theme-btn-subtle-primary--background--pressed);color:var(--theme-btn-subtle-primary--color--pressed)}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-primary--background--pressed-hover);color:var(--theme-btn-subtle-primary--color--pressed-hover)}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-primary--background--pressed-hover);color:var(--theme-btn-subtle-primary--color--pressed-active)}:host .btn-subtle-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary:not(.disabled):not(:disabled):hover,:host .btn-subtle-primary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-primary--border-color--hover);background-color:var(--theme-btn-subtle-primary--background--hover);color:var(--theme-btn-subtle-primary--color--hover)}:host .btn-subtle-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary:not(.disabled):not(:disabled):active,:host .btn-subtle-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-primary--border-color--active);background-color:var(--theme-btn-subtle-primary--background--active);color:var(--theme-btn-subtle-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-primary.disabled,:host(.disabled) .btn-subtle-primary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-primary--border-color--disabled);background-color:var(--theme-btn-subtle-primary--background--disabled);color:var(--theme-btn-subtle-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-primary--color--disabled)}:host .btn-subtle-secondary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-secondary,:host .btn-subtle-secondary.focus,:host .btn-subtle-secondary:focus-visible{background-color:var(--theme-btn-subtle-secondary--background);color:var(--theme-btn-subtle-secondary--color);--ix-button-color:var(--theme-btn-subtle-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-secondary--border-color);border-style:solid}:host .btn-subtle-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-subtle-secondary.selected{background-color:var(--theme-btn-subtle-secondary--background--pressed);color:var(--theme-btn-subtle-secondary--color--pressed)}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-secondary--background--pressed-hover);color:var(--theme-btn-subtle-secondary--color--pressed-hover)}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-secondary--background--pressed-hover);color:var(--theme-btn-subtle-secondary--color--pressed-active)}:host .btn-subtle-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary:not(.disabled):not(:disabled):hover,:host .btn-subtle-secondary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-secondary--border-color--hover);background-color:var(--theme-btn-subtle-secondary--background--hover);color:var(--theme-btn-subtle-secondary--color--hover)}:host .btn-subtle-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary:not(.disabled):not(:disabled):active,:host .btn-subtle-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-secondary--border-color--active);background-color:var(--theme-btn-subtle-secondary--background--active);color:var(--theme-btn-subtle-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-secondary.disabled,:host(.disabled) .btn-subtle-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-secondary--border-color--disabled);background-color:var(--theme-btn-subtle-secondary--background--disabled);color:var(--theme-btn-subtle-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-secondary--color--disabled)}:host .btn-subtle-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-tertiary,:host .btn-subtle-tertiary.focus,:host .btn-subtle-tertiary:focus-visible{background-color:var(--theme-btn-subtle-tertiary--background);color:var(--theme-btn-subtle-tertiary--color);--ix-button-color:var(--theme-btn-subtle-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-tertiary--border-color);border-style:solid}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-subtle-tertiary.selected{background-color:var(--theme-btn-subtle-tertiary--background--pressed);color:var(--theme-btn-subtle-tertiary--color--pressed)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-hover)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-active)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-tertiary--border-color--hover);background-color:var(--theme-btn-subtle-tertiary--background--hover);color:var(--theme-btn-subtle-tertiary--color--hover)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-tertiary--border-color--active);background-color:var(--theme-btn-subtle-tertiary--background--active);color:var(--theme-btn-subtle-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-subtle-tertiary.disabled,:host(.disabled) .btn-subtle-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-tertiary--border-color--disabled);background-color:var(--theme-btn-subtle-tertiary--background--disabled);color:var(--theme-btn-subtle-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-tertiary--color--disabled)}:host .btn-danger-primary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-primary,:host .btn-danger-primary.focus,:host .btn-danger-primary:focus-visible{background-color:var(--theme-btn-danger-primary--background);color:var(--theme-btn-danger-primary--color);--ix-button-color:var(--theme-btn-danger-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-primary--border-color);border-style:solid}:host .btn-danger-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-danger-primary.selected{background-color:var(--theme-btn-danger-primary--background--pressed);color:var(--theme-btn-danger-primary--color--pressed)}:host .btn-danger-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-primary--background--pressed-hover);color:var(--theme-btn-danger-primary--color--pressed-hover)}:host .btn-danger-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-primary--background--pressed-hover);color:var(--theme-btn-danger-primary--color--pressed-active)}:host .btn-danger-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary:not(.disabled):not(:disabled):hover,:host .btn-danger-primary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-primary--border-color--hover);background-color:var(--theme-btn-danger-primary--background--hover);color:var(--theme-btn-danger-primary--color--hover)}:host .btn-danger-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary:not(.disabled):not(:disabled):active,:host .btn-danger-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger-primary--border-color--active);background-color:var(--theme-btn-danger-primary--background--active);color:var(--theme-btn-danger-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger-primary.disabled,:host(.disabled) .btn-danger-primary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-primary--border-color--disabled);background-color:var(--theme-btn-danger-primary--background--disabled);color:var(--theme-btn-danger-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-primary--color--disabled)}:host .btn-danger-secondary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-secondary,:host .btn-danger-secondary.focus,:host .btn-danger-secondary:focus-visible{background-color:var(--theme-btn-danger-secondary--background);color:var(--theme-btn-danger-secondary--color);--ix-button-color:var(--theme-btn-danger-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-secondary--border-color);border-style:solid}:host .btn-danger-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-danger-secondary.selected{background-color:var(--theme-btn-danger-secondary--background--pressed);color:var(--theme-btn-danger-secondary--color--pressed)}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-secondary--background--pressed-hover);color:var(--theme-btn-danger-secondary--color--pressed-hover)}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-secondary--background--pressed-hover);color:var(--theme-btn-danger-secondary--color--pressed-active)}:host .btn-danger-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary:not(.disabled):not(:disabled):hover,:host .btn-danger-secondary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-secondary--border-color--hover);background-color:var(--theme-btn-danger-secondary--background--hover);color:var(--theme-btn-danger-secondary--color--hover)}:host .btn-danger-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary:not(.disabled):not(:disabled):active,:host .btn-danger-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger-secondary--border-color--active);background-color:var(--theme-btn-danger-secondary--background--active);color:var(--theme-btn-danger-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger-secondary.disabled,:host(.disabled) .btn-danger-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-secondary--border-color--disabled);background-color:var(--theme-btn-danger-secondary--background--disabled);color:var(--theme-btn-danger-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-secondary--color--disabled)}:host .btn-danger-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-tertiary,:host .btn-danger-tertiary.focus,:host .btn-danger-tertiary:focus-visible{background-color:var(--theme-btn-danger-tertiary--background);color:var(--theme-btn-danger-tertiary--color);--ix-button-color:var(--theme-btn-danger-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-tertiary--border-color);border-style:solid}:host .btn-danger-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger-tertiary.selected{background-color:var(--theme-btn-danger-tertiary--background--pressed);color:var(--theme-btn-danger-tertiary--color--pressed)}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-tertiary--background--pressed-hover);color:var(--theme-btn-danger-tertiary--color--pressed-hover)}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-tertiary--background--pressed-hover);color:var(--theme-btn-danger-tertiary--color--pressed-active)}:host .btn-danger-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary:not(.disabled):not(:disabled):hover,:host .btn-danger-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-tertiary--border-color--hover);background-color:var(--theme-btn-danger-tertiary--background--hover);color:var(--theme-btn-danger-tertiary--color--hover)}:host .btn-danger-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary:not(.disabled):not(:disabled):active,:host .btn-danger-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger-tertiary--border-color--active);background-color:var(--theme-btn-danger-tertiary--background--active);color:var(--theme-btn-danger-tertiary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger-tertiary.disabled,:host(.disabled) .btn-danger-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-tertiary--border-color--disabled);background-color:var(--theme-btn-danger-tertiary--background--disabled);color:var(--theme-btn-danger-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-tertiary--color--disabled)}*,*::after,*::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){*{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}::-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{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 .icon{color:var(--ix-icon-button-color, currentColor);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}";
 
@@ -73,7 +73,7 @@ const IconToggleButton = class {
             },
             extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
         };
-        return (h(Host, { key: 'cac43636bbec0b7a783309bc8acfff59dc899077', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: 'c1476c415753b630b480542ea220854ecb8c56a9' }, baseButtonProps))));
+        return (h(Host, { key: '7e569390966cec8f23e66418506df999e26aeebd', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: 'b055971a9ea7d2bd859c5c71ceaf0d39e05e1b54' }, baseButtonProps))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-input-group.entry.js

@@ -118,7 +118,7 @@ const InputGroup = class {
         return width;
     }
     render() {
-        return (h(Host, { key: 'c47a7aab493e832b0d2c14d81bbf10b666f23f6c', class: { disabled: this.disabled } }, h("div", { key: '44cac00e7f527e3a8f12fbb6a0698cbc4e81feeb', class: "group group-start" }, h("slot", { key: '030a2cc484426f92ac56570567d3b6dbec70c615', ref: (el) => (this.startSlotRef = el), name: "input-start" })), h("slot", { key: '36a4cd0a41f2dc250cc24024b2f6470d29948e9b' }), h("div", { key: 'b6f0a7c2651d27bfd8392176c239190d4fe26d9c', class: "group group-end" }, h("slot", { key: '9d9dbff6897c41627ca0d7e133bdecbd68a373b8', ref: (el) => (this.endSlotRef = el), name: "input-end" }))));
+        return (h(Host, { key: 'b148a7e4ed2a11c543a98a6247797da3415b9bba', class: { disabled: this.disabled } }, h("div", { key: '6aac120f6d3cad989a4409978760fb752c556711', class: "group group-start" }, h("slot", { key: 'f2b68f9fd6b449b560823db825f04a6d154baf91', ref: (el) => (this.startSlotRef = el), name: "input-start" })), h("slot", { key: '7aa651f145806d7c24ad00af93d9dfd267a9ce02' }), h("div", { key: 'd6214bd6949bd22bdc62582d0f0089f884b5c6af', class: "group group-end" }, h("slot", { key: '8eb65c2a35f67a2436c58cc8b04605f4d80b74f2', ref: (el) => (this.endSlotRef = el), name: "input-end" }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-input.entry.js

@@ -146,13 +146,13 @@ const Input = class {
     render() {
         var _a, _b;
         const inputAria = getAriaAttributesForInput(this);
-        return (h(Host, { key: '07337a899a3b73d3cb37b1fc84da266d95cff84a', class: {
+        return (h(Host, { key: '406a4e193377deed02588cf4472f5a9cdadee3f2', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '64461a842b4a784192fd7ab9fdc972bd4810785a', htmlForLabel: this.inputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: 'aac87eb96cb2cba4b9f86527b6d7784d0a015474', class: "input-wrapper" }, h(SlotStart, { key: '87bcf8d63bd1a4020a680bc2b6def8034a9d65de', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: 'f6b81c671a36b00bde716d72a40c17b6cd409c24', id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
+            } }, h("ix-field-wrapper", { key: 'cc104d9630112c8d688417accf37b0e94f1bd1c1', htmlForLabel: this.inputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: 'ddf0d5030a06eb966a6853ada6ab52ad0c2661d2', class: "input-wrapper" }, h(SlotStart, { key: 'e3cec3c75def9eef6fd0b66a28ac5e844663a813', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: '78fcf785c85c7260ac7d04e7e6e63e14dacba886', id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
                 onInputBlur(this, this.inputRef.current);
                 this.touched = true;
-            }, ariaAttributes: inputAria, form: (_a = this.formInternals.form) !== null && _a !== void 0 ? _a : undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), h(SlotEnd, { key: 'c8f10373d93bba50d0c633b77fd7ec548e4590d5', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { key: '169c36e6719204de19756a1cf8c0a7c141119417', color: "color-weak-text", class: {
+            }, ariaAttributes: inputAria, form: (_a = this.formInternals.form) !== null && _a !== void 0 ? _a : undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), h(SlotEnd, { key: '3f3add18b0970f05509463b7fcccc64bf06cae96', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { key: 'adc28dadd45db5e1cd2ba351aca4478585b4d850', color: "color-weak-text", class: {
                 'password-eye': true,
                 'eye-hidden': this.type !== 'password' || this.disabled,
             }, variant: "tertiary", icon: this.inputType === 'password' ? iconEye : iconEyeCancelled, onClick: () => {
@@ -161,7 +161,7 @@ const Input = class {
                     return;
                 }
                 this.inputType = 'password';
-            } }))), !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: 'd4041de277ec45534274a6a4a739ff90cd4b98c1', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_b = this.value) !== null && _b !== void 0 ? _b : '').length, "/", this.maxLength)))));
+            } }))), !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: '0990225bc71107d2863aef15564fee5bef14a7b0', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_b = this.value) !== null && _b !== void 0 ? _b : '').length, "/", this.maxLength)))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }