@siemens/ix-docs 0.0.0-pr-2238-20251103105018 → 4.0.0

package/build/static/demo/v2/preview/html/assets/ix-radio.entry-DQ9u36FI.js

@@ -0,0 +1,130 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-CTsFSACc.js";
+import { a as a11yBoolean } from "./a11y-Bb7pDeaQ-DNI84lDX.js";
+import { c as createClassMutationObserver } from "./validation-D_dk-JqT-CRNNydA9.js";
+const radioCss = ":host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .radio-checkmark{all:unset;display:inline-flex;position:relative;align-items:center;justify-content:center;width:1.125rem;min-width:1.125rem;max-width:1.125rem;height:1.125rem;min-height:1.125rem;max-height:1.125rem;border:1px solid white;border-radius:100px}:host .radio-button{height:1.5rem;width:1.5rem;display:flex;align-items:center;justify-content:center}:host label{display:flex;justify-content:flex-start;align-items:center;width:100%;height:100%}:host .checkmark{border-radius:100px;background-color:var(--theme-color-primary--contrast);width:0.5rem;height:0.5rem}:host .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(:hover) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(:active) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.checked) .radio-checkmark,:host([indeterminate]) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.checked:hover) .radio-checkmark,:host([indeterminate]:hover) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.checked:active) .radio-checkmark,:host([indeterminate]:active) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.checked.disabled) .radio-checkmark,:host([indeterminate].disabled) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}:host(:focus-visible){outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:var(--theme-radiobtn--focus--outline-offset)}ix-typography{margin:0.125rem 0 0.125rem 0.5rem}:host(.ix-info:not(.disabled)) .radio-checkmark{--theme-radiobtn-unchecked--background:var(\n    --theme-radiobtn-unchecked--background--info\n  );--theme-radiobtn-unchecked--background--hover:var(\n    --theme-radiobtn-unchecked--background--info--hover\n  );--theme-radiobtn-unchecked--background--active:var(\n    --theme-radiobtn-unchecked--background--info--active\n  );--theme-radiobtn-unchecked--border-color:var(\n    --theme-radiobtn-unchecked--border-color--info\n  );--theme-radiobtn-unchecked--border-color--hover:var(\n    --theme-radiobtn-unchecked--border-color--info--hover\n  );--theme-radiobtn-unchecked--border-color--active:var(\n    --theme-radiobtn-unchecked--border-color--info--active\n  );--theme-radiobtn-checked--background:var(\n    --theme-radiobtn-checked--background--info\n  );--theme-radiobtn-checked--background--hover:var(\n    --theme-radiobtn-checked--background--info--hover\n  );--theme-radiobtn-checked--background--active:var(\n    --theme-radiobtn-checked--background--info--active\n  );--theme-radiobtn-checked--border-color:var(\n    --theme-radiobtn-checked--border-color--info\n  );--theme-radiobtn-checked--border-color--hover:var(\n    --theme-radiobtn-checked--border-color--info--hover\n  );--theme-radiobtn-checked--border-color--active:var(\n    --theme-radiobtn-checked--border-color--info--active\n  );--theme-radiobtn-mixed--background:var(\n    --theme-radiobtn-mixed--background--info\n  );--theme-radiobtn-mixed--background--hover:var(\n    --theme-radiobtn-mixed--background--info--hover\n  );--theme-radiobtn-mixed--background--active:var(\n    --theme-radiobtn-mixed--background--info--active\n  );--theme-radiobtn-mixed--border-color:var(\n    --theme-radiobtn-mixed--border-color--info\n  );--theme-radiobtn-mixed--border-color--hover:var(\n    --theme-radiobtn-mixed--border-color--info--hover\n  );--theme-radiobtn-mixed--border-color--active:var(\n    --theme-radiobtn-mixed--border-color--info--active\n  )}:host(.ix-info) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-info:hover) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-info:active) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-info.checked) .radio-checkmark,:host(.ix-info[indeterminate]) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-info.checked:hover) .radio-checkmark,:host(.ix-info[indeterminate]:hover) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-info.checked:active) .radio-checkmark,:host(.ix-info[indeterminate]:active) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-info.disabled) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-info.checked.disabled) .radio-checkmark,:host(.ix-info[indeterminate].disabled) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}:host(.ix-warning:not(.disabled)) .radio-checkmark{--theme-radiobtn-unchecked--background:var(\n    --theme-radiobtn-unchecked--background--warning\n  );--theme-radiobtn-unchecked--background--hover:var(\n    --theme-radiobtn-unchecked--background--warning--hover\n  );--theme-radiobtn-unchecked--background--active:var(\n    --theme-radiobtn-unchecked--background--warning--active\n  );--theme-radiobtn-unchecked--border-color:var(\n    --theme-radiobtn-unchecked--border-color--warning\n  );--theme-radiobtn-unchecked--border-color--hover:var(\n    --theme-radiobtn-unchecked--border-color--warning--hover\n  );--theme-radiobtn-unchecked--border-color--active:var(\n    --theme-radiobtn-unchecked--border-color--warning--active\n  );--theme-radiobtn-checked--background:var(\n    --theme-radiobtn-checked--background--warning\n  );--theme-radiobtn-checked--background--hover:var(\n    --theme-radiobtn-checked--background--warning--hover\n  );--theme-radiobtn-checked--background--active:var(\n    --theme-radiobtn-checked--background--warning--active\n  );--theme-radiobtn-checked--border-color:var(\n    --theme-radiobtn-checked--border-color--warning\n  );--theme-radiobtn-checked--border-color--hover:var(\n    --theme-radiobtn-checked--border-color--warning--hover\n  );--theme-radiobtn-checked--border-color--active:var(\n    --theme-radiobtn-checked--border-color--warning--active\n  );--theme-radiobtn-mixed--background:var(\n    --theme-radiobtn-mixed--background--warning\n  );--theme-radiobtn-mixed--background--hover:var(\n    --theme-radiobtn-mixed--background--warning--hover\n  );--theme-radiobtn-mixed--background--active:var(\n    --theme-radiobtn-mixed--background--warning--active\n  );--theme-radiobtn-mixed--border-color:var(\n    --theme-radiobtn-mixed--border-color--warning\n  );--theme-radiobtn-mixed--border-color--hover:var(\n    --theme-radiobtn-mixed--border-color--warning--hover\n  );--theme-radiobtn-mixed--border-color--active:var(\n    --theme-radiobtn-mixed--border-color--warning--active\n  )}:host(.ix-warning) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-warning:hover) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-warning:active) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-warning.checked) .radio-checkmark,:host(.ix-warning[indeterminate]) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-warning.checked:hover) .radio-checkmark,:host(.ix-warning[indeterminate]:hover) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-warning.checked:active) .radio-checkmark,:host(.ix-warning[indeterminate]:active) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-warning.disabled) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-warning.checked.disabled) .radio-checkmark,:host(.ix-warning[indeterminate].disabled) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}:host(.ix-invalid--required:not(.disabled)) .radio-checkmark{--theme-radiobtn-unchecked--background:var(\n    --theme-radiobtn-unchecked--background--invalid\n  );--theme-radiobtn-unchecked--background--hover:var(\n    --theme-radiobtn-unchecked--background--invalid--hover\n  );--theme-radiobtn-unchecked--background--active:var(\n    --theme-radiobtn-unchecked--background--invalid--active\n  );--theme-radiobtn-unchecked--border-color:var(\n    --theme-radiobtn-unchecked--border-color--invalid\n  );--theme-radiobtn-unchecked--border-color--hover:var(\n    --theme-radiobtn-unchecked--border-color--invalid--hover\n  );--theme-radiobtn-unchecked--border-color--active:var(\n    --theme-radiobtn-unchecked--border-color--invalid--active\n  );--theme-radiobtn-checked--background:var(\n    --theme-radiobtn-checked--background--invalid\n  );--theme-radiobtn-checked--background--hover:var(\n    --theme-radiobtn-checked--background--invalid--hover\n  );--theme-radiobtn-checked--background--active:var(\n    --theme-radiobtn-checked--background--invalid--active\n  );--theme-radiobtn-checked--border-color:var(\n    --theme-radiobtn-checked--border-color--invalid\n  );--theme-radiobtn-checked--border-color--hover:var(\n    --theme-radiobtn-checked--border-color--invalid--hover\n  );--theme-radiobtn-checked--border-color--active:var(\n    --theme-radiobtn-checked--border-color--invalid--active\n  );--theme-radiobtn-mixed--background:var(\n    --theme-radiobtn-mixed--background--invalid\n  );--theme-radiobtn-mixed--background--hover:var(\n    --theme-radiobtn-mixed--background--invalid--hover\n  );--theme-radiobtn-mixed--background--active:var(\n    --theme-radiobtn-mixed--background--invalid--active\n  );--theme-radiobtn-mixed--border-color:var(\n    --theme-radiobtn-mixed--border-color--invalid\n  );--theme-radiobtn-mixed--border-color--hover:var(\n    --theme-radiobtn-mixed--border-color--invalid--hover\n  );--theme-radiobtn-mixed--border-color--active:var(\n    --theme-radiobtn-mixed--border-color--invalid--active\n  )}:host(.ix-invalid--required) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-invalid--required:hover) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-invalid--required:active) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-invalid--required.checked) .radio-checkmark,:host(.ix-invalid--required[indeterminate]) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-invalid--required.checked:hover) .radio-checkmark,:host(.ix-invalid--required[indeterminate]:hover) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-invalid--required.checked:active) .radio-checkmark,:host(.ix-invalid--required[indeterminate]:active) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-invalid--required.disabled) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-invalid--required.checked.disabled) .radio-checkmark,:host(.ix-invalid--required[indeterminate].disabled) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}:host(.ix-invalid:not(.disabled)) .radio-checkmark{--theme-radiobtn-unchecked--background:var(\n    --theme-radiobtn-unchecked--background--invalid\n  );--theme-radiobtn-unchecked--background--hover:var(\n    --theme-radiobtn-unchecked--background--invalid--hover\n  );--theme-radiobtn-unchecked--background--active:var(\n    --theme-radiobtn-unchecked--background--invalid--active\n  );--theme-radiobtn-unchecked--border-color:var(\n    --theme-radiobtn-unchecked--border-color--invalid\n  );--theme-radiobtn-unchecked--border-color--hover:var(\n    --theme-radiobtn-unchecked--border-color--invalid--hover\n  );--theme-radiobtn-unchecked--border-color--active:var(\n    --theme-radiobtn-unchecked--border-color--invalid--active\n  );--theme-radiobtn-checked--background:var(\n    --theme-radiobtn-checked--background--invalid\n  );--theme-radiobtn-checked--background--hover:var(\n    --theme-radiobtn-checked--background--invalid--hover\n  );--theme-radiobtn-checked--background--active:var(\n    --theme-radiobtn-checked--background--invalid--active\n  );--theme-radiobtn-checked--border-color:var(\n    --theme-radiobtn-checked--border-color--invalid\n  );--theme-radiobtn-checked--border-color--hover:var(\n    --theme-radiobtn-checked--border-color--invalid--hover\n  );--theme-radiobtn-checked--border-color--active:var(\n    --theme-radiobtn-checked--border-color--invalid--active\n  );--theme-radiobtn-mixed--background:var(\n    --theme-radiobtn-mixed--background--invalid\n  );--theme-radiobtn-mixed--background--hover:var(\n    --theme-radiobtn-mixed--background--invalid--hover\n  );--theme-radiobtn-mixed--background--active:var(\n    --theme-radiobtn-mixed--background--invalid--active\n  );--theme-radiobtn-mixed--border-color:var(\n    --theme-radiobtn-mixed--border-color--invalid\n  );--theme-radiobtn-mixed--border-color--hover:var(\n    --theme-radiobtn-mixed--border-color--invalid--hover\n  );--theme-radiobtn-mixed--border-color--active:var(\n    --theme-radiobtn-mixed--border-color--invalid--active\n  )}:host(.ix-invalid) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-invalid:hover) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-invalid:active) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-invalid.checked) .radio-checkmark,:host(.ix-invalid[indeterminate]) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-invalid.checked:hover) .radio-checkmark,:host(.ix-invalid[indeterminate]:hover) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-invalid.checked:active) .radio-checkmark,:host(.ix-invalid[indeterminate]:active) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-invalid.disabled) .radio-checkmark{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-invalid.checked.disabled) .radio-checkmark,:host(.ix-invalid[indeterminate].disabled) .radio-checkmark{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}";
+const Radio = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.checkedChange = createEvent(this, "checkedChange", 7);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.ixBlur = createEvent(this, "ixBlur", 7);
+    if (hostRef.$hostElement$["s-ei"]) {
+      this.formInternals = hostRef.$hostElement$["s-ei"];
+    } else {
+      this.formInternals = hostRef.$hostElement$.attachInternals();
+      hostRef.$hostElement$["s-ei"] = this.formInternals;
+    }
+    this.disabled = false;
+    this.checked = false;
+    this.required = false;
+  }
+  /** @internal */
+  async setCheckedState(newChecked) {
+    if (this.checked) {
+      return;
+    }
+    const result = this.checkedChange.emit(newChecked);
+    if (result.defaultPrevented) {
+      return;
+    }
+    this.checked = newChecked;
+  }
+  async onCheckedChange() {
+    this.updateFormInternalValue();
+  }
+  onValueChange() {
+    this.valueChange.emit(this.value);
+  }
+  connectedCallback() {
+    const parent = this.hostElement.closest("ix-radio-group");
+    if (parent) {
+      this.classMutationObserver = createClassMutationObserver(parent, () => {
+        this.hostElement.classList.toggle("ix-invalid--required", parent.classList.contains("ix-invalid--required"));
+      });
+    }
+  }
+  disconnectedCallback() {
+    if (this.classMutationObserver) {
+      this.classMutationObserver.destroy();
+    }
+  }
+  componentWillLoad() {
+    this.updateFormInternalValue();
+  }
+  updateFormInternalValue() {
+    var _a;
+    if (this.checked) {
+      this.formInternals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : "on");
+    } else {
+      this.formInternals.setFormValue(null);
+    }
+  }
+  onKeyDown(event) {
+    if (this.disabled) {
+      return;
+    }
+    let preventEvent = false;
+    if (event.code === "Space") {
+      preventEvent = true;
+      this.setCheckedState(true);
+    }
+    const closestRadioGroup = this.hostElement.closest("ix-radio-group");
+    switch (event.code) {
+      case "ArrowUp":
+      case "ArrowLeft":
+        preventEvent = true;
+        closestRadioGroup === null || closestRadioGroup === void 0 ? void 0 : closestRadioGroup.setCheckedToNextItem(this.hostElement, false);
+        break;
+      case "ArrowDown":
+      case "ArrowRight":
+        preventEvent = true;
+        closestRadioGroup === null || closestRadioGroup === void 0 ? void 0 : closestRadioGroup.setCheckedToNextItem(this.hostElement, true);
+        break;
+    }
+    if (preventEvent) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+  /** @internal */
+  hasValidValue() {
+    return Promise.resolve(this.checked);
+  }
+  /** @internal */
+  getAssociatedFormElement() {
+    return Promise.resolve(this.formInternals.form);
+  }
+  render() {
+    let tabIndex = 0;
+    if (this.disabled) {
+      tabIndex = -1;
+    }
+    return h(Host, { key: "f2af88d1133c45be1101d9148f8e00f5428be7a6", "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", tabindex: tabIndex, class: {
+      disabled: this.disabled,
+      checked: this.checked
+    }, onClick: () => {
+      if (this.disabled)
+        return;
+      this.setCheckedState(true);
+    }, onKeyDown: (event) => this.onKeyDown(event), onBlur: () => this.ixBlur.emit() }, h("label", { key: "93f6a862ac81885b247dc499d34e966d56973970" }, h("div", { key: "253b7ae5544c8d8ee3449ea0be187246cbe314d5", class: "radio-button" }, h("div", { key: "2e0d99a793f5ddd3b3d5a5d32732e8cd88d8b1f5", "aria-hidden": "true", class: {
+      ["radio-checkmark"]: true,
+      checked: this.checked
+    } }, h("div", { key: "7ad24225a37a30e1f002bc07f450a85eb42b7383", class: "checkmark", style: { visibility: this.checked ? "visible" : "hidden" } }))), this.label && h("ix-typography", { key: "7790a763f1a329cc3e0595aeddbe7e5a66c8339e", format: "label", textColor: this.disabled ? "weak" : "std" }, this.label, h("slot", { key: "ff24cb9646a2a1c4b18236af291d13cd044f3235" }))));
+  }
+  static get formAssociated() {
+    return true;
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "checked": ["onCheckedChange"],
+      "value": ["onValueChange"]
+    };
+  }
+};
+Radio.style = radioCss;
+export {
+  Radio as ix_radio
+};

