@scouterna/ui-webc 2.2.1 → 2.2.2

package/dist/collection/components/input/input.js

@@ -1,5 +1,9 @@
-import { h, } from "@stencil/core";
-export class ScoutInput {
+import { h, Mixin, } from "@stencil/core";
+import { inputMixin } from "../../mixins/inputMixin";
+export class ScoutInput extends Mixin(inputMixin) {
+    constructor() {
+        super();
+    }
     /**
      * Type of input element. If you need a number input, read the accessibility
      * section of this MDN article first:
@@ -24,36 +28,8 @@ export class ScoutInput {
      * from tab order and are not validated.
      */
     disabled = false;
-    /**
-     * Custom validation function run on top of the implicit validation performed
-     * by the browser. Return a string with the validation message to mark the
-     * input as invalid, or null to mark it as valid.
-     */
-    validate;
-    scoutInputChange;
-    scoutBlur;
-    /**
-     * Internal event used for form field association.
-     */
-    _fieldId;
-    ariaId;
-    componentWillLoad() {
-        this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;
-        this._fieldId.emit(this.ariaId);
-    }
-    onInput(event) {
-        const input = event.target;
-        if (this.validate) {
-            const validationMessage = this.validate(input.value);
-            input.setCustomValidity(validationMessage ?? "");
-        }
-        this.scoutInputChange.emit({
-            value: input.value,
-            element: input,
-        });
-    }
     render() {
-        return (h("input", { key: '63ad729182147b6a8490f4b88becc3207bfcfa49', id: this.ariaId, type: this.type, name: this.name, inputMode: this.inputmode, pattern: this.pattern, class: "input", value: this.value, disabled: this.disabled, onInput: (e) => this.onInput(e), onBlur: () => this.scoutBlur.emit() }));
+        return (h("input", { key: '15b07e42a3bd97ccc5bfb2d35c97db4a63aa98b9', ref: (el) => this.setInputRef(el), id: this.ariaId, type: this.type, name: this.name, inputMode: this.inputmode, pattern: this.pattern, class: "input", value: this.value, disabled: this.disabled, onInput: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }));
     }
     static get is() { return "scout-input"; }
     static get encapsulation() { return "scoped"; }
@@ -197,83 +173,8 @@ export class ScoutInput {
                 "reflect": false,
                 "attribute": "disabled",
                 "defaultValue": "false"
-            },
-            "validate": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(value: string) => string | null",
-                    "resolved": "(value: string) => string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom validation function run on top of the implicit validation performed\nby the browser. Return a string with the validation message to mark the\ninput as invalid, or null to mark it as valid."
-                },
-                "getter": false,
-                "setter": false
             }
         };
     }
-    static get states() {
-        return {
-            "ariaId": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "scoutInputChange",
-                "name": "scoutInputChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{\n    value: string;\n    element: HTMLInputElement;\n  }",
-                    "resolved": "{ value: string; element: HTMLInputElement; }",
-                    "references": {
-                        "HTMLInputElement": {
-                            "location": "global",
-                            "id": "global::HTMLInputElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "scoutBlur",
-                "name": "scoutBlur",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "_fieldId",
-                "name": "_fieldId",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Internal event used for form field association."
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }];
-    }
 }
 //# sourceMappingURL=input.js.map

