@six-group/ui-library 0.0.0-insider.9277796 → 0.0.0-insider.a358260

package/dist/esm/six-checkbox.entry.js

@@ -21,11 +21,31 @@ const SixCheckbox = class {
     this.eventListeners = new EventListeners();
     /** default state whether the radio button should be checked or not when resetting */
     this.defaultState = false;
+    this.handleChange = () => {
+      if (this.nativeInput != null) {
+        this.checked = this.nativeInput.checked;
+        this.indeterminate = false;
+      }
+    };
+    this.handleBlur = () => {
+      this.hasFocus = false;
+      this.sixBlur.emit();
+    };
+    this.handleFocus = () => {
+      this.hasFocus = true;
+      this.sixFocus.emit();
+    };
+    this.handleMouseDown = (event) => {
+      var _a;
+      // Prevent clicks on the label from briefly blurring the input
+      event.preventDefault();
+      (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
+    };
     this.hasFocus = false;
     this.hasLabelSlot = false;
     this.hasErrorTextSlot = false;
-    this.name = undefined;
-    this.value = undefined;
+    this.name = '';
+    this.value = 'on';
     this.disabled = false;
     this.required = false;
     this.label = '';
@@ -36,27 +56,24 @@ const SixCheckbox = class {
     this.errorOnBlur = false;
   }
   handleCheckedChange() {
-    if (!this.input) {
+    if (this.nativeInput == null) {
       return;
     }
-    this.input.checked = this.checked;
-    this.input.indeterminate = this.indeterminate;
-    this.invalid = !this.input.checkValidity();
+    this.nativeInput.checked = this.checked;
+    this.nativeInput.indeterminate = this.indeterminate;
+    this.invalid = !this.nativeInput.checkValidity();
     this.sixChange.emit();
   }
   handleLabelChange() {
     this.handleSlotChange();
   }
   connectedCallback() {
-    this.handleChange = this.handleChange.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-    this.handleInvalid = this.handleInvalid.bind(this);
-    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+    var _a;
+    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
   }
   disconnectedCallback() {
-    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    var _a;
+    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     this.eventListeners.removeAll();
   }
   componentWillLoad() {
@@ -64,65 +81,59 @@ const SixCheckbox = class {
     this.handleSlotChange();
   }
   componentDidLoad() {
-    this.input.indeterminate = this.indeterminate;
-    this.eventListeners.add(this.input, 'invalid', (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {
-        this.customErrorText = this.input.validationMessage;
+    const nativeInput = this.nativeInput;
+    if (nativeInput == null) {
+      return;
+    }
+    nativeInput.indeterminate = this.indeterminate;
+    this.eventListeners.add(nativeInput, 'invalid', (event) => {
+      this.invalid = true;
+      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {
+        this.customErrorText = nativeInput.validationMessage;
       }
       event.preventDefault();
     });
   }
   /** Sets focus on the checkbox. */
   async setFocus(options) {
-    this.input.focus(options);
+    var _a;
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus(options);
   }
   /** Removes focus from the checkbox. */
   async removeFocus() {
-    this.input.blur();
+    var _a;
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
   }
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   async reportValidity() {
-    return this.input.reportValidity();
+    var _a;
+    return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.reportValidity();
   }
   /** Checks for validity. */
   async checkValidity() {
-    return this.input.validity.valid;
+    if (this.nativeInput == null) {
+      return true;
+    }
+    return this.nativeInput.validity.valid;
   }
   /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
   async setCustomValidity(message) {
     this.customErrorText = '';
     this.customValidation = message !== '';
-    this.input.setCustomValidity(message);
-    this.invalid = !this.input.checkValidity();
+    if (this.nativeInput != null) {
+      this.nativeInput.setCustomValidity(message);
+      this.invalid = !this.nativeInput.checkValidity();
+    }
   }
   /** Resets the formcontrol */
   async reset() {
+    var _a;
     this.checked = this.defaultState;
     this.customErrorText = '';
     this.customValidation = false;
-    this.input.setCustomValidity('');
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
     this.invalid = false;
   }
-  handleChange() {
-    this.checked = this.input.checked;
-    this.indeterminate = false;
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.sixBlur.emit();
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.sixFocus.emit();
-  }
-  handleMouseDown(event) {
-    // Prevent clicks on the label from briefly blurring the input
-    event.preventDefault();
-    this.input.focus();
-  }
-  handleInvalid() {
-    this.invalid = true;
-  }
   handleSlotChange() {
     this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
     this.hasLabelSlot = hasSlot(this.host, 'label');
@@ -131,14 +142,14 @@ const SixCheckbox = class {
     return this.invalid && (!this.errorOnBlur || !this.hasFocus);
   }
   render() {
-    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, errorText: this.customErrorText ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("label", { part: "base", class: {
+    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, errorText: this.customErrorText != null ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("label", { part: "base", class: {
         checkbox: true,
         'checkbox--checked': this.checked,
         'checkbox--disabled': this.disabled,
         'checkbox--focused': this.hasFocus,
         'checkbox--invalid': this.invalid,
         'checkbox--indeterminate': this.indeterminate,
-      }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown }, h("span", { part: "control", class: "checkbox__control" }, this.checked && (h("span", { part: "checked-icon", class: "checkbox__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { stroke: "currentColor", "stroke-width": "2" }, h("g", { transform: "translate(3.428571, 3.428571)" }, h("path", { d: "M0,5.71428571 L3.42857143,9.14285714" }), h("path", { d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (h("span", { part: "indeterminate-icon", class: "checkbox__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { stroke: "currentColor", "stroke-width": "2" }, h("g", { transform: "translate(2.285714, 6.857143)" }, h("path", { d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), h("input", { ref: (el) => (this.input = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid })), h("span", { part: "text", id: this.textId, class: "checkbox__text" }, h("slot", null)))));
+      }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown }, h("span", { part: "control", class: "checkbox__control" }, this.checked && (h("span", { part: "checked-icon", class: "checkbox__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { stroke: "currentColor", "stroke-width": "2" }, h("g", { transform: "translate(3.428571, 3.428571)" }, h("path", { d: "M0,5.71428571 L3.42857143,9.14285714" }), h("path", { d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (h("span", { part: "indeterminate-icon", class: "checkbox__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { stroke: "currentColor", "stroke-width": "2" }, h("g", { transform: "translate(2.285714, 6.857143)" }, h("path", { d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), h("input", { ref: (el) => (this.nativeInput = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { part: "text", id: this.textId, class: "checkbox__text" }, h("slot", null)))));
   }
   get host() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/six-checkbox.entry.js.map

@@ -1 +1 @@
-{"file":"six-checkbox.entry.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,mnJAAmnJ;;ACM1oJ,IAAI,EAAE,GAAG,CAAC,CAAC;MAuBE,WAAW;;;;;;IACtB,YAAO,GAAG,YAAY,EAAE,EAAE,EAAE,CAAC;IAC7B,YAAO,GAAG,kBAAkB,EAAE,EAAE,CAAC;IACjC,WAAM,GAAG,iBAAiB,EAAE,EAAE,CAAC;IAC/B,gBAAW,GAAG,oBAAoB,EAAE,EAAE,CAAC;IAEvC,oBAAe,GAAG,EAAE,CAAC;IACrB,qBAAgB,GAAG,KAAK,CAAC;IAEhB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;;IAkEvC,iBAAY,GAAG,KAAK,CAAC;oBA9DT,KAAK;wBACD,KAAK;4BACD,KAAK;;;oBASd,KAAK;oBAGL,KAAK;iBAGR,EAAE;qBAGE,EAAE;mBAG4B,KAAK;yBAGC,KAAK;mBAGX,KAAK;uBAGjC,KAAK;;EAa3B,mBAAmB;IACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACf,OAAO;KACR;IACD,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAClC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;IAC9C,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;IAC3C,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACvB;EAID,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAKD,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEnD,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;GAC5E;EAED,oBAAoB;IAClB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC9E,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;GACjC;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC;IACjC,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAED,gBAAgB;IACd,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;IAC9C,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC,KAAK;MACnD,IAAI,IAAI,CAAC,gBAAgB,KAAK,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE;QACjG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC;OACrD;MACD,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB,CAAC,CAAC;GACJ;;EAID,MAAM,QAAQ,CAAC,OAAsB;IACnC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;GAC3B;;EAID,MAAM,WAAW;IACf,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;GACnB;;EAID,MAAM,cAAc;IAClB,OAAO,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;GACpC;;EAID,MAAM,aAAa;IACjB,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;GAClC;;EAID,MAAM,iBAAiB,CAAC,OAAe;IACrC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;IAC1B,IAAI,CAAC,gBAAgB,GAAG,OAAO,KAAK,EAAE,CAAC;IACvC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACtC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;GAC5C;;EAID,MAAM,KAAK;IACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC;IACjC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;IAC1B,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;IAC9B,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;IACjC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACtB;EAED,YAAY;IACV,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;IAClC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;GAC5B;EAED,UAAU;IACR,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;GACrB;EAED,WAAW;IACT,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;GACtB;EAED,eAAe,CAAC,KAAiB;;IAE/B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;GACpB;EAED,aAAa;IACX,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACrB;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;IACzD,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;GACjD;EAED,YAAY;IACV,OAAO,IAAI,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GAC9D;EAED,MAAM;IACJ,QACE,EAAC,WAAW,IACV,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,EACvE,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,IAEjC,aACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,mBAAmB,EAAE,IAAI,CAAC,OAAO;QACjC,oBAAoB,EAAE,IAAI,CAAC,QAAQ;QACnC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;QAClC,mBAAmB,EAAE,IAAI,CAAC,OAAO;QACjC,yBAAyB,EAAE,IAAI,CAAC,aAAa;OAC9C,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,eAAe,IAEjC,YAAM,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,mBAAmB,IAC3C,IAAI,CAAC,OAAO,KACX,YAAM,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,gBAAgB,IAC9C,WAAK,OAAO,EAAC,WAAW,IACtB,SAAG,MAAM,EAAC,MAAM,kBAAc,GAAG,EAAC,IAAI,EAAC,MAAM,eAAW,SAAS,oBAAgB,OAAO,IACtF,SAAG,MAAM,EAAC,cAAc,kBAAc,GAAG,IACvC,SAAG,SAAS,EAAC,+BAA+B,IAC1C,YAAM,CAAC,EAAC,sCAAsC,GAAQ,EACtD,YAAM,CAAC,EAAC,sCAAsC,GAAQ,CACpD,CACF,CACF,CACA,CACD,CACR,EAEA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,KAClC,YAAM,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAC,gBAAgB,IACpD,WAAK,OAAO,EAAC,WAAW,IACtB,SAAG,MAAM,EAAC,MAAM,kBAAc,GAAG,EAAC,IAAI,EAAC,MAAM,eAAW,SAAS,oBAAgB,OAAO,IACtF,SAAG,MAAM,EAAC,cAAc,kBAAc,GAAG,IACvC,SAAG,SAAS,EAAC,+BAA+B,IAC1C,YAAM,CAAC,EAAC,+CAA+C,GAAQ,CAC7D,CACF,CACF,CACA,CACD,CACR,EAED,aACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,qBAC5B,IAAI,CAAC,OAAO,EAC7B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,GAC7B,CACG,EAEP,YAAM,IAAI,EAAC,MAAM,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,gBAAgB,IACvD,eAAQ,CACH,CACD,CACI,EACd;GACH;;;;;;;;;;;;;","names":[],"sources":["./src/components/six-checkbox/six-checkbox.scss?tag=six-checkbox&encapsulation=shadow","./src/components/six-checkbox/six-checkbox.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: inline-block;\n}\n\n.checkbox {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-input-font-size-medium);\n  font-weight: var(--six-input-font-weight);\n  color: var(--six-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.checkbox__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: 0;\n  background-color: var(--six-input-background-color);\n  color: var(--six-checkbox-color);\n  transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n    var(--six-transition-fast) color, var(--six-transition-fast) box-shadow;\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .checkbox__icon {\n    display: inline-flex;\n    width: var(--six-selection-control-toggle-size);\n    height: var(--six-selection-control-toggle-size);\n\n    svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n}\n\n// Hover\n.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-hover);\n}\n\n// Checked/indeterminate\n.checkbox--checked .checkbox__control,\n.checkbox--indeterminate .checkbox__control {\n  border-color: var(--six-selection-control-color);\n  background-color: var(--six-selection-control-color);\n}\n\n// Checked/indeterminate + hover\n.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-focus);\n  background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.checkbox--disabled {\n  cursor: not-allowed;\n  color: var(--six-input-color-disabled);\n\n  .checkbox__control {\n    border-color: var(--six-input-border-color-disabled);\n  }\n\n  &.checkbox--checked .checkbox__control,\n  &.checkbox--indeterminate .checkbox__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n}\n\n// Invalid\n.checkbox--invalid:not(.checkbox--disabled) {\n  .checkbox__control {\n    border-color: var(--six-input-border-color-danger);\n  }\n}\n\n.checkbox__text {\n  line-height: var(--six-selection-control-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","import { Component, Event, EventEmitter, Method, Prop, State, Watch, h, Element } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The checkbox label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part control - The checkbox control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part indeterminate-icon - The container that wraps the indeterminate icon.\n * @part text - The checkbox text rendered to the right.\n */\n\n@Component({\n  tag: 'six-checkbox',\n  styleUrl: 'six-checkbox.scss',\n  shadow: true,\n})\nexport class SixCheckbox {\n  inputId = `checkbox-${++id}`;\n  labelId = `checkbox-label-${id}`;\n  textId = `checkbox-text-${id}`;\n  errorTextId = `input-error-text-${id}`;\n  input: HTMLInputElement;\n  customErrorText = '';\n  customValidation = false;\n\n  readonly eventListeners = new EventListeners();\n\n  @Element() host: HTMLSixCheckboxElement;\n\n  @State() hasFocus = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n\n  /** The checkbox's name attribute. */\n  @Prop() name: string;\n\n  /** The checkbox's value attribute. */\n  @Prop() value: string;\n\n  /** Set to true to disable the checkbox. */\n  @Prop() disabled = false;\n\n  /** Set to true to make the checkbox a required field. */\n  @Prop() required = false;\n\n  /** The checkbox label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The checkbox's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** Set to true to draw the checkbox in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Set to true to draw the checkbox in an indeterminate state. */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-checkbox-blur' }) sixBlur: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-checkbox-change' }) sixChange: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-checkbox-focus' }) sixFocus: EventEmitter<EmptyPayload>;\n\n  @Watch('checked')\n  @Watch('indeterminate')\n  handleCheckedChange() {\n    if (!this.input) {\n      return;\n    }\n    this.input.checked = this.checked;\n    this.input.indeterminate = this.indeterminate;\n    this.invalid = !this.input.checkValidity();\n    this.sixChange.emit();\n  }\n\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  /** default state whether the radio button should be checked or not when resetting */\n  private defaultState = false;\n\n  connectedCallback() {\n    this.handleChange = this.handleChange.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleMouseDown = this.handleMouseDown.bind(this);\n    this.handleInvalid = this.handleInvalid.bind(this);\n\n    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  componentWillLoad() {\n    this.defaultState = this.checked;\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.input.indeterminate = this.indeterminate;\n    this.eventListeners.add(this.input, 'invalid', (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n        this.customErrorText = this.input.validationMessage;\n      }\n      event.preventDefault();\n    });\n  }\n\n  /** Sets focus on the checkbox. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  @Method()\n  async removeFocus() {\n    this.input.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    return this.input.validity.valid;\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.checked = this.defaultState;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.input.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  handleChange() {\n    this.checked = this.input.checked;\n    this.indeterminate = false;\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  }\n\n  handleMouseDown(event: MouseEvent) {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.input.focus();\n  }\n\n  handleInvalid() {\n    this.invalid = true;\n  }\n\n  handleSlotChange() {\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n  }\n\n  displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.customErrorText ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\n      >\n        <label\n          part=\"base\"\n          class={{\n            checkbox: true,\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--focused': this.hasFocus,\n            'checkbox--invalid': this.invalid,\n            'checkbox--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n          onMouseDown={this.handleMouseDown}\n        >\n          <span part=\"control\" class=\"checkbox__control\">\n            {this.checked && (\n              <span part=\"checked-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(3.428571, 3.428571)\">\n                        <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n                        <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            {!this.checked && this.indeterminate && (\n              <span part=\"indeterminate-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(2.285714, 6.857143)\">\n                        <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            <input\n              ref={(el) => (this.input = el)}\n              id={this.inputId}\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              disabled={this.disabled}\n              required={this.required}\n              role=\"checkbox\"\n              aria-checked={this.checked ? 'true' : 'false'}\n              aria-labelledby={this.labelId}\n              onChange={this.handleChange}\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n              onInvalid={this.handleInvalid}\n            />\n          </span>\n\n          <span part=\"text\" id={this.textId} class=\"checkbox__text\">\n            <slot />\n          </span>\n        </label>\n      </FormControl>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-checkbox.entry.js","mappings":"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","names":[],"sources":["./src/components/six-checkbox/six-checkbox.scss?tag=six-checkbox&encapsulation=shadow","./src/components/six-checkbox/six-checkbox.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: inline-block;\n}\n\n.checkbox {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-input-font-size-medium);\n  font-weight: var(--six-input-font-weight);\n  color: var(--six-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.checkbox__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: 0;\n  background-color: var(--six-input-background-color);\n  color: var(--six-checkbox-color);\n  transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n    var(--six-transition-fast) color, var(--six-transition-fast) box-shadow;\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .checkbox__icon {\n    display: inline-flex;\n    width: var(--six-selection-control-toggle-size);\n    height: var(--six-selection-control-toggle-size);\n\n    svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n}\n\n// Hover\n.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-hover);\n}\n\n// Checked/indeterminate\n.checkbox--checked .checkbox__control,\n.checkbox--indeterminate .checkbox__control {\n  border-color: var(--six-selection-control-color);\n  background-color: var(--six-selection-control-color);\n}\n\n// Checked/indeterminate + hover\n.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-focus);\n  background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.checkbox--disabled {\n  cursor: not-allowed;\n  color: var(--six-input-color-disabled);\n\n  .checkbox__control {\n    border-color: var(--six-input-border-color-disabled);\n  }\n\n  &.checkbox--checked .checkbox__control,\n  &.checkbox--indeterminate .checkbox__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n}\n\n// Invalid\n.checkbox--invalid:not(.checkbox--disabled) {\n  .checkbox__control {\n    border-color: var(--six-input-border-color-danger);\n  }\n}\n\n.checkbox__text {\n  line-height: var(--six-selection-control-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The checkbox label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part control - The checkbox control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part indeterminate-icon - The container that wraps the indeterminate icon.\n * @part text - The checkbox text rendered to the right.\n */\n\n@Component({\n  tag: 'six-checkbox',\n  styleUrl: 'six-checkbox.scss',\n  shadow: true,\n})\nexport class SixCheckbox {\n  private inputId = `checkbox-${++id}`;\n  private labelId = `checkbox-label-${id}`;\n  private textId = `checkbox-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private customErrorText = '';\n  private customValidation = false;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixCheckboxElement;\n\n  @State() hasFocus = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n\n  /** The checkbox's name attribute. */\n  @Prop() name = '';\n\n  /**\n   * The value of the checkbox does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n   * it's only used when the checkbox participates in a native `<form>`.\n   */\n  @Prop() value = 'on';\n\n  /** Set to true to disable the checkbox. */\n  @Prop() disabled = false;\n\n  /** Set to true to make the checkbox a required field. */\n  @Prop() required = false;\n\n  /** The checkbox label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The checkbox's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** Set to true to draw the checkbox in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Set to true to draw the checkbox in an indeterminate state. */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-checkbox-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-checkbox-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-checkbox-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('checked')\n  @Watch('indeterminate')\n  handleCheckedChange() {\n    if (this.nativeInput == null) {\n      return;\n    }\n    this.nativeInput.checked = this.checked;\n    this.nativeInput.indeterminate = this.indeterminate;\n    this.invalid = !this.nativeInput.checkValidity();\n    this.sixChange.emit();\n  }\n\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  /** default state whether the radio button should be checked or not when resetting */\n  private defaultState = false;\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  componentWillLoad() {\n    this.defaultState = this.checked;\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n\n    nativeInput.indeterminate = this.indeterminate;\n    this.eventListeners.add(nativeInput, 'invalid', (event) => {\n      this.invalid = true;\n      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {\n        this.customErrorText = nativeInput.validationMessage;\n      }\n      event.preventDefault();\n    });\n  }\n\n  /** Sets focus on the checkbox. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.nativeInput?.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    if (this.nativeInput == null) {\n      return true;\n    }\n    return this.nativeInput.validity.valid;\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    if (this.nativeInput != null) {\n      this.nativeInput.setCustomValidity(message);\n      this.invalid = !this.nativeInput.checkValidity();\n    }\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.checked = this.defaultState;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.nativeInput?.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  private handleChange = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\n      this.indeterminate = false;\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.nativeInput?.focus();\n  };\n\n  private handleSlotChange() {\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n  }\n\n  private displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.customErrorText != null ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\n      >\n        <label\n          part=\"base\"\n          class={{\n            checkbox: true,\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--focused': this.hasFocus,\n            'checkbox--invalid': this.invalid,\n            'checkbox--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n          onMouseDown={this.handleMouseDown}\n        >\n          <span part=\"control\" class=\"checkbox__control\">\n            {this.checked && (\n              <span part=\"checked-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(3.428571, 3.428571)\">\n                        <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n                        <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            {!this.checked && this.indeterminate && (\n              <span part=\"indeterminate-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(2.285714, 6.857143)\">\n                        <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            <input\n              ref={(el) => (this.nativeInput = el)}\n              id={this.inputId}\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              disabled={this.disabled}\n              required={this.required}\n              role=\"checkbox\"\n              aria-checked={this.checked ? 'true' : 'false'}\n              aria-labelledby={this.labelId}\n              onChange={this.handleChange}\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n            />\n          </span>\n\n          <span part=\"text\" id={this.textId} class=\"checkbox__text\">\n            <slot />\n          </span>\n        </label>\n      </FormControl>\n    );\n  }\n}\n"],"version":3}

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

@@ -19,7 +19,6 @@ const SixInput = class {
     this.sixInput = createEvent(this, "six-input-input", 7);
     this.sixFocus = createEvent(this, "six-input-focus", 7);
     this.sixBlur = createEvent(this, "six-input-blur", 7);
-    this.sixValueChange = createEvent(this, "six-input-value-change", 7);
     this.inputId = `input-${++id}`;
     this.labelId = `input-label-${id}`;
     this.helpTextId = `input-help-text-${id}`;
@@ -29,6 +28,44 @@ const SixInput = class {
     this.eventListeners = new EventListeners();
     /** defaultValue which the input will be reverted to when executing reset */
     this.defaultValue = '';
+    this.handleChange = () => {
+      if (this.nativeInput != null) {
+        this.value = this.nativeInput.value;
+        this.sixChange.emit();
+      }
+    };
+    this.handleInput = () => {
+      if (this.nativeInput != null) {
+        this.value = this.nativeInput.value;
+        this.sixInput.emit();
+      }
+    };
+    this.handleBlur = () => {
+      this.hasFocus = false;
+      this.sixBlur.emit();
+    };
+    this.handleFocus = () => {
+      this.hasFocus = true;
+      this.sixFocus.emit();
+    };
+    this.handleClearClick = (event) => {
+      this.value = '';
+      this.sixClear.emit();
+      this.sixInput.emit();
+      this.sixChange.emit();
+      if (this.nativeInput != null) {
+        this.nativeInput.focus();
+      }
+      event.stopPropagation();
+    };
+    this.handlePasswordToggle = () => {
+      this.isPasswordVisible = !this.isPasswordVisible;
+    };
+    this.handleSlotChange = () => {
+      this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+      this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
+      this.hasLabelSlot = hasSlot(this.host, 'label');
+    };
     this.hasFocus = false;
     this.hasHelpTextSlot = false;
     this.hasErrorTextSlot = false;
@@ -51,12 +88,12 @@ const SixInput = class {
     this.max = undefined;
     this.step = undefined;
     this.pattern = undefined;
-    this.required = undefined;
-    this.autocapitalize = undefined;
-    this.autocorrect = undefined;
-    this.autocomplete = undefined;
-    this.autofocus = undefined;
-    this.spellcheck = undefined;
+    this.required = false;
+    this.autocapitalize = 'off';
+    this.autocorrect = 'off';
+    this.autocomplete = 'off';
+    this.autofocus = false;
+    this.spellcheck = false;
     this.invalid = false;
     this.clearable = false;
     this.togglePassword = false;
@@ -68,141 +105,130 @@ const SixInput = class {
     this.handleSlotChange();
   }
   handleValueChange() {
-    if (!this.input) {
-      return;
+    this.value = this.getValue();
+    if (this.nativeInput != null) {
+      if (this.nativeInput.value !== this.value) {
+        this.nativeInput.value = this.value;
+      }
+      this.invalid = !this.nativeInput.checkValidity();
     }
-    this.input.value = this.value;
-    this.invalid = !this.input.checkValidity();
-    this.sixValueChange.emit();
   }
   connectedCallback() {
-    this.handleChange = this.handleChange.bind(this);
-    this.handleInput = this.handleInput.bind(this);
-    this.handleInvalid = this.handleInvalid.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleClearClick = this.handleClearClick.bind(this);
-    this.handlePasswordToggle = this.handlePasswordToggle.bind(this);
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+    var _a;
+    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
   }
   componentWillLoad() {
-    this.defaultValue = this.value;
+    this.defaultValue = this.getValue();
     this.handleSlotChange();
   }
   componentDidLoad() {
-    this.eventListeners.add(this.input, 'invalid', (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {
-        this.customErrorText = this.input.validationMessage;
+    const nativeInput = this.nativeInput;
+    if (nativeInput == null) {
+      return;
+    }
+    this.eventListeners.add(nativeInput, 'invalid', (event) => {
+      this.invalid = true;
+      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {
+        this.customErrorText = nativeInput.validationMessage;
       }
       event.preventDefault();
     });
   }
   disconnectedCallback() {
-    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    var _a;
+    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     this.eventListeners.removeAll();
   }
   /** Sets focus on the input. */
   async setFocus(options) {
-    this.input.focus(options);
+    var _a;
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus(options);
   }
   /** Removes focus from the input. */
   async removeFocus() {
-    this.input.blur();
+    var _a;
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
   }
   /** Selects all the text in the input. */
   async select() {
-    return this.input.select();
+    var _a;
+    return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.select();
   }
   /** Sets the start and end positions of the text selection (0-based). */
   async setSelectionRange(selectionStart, selectionEnd, selectionDirection = 'none') {
-    return this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+    var _a;
+    return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
   }
   /** Replaces a range of text with a new string. */
   async setRangeText(replacement, start, end, selectMode = 'preserve') {
-    this.input.setRangeText(replacement, start, end, selectMode);
-    if (this.value !== this.input.value) {
-      this.value = this.input.value;
+    if (this.nativeInput == null) {
+      return;
+    }
+    this.nativeInput.setRangeText(replacement, start, end, selectMode);
+    if (this.getValue() !== this.nativeInput.value) {
+      this.value = this.nativeInput.value;
       this.sixChange.emit();
       this.sixInput.emit();
     }
   }
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   async reportValidity() {
-    return this.input.reportValidity();
+    var _a;
+    return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.reportValidity();
   }
   /** Checks for validity. */
   async checkValidity() {
-    return this.input.validity.valid;
+    if (this.nativeInput == null) {
+      return true;
+    }
+    return this.nativeInput.validity.valid;
   }
   /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
   async setCustomValidity(message) {
     this.customErrorText = '';
     this.customValidation = message !== '';
-    this.input.setCustomValidity(message);
-    this.invalid = !this.input.checkValidity();
+    if (this.nativeInput != null) {
+      this.nativeInput.setCustomValidity(message);
+      this.invalid = !this.nativeInput.checkValidity();
+    }
   }
   /** Returns the native input's validity */
   async getValidity() {
-    return this.input.validity;
+    var _a;
+    return (_a = this === null || this === void 0 ? void 0 : this.nativeInput) === null || _a === void 0 ? void 0 : _a.validity;
   }
   /** Returns the native input's validity */
   async isValid() {
-    return this.input.validity.valid;
+    if (this.nativeInput == null) {
+      return true;
+    }
+    return this.nativeInput.validity.valid;
   }
   /** Returns the native input's validationMessage */
   async getValidationMessage() {
-    return this.input.validationMessage;
+    if (this.nativeInput == null) {
+      return '';
+    }
+    return this.nativeInput.validationMessage;
   }
   /** Resets the formcontrol */
   async reset() {
+    var _a;
     this.value = this.defaultValue;
     this.customErrorText = '';
     this.customValidation = false;
-    this.input.setCustomValidity('');
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
     this.invalid = false;
   }
-  handleChange() {
-    this.value = this.input.value;
-    this.sixChange.emit();
-  }
-  handleInput() {
-    this.value = this.input.value;
-    this.sixInput.emit();
-  }
-  handleInvalid() {
-    this.invalid = true;
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.sixBlur.emit();
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.sixFocus.emit();
-  }
-  handleClearClick(event) {
-    this.value = '';
-    this.sixClear.emit();
-    this.sixInput.emit();
-    this.sixChange.emit();
-    this.input.focus();
-    event.stopPropagation();
-  }
-  handlePasswordToggle() {
-    this.isPasswordVisible = !this.isPasswordVisible;
-  }
-  handleSlotChange() {
-    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
-    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
-    this.hasLabelSlot = hasSlot(this.host, 'label');
-  }
   displayError() {
     return this.invalid && (!this.errorOnBlur || !this.hasFocus);
   }
-  render() {
+  getValue() {
     var _a;
-    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.customErrorText ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("div", { part: "base", class: {
+    return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
+  }
+  render() {
+    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.customErrorText != null ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("div", { part: "base", class: {
         input: true,
         // Sizes
         'input--small': this.size === 'small',
@@ -213,12 +239,12 @@ const SixInput = class {
         'input--pill': this.pill,
         'input--disabled': this.disabled,
         'input--focused': this.hasFocus,
-        'input--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
+        'input--empty': this.getValue().length === 0,
         'input--invalid': this.invalid,
-      } }, h("span", { part: "prefix", class: "input__prefix" }, h("slot", { name: "prefix" })), h("input", { part: "input", ref: (el) => (this.input = el), id: this.inputId, size: 1, class: {
+      } }, h("span", { part: "prefix", class: "input__prefix" }, h("slot", { name: "prefix" })), h("input", { part: "input", ref: (el) => (this.nativeInput = el), id: this.inputId, size: 1, class: {
         input__control: true,
         input__control__prefix: hasSlot(this.host, 'prefix'),
-      }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.value, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onInvalid: this.handleInvalid, onFocus: this.handleFocus, onBlur: this.handleBlur, "data-testid": "input-control" }), this.clearable && (h("button", { part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { name: "clear-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { part: "suffix", class: "input__suffix" }, h("slot", { name: "suffix" })))));
+      }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "data-testid": "input-control" }), this.clearable && (h("button", { part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { name: "clear-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { part: "suffix", class: "input__suffix" }, h("slot", { name: "suffix" })))));
   }
   get host() { return getElement(this); }
   static get watchers() { return {