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

package/dist/collection/components/six-radio/six-radio.js

@@ -19,9 +19,43 @@ export class SixRadio {
     this.labelId = `radio-label-${id}`;
     /** default state whether the radio button should be checked or not when resetting */
     this.defaultState = false;
+    this.handleClick = () => {
+      if (this.nativeInput != null) {
+        this.checked = this.nativeInput.checked;
+      }
+    };
+    this.handleBlur = () => {
+      this.hasFocus = false;
+      this.sixBlur.emit();
+    };
+    this.handleFocus = () => {
+      this.hasFocus = true;
+      this.sixFocus.emit();
+    };
+    this.handleKeyDown = (event) => {
+      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+        const radios = this.getAllRadios().filter((radio) => !radio.disabled);
+        const incr = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
+        let index = radios.indexOf(this.host) + incr;
+        if (index < 0)
+          index = radios.length - 1;
+        if (index > radios.length - 1)
+          index = 0;
+        this.getAllRadios().map((radio) => (radio.checked = false));
+        radios[index].setFocus();
+        radios[index].checked = true;
+        event.preventDefault();
+      }
+    };
+    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.name = undefined;
-    this.value = undefined;
+    this.name = '';
+    this.value = 'on';
     this.disabled = false;
     this.checked = false;
     this.invalid = false;
@@ -30,95 +64,66 @@ export class SixRadio {
     if (this.checked) {
       this.getSiblingRadios().map((radio) => (radio.checked = false));
     }
-    if (this.input) {
-      this.input.checked = this.checked;
+    if (this.nativeInput != null) {
+      this.nativeInput.checked = this.checked;
       this.sixChange.emit();
     }
   }
-  connectedCallback() {
-    this.handleClick = this.handleClick.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-  }
   componentWillLoad() {
     this.defaultState = this.checked;
   }
   /** Sets focus on the radio. */
   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 radio. */
   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.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.input.setCustomValidity('');
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
     this.invalid = false;
   }
   getAllRadios() {
     const form = this.host.closest('six-form, form') || document.body;
-    if (!this.name)
+    if (this.name === '')
       return [];
     return [...form.querySelectorAll('six-radio')].filter((radio) => radio.name === this.name);
   }
   getSiblingRadios() {
     return this.getAllRadios().filter((radio) => radio !== this.host);
   }