package/dist/collection/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AA6BvB,MAAM,OAAO,UAAU;IACrB;;;;OAIG;IACK,IAAI,GAAc,MAAM,CAAC;IAEjC;;OAEG;IACK,SAAS,CAAa;IAE9B;;OAEG;IACK,OAAO,CAAU;IAEzB;;OAEG;IACK,KAAK,GAAW,EAAE,CAAC;IAEnB,IAAI,CAAS;IAErB;;;OAGG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC;;;;OAIG;IACK,QAAQ,CAAoC;IAE3C,gBAAgB,CAGtB;IACM,SAAS,CAAqB;IAEvC;;OAEG;IACM,QAAQ,CAAuB;IAE/B,MAAM,CAAS;IAExB,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QAC/D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IAED,OAAO,CAAC,KAAiB;QACvB,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAE/C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACrD,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC;QACnD,CAAC;QAED,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;YACzB,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,OAAO,EAAE,KAAK;SACf,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,8DACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,GACnC,CACH,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  type ComponentInterface,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nexport type InputType =\n  | \"text\"\n  | \"password\"\n  | \"email\"\n  | \"number\"\n  | \"tel\"\n  | \"url\"\n  // Hack to suggest above value but still allow any other string value\n  | (string & {});\n\nexport type InputMode =\n  | \"none\"\n  | \"text\"\n  | \"decimal\"\n  | \"numeric\"\n  | \"tel\"\n  | \"search\"\n  | \"email\"\n  | \"url\"\n  // Hack to suggest above value but still allow any other string value\n  | (string & {});\n\n@Component({\n  tag: \"scout-input\",\n  styleUrl: \"input.css\",\n  scoped: true,\n})\nexport class ScoutInput implements ComponentInterface {\n  /**\n   * Type of input element. If you need a number input, read the accessibility\n   * section of this MDN article first:\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility\n   */\n  @Prop() type: InputType = \"text\";\n\n  /**\n   * Input mode hints for devices with dynamic keyboards.\n   */\n  @Prop() inputmode?: InputMode;\n\n  /**\n   * Regex pattern for input validation.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Value of the input element, in case you want to control it yourself.\n   */\n  @Prop() value: string = \"\";\n\n  @Prop() name: string;\n\n  /**\n   * Whether the input is disabled. Disabled inputs are not editable, excluded\n   * from tab order and are not validated.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Custom validation function run on top of the implicit validation performed\n   * by the browser. Return a string with the validation message to mark the\n   * input as invalid, or null to mark it as valid.\n   */\n  @Prop() validate?: (value: string) => string | null;\n\n  @Event() scoutInputChange: EventEmitter<{\n    value: string;\n    element: HTMLInputElement;\n  }>;\n  @Event() scoutBlur: EventEmitter<void>;\n\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  @State() ariaId: string;\n\n  componentWillLoad(): Promise<void> | void {\n    this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n    this._fieldId.emit(this.ariaId);\n  }\n\n  onInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n\n    if (this.validate) {\n      const validationMessage = this.validate(input.value);\n      input.setCustomValidity(validationMessage ?? \"\");\n    }\n\n    this.scoutInputChange.emit({\n      value: input.value,\n      element: input,\n    });\n  }\n\n  render() {\n    return (\n      <input\n        id={this.ariaId}\n        type={this.type}\n        name={this.name}\n        inputMode={this.inputmode}\n        pattern={this.pattern}\n        class=\"input\"\n        value={this.value}\n        disabled={this.disabled}\n        onInput={(e) => this.onInput(e)}\n        onBlur={() => this.scoutBlur.emit()}\n      />\n    );\n  }\n}\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AA6BrD,MAAM,OAAO,UACX,SAAQ,KAAK,CAAC,UAAU,CAAC;;;;IAGzB;;;;OAIG;IACK,IAAI,GAAc,MAAM,CAAC;IAEjC;;OAEG;IACK,SAAS,CAAa;IAE9B;;OAEG;IACK,OAAO,CAAU;IAEzB;;OAEG;IACK,KAAK,GAAW,EAAE,CAAC;IAEnB,IAAI,CAAS;IAErB;;;OAGG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC,MAAM;QACJ,OAAO,CACL,8DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,EAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,GACjC,CACH,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  type ComponentInterface,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\nexport type InputType =\n  | \"text\"\n  | \"password\"\n  | \"email\"\n  | \"number\"\n  | \"tel\"\n  | \"url\"\n  // Hack to suggest above value but still allow any other string value\n  | (string & {});\n\nexport type InputMode =\n  | \"none\"\n  | \"text\"\n  | \"decimal\"\n  | \"numeric\"\n  | \"tel\"\n  | \"search\"\n  | \"email\"\n  | \"url\"\n  // Hack to suggest above value but still allow any other string value\n  | (string & {});\n\n@Component({\n  tag: \"scout-input\",\n  styleUrl: \"input.css\",\n  scoped: true,\n})\nexport class ScoutInput\n  extends Mixin(inputMixin)\n  implements ComponentInterface\n{\n  /**\n   * Type of input element. If you need a number input, read the accessibility\n   * section of this MDN article first:\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility\n   */\n  @Prop() type: InputType = \"text\";\n\n  /**\n   * Input mode hints for devices with dynamic keyboards.\n   */\n  @Prop() inputmode?: InputMode;\n\n  /**\n   * Regex pattern for input validation.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Value of the input element, in case you want to control it yourself.\n   */\n  @Prop() value: string = \"\";\n\n  @Prop() name: string;\n\n  /**\n   * Whether the input is disabled. Disabled inputs are not editable, excluded\n   * from tab order and are not validated.\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <input\n        ref={(el) => this.setInputRef(el)}\n        id={this.ariaId}\n        type={this.type}\n        name={this.name}\n        inputMode={this.inputmode}\n        pattern={this.pattern}\n        class=\"input\"\n        value={this.value}\n        disabled={this.disabled}\n        onInput={() => this.onInput()}\n        onBlur={() => this.onBlur()}\n        onInvalid={() => this.onInvalid()}\n      />\n    );\n  }\n}\n"]}

package/dist/collection/components/list-view/list-view.js

