@scouterna/ui-webc 2.1.0 → 2.2.1

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

@@ -0,0 +1,18 @@
+/** biome-ignore-all lint/complexity/noImportantStyles: https://github.com/tailwindlabs/tailwindcss/discussions/18628#discussioncomment-13915195 */
+
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) !important;
+  border: none !important;
+  background-color: transparent;
+}
+
+.heading {
+  margin: 0;
+  padding: 0;
+  font: var(--type-body-sm);
+  color: var(--color-text-base);
+  font-weight: 500;
+}

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

@@ -0,0 +1,65 @@
+import { Host, h } from "@stencil/core";
+export class ScoutListViewSubheader {
+    text;
+    headingLevel = "h2";
+    render() {
+        return (h(Host, { key: '6fcadbd85c81d7772d4ceb4ecd67f0f3ad1f2f87', role: "listitem" }, h(this.headingLevel, { key: 'f81481cbb344b07ae1599a7dfcac010b3eeccea1', class: "heading" }, this.text)));
+    }
+    static get is() { return "scout-list-view-subheader"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["list-view-subheader.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["list-view-subheader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text"
+            },
+            "headingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading-level",
+                "defaultValue": "\"h2\""
+            }
+        };
+    }
+}
+//# sourceMappingURL=list-view-subheader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-view-subheader.js","sourceRoot":"","sources":["../../../src/components/list-view-subheader/list-view-subheader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASzD,MAAM,OAAO,sBAAsB;IACzB,IAAI,CAAS;IACb,YAAY,GAA4C,IAAI,CAAC;IAErE,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,EAAC,IAAI,CAAC,YAAY,qDAAC,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,IAAI,CAAqB,CAC7D,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-list-view-subheader\",\n  styleUrl: \"list-view-subheader.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutListViewSubheader {\n  @Prop() text: string;\n  @Prop() headingLevel: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h2\";\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <this.headingLevel class=\"heading\">{this.text}</this.headingLevel>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/loader/loader.css

