@siemens/ix 0.0.0-pr-2238-20251103105018 → 0.0.0-pr-2269-20251117133306

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-BZLbfHdO.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-DyGPjxFm.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;

package/components/ix-textarea.js

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-CKuNFgoe.js';
-import { H as HookValidationLifecycle } from './p-2fxFa_VL.js';
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-D-__gyet.js';
+import { H as HookValidationLifecycle } from './p-xHo-3QVy.js';
 import { m as makeRef } from './p-bcj7UEIC.js';
-import { m as mapValidationResult, T as TextareaElement, o as onInputBlur } from './p-DLPEB4G8.js';
-import { d as defineCustomElement$5 } from './p-DrH8EeUB.js';
-import { d as defineCustomElement$4 } from './p-VMk3rl5y.js';
-import { d as defineCustomElement$3 } from './p-IgT3dgxG.js';
-import { d as defineCustomElement$2 } from './p-DgfGA7Z3.js';
+import { m as mapValidationResult, T as TextareaElement, o as onInputBlur } from './p-CcWC2eNL.js';
+import { d as defineCustomElement$5 } from './p-Bz7hxKB6.js';
+import { d as defineCustomElement$4 } from './p-BVUD9f4A.js';
+import { d as defineCustomElement$3 } from './p-DXFN8JXp.js';
+import { d as defineCustomElement$2 } from './p-BBwXlKhE.js';
 
 const textareaCss = "input{min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled,input.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder,input.disabled::-moz-placeholder{color:transparent}input:disabled::placeholder,input.disabled::placeholder{color:transparent}textarea{min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}textarea[type=number]{text-align:right}textarea[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled,textarea.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder,textarea.disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder,textarea.disabled::placeholder{color:transparent}textarea{min-height:2rem;height:3.25rem;padding:calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness))}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]),input.ix-info:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--info)}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-info:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--info--hover) !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):active,input.ix-info:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--info--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]),input.ix-warning:not(.disabled):not(:disabled):not([disabled]){background-color:var(--theme-input--background--warning);border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover{background-color:var(--theme-input--background--warning--hover);border-color:var(--theme-input--border-color--warning--hover) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):active,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--warning--active) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover{background-color:var(--theme-input--background--invalid--hover);border-color:var(--theme-input--border-color--invalid--hover) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:inline-block;position:relative;width:auto}: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-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%}:host input{width:100%;height:100%}:host .start-container,:host .end-container{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1}:host .start-container{left:0}:host .end-container{right:0}:host .start-container ::slotted(*){margin-left:0.5rem}:host .start-container ::slotted(ix-icon.size-24),:host .start-container ::slotted(ix-icon-button.btn-icon-16){margin-left:0.25rem}:host .start-container ::slotted(ix-icon-button.btn-icon-32){margin-left:0}:host .end-container ::slotted(*){margin-right:0.5rem}:host .end-container ::slotted(ix-icon.size-24),:host .end-container ::slotted(ix-icon-button.btn-icon-16){margin-right:0.25rem}:host .end-container ::slotted(ix-icon-button.btn-icon-32){margin-right:0}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}:host(.disabled){pointer-events:none}:host(.disabled) input,:host(.disabled) textarea{pointer-events:none}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input{background-color:var(--theme-input--background--warning);border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:hover{background-color:var(--theme-input--background--warning--hover);border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input{background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:hover{background-color:var(--theme-input--background--invalid--hover);border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--invalid--active) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) textarea{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) textarea:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) textarea:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) textarea{background-color:var(--theme-input--background--warning);border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) textarea:hover{background-color:var(--theme-input--background--warning--hover);border-color:var(--theme-input--border-color--warning--hover) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) textarea:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) textarea,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) textarea{background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) textarea:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) textarea:hover{background-color:var(--theme-input--background--invalid--hover);border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) textarea:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) textarea:active{border-color:var(--theme-input--border-color--invalid--active) !important}";
 
