@siemens/ix 0.0.0-pr-2238-20251103105018 → 0.0.0-pr-2297-20251204163058

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

@@ -1 +1 @@
-{"file":"ix-radio-group.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/radio-group/radio-group.scss?tag=ix-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.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 */\n@use 'mixins/shadow-dom/component';\n\n:host {\n  display: inline-block;\n  position: relative;\n\n  .checkbox-container {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem 1rem;\n    margin: 0.375rem 0;\n    flex-wrap: wrap;\n\n    &.row-layout {\n      flex-direction: row;\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 */\nimport {\n  Component,\n  Element,\n  EventEmitter,\n  Host,\n  Event,\n  Listen,\n  Prop,\n  State,\n  h,\n  Watch,\n  Method,\n} from '@stencil/core';\nimport {\n  ValidationResults,\n  HookValidationLifecycle,\n  FieldWrapperInterface,\n  IxFormValidationState,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\n\n/**\n * @form-ready\n */\n@Component({\n  tag: 'ix-radio-group',\n  styleUrl: 'radio-group.scss',\n  shadow: true,\n})\nexport class RadiobuttonGroup\n  implements FieldWrapperInterface, IxFormValidationState\n{\n  @Element() hostElement!: HTMLIxRadioGroupElement;\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   * Value of the radiobutton group component\n   */\n  @Prop() value?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: 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   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * Alignment of the radio buttons in the group\n   */\n  @Prop() direction: 'column' | 'row' = 'column';\n\n  /**\n   * Required state of the checkbox component\n   *\n   * @internal\n   */\n  @Prop() required?: boolean = false;\n\n  /**\n   * Event emitted when the value of the radiobutton group changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n\n  private touched = false;\n  private readonly groupRef = makeRef<HTMLElement>();\n\n  private readonly observer = new MutationObserver(() => {\n    this.ensureOnlyLastRadioChecked();\n    this.hasNestedRequiredRadio();\n  });\n\n  private get radiobuttonElements() {\n    return Array.from(this.hostElement.querySelectorAll('ix-radio'));\n  }\n\n  connectedCallback(): void {\n    this.observer.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['checked', 'required'],\n    });\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.selectInitialValue();\n    this.ensureOnlyLastRadioChecked();\n    this.hasNestedRequiredRadio();\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private selectInitialValue() {\n    if (!this.value) {\n      return;\n    }\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === this.value;\n    });\n  }\n\n  private ensureOnlyLastRadioChecked() {\n    const checkedRadios = this.radiobuttonElements.filter(\n      (radio) => radio.checked\n    );\n    checkedRadios.forEach((radio, index) => {\n      if (index === checkedRadios.length - 1) {\n        return;\n      }\n      radio.checked = false;\n    });\n  }\n\n  private hasNestedRequiredRadio() {\n    this.required = this.radiobuttonElements.some(\n      (radiobutton) => radiobutton.required\n    );\n  }\n\n  @Watch('value')\n  onValueChangeHandler(newValue: string) {\n    this.touched = true;\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === newValue;\n    });\n  }\n\n  @Listen('checkedChange')\n  onCheckedChangeHandler(event: CustomEvent<boolean>) {\n    this.radiobuttonElements.forEach((radiobutton) => {\n      if (radiobutton !== event.target) {\n        radiobutton.checked = false;\n        return;\n      }\n      radiobutton.checked = true;\n      this.valueChange.emit(radiobutton.value);\n    });\n  }\n\n  @HookValidationLifecycle({\n    includeChildren: true,\n  })\n  onClassField({\n    isInvalid,\n    isInfo,\n    isValid,\n    isWarning,\n    isInvalidByRequired,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid || isInvalidByRequired;\n    this.isInfo = isInfo;\n    this.isValid = isValid;\n    this.isWarning = isWarning;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(\n      !!Array.from(this.hostElement.querySelectorAll('ix-radio')).find(\n        (radio) => radio.checked\n      )\n    );\n  }\n\n  /** @internal */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  render() {\n    return (\n      <Host onIxBlur={() => (this.touched = true)} ref={this.groupRef}>\n        <ix-field-wrapper\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          isInvalid={this.isInvalid}\n          controlRef={this.groupRef}\n        >\n          <div\n            class={{\n              'checkbox-container': true,\n              'row-layout': this.direction === 'row',\n            }}\n          >\n            <slot></slot>\n          </div>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-radio-group.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/radio-group/radio-group.scss?tag=ix-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.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 */\n@use 'mixins/shadow-dom/component';\n\n:host {\n  display: inline-block;\n  position: relative;\n\n  .checkbox-container {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem 1rem;\n    margin: 0.375rem 0;\n    flex-wrap: wrap;\n\n    &.row-layout {\n      flex-direction: row;\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 */\nimport {\n  Component,\n  Element,\n  EventEmitter,\n  Host,\n  Event,\n  Listen,\n  Prop,\n  State,\n  h,\n  Watch,\n  Method,\n} from '@stencil/core';\nimport {\n  ValidationResults,\n  HookValidationLifecycle,\n  FieldWrapperInterface,\n  IxFormValidationState,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\n\n/**\n * @form-ready\n */\n@Component({\n  tag: 'ix-radio-group',\n  styleUrl: 'radio-group.scss',\n  shadow: true,\n})\nexport class RadiobuttonGroup\n  implements FieldWrapperInterface, IxFormValidationState\n{\n  @Element() hostElement!: HTMLIxRadioGroupElement;\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   * Value of the radiobutton group component\n   */\n  @Prop() value?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: 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   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * Alignment of the radio buttons in the group\n   */\n  @Prop() direction: 'column' | 'row' = 'column';\n\n  /**\n   * Required state of the checkbox component\n   *\n   * @internal\n   */\n  @Prop() required?: boolean = false;\n\n  /**\n   * Event emitted when the value of the radiobutton group changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n\n  private touched = false;\n  private readonly groupRef = makeRef<HTMLElement>();\n\n  private readonly observer = new MutationObserver(() => {\n    this.ensureOnlyLastRadioChecked();\n    this.hasNestedRequiredRadio();\n  });\n\n  private get radiobuttonElements() {\n    return Array.from(this.hostElement.querySelectorAll('ix-radio'));\n  }\n\n  connectedCallback(): void {\n    this.observer.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['checked', 'required'],\n    });\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.selectInitialValue();\n    this.ensureOnlyLastRadioChecked();\n    this.hasNestedRequiredRadio();\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private selectInitialValue() {\n    if (!this.value) {\n      return;\n    }\n\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === this.value;\n    });\n  }\n\n  private ensureOnlyLastRadioChecked() {\n    const checkedRadios = this.radiobuttonElements.filter(\n      (radio) => radio.checked\n    );\n    checkedRadios.forEach((radio, index) => {\n      if (index === checkedRadios.length - 1) {\n        return;\n      }\n      radio.checked = false;\n    });\n\n    const hasCheckedRadio = this.isSomeRadioChecked();\n\n    for (const radio of this.radiobuttonElements) {\n      radio.tabIndex = radio.checked ? 0 : -1;\n    }\n\n    if (!hasCheckedRadio && this.radiobuttonElements.length > 0) {\n      this.radiobuttonElements[0].tabIndex = 0;\n    }\n  }\n\n  private hasNestedRequiredRadio() {\n    this.required = this.radiobuttonElements.some(\n      (radiobutton) => radiobutton.required\n    );\n  }\n\n  private isSomeRadioChecked() {\n    return this.radiobuttonElements.some((radio) => radio.checked);\n  }\n\n  @Watch('value')\n  onValueChangeHandler(newValue: string) {\n    this.touched = true;\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === newValue;\n    });\n  }\n\n  @Listen('checkedChange')\n  onCheckedChangeHandler(event: CustomEvent<boolean>) {\n    this.radiobuttonElements.forEach((radiobutton) => {\n      if (radiobutton !== event.target) {\n        radiobutton.checked = false;\n        return;\n      }\n      radiobutton.checked = true;\n      this.valueChange.emit(radiobutton.value);\n    });\n  }\n\n  @HookValidationLifecycle({\n    includeChildren: true,\n  })\n  onClassField({\n    isInvalid,\n    isInfo,\n    isValid,\n    isWarning,\n    isInvalidByRequired,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid || isInvalidByRequired;\n    this.isInfo = isInfo;\n    this.isValid = isValid;\n    this.isWarning = isWarning;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(\n      !!Array.from(this.hostElement.querySelectorAll('ix-radio')).find(\n        (radio) => radio.checked\n      )\n    );\n  }\n\n  /** @internal */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  /** @internal */\n  @Method()\n  async setCheckedToNextItem(\n    currentRadio: HTMLIxRadioElement,\n    forward = true\n  ): Promise<void> {\n    const { radiobuttonElements } = this;\n    const { length } = radiobuttonElements;\n    if (length <= 1) {\n      return;\n    }\n\n    const index = radiobuttonElements.indexOf(currentRadio);\n    const step = forward ? 1 : -1;\n    let nextIndex = (index + step + length) % length;\n\n    while (radiobuttonElements[nextIndex].disabled) {\n      if (nextIndex === index) {\n        return;\n      }\n      nextIndex = (nextIndex + step + length) % length;\n    }\n\n    const nextRadio = radiobuttonElements[nextIndex];\n    nextRadio.setCheckedState(true);\n    nextRadio.focus();\n  }\n\n  render() {\n    return (\n      <Host\n        onIxBlur={() => (this.touched = true)}\n        ref={this.groupRef}\n        role=\"radiogroup\"\n      >\n        <ix-field-wrapper\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          isInvalid={this.isInvalid}\n          controlRef={this.groupRef}\n        >\n          <div\n            class={{\n              'checkbox-container': true,\n              'row-layout': this.direction === 'row',\n            }}\n          >\n            <slot></slot>\n          </div>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-radio.js

@@ -1,10 +1,9 @@
-import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-CKuNFgoe.js';
-import { m as makeRef } from './p-bcj7UEIC.js';
-import { c as createClassMutationObserver } from './p-2fxFa_VL.js';
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-D-__gyet.js';
 import { a as a11yBoolean } from './p-Bb7pDeaQ.js';
-import { d as defineCustomElement$2 } from './p-DgfGA7Z3.js';
+import { c as createClassMutationObserver } from './p-Dq_H2flK.js';
+import { d as defineCustomElement$2 } from './p-BBwXlKhE.js';
 
-const radioCss = ":host{display:inline-block;position:relative}: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{all:unset;display:inline-flex;position:relative;align-items:center;justify-content:center;width:1.125rem;min-width:1.125rem;max-width:1.125rem;height:1.125rem;min-height:1.125rem;max-height:1.125rem;border:1px solid white;border-radius:100px}:host button:focus-visible{outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:var(--theme-radiobtn--focus--outline-offset)}:host input[type=radio]{display:none}:host .radio-button{height:1.5rem;width:1.5rem;display:flex;align-items:center;justify-content:center}:host label{display:flex;justify-content:flex-start;align-items:center;width:100%;height:100%}:host .checkmark{border-radius:100px;background-color:var(--theme-color-primary--contrast);width:0.5rem;height:0.5rem}:host button{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(:hover) button{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(:active) button{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.checked) button,:host([indeterminate]) button{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.checked:hover) button,:host([indeterminate]:hover) button{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.checked:active) button,:host([indeterminate]:active) button{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.disabled){pointer-events:none}:host(.disabled) button{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.checked.disabled) button,:host([indeterminate].disabled) button{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}ix-typography{margin:0.125rem 0 0.125rem 0.5rem}:host(.ix-info:not(.disabled)) button{--theme-radiobtn-unchecked--background:var(\n    --theme-radiobtn-unchecked--background--info\n  );--theme-radiobtn-unchecked--background--hover:var(\n    --theme-radiobtn-unchecked--background--info--hover\n  );--theme-radiobtn-unchecked--background--active:var(\n    --theme-radiobtn-unchecked--background--info--active\n  );--theme-radiobtn-unchecked--border-color:var(\n    --theme-radiobtn-unchecked--border-color--info\n  );--theme-radiobtn-unchecked--border-color--hover:var(\n    --theme-radiobtn-unchecked--border-color--info--hover\n  );--theme-radiobtn-unchecked--border-color--active:var(\n    --theme-radiobtn-unchecked--border-color--info--active\n  );--theme-radiobtn-checked--background:var(\n    --theme-radiobtn-checked--background--info\n  );--theme-radiobtn-checked--background--hover:var(\n    --theme-radiobtn-checked--background--info--hover\n  );--theme-radiobtn-checked--background--active:var(\n    --theme-radiobtn-checked--background--info--active\n  );--theme-radiobtn-checked--border-color:var(\n    --theme-radiobtn-checked--border-color--info\n  );--theme-radiobtn-checked--border-color--hover:var(\n    --theme-radiobtn-checked--border-color--info--hover\n  );--theme-radiobtn-checked--border-color--active:var(\n    --theme-radiobtn-checked--border-color--info--active\n  );--theme-radiobtn-mixed--background:var(\n    --theme-radiobtn-mixed--background--info\n  );--theme-radiobtn-mixed--background--hover:var(\n    --theme-radiobtn-mixed--background--info--hover\n  );--theme-radiobtn-mixed--background--active:var(\n    --theme-radiobtn-mixed--background--info--active\n  );--theme-radiobtn-mixed--border-color:var(\n    --theme-radiobtn-mixed--border-color--info\n  );--theme-radiobtn-mixed--border-color--hover:var(\n    --theme-radiobtn-mixed--border-color--info--hover\n  );--theme-radiobtn-mixed--border-color--active:var(\n    --theme-radiobtn-mixed--border-color--info--active\n  )}:host(.ix-info) button{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-info:hover) button{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-info:active) button{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-info.checked) button,:host(.ix-info[indeterminate]) button{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-info.checked:hover) button,:host(.ix-info[indeterminate]:hover) button{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-info.checked:active) button,:host(.ix-info[indeterminate]:active) button{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-info.disabled) button{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-info.checked.disabled) button,:host(.ix-info[indeterminate].disabled) button{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}:host(.ix-warning:not(.disabled)) button{--theme-radiobtn-unchecked--background:var(\n    --theme-radiobtn-unchecked--background--warning\n  );--theme-radiobtn-unchecked--background--hover:var(\n    --theme-radiobtn-unchecked--background--warning--hover\n  );--theme-radiobtn-unchecked--background--active:var(\n    --theme-radiobtn-unchecked--background--warning--active\n  );--theme-radiobtn-unchecked--border-color:var(\n    --theme-radiobtn-unchecked--border-color--warning\n  );--theme-radiobtn-unchecked--border-color--hover:var(\n    --theme-radiobtn-unchecked--border-color--warning--hover\n  );--theme-radiobtn-unchecked--border-color--active:var(\n    --theme-radiobtn-unchecked--border-color--warning--active\n  );--theme-radiobtn-checked--background:var(\n    --theme-radiobtn-checked--background--warning\n  );--theme-radiobtn-checked--background--hover:var(\n    --theme-radiobtn-checked--background--warning--hover\n  );--theme-radiobtn-checked--background--active:var(\n    --theme-radiobtn-checked--background--warning--active\n  );--theme-radiobtn-checked--border-color:var(\n    --theme-radiobtn-checked--border-color--warning\n  );--theme-radiobtn-checked--border-color--hover:var(\n    --theme-radiobtn-checked--border-color--warning--hover\n  );--theme-radiobtn-checked--border-color--active:var(\n    --theme-radiobtn-checked--border-color--warning--active\n  );--theme-radiobtn-mixed--background:var(\n    --theme-radiobtn-mixed--background--warning\n  );--theme-radiobtn-mixed--background--hover:var(\n    --theme-radiobtn-mixed--background--warning--hover\n  );--theme-radiobtn-mixed--background--active:var(\n    --theme-radiobtn-mixed--background--warning--active\n  );--theme-radiobtn-mixed--border-color:var(\n    --theme-radiobtn-mixed--border-color--warning\n  );--theme-radiobtn-mixed--border-color--hover:var(\n    --theme-radiobtn-mixed--border-color--warning--hover\n  );--theme-radiobtn-mixed--border-color--active:var(\n    --theme-radiobtn-mixed--border-color--warning--active\n  )}:host(.ix-warning) button{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-warning:hover) button{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-warning:active) button{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-warning.checked) button,:host(.ix-warning[indeterminate]) button{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-warning.checked:hover) button,:host(.ix-warning[indeterminate]:hover) button{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-warning.checked:active) button,:host(.ix-warning[indeterminate]:active) button{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-warning.disabled) button{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-warning.checked.disabled) button,:host(.ix-warning[indeterminate].disabled) button{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}:host(.ix-invalid--required:not(.disabled)) button{--theme-radiobtn-unchecked--background:var(\n    --theme-radiobtn-unchecked--background--invalid\n  );--theme-radiobtn-unchecked--background--hover:var(\n    --theme-radiobtn-unchecked--background--invalid--hover\n  );--theme-radiobtn-unchecked--background--active:var(\n    --theme-radiobtn-unchecked--background--invalid--active\n  );--theme-radiobtn-unchecked--border-color:var(\n    --theme-radiobtn-unchecked--border-color--invalid\n  );--theme-radiobtn-unchecked--border-color--hover:var(\n    --theme-radiobtn-unchecked--border-color--invalid--hover\n  );--theme-radiobtn-unchecked--border-color--active:var(\n    --theme-radiobtn-unchecked--border-color--invalid--active\n  );--theme-radiobtn-checked--background:var(\n    --theme-radiobtn-checked--background--invalid\n  );--theme-radiobtn-checked--background--hover:var(\n    --theme-radiobtn-checked--background--invalid--hover\n  );--theme-radiobtn-checked--background--active:var(\n    --theme-radiobtn-checked--background--invalid--active\n  );--theme-radiobtn-checked--border-color:var(\n    --theme-radiobtn-checked--border-color--invalid\n  );--theme-radiobtn-checked--border-color--hover:var(\n    --theme-radiobtn-checked--border-color--invalid--hover\n  );--theme-radiobtn-checked--border-color--active:var(\n    --theme-radiobtn-checked--border-color--invalid--active\n  );--theme-radiobtn-mixed--background:var(\n    --theme-radiobtn-mixed--background--invalid\n  );--theme-radiobtn-mixed--background--hover:var(\n    --theme-radiobtn-mixed--background--invalid--hover\n  );--theme-radiobtn-mixed--background--active:var(\n    --theme-radiobtn-mixed--background--invalid--active\n  );--theme-radiobtn-mixed--border-color:var(\n    --theme-radiobtn-mixed--border-color--invalid\n  );--theme-radiobtn-mixed--border-color--hover:var(\n    --theme-radiobtn-mixed--border-color--invalid--hover\n  );--theme-radiobtn-mixed--border-color--active:var(\n    --theme-radiobtn-mixed--border-color--invalid--active\n  )}:host(.ix-invalid--required) button{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-invalid--required:hover) button{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-invalid--required:active) button{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-invalid--required.checked) button,:host(.ix-invalid--required[indeterminate]) button{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-invalid--required.checked:hover) button,:host(.ix-invalid--required[indeterminate]:hover) button{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-invalid--required.checked:active) button,:host(.ix-invalid--required[indeterminate]:active) button{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-invalid--required.disabled) button{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-invalid--required.checked.disabled) button,:host(.ix-invalid--required[indeterminate].disabled) button{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}:host(.ix-invalid:not(.disabled)) button{--theme-radiobtn-unchecked--background:var(\n    --theme-radiobtn-unchecked--background--invalid\n  );--theme-radiobtn-unchecked--background--hover:var(\n    --theme-radiobtn-unchecked--background--invalid--hover\n  );--theme-radiobtn-unchecked--background--active:var(\n    --theme-radiobtn-unchecked--background--invalid--active\n  );--theme-radiobtn-unchecked--border-color:var(\n    --theme-radiobtn-unchecked--border-color--invalid\n  );--theme-radiobtn-unchecked--border-color--hover:var(\n    --theme-radiobtn-unchecked--border-color--invalid--hover\n  );--theme-radiobtn-unchecked--border-color--active:var(\n    --theme-radiobtn-unchecked--border-color--invalid--active\n  );--theme-radiobtn-checked--background:var(\n    --theme-radiobtn-checked--background--invalid\n  );--theme-radiobtn-checked--background--hover:var(\n    --theme-radiobtn-checked--background--invalid--hover\n  );--theme-radiobtn-checked--background--active:var(\n    --theme-radiobtn-checked--background--invalid--active\n  );--theme-radiobtn-checked--border-color:var(\n    --theme-radiobtn-checked--border-color--invalid\n  );--theme-radiobtn-checked--border-color--hover:var(\n    --theme-radiobtn-checked--border-color--invalid--hover\n  );--theme-radiobtn-checked--border-color--active:var(\n    --theme-radiobtn-checked--border-color--invalid--active\n  );--theme-radiobtn-mixed--background:var(\n    --theme-radiobtn-mixed--background--invalid\n  );--theme-radiobtn-mixed--background--hover:var(\n    --theme-radiobtn-mixed--background--invalid--hover\n  );--theme-radiobtn-mixed--background--active:var(\n    --theme-radiobtn-mixed--background--invalid--active\n  );--theme-radiobtn-mixed--border-color:var(\n    --theme-radiobtn-mixed--border-color--invalid\n  );--theme-radiobtn-mixed--border-color--hover:var(\n    --theme-radiobtn-mixed--border-color--invalid--hover\n  );--theme-radiobtn-mixed--border-color--active:var(\n    --theme-radiobtn-mixed--border-color--invalid--active\n  )}:host(.ix-invalid) button{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-invalid:hover) button{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-invalid:active) button{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-invalid.checked) button,:host(.ix-invalid[indeterminate]) button{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-invalid.checked:hover) button,:host(.ix-invalid[indeterminate]:hover) button{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-invalid.checked:active) button,:host(.ix-invalid[indeterminate]:active) button{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-invalid.disabled) button{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-invalid.checked.disabled) button,:host(.ix-invalid[indeterminate].disabled) button{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}";
+const radioCss = ":host{display:inline-block;position:relative}: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 .radio-checkmark{all:unset;display:inline-flex;position:relative;align-items:center;justify-content:center;width:1.125rem;min-width:1.125rem;max-width:1.125rem;height:1.125rem;min-height:1.125rem;max-height:1.125rem;border:1px solid white;border-radius:100px}:host .radio-button{height:1.5rem;width:1.5rem;display:flex;align-items:center;justify-content:center}:host label{display:flex;justify-content:flex-start;align-items:center;width:100%;height:100%}:host .checkmark{border-radius:100px;background-color:var(--theme-color-primary--contrast);width:0.5rem;height:0.5rem}:host .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(:hover) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(:active) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.checked) .radio-checkmark,:host([indeterminate]) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.checked:hover) .radio-checkmark,:host([indeterminate]:hover) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.checked:active) .radio-checkmark,:host([indeterminate]:active) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.checked.disabled) .radio-checkmark,:host([indeterminate].disabled) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}:host(:focus-visible){outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:var(--theme-radiobtn--focus--outline-offset)}ix-typography{margin:0.125rem 0 0.125rem 0.5rem}:host(.ix-info:not(.disabled)) .radio-checkmark{--theme-radiobtn-unchecked--background:var(\n    --theme-radiobtn-unchecked--background--info\n  );--theme-radiobtn-unchecked--background--hover:var(\n    --theme-radiobtn-unchecked--background--info--hover\n  );--theme-radiobtn-unchecked--background--active:var(\n    --theme-radiobtn-unchecked--background--info--active\n  );--theme-radiobtn-unchecked--border-color:var(\n    --theme-radiobtn-unchecked--border-color--info\n  );--theme-radiobtn-unchecked--border-color--hover:var(\n    --theme-radiobtn-unchecked--border-color--info--hover\n  );--theme-radiobtn-unchecked--border-color--active:var(\n    --theme-radiobtn-unchecked--border-color--info--active\n  );--theme-radiobtn-checked--background:var(\n    --theme-radiobtn-checked--background--info\n  );--theme-radiobtn-checked--background--hover:var(\n    --theme-radiobtn-checked--background--info--hover\n  );--theme-radiobtn-checked--background--active:var(\n    --theme-radiobtn-checked--background--info--active\n  );--theme-radiobtn-checked--border-color:var(\n    --theme-radiobtn-checked--border-color--info\n  );--theme-radiobtn-checked--border-color--hover:var(\n    --theme-radiobtn-checked--border-color--info--hover\n  );--theme-radiobtn-checked--border-color--active:var(\n    --theme-radiobtn-checked--border-color--info--active\n  );--theme-radiobtn-mixed--background:var(\n    --theme-radiobtn-mixed--background--info\n  );--theme-radiobtn-mixed--background--hover:var(\n    --theme-radiobtn-mixed--background--info--hover\n  );--theme-radiobtn-mixed--background--active:var(\n    --theme-radiobtn-mixed--background--info--active\n  );--theme-radiobtn-mixed--border-color:var(\n    --theme-radiobtn-mixed--border-color--info\n  );--theme-radiobtn-mixed--border-color--hover:var(\n    --theme-radiobtn-mixed--border-color--info--hover\n  );--theme-radiobtn-mixed--border-color--active:var(\n    --theme-radiobtn-mixed--border-color--info--active\n  )}:host(.ix-info) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-info:hover) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-info:active) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-info.checked) .radio-checkmark,:host(.ix-info[indeterminate]) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-info.checked:hover) .radio-checkmark,:host(.ix-info[indeterminate]:hover) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-info.checked:active) .radio-checkmark,:host(.ix-info[indeterminate]:active) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-info.disabled) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-info.checked.disabled) .radio-checkmark,:host(.ix-info[indeterminate].disabled) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}:host(.ix-warning:not(.disabled)) .radio-checkmark{--theme-radiobtn-unchecked--background:var(\n    --theme-radiobtn-unchecked--background--warning\n  );--theme-radiobtn-unchecked--background--hover:var(\n    --theme-radiobtn-unchecked--background--warning--hover\n  );--theme-radiobtn-unchecked--background--active:var(\n    --theme-radiobtn-unchecked--background--warning--active\n  );--theme-radiobtn-unchecked--border-color:var(\n    --theme-radiobtn-unchecked--border-color--warning\n  );--theme-radiobtn-unchecked--border-color--hover:var(\n    --theme-radiobtn-unchecked--border-color--warning--hover\n  );--theme-radiobtn-unchecked--border-color--active:var(\n    --theme-radiobtn-unchecked--border-color--warning--active\n  );--theme-radiobtn-checked--background:var(\n    --theme-radiobtn-checked--background--warning\n  );--theme-radiobtn-checked--background--hover:var(\n    --theme-radiobtn-checked--background--warning--hover\n  );--theme-radiobtn-checked--background--active:var(\n    --theme-radiobtn-checked--background--warning--active\n  );--theme-radiobtn-checked--border-color:var(\n    --theme-radiobtn-checked--border-color--warning\n  );--theme-radiobtn-checked--border-color--hover:var(\n    --theme-radiobtn-checked--border-color--warning--hover\n  );--theme-radiobtn-checked--border-color--active:var(\n    --theme-radiobtn-checked--border-color--warning--active\n  );--theme-radiobtn-mixed--background:var(\n    --theme-radiobtn-mixed--background--warning\n  );--theme-radiobtn-mixed--background--hover:var(\n    --theme-radiobtn-mixed--background--warning--hover\n  );--theme-radiobtn-mixed--background--active:var(\n    --theme-radiobtn-mixed--background--warning--active\n  );--theme-radiobtn-mixed--border-color:var(\n    --theme-radiobtn-mixed--border-color--warning\n  );--theme-radiobtn-mixed--border-color--hover:var(\n    --theme-radiobtn-mixed--border-color--warning--hover\n  );--theme-radiobtn-mixed--border-color--active:var(\n    --theme-radiobtn-mixed--border-color--warning--active\n  )}:host(.ix-warning) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-warning:hover) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-warning:active) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-warning.checked) .radio-checkmark,:host(.ix-warning[indeterminate]) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-warning.checked:hover) .radio-checkmark,:host(.ix-warning[indeterminate]:hover) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-warning.checked:active) .radio-checkmark,:host(.ix-warning[indeterminate]:active) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-warning.disabled) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-warning.checked.disabled) .radio-checkmark,:host(.ix-warning[indeterminate].disabled) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}:host(.ix-invalid--required:not(.disabled)) .radio-checkmark{--theme-radiobtn-unchecked--background:var(\n    --theme-radiobtn-unchecked--background--invalid\n  );--theme-radiobtn-unchecked--background--hover:var(\n    --theme-radiobtn-unchecked--background--invalid--hover\n  );--theme-radiobtn-unchecked--background--active:var(\n    --theme-radiobtn-unchecked--background--invalid--active\n  );--theme-radiobtn-unchecked--border-color:var(\n    --theme-radiobtn-unchecked--border-color--invalid\n  );--theme-radiobtn-unchecked--border-color--hover:var(\n    --theme-radiobtn-unchecked--border-color--invalid--hover\n  );--theme-radiobtn-unchecked--border-color--active:var(\n    --theme-radiobtn-unchecked--border-color--invalid--active\n  );--theme-radiobtn-checked--background:var(\n    --theme-radiobtn-checked--background--invalid\n  );--theme-radiobtn-checked--background--hover:var(\n    --theme-radiobtn-checked--background--invalid--hover\n  );--theme-radiobtn-checked--background--active:var(\n    --theme-radiobtn-checked--background--invalid--active\n  );--theme-radiobtn-checked--border-color:var(\n    --theme-radiobtn-checked--border-color--invalid\n  );--theme-radiobtn-checked--border-color--hover:var(\n    --theme-radiobtn-checked--border-color--invalid--hover\n  );--theme-radiobtn-checked--border-color--active:var(\n    --theme-radiobtn-checked--border-color--invalid--active\n  );--theme-radiobtn-mixed--background:var(\n    --theme-radiobtn-mixed--background--invalid\n  );--theme-radiobtn-mixed--background--hover:var(\n    --theme-radiobtn-mixed--background--invalid--hover\n  );--theme-radiobtn-mixed--background--active:var(\n    --theme-radiobtn-mixed--background--invalid--active\n  );--theme-radiobtn-mixed--border-color:var(\n    --theme-radiobtn-mixed--border-color--invalid\n  );--theme-radiobtn-mixed--border-color--hover:var(\n    --theme-radiobtn-mixed--border-color--invalid--hover\n  );--theme-radiobtn-mixed--border-color--active:var(\n    --theme-radiobtn-mixed--border-color--invalid--active\n  )}:host(.ix-invalid--required) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-invalid--required:hover) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-invalid--required:active) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-invalid--required.checked) .radio-checkmark,:host(.ix-invalid--required[indeterminate]) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-invalid--required.checked:hover) .radio-checkmark,:host(.ix-invalid--required[indeterminate]:hover) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-invalid--required.checked:active) .radio-checkmark,:host(.ix-invalid--required[indeterminate]:active) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-invalid--required.disabled) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-invalid--required.checked.disabled) .radio-checkmark,:host(.ix-invalid--required[indeterminate].disabled) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}:host(.ix-invalid:not(.disabled)) .radio-checkmark{--theme-radiobtn-unchecked--background:var(\n    --theme-radiobtn-unchecked--background--invalid\n  );--theme-radiobtn-unchecked--background--hover:var(\n    --theme-radiobtn-unchecked--background--invalid--hover\n  );--theme-radiobtn-unchecked--background--active:var(\n    --theme-radiobtn-unchecked--background--invalid--active\n  );--theme-radiobtn-unchecked--border-color:var(\n    --theme-radiobtn-unchecked--border-color--invalid\n  );--theme-radiobtn-unchecked--border-color--hover:var(\n    --theme-radiobtn-unchecked--border-color--invalid--hover\n  );--theme-radiobtn-unchecked--border-color--active:var(\n    --theme-radiobtn-unchecked--border-color--invalid--active\n  );--theme-radiobtn-checked--background:var(\n    --theme-radiobtn-checked--background--invalid\n  );--theme-radiobtn-checked--background--hover:var(\n    --theme-radiobtn-checked--background--invalid--hover\n  );--theme-radiobtn-checked--background--active:var(\n    --theme-radiobtn-checked--background--invalid--active\n  );--theme-radiobtn-checked--border-color:var(\n    --theme-radiobtn-checked--border-color--invalid\n  );--theme-radiobtn-checked--border-color--hover:var(\n    --theme-radiobtn-checked--border-color--invalid--hover\n  );--theme-radiobtn-checked--border-color--active:var(\n    --theme-radiobtn-checked--border-color--invalid--active\n  );--theme-radiobtn-mixed--background:var(\n    --theme-radiobtn-mixed--background--invalid\n  );--theme-radiobtn-mixed--background--hover:var(\n    --theme-radiobtn-mixed--background--invalid--hover\n  );--theme-radiobtn-mixed--background--active:var(\n    --theme-radiobtn-mixed--background--invalid--active\n  );--theme-radiobtn-mixed--border-color:var(\n    --theme-radiobtn-mixed--border-color--invalid\n  );--theme-radiobtn-mixed--border-color--hover:var(\n    --theme-radiobtn-mixed--border-color--invalid--hover\n  );--theme-radiobtn-mixed--border-color--active:var(\n    --theme-radiobtn-mixed--border-color--invalid--active\n  )}:host(.ix-invalid) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-invalid:hover) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-invalid:active) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-invalid.checked) .radio-checkmark,:host(.ix-invalid[indeterminate]) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-invalid.checked:hover) .radio-checkmark,:host(.ix-invalid[indeterminate]:hover) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-invalid.checked:active) .radio-checkmark,:host(.ix-invalid[indeterminate]:active) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-invalid.disabled) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-invalid.checked.disabled) .radio-checkmark,:host(.ix-invalid[indeterminate].disabled) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}";
 
 const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends H {
     constructor(registerHost) {
@@ -31,11 +30,9 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends H {
          * @since 3.0.0
          */
         this.required = false;
-        this.inputRef = makeRef((radiobuttonRef) => {
-            radiobuttonRef.checked = this.checked;
-        });
     }
-    setCheckedState(newChecked) {
+    /** @internal */
+    async setCheckedState(newChecked) {
         if (this.checked) {
             return;
         }
@@ -46,8 +43,6 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends H {
         this.checked = newChecked;
     }
     async onCheckedChange() {
-        const radiobuttonRef = await this.inputRef.waitForCurrent();
-        radiobuttonRef.checked = this.checked;
         this.updateFormInternalValue();
     }
     onValueChange() {
@@ -78,6 +73,33 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends H {
             this.formInternals.setFormValue(null);
         }
     }
+    onKeyDown(event) {
+        if (this.disabled) {
+            return;
+        }
+        let preventEvent = false;
+        if (event.code === 'Space') {
+            preventEvent = true;
+            this.setCheckedState(true);
+        }
+        const closestRadioGroup = this.hostElement.closest('ix-radio-group');
+        switch (event.code) {
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                preventEvent = true;
+                closestRadioGroup === null || closestRadioGroup === void 0 ? void 0 : closestRadioGroup.setCheckedToNextItem(this.hostElement, false);
+                break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                preventEvent = true;
+                closestRadioGroup === null || closestRadioGroup === void 0 ? void 0 : closestRadioGroup.setCheckedToNextItem(this.hostElement, true);
+                break;
+        }
+        if (preventEvent) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
     /** @internal */
     hasValidValue() {
         return Promise.resolve(this.checked);
@@ -87,18 +109,21 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends H {
         return Promise.resolve(this.formInternals.form);
     }
     render() {
-        var _a;
-        return (h(Host, { key: 'e74cc1b490830412ff329d586c35914a8b55abb8', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", class: {
+        let tabIndex = 0;
+        if (this.disabled) {
+            tabIndex = -1;
+        }
+        return (h(Host, { key: '0a08dcbeaaf21bb9063ff44dbb9b7fec0bd18b85', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", tabindex: tabIndex, class: {
                 disabled: this.disabled,
                 checked: this.checked,
-            }, onBlur: () => this.ixBlur.emit() }, h("label", { key: '2e2736e762d21e1e254078dc07e0e6754c9f0d60' }, h("div", { key: 'c22603f3a435fc4271b092af4010208ab7d43eda', class: "radio-button" }, h("input", { key: 'd56beba76c83ab1ccf2e3eaea89c6d1c285e3c62', "aria-checked": a11yBoolean(this.checked), required: this.required, disabled: this.disabled, checked: this.checked, name: this.name, ref: this.inputRef, type: "radio", value: (_a = this.value) !== null && _a !== void 0 ? _a : 'on', onChange: () => {
-                const ref = this.inputRef.current;
-                if (ref) {
-                    this.setCheckedState(ref.checked);
-                }
-            } }), h("button", { key: '70747f5c03103161f8808d996b15720af681c54d', disabled: this.disabled, class: {
+            }, onClick: () => {
+                if (this.disabled)
+                    return;
+                this.setCheckedState(true);
+            }, onKeyDown: (event) => this.onKeyDown(event), onBlur: () => this.ixBlur.emit() }, h("label", { key: 'ba82e05023a706e366cede669060ec11d2848754' }, h("div", { key: 'c3b75eea221618adc27dec099089dac0f84a91ac', class: "radio-button" }, h("div", { key: 'd5d10cfce1442f641f939aa16a6feb79fc38caf0', "aria-hidden": "true", class: {
+                ['radio-checkmark']: true,
                 checked: this.checked,
-            }, onClick: () => this.setCheckedState(!this.checked) }, h("div", { key: '3f2a5030726debb338686f95feabc123f64524bb', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } }))), this.label && (h("ix-typography", { key: '1beb22d26c2e6c759bfc6be64ad6a11b1c0d2d19', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: 'cbf06b0578d34daed1a952d2bb3346affaf384b6' }))))));
+            } }, h("div", { key: 'fe7c6830a7fb254291fe95d4310b59bd32ed9492', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } }))), this.label && (h("ix-typography", { key: 'bc5fe1821b5686760eb7fa3959cf30b54cca40ee', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: 'a72b3d10cdcbaa398a6f59b9ce1d036f12e4819c' }))))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return this; }
@@ -114,6 +139,7 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends H {
         "disabled": [4],
         "checked": [1540],
         "required": [516],
+        "setCheckedState": [64],
         "hasValidValue": [64],
         "getAssociatedFormElement": [64]
     }, undefined, {

package/components/ix-radio.js.map

@@ -1 +1 @@
-{"file":"ix-radio.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/radio/radio.scss?tag=ix-radio&encapsulation=shadow","src/components/radio/radio.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 */\n@use 'mixins/shadow-dom/component';\n\n:host {\n  display: inline-block;\n  position: relative;\n\n  @include component.ix-component;\n\n  button {\n    all: unset;\n\n    display: inline-flex;\n    position: relative;\n\n    align-items: center;\n    justify-content: center;\n\n    width: 1.125rem;\n    min-width: 1.125rem;\n    max-width: 1.125rem;\n    height: 1.125rem;\n    min-height: 1.125rem;\n    max-height: 1.125rem;\n    border: 1px solid white;\n    border-radius: 100px;\n  }\n\n  button:focus-visible {\n    outline: 0.0625rem solid var(--theme-color-focus-bdr);\n    outline-offset: var(--theme-radiobtn--focus--outline-offset);\n  }\n\n  input[type='radio'] {\n    display: none;\n  }\n  .radio-button {\n    height: 1.5rem;\n    width: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  label {\n    display: flex;\n\n    justify-content: flex-start;\n    align-items: center;\n\n    width: 100%;\n    height: 100%;\n  }\n\n  .checkmark {\n    border-radius: 100px;\n    background-color: var(--theme-color-primary--contrast);\n    width: 0.5rem;\n    height: 0.5rem;\n  }\n}\n\n@mixin radio-base() {\n  :host {\n    button {\n      background-color: var(--theme-radiobtn-unchecked--background);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color);\n    }\n  }\n\n  :host(:hover) {\n    button {\n      background-color: var(--theme-radiobtn-unchecked--background--hover);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--hover);\n    }\n  }\n\n  :host(:active) {\n    button {\n      background-color: var(--theme-radiobtn-unchecked--background--active);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--active);\n    }\n  }\n\n  :host(.checked),\n  :host([indeterminate]) {\n    button {\n      background-color: var(--theme-radiobtn-checked--background);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color);\n    }\n  }\n\n  :host(.checked:hover),\n  :host([indeterminate]:hover) {\n    button {\n      background-color: var(--theme-radiobtn-checked--background--hover);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--hover);\n    }\n  }\n\n  :host(.checked:active),\n  :host([indeterminate]:active) {\n    button {\n      background-color: var(--theme-radiobtn-checked--background--active);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--active);\n    }\n  }\n\n  :host(.disabled) {\n    pointer-events: none;\n\n    button {\n      background-color: var(--theme-radiobtn-unchecked--background--disabled);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(.checked.disabled),\n  :host([indeterminate].disabled) {\n    button {\n      background-color: var(--theme-radiobtn-checked--background--disabled);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--disabled);\n    }\n  }\n\n  ix-typography {\n    margin: 0.125rem 0 0.125rem 0.5rem;\n  }\n}\n\n@mixin radio-variant($selector) {\n  :host(#{$selector}:not(.disabled)) {\n    button {\n      @content;\n    }\n  }\n\n  :host(#{$selector}) {\n    button {\n      background-color: var(--theme-radiobtn-unchecked--background);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color);\n    }\n  }\n\n  :host(#{$selector}:hover) {\n    button {\n      background-color: var(--theme-radiobtn-unchecked--background--hover);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}:active) {\n    button {\n      background-color: var(--theme-radiobtn-unchecked--background--active);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}.checked),\n  :host(#{$selector}[indeterminate]) {\n    button {\n      background-color: var(--theme-radiobtn-checked--background);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color);\n    }\n  }\n\n  :host(#{$selector}.checked:hover),\n  :host(#{$selector}[indeterminate]:hover) {\n    button {\n      background-color: var(--theme-radiobtn-checked--background--hover);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}.checked:active),\n  :host(#{$selector}[indeterminate]:active) {\n    button {\n      background-color: var(--theme-radiobtn-checked--background--active);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}.disabled) {\n    button {\n      background-color: var(--theme-radiobtn-unchecked--background--disabled);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(#{$selector}.checked.disabled),\n  :host(#{$selector}[indeterminate].disabled) {\n    button {\n      background-color: var(--theme-radiobtn-checked--background--disabled);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--disabled);\n    }\n  }\n}\n\n@mixin define-radio-vars($state, $type) {\n  --theme-radiobtn-#{$state}--background: var(\n    --theme-radiobtn-#{$state}--background--#{$type}\n  );\n  --theme-radiobtn-#{$state}--background--hover: var(\n    --theme-radiobtn-#{$state}--background--#{$type}--hover\n  );\n  --theme-radiobtn-#{$state}--background--active: var(\n    --theme-radiobtn-#{$state}--background--#{$type}--active\n  );\n\n  --theme-radiobtn-#{$state}--border-color: var(\n    --theme-radiobtn-#{$state}--border-color--#{$type}\n  );\n  --theme-radiobtn-#{$state}--border-color--hover: var(\n    --theme-radiobtn-#{$state}--border-color--#{$type}--hover\n  );\n  --theme-radiobtn-#{$state}--border-color--active: var(\n    --theme-radiobtn-#{$state}--border-color--#{$type}--active\n  );\n}\n\n@include radio-base();\n@include radio-variant($selector: '.ix-info') {\n  @include define-radio-vars('unchecked', 'info');\n  @include define-radio-vars('checked', 'info');\n  @include define-radio-vars('mixed', 'info');\n}\n\n@include radio-variant($selector: '.ix-warning') {\n  @include define-radio-vars('unchecked', 'warning');\n  @include define-radio-vars('checked', 'warning');\n  @include define-radio-vars('mixed', 'warning');\n}\n\n@include radio-variant($selector: '.ix-invalid--required') {\n  @include define-radio-vars('unchecked', 'invalid');\n  @include define-radio-vars('checked', 'invalid');\n  @include define-radio-vars('mixed', 'invalid');\n}\n\n@include radio-variant($selector: '.ix-invalid') {\n  @include define-radio-vars('unchecked', 'invalid');\n  @include define-radio-vars('checked', 'invalid');\n  @include define-radio-vars('mixed', 'invalid');\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 {\n  AttachInternals,\n  Component,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  Watch,\n  h,\n  Method,\n  Element,\n} from '@stencil/core';\nimport { makeRef } from '../utils/make-ref';\nimport {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  IxFormComponent,\n} from '../utils/input';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @form-ready\n */\n@Component({\n  tag: 'ix-radio',\n  styleUrl: 'radio.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Radio implements IxFormComponent<string> {\n  @Element() hostElement!: HTMLIxRadioElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * Name of the radio component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the radio component\n   */\n  @Prop({ reflect: true }) value?: string;\n\n  /**\n   * Label for the radio component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Disabled state of the radio component\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Checked state of the radio component\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n  /**\n   * Requires the radio component and its group to be checked for the form to be submittable\n   *\n   * @since 3.0.0\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Event emitted when the checked state of the radio changes\n   */\n  @Event() checkedChange!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the value of the radio changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the radio is blurred\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  private classMutationObserver?: ClassMutationObserver;\n\n  private readonly inputRef = makeRef<HTMLInputElement>((radiobuttonRef) => {\n    radiobuttonRef.checked = this.checked;\n  });\n\n  private setCheckedState(newChecked: boolean) {\n    if (this.checked) {\n      return;\n    }\n    const result = this.checkedChange.emit(newChecked);\n    if (result.defaultPrevented) {\n      return;\n    }\n\n    this.checked = newChecked;\n  }\n\n  @Watch('checked')\n  async onCheckedChange() {\n    const radiobuttonRef = await this.inputRef.waitForCurrent();\n    radiobuttonRef.checked = this.checked;\n\n    this.updateFormInternalValue();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.valueChange.emit(this.value);\n  }\n\n  connectedCallback(): void {\n    const parent = this.hostElement.closest('ix-radio-group');\n    if (parent) {\n      this.classMutationObserver = createClassMutationObserver(parent, () => {\n        this.hostElement.classList.toggle(\n          'ix-invalid--required',\n          parent.classList.contains('ix-invalid--required')\n        );\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.classMutationObserver) {\n      this.classMutationObserver.destroy();\n    }\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue() {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value ?? 'on');\n    } else {\n      this.formInternals.setFormValue(null);\n    }\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(this.checked);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  render() {\n    return (\n      <Host\n        aria-checked={a11yBoolean(this.checked)}\n        aria-disabled={a11yBoolean(this.disabled)}\n        role=\"radio\"\n        class={{\n          disabled: this.disabled,\n          checked: this.checked,\n        }}\n        onBlur={() => this.ixBlur.emit()}\n      >\n        <label>\n          <div class=\"radio-button\">\n            <input\n              aria-checked={a11yBoolean(this.checked)}\n              required={this.required}\n              disabled={this.disabled}\n              checked={this.checked}\n              name={this.name}\n              ref={this.inputRef}\n              type=\"radio\"\n              value={this.value ?? 'on'}\n              onChange={() => {\n                const ref = this.inputRef.current;\n                if (ref) {\n                  this.setCheckedState(ref.checked);\n                }\n              }}\n            />\n            <button\n              disabled={this.disabled}\n              class={{\n                checked: this.checked,\n              }}\n              onClick={() => this.setCheckedState(!this.checked)}\n            >\n              <div\n                class=\"checkmark\"\n                style={{ visibility: this.checked ? 'visible' : 'hidden' }}\n              ></div>\n            </button>\n          </div>\n          {this.label && (\n            <ix-typography\n              format=\"label\"\n              textColor={this.disabled ? 'weak' : 'std'}\n            >\n              {this.label}\n              <slot></slot>\n            </ix-typography>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-radio.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/radio/radio.scss?tag=ix-radio&encapsulation=shadow","src/components/radio/radio.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 */\n@use 'mixins/shadow-dom/component';\n\n:host {\n  display: inline-block;\n  position: relative;\n\n  @include component.ix-component;\n\n  .radio-checkmark {\n    all: unset;\n\n    display: inline-flex;\n    position: relative;\n\n    align-items: center;\n    justify-content: center;\n\n    width: 1.125rem;\n    min-width: 1.125rem;\n    max-width: 1.125rem;\n    height: 1.125rem;\n    min-height: 1.125rem;\n    max-height: 1.125rem;\n    border: 1px solid white;\n    border-radius: 100px;\n  }\n\n  .radio-button {\n    height: 1.5rem;\n    width: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  label {\n    display: flex;\n\n    justify-content: flex-start;\n    align-items: center;\n\n    width: 100%;\n    height: 100%;\n  }\n\n  .checkmark {\n    border-radius: 100px;\n    background-color: var(--theme-color-primary--contrast);\n    width: 0.5rem;\n    height: 0.5rem;\n  }\n}\n\n@mixin radio-base() {\n  :host {\n    .radio-checkmark {\n      background-color: var(--theme-radiobtn-unchecked--background);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color);\n    }\n  }\n\n  :host(:hover) {\n    .radio-checkmark {\n      background-color: var(--theme-radiobtn-unchecked--background--hover);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--hover);\n    }\n  }\n\n  :host(:active) {\n    .radio-checkmark {\n      background-color: var(--theme-radiobtn-unchecked--background--active);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--active);\n    }\n  }\n\n  :host(.checked),\n  :host([indeterminate]) {\n    .radio-checkmark {\n      background-color: var(--theme-radiobtn-checked--background);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color);\n    }\n  }\n\n  :host(.checked:hover),\n  :host([indeterminate]:hover) {\n    .radio-checkmark {\n      background-color: var(--theme-radiobtn-checked--background--hover);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--hover);\n    }\n  }\n\n  :host(.checked:active),\n  :host([indeterminate]:active) {\n    .radio-checkmark {\n      background-color: var(--theme-radiobtn-checked--background--active);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--active);\n    }\n  }\n\n  :host(.disabled) {\n    pointer-events: none;\n\n    .radio-checkmark {\n      background-color: var(--theme-radiobtn-unchecked--background--disabled);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(.checked.disabled),\n  :host([indeterminate].disabled) {\n    .radio-checkmark {\n      background-color: var(--theme-radiobtn-checked--background--disabled);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--disabled);\n    }\n  }\n\n  :host(:focus-visible) {\n    outline: 0.0625rem solid var(--theme-color-focus-bdr);\n    outline-offset: var(--theme-radiobtn--focus--outline-offset);\n  }\n\n  ix-typography {\n    margin: 0.125rem 0 0.125rem 0.5rem;\n  }\n}\n\n@mixin radio-variant($selector) {\n  :host(#{$selector}:not(.disabled)) {\n    .radio-checkmark {\n      @content;\n    }\n  }\n\n  :host(#{$selector}) {\n    .radio-checkmark {\n      background-color: var(--theme-radiobtn-unchecked--background);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color);\n    }\n  }\n\n  :host(#{$selector}:hover) {\n    .radio-checkmark {\n      background-color: var(--theme-radiobtn-unchecked--background--hover);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}:active) {\n    .radio-checkmark {\n      background-color: var(--theme-radiobtn-unchecked--background--active);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}.checked),\n  :host(#{$selector}[indeterminate]) {\n    .radio-checkmark {\n      background-color: var(--theme-radiobtn-checked--background);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color);\n    }\n  }\n\n  :host(#{$selector}.checked:hover),\n  :host(#{$selector}[indeterminate]:hover) {\n    .radio-checkmark {\n      background-color: var(--theme-radiobtn-checked--background--hover);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}.checked:active),\n  :host(#{$selector}[indeterminate]:active) {\n    .radio-checkmark {\n      background-color: var(--theme-radiobtn-checked--background--active);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}.disabled) {\n    .radio-checkmark {\n      background-color: var(--theme-radiobtn-unchecked--background--disabled);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(#{$selector}.checked.disabled),\n  :host(#{$selector}[indeterminate].disabled) {\n    .radio-checkmark {\n      background-color: var(--theme-radiobtn-checked--background--disabled);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--disabled);\n    }\n  }\n}\n\n@mixin define-radio-vars($state, $type) {\n  --theme-radiobtn-#{$state}--background: var(\n    --theme-radiobtn-#{$state}--background--#{$type}\n  );\n  --theme-radiobtn-#{$state}--background--hover: var(\n    --theme-radiobtn-#{$state}--background--#{$type}--hover\n  );\n  --theme-radiobtn-#{$state}--background--active: var(\n    --theme-radiobtn-#{$state}--background--#{$type}--active\n  );\n\n  --theme-radiobtn-#{$state}--border-color: var(\n    --theme-radiobtn-#{$state}--border-color--#{$type}\n  );\n  --theme-radiobtn-#{$state}--border-color--hover: var(\n    --theme-radiobtn-#{$state}--border-color--#{$type}--hover\n  );\n  --theme-radiobtn-#{$state}--border-color--active: var(\n    --theme-radiobtn-#{$state}--border-color--#{$type}--active\n  );\n}\n\n@include radio-base();\n@include radio-variant($selector: '.ix-info') {\n  @include define-radio-vars('unchecked', 'info');\n  @include define-radio-vars('checked', 'info');\n  @include define-radio-vars('mixed', 'info');\n}\n\n@include radio-variant($selector: '.ix-warning') {\n  @include define-radio-vars('unchecked', 'warning');\n  @include define-radio-vars('checked', 'warning');\n  @include define-radio-vars('mixed', 'warning');\n}\n\n@include radio-variant($selector: '.ix-invalid--required') {\n  @include define-radio-vars('unchecked', 'invalid');\n  @include define-radio-vars('checked', 'invalid');\n  @include define-radio-vars('mixed', 'invalid');\n}\n\n@include radio-variant($selector: '.ix-invalid') {\n  @include define-radio-vars('unchecked', 'invalid');\n  @include define-radio-vars('checked', 'invalid');\n  @include define-radio-vars('mixed', 'invalid');\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 {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\nimport {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  IxFormComponent,\n} from '../utils/input';\n\n/**\n * @form-ready\n */\n@Component({\n  tag: 'ix-radio',\n  styleUrl: 'radio.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Radio implements IxFormComponent<string> {\n  @Element() hostElement!: HTMLIxRadioElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * Name of the radio component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the radio component\n   */\n  @Prop({ reflect: true }) value?: string;\n\n  /**\n   * Label for the radio component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Disabled state of the radio component\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Checked state of the radio component\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n  /**\n   * Requires the radio component and its group to be checked for the form to be submittable\n   *\n   * @since 3.0.0\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Event emitted when the checked state of the radio changes\n   */\n  @Event() checkedChange!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the value of the radio changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the radio is blurred\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  private classMutationObserver?: ClassMutationObserver;\n\n  /** @internal */\n  @Method()\n  async setCheckedState(newChecked: boolean) {\n    if (this.checked) {\n      return;\n    }\n    const result = this.checkedChange.emit(newChecked);\n    if (result.defaultPrevented) {\n      return;\n    }\n\n    this.checked = newChecked;\n  }\n\n  @Watch('checked')\n  async onCheckedChange() {\n    this.updateFormInternalValue();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.valueChange.emit(this.value);\n  }\n\n  connectedCallback(): void {\n    const parent = this.hostElement.closest('ix-radio-group');\n    if (parent) {\n      this.classMutationObserver = createClassMutationObserver(parent, () => {\n        this.hostElement.classList.toggle(\n          'ix-invalid--required',\n          parent.classList.contains('ix-invalid--required')\n        );\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.classMutationObserver) {\n      this.classMutationObserver.destroy();\n    }\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue() {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value ?? 'on');\n    } else {\n      this.formInternals.setFormValue(null);\n    }\n  }\n\n  onKeyDown(event: KeyboardEvent) {\n    if (this.disabled) {\n      return;\n    }\n    let preventEvent = false;\n\n    if (event.code === 'Space') {\n      preventEvent = true;\n      this.setCheckedState(true);\n    }\n    const closestRadioGroup = this.hostElement.closest('ix-radio-group');\n\n    switch (event.code) {\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        preventEvent = true;\n        closestRadioGroup?.setCheckedToNextItem(this.hostElement, false);\n        break;\n      case 'ArrowDown':\n      case 'ArrowRight':\n        preventEvent = true;\n        closestRadioGroup?.setCheckedToNextItem(this.hostElement, true);\n        break;\n      default:\n        break;\n    }\n\n    if (preventEvent) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(this.checked);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  render() {\n    let tabIndex = 0;\n\n    if (this.disabled) {\n      tabIndex = -1;\n    }\n\n    return (\n      <Host\n        aria-checked={a11yBoolean(this.checked)}\n        aria-disabled={a11yBoolean(this.disabled)}\n        role=\"radio\"\n        tabindex={tabIndex}\n        class={{\n          disabled: this.disabled,\n          checked: this.checked,\n        }}\n        onClick={() => {\n          if (this.disabled) return;\n          this.setCheckedState(true);\n        }}\n        onKeyDown={(event: KeyboardEvent) => this.onKeyDown(event)}\n        onBlur={() => this.ixBlur.emit()}\n      >\n        <label>\n          <div class=\"radio-button\">\n            <div\n              aria-hidden=\"true\"\n              class={{\n                ['radio-checkmark']: true,\n                checked: this.checked,\n              }}\n            >\n              <div\n                class=\"checkmark\"\n                style={{ visibility: this.checked ? 'visible' : 'hidden' }}\n              ></div>\n            </div>\n          </div>\n          {this.label && (\n            <ix-typography\n              format=\"label\"\n              textColor={this.disabled ? 'weak' : 'std'}\n            >\n              {this.label}\n              <slot></slot>\n            </ix-typography>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-row.js

@@ -1,4 +1,4 @@
-import { R as Row, d as defineCustomElement$1 } from './p-BNwXjBuF.js';
+import { R as Row, d as defineCustomElement$1 } from './p-B006bhbX.js';
 
 const IxRow = Row;
 const defineCustomElement = defineCustomElement$1;

package/components/ix-select-item.js

@@ -1,4 +1,4 @@
-import { S as SelectItem, d as defineCustomElement$1 } from './p-jbrSDf3o.js';
+import { S as SelectItem, d as defineCustomElement$1 } from './p-Dy6xvLn4.js';
 
 const IxSelectItem = SelectItem;
 const defineCustomElement = defineCustomElement$1;

package/components/ix-select.js

@@ -1,4 +1,4 @@
-import { S as Select, d as defineCustomElement$1 } from './p-DBsESzrF.js';
+import { S as Select, d as defineCustomElement$1 } from './p-BOQ00Fbs.js';
 
 const IxSelect = Select;
 const defineCustomElement = defineCustomElement$1;

package/components/ix-slider.js

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-CKuNFgoe.js';
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-D-__gyet.js';
 import { b as a11yHostAttributes } from './p-Bb7pDeaQ.js';
-import { O as OnListener } from './p-W_8b1-4d.js';
+import { O as OnListener } from './p-DdLose3V.js';
 import { m as makeRef } from './p-bcj7UEIC.js';
-import { d as defineCustomElement$3 } from './p-IgT3dgxG.js';
-import { d as defineCustomElement$2 } from './p-DgfGA7Z3.js';
+import { d as defineCustomElement$3 } from './p-DXFN8JXp.js';
+import { d as defineCustomElement$2 } from './p-BBwXlKhE.js';
 
 const sliderCss = ":host{display:flex;flex-direction:column;min-height:2rem;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-slider-track-marker--background);--trace-color:var(--theme-slider-trace--background);--tick-color:var(--theme-slider-track-marker--background);--tick-color--active:var(--theme-slider-trace-marker--background);--track-color:var(--theme-slider-track--background)}: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 input[type=range]{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1rem;margin:0}:host input[type=range].trace::before{content:\"\";position:absolute;display:block;z-index:-1;width:calc(7px + 100% * var(--trace-end) - 16px * var(--trace-end) - (7px + 100% * var(--trace-start) - 16px * var(--trace-start)));left:calc(7px + 100% * var(--trace-start) - 16px * var(--trace-start));height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%)}:host input[type=range].trace:not(.hide-trace-reference)::after{content:\"\";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(7px + 100% * var(--trace-reference) - 16px * var(--trace-reference))}:host input[type=range]::-webkit-slider-runnable-track{background:transparent;height:0.25rem}:host input[type=range]::-moz-range-track{background:transparent;height:0.25rem}:host input[type=range i]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}:host input[type=range i]::-moz-range-thumb{border:none;border-radius:0}:host input[type=range]::-webkit-slider-thumb{border-radius:100px;background-color:var(--theme-slider-thumb--background);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]::-moz-range-thumb{border-radius:100px;background-color:var(--theme-slider-thumb--background);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:hover::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-slider-thumb--background--active)}:host input[type=range]:active::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-slider-thumb--background--active)}:host input[type=range]:focus{outline:none}:host input[type=range]:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host input[type=range]:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host{}:host .ticks{display:flex;position:relative;top:50%;transform:translateY(-50%)}:host .ticks .tick{display:block;position:absolute;width:8px;height:8px;background-color:var(--tick-color);border-radius:100px;top:50%;transform:translateY(-50%);left:calc(var(--tick-value) * 100% - 4px)}:host .ticks .tick.tick-active{background-color:var(--tick-color--active)}:host .slider{position:relative;display:block;width:100%;height:1.5rem}:host .track{position:absolute;background-color:var(--track-color);height:4px;width:calc(100% - 1rem);margin-left:0.5rem;top:50%;transform:translateY(-50%);left:0px}:host .thumb{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;left:0px;top:50%;transform:translateY(-50%)}:host .hide-tooltip{display:none}:host .label{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;min-height:0px}:host .label-start{margin-left:0.5rem}:host .label-end{margin-right:0.5rem}:host .label-error{margin-left:0.5rem}:host(.error){--trace-color:var(--theme-slider-trace--background--invalid);--tick-color--active:var(--theme-slider-trace-marker--background--invalid)}:host(.error) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.error) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.error) input[type=range]:hover::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.error) input[type=range]:hover::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.error) input[type=range]:active::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.error) input[type=range]:active::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.disabled){pointer-events:none;--track-color:var(--theme-slider-track--background--disabled);--trace-color:var(--theme-slider-trace--background--disabled);--tick-color:var(--theme-slider-track-marker--background--disabled);--tick-color--active:var(--theme-slider-trace-marker--background--disabled)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--disabled)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--disabled)}";
 
@@ -154,12 +154,12 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends H {
             traceStart = valueInPercentage;
             traceEnd = traceReferenceInPercentage;
         }
-        return (h(Host, { key: '8607a41b85a5cb0241432eca5b6fccd931059247', class: {
+        return (h(Host, { key: '03faa36448299850133ed4e7c1dbfd5f7a28a91b', class: {
                 disabled: this.disabled,
                 error: !!this.error,
-            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, h("div", { key: 'e5b7d976938e96a4e6f39a2070b4144288f70f29', class: "slider" }, h("div", { key: 'c5e5f75983bad193e6ee5fd64f4a23ad06e7eebb', class: "track" }, h("div", { key: '10aad41281a45508e54c35d20a2b0d06c071c7f5', ref: this.thumbRef, class: "thumb", style: {
+            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, h("div", { key: '686f462a50a42a4a29a20d22d3637af74a3799ae', class: "slider" }, h("div", { key: '8ef5374cd9e421bb2265b1c0b0b7f2c1f2ecf6ff', class: "track" }, h("div", { key: '969da1a4f687d3a254c3353fa0f36ee5ce61130a', ref: this.thumbRef, class: "thumb", style: {
                 left: `calc(${valueInPercentage} * 100% - 8px)`,
-            } }), h("div", { key: '8b39d81357e4c4c328f4cca4118a9114ee061e3b', class: "ticks" }, this.marker
+            } }), h("div", { key: '7daba2cb0cf28c3d4b130eeebedae72827109cea', class: "ticks" }, this.marker
             ? this.marker.map((markerValue) => {
                 if (markerValue > this.max || markerValue < this.min) {
                     return;
@@ -172,7 +172,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends H {
                         '--tick-value': `${left}`,
                     } }));
             })
-            : null)), h("input", Object.assign({ key: 'e3dd09329ca7f15807222948b23a5691c0e8285d', id: "slider", type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), style: {
+            : null)), h("input", Object.assign({ key: '2bcc70bf378b44230c3dc7223e6f24707a6a3265', id: "slider", type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), style: {
                 '--value': `${valueInPercentage}`,
                 '--trace-reference': `${traceReferenceInPercentage}`,
                 '--trace-start': `${traceStart}`,
@@ -186,9 +186,9 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends H {
                 this.showTooltip = true;
             }, onBlur: () => {
                 this.showTooltip = false;
-            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), h("ix-tooltip", { key: 'e22440fb877deb31a73fcb3ef7d7de68e1e3bc26', ref: this.tooltipRef, class: {
+            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), h("ix-tooltip", { key: 'c887ce7b3d18a92de4cf359fb9f8706393a82529', ref: this.tooltipRef, class: {
                 'hide-tooltip': !this.showTooltip,
-            }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), h("div", { key: '94dc92cea736331e1adf377a550e0d5da003fcfc', class: "label" }, h("div", { key: 'ffd03546d0e0a5c8fb974f689c700572b429f76d', class: "label-start" }, h("slot", { key: 'fcf333f15011541e4ce9fc11472d00de73b2b768', name: "label-start" })), h("div", { key: '2b9ff68a94f3c882428414e2fa089b134a8ccbb6', class: "label-end" }, h("slot", { key: '5c5ba7b73af4067842afe022bf01686a3e437eae', name: "label-end" }))), this.error ? (h("ix-typography", { class: 'label-error', textColor: "alarm" }, this.error)) : null));
+            }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), h("div", { key: '8de8c23aa94fc924842631eb4d312efc5ee7cc6f', class: "label" }, h("div", { key: '402d7e1bd4bdd648e361b88f211d7d80e5c907b3', class: "label-start" }, h("slot", { key: 'f9a3a0ecc744b3ab91dda8d425309ce78c57e1f1', name: "label-start" })), h("div", { key: '188c06d13b00c0124603b6a0513cfa24e5467b62', class: "label-end" }, h("slot", { key: 'cc4e9bd389f10ab7e293a80844012877070b2750', name: "label-end" }))), this.error ? (h("ix-typography", { class: 'label-error', textColor: "alarm" }, this.error)) : null));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-spinner.js

@@ -1,4 +1,4 @@
-import { S as Spinner, d as defineCustomElement$1 } from './p-CkrLmEP7.js';
+import { S as Spinner, d as defineCustomElement$1 } from './p-1pd_0dhF.js';
 
 const IxSpinner = Spinner;
 const defineCustomElement = defineCustomElement$1;

package/components/ix-split-button.js

@@ -1,9 +1,10 @@
-import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-CKuNFgoe.js';
-import { z as iconContextMenu } from './p-taILGXkr.js';
-import { d as defineCustomElement$5 } from './p-Qsbo2ls8.js';
-import { d as defineCustomElement$4 } from './p-D1In20Wh.js';
-import { d as defineCustomElement$3 } from './p-ciUqTzkB.js';
-import { d as defineCustomElement$2 } from './p-CkrLmEP7.js';
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-D-__gyet.js';
+import { z as iconContextMenu } from './p-BvsadYCu.js';
+import { m as makeRef } from './p-bcj7UEIC.js';
+import { d as defineCustomElement$5 } from './p-C6_1qmP4.js';
+import { d as defineCustomElement$4 } from './p-BI7B-PUA.js';
+import { d as defineCustomElement$3 } from './p-BEDohapR.js';
+import { d as defineCustomElement$2 } from './p-1pd_0dhF.js';
 
 const splitButtonCss = ".btn-group ix-button:first-child .btn{border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:0px}.btn-group ix-button:last-child .btn{border-top-left-radius:0px;border-bottom-left-radius:0px}.btn-group ix-button:not(:first-child):not(:last-child) .btn{border-radius:0px;border-right:0px}:host{display:inline-block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-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 .btn-group{position:relative;display:inline-flex;vertical-align:middle;width:100%}:host .btn-group>ix-button:nth-child(1),:host .btn-group>ix-icon-button:nth-child(1){width:calc(100% - 2rem);--ix-button-border-radius-right:0}:host .btn-group>ix-icon-button:nth-child(2){width:2rem;--ix-button-border-radius-left:0}:host .middle-gap{gap:0.125rem}:host .left-button-border{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}";
 
@@ -27,31 +28,42 @@ const SplitButton = /*@__PURE__*/ proxyCustomElement(class SplitButton extends H
          * Disabled
          */
         this.disabled = false;
+        /**
+         * Disables only the main button while keeping the dropdown trigger enabled
+         *
+         *  @since 4.1.0
+         */
+        this.disableButton = false;
+        /**
+         * Disables only the dropdown trigger while keeping the main button enabled
+         *
+         * @since 4.1.0
+         */
+        this.disableDropdownButton = false;
         /**
          * Placement of the dropdown
          */
         this.placement = 'bottom-start';
         this.toggle = false;
+        this.triggerElementRef = makeRef();
     }
-    linkTriggerRef() {
-        if (this.triggerElement && this.dropdownElement) {
-            this.dropdownElement.trigger = this.triggerElement;
-        }
+    get isDisabledButton() {
+        return this.disabled || this.disableButton;
     }
-    componentDidLoad() {
-        this.linkTriggerRef();
+    get isDisabledIcon() {
+        return this.disabled || this.disableDropdownButton;
     }
     render() {
         var _a;
         const hasOutline = this.variant.toLocaleLowerCase().includes('secondary');
-        const buttonAttributes = {
+        const baseAttributes = {
             variant: this.variant,
-            disabled: this.disabled,
-            class: {
-                'left-button-border': !hasOutline,
-            },
         };
-        return (h(Host, { key: 'c0fec74005091e767fabcb3a3f19da5bdd95a43b' }, h("div", { key: '5ed4d1f6ecc27eacb58c101612b6f38d6487e903', class: { 'btn-group': true, 'middle-gap': !hasOutline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }))), h("ix-icon-button", Object.assign({ key: '0026fece6601ca9715b259bc2fd67f1c63993a93' }, buttonAttributes, { ref: (r) => (this.triggerElement = r), class: 'anchor', icon: (_a = this.splitIcon) !== null && _a !== void 0 ? _a : iconContextMenu, "aria-label": this.ariaLabelSplitIconButton }))), h("ix-dropdown", { key: 'c6e1fc922c216672d8c9545721b421021408f74f', ref: (r) => (this.dropdownElement = r), closeBehavior: this.closeBehavior }, h("slot", { key: 'ae34c0441b00ef9f29ea8a53308698cda6678468' }))));
+        const buttonAttributes = Object.assign(Object.assign({}, baseAttributes), { disabled: this.isDisabledButton, class: {
+                'left-button-border': !hasOutline,
+            } });
+        const dropdownButtonAttributes = Object.assign(Object.assign({}, baseAttributes), { disabled: this.isDisabledIcon });
+        return (h(Host, { key: '18955e55bbab4f5899f27cf2b38892c60bece302' }, h("div", { key: '8cc32b2686c3e02ee1f2a43d4a5f310cd2930dad', class: { 'btn-group': true, 'middle-gap': !hasOutline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }))), h("ix-icon-button", Object.assign({ key: 'ae7a2875314967f3100d1abcef3528a9822b0503' }, dropdownButtonAttributes, { ref: this.triggerElementRef, class: 'anchor', icon: (_a = this.splitIcon) !== null && _a !== void 0 ? _a : iconContextMenu, "aria-label": this.ariaLabelSplitIconButton }))), h("ix-dropdown", { key: 'd81abc1f01f55f2bc85740898e7f59173e62e182', closeBehavior: this.closeBehavior, trigger: this.triggerElementRef.waitForCurrent() }, h("slot", { key: '19c2623131a8ab3799e5a9bb75cc356bf500fffd' }))));
     }
     get hostElement() { return this; }
     static get style() { return splitButtonCss; }
@@ -64,6 +76,8 @@ const SplitButton = /*@__PURE__*/ proxyCustomElement(class SplitButton extends H
         "splitIcon": [1, "split-icon"],
         "ariaLabelSplitIconButton": [1, "aria-label-split-icon-button"],
         "disabled": [4],
+        "disableButton": [4, "disable-button"],
+        "disableDropdownButton": [4, "disable-dropdown-button"],
         "placement": [1],
         "toggle": [32]
     }]);

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

@@ -1 +1 @@
-{"file":"ix-split-button.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,ikDAAikD;;MC6B3kD,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAQE;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAuB,SAAS;AAE/C;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAkB,MAAM;AA+B7C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAqB,cAAc;AAE3C,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAkExB;IAxDS,cAAc,GAAA;QACpB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE;YAC/C,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc;;;IAItD,gBAAgB,GAAA;QACd,IAAI,CAAC,cAAc,EAAE;;IAGvB,MAAM,GAAA;;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC;AACzE,QAAA,MAAM,gBAAgB,GAAG;YACvB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,YAAA,KAAK,EAAE;gBACL,oBAAoB,EAAE,CAAC,UAAU;AAClC,aAAA;SACF;QACD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,UAAU,EAAE,EAAA,EACzD,IAAI,CAAC,KAAK,IACT,CAAA,CAAA,WAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACM,gBAAgB,EAAA,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAA,CAAA,EAEvC,IAAI,CAAC,KAAK,CACD,KAEZ,sCACM,gBAAgB,EAAA,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAC5B,YAAA,EAAA,IAAI,CAAC,eAAe,IAChB,CACnB,EACD,CAAA,CAAA,gBAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACM,gBAAgB,EAAA,EACpB,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,MAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,eAAe,EAC3B,YAAA,EAAA,IAAI,CAAC,wBAAwB,IACzB,CACd,EAEN,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,EACtC,aAAa,EAAE,IAAI,CAAC,aAAa,EAAA,EAEjC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACD,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/split-button/split-button.scss?tag=ix-split-button&encapsulation=shadow","src/components/split-button/split-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@use 'mixins/shadow-dom/component';\n@use 'legacy/components/button-group';\n\n:host {\n  display: inline-block;\n\n  @include component.ix-component;\n\n  .btn-group {\n    position: relative;\n    display: inline-flex;\n    vertical-align: middle;\n    width: 100%;\n\n    > ix-button:nth-child(1),\n    > ix-icon-button:nth-child(1) {\n      width: calc(100% - 2rem);\n      --ix-button-border-radius-right: 0;\n    }\n\n    > ix-icon-button:nth-child(2) {\n      width: 2rem;\n      --ix-button-border-radius-left: 0;\n    }\n  }\n\n  .middle-gap {\n    gap: 0.125rem;\n  }\n\n  .left-button-border {\n    border-top-width: 0.125rem;\n    border-right-width: 0;\n    border-left-width: 0.125rem;\n    border-bottom-width: 0.125rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { AlignedPlacement } from '../dropdown/placement';\nimport { iconContextMenu } from '@siemens/ix-icons/icons';\nimport { CloseBehavior } from '../dropdown/dropdown-controller';\nimport type { SplitButtonVariant } from './split-button.types';\n\n@Component({\n  tag: 'ix-split-button',\n  styleUrl: 'split-button.scss',\n  shadow: true,\n})\nexport class SplitButton {\n  @Element() hostElement!: HTMLIxSplitButtonElement;\n\n  /**\n   * Color variant of button\n   */\n  @Prop() variant: SplitButtonVariant = 'primary';\n\n  /**\n   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n   */\n  @Prop() closeBehavior: CloseBehavior = 'both';\n\n  /**\n   * Button label\n   */\n  @Prop() label?: string;\n\n  /**\n   * ARIA label for the button (use if no label and icon button)\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelButton?: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Icon of the button on the right\n   */\n  @Prop() splitIcon?: string;\n\n  /**\n   * ARIA label for the split icon button\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelSplitIconButton?: string;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  @State() toggle = false;\n\n  /**\n   * Button clicked\n   */\n  @Event() buttonClick!: EventEmitter<MouseEvent>;\n\n  private triggerElement?: HTMLElement;\n  private dropdownElement?: HTMLIxDropdownElement;\n\n  private linkTriggerRef() {\n    if (this.triggerElement && this.dropdownElement) {\n      this.dropdownElement.trigger = this.triggerElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.linkTriggerRef();\n  }\n\n  render() {\n    const hasOutline = this.variant.toLocaleLowerCase().includes('secondary');\n    const buttonAttributes = {\n      variant: this.variant,\n      disabled: this.disabled,\n      class: {\n        'left-button-border': !hasOutline,\n      },\n    };\n    return (\n      <Host>\n        <div class={{ 'btn-group': true, 'middle-gap': !hasOutline }}>\n          {this.label ? (\n            <ix-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            >\n              {this.label}\n            </ix-button>\n          ) : (\n            <ix-icon-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n              aria-label={this.ariaLabelButton}\n            ></ix-icon-button>\n          )}\n          <ix-icon-button\n            {...buttonAttributes}\n            ref={(r) => (this.triggerElement = r)}\n            class={'anchor'}\n            icon={this.splitIcon ?? iconContextMenu}\n            aria-label={this.ariaLabelSplitIconButton}\n          ></ix-icon-button>\n        </div>\n\n        <ix-dropdown\n          ref={(r) => (this.dropdownElement = r)}\n          closeBehavior={this.closeBehavior}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-split-button.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/split-button/split-button.scss?tag=ix-split-button&encapsulation=shadow","src/components/split-button/split-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@use 'mixins/shadow-dom/component';\n@use 'legacy/components/button-group';\n\n:host {\n  display: inline-block;\n\n  @include component.ix-component;\n\n  .btn-group {\n    position: relative;\n    display: inline-flex;\n    vertical-align: middle;\n    width: 100%;\n\n    > ix-button:nth-child(1),\n    > ix-icon-button:nth-child(1) {\n      width: calc(100% - 2rem);\n      --ix-button-border-radius-right: 0;\n    }\n\n    > ix-icon-button:nth-child(2) {\n      width: 2rem;\n      --ix-button-border-radius-left: 0;\n    }\n  }\n\n  .middle-gap {\n    gap: 0.125rem;\n  }\n\n  .left-button-border {\n    border-top-width: 0.125rem;\n    border-right-width: 0;\n    border-left-width: 0.125rem;\n    border-bottom-width: 0.125rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { AlignedPlacement } from '../dropdown/placement';\nimport { iconContextMenu } from '@siemens/ix-icons/icons';\nimport { CloseBehavior } from '../dropdown/dropdown-controller';\nimport type { SplitButtonVariant } from './split-button.types';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-split-button',\n  styleUrl: 'split-button.scss',\n  shadow: true,\n})\nexport class SplitButton {\n  @Element() hostElement!: HTMLIxSplitButtonElement;\n\n  /**\n   * Color variant of button\n   */\n  @Prop() variant: SplitButtonVariant = 'primary';\n\n  /**\n   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n   */\n  @Prop() closeBehavior: CloseBehavior = 'both';\n\n  /**\n   * Button label\n   */\n  @Prop() label?: string;\n\n  /**\n   * ARIA label for the button (use if no label and icon button)\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelButton?: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Icon of the button on the right\n   */\n  @Prop() splitIcon?: string;\n\n  /**\n   * ARIA label for the split icon button\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelSplitIconButton?: string;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Disables only the main button while keeping the dropdown trigger enabled\n   *\n   *  @since 4.1.0\n   */\n  @Prop() disableButton = false;\n\n  /**\n   * Disables only the dropdown trigger while keeping the main button enabled\n   *\n   * @since 4.1.0\n   */\n  @Prop() disableDropdownButton = false;\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  @State() toggle = false;\n\n  /**\n   * Button clicked\n   */\n  @Event() buttonClick!: EventEmitter<MouseEvent>;\n\n  private readonly triggerElementRef = makeRef<HTMLElement>();\n\n  private get isDisabledButton() {\n    return this.disabled || this.disableButton;\n  }\n\n  private get isDisabledIcon() {\n    return this.disabled || this.disableDropdownButton;\n  }\n\n  render() {\n    const hasOutline = this.variant.toLocaleLowerCase().includes('secondary');\n    const baseAttributes = {\n      variant: this.variant,\n    };\n\n    const buttonAttributes = {\n      ...baseAttributes,\n      disabled: this.isDisabledButton,\n      class: {\n        'left-button-border': !hasOutline,\n      },\n    };\n\n    const dropdownButtonAttributes = {\n      ...baseAttributes,\n      disabled: this.isDisabledIcon,\n    };\n\n    return (\n      <Host>\n        <div class={{ 'btn-group': true, 'middle-gap': !hasOutline }}>\n          {this.label ? (\n            <ix-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n              aria-label={this.ariaLabelButton}\n            >\n              {this.label}\n            </ix-button>\n          ) : (\n            <ix-icon-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n              aria-label={this.ariaLabelButton}\n            ></ix-icon-button>\n          )}\n          <ix-icon-button\n            {...dropdownButtonAttributes}\n            ref={this.triggerElementRef}\n            class={'anchor'}\n            icon={this.splitIcon ?? iconContextMenu}\n            aria-label={this.ariaLabelSplitIconButton}\n          ></ix-icon-button>\n        </div>\n\n        <ix-dropdown\n          closeBehavior={this.closeBehavior}\n          trigger={this.triggerElementRef.waitForCurrent()}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-tab-item.js

@@ -1,4 +1,4 @@
-import { T as TabItem, d as defineCustomElement$1 } from './p-BUIOrNGz.js';
+import { T as TabItem, d as defineCustomElement$1 } from './p-7E7AMiQV.js';
 
 const IxTabItem = TabItem;
 const defineCustomElement = defineCustomElement$1;

package/components/ix-tabs.js

@@ -1,4 +1,4 @@
-import { T as Tabs, d as defineCustomElement$1 } from './p-BccEFWg2.js';
+import { T as Tabs, d as defineCustomElement$1 } from './p-10zMtvCF.js';
 
 const IxTabs = Tabs;
 const defineCustomElement = defineCustomElement$1;