@@ -94,13 +94,11 @@
 }
 
 @keyframes fade-in {
-
   0%,
   50% {
     opacity: 0;
   }
 
-
   80%,
   100% {
     opacity: 1;
@@ -108,7 +106,6 @@
 }
 
 @keyframes fade-out {
-
   0%,
   40% {
     opacity: 1;
@@ -118,4 +115,4 @@
   100% {
     opacity: 0;
   }
-}
+}

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

@@ -22,7 +22,7 @@ export class ScoutLoader {
         this.showElement(this.symbolElements[0]);
     }
     render() {
-        return (h(Host, { key: '7a6e9a17459a3accf01b6798786f3eb7622f904f', class: this.size === 'base' ? '' : this.size }, h("div", { key: '1f04ba7a74b0a8d0292269e7784873670ecdddbe', class: "frame" }, this.getSymbols()), this.text && h("div", { key: '08c9bb14cd5aab83b66c18f1bc2509e6063f6c02', class: "text" }, this.text)));
+        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)));
     }
     showElement(el) {
         el.classList.remove("animate-out");

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

@@ -1 +1 @@
-{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../../src/components/loader/loader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  type ComponentInterface,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport SymbolAdventurer from \"./symbols/adventurer.svg\";\nimport SymbolChallenger from \"./symbols/challenger.svg\";\nimport SymbolDiscoverer from \"./symbols/discoverer.svg\";\nimport SymbolFamilyScout from \"./symbols/family-scout.svg\";\nimport SymbolRover from \"./symbols/rover.svg\";\nimport SymbolTracker from \"./symbols/tracker.svg\";\n\n@Component({\n  tag: \"scout-loader\",\n  styleUrl: \"loader.css\",\n  shadow: true,\n})\nexport class ScoutLoader implements ComponentInterface {\n  @Prop() text?: string;\n  @Prop() size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\" = \"base\";\n\n  private symbols = [\n    SymbolFamilyScout,\n    SymbolTracker,\n    SymbolDiscoverer,\n    SymbolAdventurer,\n    SymbolChallenger,\n    SymbolRover,\n  ];\n\n  private symbolElements: HTMLDivElement[] = new Array(this.symbols.length);\n\n  private currentSymbolIndex = 1;\n\n  componentDidLoad(): void {\n    this.showElement(this.symbolElements[0]);\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.size === 'base' ? '' : this.size}\n      >\n        <div class=\"frame\">{this.getSymbols()}</div>\n        {this.text && <div class=\"text\">{this.text}</div>}\n      </Host>\n    );\n  }\n\n  showElement(el: HTMLDivElement) {\n    el.classList.remove(\"animate-out\");\n    el.classList.add(\"animate-in\");\n  }\n\n  hideElement(el: HTMLDivElement) {\n    el.classList.remove(\"animate-in\");\n    el.classList.add(\"animate-out\");\n  }\n\n  next() {\n    const currIndex = this.currentSymbolIndex;\n    const prevIndex =\n      (currIndex - 1 + this.symbols.length) % this.symbols.length;\n\n    this.showElement(this.symbolElements[currIndex]);\n    this.hideElement(this.symbolElements[prevIndex]);\n\n    this.currentSymbolIndex += 1;\n    if (this.currentSymbolIndex >= this.symbols.length) {\n      this.currentSymbolIndex = 0;\n    }\n  }\n\n  tickDone(event: AnimationEvent) {\n    if (event.animationName === \"slide-in\") {\n      this.next();\n    }\n  }\n\n  getSymbols() {\n    return this.symbols.map((symbol, index) => (\n      <div\n        ref={(el) => {\n          this.symbolElements[index] = el;\n        }}\n        class=\"symbol\"\n        style={{ \"--symbol\": `url(${symbol})` }}\n        onAnimationEnd={(event) => this.tickDone(event)}\n      />\n    ));\n  }\n}\n"]}
+{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../../src/components/loader/loader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  type ComponentInterface,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport SymbolAdventurer from \"./symbols/adventurer.svg\";\nimport SymbolChallenger from \"./symbols/challenger.svg\";\nimport SymbolDiscoverer from \"./symbols/discoverer.svg\";\nimport SymbolFamilyScout from \"./symbols/family-scout.svg\";\nimport SymbolRover from \"./symbols/rover.svg\";\nimport SymbolTracker from \"./symbols/tracker.svg\";\n\n@Component({\n  tag: \"scout-loader\",\n  styleUrl: \"loader.css\",\n  shadow: true,\n})\nexport class ScoutLoader implements ComponentInterface {\n  @Prop() text?: string;\n  @Prop() size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\" = \"base\";\n\n  private symbols = [\n    SymbolFamilyScout,\n    SymbolTracker,\n    SymbolDiscoverer,\n    SymbolAdventurer,\n    SymbolChallenger,\n    SymbolRover,\n  ];\n\n  private symbolElements: HTMLDivElement[] = new Array(this.symbols.length);\n\n  private currentSymbolIndex = 1;\n\n  componentDidLoad(): void {\n    this.showElement(this.symbolElements[0]);\n  }\n\n  render() {\n    return (\n      <Host class={this.size === \"base\" ? \"\" : this.size}>\n        <div class=\"frame\">{this.getSymbols()}</div>\n        {this.text && <div class=\"text\">{this.text}</div>}\n      </Host>\n    );\n  }\n\n  showElement(el: HTMLDivElement) {\n    el.classList.remove(\"animate-out\");\n    el.classList.add(\"animate-in\");\n  }\n\n  hideElement(el: HTMLDivElement) {\n    el.classList.remove(\"animate-in\");\n    el.classList.add(\"animate-out\");\n  }\n\n  next() {\n    const currIndex = this.currentSymbolIndex;\n    const prevIndex =\n      (currIndex - 1 + this.symbols.length) % this.symbols.length;\n\n    this.showElement(this.symbolElements[currIndex]);\n    this.hideElement(this.symbolElements[prevIndex]);\n\n    this.currentSymbolIndex += 1;\n    if (this.currentSymbolIndex >= this.symbols.length) {\n      this.currentSymbolIndex = 0;\n    }\n  }\n\n  tickDone(event: AnimationEvent) {\n    if (event.animationName === \"slide-in\") {\n      this.next();\n    }\n  }\n\n  getSymbols() {\n    return this.symbols.map((symbol, index) => (\n      <div\n        ref={(el) => {\n          this.symbolElements[index] = el;\n        }}\n        class=\"symbol\"\n        style={{ \"--symbol\": `url(${symbol})` }}\n        onAnimationEnd={(event) => this.tickDone(event)}\n      />\n    ));\n  }\n}\n"]}

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

@@ -0,0 +1,73 @@
+.radio {
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  -moz-appearance: none;
+       appearance: none;
+  -webkit-appearance: none;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  border-radius: 100%;
+  background-color: var(--color-white);
+  border: 2px solid var(--color-gray-300);
+  position: relative;
+}
+
+.radio:hover {
+  border: 2px solid var(--color-gray-400);
+  box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);
+  cursor: pointer;
+}
+
+.radio:active {
+  background-color: var(--color-background-brand-subtle-pressed);
+}
+
+.radio:checked:hover {
+  border-color: var(--color-background-brand-hovered);
+  box-shadow: none;
+}
+
+.radio:checked:hover::before {
+  background-color: var(--color-background-brand-hovered);
+}
+
+.radio:checked {
+  border-color: var(--color-background-brand-base);
+}
+
+.radio::after {
+  content: "";
+  position: absolute;
+  width: var(--spacing-10);
+  height: var(--spacing-10);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.radio:checked::before {
+  content: "";
+  background-color: var(--color-background-brand-base);
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 100%;
+}
+
+.radio:disabled {
+  pointer-events: none;
+  background-color: var(--color-gray-100);
+  border-color: var(--color-gray-100);
+}
+
+label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  font: var(--type-label-base);
+  color: var(--color-text-base);
+}

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

