@siemens/ix-docs 4.4.0 → 5.0.0

package/build/static/demo/v2/preview/html/assets/ix-checkbox-group.entry-ZvWJrxd4.js

@@ -0,0 +1,123 @@
+import { a as registerInstance, g as getElement, h, H as Host } from "./global-DjWMysHf.js";
+import { m as makeRef } from "./make-ref-Djkc69iv-BpP6uHEs.js";
+import { H as HookValidationLifecycle } from "./validation-BT5aAuSO-CbQmWD6n.js";
+import "./index-XBTykBKS-D8xrYMLu.js";
+const checkboxGroupCss = () => `:host{display:inline-block;position:relative}:host .checkbox-container{display:flex;flex-direction:column;gap:1rem;margin:0.375rem 0;flex-wrap:wrap}:host .checkbox-container.row-layout{flex-direction:row}`;
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const CheckboxGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  /**
+   * Optional helper text displayed below the checkbox group
+   */
+  helperText;
+  /**
+   * Label for the checkbox group
+   */
+  label;
+  /**
+   * Alignment of the checkboxes in the group
+   */
+  direction = "column";
+  /**
+   * Error text for the checkbox group
+   */
+  invalidText;
+  /**
+   * Info text for the checkbox group
+   */
+  infoText;
+  /**
+   * Valid text for the checkbox group
+   */
+  validText;
+  /**
+   * Warning text for the checkbox group
+   */
+  warningText;
+  /**
+   * Show helper, info, warning, error and valid text as tooltip
+   */
+  showTextAsTooltip = false;
+  /**
+   * @internal
+   */
+  required = false;
+  isInvalid = false;
+  isInfo = false;
+  isValid = false;
+  isWarning = false;
+  touched = false;
+  groupRef = makeRef();
+  get checkboxElements() {
+    return Array.from(this.hostElement.querySelectorAll("ix-checkbox"));
+  }
+  observer = new MutationObserver(() => {
+    this.checkForRequiredCheckbox();
+  });
+  checkForRequiredCheckbox() {
+    this.required = this.checkboxElements.some((checkbox) => checkbox.required);
+  }
+  connectedCallback() {
+    this.observer.observe(this.hostElement, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["checked", "required"]
+    });
+  }
+  componentWillLoad() {
+    this.checkForRequiredCheckbox();
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  onClassFieldUpdate({ isInvalid, isInvalidByRequired, isInfo, isValid, isWarning }) {
+    this.isInvalid = isInvalid || isInvalidByRequired;
+    this.isInfo = isInfo;
+    this.isValid = isValid;
+    this.isWarning = isWarning;
+  }
+  /**
+   * @internal
+   */
+  isTouched() {
+    return Promise.resolve(this.touched);
+  }
+  /**
+   * @internal
+   */
+  hasValidValue() {
+    return Promise.resolve(this.checkboxElements.some((checkbox) => checkbox.checked));
+  }
+  render() {
+    return h(Host, { key: "7ce000341dfbf0b447b05cf56eb0c0f0ce6ced71", ref: this.groupRef, onIxBlur: () => this.touched = true }, h("ix-field-wrapper", { key: "c993e1c79c87c4bf67937c1656c30959cc290f78", label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, validText: this.validText, warningText: this.warningText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isInfo: this.isInfo, isValid: this.isValid, isWarning: this.isWarning, controlRef: this.groupRef }, h("div", { key: "78a0cfe64c2f3f2de8574282f36531e4c4aa9012", class: {
+      "checkbox-container": true,
+      "row-layout": this.direction === "row"
+    } }, h("slot", { key: "1b90032207b05a058e5639e08c997269a683b504" }))));
+  }
+};
+__decorate([
+  HookValidationLifecycle({
+    includeChildren: true
+  })
+], CheckboxGroup.prototype, "onClassFieldUpdate", null);
+CheckboxGroup.style = checkboxGroupCss();
+export {
+  CheckboxGroup as ix_checkbox_group
+};

package/build/static/demo/v2/preview/html/assets/ix-checkbox.entry-DrV_oo3I.js