package/build/static/demo/v2/preview/html/assets/{ix-select.entry-CJE6e1SF.js → ix-select.entry-BAIXU4ou.js}

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
-import { D as iconPlus, l as iconClear, r as iconChevronUpSmall, g as iconChevronDownSmall } from "./index-Cz75KU1f-BUHLjWzB.js";
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-CTsFSACc.js";
+import { C as iconPlus, l as iconClear, r as iconChevronUpSmall, h as iconChevronDownSmall } from "./index-8HpPmDK_-DinFJk0z.js";
 import { a as a11yBoolean } from "./a11y-Bb7pDeaQ-DNI84lDX.js";
 import { A as ArrowFocusController } from "./focus-BAKpVknt-BX94nhwN.js";
-import { H as HookValidationLifecycle } from "./validation-D_dk-JqT-hK2sg2of.js";
-import { O as OnListener } from "./listener-DAJkOQte-D1cCX7ze.js";
+import { H as HookValidationLifecycle } from "./validation-D_dk-JqT-CRNNydA9.js";
+import { O as OnListener } from "./listener-DAJkOQte-CGqfZKRD.js";
 import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
 import { c as createMutationObserver } from "./mutation-observer-CX81WQtk-DFcmhOTk.js";
 import "./disposable-event-listener-CKoABG1h-D5kNsG5G.js";