@@ -0,0 +1,209 @@
+import { h, } from "@stencil/core";
+export class ScoutRadioButton {
+    checked = false;
+    disabled = false;
+    /**
+     * Use this prop if you need to connect your radio button with another element describing its use, other than the property label.
+     */
+    ariaLabelledby;
+    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({
+            checked: radio.checked,
+            element: radio,
+        });
+    }
+    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));
+    }
+    static get is() { return "scout-radio-button"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "ariaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this prop if you need to connect your radio button with another element describing its use, other than the property label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-labelledby"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "ariaId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "scoutChecked",
+                "name": "scoutChecked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    checked: boolean;\n    element: HTMLInputElement;\n  }",
+                    "resolved": "{ checked: boolean; element: HTMLInputElement; }",
+                    "references": {
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    }
+                }
+            }, {
+                "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=radio-button.js.map

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

@@ -0,0 +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"]}

package/dist/collection/components/select/select.css

@@ -57,4 +57,3 @@
 .select:disabled + .select-icon {
   background-color: var(--color-gray-500);
 }
-

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

@@ -10,6 +10,7 @@ export class ScoutSelect {
      * from tab order and are not validated.
      */
     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
@@ -39,7 +40,7 @@ export class ScoutSelect {
         });
     }
     render() {
-        return (h("div", { key: '15cee7e9e9c6f0cc9972eede3f81c7f2431b087f', class: "select-wrapper" }, h("select", { key: '926e4c7435ae44f85cb3ce3d9b097491c430f26a', id: this.ariaId, class: "select", disabled: this.disabled, onChange: (e) => this.onChange(e), onBlur: () => this.scoutBlur.emit() }, h("slot", { key: 'dc2ca7df3c792a2a238ed3f03ffc6863d600ab87' })), h("span", { key: '5b5f76e2fb303d4206190e311ebe428765d154b6', class: "select-icon", style: { "--icon-chevron": `url(${chevronIcon})` }, "aria-hidden": "true" })));
+        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" })));
     }
     static get is() { return "scout-select"; }
     static get encapsulation() { return "scoped"; }
@@ -95,6 +96,25 @@ export class ScoutSelect {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
             "validate": {
                 "type": "unknown",
                 "mutable": false,

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;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,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,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  /**\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          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,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"]}

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

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

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

@@ -28,8 +28,8 @@ export class ScoutSwitch {
         });
     }
     render() {
-        const Tag = this.label && this.label.length ? "label" : "div";
-        return (h(Tag, { key: '318cc87a4c5a8f8f03303e2cac1c62b962498d58' }, this.label, h("span", { key: '8788d9db11b0abfd22258f073c157b60fbe6a3cc', class: "inlineDivider" }), h("input", { key: '5b882357938ccf8b81033dc035a796ce8524b36c', 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 })));
+        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 })));
     }
     static get is() { return "scout-switch"; }
     static get encapsulation() { return "shadow"; }

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,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QAC9D,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 && 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,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"]}

package/dist/collection/index.js

@@ -7,5 +7,5 @@
  * DO NOT use this file to export your components. Instead, use the recommended approaches
  * to consume components of this package as outlined in the `README.md`.
  */
-export { format } from './utils/utils';
+export { format } from "./utils/utils";
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC","sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport { format } from './utils/utils';\nexport type * from './components.d.ts';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC","sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport type * from \"./components.d.ts\";\nexport { format } from \"./utils/utils\";\n"]}

package/dist/collection/utils/utils.js

@@ -1,4 +1,4 @@
 export function format(first, middle, last) {
-    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+    return ((first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : ""));
 }
 //# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa;IACnE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC","sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa;IACnE,OAAO,CACL,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CACxE,CAAC;AACJ,CAAC","sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\n  return (\n    (first || \"\") + (middle ? ` ${middle}` : \"\") + (last ? ` ${last}` : \"\")\n  );\n}\n"]}

package/dist/components/index.js

@@ -1,7 +1,7 @@
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-S6Ssep7K.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-DNlelzlE.js';
 
 function format(first, middle, last) {
-    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+    return ((first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : ""));
 }
 
 export { format };

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;SAAgB,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa,EAAA;AACnE,IAAA,OAAO,CAAC,KAAK,IAAI,EAAE,KAAK,MAAM,GAAG,CAAI,CAAA,EAAA,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,IAAI,GAAG,CAAI,CAAA,EAAA,IAAI,EAAE,GAAG,EAAE,CAAC;AAChF;;;;","names":[],"sources":["src/utils/utils.ts"],"sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n"],"version":3}
+{"file":"index.js","mappings":";;SAAgB,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa,EAAA;AACnE,IAAA,QACE,CAAC,KAAK,IAAI,EAAE,KAAK,MAAM,GAAG,CAAI,CAAA,EAAA,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,IAAI,GAAG,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE,GAAG,EAAE,CAAC;AAE3E;;;;","names":[],"sources":["src/utils/utils.ts"],"sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\n  return (\n    (first || \"\") + (middle ? ` ${middle}` : \"\") + (last ? ` ${last}` : \"\")\n  );\n}\n"],"version":3}