@@ -0,0 +1,147 @@
+import { a as registerInstance, c as createEvent, g as getElement, h, F as Fragment, H as Host } from "./global-DjWMysHf.js";
+import { a as a11yBoolean } from "./a11y-B5k8YVR0-BOSd6BQK.js";
+import { m as makeRef } from "./make-ref-Djkc69iv-BpP6uHEs.js";
+import { H as HookValidationLifecycle } from "./validation-BT5aAuSO-CbQmWD6n.js";
+import "./index-XBTykBKS-D8xrYMLu.js";
+const checkboxCss = () => `:host{--ix-checkbox-check-color:var(--theme-color-primary--contrast);display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;display:inline-flex;position:relative;align-items:center;justify-content:center;width:1.125rem;min-width:1.125rem;max-width:1.125rem;height:1.125rem;min-height:1.125rem;max-height:1.125rem;margin-right:0.5rem}:host button:disabled{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host button:focus-visible{outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:var(--theme-checkbox--focus--outline-offset)}:host input[type=checkbox]{display:none}:host label{display:flex;justify-content:flex-start;align-items:flex-start;width:100%;height:100%;cursor:pointer}:host ix-typography{margin-top:0.125rem}:host button{background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.checked) button,:host(.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.checked:hover) button,:host(.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.checked:active) button,:host(.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.checked.disabled) button,:host(.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-info) button{--theme-checkbox-unchecked--background:var(     --theme-checkbox-unchecked--background--info   );--theme-checkbox-unchecked--background--hover:var(     --theme-checkbox-unchecked--background--info--hover   );--theme-checkbox-unchecked--background--active:var(     --theme-checkbox-unchecked--background--info--active   );--theme-checkbox-unchecked--border-color:var(     --theme-checkbox-unchecked--border-color--info   );--theme-checkbox-unchecked--border-color--hover:var(     --theme-checkbox-unchecked--border-color--info--hover   );--theme-checkbox-unchecked--border-color--active:var(     --theme-checkbox-unchecked--border-color--info--active   );--theme-checkbox-checked--background:var(     --theme-checkbox-checked--background--info   );--theme-checkbox-checked--background--hover:var(     --theme-checkbox-checked--background--info--hover   );--theme-checkbox-checked--background--active:var(     --theme-checkbox-checked--background--info--active   );--theme-checkbox-checked--border-color:var(     --theme-checkbox-checked--border-color--info   );--theme-checkbox-checked--border-color--hover:var(     --theme-checkbox-checked--border-color--info--hover   );--theme-checkbox-checked--border-color--active:var(     --theme-checkbox-checked--border-color--info--active   );--theme-checkbox-mixed--background:var(     --theme-checkbox-mixed--background--info   );--theme-checkbox-mixed--background--hover:var(     --theme-checkbox-mixed--background--info--hover   );--theme-checkbox-mixed--background--active:var(     --theme-checkbox-mixed--background--info--active   );--theme-checkbox-mixed--border-color:var(     --theme-checkbox-mixed--border-color--info   );--theme-checkbox-mixed--border-color--hover:var(     --theme-checkbox-mixed--border-color--info--hover   );--theme-checkbox-mixed--border-color--active:var(     --theme-checkbox-mixed--border-color--info--active   );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-info:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-info:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-info.checked) button,:host(.ix-info.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-info.checked:hover) button,:host(.ix-info.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-info.checked:active) button,:host(.ix-info.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-info.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-info.checked.disabled) button,:host(.ix-info.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-warning) button{--theme-checkbox-unchecked--background:var(     --theme-checkbox-unchecked--background--warning   );--theme-checkbox-unchecked--background--hover:var(     --theme-checkbox-unchecked--background--warning--hover   );--theme-checkbox-unchecked--background--active:var(     --theme-checkbox-unchecked--background--warning--active   );--theme-checkbox-unchecked--border-color:var(     --theme-checkbox-unchecked--border-color--warning   );--theme-checkbox-unchecked--border-color--hover:var(     --theme-checkbox-unchecked--border-color--warning--hover   );--theme-checkbox-unchecked--border-color--active:var(     --theme-checkbox-unchecked--border-color--warning--active   );--theme-checkbox-checked--background:var(     --theme-checkbox-checked--background--warning   );--theme-checkbox-checked--background--hover:var(     --theme-checkbox-checked--background--warning--hover   );--theme-checkbox-checked--background--active:var(     --theme-checkbox-checked--background--warning--active   );--theme-checkbox-checked--border-color:var(     --theme-checkbox-checked--border-color--warning   );--theme-checkbox-checked--border-color--hover:var(     --theme-checkbox-checked--border-color--warning--hover   );--theme-checkbox-checked--border-color--active:var(     --theme-checkbox-checked--border-color--warning--active   );--theme-checkbox-mixed--background:var(     --theme-checkbox-mixed--background--warning   );--theme-checkbox-mixed--background--hover:var(     --theme-checkbox-mixed--background--warning--hover   );--theme-checkbox-mixed--background--active:var(     --theme-checkbox-mixed--background--warning--active   );--theme-checkbox-mixed--border-color:var(     --theme-checkbox-mixed--border-color--warning   );--theme-checkbox-mixed--border-color--hover:var(     --theme-checkbox-mixed--border-color--warning--hover   );--theme-checkbox-mixed--border-color--active:var(     --theme-checkbox-mixed--border-color--warning--active   );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-warning:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-warning:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-warning.checked) button,:host(.ix-warning.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-warning.checked:hover) button,:host(.ix-warning.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-warning.checked:active) button,:host(.ix-warning.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-warning.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-warning.checked.disabled) button,:host(.ix-warning.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-invalid--required) button{--theme-checkbox-unchecked--background:var(     --theme-checkbox-unchecked--background--invalid   );--theme-checkbox-unchecked--background--hover:var(     --theme-checkbox-unchecked--background--invalid--hover   );--theme-checkbox-unchecked--background--active:var(     --theme-checkbox-unchecked--background--invalid--active   );--theme-checkbox-unchecked--border-color:var(     --theme-checkbox-unchecked--border-color--invalid   );--theme-checkbox-unchecked--border-color--hover:var(     --theme-checkbox-unchecked--border-color--invalid--hover   );--theme-checkbox-unchecked--border-color--active:var(     --theme-checkbox-unchecked--border-color--invalid--active   );--theme-checkbox-checked--background:var(     --theme-checkbox-checked--background--invalid   );--theme-checkbox-checked--background--hover:var(     --theme-checkbox-checked--background--invalid--hover   );--theme-checkbox-checked--background--active:var(     --theme-checkbox-checked--background--invalid--active   );--theme-checkbox-checked--border-color:var(     --theme-checkbox-checked--border-color--invalid   );--theme-checkbox-checked--border-color--hover:var(     --theme-checkbox-checked--border-color--invalid--hover   );--theme-checkbox-checked--border-color--active:var(     --theme-checkbox-checked--border-color--invalid--active   );--theme-checkbox-mixed--background:var(     --theme-checkbox-mixed--background--invalid   );--theme-checkbox-mixed--background--hover:var(     --theme-checkbox-mixed--background--invalid--hover   );--theme-checkbox-mixed--background--active:var(     --theme-checkbox-mixed--background--invalid--active   );--theme-checkbox-mixed--border-color:var(     --theme-checkbox-mixed--border-color--invalid   );--theme-checkbox-mixed--border-color--hover:var(     --theme-checkbox-mixed--border-color--invalid--hover   );--theme-checkbox-mixed--border-color--active:var(     --theme-checkbox-mixed--border-color--invalid--active   );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-invalid--required:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-invalid--required:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-invalid--required.checked) button,:host(.ix-invalid--required.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-invalid--required.checked:hover) button,:host(.ix-invalid--required.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-invalid--required.checked:active) button,:host(.ix-invalid--required.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-invalid--required.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-invalid--required.checked.disabled) button,:host(.ix-invalid--required.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-invalid) button{--theme-checkbox-unchecked--background:var(     --theme-checkbox-unchecked--background--invalid   );--theme-checkbox-unchecked--background--hover:var(     --theme-checkbox-unchecked--background--invalid--hover   );--theme-checkbox-unchecked--background--active:var(     --theme-checkbox-unchecked--background--invalid--active   );--theme-checkbox-unchecked--border-color:var(     --theme-checkbox-unchecked--border-color--invalid   );--theme-checkbox-unchecked--border-color--hover:var(     --theme-checkbox-unchecked--border-color--invalid--hover   );--theme-checkbox-unchecked--border-color--active:var(     --theme-checkbox-unchecked--border-color--invalid--active   );--theme-checkbox-checked--background:var(     --theme-checkbox-checked--background--invalid   );--theme-checkbox-checked--background--hover:var(     --theme-checkbox-checked--background--invalid--hover   );--theme-checkbox-checked--background--active:var(     --theme-checkbox-checked--background--invalid--active   );--theme-checkbox-checked--border-color:var(     --theme-checkbox-checked--border-color--invalid   );--theme-checkbox-checked--border-color--hover:var(     --theme-checkbox-checked--border-color--invalid--hover   );--theme-checkbox-checked--border-color--active:var(     --theme-checkbox-checked--border-color--invalid--active   );--theme-checkbox-mixed--background:var(     --theme-checkbox-mixed--background--invalid   );--theme-checkbox-mixed--background--hover:var(     --theme-checkbox-mixed--background--invalid--hover   );--theme-checkbox-mixed--background--active:var(     --theme-checkbox-mixed--background--invalid--active   );--theme-checkbox-mixed--border-color:var(     --theme-checkbox-mixed--border-color--invalid   );--theme-checkbox-mixed--border-color--hover:var(     --theme-checkbox-mixed--border-color--invalid--hover   );--theme-checkbox-mixed--border-color--active:var(     --theme-checkbox-mixed--border-color--invalid--active   );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-invalid:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-invalid:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-invalid.checked) button,:host(.ix-invalid.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-invalid.checked:hover) button,:host(.ix-invalid.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-invalid.checked:active) button,:host(.ix-invalid.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-invalid.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-invalid.checked.disabled) button,:host(.ix-invalid.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.disabled){pointer-events:none}:host(.disabled) button,:host(.disabled) label,:host(.disabled) input{pointer-events:none}`;
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const Checkbox = 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;
+    }
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  formInternals;
+  /**
+   * Name of the checkbox component
+   */
+  name;
+  /**
+   * Value of the checkbox component
+   */
+  value = "on";
+  /**
+   * Label for the checkbox component
+   */
+  label;
+  /**
+   * Checked state of the checkbox component
+   */
+  checked = false;
+  /**
+   * Disabled state of the checkbox component
+   */
+  disabled = false;
+  /**
+   * Indeterminate state of the checkbox component
+   */
+  indeterminate = false;
+  /**
+   * Required state of the checkbox component.
+   *
+   * If true, checkbox needs to be checked to be valid
+   */
+  required = false;
+  /**
+   * Event emitted when the checked state of the checkbox changes
+   */
+  checkedChange;
+  /**
+   * Event emitted when the value of the checkbox changes
+   */
+  valueChange;
+  /**
+   * Event emitted when the checkbox is blurred
+   */
+  ixBlur;
+  touched = false;
+  inputRef = makeRef((checkboxRef) => {
+    checkboxRef.checked = this.checked;
+  });
+  setCheckedState(newChecked) {
+    this.checked = newChecked;
+    this.checkedChange.emit(this.checked);
+  }
+  onCheckedChange() {
+    this.touched = true;
+    this.updateFormInternalValue();
+  }
+  onValueChange() {
+    this.valueChange.emit(this.value);
+  }
+  componentWillLoad() {
+    this.updateFormInternalValue();
+  }
+  updateFormInternalValue() {
+    if (this.checked) {
+      this.formInternals.setFormValue(this.value ?? "on");
+    } else {
+      this.formInternals.setFormValue(null);
+    }
+  }
+  /** @internal */
+  hasValidValue() {
+    return Promise.resolve(this.checked);
+  }
+  /** @internal */
+  getAssociatedFormElement() {
+    return Promise.resolve(this.formInternals.form);
+  }
+  /** @internal */
+  isTouched() {
+    return Promise.resolve(this.touched);
+  }
+  updateClassMappings() {
+  }
+  renderCheckmark() {
+    return h("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, this.indeterminate && h(Fragment, null, h("rect", { width: "18", height: "18", fill: "transparent" }), h("rect", { x: "3", y: "8", width: "12", height: "2", fill: "var(--ix-checkbox-check-color)" })), this.checked && h("path", { d: "M3.65625 8.15625L8.4375 12.9375L14.625 3.9375", stroke: "var(--ix-checkbox-check-color)", "stroke-width": "2" }));
+  }
+  render() {
+    return h(Host, { key: "7cf9106ea2b83fcc4913a4552cf91c09f0a0ec16", "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "checkbox", class: {
+      disabled: this.disabled,
+      checked: this.checked,
+      indeterminate: this.indeterminate
+    }, onFocus: () => this.touched = true, onBlur: () => this.ixBlur.emit() }, h("label", { key: "ea4e86f56eb29791d77991e31a95bc0e8958b943" }, h("input", { key: "59446931420ba7c117d6b8bc392cdcd5c99723ae", "aria-checked": a11yBoolean(this.checked), required: this.required, disabled: this.disabled, checked: this.checked, ref: this.inputRef, type: "checkbox", onChange: () => this.setCheckedState(!this.checked) }), h("button", { key: "842691bcb514facd3f0588b8d49e069ac6655866", disabled: this.disabled, class: {
+      checked: this.checked
+    }, onClick: () => this.setCheckedState(!this.checked) }, this.renderCheckmark()), h("ix-typography", { key: "92c580ec9a1ffdb83b0d7dc5d0d8a5addfad7432", format: "label", textColor: this.disabled ? "weak" : "std" }, this.label, h("slot", { key: "ae78de9041287d4ea3ad3820be9ba6f4fc062b2e" }))));
+  }
+  static get formAssociated() {
+    return true;
+  }
+  static get watchers() {
+    return {
+      "checked": [{
+        "onCheckedChange": 0
+      }],
+      "value": [{
+        "onValueChange": 0
+      }]
+    };
+  }
+};
+__decorate([
+  HookValidationLifecycle()
+], Checkbox.prototype, "updateClassMappings", null);
+Checkbox.style = checkboxCss();
+export {
+  Checkbox as ix_checkbox
+};