@@ -150,10 +150,10 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends H {
     }
     render() {
         var _a;
-        return (h(Host, { key: '01f3753f8d224c04fcfd170004d1591155bae8fe', class: {
+        return (h(Host, { key: '50700f0fe24415eff151875bc3dc2a5d53a8f879', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '7e69d00bbdef14efac3be23a093602dc2c0dae76', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.textAreaRef }, !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: 'ebd14c19b62522cfb95ab1aa5177931020e12673', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : '').length, "/", this.maxLength)), h("div", { key: '26855cb5d7dcd374388e8c6d8ab8102b57414a47', class: "input-wrapper" }, h(TextareaElement, { key: '763de52ae31785cc5fd08b37c6f926528f3e665e', minLength: this.minLength, maxLength: this.maxLength, textareaCols: this.textareaCols, textareaRows: this.textareaRows, textareaHeight: this.isManuallyResized ? this.manualHeight : this.textareaHeight, textareaWidth: this.isManuallyResized ? this.manualWidth : this.textareaWidth, resizeBehavior: this.resizeBehavior, readonly: this.readonly, disabled: this.disabled, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, textAreaRef: this.textAreaRef, valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
+            } }, h("ix-field-wrapper", { key: '9a59b1c2632f975c3a754978c616bb80fc419fc3', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.textAreaRef }, !!this.maxLength && this.maxLength > 0 && (h("ix-typography", { key: '931e49d6a0fd853745f3f46b88f25b087b2038af', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : '').length, "/", this.maxLength)), h("div", { key: 'ef476a8a1bb52f9b21d93bd1b4d46b6b91a40872', class: "input-wrapper" }, h(TextareaElement, { key: 'b2b7006983d16c7c99f2229097aa3e45ecee5c15', minLength: this.minLength, maxLength: this.maxLength, textareaCols: this.textareaCols, textareaRows: this.textareaRows, textareaHeight: this.isManuallyResized ? this.manualHeight : this.textareaHeight, textareaWidth: this.isManuallyResized ? this.manualWidth : this.textareaWidth, resizeBehavior: this.resizeBehavior, readonly: this.readonly, disabled: this.disabled, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, textAreaRef: this.textAreaRef, valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
                 onInputBlur(this, this.textAreaRef.current);
                 this.touched = true;
             } })))));

package/components/ix-tile.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-CKuNFgoe.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-D-__gyet.js';
 
 const tileCss = ":host{min-width:11.937rem;max-width:11.937rem;width:11.937rem;display:flex;flex-direction:column;border:1px solid var(--theme-tile--border);border-radius:var(--theme-tile--border-radius);background-color:var(--theme-color-2);color:var(--theme-color-std-text);box-shadow:var(--theme-tile--box-shadow)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-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 .tile-header{display:flex;align-items:center;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host .tile-header,:host .tile-subheader,:host .tile-content,:host .tile-footer{padding:0 1rem}:host .tile-header,:host .tile-content{flex-grow:1}:host .tile-header.has-content{display:flex;height:2.5rem;max-height:2.5rem;padding-inline-end:0.5rem}:host .tile-subheader{color:var(--theme-btn-invisible-secondary--color);flex-grow:0}:host .tile-footer.has-content{border-block-start:1px solid var(--theme-color-1);height:2.5rem}:host(.tile-small){height:2.5rem;min-height:2.5rem;max-height:2.5rem}:host(.tile-medium){height:5rem;min-height:5rem;max-height:5rem}:host(.tile-big){height:10rem;min-height:10rem;max-height:10rem}:host(:active),:host(:focus-visible),:host(:visited){outline:none}";
 
@@ -23,17 +23,17 @@ const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends H {
         this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
     }
     render() {
-        return (h(Host, { key: 'aa9ab71b723ec68685a2d0a37b53d9edcfe82cd6', class: {
+        return (h(Host, { key: 'f5c50da791dcbdfeb884d33071b6d557360c1a60', class: {
                 'tile-small': this.size === 'small',
                 'tile-medium': this.size === 'medium',
                 'tile-big': this.size === 'big',
-            } }, h("div", { key: 'fdbc231e60e607c9a5c60d66138f87d563d3a1d1', class: {
+            } }, h("div", { key: '651e393dbd8f7f7cd55373c3bdadc195dfc88cbd', class: {
                 'tile-header': true,
                 'has-content': this.hasHeaderSlot,
-            } }, h("slot", { key: 'f881aa65ee46aa1f8ea7991d94e934fed4fe5e6a', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '3a7603fe58fd66c7309a9ec743839f6df1db88d3', class: "tile-subheader" }, h("slot", { key: '846def8a0c20dba9c4d929a10ffad9ad2da73128', name: "subheader" })), h("div", { key: '1a1c7830c296988a0928d76b2af53c14d999e2ac', class: "tile-content" }, h("slot", { key: '5450f27247704ac16db78f1c6507ea9319c367c4' })), h("div", { key: '0464f19054f1c1e15c06fdab283d72f17ab0b9cd', class: {
+            } }, h("slot", { key: '1b94a241077664e5bcb535321f816b3b3faa9fad', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: 'd2ce3123c9ffa767e07edf25248567ee9406fc95', class: "tile-subheader" }, h("slot", { key: '025ac544a3750fbfb145d1350e7091e969c2e369', name: "subheader" })), h("div", { key: '6ce8df1e1b426df28b42f490db11dc1d951715e6', class: "tile-content" }, h("slot", { key: '7bb66b49df63f613c3b7be8ff0da64bc16dde6b9' })), h("div", { key: '55f6e978190c3c8581310559a7a46ec6c4cc0e2f', class: {
                 'tile-footer': true,
                 'has-content': this.hasFooterSlot,
-            } }, h("slot", { key: 'ce04db8085fda4bb5faaa170895cad9c8f850555', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
+            } }, h("slot", { key: 'd63334865e6a32a6bb082939b44f3bf0b041b93a', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
     }
     get hostElement() { return this; }
     static get style() { return tileCss; }

package/components/ix-time-input.js

@@ -1,20 +1,20 @@
-import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-CKuNFgoe.js';
-import { Q as iconClock } from './p-taILGXkr.js';
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-D-__gyet.js';
+import { Q as iconClock } from './p-BvsadYCu.js';
 import { D as DateTime } from './p-bDicGJUN.js';
-import { a as addDisposableChangesAndVisibilityObservers, b as adjustPaddingForStartAndEnd, S as SlotEnd, c as SlotStart } from './p-DLPEB4G8.js';
-import { H as HookValidationLifecycle, c as createClassMutationObserver } from './p-2fxFa_VL.js';
+import { h as handleSubmitOnEnterKeydown, a as addDisposableChangesAndVisibilityObservers, b as adjustPaddingForStartAndEnd, S as SlotEnd, c as SlotStart } from './p-CcWC2eNL.js';
+import { H as HookValidationLifecycle, c as createClassMutationObserver } from './p-xHo-3QVy.js';
 import { m as makeRef } from './p-bcj7UEIC.js';
 import { h as handleIconClick, o as openDropdown, c as closeDropdown, a as createValidityState } from './p-BvFOMxgl.js';
-import { d as defineCustomElement$b } from './p-Qsbo2ls8.js';
-import { d as defineCustomElement$a } from './p-CQhe_rqk.js';
-import { d as defineCustomElement$9 } from './p-D1In20Wh.js';
-import { d as defineCustomElement$8 } from './p-DrH8EeUB.js';
-import { d as defineCustomElement$7 } from './p-VMk3rl5y.js';
-import { d as defineCustomElement$6 } from './p-ciUqTzkB.js';
-import { d as defineCustomElement$5 } from './p-CkrLmEP7.js';
-import { d as defineCustomElement$4 } from './p-Bvf7gwPU.js';
-import { d as defineCustomElement$3 } from './p-IgT3dgxG.js';
-import { d as defineCustomElement$2 } from './p-DgfGA7Z3.js';
+import { d as defineCustomElement$b } from './p-C6_1qmP4.js';
+import { d as defineCustomElement$a } from './p-COWPG_SD.js';
+import { d as defineCustomElement$9 } from './p-BI7B-PUA.js';
+import { d as defineCustomElement$8 } from './p-Bz7hxKB6.js';
+import { d as defineCustomElement$7 } from './p-BVUD9f4A.js';
+import { d as defineCustomElement$6 } from './p-BEDohapR.js';
+import { d as defineCustomElement$5 } from './p-1pd_0dhF.js';
+import { d as defineCustomElement$4 } from './p-BrYfZ-wy.js';
+import { d as defineCustomElement$3 } from './p-DXFN8JXp.js';
+import { d as defineCustomElement$2 } from './p-BBwXlKhE.js';
 
 const timeInputCss = "input{min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled,input.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder,input.disabled::-moz-placeholder{color:transparent}input:disabled::placeholder,input.disabled::placeholder{color:transparent}textarea{min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}textarea[type=number]{text-align:right}textarea[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled,textarea.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder,textarea.disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder,textarea.disabled::placeholder{color:transparent}textarea{min-height:2rem;height:3.25rem;padding:calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness))}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]),input.ix-info:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--info)}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-info:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--info--hover) !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):active,input.ix-info:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--info--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]),input.ix-warning:not(.disabled):not(:disabled):not([disabled]){background-color:var(--theme-input--background--warning);border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover{background-color:var(--theme-input--background--warning--hover);border-color:var(--theme-input--border-color--warning--hover) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):active,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--warning--active) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover{background-color:var(--theme-input--background--invalid--hover);border-color:var(--theme-input--border-color--invalid--hover) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:inline-block;position:relative;width:auto}: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-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%}:host input{width:100%;height:100%}:host .start-container,:host .end-container{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1}:host .start-container{left:0}:host .end-container{right:0}:host .start-container ::slotted(*){margin-left:0.5rem}:host .start-container ::slotted(ix-icon.size-24),:host .start-container ::slotted(ix-icon-button.btn-icon-16){margin-left:0.25rem}:host .start-container ::slotted(ix-icon-button.btn-icon-32){margin-left:0}:host .end-container ::slotted(*){margin-right:0.5rem}:host .end-container ::slotted(ix-icon.size-24),:host .end-container ::slotted(ix-icon-button.btn-icon-16){margin-right:0.25rem}:host .end-container ::slotted(ix-icon-button.btn-icon-32){margin-right:0}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}:host(.disabled){pointer-events:none}:host(.disabled) input,:host(.disabled) textarea{pointer-events:none}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input{background-color:var(--theme-input--background--warning);border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:hover{background-color:var(--theme-input--background--warning--hover);border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input{background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:hover{background-color:var(--theme-input--background--invalid--hover);border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--invalid--active) !important}: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 input{width:100%;height:100%}:host .time-icon-hidden{display:none}:host(.readonly) input{pointer-events:none}.input-wrapper{position:relative}";
 
@@ -112,12 +112,21 @@ const TimeInput = /*@__PURE__*/ proxyCustomElement(class TimeInput extends H {
          */
         // eslint-disable-next-line @stencil-community/decorators-style
         this.i18nMillisecondColumnHeader = 'ms';
+        /**
+         * If false, pressing Enter will submit the form (if inside a form).
+         * Set to true to suppress submit on Enter.
+         */
+        this.suppressSubmitOnEnter = false;
         /**
          * Hides the header of the picker.
          *
          * @since 4.0.0
          */
         this.hideHeader = false;
+        /**
+         * Text alignment within the time input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.
+         */
+        this.textAlignment = 'start';
         this.show = false;
         this.time = null;
         this.isInputInvalid = false;
@@ -136,6 +145,9 @@ const TimeInput = /*@__PURE__*/ proxyCustomElement(class TimeInput extends H {
     watchValuePropHandler(newValue) {
         this.onInput(newValue);
     }
+    handleInputKeyDown(event) {
+        handleSubmitOnEnterKeydown(event, this.suppressSubmitOnEnter, this.formInternals.form);
+    }
     updateFormInternalValue(value) {
         this.formInternals.setFormValue(value);
         this.value = value;
@@ -220,6 +232,8 @@ const TimeInput = /*@__PURE__*/ proxyCustomElement(class TimeInput extends H {
     renderInput() {
         return (h("div", { class: "input-wrapper" }, h(SlotStart, { slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h("input", { autoComplete: "off", class: {
                 'is-invalid': this.isInputInvalid,
+            }, style: {
+                textAlign: this.textAlignment,
             }, disabled: this.disabled, readOnly: this.readonly, required: this.required, ref: this.inputElementRef, type: "text", value: this.value, placeholder: this.placeholder, name: this.name, onInput: (event) => {
                 const target = event.target;
                 this.onInput(target.value);
@@ -234,7 +248,7 @@ const TimeInput = /*@__PURE__*/ proxyCustomElement(class TimeInput extends H {
             }, onBlur: () => {
                 this.ixBlur.emit();
                 this.touched = true;
-            } }), h(SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { "data-testid": "open-time-picker", class: { 'time-icon-hidden': this.disabled || this.readonly }, variant: "subtle-tertiary", icon: iconClock, onClick: (event) => this.onTimeIconClick(event), "aria-label": "Toggle time picker", "aria-expanded": this.show }))));
+            }, onKeyDown: (event) => this.handleInputKeyDown(event) }), h(SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { "data-testid": "open-time-picker", class: { 'time-icon-hidden': this.disabled || this.readonly }, variant: "subtle-tertiary", icon: iconClock, onClick: (event) => this.onTimeIconClick(event), "aria-label": "Toggle time picker", "aria-expanded": this.show }))));
     }
     hookValidationLifecycle({ isInfo, isInvalid, isInvalidByRequired, isValid, isWarning, }) {
         this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;
@@ -277,12 +291,12 @@ const TimeInput = /*@__PURE__*/ proxyCustomElement(class TimeInput extends H {
         const invalidText = this.isInputInvalid
             ? this.i18nErrorTimeUnparsable
             : this.invalidText;
-        return (h(Host, { key: '09ce97a9605c6b22a872712c038a2628e5b0b81a', class: {
+        return (h(Host, { key: '2d781932da61679d4e51c81f43078daed57c74bd', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '7885db329aa8632cfaeb55d427ba4d142a8b6ec6', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), h("ix-dropdown", { key: 'e1e55b1d1b48ba6b90e9181814c7d01e1fcd8bae', "data-testid": "time-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
+            } }, h("ix-field-wrapper", { key: 'edd0faa4a3777bb9410ec9f8c6dd2aa1ec627ef8', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), h("ix-dropdown", { key: '59fb638e67f04111874ff4df69815ebfab61cded', "data-testid": "time-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
                 this.show = event.detail;
-            } }, h("ix-time-picker", { key: '7c3b0350de27af8fe8633478ce1100fd62f75976', ref: this.timePickerRef, format: this.format, time: (_a = this.time) !== null && _a !== void 0 ? _a : '', hourInterval: this.hourInterval, minuteInterval: this.minuteInterval, secondInterval: this.secondInterval, millisecondInterval: this.millisecondInterval, embedded: true, hideHeader: this.hideHeader, i18nConfirmTime: this.i18nSelectTime, i18nHeader: this.i18nTime, i18nHourColumnHeader: this.i18nHourColumnHeader, i18nSecondColumnHeader: this.i18nSecondColumnHeader, i18nMinuteColumnHeader: this.i18nMinuteColumnHeader, i18nMillisecondColumnHeader: this.i18nMillisecondColumnHeader, onTimeSelect: (event) => {
+            } }, h("ix-time-picker", { key: '9e8c49708bf37ef2160d737086fed578999aeac5', ref: this.timePickerRef, format: this.format, time: (_a = this.time) !== null && _a !== void 0 ? _a : '', hourInterval: this.hourInterval, minuteInterval: this.minuteInterval, secondInterval: this.secondInterval, millisecondInterval: this.millisecondInterval, embedded: true, hideHeader: this.hideHeader, i18nConfirmTime: this.i18nSelectTime, i18nHeader: this.i18nTime, i18nHourColumnHeader: this.i18nHourColumnHeader, i18nSecondColumnHeader: this.i18nSecondColumnHeader, i18nMinuteColumnHeader: this.i18nMinuteColumnHeader, i18nMillisecondColumnHeader: this.i18nMillisecondColumnHeader, onTimeSelect: (event) => {
                 this.onInput(event.detail);
                 this.show = false;
             } }))));
@@ -320,7 +334,9 @@ const TimeInput = /*@__PURE__*/ proxyCustomElement(class TimeInput extends H {
         "i18nMinuteColumnHeader": [1, "i18n-minute-column-header"],
         "i18nSecondColumnHeader": [1, "i18n-second-column-header"],
         "i18nMillisecondColumnHeader": [1, "i18n-millisecond-column-header"],
+        "suppressSubmitOnEnter": [516, "suppress-submit-on-enter"],
         "hideHeader": [4, "hide-header"],
+        "textAlignment": [1, "text-alignment"],
         "show": [32],
         "time": [32],
         "isInputInvalid": [32],