@@ -21,7 +21,7 @@ export class ScoutListView {
         }
     }
     render() {
-        return (h(Host, { key: 'b20a3a6e3ba31b390e99a31b144bf522057ca55c', role: "list" }, h("slot", { key: 'fb58eb9e354415f9ed01120206d5cb2b1be28ad0' })));
+        return (h(Host, { key: '4364bb39e10f23da20440461fea6a8d7a3274bcc', role: "list" }, h("slot", { key: '34f7de708ef874254477b8b82e54cad78db0da6c' })));
     }
     static get is() { return "scout-list-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list-view-item/list-view-item.js

@@ -26,7 +26,7 @@ export class ScoutListViewItem {
                     (this.target === "_blank" ? "noopener noreferrer" : undefined),
             }
             : {};
-        return (h(Host, { key: '9b9ac94836164ad6a375ee17086e39dec344509d', role: "listitem" }, h(Tag, { key: '302cd52b48fec498897cce4d681ef77592038ba4', class: "button", ...linkProps, onClick: () => this.scoutClick.emit() }, this.getPrefix(), this.getContent(), this.getSuffix())));
+        return (h(Host, { key: '413bfec2ce5b069cb065b25e6a388b87d9bf972d', role: "listitem" }, h(Tag, { key: '8bd4978a887d2769bf537d7cf74fc02772055144', class: "button", ...linkProps, onClick: () => this.scoutClick.emit() }, this.getPrefix(), this.getContent(), this.getSuffix())));
     }
     getPrefix() {
         if (!this.icon) {

package/dist/collection/components/list-view-subheader/list-view-subheader.js

@@ -3,7 +3,7 @@ export class ScoutListViewSubheader {
     text;
     headingLevel = "h2";
     render() {
-        return (h(Host, { key: '6fcadbd85c81d7772d4ceb4ecd67f0f3ad1f2f87', role: "listitem" }, h(this.headingLevel, { key: 'f81481cbb344b07ae1599a7dfcac010b3eeccea1', class: "heading" }, this.text)));
+        return (h(Host, { key: '5ff0f60b511992241c5dacc25bd2ede127180da5', role: "listitem" }, h(this.headingLevel, { key: 'e857ca6fd07f98e379ade3efab9b7638a69ef184', class: "heading" }, this.text)));
     }
     static get is() { return "scout-list-view-subheader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/loader/loader.js

@@ -22,7 +22,7 @@ export class ScoutLoader {
         this.showElement(this.symbolElements[0]);
     }
     render() {
-        return (h(Host, { key: 'b9271e02a57961fde6499c9e1cf2b32727631056', class: this.size === "base" ? "" : this.size }, h("div", { key: 'c0758b7d7b47bf97a5358d2df48d7518b899cb71', class: "frame" }, this.getSymbols()), this.text && h("div", { key: '9bcdf6093442c1a284a8b4de759b0b92f4df39d0', class: "text" }, this.text)));
+        return (h(Host, { key: 'cb49f1cfa8fcf2b816da9442270724f90b5aa724', class: this.size === "base" ? "" : this.size }, h("div", { key: '9ce230b2839d37172359d3642dcd1ec87471d870', class: "frame" }, this.getSymbols()), this.text && h("div", { key: 'f79e4f64ad2ee471a39c49dc2237a8f7173bbeaf', class: "text" }, this.text)));
     }
     showElement(el) {
         el.classList.remove("animate-out");

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

@@ -1,5 +1,9 @@
-import { h, } from "@stencil/core";
-export class ScoutRadioButton {
+import { h, Mixin, } from "@stencil/core";
+import { inputMixin } from "../../mixins/inputMixin";
+export class ScoutRadioButton extends Mixin(inputMixin) {
+    constructor() {
+        super();
+    }
     checked = false;
     disabled = false;
     /**
@@ -9,16 +13,7 @@ export class ScoutRadioButton {
     label;
     value;
     name;
-    ariaId;
     scoutChecked;
-    /**
-     * Internal event used for form field association.
-     */
-    _fieldId;
-    componentWillLoad() {
-        this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;
-        this._fieldId.emit(this.ariaId);
-    }
     onChange(event) {
         const radio = event.target;
         this.scoutChecked.emit({
@@ -28,7 +23,10 @@ export class ScoutRadioButton {
     }
     render() {
         const Tag = this.label?.length ? "label" : "div";
-        return (h(Tag, { key: 'a978ba978936bd837827aa505316b4fab2cfd1b0' }, h("input", { key: 'c378f179764d7b3f78da354c022bbb7dcddd758a', id: this.ariaId, type: "radio", value: this.value, name: this.name, class: "radio", "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => this.onChange(event) }), this.label));
+        return (h(Tag, { key: '0ce220559e5097e536928a27273f683600ee305b' }, h("input", { key: 'cb844c7a4751184aa253f73fca67211049f19a01', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "radio", value: this.value, name: this.name, class: "radio", "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => {
+                this.onInput();
+                this.onChange(event);
+            }, onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }), this.label));
     }
     static get is() { return "scout-radio-button"; }
     static get encapsulation() { return "scoped"; }
@@ -162,11 +160,6 @@ export class ScoutRadioButton {
             }
         };
     }
-    static get states() {
-        return {
-            "ariaId": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "scoutChecked",
@@ -188,21 +181,6 @@ export class ScoutRadioButton {
                         }
                     }
                 }
-            }, {
-                "method": "_fieldId",
-                "name": "_fieldId",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Internal event used for form field association."
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,gBAAgB;IACnB,OAAO,GAAY,KAAK,CAAC;IAEzB,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,cAAc,CAAS;IAEvB,KAAK,CAAS;IAEd,KAAK,CAAS;IAEd,IAAI,CAAS;IAEZ,MAAM,CAAS;IAEf,YAAY,CAGlB;IACH;;OAEG;IACM,QAAQ,CAAuB;IAExC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QAC/D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IAED,QAAQ,CAAC,KAAY;QACnB,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAE/C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,OAAO,EAAE,KAAK;SACf,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QACjD,OAAO,CACL,EAAC,GAAG;YACF,8DACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,OAAO,qBACI,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GACzC;YACD,IAAI,CAAC,KAAK,CACP,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-radio-button\",\n  styleUrl: \"radio-button.css\",\n  scoped: true,\n})\nexport class ScoutRadioButton {\n  @Prop() checked: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your radio button with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @Prop() value: string;\n\n  @Prop() name: string;\n\n  @State() ariaId: string;\n\n  @Event() scoutChecked: EventEmitter<{\n    checked: boolean;\n    element: HTMLInputElement;\n  }>;\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  componentWillLoad(): Promise<void> | void {\n    this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n    this._fieldId.emit(this.ariaId);\n  }\n\n  onChange(event: Event) {\n    const radio = event.target as HTMLInputElement;\n\n    this.scoutChecked.emit({\n      checked: radio.checked,\n      element: radio,\n    });\n  }\n\n  render() {\n    const Tag = this.label?.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        <input\n          id={this.ariaId}\n          type=\"radio\"\n          value={this.value}\n          name={this.name}\n          class=\"radio\"\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.checked}\n          onChange={(event) => this.onChange(event)}\n        />\n        {this.label}\n      </Tag>\n    );\n  }\n}\n"]}
+{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAOrD,MAAM,OAAO,gBACX,SAAQ,KAAK,CAAC,UAAU,CAAC;;;;IAGjB,OAAO,GAAY,KAAK,CAAC;IAEzB,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,cAAc,CAAS;IAEvB,KAAK,CAAS;IAEd,KAAK,CAAS;IAEd,IAAI,CAAS;IAEZ,YAAY,CAGlB;IAEH,QAAQ,CAAC,KAAY;QACnB,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAE/C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,OAAO,EAAE,KAAK;SACf,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QACjD,OAAO,CACL,EAAC,GAAG;YACF,8DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,OAAO,qBACI,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,IAAI,CAAC,OAAO,EAAE,CAAC;oBACf,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,GACjC;YACD,IAAI,CAAC,KAAK,CACP,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  type ComponentInterface,\n  Event,\n  type EventEmitter,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n@Component({\n  tag: \"scout-radio-button\",\n  styleUrl: \"radio-button.css\",\n  scoped: true,\n})\nexport class ScoutRadioButton\n  extends Mixin(inputMixin)\n  implements ComponentInterface\n{\n  @Prop() checked: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your radio button with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @Prop() value: string;\n\n  @Prop() name: string;\n\n  @Event() scoutChecked: EventEmitter<{\n    checked: boolean;\n    element: HTMLInputElement;\n  }>;\n\n  onChange(event: Event) {\n    const radio = event.target as HTMLInputElement;\n\n    this.scoutChecked.emit({\n      checked: radio.checked,\n      element: radio,\n    });\n  }\n\n  render() {\n    const Tag = this.label?.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        <input\n          ref={(el) => this.setInputRef(el)}\n          id={this.ariaId}\n          type=\"radio\"\n          value={this.value}\n          name={this.name}\n          class=\"radio\"\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.checked}\n          onChange={(event) => {\n            this.onInput();\n            this.onChange(event);\n          }}\n          onBlur={() => this.onBlur()}\n          onInvalid={() => this.onInvalid()}\n        />\n        {this.label}\n      </Tag>\n    );\n  }\n}\n"]}

package/dist/collection/components/select/select.js

@@ -1,6 +1,10 @@
-import { h, } from "@stencil/core";
+import { h, Mixin, } from "@stencil/core";
 import chevronIcon from "@tabler/icons/outline/chevron-down.svg";
-export class ScoutSelect {
+import { inputMixin } from "../../mixins/inputMixin";
+export class ScoutSelect extends Mixin(inputMixin) {
+    constructor() {
+        super();
+    }
     /**
      * Value of the select element, in case you want to control it yourself.
      */
@@ -11,36 +15,8 @@ export class ScoutSelect {
      */
     disabled = false;
     name;
-    /**
-     * Custom validation function run on top of the implicit validation performed
-     * by the browser. Return a string with the validation message to mark the
-     * select as invalid, or null to mark it as valid.
-     */
-    validate;
-    scoutInputChange;
-    scoutBlur;
-    /**
-     * Internal event used for form field association.
-     */
-    _fieldId;
-    ariaId;
-    componentWillLoad() {
-        this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;
-        this._fieldId.emit(this.ariaId);
-    }
-    onChange(event) {
-        const select = event.target;
-        if (this.validate) {
-            const validationMessage = this.validate(select.value);
-            select.setCustomValidity(validationMessage ?? "");
-        }
-        this.scoutInputChange.emit({
-            value: select.value,
-            element: select,
-        });
-    }
     render() {
-        return (h("div", { key: '5bba54c38010733ba9ef287c593fa4066205bffb', class: "select-wrapper" }, h("select", { key: '7511046af718d6ab2ff55cdccfbb9e218aa5fb10', id: this.ariaId, name: this.name, class: "select", disabled: this.disabled, onChange: (e) => this.onChange(e), onBlur: () => this.scoutBlur.emit() }, h("slot", { key: '51010cc2a853b5f4b85bcf474578460f16566819' })), h("span", { key: 'd424bbcf3fc441849534b861520843148eb0e478', class: "select-icon", style: { "--icon-chevron": `url(${chevronIcon})` }, "aria-hidden": "true" })));
+        return (h("div", { key: 'df8da542b4f1b6a90c1899ae2ebe3f1c24328d82', class: "select-wrapper" }, h("select", { key: 'ece339ed62a6395c282766f534a0290a25e10f03', id: this.ariaId, name: this.name, class: "select", disabled: this.disabled, onChange: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }, h("slot", { key: '53baa52177e1a72c4b0f40ceda8f5de227958c38' })), h("span", { key: 'b19185c3f2152e3ee4abcab0e61c1a9f17fa2442', class: "select-icon", style: { "--icon-chevron": `url(${chevronIcon})` }, "aria-hidden": "true" })));
     }
     static get is() { return "scout-select"; }
     static get encapsulation() { return "scoped"; }
@@ -114,83 +90,8 @@ export class ScoutSelect {
                 "setter": false,
                 "reflect": false,
                 "attribute": "name"
-            },
-            "validate": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(value: string) => string | null",
-                    "resolved": "(value: string) => string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom validation function run on top of the implicit validation performed\nby the browser. Return a string with the validation message to mark the\nselect as invalid, or null to mark it as valid."
-                },
-                "getter": false,
-                "setter": false
             }
         };
     }
-    static get states() {
-        return {
-            "ariaId": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "scoutInputChange",
-                "name": "scoutInputChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{\n    value: string;\n    element: HTMLSelectElement;\n  }",
-                    "resolved": "{ value: string; element: HTMLSelectElement; }",
-                    "references": {
-                        "HTMLSelectElement": {
-                            "location": "global",
-                            "id": "global::HTMLSelectElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "scoutBlur",
-                "name": "scoutBlur",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "_fieldId",
-                "name": "_fieldId",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Internal event used for form field association."
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }];
-    }
 }
 //# sourceMappingURL=select.js.map

package/dist/collection/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,WAAW,MAAM,wCAAwC,CAAC;AAOjE,MAAM,OAAO,WAAW;IACtB;;OAEG;IACK,KAAK,GAAW,EAAE,CAAC;IAE3B;;;OAGG;IACK,QAAQ,GAAY,KAAK,CAAC;IAE1B,IAAI,CAAS;IAErB;;;;OAIG;IACK,QAAQ,CAAoC;IAE3C,gBAAgB,CAGtB;IACM,SAAS,CAAqB;IAEvC;;OAEG;IACM,QAAQ,CAAuB;IAE/B,MAAM,CAAS;IAExB,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QAC/D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IAED,QAAQ,CAAC,KAAY;QACnB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B,CAAC;QAEjD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACtD,MAAM,CAAC,iBAAiB,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC;QACpD,CAAC;QAED,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;YACzB,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,OAAO,EAAE,MAAM;SAChB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,gBAAgB;YACzB,+DACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EACjC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;gBAEnC,8DAAQ,CACD;YACT,6DACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,gBAAgB,EAAE,OAAO,WAAW,GAAG,EAAE,iBACtC,MAAM,GAClB,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  type ComponentInterface,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport chevronIcon from \"@tabler/icons/outline/chevron-down.svg\";\n\n@Component({\n  tag: \"scout-select\",\n  styleUrl: \"select.css\",\n  scoped: true,\n})\nexport class ScoutSelect implements ComponentInterface {\n  /**\n   * Value of the select element, in case you want to control it yourself.\n   */\n  @Prop() value: string = \"\";\n\n  /**\n   * Whether the select is disabled. Disabled selects are not editable, excluded\n   * from tab order and are not validated.\n   */\n  @Prop() disabled: boolean = false;\n\n  @Prop() name: string;\n\n  /**\n   * Custom validation function run on top of the implicit validation performed\n   * by the browser. Return a string with the validation message to mark the\n   * select as invalid, or null to mark it as valid.\n   */\n  @Prop() validate?: (value: string) => string | null;\n\n  @Event() scoutInputChange: EventEmitter<{\n    value: string;\n    element: HTMLSelectElement;\n  }>;\n  @Event() scoutBlur: EventEmitter<void>;\n\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  @State() ariaId: string;\n\n  componentWillLoad(): Promise<void> | void {\n    this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n    this._fieldId.emit(this.ariaId);\n  }\n\n  onChange(event: Event) {\n    const select = event.target as HTMLSelectElement;\n\n    if (this.validate) {\n      const validationMessage = this.validate(select.value);\n      select.setCustomValidity(validationMessage ?? \"\");\n    }\n\n    this.scoutInputChange.emit({\n      value: select.value,\n      element: select,\n    });\n  }\n\n  render() {\n    return (\n      <div class=\"select-wrapper\">\n        <select\n          id={this.ariaId}\n          name={this.name}\n          class=\"select\"\n          disabled={this.disabled}\n          onChange={(e) => this.onChange(e)}\n          onBlur={() => this.scoutBlur.emit()}\n        >\n          <slot />\n        </select>\n        <span\n          class=\"select-icon\"\n          style={{ \"--icon-chevron\": `url(${chevronIcon})` }}\n          aria-hidden=\"true\"\n        />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,WAAW,MAAM,wCAAwC,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAOrD,MAAM,OAAO,WACX,SAAQ,KAAK,CAAC,UAAU,CAAC;;;;IAGzB;;OAEG;IACK,KAAK,GAAW,EAAE,CAAC;IAE3B;;;OAGG;IACK,QAAQ,GAAY,KAAK,CAAC;IAE1B,IAAI,CAAS;IAErB,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,gBAAgB;YACzB,+DACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,EAC9B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;gBAEjC,8DAAQ,CACD;YACT,6DACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,gBAAgB,EAAE,OAAO,WAAW,GAAG,EAAE,iBACtC,MAAM,GAClB,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  type ComponentInterface,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport chevronIcon from \"@tabler/icons/outline/chevron-down.svg\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n@Component({\n  tag: \"scout-select\",\n  styleUrl: \"select.css\",\n  scoped: true,\n})\nexport class ScoutSelect\n  extends Mixin(inputMixin)\n  implements ComponentInterface\n{\n  /**\n   * Value of the select element, in case you want to control it yourself.\n   */\n  @Prop() value: string = \"\";\n\n  /**\n   * Whether the select is disabled. Disabled selects are not editable, excluded\n   * from tab order and are not validated.\n   */\n  @Prop() disabled: boolean = false;\n\n  @Prop() name: string;\n\n  render() {\n    return (\n      <div class=\"select-wrapper\">\n        <select\n          id={this.ariaId}\n          name={this.name}\n          class=\"select\"\n          disabled={this.disabled}\n          onChange={() => this.onInput()}\n          onBlur={() => this.onBlur()}\n          onInvalid={() => this.onInvalid()}\n        >\n          <slot />\n        </select>\n        <span\n          class=\"select-icon\"\n          style={{ \"--icon-chevron\": `url(${chevronIcon})` }}\n          aria-hidden=\"true\"\n        />\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/stack/stack.js

@@ -18,10 +18,10 @@ export class ScoutStack {
      */
     gapSize = "m";
     render() {
-        return (h(Host, { key: 'dabece4a23517d780be9002ec7387d986594d417', style: {
+        return (h(Host, { key: '46f8dfbf3721fe377297d936ea07595e85b933a3', style: {
                 "--stack-flex-direction": `${this.direction}`,
                 "--stack-gap-spacing": `var(--spacing-${GapSizeValues[this.gapSize]})`,
-            } }, h("slot", { key: 'b11e549495e7f04a8350fb6981c9fb32b940efdc' })));
+            } }, h("slot", { key: '9d0a64fbc02da0960e96293696e77a7688af7132' })));
     }
     static get is() { return "scout-stack"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/switch/switch.css

@@ -1,12 +1,12 @@
 .switch {
-  width: var(--spacing-12);
+  width: var(--spacing-10);
   height: var(--spacing-6);
   -moz-appearance: none;
        appearance: none;
   -webkit-appearance: none;
   border-radius: var(--spacing-8);
   background-color: var(--color-text-brand-inverse);
-  border: 1px solid var(--color-gray-300);
+  border: 2px solid var(--color-gray-300);
   position: relative;
   display: flex;
   align-content: center;
@@ -15,7 +15,8 @@
   transition-duration: 0.3s;
   transition-timing-function: ease-in-out;
   cursor: pointer;
-  --switch-ball-size: calc((var(--spacing-6) - var(--spacing-1) / 2) + 1px);
+  --switch-ball-padding: calc(var(--spacing-1) / 4);
+  --switch-ball-size: calc(var(--spacing-5) - var(--switch-ball-padding) * 2);
 }
 
 .switch:hover {
@@ -43,8 +44,8 @@
   height: var(--switch-ball-size);
   border-radius: 50%;
   position: absolute;
-  left: -1px;
-  right: 0;
+  top: var(--switch-ball-padding);
+  left: var(--switch-ball-padding);
   transition-duration: 0.3s;
   transition-property: left, right;
 }
@@ -52,8 +53,8 @@
 .switch:checked::before {
   content: "";
   background-color: var(--color-background-brand-base);
-  left: calc(100% - (var(--spacing-6) - var(--spacing-1) / 2) + 1px);
-  left: calc(100% - calc(var(--spacing-6) - var(--spacing-1) / 2) + 1px);
+  left: calc(100% - (var(--switch-ball-size) + var(--switch-ball-padding)));
+  left: calc(100% - calc(var(--switch-ball-size) + var(--switch-ball-padding)));
 }
 
 .switch:disabled {

package/dist/collection/components/switch/switch.js

@@ -1,5 +1,9 @@
-import { h, } from "@stencil/core";
-export class ScoutSwitch {
+import { h, Mixin, } from "@stencil/core";
+import { inputMixin } from "../../mixins/inputMixin";
+export class ScoutSwitch extends Mixin(inputMixin) {
+    constructor() {
+        super();
+    }
     /**
      * Indicates whether the switch is toggled on or off.
      */
@@ -10,26 +14,20 @@ export class ScoutSwitch {
      */
     ariaLabelledby;
     label;
-    ariaId;
-    scoutSwitchToggled;
-    /**
-     * Internal event used for form field association.
-     */
-    _fieldId;
-    componentWillLoad() {
-        this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;
-        this._fieldId.emit(this.ariaId);
-    }
-    onClick(event) {
-        const switchElement = event.target;
-        this.scoutSwitchToggled.emit({
-            toggled: switchElement.checked,
-            element: switchElement,
+    scoutChecked;
+    onChange(event) {
+        const checkbox = event.target;
+        this.scoutChecked.emit({
+            checked: checkbox.checked,
+            element: checkbox,
         });
     }
     render() {
         const Tag = this.label?.length ? "label" : "div";
-        return (h(Tag, { key: 'faa6584a6fc9fb985a8c638dd6ea367e0d12b07e' }, this.label, h("span", { key: 'be4cef9603df7b632368d1ac916b4feb62cb4ab0', class: "inlineDivider" }), h("input", { key: '56ab1692bdf10e8767d8de3cd70949d2d55b8fe9', class: "switch", onChange: (event) => this.onClick(event), type: "checkbox", id: this.ariaId, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.toggled })));
+        return (h(Tag, { key: '3df6f0be2cbb14fa4ad4ce777324960365ea5d68' }, this.label, h("span", { key: 'bbf999533051b967807f18f6d165a9b916a87252', class: "inlineDivider" }), h("input", { key: '8280933ed1b9038edcd8fb9bad39bef5745d4403', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "checkbox", class: "switch", "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.toggled, onChange: (event) => {
+                this.onInput();
+                this.onChange(event);
+            }, onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() })));
     }
     static get is() { return "scout-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -126,15 +124,10 @@ export class ScoutSwitch {
             }
         };
     }
-    static get states() {
-        return {
-            "ariaId": {}
-        };
-    }
     static get events() {
         return [{
-                "method": "scoutSwitchToggled",
-                "name": "scoutSwitchToggled",
+                "method": "scoutChecked",
+                "name": "scoutChecked",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -143,8 +136,8 @@ export class ScoutSwitch {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{\n    toggled: boolean;\n    element: HTMLInputElement;\n  }",
-                    "resolved": "{ toggled: boolean; element: HTMLInputElement; }",
+                    "original": "{\n    checked: boolean;\n    element: HTMLInputElement;\n  }",
+                    "resolved": "{ checked: boolean; element: HTMLInputElement; }",
                     "references": {
                         "HTMLInputElement": {
                             "location": "global",
@@ -152,21 +145,6 @@ export class ScoutSwitch {
                         }
                     }
                 }
-            }, {
-                "method": "_fieldId",
-                "name": "_fieldId",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Internal event used for form field association."
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
             }];
     }
 }

package/dist/collection/components/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AASvB,MAAM,OAAO,WAAW;IACtB;;OAEG;IACK,OAAO,GAAY,KAAK,CAAC;IAEzB,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,cAAc,CAAS;IAEvB,KAAK,CAAS;IAEb,MAAM,CAAS;IAEf,kBAAkB,CAGxB;IACH;;OAEG;IACM,QAAQ,CAAuB;IAExC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QAC/D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IAED,OAAO,CAAC,KAAY;QAClB,MAAM,aAAa,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEvD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;YAC3B,OAAO,EAAE,aAAa,CAAC,OAAO;YAC9B,OAAO,EAAE,aAAa;SACvB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QACjD,OAAO,CACL,EAAC,GAAG;YACD,IAAI,CAAC,KAAK;YACX,6DAAM,KAAK,EAAC,eAAe,GAAQ;YACnC,8DACE,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACxC,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,MAAM,qBACE,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-switch\",\n  styleUrl: \"switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutSwitch {\n  /**\n   * Indicates whether the switch is toggled on or off.\n   */\n  @Prop() toggled: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your switch with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @State() ariaId: string;\n\n  @Event() scoutSwitchToggled: EventEmitter<{\n    toggled: boolean;\n    element: HTMLInputElement;\n  }>;\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  componentWillLoad(): Promise<void> | void {\n    this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n    this._fieldId.emit(this.ariaId);\n  }\n\n  onClick(event: Event) {\n    const switchElement = event.target as HTMLInputElement;\n\n    this.scoutSwitchToggled.emit({\n      toggled: switchElement.checked,\n      element: switchElement,\n    });\n  }\n\n  render() {\n    const Tag = this.label?.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        {this.label}\n        <span class=\"inlineDivider\"></span>\n        <input\n          class=\"switch\"\n          onChange={(event) => this.onClick(event)}\n          type=\"checkbox\"\n          id={this.ariaId}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.toggled}\n        />\n      </Tag>\n    );\n  }\n}\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AASrD,MAAM,OAAO,WACX,SAAQ,KAAK,CAAC,UAAU,CAAC;;;;IAGzB;;OAEG;IACK,OAAO,GAAY,KAAK,CAAC;IAEzB,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,cAAc,CAAS;IAEvB,KAAK,CAAS;IAEb,YAAY,CAGlB;IAEH,QAAQ,CAAC,KAAY;QACnB,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B,CAAC;QAElD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,QAAQ,CAAC,OAAO;YACzB,OAAO,EAAE,QAAQ;SAClB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QACjD,OAAO,CACL,EAAC,GAAG;YACD,IAAI,CAAC,KAAK;YACX,6DAAM,KAAK,EAAC,eAAe,GAAQ;YACnC,8DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,QAAQ,qBACG,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,IAAI,CAAC,OAAO,EAAE,CAAC;oBACf,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,GACjC,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  type ComponentInterface,\n  Event,\n  type EventEmitter,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n@Component({\n  tag: \"scout-switch\",\n  styleUrl: \"switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutSwitch\n  extends Mixin(inputMixin)\n  implements ComponentInterface\n{\n  /**\n   * Indicates whether the switch is toggled on or off.\n   */\n  @Prop() toggled: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your switch with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @Event() scoutChecked: EventEmitter<{\n    checked: boolean;\n    element: HTMLInputElement;\n  }>;\n\n  onChange(event: Event) {\n    const checkbox = event.target as HTMLInputElement;\n\n    this.scoutChecked.emit({\n      checked: checkbox.checked,\n      element: checkbox,\n    });\n  }\n\n  render() {\n    const Tag = this.label?.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        {this.label}\n        <span class=\"inlineDivider\"></span>\n        <input\n          ref={(el) => this.setInputRef(el)}\n          id={this.ariaId}\n          type=\"checkbox\"\n          class=\"switch\"\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.toggled}\n          onChange={(event) => {\n            this.onInput();\n            this.onChange(event);\n          }}\n          onBlur={() => this.onBlur()}\n          onInvalid={() => this.onInvalid()}\n        />\n      </Tag>\n    );\n  }\n}\n"]}