package/build/static/demo/v2/preview/html/assets/ix-chip.entry-D3BgILpE.js

@@ -0,0 +1,327 @@
+import { M as Mixin, a as registerInstance, c as createEvent, g as getElement, h, H as Host } from "./global-DjWMysHf.js";
+import { s as iconCloseSmall } from "./index-Cl7fhG1I-C77BCFLW.js";
+import { a as a11yBoolean } from "./a11y-B5k8YVR0-BOSd6BQK.js";
+import { D as DefaultMixins } from "./component-Chfbghog-DFMCI9TH.js";
+import { I as InheritAriaAttributesMixin } from "./inherit-aria-attributes.mixin-CBuZQFB--BMwxaZnz.js";
+import { m as makeRef } from "./make-ref-Djkc69iv-BpP6uHEs.js";
+import "./focus-utilities-DnaItyVQ-Degzwldb.js";
+import "./shadow-dom-BIe8Nw9M-DxOF84uP.js";
+const CHIP_VARIANTS = [
+  "primary",
+  "alarm",
+  "critical",
+  "warning",
+  "info",
+  "neutral",
+  "success",
+  "custom"
+];
+const chipCss = () => `:host{display:inline-block;position:relative;height:2rem;max-height:2rem}: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(.inactive){pointer-events:none}.chip-wrap{display:inline-flex;width:inherit;max-width:100%;box-sizing:border-box;position:relative;align-items:stretch;border-radius:100px;vertical-align:top;min-height:2rem;max-height:2rem}.chip-wrap .chip-main{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;margin:0;box-sizing:border-box;display:inline-flex;align-items:center;flex:1 1 auto;min-width:0;width:100%;border-radius:inherit;padding-block:0.5rem;padding-inline:0.75rem;font:inherit;text-align:inherit;color:inherit;cursor:pointer;background:transparent}.chip-wrap .chip-main:disabled{cursor:default}.chip-wrap .chip-main:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.chip-wrap .chip-main .content-wrapper{display:inline-flex;align-items:center;flex:1;min-width:0}.chip-wrap .chip-main .with-icon{margin-right:0.25rem}.chip-wrap .chip-main .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip-wrap.centerContent .chip-main .content-wrapper{justify-content:center;text-align:center}.chip-wrap.outline .chip-main{padding-left:calc(0.75rem - 0.0625rem)}.chip-wrap.outline:not(.closable) .chip-main,.chip-wrap.outline.closable.inactive .chip-main{padding-right:calc(0.75rem - 0.0625rem)}.chip-wrap.outline.closable:not(.inactive) .chip-main{padding-right:calc(0.25rem + 1.5rem + 0.375rem - 0.0625rem)}.chip-wrap:not(.outline) .chip-main{padding-left:0.75rem}.chip-wrap:not(.outline):not(.closable) .chip-main,.chip-wrap:not(.outline).closable.inactive .chip-main{padding-right:0.75rem}.chip-wrap:not(.outline).closable:not(.inactive) .chip-main{padding-right:calc(0.25rem + 1.5rem + 0.375rem)}.chip-wrap .chip-close{position:absolute;right:0.25rem;top:50%;transform:translateY(-50%);width:1.5rem;height:1.5rem;box-sizing:border-box;border:0;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;color:var(--theme-color-std-text);border-radius:50%;flex-shrink:0;z-index:1}.chip-wrap .chip-close:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.chip-wrap .chip-close__icon{display:block;pointer-events:none}.chip-wrap.outline{border-width:0.0625rem;border-style:solid}.chip-wrap.primary:not(.outline){color:var(--theme-chip-primary--color)}.chip-wrap.primary:not(.outline) .chip-main{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.chip-wrap.primary:not(.outline) .chip-main:hover{background-color:var(--theme-chip-primary--background--hover)}.chip-wrap.primary:not(.outline) .chip-main:active{background-color:var(--theme-chip-primary--background--active)}.chip-wrap.primary:not(.outline) .chip-close{color:inherit;background-color:var(--theme-chip-close-btn--background)}.chip-wrap.primary:not(.outline) .chip-close:hover{background-color:var(--theme-chip-primary--background--hover)}.chip-wrap.primary:not(.outline) .chip-close:active{background-color:var(--theme-chip-primary--background--active)}.chip-wrap.primary.outline{color:var(--theme-chip-primary-outline--color--display);background-color:var(--theme-chip-primary-outline--background);border:solid 0.0625rem var(--theme-chip-primary-outline--border-color)}.chip-wrap.primary.outline:hover:not(.inactive){border-color:var(--theme-chip-primary-outline--border-color--hover)}.chip-wrap.primary.outline:active:not(.inactive){border-color:var(--theme-chip-primary-outline--border-color--active)}.chip-wrap.primary.outline .chip-main{background-color:transparent;color:var(--theme-chip-primary-outline--color--display)}.chip-wrap.primary.outline .chip-main:hover{background-color:var(--theme-chip-primary-outline--background--hover)}.chip-wrap.primary.outline .chip-main:active{background-color:var(--theme-chip-primary-outline--background--active)}.chip-wrap.primary.outline.icon .with-icon{color:var(--theme-color-primary)}.chip-wrap.primary.outline:hover:not(.inactive).icon .with-icon{color:var(--theme-chip-primary-outline--color--hover)}.chip-wrap.primary.outline:active:not(.inactive).icon .with-icon{color:var(--theme-chip-primary-outline--color--active)}.chip-wrap.primary.outline .chip-close{color:inherit}.chip-wrap.primary.outline .chip-close:hover{background-color:var(--theme-chip-primary-outline--background--hover)}.chip-wrap.primary.outline .chip-close:active{background-color:var(--theme-chip-primary-outline--background--active)}.chip-wrap.alarm:not(.outline){color:var(--theme-color-alarm--contrast)}.chip-wrap.alarm:not(.outline) .chip-main{background-color:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}.chip-wrap.alarm:not(.outline) .chip-main:hover{background-color:var(--theme-color-alarm--hover)}.chip-wrap.alarm:not(.outline) .chip-main:active{background-color:var(--theme-color-alarm--active)}.chip-wrap.alarm:not(.outline) .chip-close{color:inherit;background-color:var(--theme-chip-close-btn--background)}.chip-wrap.alarm:not(.outline) .chip-close:hover{background-color:var(--theme-color-alarm--hover)}.chip-wrap.alarm:not(.outline) .chip-close:active{background-color:var(--theme-color-alarm--active)}.chip-wrap.alarm.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-alarm)}.chip-wrap.alarm.outline .chip-main{background-color:transparent;color:var(--theme-chip-outline--color)}.chip-wrap.alarm.outline .chip-main:hover{background-color:var(--theme-chip-outline--background--hover)}.chip-wrap.alarm.outline .chip-main:active{background-color:var(--theme-chip-outline--background--active)}.chip-wrap.alarm.outline.icon .with-icon{color:var(--theme-color-alarm)}.chip-wrap.alarm.outline .chip-close{color:inherit}.chip-wrap.alarm.outline .chip-close:hover{background-color:var(--theme-chip-outline--background--hover)}.chip-wrap.alarm.outline .chip-close:active{background-color:var(--theme-chip-outline--background--active)}.chip-wrap.critical:not(.outline){color:var(--theme-color-critical--contrast)}.chip-wrap.critical:not(.outline) .chip-main{background-color:var(--theme-color-critical);color:var(--theme-color-critical--contrast)}.chip-wrap.critical:not(.outline) .chip-main:hover{background-color:var(--theme-color-critical--hover)}.chip-wrap.critical:not(.outline) .chip-main:active{background-color:var(--theme-color-critical--active)}.chip-wrap.critical:not(.outline) .chip-close{color:inherit;background-color:var(--theme-chip-close-btn--background)}.chip-wrap.critical:not(.outline) .chip-close:hover{background-color:var(--theme-color-critical--hover)}.chip-wrap.critical:not(.outline) .chip-close:active{background-color:var(--theme-color-critical--active)}.chip-wrap.critical.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-critical)}.chip-wrap.critical.outline .chip-main{background-color:transparent;color:var(--theme-chip-outline--color)}.chip-wrap.critical.outline .chip-main:hover{background-color:var(--theme-chip-outline--background--hover)}.chip-wrap.critical.outline .chip-main:active{background-color:var(--theme-chip-outline--background--active)}.chip-wrap.critical.outline.icon .with-icon{color:var(--theme-color-critical)}.chip-wrap.critical.outline .chip-close{color:inherit}.chip-wrap.critical.outline .chip-close:hover{background-color:var(--theme-chip-outline--background--hover)}.chip-wrap.critical.outline .chip-close:active{background-color:var(--theme-chip-outline--background--active)}.chip-wrap.warning:not(.outline){color:var(--theme-color-warning--contrast)}.chip-wrap.warning:not(.outline) .chip-main{background-color:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}.chip-wrap.warning:not(.outline) .chip-main:hover{background-color:var(--theme-color-warning--hover)}.chip-wrap.warning:not(.outline) .chip-main:active{background-color:var(--theme-color-warning--active)}.chip-wrap.warning:not(.outline) .chip-close{color:inherit;background-color:var(--theme-chip-close-btn--background)}.chip-wrap.warning:not(.outline) .chip-close:hover{background-color:var(--theme-color-warning--hover)}.chip-wrap.warning:not(.outline) .chip-close:active{background-color:var(--theme-color-warning--active)}.chip-wrap.warning.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-warning)}.chip-wrap.warning.outline .chip-main{background-color:transparent;color:var(--theme-chip-outline--color)}.chip-wrap.warning.outline .chip-main:hover{background-color:var(--theme-chip-outline--background--hover)}.chip-wrap.warning.outline .chip-main:active{background-color:var(--theme-chip-outline--background--active)}.chip-wrap.warning.outline.icon .with-icon{color:var(--theme-color-warning-text)}.chip-wrap.warning.outline .chip-close{color:inherit}.chip-wrap.warning.outline .chip-close:hover{background-color:var(--theme-chip-outline--background--hover)}.chip-wrap.warning.outline .chip-close:active{background-color:var(--theme-chip-outline--background--active)}.chip-wrap.info:not(.outline){color:var(--theme-color-info--contrast)}.chip-wrap.info:not(.outline) .chip-main{background-color:var(--theme-color-info);color:var(--theme-color-info--contrast)}.chip-wrap.info:not(.outline) .chip-main:hover{background-color:var(--theme-color-info--hover)}.chip-wrap.info:not(.outline) .chip-main:active{background-color:var(--theme-color-info--active)}.chip-wrap.info:not(.outline) .chip-close{color:inherit;background-color:var(--theme-chip-close-btn--background)}.chip-wrap.info:not(.outline) .chip-close:hover{background-color:var(--theme-color-info--hover)}.chip-wrap.info:not(.outline) .chip-close:active{background-color:var(--theme-color-info--active)}.chip-wrap.info.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-info)}.chip-wrap.info.outline .chip-main{background-color:transparent;color:var(--theme-chip-outline--color)}.chip-wrap.info.outline .chip-main:hover{background-color:var(--theme-chip-outline--background--hover)}.chip-wrap.info.outline .chip-main:active{background-color:var(--theme-chip-outline--background--active)}.chip-wrap.info.outline.icon .with-icon{color:var(--theme-color-info)}.chip-wrap.info.outline .chip-close{color:inherit}.chip-wrap.info.outline .chip-close:hover{background-color:var(--theme-chip-outline--background--hover)}.chip-wrap.info.outline .chip-close:active{background-color:var(--theme-chip-outline--background--active)}.chip-wrap.neutral:not(.outline){color:var(--theme-color-neutral--contrast)}.chip-wrap.neutral:not(.outline) .chip-main{background-color:var(--theme-color-neutral);color:var(--theme-color-neutral--contrast)}.chip-wrap.neutral:not(.outline) .chip-main:hover{background-color:var(--theme-color-neutral--hover)}.chip-wrap.neutral:not(.outline) .chip-main:active{background-color:var(--theme-color-neutral--active)}.chip-wrap.neutral:not(.outline) .chip-close{color:inherit;background-color:var(--theme-chip-close-btn--background)}.chip-wrap.neutral:not(.outline) .chip-close:hover{background-color:var(--theme-color-neutral--hover)}.chip-wrap.neutral:not(.outline) .chip-close:active{background-color:var(--theme-color-neutral--active)}.chip-wrap.neutral.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-neutral)}.chip-wrap.neutral.outline .chip-main{background-color:transparent;color:var(--theme-chip-outline--color)}.chip-wrap.neutral.outline .chip-main:hover{background-color:var(--theme-chip-outline--background--hover)}.chip-wrap.neutral.outline .chip-main:active{background-color:var(--theme-chip-outline--background--active)}.chip-wrap.neutral.outline.icon .with-icon{color:var(--theme-color-neutral)}.chip-wrap.neutral.outline .chip-close{color:inherit}.chip-wrap.neutral.outline .chip-close:hover{background-color:var(--theme-chip-outline--background--hover)}.chip-wrap.neutral.outline .chip-close:active{background-color:var(--theme-chip-outline--background--active)}.chip-wrap.success:not(.outline){color:var(--theme-color-success--contrast)}.chip-wrap.success:not(.outline) .chip-main{background-color:var(--theme-color-success);color:var(--theme-color-success--contrast)}.chip-wrap.success:not(.outline) .chip-main:hover{background-color:var(--theme-color-success--hover)}.chip-wrap.success:not(.outline) .chip-main:active{background-color:var(--theme-color-success--active)}.chip-wrap.success:not(.outline) .chip-close{color:inherit;background-color:var(--theme-chip-close-btn--background)}.chip-wrap.success:not(.outline) .chip-close:hover{background-color:var(--theme-color-success--hover)}.chip-wrap.success:not(.outline) .chip-close:active{background-color:var(--theme-color-success--active)}.chip-wrap.success.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-success)}.chip-wrap.success.outline .chip-main{background-color:transparent;color:var(--theme-chip-outline--color)}.chip-wrap.success.outline .chip-main:hover{background-color:var(--theme-chip-outline--background--hover)}.chip-wrap.success.outline .chip-main:active{background-color:var(--theme-chip-outline--background--active)}.chip-wrap.success.outline.icon .with-icon{color:var(--theme-color-success)}.chip-wrap.success.outline .chip-close{color:inherit}.chip-wrap.success.outline .chip-close:hover{background-color:var(--theme-chip-outline--background--hover)}.chip-wrap.success.outline .chip-close:active{background-color:var(--theme-chip-outline--background--active)}.chip-wrap.outline .chip-close{background-color:var(--theme-chip-close-btn--background)}.chip-wrap.outline .chip-close:hover{background-color:var(--theme-chip-close-btn--background--hover)}.chip-wrap.outline .chip-close:active{background-color:var(--theme-chip-close-btn--background--active)}.chip-wrap.custom.outline{background-color:var(--theme-chip-outline--background)}.chip-wrap.custom.outline .chip-main{background-color:transparent}.chip-wrap.custom.outline .chip-main:hover{background-color:var(--theme-chip-outline--background--hover)}.chip-wrap.custom.outline .chip-main:active{background-color:var(--theme-chip-outline--background--active)}.chip-wrap.custom.outline .chip-close{color:inherit}.chip-wrap.custom.outline .chip-close:hover{background-color:var(--theme-chip-outline--background--hover)}.chip-wrap.custom.outline .chip-close:active{background-color:var(--theme-chip-outline--background--active)}.chip-wrap.custom:not(.outline) .chip-main{position:relative}.chip-wrap.custom:not(.outline) .chip-main:hover::after,.chip-wrap.custom:not(.outline) .chip-main:active::after{content:"";display:block;position:absolute;inset:0;border-radius:100px;pointer-events:none}.chip-wrap.custom:not(.outline) .chip-main:hover::after{background-color:color-mix(in srgb, currentColor 10%, transparent)}.chip-wrap.custom:not(.outline) .chip-main:active::after{background-color:color-mix(in srgb, currentColor 20%, transparent)}.chip-wrap.custom:not(.outline) .chip-close{color:inherit;background-color:var(--theme-chip-close-btn--background)}.chip-wrap.custom:not(.outline) .chip-close:hover{background-color:color-mix(in srgb, currentColor 10%, transparent)}.chip-wrap.custom:not(.outline) .chip-close:active{background-color:color-mix(in srgb, currentColor 20%, transparent)}`;
+const Chip = class extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
+  constructor(hostRef) {
+    super();
+    registerInstance(this, hostRef);
+    this.closeChip = createEvent(this, "closeChip", 7);
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  /**
+   * Chip variant.
+   * Defaults to `primary`. When unset or set to an unknown value the chip falls back to `primary` styling.
+   */
+  variant = "primary";
+  /**
+   * Determines if the chip is interactive. If true no user input (e.g. mouse states, keyboard navigation)
+   * will be possible and also the close button will not be present.
+   */
+  inactive = false;
+  /**
+   * Show close icon
+   */
+  closable = false;
+  /**
+   * Show icon
+   */
+  icon;
+  /**
+   * Accessible name for the leading icon.
+   * When unset, the icon is treated as decorative (hidden from assistive tech) when the default slot supplies a visible label.
+   *
+   * @since 5.0.0
+   */
+  ariaLabelIcon;
+  /**
+   * Custom background color.
+   * Only has an effect on chips with `variant='custom'`
+   */
+  background;
+  /**
+   * Custom font and icon color.
+   * Only has an effect on chips with `variant='custom'`
+   */
+  chipColor;
+  /**
+   * Show chip with outline style
+   */
+  outline = false;
+  /**
+   * Display a tooltip. By default, no tooltip will be displayed.
+   * Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.
+   *
+   * @since 3.0.0
+   */
+  tooltipText = false;
+  /**
+   * Center the content of the chip.
+   * Set to false to disable centering.
+   * @since 3.2.0
+   */
+  centerContent = false;
+  /**
+   * ARIA label for the close button
+   * Will be set as aria-label on the nested HTML button element
+   */
+  ariaLabelCloseButton = "Close chip";
+  /**
+   * Fire event if close button is clicked
+   */
+  closeChip;
+  containerElementRef = makeRef();
+  getIgnoredAriaAttributes() {
+    return ["role"];
+  }
+  componentWillLoad() {
+    super.componentWillLoad();
+  }
+  getTooltip() {
+    if (!this.tooltipText && !this.hostElement.hasAttribute("tooltip-text")) {
+      return null;
+    }
+    const text = typeof this.tooltipText === "string" && this.tooltipText.trim() ? this.tooltipText : this.hostElement.textContent?.trim();
+    return h("ix-tooltip", { for: this.containerElementRef.waitForCurrent(), "aria-label": text || void 0 }, text);
+  }
+  getCustomStyles(variant) {
+    const wrap = {};
+    const main = {};
+    if (variant !== "custom") {
+      return { wrap, main };
+    }
+    main.color = this.chipColor;
+    if (this.chipColor) {
+      wrap.color = this.chipColor;
+    }
+    if (this.outline && this.background) {
+      wrap.borderColor = this.background;
+    } else if (!this.outline && this.background) {
+      main.backgroundColor = this.background;
+    }
+    return { wrap, main };
+  }
+  getIconStyle(variant) {
+    if (variant !== "custom") {
+      return void 0;
+    }
+    return { color: this.outline ? this.background : this.chipColor };
+  }
+  getHostRole(needsGroupRole) {
+    if (this.hostElement.hasAttribute("role")) {
+      return this.hostElement.getAttribute("role") ?? void 0;
+    }
+    return needsGroupRole ? "group" : void 0;
+  }
+  render() {
+    const variant = CHIP_VARIANTS.includes(this.variant) ? this.variant : "primary";
+    const { wrap: customWrapStyle, main: customMainStyle } = this.getCustomStyles(variant);
+    const showClose = !this.inactive && this.closable;
+    const wrapClasses = {
+      "chip-wrap": true,
+      outline: this.outline,
+      inactive: this.inactive,
+      alarm: variant === "alarm",
+      critical: variant === "critical",
+      info: variant === "info",
+      neutral: variant === "neutral",
+      primary: variant === "primary",
+      success: variant === "success",
+      warning: variant === "warning",
+      custom: variant === "custom",
+      closable: this.closable,
+      icon: !!this.icon,
+      centerContent: this.centerContent
+    };
+    const iconIsDecorative = !this.ariaLabelIcon?.trim();
+    const hasAccessibleName = !!this.inheritAriaAttributes["aria-label"]?.trim() || !!this.inheritAriaAttributes["aria-labelledby"]?.trim();
+    const hasTooltip = !!this.tooltipText || this.hostElement.hasAttribute("tooltip-text");
+    const needsGroupRole = hasAccessibleName && (showClose || hasTooltip);
+    return h(Host, { key: "ce26e0d24d71d552acdd962c5b277319a9ad8440", role: this.getHostRole(needsGroupRole), class: {
+      inactive: this.inactive
+    } }, h("div", { key: "e0d71bc62636c5d592260b8b0db1ecae4692f451", ref: this.containerElementRef, class: wrapClasses, style: customWrapStyle }, h("button", { key: "e04d0c14e50d73655c0caf406373e3d678abfa69", type: "button", class: "chip-main", ...this.inheritAriaAttributes, disabled: this.inactive, style: customMainStyle }, h("div", { key: "73704c677c0d29106d9a17ed72713d35a73fca33", class: "content-wrapper" }, this.icon && h("ix-icon", { key: "1758dc64e728902d6c2fbf82913a66afb3a103e5", class: {
+      "with-icon": true
+    }, name: this.icon, size: "24", "aria-label": this.ariaLabelIcon, "aria-hidden": a11yBoolean(iconIsDecorative), style: this.getIconStyle(variant) }), h("span", { key: "fa4ad21840fab8b2d3a041c08a269f0311c20392", class: "slot-container" }, h("slot", { key: "c68dfc344ea985bc18dc29f4c3face2bd0238fc7" })))), showClose && h("button", { key: "3f084d56ec7b791aa89418dfe00efe66e4c673aa", type: "button", class: "chip-close", "aria-label": this.ariaLabelCloseButton, onClick: (event) => {
+      this.closeChip.emit(event);
+      event.stopPropagation();
+    } }, h("ix-icon", { key: "f5a87d2fbc9bfb907b746219e65ec8d4e75f645c", class: "chip-close__icon", name: iconCloseSmall, size: "16", "aria-hidden": "true" }))), this.getTooltip());
+  }
+  static get watchers() {
+    return {
+      "role": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-activedescendant": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-atomic": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-autocomplete": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-braillelabel": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-brailleroledescription": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-busy": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-checked": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-colcount": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-colindex": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-colindextext": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-colspan": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-controls": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-current": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-describedby": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-description": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-details": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-disabled": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-errormessage": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-expanded": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-flowto": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-haspopup": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-hidden": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-invalid": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-keyshortcuts": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-label": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-labelledby": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-level": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-live": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-multiline": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-multiselectable": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-orientation": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-owns": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-placeholder": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-posinset": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-pressed": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-readonly": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-relevant": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-required": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-roledescription": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-rowcount": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-rowindex": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-rowindextext": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-rowspan": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-selected": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-setsize": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-sort": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-valuemax": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-valuemin": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-valuenow": [{
+        "ariaAttributeChanged": 0
+      }],
+      "aria-valuetext": [{
+        "ariaAttributeChanged": 0
+      }]
+    };
+  }
+};
+Chip.style = chipCss();
+export {
+  Chip as ix_chip
+};