@@ -491,9 +491,9 @@ const Select = class {
   }
   render() {
     var _a, _b, _c, _d;
-    return h(Host, { key: "616b4904936081cc06fea9f96ba1534ad9c72072", "aria-disabled": a11yBoolean(this.disabled), class: {
+    return h(Host, { key: "2113db5b5d04704c2bc60f2bb04c8886d9bc5f4c", "aria-disabled": a11yBoolean(this.disabled), class: {
       disabled: this.disabled
-    } }, h("ix-field-wrapper", { key: "f5db8587baff69257f674e0563c36561fb38411e", required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: "3daefd90f192731fa4b770e5da2c189c80551d3a", class: {
+    } }, h("ix-field-wrapper", { key: "d48ae99ecb04db8ffa4a22af08ccf89ce7c080be", required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: "de5fd6ec7e718893bf763d48032a8ee084cd59a3", class: {
       select: true,
       disabled: this.disabled,
       readonly: this.readonly
@@ -501,11 +501,11 @@ const Select = class {
       this.dropdownAnchorRef(ref);
       if (!this.editable)
         this.dropdownWrapperRef(ref);
-    } }, h("div", { key: "61298dac05f4be62b06e0db6fd18299fee55ce76", class: "input-container" }, h("div", { key: "21c3950b5d76a4027de13baaf9c8054f90b4cbcf", class: "chips" }, this.isMultipleMode ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
+    } }, h("div", { key: "4128e9c3bae2b348948606783b2d07d427e1e173", class: "input-container" }, h("div", { key: "b36ef6be27a9b23f11517e44551d902389fcba08", class: "chips" }, this.isMultipleMode ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
       e.preventDefault();
       e.stopPropagation();
       this.itemClick(item.value);
-    } }, item.label)) : "", h("div", { key: "31390b0957847514ace6fef5c3bfe68f9975a3c0", class: "trigger" }, h("input", { key: "cce77232cf533ff29bd394cdaaf1698ab3bcdc5e", autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
+    } }, item.label)) : "", h("div", { key: "f86b26dab24944a087f1977bc5fbc898002944d4", class: "trigger" }, h("input", { key: "c8237e81cf58258ad73a125e082513bc55da5160", autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
       "allow-clear": this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length)
     }, placeholder: this.placeholderValue(), value: (_c = this.inputValue) !== null && _c !== void 0 ? _c : "", ref: (ref) => {
       this.inputElement = ref;
@@ -519,7 +519,7 @@ const Select = class {
     }, "aria-label": this.ariaLabelClearIconButton }) : null, this.disabled || this.readonly ? null : h("ix-icon-button", { "data-select-dropdown": true, key: "dropdown", class: { "dropdown-visible": this.dropdownShow }, icon: this.dropdownShow ? iconChevronUpSmall : iconChevronDownSmall, variant: "subtle-tertiary", ref: (ref) => {
       if (this.editable)
         this.dropdownWrapperRef(ref);
-    }, "aria-label": this.ariaLabelChevronDownIconButton })))))), h("ix-dropdown", { key: "69e81d42ef04f3c65449fda9778596bde0c0c708", ref: (ref) => this.dropdownElement = ref, show: this.dropdownShow, closeBehavior: this.isMultipleMode ? "outside" : "both", class: {
+    }, "aria-label": this.ariaLabelChevronDownIconButton })))))), h("ix-dropdown", { key: "1c304ed548a2b2d30e39a53757fff6291417e680", ref: (ref) => this.dropdownElement = ref, show: this.dropdownShow, closeBehavior: this.isMultipleMode ? "outside" : "both", class: {
       "display-none": this.disabled || this.readonly
     }, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
       var _a2, _b2;
@@ -535,12 +535,12 @@ const Select = class {
         styleOverwrites.maxWidth = `min(${this.dropdownMaxWidth}, 100%)`;
       }
       return styleOverwrites;
-    } }, h("div", { key: "e3bbcfe9eaa0547b4f1818d1e96e2aba4b1ff199", class: {
+    } }, h("div", { key: "f338a319e31998b5920812726cf92bbca06c85e1", class: {
       "select-list-header": true,
       hidden: this.hideListHeader || this.isDropdownEmpty
-    }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: "d9d1060ee1fa7188a60e854d855c96cee1752355", onSlotchange: () => {
+    }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: "d873c28ecd6dbb3343d7473e8318742d36ea3626", onSlotchange: () => {
       this.updateSelection();
-    } }), h("div", { key: "80906bd69760d63dd6b45c62337d8b9fdb1b3c3a", ref: (ref) => this.customItemsContainerElement = ref }), this.isAddItemVisible() ? h("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
+    } }), h("div", { key: "91119d208ae834e7c6be27190472258db2d0aebb", ref: (ref) => this.customItemsContainerElement = ref }), this.isAddItemVisible() ? h("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
       "add-item": true
     }, label: this.inputFilterText, onItemClick: (e) => {
       e.preventDefault();

package/build/static/demo/v2/preview/html/assets/{ix-slider.entry-CylLAnwQ.js → ix-slider.entry-DbqYumJP.js}

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-CTsFSACc.js";
 import { b as a11yHostAttributes } from "./a11y-Bb7pDeaQ-DNI84lDX.js";
-import { O as OnListener } from "./listener-DAJkOQte-D1cCX7ze.js";
+import { O as OnListener } from "./listener-DAJkOQte-CGqfZKRD.js";
 import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.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)}';
 var __decorate = function(decorators, target, key, desc) {
@@ -113,12 +113,12 @@ const Slider = class {
       traceStart = valueInPercentage;
       traceEnd = traceReferenceInPercentage;
     }
-    return h(Host, { key: "8607a41b85a5cb0241432eca5b6fccd931059247", class: {
+    return h(Host, { key: "3605bc0c9a7f6a8977f6c084cad542f2a6e56551", 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: "de59055d6782bc7e6b800a372ea708ae9af5ae3b", class: "slider" }, h("div", { key: "9967cae26a51743968bbf3b800b7c99372da5982", class: "track" }, h("div", { key: "579533fde201ec8ac2b9d877354a920ff73fa5d5", ref: this.thumbRef, class: "thumb", style: {
       left: `calc(${valueInPercentage} * 100% - 8px)`
-    } }), h("div", { key: "8b39d81357e4c4c328f4cca4118a9114ee061e3b", class: "ticks" }, this.marker ? this.marker.map((markerValue) => {
+    } }), h("div", { key: "d91fbbc4ee62bfcb5a97649e847e63f3e73fdc75", class: "ticks" }, this.marker ? this.marker.map((markerValue) => {
       if (markerValue > this.max || markerValue < this.min) {
         return;
       }
@@ -129,7 +129,7 @@ const Slider = class {
       }, style: {
         "--tick-value": `${left}`
       } });
-    }) : null)), h("input", Object.assign({ key: "e3dd09329ca7f15807222948b23a5691c0e8285d", id: "slider", type: "range", list: this.marker ? "markers" : void 0, 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: "a0959a00ca04f468caafd72826e5feae53f9634e", id: "slider", type: "range", list: this.marker ? "markers" : void 0, 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}`,
@@ -141,9 +141,9 @@ const Slider = class {
       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: "d48f8097449eeef0b360806fcb205e3da210c333", 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: "890d09350360f50a2015e21c859349a27394e638", class: "label" }, h("div", { key: "2e5f010ef578e170336417fbab05e1e514332f99", class: "label-start" }, h("slot", { key: "10bf09b1dfad162c42993775a6b642e499a6c614", name: "label-start" })), h("div", { key: "6c86c3b4c53ec2efa4d6d3b477662054d464315a", class: "label-end" }, h("slot", { key: "bf44bf1acf4179ede005dd0578cc7e486d319422", name: "label-end" }))), this.error ? h("ix-typography", { class: "label-error", textColor: "alarm" }, this.error) : null);
   }
   get hostElement() {
     return getElement(this);

package/build/static/demo/v2/preview/html/assets/{ix-split-button.entry-CRpUjD5_.js → ix-split-button.entry-MPJ39EBD.js}

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
-import { x as iconContextMenu } from "./index-Cz75KU1f-BUHLjWzB.js";
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-CTsFSACc.js";
+import { I as iconContextMenu } from "./index-8HpPmDK_-DinFJk0z.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}";
 const SplitButton = class {
   constructor(hostRef) {
@@ -29,7 +29,7 @@ const SplitButton = 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" })));
+    return h(Host, { key: "ca206f224a2569e07e777216171fc335d7bc6d6e" }, h("div", { key: "20d5564fc3a571fde50e35e53bae018e80a70a7e", 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: "13c89b4dc80509ba09d2d4a59893961d79bc06ce" }, 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: "fd240af714c333bacf83077c638ff2542e516cbb", ref: (r) => this.dropdownElement = r, closeBehavior: this.closeBehavior }, h("slot", { key: "c5969f3b33deaac3687e09cc7ae0c24e50575c13" })));
   }
   get hostElement() {
     return getElement(this);

package/build/static/demo/v2/preview/html/assets/{ix-tab-item_2.entry-BgY5PPMJ.js → ix-tab-item_2.entry-BdV1i5va.js}

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
-import { w as iconChevronRightSmall, E as iconChevronLeftSmall } from "./index-Cz75KU1f-BUHLjWzB.js";
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-CTsFSACc.js";
+import { w as iconChevronRightSmall, D as iconChevronLeftSmall } from "./index-8HpPmDK_-DinFJk0z.js";
 const tabItemCss = '@charset "UTF-8";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}: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::after{content:"";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .text span,:host .text span::before{pointer-events:none}:host .text{vertical-align:middle}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .hidden{display:none}:host(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}';
 const TabItem = class {
   constructor(hostRef) {
@@ -26,7 +26,7 @@ const TabItem = class {
     };
   }
   render() {
-    return h(Host, { key: "2eaa9ee3ba9488210877fa4ed43595e1f9d9a8dd", class: this.tabItemClasses({
+    return h(Host, { key: "ca813ba38f31983dd69981c9799234540adc06b6", class: this.tabItemClasses({
       selected: this.selected,
       disabled: this.disabled,
       small: this.small,
@@ -43,12 +43,12 @@ const TabItem = class {
       if (clientEvent.defaultPrevented) {
         event.stopPropagation();
       }
-    } }, h("div", { key: "a3592b79e11a50056834d1920aa666a6989f7be9", class: {
+    } }, h("div", { key: "1324e6c9a56f71edb2207fbd1b20a0821acfbc72", class: {
       circle: this.rounded,
       text: !this.rounded,
       selected: this.selected,
       disabled: this.disabled
-    } }, h("slot", { key: "6bdd7252b0906f1d47257c6bc0fd4bff91a7eb3b" })), h("div", { key: "876c31b1ee2c454887434a99b65435d1511676e1", class: {
+    } }, h("slot", { key: "48ef3f4346ade8fddc241f0ea1cc75313cd6c1fc" })), h("div", { key: "64e1d21f14c2cddb13b49d823f5989743fb4d2fb", class: {
       counter: true,
       selected: this.selected,
       hidden: !(this.rounded && this.counter !== void 0),
@@ -271,13 +271,13 @@ const Tabs = class {
     });
   }
   render() {
-    return h(Host, { key: "4c58b26f100793ee93715ddf2d71cd85c7a77394" }, this.showArrowPrevious && h("button", { key: "88b2aa246f44f6fca988e8cc95d5c69f973b5626", class: "arrow", onClick: () => this.move(this.scrollAmount, true), "aria-label": this.ariaLabelChevronLeftIconButton }, h("ix-icon", { key: "0a6bdb7e2edafe47e7a2c3a09c860df3b8e8c73f", name: iconChevronLeftSmall })), h("div", { key: "d06c37c4aae268d43ada257185256163c54668bf", class: {
+    return h(Host, { key: "294d6c68b5a89b9ecdedc294b7d632577905c1ef" }, this.showArrowPrevious && h("button", { key: "8852a7a107bb7480f9cf872b98e1e88f935b2075", class: "arrow", onClick: () => this.move(this.scrollAmount, true), "aria-label": this.ariaLabelChevronLeftIconButton }, h("ix-icon", { key: "073d863b7a7027fca4c080ef890c29a0b152ef89", name: iconChevronLeftSmall })), h("div", { key: "dea2ca1a622324a2dd942d41e25a189cbace98ca", class: {
       "tab-items": true,
       "overflow-shadow": true,
       "shadow-left": this.showArrowPrevious,
       "shadow-right": this.showArrowNext,
       "shadow-both": this.showArrowNext && this.showArrowPrevious
-    } }, h("div", { key: "b2636001520d9d9c63173f35a45c3f38217f949f", class: "items-content" }, h("slot", { key: "d29d939ea9c1053d79b7670c7c54d9e6ec483dce" }))), this.showArrowNext && h("button", { key: "91b68bb75e979fdab0643a479300371e67a0174f", class: "arrow right", onClick: () => this.move(-this.scrollAmount, true), "aria-label": this.ariaLabelChevronRightIconButton }, h("ix-icon", { key: "735a473ee7bd00e299530b09c166b111cd8f04cd", name: iconChevronRightSmall })));
+    } }, h("div", { key: "7cfc353b8895a56f8749c6ff5f9db3e4b14f15b8", class: "items-content" }, h("slot", { key: "d1cab3f94d0fb05dc76f9136d189050fc39f1b05" }))), this.showArrowNext && h("button", { key: "6a0bf0e019f3a6ee1c48d23007a1583cc0a597eb", class: "arrow right", onClick: () => this.move(-this.scrollAmount, true), "aria-label": this.ariaLabelChevronRightIconButton }, h("ix-icon", { key: "00a8c7f9dc54d8e188dace61213297971cfdad81", name: iconChevronRightSmall })));
   }
   get hostElement() {
     return getElement(this);

package/build/static/demo/v2/preview/html/assets/{ix-textarea.entry-DzUXk1SK.js → ix-textarea.entry-Drv62qtz.js}

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
-import { H as HookValidationLifecycle } from "./validation-D_dk-JqT-hK2sg2of.js";
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-CTsFSACc.js";
+import { H as HookValidationLifecycle } from "./validation-D_dk-JqT-CRNNydA9.js";
 import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
-import { m as mapValidationResult, T as TextareaElement, o as onInputBlur } from "./input.util-VHrSuCP7-BxHyeFjg.js";
+import { m as mapValidationResult, T as TextareaElement, o as onInputBlur } from "./input.util-VHrSuCP7-Be3hd2n8.js";
 import "./anime.esm-DhE1t8Qh-B6Ygv72Z.js";
 import "./animation-C5MWUgDN-BXCJNYHu.js";
 import "./a11y-Bb7pDeaQ-DNI84lDX.js";
@@ -126,10 +126,10 @@ const Textarea = class {
   }
   render() {
     var _a;
-    return h(Host, { key: "01f3753f8d224c04fcfd170004d1591155bae8fe", class: {
+    return h(Host, { key: "886249f3b150fd8d45ef69d6e9e91ade0213aa10", 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: "178c631726c9e1db43f0d2041f3adca9d4587c78", 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: "83f426ae1fe578142232fb71e3ae40820d55954f", class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : "").length, "/", this.maxLength), h("div", { key: "17a8fe75f5f9248fc6559ecf8298e62a4d959f02", class: "input-wrapper" }, h(TextareaElement, { key: "d9e284e0357cb2608f7b4d1a1fc220dc92ccf4d8", 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/build/static/demo/v2/preview/html/assets/{ix-tile.entry-CbJIKFS-.js → ix-tile.entry-B48B2vjr.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-CTsFSACc.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}";
 const Tile = class {
   constructor(hostRef) {
@@ -14,17 +14,17 @@ const Tile = class {
     this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
   }
   render() {
-    return h(Host, { key: "aa9ab71b723ec68685a2d0a37b53d9edcfe82cd6", class: {
+    return h(Host, { key: "ac3f0fca5c25f7bb7224ef248cca4ee6e6294d85", class: {
       "tile-small": this.size === "small",
       "tile-medium": this.size === "medium",
       "tile-big": this.size === "big"
-    } }, h("div", { key: "fdbc231e60e607c9a5c60d66138f87d563d3a1d1", class: {
+    } }, h("div", { key: "c1d65c385b98420f4bdd6d742058200b14634c7b", 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: "38a70fedd15e29e0c238e94bd60f69b31dbf7d2a", name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: "25d69652c0315f0a434487d523cfbae1d93fda6b", class: "tile-subheader" }, h("slot", { key: "514cbc260eab41c4d400dcbf985a3be3290fb3cd", name: "subheader" })), h("div", { key: "7f4f75b86e8afd4d3e0aa80926d7f7190ca8fa61", class: "tile-content" }, h("slot", { key: "ae9be816cda00d9b1365403dbce6e254e8c3b808" })), h("div", { key: "cc46d36240e64c2717aa89c0e7ba7a787d225096", class: {
       "tile-footer": true,
       "has-content": this.hasFooterSlot
-    } }, h("slot", { key: "ce04db8085fda4bb5faaa170895cad9c8f850555", name: "footer", onSlotchange: () => this.handleFooterSlotChange() })));
+    } }, h("slot", { key: "740503c075e46accb41952baf68f1e1b41dea0fd", name: "footer", onSlotchange: () => this.handleFooterSlotChange() })));
   }
   get hostElement() {
     return getElement(this);

package/build/static/demo/v2/preview/html/assets/{ix-time-input.entry-DIzwZtVJ.js → ix-time-input.entry-CYN7CD46.js}

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
-import { J as iconClock } from "./index-Cz75KU1f-BUHLjWzB.js";
-import { D as DateTime } from "./datetime-bDicGJUN-EWahaxaU.js";
-import { a as addDisposableChangesAndVisibilityObservers, b as adjustPaddingForStartAndEnd, S as SlotEnd, c as SlotStart } from "./input.util-VHrSuCP7-BxHyeFjg.js";
-import { c as createClassMutationObserver, H as HookValidationLifecycle } from "./validation-D_dk-JqT-hK2sg2of.js";
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-CTsFSACc.js";
+import { J as iconClock } from "./index-8HpPmDK_-DinFJk0z.js";
+import { D as DateTime } from "./datetime-bDicGJUN-Rk09H-45.js";
+import { a as addDisposableChangesAndVisibilityObservers, b as adjustPaddingForStartAndEnd, S as SlotEnd, c as SlotStart } from "./input.util-VHrSuCP7-Be3hd2n8.js";
+import { c as createClassMutationObserver, H as HookValidationLifecycle } from "./validation-D_dk-JqT-CRNNydA9.js";
 import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
 import { h as handleIconClick, o as openDropdown, c as closeDropdown, a as createValidityState } from "./picker-input.util-D1uMJUKN-o8S09pI3.js";
 import "./anime.esm-DhE1t8Qh-B6Ygv72Z.js";
@@ -204,12 +204,12 @@ const TimeInput = class {
   render() {
     var _a;
     const invalidText = this.isInputInvalid ? this.i18nErrorTimeUnparsable : this.invalidText;
-    return h(Host, { key: "09ce97a9605c6b22a872712c038a2628e5b0b81a", class: {
+    return h(Host, { key: "fd4ac50dc1213ff02881edc38ca0afa14945c5fd", class: {
       disabled: this.disabled,
       readonly: this.readonly
-    } }, h("ix-field-wrapper", { key: "7885db329aa8632cfaeb55d427ba4d142a8b6ec6", label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, 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: "a012410651bf1de0bc1a4fa055d55d333f020ef4", label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, 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: "4f26e2c2aadfc618df359b6d7233ada82b497630", "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: "29f85b8caa71526be3f910f9ee3847533d9ff60a", 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;
     } })));

package/build/static/demo/v2/preview/html/assets/{ix-time-picker.entry-B5ZZs1cT.js → ix-time-picker.entry-Ckae4mRV.js}

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
-import { D as DateTime } from "./datetime-bDicGJUN-EWahaxaU.js";
-import { O as OnListener } from "./listener-DAJkOQte-D1cCX7ze.js";
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-CTsFSACc.js";
+import { D as DateTime } from "./datetime-bDicGJUN-Rk09H-45.js";
+import { O as OnListener } from "./listener-DAJkOQte-CGqfZKRD.js";
 const timePickerCss = '.ix-form-control,.ix-form-control-plaintext{color:var(--theme-input--color);border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);padding-inline-start:0.5rem;padding-inline-end:0.5rem;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ix-form-control::-moz-placeholder,.ix-form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}.ix-form-control::placeholder,.ix-form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.ix-form-control:focus-visible{color:var(--theme-input--color)}.ix-form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.ix-form-control[type=number]{text-align:right}.ix-form-control.readonly,.ix-form-control[readonly]{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem}.ix-form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only,.ix-form-control[readonly],.ix-form-control[readOnly],.ix-form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only::-moz-placeholder,.ix-form-control[readonly]::-moz-placeholder,.ix-form-control[readOnly]::-moz-placeholder,.ix-form-control.readonly::-moz-placeholder{color:transparent}.ix-form-control:-moz-read-only::placeholder{color:transparent}.ix-form-control:read-only::placeholder,.ix-form-control[readonly]::placeholder,.ix-form-control[readOnly]::placeholder,.ix-form-control.readonly::placeholder{color:transparent}.ix-form-control:disabled,.ix-form-control.disabled{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}.ix-form-control:disabled::-moz-placeholder,.ix-form-control.disabled::-moz-placeholder{color:transparent}.ix-form-control:disabled::placeholder,.ix-form-control.disabled::placeholder{color:transparent}.ix-form-control-plaintext{outline:0}.form-group{position:relative}.input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}.input-wrapper>.glyph{display:block;position:absolute;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}.input-wrapper>input{padding-inline-start:2.2rem}select.ix-form-control{padding:0 0.312rem}textarea.ix-form-control{padding:0.375rem 0.5rem}input.ix-form-control.disabled,input.ix-form-control:disabled{color:var(--theme-input--color--disabled)}input.ix-form-control:-moz-read-only{cursor:default}input.ix-form-control:read-only,input.ix-form-control.readonly{cursor:default}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:block;position:relative;width:-moz-fit-content;width:fit-content}: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 .standaloneAppearance{box-shadow:none}:host .hidden{display:none}:host .header{display:flex;align-items:center;justify-content:center;height:2.5rem}:host .clock{display:flex;justify-content:center;align-items:start}:host .clock .flex{display:flex;height:100%;align-items:start}:host .clock .flex .columns{display:flex;flex-direction:column;align-items:center;justify-content:space-around;margin-top:1px}:host .clock .flex .columns .column-header{height:2.5rem;width:2.5rem;line-height:2.5rem;text-align:center;color:var(--theme-color-soft-text);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .clock .flex .column-seperator{display:flex;align-items:center;margin:0 0.125rem;min-height:100%;margin-top:3.25rem}:host .clock .element-list{list-style-type:none;overflow:auto;max-height:15.375rem;padding-top:0.125rem}:host .clock .element-list button{all:unset}:host .clock .element-list .element-container{width:2.375rem;height:2.375rem;margin:0.125rem;display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--theme-color-primary)}:host .clock .element-list .element-container:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .clock .element-list .element-container:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:1px}:host .clock .element-list .selected{background-color:var(--theme-datepicker-day--background--selected);color:var(--theme-datepicker-day--color--selected)}:host .clock .element-list .selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .clock .element-list .element-list-padding{width:2.5rem;height:12.563rem;min-height:12.563rem}:host .clock div.element-list{scrollbar-width:none;-ms-overflow-style:none}:host .clock div.element-list::-webkit-scrollbar{display:none}:host .footer{display:flex;justify-content:space-between;gap:0.5rem;flex-wrap:wrap}:host .footer .confirm-button{margin-left:auto}:host .footer--compact{flex-direction:column;align-items:center}:host .footer--compact .confirm-button{margin-left:initial}:host .footer .time-ref-buttons--datetime-picker-appearance{margin-left:auto}:host .footer .time-ref-buttons button{all:unset;width:2.625rem;height:1.875rem;text-align:center;border:1px solid var(--theme-color-primary);color:var(--theme-color-primary);background-color:var(--theme-color-secondary);font-weight:700}:host .footer .time-ref-buttons button:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .footer .time-ref-buttons button:hover{cursor:pointer;background-color:var(--theme-color-secondary-hover);border-color:var(--theme-btn-primary--background--hover)}:host .footer .time-ref-buttons button.selected{color:var(--theme-color-secondary);background-color:var(--theme-btn-primary--background)}:host .footer .time-ref-buttons button.selected:hover{background-color:var(--theme-btn-primary--background--hover);border-color:var(--theme-btn-primary--background--hover)}:host .default-space{margin-left:1rem}:host .text-align{text-align:center}:host .hidden{display:none}:host .time-reference{margin-top:0.5rem;margin-bottom:0.5rem}';
 var __decorate = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -500,19 +500,19 @@ const TimePicker = class {
     return "-1";
   }
   render() {
-    return h(Host, { key: "fe021682c409d261844a66afc06f7fd821d98311" }, h("ix-date-time-card", { key: "29d86af50dfbe071b9ba542d715a0d310b5acdd8", embedded: this.embedded, timePickerAppearance: true, corners: this.corners, hasFooter: true, hideHeader: this.hideHeader }, h("div", { key: "a0189088fa1b26c1deadd04a571391eade2f4a82", class: "header", slot: "header" }, h("ix-typography", { key: "168ab5345ae2afa0b084c8acd1e6e533db5ae398", format: "h5" }, this.i18nHeader)), h("div", { key: "5fca2d1fb2059d72269e44f231faa0d0e0fc9889", class: "clock" }, this.timePickerDescriptors.map((descriptor, index) => h("div", { class: "flex" }, h("div", { class: { columns: true, hidden: descriptor.hidden } }, h("div", { class: "column-header", title: descriptor.header }, descriptor.header), h("div", { "data-element-list-id": descriptor.unit, class: "element-list", tabIndex: -1 }, descriptor.numberArray.map((number) => h("button", { "data-element-container-id": `${descriptor.unit}-${number}`, class: {
+    return h(Host, { key: "0ec1d90ec47945dd04b34c9f784600933f0c4868" }, h("ix-date-time-card", { key: "6083d0029f754623fcfa746d641fccce4661712f", embedded: this.embedded, timePickerAppearance: true, corners: this.corners, hasFooter: true, hideHeader: this.hideHeader }, h("div", { key: "8c0f42a4564d47a11433deedeab5e3b974e573ab", class: "header", slot: "header" }, h("ix-typography", { key: "aab936e24a1d0535610aa785315e68a6959c18ff", format: "h5" }, this.i18nHeader)), h("div", { key: "e1f45e55d464d1c86e23abd96d02b6592b055eb6", class: "clock" }, this.timePickerDescriptors.map((descriptor, index) => h("div", { class: "flex" }, h("div", { class: { columns: true, hidden: descriptor.hidden } }, h("div", { class: "column-header", title: descriptor.header }, descriptor.header), h("div", { "data-element-list-id": descriptor.unit, class: "element-list", tabIndex: -1 }, descriptor.numberArray.map((number) => h("button", { "data-element-container-id": `${descriptor.unit}-${number}`, class: {
       selected: this.isSelected(descriptor.unit, number),
       "element-container": true
     }, onClick: () => this.select(descriptor.unit, number), onFocus: () => this.onUnitCellFocus(descriptor.unit, number), onBlur: () => this.onUnitCellBlur(descriptor.unit), tabindex: this.getElementContainerTabIndex(number, descriptor.unit), role: "button", "aria-label": `${descriptor.header}: ${number}` }, this.formatUnitValue(descriptor.unit, number))), h("div", { class: "element-list-padding" }))), index !== this.timePickerDescriptors.length - 1 && h("div", { class: {
       "column-seperator": true,
       hidden: descriptor.hidden
-    } }, this.getColumnSeparator(index))))), h("div", { key: "94fff2af6e3e86a2bebdee7e17a3ae46503c8a03", class: {
+    } }, this.getColumnSeparator(index))))), h("div", { key: "5104db29af7c71a6159f0e371f14d9b229927273", class: {
       footer: true,
       "footer--compact": this.timePickerDescriptors.length <= 2
-    }, slot: "footer" }, this.timeRef && h("div", { key: "a9248cc2ac1c71c8886bfc177eb9c013db8a7a69", class: {
+    }, slot: "footer" }, this.timeRef && h("div", { key: "9324327df95c96cc8a9f2573d174e730fd96f68c", class: {
       "time-ref-buttons": true,
       "time-ref-buttons--datetime-picker-appearance": this.dateTimePickerAppearance
-    } }, h("button", { key: "506e0e1b8d1ebbb59f53944596e38bbde2f1c0bb", "data-am-pm-id": "AM", class: { selected: this.timeRef === "AM" }, onClick: () => this.changeTimeReference("AM") }, "AM"), h("button", { key: "b94ff617ed3e1a539ae3991fbf9e1b69dfb3f2f3", "data-am-pm-id": "PM", class: { selected: this.timeRef === "PM" }, onClick: () => this.changeTimeReference("PM") }, "PM")), !this.dateTimePickerAppearance && h("ix-button", { key: "3f49ec5488f6bc4914956fa88e793f6029f0f0e5", class: "confirm-button", onClick: () => {
+    } }, h("button", { key: "f1e1c9999252fe781cc6f1df99f352038041ae2c", "data-am-pm-id": "AM", class: { selected: this.timeRef === "AM" }, onClick: () => this.changeTimeReference("AM") }, "AM"), h("button", { key: "b301e9364639162900f76dc6d36c8677574498b9", "data-am-pm-id": "PM", class: { selected: this.timeRef === "PM" }, onClick: () => this.changeTimeReference("PM") }, "PM")), !this.dateTimePickerAppearance && h("ix-button", { key: "1386f2691dfc2ee95cea80dcb646030d076cf5b0", class: "confirm-button", onClick: () => {
       var _a;
       this.timeSelect.emit((_a = this._time) === null || _a === void 0 ? void 0 : _a.toFormat(this.format));
     } }, this.i18nConfirmTime))));

package/build/static/demo/v2/preview/html/assets/{ix-toast-container.entry-C0Ykg12Z.js → ix-toast-container.entry-BOC4VMSq.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from "./global-C8r7td8X.js";
+import { r as registerInstance, h, H as Host } from "./global-CTsFSACc.js";
 import { T as TypedEvent } from "./typed-event-BdCnOrqW-CWsLM0S_.js";
 const toastContainerCss = ":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}#toast-container>:not(:last-child){margin-block-end:1rem}.toast-container{display:block;position:fixed;z-index:var(--theme-z-index-toast)}.toast-container--top-right{right:1rem;top:2rem}.toast-container--bottom-right{right:1rem;bottom:2rem}";
 const ToastContainer = class {
@@ -89,10 +89,10 @@ const ToastContainer = class {
     };
   }
   render() {
-    return h(Host, { key: "8ac8e6eb7cfc7110a4b2b44a835b6727e32c8db6", class: {
+    return h(Host, { key: "5dcc558ac8be109aa4ec1ab0335169f968609ea8", class: {
       "toast-container--bottom-right": this.position === "bottom-right",
       "toast-container--top-right": this.position === "top-right"
-    } }, h("slot", { key: "1c158e22d6adef730c3642a6769e454b6b5e3c03" }));
+    } }, h("slot", { key: "21cb7b2bc6c08c3a807607a396a04d1417d64269" }));
   }
   static get watchers() {
     return {