-  handleClick() {
-    this.checked = this.input.checked;
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.sixBlur.emit();
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.sixFocus.emit();
-  }
-  handleKeyDown(event) {
-    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
-      const radios = this.getAllRadios().filter((radio) => !radio.disabled);
-      const incr = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
-      let index = radios.indexOf(this.host) + incr;
-      if (index < 0)
-        index = radios.length - 1;
-      if (index > radios.length - 1)
-        index = 0;
-      this.getAllRadios().map((radio) => (radio.checked = false));
-      radios[index].setFocus();
-      radios[index].checked = true;
-      event.preventDefault();
-    }
-  }
-  handleMouseDown(event) {
-    // Prevent clicks on the label from briefly blurring the input
-    event.preventDefault();
-    this.input.focus();
-  }
   render() {
     return (h("label", { part: "base", class: {
         radio: true,
         'radio--checked': this.checked,
         'radio--disabled': this.disabled,
         'radio--focused': this.hasFocus,
-      }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { part: "control", class: "radio__control" }, h("span", { part: "checked-icon", class: "radio__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { fill: "currentColor" }, h("circle", { cx: "8", cy: "8", r: "5" }))))), h("input", { ref: (el) => (this.input = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { part: "label", id: this.labelId, class: "radio__label" }, h("slot", null))));
+      }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { part: "control", class: "radio__control" }, h("span", { part: "checked-icon", class: "radio__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { fill: "currentColor" }, h("circle", { cx: "8", cy: "8", r: "5" }))))), h("input", { ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { part: "label", id: this.labelId, class: "radio__label" }, h("slot", null))));
   }
   static get is() { return "six-radio"; }
   static get encapsulation() { return "shadow"; }
@@ -149,7 +154,8 @@ export class SixRadio {
           "text": "The radio's name attribute."
         },
         "attribute": "name",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "''"
       },
       "value": {
         "type": "string",
@@ -166,7 +172,8 @@ export class SixRadio {
           "text": "The radio's value attribute."
         },
         "attribute": "value",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "'on'"
       },
       "disabled": {
         "type": "boolean",
@@ -334,14 +341,14 @@ export class SixRadio {
       },
       "reportValidity": {
         "complexType": {
-          "signature": "() => Promise<boolean>",
+          "signature": "() => Promise<boolean | undefined>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<boolean>"
+          "return": "Promise<boolean | undefined>"
         },
         "docs": {
           "text": "Checks for validity and shows the browser's validation message if the control is invalid.",

package/dist/collection/components/six-radio/six-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-radio.js","sourceRoot":"","sources":["../../../src/components/six-radio/six-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGvG,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;;;;GAYG;AAOH,MAAM,OAAO,QAAQ;;IACnB,YAAO,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC;IAC1B,YAAO,GAAG,eAAe,EAAE,EAAE,CAAC;IA6C9B,qFAAqF;IAC7E,iBAAY,GAAG,KAAK,CAAC;oBAzCT,KAAK;;;oBASN,KAAK;mBAG0B,KAAK;mBAML,KAAK;;EAGvD,mBAAmB;IACjB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,gBAAgB,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC;KACjE;IACD,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;MAClC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB;EACH,CAAC;EAcD,iBAAiB;IACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,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,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACzD,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC;EACnC,CAAC;EAED,+BAA+B;EAE/B,KAAK,CAAC,QAAQ,CAAC,OAAsB;IACnC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;EAC5B,CAAC;EAED,oCAAoC;EAEpC,KAAK,CAAC,WAAW;IACf,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;EACpB,CAAC;EAED,gGAAgG;EAEhG,KAAK,CAAC,cAAc;IAClB,OAAO,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;EACrC,CAAC;EAED,2BAA2B;EAE3B,KAAK,CAAC,aAAa;IACjB,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;EACnC,CAAC;EAED,yGAAyG;EAEzG,KAAK,CAAC,iBAAiB,CAAC,OAAe;IACrC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACtC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;EAC7C,CAAC;EAED,6BAA6B;EAE7B,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC;IACjC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;IACjC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;EACvB,CAAC;EAED,YAAY;IACV,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC;IAElE,IAAI,CAAC,IAAI,CAAC,IAAI;MAAE,OAAO,EAAE,CAAC;IAE1B,OAAO,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CACnD,CAAC,KAA0B,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAChC,CAAC;EAC7B,CAAC;EAED,gBAAgB;IACd,OAAO,IAAI,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,CAA0B,CAAC;EAC7F,CAAC;EAED,WAAW;IACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;EACpC,CAAC;EAED,UAAU;IACR,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;EACtB,CAAC;EAED,WAAW;IACT,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;EACvB,CAAC;EAED,aAAa,CAAC,KAAoB;IAChC,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;MAC3E,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MACtE,MAAM,IAAI,GAAG,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;MACnE,IAAI,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;MAC7C,IAAI,KAAK,GAAG,CAAC;QAAE,KAAK,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;MACzC,IAAI,KAAK,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC;QAAE,KAAK,GAAG,CAAC,CAAC;MAEzC,IAAI,CAAC,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC;MAC5D,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;MACzB,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;MAE7B,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB;EACH,CAAC;EAED,eAAe,CAAC,KAAiB;IAC/B,8DAA8D;IAC9D,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;EACrB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,aACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,gBAAgB,EAAE,IAAI,CAAC,OAAO;QAC9B,iBAAiB,EAAE,IAAI,CAAC,QAAQ;QAChC,gBAAgB,EAAE,IAAI,CAAC,QAAQ;OAChC,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,WAAW,EAAE,IAAI,CAAC,eAAe;MAEjC,YAAM,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,gBAAgB;QACzC,YAAM,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,aAAa;UAC3C,WAAK,OAAO,EAAC,WAAW;YACtB,SAAG,MAAM,EAAC,MAAM,kBAAc,GAAG,EAAC,IAAI,EAAC,MAAM,eAAW,SAAS;cAC/D,SAAG,IAAI,EAAC,cAAc;gBACpB,cAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,GAAU,CACnC,CACF,CACA,CACD;QAEP,aACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,OAAO,kBACE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,qBAC5B,IAAI,CAAC,OAAO,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACG;MAEP,YAAM,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,cAAc;QACvD,eAAQ,CACH,CACD,CACT,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\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 - The radio's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The radio control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part label - The radio label.\n */\n\n@Component({\n  tag: 'six-radio',\n  styleUrl: 'six-radio.scss',\n  shadow: true,\n})\nexport class SixRadio {\n  inputId = `radio-${++id}`;\n  labelId = `radio-label-${id}`;\n  input: HTMLInputElement;\n\n  @Element() host: HTMLSixRadioElement;\n\n  @State() hasFocus = false;\n\n  /** The radio's name attribute. */\n  @Prop() name: string;\n\n  /** The radio's value attribute. */\n  @Prop() value: string;\n\n  /** Set to true to disable the radio. */\n  @Prop() disabled = false;\n\n  /** Set to true to draw the radio in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message\n   * provided by the `setCustomValidity` method.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  @Watch('checked')\n  handleCheckedChange() {\n    if (this.checked) {\n      this.getSiblingRadios().map((radio) => (radio.checked = false));\n    }\n    if (this.input) {\n      this.input.checked = this.checked;\n      this.sixChange.emit();\n    }\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-radio-blur' }) sixBlur: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-radio-change' }) sixChange: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-radio-focus' }) sixFocus: EventEmitter<EmptyPayload>;\n\n  /** default state whether the radio button should be checked or not when resetting */\n  private defaultState = false;\n\n  connectedCallback() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleMouseDown = this.handleMouseDown.bind(this);\n  }\n\n  componentWillLoad() {\n    this.defaultState = this.checked;\n  }\n\n  /** Sets focus on the radio. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the radio. */\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.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.input.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  getAllRadios() {\n    const form = this.host.closest('six-form, form') || document.body;\n\n    if (!this.name) return [];\n\n    return [...form.querySelectorAll('six-radio')].filter(\n      (radio: HTMLSixRadioElement) => radio.name === this.name\n    ) as HTMLSixRadioElement[];\n  }\n\n  getSiblingRadios() {\n    return this.getAllRadios().filter((radio) => radio !== this.host) as HTMLSixRadioElement[];\n  }\n\n  handleClick() {\n    this.checked = this.input.checked;\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  handleKeyDown(event: KeyboardEvent) {\n    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n      const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n      const incr = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;\n      let index = radios.indexOf(this.host) + incr;\n      if (index < 0) index = radios.length - 1;\n      if (index > radios.length - 1) index = 0;\n\n      this.getAllRadios().map((radio) => (radio.checked = false));\n      radios[index].setFocus();\n      radios[index].checked = true;\n\n      event.preventDefault();\n    }\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  render() {\n    return (\n      <label\n        part=\"base\"\n        class={{\n          radio: true,\n          'radio--checked': this.checked,\n          'radio--disabled': this.disabled,\n          'radio--focused': this.hasFocus,\n        }}\n        htmlFor={this.inputId}\n        onKeyDown={this.handleKeyDown}\n        onMouseDown={this.handleMouseDown}\n      >\n        <span part=\"control\" class=\"radio__control\">\n          <span part=\"checked-icon\" class=\"radio__icon\">\n            <svg viewBox=\"0 0 16 16\">\n              <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                <g fill=\"currentColor\">\n                  <circle cx=\"8\" cy=\"8\" r=\"5\"></circle>\n                </g>\n              </g>\n            </svg>\n          </span>\n\n          <input\n            ref={(el) => (this.input = el)}\n            id={this.inputId}\n            type=\"radio\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            disabled={this.disabled}\n            role=\"radio\"\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-labelledby={this.labelId}\n            onClick={this.handleClick}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n          />\n        </span>\n\n        <span part=\"label\" id={this.labelId} class=\"radio__label\">\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-radio.js","sourceRoot":"","sources":["../../../src/components/six-radio/six-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\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 - The radio's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The radio control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part label - The radio label.\n */\n\n@Component({\n  tag: 'six-radio',\n  styleUrl: 'six-radio.scss',\n  shadow: true,\n})\nexport class SixRadio {\n  private inputId = `radio-${++id}`;\n  private labelId = `radio-label-${id}`;\n  private nativeInput?: HTMLInputElement;\n\n  @Element() host!: HTMLSixRadioElement;\n\n  @State() hasFocus = false;\n\n  /** The radio's name attribute. */\n  @Prop() name = '';\n\n  /** The radio's value attribute. */\n  @Prop() value = 'on';\n\n  /** Set to true to disable the radio. */\n  @Prop() disabled = false;\n\n  /** Set to true to draw the radio in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message\n   * provided by the `setCustomValidity` method.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  @Watch('checked')\n  handleCheckedChange() {\n    if (this.checked) {\n      this.getSiblingRadios().map((radio) => (radio.checked = false));\n    }\n    if (this.nativeInput != null) {\n      this.nativeInput.checked = this.checked;\n      this.sixChange.emit();\n    }\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-radio-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-radio-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-radio-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** default state whether the radio button should be checked or not when resetting */\n  private defaultState = false;\n\n  componentWillLoad() {\n    this.defaultState = this.checked;\n  }\n\n  /** Sets focus on the radio. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the radio. */\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    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.nativeInput?.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  private getAllRadios() {\n    const form = this.host.closest('six-form, form') || document.body;\n\n    if (this.name === '') return [];\n\n    return [...form.querySelectorAll('six-radio')].filter(\n      (radio: HTMLSixRadioElement) => radio.name === this.name\n    ) as HTMLSixRadioElement[];\n  }\n\n  private getSiblingRadios() {\n    return this.getAllRadios().filter((radio) => radio !== this.host) as HTMLSixRadioElement[];\n  }\n\n  private handleClick = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\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 handleKeyDown = (event: KeyboardEvent) => {\n    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n      const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n      const incr = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;\n      let index = radios.indexOf(this.host) + incr;\n      if (index < 0) index = radios.length - 1;\n      if (index > radios.length - 1) index = 0;\n\n      this.getAllRadios().map((radio) => (radio.checked = false));\n      radios[index].setFocus();\n      radios[index].checked = true;\n\n      event.preventDefault();\n    }\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  render() {\n    return (\n      <label\n        part=\"base\"\n        class={{\n          radio: true,\n          'radio--checked': this.checked,\n          'radio--disabled': this.disabled,\n          'radio--focused': this.hasFocus,\n        }}\n        htmlFor={this.inputId}\n        onKeyDown={this.handleKeyDown}\n        onMouseDown={this.handleMouseDown}\n      >\n        <span part=\"control\" class=\"radio__control\">\n          <span part=\"checked-icon\" class=\"radio__icon\">\n            <svg viewBox=\"0 0 16 16\">\n              <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                <g fill=\"currentColor\">\n                  <circle cx=\"8\" cy=\"8\" r=\"5\"></circle>\n                </g>\n              </g>\n            </svg>\n          </span>\n\n          <input\n            ref={(el) => (this.nativeInput = el)}\n            id={this.inputId}\n            type=\"radio\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            disabled={this.disabled}\n            role=\"radio\"\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-labelledby={this.labelId}\n            onClick={this.handleClick}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n          />\n        </span>\n\n        <span part=\"label\" id={this.labelId} class=\"radio__label\">\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-range/six-range.js

@@ -22,20 +22,54 @@ export class SixRange {
     this.inputId = `input-${++id}`;
     this.labelId = `input-label-${id}`;
     this.helpTextId = `input-help-text-${id}`;
-    this.errorTextId = `input-error-text-${id}`;
     this.customErrorText = '';
     this.customValidation = false;
+    this.errorTextId = `input-error-text-${id}`;
     this.eventListeners = new EventListeners();
     /** default value the slider will be reverted to when reset is executed */
     this.defaultValue = 0;
+    this.handleInput = () => {
+      if (this.nativeInput != null) {
+        this.update(parseFloat(this.nativeInput.value));
+      }
+      requestAnimationFrame(() => {
+        this.sixChange.emit();
+      });
+    };
+    this.handleBlur = () => {
+      var _a;
+      this.hasFocus = false;
+      this.hasTooltip = false;
+      this.sixBlur.emit();
+      if (this.nativeInput != null) {
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.nativeInput);
+      }
+    };
+    this.handleFocus = () => {
+      var _a;
+      this.hasFocus = true;
+      this.hasTooltip = true;
+      this.sixFocus.emit();
+      if (this.nativeInput != null) {
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.nativeInput);
+      }
+    };
+    this.handleSlotChange = () => {
+      this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+      this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
+      this.hasLabelSlot = hasSlot(this.host, 'label');
+    };
+    this.handleTouchStart = () => {
+      this.setFocus();
+    };
     this.hasFocus = false;
     this.hasHelpTextSlot = false;
     this.hasLabelSlot = false;
     this.hasErrorTextSlot = false;
     this.hasTooltip = false;
     this.name = '';
-    this.value = undefined;
-    this.required = undefined;
+    this.value = 0;
+    this.required = false;
     this.label = '';
     this.helpText = '';
     this.errorText = '';
@@ -52,119 +86,125 @@ export class SixRange {
     this.handleSlotChange();
   }
   handleValueChange() {
-    if (this.input) {
-      this.input.value = this.value;
-      this.calculateColorRunnableTrack();
+    this.update();
+    if (this.nativeInput != null) {
+      this.invalid = !this.nativeInput.checkValidity();
     }
-    // In rare cases, the watcher may be called before render so we need to make sure the input exists
-    this.invalid = this.input ? !this.input.checkValidity() : false;
   }
   connectedCallback() {
-    this.handleInput = this.handleInput.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-    this.handleTouchStart = this.handleTouchStart.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() {
-    if (this.value === undefined || this.value === null)
-      this.value = this.min;
-    if (this.value < this.min)
-      this.value = this.min;
-    if (this.value > this.max)
-      this.value = this.max;
+    this.update();
     this.defaultValue = this.value;
     this.handleSlotChange();
   }
   componentDidLoad() {
-    this.syncTooltip();
-    this.calculateColorRunnableTrack();
-    this.resizeObserver = new ResizeObserver(() => this.syncTooltip());
-    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.update();
+    this.resizeObserver = new ResizeObserver(() => this.update());
+    this.eventListeners.add(nativeInput, 'invalid', (event) => {
+      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();
   }
   /** 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.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;
   }
-  handleInput() {
-    this.value = Number(this.input.value);
-    this.sixChange.emit();
-    requestAnimationFrame(() => this.syncTooltip());
-    requestAnimationFrame(() => this.calculateColorRunnableTrack());
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.hasTooltip = false;
-    this.sixBlur.emit();
-    this.resizeObserver.unobserve(this.input);
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.hasTooltip = true;
-    this.sixFocus.emit();
-    this.resizeObserver.observe(this.input);
-  }
-  handleSlotChange() {
-    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
-    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
-    this.hasLabelSlot = hasSlot(this.host, 'label');
-  }
-  handleTouchStart() {
-    this.setFocus();
-  }
   displayError() {
     return this.invalid && (!this.errorOnBlur || !this.hasFocus);
   }
-  syncTooltip() {
-    if (this.tooltip !== 'none') {
-      const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));
-      const inputWidth = this.input.offsetWidth;
+  syncTooltip(min, max, value) {
+    if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {
+      const percent = Math.max(0, (value - min) / (max - min));
+      const inputWidth = this.nativeInput.offsetWidth;
       const tooltipWidth = this.output.offsetWidth;
-      const thumbSize = getComputedStyle(this.input).getPropertyValue('--thumb-size');
+      const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');
       const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;
       this.output.style.transform = `translateX(${x})`;
       this.output.style.marginLeft = `-${tooltipWidth / 2}px`;
     }
   }
+  isFirefox() {
+    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+  }
+  update(updateValue) {
+    var _a, _b;
+    if (updateValue != null) {
+      this.value = updateValue;
+    }
+    const min = (_a = Number(this.min)) !== null && _a !== void 0 ? _a : 0;
+    const max = (_b = Number(this.max)) !== null && _b !== void 0 ? _b : 0;
+    let value;
+    const parsedValue = parseFloat(this.value);
+    if (isNaN(parsedValue)) {
+      value = this.getDefaultValue(min, max);
+    }
+    else {
+      value = parsedValue;
+    }
+    if (this.nativeInput != null) {
+      // The value may have constraints, so we set the native control's
+      // value and sync it back to ensure it adheres to min, max, and step
+      // properly.
+      this.nativeInput.value = value.toString();
+      this.value = parseFloat(this.nativeInput.value);
+    }
+    else {
+      this.value = value;
+    }
+    this.calculateColorRunnableTrack(min, max, this.value);
+    this.syncTooltip(min, max, this.value);
+  }
+  /**
+   * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value
+   */
+  getDefaultValue(min, max) {
+    return max < min ? min : min + (max - min) / 2;
+  }
   /**
    * For Firefox this functionality is not needed because it is supported by standard CSS.
    */
-  calculateColorRunnableTrack() {
-    if (!this.isFirefox()) {
-      const value = parseInt(this.input.value, 10);
-      const min = parseInt(this.input.min, 10);
-      const max = parseInt(this.input.max, 10);
+  calculateColorRunnableTrack(min, max, value) {
+    if (!this.isFirefox() && this.nativeInput != null) {
       const percent = Math.ceil(((value - min) / (max - min)) * 100);
-      this.input.style.background =
+      this.nativeInput.style.background =
         '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +
           percent +
           '%, var(--six-color-web-rock-300) ' +
@@ -172,11 +212,8 @@ export class SixRange {
           '%)';
     }
   }
-  isFirefox() {
-    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-  }
   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, size: "medium", errorTextId: this.errorTextId, errorText: this.customErrorText ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("div", { part: "base", class: {
+    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.customErrorText != null ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("div", { part: "base", class: {
         range: true,
         // States
         'range--disabled': this.disabled,
@@ -184,7 +221,7 @@ export class SixRange {
         'range--tooltip-visible': this.hasTooltip,
         'range--tooltip-top': this.tooltip === 'top',
         'range--tooltip-bottom': this.tooltip === 'bottom',
-      }, onTouchStart: this.handleTouchStart }, h("input", { part: "input", ref: (el) => (this.input = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
+      }, onTouchStart: this.handleTouchStart }, h("input", { part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
   }
   static get is() { return "six-range"; }
   static get encapsulation() { return "shadow"; }
@@ -233,7 +270,8 @@ export class SixRange {
           "text": "The input's value attribute."
         },
         "attribute": "value",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "0"
       },
       "required": {
         "type": "boolean",
@@ -250,7 +288,8 @@ export class SixRange {
           "text": "Set to true to make the input a required field."
         },
         "attribute": "required",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "false"
       },
       "label": {
         "type": "string",
@@ -613,6 +652,12 @@ export class SixRange {
       }, {
         "propName": "value",
         "methodName": "handleValueChange"
+      }, {
+        "propName": "min",
+        "methodName": "handleValueChange"
+      }, {
+        "propName": "max",
+        "methodName": "handleValueChange"
       }];
   }
 }