@scouterna/ui-webc 2.2.3 → 2.2.5

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

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

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

@@ -10,6 +10,7 @@ export class ScoutListViewItem {
     name;
     value;
     checked;
+    disabled;
     scoutClick;
     render() {
         const Tag = this.type === "link"
@@ -26,7 +27,7 @@ export class ScoutListViewItem {
                     (this.target === "_blank" ? "noopener noreferrer" : undefined),
             }
             : {};
-        return (h(Host, { key: '413bfec2ce5b069cb065b25e6a388b87d9bf972d', role: "listitem" }, h(Tag, { key: '8bd4978a887d2769bf537d7cf74fc02772055144', class: "button", ...linkProps, onClick: () => this.scoutClick.emit() }, this.getPrefix(), this.getContent(), this.getSuffix())));
+        return (h(Host, { key: '329bcf60c9b9df6af329d833500b673f3de7e0ff', role: "listitem" }, h(Tag, { key: '864c0c388e72a544afac7b73dc715fc992f913aa', class: "button", ...linkProps, onClick: () => this.scoutClick.emit() }, this.getPrefix(), this.getContent(), this.getSuffix())));
     }
     getPrefix() {
         if (!this.icon) {
@@ -39,10 +40,10 @@ export class ScoutListViewItem {
     }
     getSuffix() {
         if (this.type === "radio") {
-            return (h("scout-radio-button", { name: this.name, value: this.value, checked: this.checked }));
+            return (h("scout-radio-button", { name: this.name, value: this.value, checked: this.checked, disabled: this.disabled }));
         }
         if (this.type === "checkbox") {
-            return (h("scout-checkbox", { name: this.name, value: this.value, checked: this.checked }));
+            return (h("scout-checkbox", { name: this.name, value: this.value, checked: this.checked, disabled: this.disabled }));
         }
         return null;
     }
@@ -257,6 +258,25 @@ export class ScoutListViewItem {
                 "setter": false,
                 "reflect": false,
                 "attribute": "checked"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"list-view-item.js","sourceRoot":"","sources":["../../../src/components/list-view-item/list-view-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAWvB,MAAM,OAAO,iBAAiB;IACpB,IAAI,CAAU;IACd,OAAO,CAAU;IACjB,SAAS,CAAU;IACnB,IAAI,GAAa,QAAQ,CAAC;IAE1B,IAAI,CAAU;IACd,MAAM,CAAU;IAChB,GAAG,CAAU;IAEb,IAAI,CAAU;IACd,KAAK,CAAU;IACf,OAAO,CAAW;IAEjB,UAAU,CAAqB;IAExC,MAAM;QACJ,MAAM,GAAG,GACP,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC,GAAG;YACL,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU;gBACjD,CAAC,CAAC,OAAO;gBACT,CAAC,CAAC,QAAQ,CAAC;QAEjB,MAAM,SAAS,GACb,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,yDAAyD;gBACzD,GAAG,EACD,IAAI,CAAC,GAAG;oBACR,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC;aACjE;YACH,CAAC,CAAC,EAAE,CAAC;QAET,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,EAAC,GAAG,qDACF,KAAK,EAAC,QAAQ,KACV,SAAS,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;gBAEpC,IAAI,CAAC,SAAS,EAAE;gBAChB,IAAI,CAAC,UAAU,EAAE;gBACjB,IAAI,CAAC,SAAS,EAAE,CACb,CACD,CACR,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,WAAK,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;IAC3D,CAAC;IAEO,UAAU;QAChB,OAAO,CACL,WAAK,KAAK,EAAC,SAAS;YACjB,IAAI,CAAC,OAAO,IAAI,WAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAO;YACzD,IAAI,CAAC,SAAS,IAAI,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,SAAS,CAAO,CAC5D,CACP,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC1B,OAAO,CACL,0BACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,CACH,CAAC;QACJ,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC7B,OAAO,CACL,sBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,CACH,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nexport type ItemType = \"button\" | \"link\" | \"radio\" | \"checkbox\";\n\n@Component({\n  tag: \"scout-list-view-item\",\n  styleUrl: \"list-view-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutListViewItem {\n  @Prop() icon?: string;\n  @Prop() primary?: string;\n  @Prop() secondary?: string;\n  @Prop() type: ItemType = \"button\";\n\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() rel?: string;\n\n  @Prop() name?: string;\n  @Prop() value?: string;\n  @Prop() checked?: boolean;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag =\n      this.type === \"link\"\n        ? \"a\"\n        : this.type === \"radio\" || this.type === \"checkbox\"\n          ? \"label\"\n          : \"button\";\n\n    const linkProps =\n      this.type === \"link\"\n        ? {\n            href: this.href,\n            target: this.target,\n            // This might not be our job, but better safe than sorry.\n            rel:\n              this.rel ??\n              (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          }\n        : {};\n\n    return (\n      <Host role=\"listitem\">\n        <Tag\n          class=\"button\"\n          {...linkProps}\n          onClick={() => this.scoutClick.emit()}\n        >\n          {this.getPrefix()}\n          {this.getContent()}\n          {this.getSuffix()}\n        </Tag>\n      </Host>\n    );\n  }\n\n  private getPrefix() {\n    if (!this.icon) {\n      return null;\n    }\n\n    return <div class=\"prefix-icon\" innerHTML={this.icon} />;\n  }\n\n  private getContent() {\n    return (\n      <div class=\"content\">\n        {this.primary && <div class=\"primary\">{this.primary}</div>}\n        {this.secondary && <div class=\"secondary\">{this.secondary}</div>}\n      </div>\n    );\n  }\n\n  private getSuffix() {\n    if (this.type === \"radio\") {\n      return (\n        <scout-radio-button\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n        />\n      );\n    }\n\n    if (this.type === \"checkbox\") {\n      return (\n        <scout-checkbox\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n        />\n      );\n    }\n\n    return null;\n  }\n}\n"]}
+{"version":3,"file":"list-view-item.js","sourceRoot":"","sources":["../../../src/components/list-view-item/list-view-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAWvB,MAAM,OAAO,iBAAiB;IACpB,IAAI,CAAU;IACd,OAAO,CAAU;IACjB,SAAS,CAAU;IACnB,IAAI,GAAa,QAAQ,CAAC;IAE1B,IAAI,CAAU;IACd,MAAM,CAAU;IAChB,GAAG,CAAU;IAEb,IAAI,CAAU;IACd,KAAK,CAAU;IACf,OAAO,CAAW;IAElB,QAAQ,CAAW;IAElB,UAAU,CAAqB;IAExC,MAAM;QACJ,MAAM,GAAG,GACP,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC,GAAG;YACL,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU;gBACjD,CAAC,CAAC,OAAO;gBACT,CAAC,CAAC,QAAQ,CAAC;QAEjB,MAAM,SAAS,GACb,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,yDAAyD;gBACzD,GAAG,EACD,IAAI,CAAC,GAAG;oBACR,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC;aACjE;YACH,CAAC,CAAC,EAAE,CAAC;QAET,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,EAAC,GAAG,qDACF,KAAK,EAAC,QAAQ,KACV,SAAS,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;gBAEpC,IAAI,CAAC,SAAS,EAAE;gBAChB,IAAI,CAAC,UAAU,EAAE;gBACjB,IAAI,CAAC,SAAS,EAAE,CACb,CACD,CACR,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,WAAK,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;IAC3D,CAAC;IAEO,UAAU;QAChB,OAAO,CACL,WAAK,KAAK,EAAC,SAAS;YACjB,IAAI,CAAC,OAAO,IAAI,WAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAO;YACzD,IAAI,CAAC,SAAS,IAAI,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,SAAS,CAAO,CAC5D,CACP,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC1B,OAAO,CACL,0BACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACH,CAAC;QACJ,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC7B,OAAO,CACL,sBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACH,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nexport type ItemType = \"button\" | \"link\" | \"radio\" | \"checkbox\";\n\n@Component({\n  tag: \"scout-list-view-item\",\n  styleUrl: \"list-view-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutListViewItem {\n  @Prop() icon?: string;\n  @Prop() primary?: string;\n  @Prop() secondary?: string;\n  @Prop() type: ItemType = \"button\";\n\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() rel?: string;\n\n  @Prop() name?: string;\n  @Prop() value?: string;\n  @Prop() checked?: boolean;\n\n  @Prop() disabled?: boolean;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag =\n      this.type === \"link\"\n        ? \"a\"\n        : this.type === \"radio\" || this.type === \"checkbox\"\n          ? \"label\"\n          : \"button\";\n\n    const linkProps =\n      this.type === \"link\"\n        ? {\n            href: this.href,\n            target: this.target,\n            // This might not be our job, but better safe than sorry.\n            rel:\n              this.rel ??\n              (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          }\n        : {};\n\n    return (\n      <Host role=\"listitem\">\n        <Tag\n          class=\"button\"\n          {...linkProps}\n          onClick={() => this.scoutClick.emit()}\n        >\n          {this.getPrefix()}\n          {this.getContent()}\n          {this.getSuffix()}\n        </Tag>\n      </Host>\n    );\n  }\n\n  private getPrefix() {\n    if (!this.icon) {\n      return null;\n    }\n\n    return <div class=\"prefix-icon\" innerHTML={this.icon} />;\n  }\n\n  private getContent() {\n    return (\n      <div class=\"content\">\n        {this.primary && <div class=\"primary\">{this.primary}</div>}\n        {this.secondary && <div class=\"secondary\">{this.secondary}</div>}\n      </div>\n    );\n  }\n\n  private getSuffix() {\n    if (this.type === \"radio\") {\n      return (\n        <scout-radio-button\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          disabled={this.disabled}\n        />\n      );\n    }\n\n    if (this.type === \"checkbox\") {\n      return (\n        <scout-checkbox\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          disabled={this.disabled}\n        />\n      );\n    }\n\n    return null;\n  }\n}\n"]}

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

@@ -4,7 +4,8 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) !important;
+  padding: 0 var(--spacing-4) !important;
+  height: var(--spacing-12);
   border: none !important;
   background-color: transparent;
 }
@@ -13,6 +14,6 @@
   margin: 0;
   padding: 0;
   font: var(--type-body-sm);
-  color: var(--color-text-base);
+  color: var(--color-gray-800);
   font-weight: 500;
 }

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: '5ff0f60b511992241c5dacc25bd2ede127180da5', role: "listitem" }, h(this.headingLevel, { key: 'e857ca6fd07f98e379ade3efab9b7638a69ef184', class: "heading" }, this.text)));
+        return (h(Host, { key: 'b93e8553a3b335f456e7bcbd32c3c635da58da00', role: "listitem" }, h(this.headingLevel, { key: 'e82ea8203aef696156a211c6aac9415fe488a56b', 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: '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)));
+        return (h(Host, { key: '4262ae621bb24ef73641363fff67a1587ea2c644', class: this.size === "base" ? "" : this.size }, h("div", { key: '54ff8ba284a22ab683a9403c803bff7999acce3f', class: "frame" }, this.getSymbols()), this.text && h("div", { key: '83368c83c87bf6e171b996c05dc6a5e4da91e26e', class: "text" }, this.text)));
     }
     showElement(el) {
         el.classList.remove("animate-out");

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

@@ -1,5 +1,10 @@
 import { h, Mixin, } from "@stencil/core";
 import { inputMixin } from "../../mixins/inputMixin";
+/**
+ * The radio button component is used to let users select one option from a set.
+ * When used in a form, make sure to wrap it in a Field component to display a
+ * label, help text, and error messages.
+ */
 export class ScoutRadioButton extends Mixin(inputMixin) {
     constructor() {
         super();
@@ -23,7 +28,7 @@ export class ScoutRadioButton extends Mixin(inputMixin) {
     }
     render() {
         const Tag = this.label?.length ? "label" : "div";
-        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) => {
+        return (h(Tag, { key: '22df090dcbf2f2b4b14b7cad8d34500295045f70' }, h("input", { key: '3bcc5022fa6202fd1fe733c1a8430f7ed1a54cf4', 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));

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,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"]}
+{"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;AAErD;;;;GAIG;AAMH,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/**\n * The radio button component is used to let users select one option from a set.\n * When used in a form, make sure to wrap it in a Field component to display a\n * label, help text, and error messages.\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,11 @@
 import { h, Mixin, } from "@stencil/core";
 import chevronIcon from "@tabler/icons/outline/chevron-down.svg";
 import { inputMixin } from "../../mixins/inputMixin";
+/**
+ * The select component is a dropdown menu that allows users to select one
+ * option from a list. When used in a form, make sure to wrap it in a Field
+ * component to display a label, help text, and error messages.
+ */
 export class ScoutSelect extends Mixin(inputMixin) {
     constructor() {
         super();
@@ -16,7 +21,7 @@ export class ScoutSelect extends Mixin(inputMixin) {
     disabled = false;
     name;
     render() {
-        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" })));
+        return (h("div", { key: '12bf95188935ab6b11101c829970800199b53e9a', class: "select-wrapper" }, h("select", { key: '1c373cc25f6de17b7139baab0af69fd23adf3b85', id: this.ariaId, name: this.name, class: "select", disabled: this.disabled, onChange: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }, h("slot", { key: '99f4430d6433e96c95651acba4ff0068235d1cb8' })), h("span", { key: '4f36424bd7395db03ea9caf10751cd570fc06853', class: "select-icon", style: { "--icon-chevron": `url(${chevronIcon})` }, "aria-hidden": "true" })));
     }
     static get is() { return "scout-select"; }
     static get encapsulation() { return "scoped"; }

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,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"]}
+{"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;AAErD;;;;GAIG;AAMH,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/**\n * The select component is a dropdown menu that allows users to select one\n * option from a list. When used in a form, make sure to wrap it in a Field\n * component to display a label, help text, and error messages.\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: '46f8dfbf3721fe377297d936ea07595e85b933a3', style: {
+        return (h(Host, { key: '768d68ecb7184d322a181d5917f2eaee3d270c52', style: {
                 "--stack-flex-direction": `${this.direction}`,
                 "--stack-gap-spacing": `var(--spacing-${GapSizeValues[this.gapSize]})`,
-            } }, h("slot", { key: '9d0a64fbc02da0960e96293696e77a7688af7132' })));
+            } }, h("slot", { key: '01a68b251dcbc2b46a2902f922fe56c57daf840c' })));
     }
     static get is() { return "scout-stack"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,10 @@
 import { h, Mixin, } from "@stencil/core";
 import { inputMixin } from "../../mixins/inputMixin";
+/**
+ * The switch component is used to toggle between two states, on and off.
+ * Behaves like a checkbox. When used in a form, make sure to wrap it in a Field
+ * component to display a label, help text, and error messages.
+ */
 export class ScoutSwitch extends Mixin(inputMixin) {
     constructor() {
         super();
@@ -24,7 +29,7 @@ export class ScoutSwitch extends Mixin(inputMixin) {
     }
     render() {
         const Tag = this.label?.length ? "label" : "div";
-        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) => {
+        return (h(Tag, { key: 'b577bb6c1a4bde37ea76ae1c14bbdad4e3c11200' }, this.label, h("span", { key: 'b93dc86e4fa270efb3e8983c957731015d9709b4', class: "inlineDivider" }), h("input", { key: 'ca377aea983a9702fe9f292908048746c31433b9', 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() })));

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,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"]}
+{"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;AAErD;;;;GAIG;AAQH,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/**\n * The switch component is used to toggle between two states, on and off.\n * Behaves like a checkbox. When used in a form, make sure to wrap it in a Field\n * component to display a label, help text, and error messages.\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"]}

package/dist/collection/mixins/inputMixin.js

@@ -34,6 +34,10 @@ export const inputMixin = (Base) => {
         }
         onInput() {
             this.runValidation();
+            this.scoutInputChange.emit({
+                value: this.inputElement.value,
+                element: this.inputElement,
+            });
         }
         onBlur() {
             this.scoutBlur.emit();

package/dist/collection/mixins/inputMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputMixin.js","sourceRoot":"","sources":["../../src/mixins/inputMixin.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAGL,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,UAAU,GAAG,CAAwB,IAAO,EAAE,EAAE;IAC3D,MAAM,UAAW,SAAQ,IAAI;;;;QAC3B;;;;WAIG;QACK,QAAQ,CAAoC;QAE3C,gBAAgB,CAGtB;QACM,SAAS,CAAqB;QAEvC;;WAEG;QACM,cAAc,CAAyC;QAEhE;;WAEG;QACM,aAAa,CAAqB;QAE3C;;WAEG;QACM,aAAa,CAAuB;QAEpC,MAAM,CAAS;QAEhB,YAAY,CAKI;QAExB,iBAAiB;YACf,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;YAC/D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACvC,CAAC;QAED,gBAAgB;YACd,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;QAED,OAAO;YACL,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;QAED,MAAM;YACJ,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC;QAED,SAAS;YACP,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAC5B,CAAC;QAED,aAAa;YACX,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,OAAO;YACT,CAAC;YAED,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YACjE,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC;YAE7D,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QAC3D,CAAC;QAED,WAAW,CACT,EAKuB;YAEvB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACzB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KACF;IACD,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC","sourcesContent":["import {\n  Event,\n  type EventEmitter,\n  type MixedInCtor,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nexport const inputMixin = <B extends MixedInCtor>(Base: B) => {\n  class InputMixin extends Base {\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: HTMLElement;\n    }>;\n    @Event() scoutBlur: EventEmitter<void>;\n\n    /**\n     * Internal event used for form field validation.\n     */\n    @Event() _scoutValidate: EventEmitter<{ element: HTMLElement }>;\n\n    /**\n     * Internal event used for form field validation.\n     */\n    @Event() _scoutInvalid: EventEmitter<void>;\n\n    /**\n     * Internal event used for form field association.\n     */\n    @Event() _scoutFieldId: EventEmitter<string>;\n\n    @State() ariaId: string;\n\n    private inputElement:\n      | HTMLButtonElement\n      | HTMLInputElement\n      | HTMLOutputElement\n      | HTMLSelectElement\n      | HTMLTextAreaElement;\n\n    componentWillLoad() {\n      this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n      this._scoutFieldId.emit(this.ariaId);\n    }\n\n    componentDidLoad() {\n      this.runValidation();\n    }\n\n    onInput() {\n      this.runValidation();\n    }\n\n    onBlur() {\n      this.scoutBlur.emit();\n    }\n\n    onInvalid() {\n      this._scoutInvalid.emit();\n    }\n\n    runValidation() {\n      if (!this.validate) {\n        return;\n      }\n\n      const validationMessage = this.validate(this.inputElement.value);\n      this.inputElement.setCustomValidity(validationMessage ?? \"\");\n\n      this._scoutValidate.emit({ element: this.inputElement });\n    }\n\n    setInputRef(\n      el:\n        | HTMLButtonElement\n        | HTMLInputElement\n        | HTMLOutputElement\n        | HTMLSelectElement\n        | HTMLTextAreaElement,\n    ) {\n      this.inputElement = el;\n    }\n  }\n  return InputMixin;\n};\n"]}
+{"version":3,"file":"inputMixin.js","sourceRoot":"","sources":["../../src/mixins/inputMixin.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAGL,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,UAAU,GAAG,CAAwB,IAAO,EAAE,EAAE;IAC3D,MAAM,UAAW,SAAQ,IAAI;;;;QAC3B;;;;WAIG;QACK,QAAQ,CAAoC;QAE3C,gBAAgB,CAGtB;QACM,SAAS,CAAqB;QAEvC;;WAEG;QACM,cAAc,CAAyC;QAEhE;;WAEG;QACM,aAAa,CAAqB;QAE3C;;WAEG;QACM,aAAa,CAAuB;QAEpC,MAAM,CAAS;QAEhB,YAAY,CAKI;QAExB,iBAAiB;YACf,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;YAC/D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACvC,CAAC;QAED,gBAAgB;YACd,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;QAED,OAAO;YACL,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBACzB,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK;gBAC9B,OAAO,EAAE,IAAI,CAAC,YAAY;aAC3B,CAAC,CAAC;QACL,CAAC;QAED,MAAM;YACJ,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC;QAED,SAAS;YACP,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAC5B,CAAC;QAED,aAAa;YACX,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,OAAO;YACT,CAAC;YAED,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YACjE,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC;YAE7D,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QAC3D,CAAC;QAED,WAAW,CACT,EAKuB;YAEvB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACzB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KACF;IACD,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC","sourcesContent":["import {\n  Event,\n  type EventEmitter,\n  type MixedInCtor,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nexport const inputMixin = <B extends MixedInCtor>(Base: B) => {\n  class InputMixin extends Base {\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: HTMLElement;\n    }>;\n    @Event() scoutBlur: EventEmitter<void>;\n\n    /**\n     * Internal event used for form field validation.\n     */\n    @Event() _scoutValidate: EventEmitter<{ element: HTMLElement }>;\n\n    /**\n     * Internal event used for form field validation.\n     */\n    @Event() _scoutInvalid: EventEmitter<void>;\n\n    /**\n     * Internal event used for form field association.\n     */\n    @Event() _scoutFieldId: EventEmitter<string>;\n\n    @State() ariaId: string;\n\n    private inputElement:\n      | HTMLButtonElement\n      | HTMLInputElement\n      | HTMLOutputElement\n      | HTMLSelectElement\n      | HTMLTextAreaElement;\n\n    componentWillLoad() {\n      this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n      this._scoutFieldId.emit(this.ariaId);\n    }\n\n    componentDidLoad() {\n      this.runValidation();\n    }\n\n    onInput() {\n      this.runValidation();\n      this.scoutInputChange.emit({\n        value: this.inputElement.value,\n        element: this.inputElement,\n      });\n    }\n\n    onBlur() {\n      this.scoutBlur.emit();\n    }\n\n    onInvalid() {\n      this._scoutInvalid.emit();\n    }\n\n    runValidation() {\n      if (!this.validate) {\n        return;\n      }\n\n      const validationMessage = this.validate(this.inputElement.value);\n      this.inputElement.setCustomValidity(validationMessage ?? \"\");\n\n      this._scoutValidate.emit({ element: this.inputElement });\n    }\n\n    setInputRef(\n      el:\n        | HTMLButtonElement\n        | HTMLInputElement\n        | HTMLOutputElement\n        | HTMLSelectElement\n        | HTMLTextAreaElement,\n    ) {\n      this.inputElement = el;\n    }\n  }\n  return InputMixin;\n};\n"]}

package/dist/components/{p-BkrRT31y.js → p-4RT-nIeK.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, M as Mixin, c as createEvent, h } from './p-fr5CaUFu.js';
-import { i as inputMixin } from './p-DaGMxK4K.js';
+import { i as inputMixin } from './p-B-kEl-ny.js';
 
 const radioButtonCss = ".radio.sc-scout-radio-button{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.sc-scout-radio-button:hover{border:2px solid var(--color-gray-400);box-shadow:inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);cursor:pointer}.radio.sc-scout-radio-button:active{background-color:var(--color-background-brand-subtle-pressed)}.radio.sc-scout-radio-button:checked:hover{border-color:var(--color-background-brand-hovered);box-shadow:none}.radio.sc-scout-radio-button:checked:hover::before{background-color:var(--color-background-brand-hovered)}.radio.sc-scout-radio-button:checked{border-color:var(--color-background-brand-base)}.radio.sc-scout-radio-button::after{content:\"\";position:absolute;width:var(--spacing-10);height:var(--spacing-10);top:50%;left:50%;transform:translate(-50%, -50%)}.radio.sc-scout-radio-button: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.sc-scout-radio-button:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}label.sc-scout-radio-button{display:flex;align-items:center;gap:var(--spacing-2);font:var(--type-label-base);color:var(--color-text-base)}";
 
@@ -35,7 +35,7 @@ const ScoutRadioButton = /*@__PURE__*/ proxyCustomElement(class ScoutRadioButton
     }
     render() {
         const Tag = this.label?.length ? "label" : "div";
-        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) => {
+        return (h(Tag, { key: '22df090dcbf2f2b4b14b7cad8d34500295045f70' }, h("input", { key: '3bcc5022fa6202fd1fe733c1a8430f7ed1a54cf4', 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));
@@ -66,6 +66,6 @@ function defineCustomElement() {
 }
 
 export { ScoutRadioButton as S, defineCustomElement as d };
-//# sourceMappingURL=p-BkrRT31y.js.map
+//# sourceMappingURL=p-4RT-nIeK.js.map
 
-//# sourceMappingURL=p-BkrRT31y.js.map
+//# sourceMappingURL=p-4RT-nIeK.js.map

package/dist/components/{p-BkrRT31y.js.map → p-4RT-nIeK.js.map}

@@ -1 +1 @@
-{"file":"p-BkrRT31y.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,ghDAAghD;;ACgB1hD,MAAA,gBACX,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;;IAGjB,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEL,IAAA,KAAK;AAEL,IAAA,IAAI;AAEH,IAAA,YAAY;AAKrB,IAAA,QAAQ,CAAC,KAAY,EAAA;AACnB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAE9C,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,KAAK,CAAC,OAAO;AACtB,YAAA,OAAO,EAAE,KAAK;AACf,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK;AAChD,QAAA,QACE,EAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAK,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,EAAA,iBAAA,EACI,IAAI,CAAC,cAAc,EAAA,eAAA,EACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,KAAI;gBAClB,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACtB,aAAC,EACD,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EACjC,CAAA,EACD,IAAI,CAAC,KAAK,CACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/radio-button/radio-button.css?tag=scout-radio-button&encapsulation=scoped","src/components/radio-button/radio-button.tsx"],"sourcesContent":[".radio {\n  width: var(--spacing-6);\n  height: var(--spacing-6);\n  appearance: none;\n  -webkit-appearance: none;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  border-radius: 100%;\n  background-color: var(--color-white);\n  border: 2px solid var(--color-gray-300);\n  position: relative;\n}\n\n.radio:hover {\n  border: 2px solid var(--color-gray-400);\n  box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);\n  cursor: pointer;\n}\n\n.radio:active {\n  background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.radio:checked:hover {\n  border-color: var(--color-background-brand-hovered);\n  box-shadow: none;\n}\n\n.radio:checked:hover::before {\n  background-color: var(--color-background-brand-hovered);\n}\n\n.radio:checked {\n  border-color: var(--color-background-brand-base);\n}\n\n.radio::after {\n  content: \"\";\n  position: absolute;\n  width: var(--spacing-10);\n  height: var(--spacing-10);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.radio:checked::before {\n  content: \"\";\n  background-color: var(--color-background-brand-base);\n  width: var(--spacing-4);\n  height: var(--spacing-4);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border-radius: 100%;\n}\n\n.radio:disabled {\n  pointer-events: none;\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n\nlabel {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2);\n  font: var(--type-label-base);\n  color: var(--color-text-base);\n}\n","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"],"version":3}
+{"file":"p-4RT-nIeK.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,ghDAAghD;;ACqB1hD,MAAA,gBACX,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;;IAGjB,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEL,IAAA,KAAK;AAEL,IAAA,IAAI;AAEH,IAAA,YAAY;AAKrB,IAAA,QAAQ,CAAC,KAAY,EAAA;AACnB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAE9C,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,KAAK,CAAC,OAAO;AACtB,YAAA,OAAO,EAAE,KAAK;AACf,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK;AAChD,QAAA,QACE,EAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAK,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,EAAA,iBAAA,EACI,IAAI,CAAC,cAAc,EAAA,eAAA,EACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,KAAI;gBAClB,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACtB,aAAC,EACD,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EACjC,CAAA,EACD,IAAI,CAAC,KAAK,CACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/radio-button/radio-button.css?tag=scout-radio-button&encapsulation=scoped","src/components/radio-button/radio-button.tsx"],"sourcesContent":[".radio {\n  width: var(--spacing-6);\n  height: var(--spacing-6);\n  appearance: none;\n  -webkit-appearance: none;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  border-radius: 100%;\n  background-color: var(--color-white);\n  border: 2px solid var(--color-gray-300);\n  position: relative;\n}\n\n.radio:hover {\n  border: 2px solid var(--color-gray-400);\n  box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);\n  cursor: pointer;\n}\n\n.radio:active {\n  background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.radio:checked:hover {\n  border-color: var(--color-background-brand-hovered);\n  box-shadow: none;\n}\n\n.radio:checked:hover::before {\n  background-color: var(--color-background-brand-hovered);\n}\n\n.radio:checked {\n  border-color: var(--color-background-brand-base);\n}\n\n.radio::after {\n  content: \"\";\n  position: absolute;\n  width: var(--spacing-10);\n  height: var(--spacing-10);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.radio:checked::before {\n  content: \"\";\n  background-color: var(--color-background-brand-base);\n  width: var(--spacing-4);\n  height: var(--spacing-4);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border-radius: 100%;\n}\n\n.radio:disabled {\n  pointer-events: none;\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n\nlabel {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2);\n  font: var(--type-label-base);\n  color: var(--color-text-base);\n}\n","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/**\n * The radio button component is used to let users select one option from a set.\n * When used in a form, make sure to wrap it in a Field component to display a\n * label, help text, and error messages.\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"],"version":3}

package/dist/components/{p-DaGMxK4K.js → p-B-kEl-ny.js}

@@ -1,3 +1,5 @@
+import './p-fr5CaUFu.js';
+
 const inputMixin = (Base) => {
     const InputMixin = class extends Base {
         constructor() {
@@ -34,6 +36,10 @@ const inputMixin = (Base) => {
         }
         onInput() {
             this.runValidation();
+            this.scoutInputChange.emit({
+                value: this.inputElement.value,
+                element: this.inputElement,
+            });
         }
         onBlur() {
             this.scoutBlur.emit();
@@ -57,6 +63,6 @@ const inputMixin = (Base) => {
 };
 
 export { inputMixin as i };
-//# sourceMappingURL=p-DaGMxK4K.js.map
+//# sourceMappingURL=p-B-kEl-ny.js.map
 
-//# sourceMappingURL=p-DaGMxK4K.js.map
+//# sourceMappingURL=p-B-kEl-ny.js.map

package/dist/components/p-B-kEl-ny.js.map

@@ -0,0 +1 @@
+{"file":"p-B-kEl-ny.js","mappings":";;AAQa,MAAA,UAAU,GAAG,CAAwB,IAAO,KAAI;UACrD,UAAW,GAAA,cAAQ,IAAI,CAAA;;;;AAC3B;;;;AAIG;AACK,QAAA,QAAQ;AAEP,QAAA,gBAAgB;AAIhB,QAAA,SAAS;AAElB;;AAEG;AACM,QAAA,cAAc;AAEvB;;AAEG;AACM,QAAA,aAAa;AAEtB;;AAEG;AACM,QAAA,aAAa;AAEb,QAAA,MAAM;AAEP,QAAA,YAAY;QAOpB,iBAAiB,GAAA;YACf,IAAI,CAAC,MAAM,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA,CAAE;YAC9D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;QAGtC,gBAAgB,GAAA;YACd,IAAI,CAAC,aAAa,EAAE;;QAGtB,OAAO,GAAA;YACL,IAAI,CAAC,aAAa,EAAE;AACpB,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;AACzB,gBAAA,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK;gBAC9B,OAAO,EAAE,IAAI,CAAC,YAAY;AAC3B,aAAA,CAAC;;QAGJ,MAAM,GAAA;AACJ,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;;QAGvB,SAAS,GAAA;AACP,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;;QAG3B,aAAa,GAAA;AACX,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB;;AAGF,YAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;YAChE,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,iBAAiB,IAAI,EAAE,CAAC;AAE5D,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC;;AAG1D,QAAA,WAAW,CACT,EAKuB,EAAA;AAEvB,YAAA,IAAI,CAAC,YAAY,GAAG,EAAE;;;AAG1B,IAAA,OAAO,UAAU;AACnB;;;;","names":[],"sources":["src/mixins/inputMixin.ts"],"sourcesContent":["import {\n  Event,\n  type EventEmitter,\n  type MixedInCtor,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nexport const inputMixin = <B extends MixedInCtor>(Base: B) => {\n  class InputMixin extends Base {\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: HTMLElement;\n    }>;\n    @Event() scoutBlur: EventEmitter<void>;\n\n    /**\n     * Internal event used for form field validation.\n     */\n    @Event() _scoutValidate: EventEmitter<{ element: HTMLElement }>;\n\n    /**\n     * Internal event used for form field validation.\n     */\n    @Event() _scoutInvalid: EventEmitter<void>;\n\n    /**\n     * Internal event used for form field association.\n     */\n    @Event() _scoutFieldId: EventEmitter<string>;\n\n    @State() ariaId: string;\n\n    private inputElement:\n      | HTMLButtonElement\n      | HTMLInputElement\n      | HTMLOutputElement\n      | HTMLSelectElement\n      | HTMLTextAreaElement;\n\n    componentWillLoad() {\n      this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n      this._scoutFieldId.emit(this.ariaId);\n    }\n\n    componentDidLoad() {\n      this.runValidation();\n    }\n\n    onInput() {\n      this.runValidation();\n      this.scoutInputChange.emit({\n        value: this.inputElement.value,\n        element: this.inputElement,\n      });\n    }\n\n    onBlur() {\n      this.scoutBlur.emit();\n    }\n\n    onInvalid() {\n      this._scoutInvalid.emit();\n    }\n\n    runValidation() {\n      if (!this.validate) {\n        return;\n      }\n\n      const validationMessage = this.validate(this.inputElement.value);\n      this.inputElement.setCustomValidity(validationMessage ?? \"\");\n\n      this._scoutValidate.emit({ element: this.inputElement });\n    }\n\n    setInputRef(\n      el:\n        | HTMLButtonElement\n        | HTMLInputElement\n        | HTMLOutputElement\n        | HTMLSelectElement\n        | HTMLTextAreaElement,\n    ) {\n      this.inputElement = el;\n    }\n  }\n  return InputMixin;\n};\n"],"version":3}

package/dist/components/{p-C2_wl40t.js → p-CLzh39Ll.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, M as Mixin, c as createEvent, h } from './p-fr5CaUFu.js';
-import { i as inputMixin } from './p-DaGMxK4K.js';
+import { i as inputMixin } from './p-B-kEl-ny.js';
 
 const checkSvg = 'data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hlY2siCj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNNSAxMmw1IDVsMTAgLTEwIiAvPgo8L3N2Zz4=';
 
@@ -37,7 +37,7 @@ const ScoutCheckbox = /*@__PURE__*/ proxyCustomElement(class ScoutCheckbox exten
     }
     render() {
         const Tag = this.label?.length ? "label" : "div";
-        return (h(Tag, { key: '6c0a45c9c34f6d2e7dd972186d4fa51b15bbe318' }, h("input", { key: '3649ab29a57824ff4b7f56bee0be1aa48dec8371', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "checkbox", value: this.value, name: this.name, class: "checkbox", style: { "--icon-checkbox": `url(${checkSvg})` }, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => {
+        return (h(Tag, { key: '67b42b2b686fffecf891da832236fde663b740dc' }, h("input", { key: '81821918d102e1ca809915c14a20aa0847f46e30', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "checkbox", value: this.value, name: this.name, class: "checkbox", style: { "--icon-checkbox": `url(${checkSvg})` }, "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));
@@ -68,6 +68,6 @@ function defineCustomElement() {
 }
 
 export { ScoutCheckbox as S, defineCustomElement as d };
-//# sourceMappingURL=p-C2_wl40t.js.map
+//# sourceMappingURL=p-CLzh39Ll.js.map
 
-//# sourceMappingURL=p-C2_wl40t.js.map
+//# sourceMappingURL=p-CLzh39Ll.js.map

package/dist/components/{p-C2_wl40t.js.map → p-CLzh39Ll.js.map}

@@ -1 +1 @@
-{"file":"p-C2_wl40t.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,4fAA4f;;ACA7gB,MAAM,WAAW,GAAG,woDAAwoD;;ACiB/oD,MAAA,aACX,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;;IAGjB,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEL,IAAA,KAAK;AAEL,IAAA,IAAI;AAEH,IAAA,YAAY;AAKrB,IAAA,QAAQ,CAAC,KAAY,EAAA;AACnB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B;AAEjD,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,QAAQ,CAAC,OAAO;AACzB,YAAA,OAAO,EAAE,QAAQ;AAClB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK;QAChD,QACE,EAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,EAAE,iBAAiB,EAAE,OAAOC,QAAS,CAAA,CAAA,CAAG,EAAE,qBAChC,IAAI,CAAC,cAAc,EAAA,eAAA,EACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,KAAI;gBAClB,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACtB,aAAC,EACD,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EACjC,CAAA,EACD,IAAI,CAAC,KAAK,CACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","checkIcon"],"sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/check.svg","src/components/checkbox/checkbox.css?tag=scout-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  class=\"icon icon-tabler icons-tabler-outline icon-tabler-check\"\n>\n  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M5 12l5 5l10 -10\" />\n</svg>",".checkbox {\n  width: var(--spacing-6);\n  height: var(--spacing-6);\n  appearance: none;\n  -webkit-appearance: none;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  border-radius: 3px;\n  background-color: var(--color-text-brand-inverse);\n  border: 2px solid var(--color-gray-300);\n  position: relative;\n}\n\n.checkbox:hover {\n  border: 2px solid var(--color-gray-400);\n  box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);\n  cursor: pointer;\n}\n\n.checkbox:active {\n  background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.checkbox:checked:hover {\n  background-color: var(--color-background-brand-hovered);\n  border-color: var(--color-background-brand-hovered);\n  box-shadow: none;\n}\n\n.checkbox:checked {\n  background-color: var(--color-background-brand-base);\n  border-color: var(--color-background-brand-base);\n}\n\n.checkbox::after {\n  content: \"\";\n  position: absolute;\n  width: var(--spacing-10);\n  height: var(--spacing-10);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.checkbox:checked::before {\n  content: \"\";\n  background-color: var(--color-text-brand-inverse);\n  width: var(--spacing-6);\n  height: var(--spacing-6);\n  position: absolute;\n  /* Needed because of the border */\n  top: 50%;\n  left: 50%;\n  right: 0;\n  bottom: 0;\n  transform: translate(-50%, -50%);\n  mask-image: var(--icon-checkbox);\n  mask-repeat: no-repeat;\n}\n\n.checkbox:disabled {\n  pointer-events: none;\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n\nlabel {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2);\n  font: var(--type-label-base);\n  color: var(--color-text-base);\n}\n","import {\n  Component,\n  type ComponentInterface,\n  Event,\n  type EventEmitter,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport checkIcon from \"@tabler/icons/outline/check.svg\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n@Component({\n  tag: \"scout-checkbox\",\n  styleUrl: \"checkbox.css\",\n  scoped: true,\n})\nexport class ScoutCheckbox\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 checkbox 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 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        <input\n          ref={(el) => this.setInputRef(el)}\n          id={this.ariaId}\n          type=\"checkbox\"\n          value={this.value}\n          name={this.name}\n          class=\"checkbox\"\n          style={{ \"--icon-checkbox\": `url(${checkIcon})` }}\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"],"version":3}
+{"file":"p-CLzh39Ll.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,4fAA4f;;ACA7gB,MAAM,WAAW,GAAG,woDAAwoD;;ACuB/oD,MAAA,aACX,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;;IAGjB,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEL,IAAA,KAAK;AAEL,IAAA,IAAI;AAEH,IAAA,YAAY;AAKrB,IAAA,QAAQ,CAAC,KAAY,EAAA;AACnB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B;AAEjD,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,QAAQ,CAAC,OAAO;AACzB,YAAA,OAAO,EAAE,QAAQ;AAClB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK;QAChD,QACE,EAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,EAAE,iBAAiB,EAAE,OAAOC,QAAS,CAAA,CAAA,CAAG,EAAE,qBAChC,IAAI,CAAC,cAAc,EAAA,eAAA,EACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,KAAI;gBAClB,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACtB,aAAC,EACD,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EACjC,CAAA,EACD,IAAI,CAAC,KAAK,CACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","checkIcon"],"sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/check.svg","src/components/checkbox/checkbox.css?tag=scout-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  class=\"icon icon-tabler icons-tabler-outline icon-tabler-check\"\n>\n  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M5 12l5 5l10 -10\" />\n</svg>",".checkbox {\n  width: var(--spacing-6);\n  height: var(--spacing-6);\n  appearance: none;\n  -webkit-appearance: none;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  border-radius: 3px;\n  background-color: var(--color-text-brand-inverse);\n  border: 2px solid var(--color-gray-300);\n  position: relative;\n}\n\n.checkbox:hover {\n  border: 2px solid var(--color-gray-400);\n  box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);\n  cursor: pointer;\n}\n\n.checkbox:active {\n  background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.checkbox:checked:hover {\n  background-color: var(--color-background-brand-hovered);\n  border-color: var(--color-background-brand-hovered);\n  box-shadow: none;\n}\n\n.checkbox:checked {\n  background-color: var(--color-background-brand-base);\n  border-color: var(--color-background-brand-base);\n}\n\n.checkbox::after {\n  content: \"\";\n  position: absolute;\n  width: var(--spacing-10);\n  height: var(--spacing-10);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.checkbox:checked::before {\n  content: \"\";\n  background-color: var(--color-text-brand-inverse);\n  width: var(--spacing-6);\n  height: var(--spacing-6);\n  position: absolute;\n  /* Needed because of the border */\n  top: 50%;\n  left: 50%;\n  right: 0;\n  bottom: 0;\n  transform: translate(-50%, -50%);\n  mask-image: var(--icon-checkbox);\n  mask-repeat: no-repeat;\n}\n\n.checkbox:disabled {\n  pointer-events: none;\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n\nlabel {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2);\n  font: var(--type-label-base);\n  color: var(--color-text-base);\n}\n","import {\n  Component,\n  type ComponentInterface,\n  Event,\n  type EventEmitter,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport checkIcon from \"@tabler/icons/outline/check.svg\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n/**\n * The checkbox component is used to let users select one or more options from a\n * set. For toggling a single option, consider using the Switch component\n * instead. When used in a form, make sure to wrap it in a Field component to\n * display a label, help text, and error messages.\n */\n@Component({\n  tag: \"scout-checkbox\",\n  styleUrl: \"checkbox.css\",\n  scoped: true,\n})\nexport class ScoutCheckbox\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 checkbox 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 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        <input\n          ref={(el) => this.setInputRef(el)}\n          id={this.ariaId}\n          type=\"checkbox\"\n          value={this.value}\n          name={this.name}\n          class=\"checkbox\"\n          style={{ \"--icon-checkbox\": `url(${checkIcon})` }}\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"],"version":3}

package/dist/components/scout-app-bar.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-fr5CaUFu.js';
 
-const appBarCss = ":host{display:flex;width:100%}::slotted(scout-button){height:100%}.container{display:flex;flex:1;height:var(--spacing-14);background-color:var(--color-white);border-bottom:1px solid var(--color-neutral-100);color:var(--color-text-brand-base);padding:var(--spacing-1)}.title{flex:1;display:flex;align-items:center;font:var(--type-body-lg);font-weight:500;padding:0 var(--spacing-2)}";
+const appBarCss = ":host{display:flex;width:100%}::slotted(scout-button){height:100% !important}.container{display:flex;flex:1;height:var(--spacing-14);background-color:var(--color-white);border-bottom:1px solid var(--color-neutral-100);color:var(--color-text-brand-base);padding:var(--spacing-1)}.title{flex:1;display:flex;align-items:center;font:var(--type-body-lg);font-weight:500;padding:0 var(--spacing-2)}";
 
 const ScoutAppBar$1 = /*@__PURE__*/ proxyCustomElement(class ScoutAppBar extends H {
     constructor(registerHost) {
@@ -12,7 +12,7 @@ const ScoutAppBar$1 = /*@__PURE__*/ proxyCustomElement(class ScoutAppBar extends
     }
     titleText;
     render() {
-        return (h("header", { key: '041b27816bb20c69b19b27ef90515c2cec8f2131', class: "container" }, h("slot", { key: '0171b39a13600bc784df175ad4499891415a58b2', name: "prefix" }), h("div", { key: '43c4905c019583a11ae290e4c049f1ccb7c08242', class: "title" }, this.titleText), h("slot", { key: '26741e8d7ec8559a720dd52a152d939ef857e2b5', name: "suffix" })));
+        return (h("header", { key: '32779c0aa2d189ea43d2ad14dd920e6b7c4b3e17', class: "container" }, h("slot", { key: '0e6b6e66c1f129cb9833335e87298b7c99a6f35c', name: "prefix" }), h("div", { key: '9f1e2ac9696717a2defe268dd85eb35b641918f9', class: "title" }, this.titleText), h("slot", { key: 'b6b0405705921bfd0bdd17ca76bfee97f9bc6105', name: "suffix" })));
     }
     static get delegatesFocus() { return true; }
     static get style() { return appBarCss; }

package/dist/components/scout-app-bar.js.map

@@ -1 +1 @@
-{"file":"scout-app-bar.js","mappings":";;AAAA,MAAM,SAAS,GAAG,+XAA+X;;MCSpYA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;AACd,IAAA,SAAS;IAEjB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,WAAW,EAAA,EACvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO,EACzC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAG,CAAA,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutAppBar","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/app-bar/app-bar.css?tag=scout-app-bar&encapsulation=shadow","src/components/app-bar/app-bar.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n}\n\n::slotted(scout-button) {\n  height: 100%;\n}\n\n.container {\n  display: flex;\n  flex: 1;\n  height: var(--spacing-14);\n  background-color: var(--color-white);\n  border-bottom: 1px solid var(--color-neutral-100);\n  color: var(--color-text-brand-base);\n  padding: var(--spacing-1);\n}\n\n.title {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  font: var(--type-body-lg);\n  font-weight: 500;\n  padding: 0 var(--spacing-2);\n}\n","import { Component, h, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-app-bar\",\n  styleUrl: \"app-bar.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutAppBar {\n  @Prop() titleText?: string;\n\n  render() {\n    return (\n      <header class=\"container\">\n        <slot name=\"prefix\" />\n        <div class=\"title\">{this.titleText}</div>\n        <slot name=\"suffix\" />\n      </header>\n    );\n  }\n}\n"],"version":3}
+{"file":"scout-app-bar.js","mappings":";;AAAA,MAAM,SAAS,GAAG,0YAA0Y;;MCc/YA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;AACd,IAAA,SAAS;IAEjB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,WAAW,EAAA,EACvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO,EACzC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAG,CAAA,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutAppBar","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/app-bar/app-bar.css?tag=scout-app-bar&encapsulation=shadow","src/components/app-bar/app-bar.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n}\n\n::slotted(scout-button) {\n  /* biome-ignore lint/complexity/noImportantStyles: This is a cheeky override, so we're good with it */\n  height: 100% !important;\n}\n\n.container {\n  display: flex;\n  flex: 1;\n  height: var(--spacing-14);\n  background-color: var(--color-white);\n  border-bottom: 1px solid var(--color-neutral-100);\n  color: var(--color-text-brand-base);\n  padding: var(--spacing-1);\n}\n\n.title {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  font: var(--type-body-lg);\n  font-weight: 500;\n  padding: 0 var(--spacing-2);\n}\n","import { Component, h, Prop } from \"@stencil/core\";\n\n/**\n * The App Bar component is used at the top of a page to display a title and\n * optional prefix and suffix actions. It's typically used to provide a\n * native-like navigation experience.\n */\n@Component({\n  tag: \"scout-app-bar\",\n  styleUrl: \"app-bar.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutAppBar {\n  @Prop() titleText?: string;\n\n  render() {\n    return (\n      <header class=\"container\">\n        <slot name=\"prefix\" />\n        <div class=\"title\">{this.titleText}</div>\n        <slot name=\"suffix\" />\n      </header>\n    );\n  }\n}\n"],"version":3}

package/dist/components/scout-button.js

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-fr5CaUFu.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-fr5CaUFu.js';
 
-const buttonCss = ".sc-scout-button-h{display:inline-block}.button.sc-scout-button{flex:1;display:inline-flex;height:var(--spacing-10);align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);font:var(--type-body-base);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.icon.sc-scout-button{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}.icon.sc-scout-button svg.sc-scout-button{width:100%;height:100%}.button.icon-only.sc-scout-button{aspect-ratio:1 / 1;justify-content:center;padding:0}.button.icon-only.sc-scout-button .icon.sc-scout-button{margin:0}.button.icon-only.sc-scout-button .content.sc-scout-button{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.button.primary.sc-scout-button{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}.button.primary.sc-scout-button:hover{background-color:var(--color-background-brand-hovered)}.button.primary.sc-scout-button:active{background-color:var(--color-background-brand-pressed)}.button.outlined.sc-scout-button{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}.button.outlined.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.outlined.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.text.sc-scout-button{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}.button.text.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.text.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.caution.sc-scout-button{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}.button.caution.sc-scout-button:hover{background-color:var(--color-background-caution-bold-hovered)}.button.caution.sc-scout-button:active{background-color:var(--color-background-caution-bold-pressed)}.button.danger.sc-scout-button{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}.button.danger.sc-scout-button:hover{background-color:var(--color-background-danger-bold-hovered)}.button.danger.sc-scout-button:active{background-color:var(--color-background-danger-bold-pressed)}";
+const buttonCss = "scout-button{display:inline-block;height:var(--spacing-10)}scout-button .button{flex:1;display:inline-flex;height:100%;align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);font:var(--type-body-base);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;box-sizing:border-box}scout-button .icon{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}scout-button .icon svg{width:100%;height:100%}scout-button.icon-only .button{aspect-ratio:1 / 1;justify-content:center;padding:0}scout-button.icon-only .icon{margin:0}scout-button.icon-only .content{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}scout-button .button.primary{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}scout-button .button.primary:hover{background-color:var(--color-background-brand-hovered)}scout-button .button.primary:active{background-color:var(--color-background-brand-pressed)}scout-button .button.outlined{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}scout-button .button.outlined:hover{background-color:var(--color-background-brand-subtle-hovered)}scout-button .button.outlined:active{background-color:var(--color-background-brand-subtle-pressed)}scout-button .button.text{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}scout-button .button.text:hover{background-color:var(--color-background-brand-subtle-hovered)}scout-button .button.text:active{background-color:var(--color-background-brand-subtle-pressed)}scout-button .button.caution{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}scout-button .button.caution:hover{background-color:var(--color-background-caution-bold-hovered)}scout-button .button.caution:active{background-color:var(--color-background-caution-bold-pressed)}scout-button .button.danger{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}scout-button .button.danger:hover{background-color:var(--color-background-danger-bold-hovered)}scout-button .button.danger:active{background-color:var(--color-background-danger-bold-pressed)}";
 
 const ScoutButton$1 = /*@__PURE__*/ proxyCustomElement(class ScoutButton extends H {
     constructor(registerHost) {
@@ -38,11 +38,11 @@ const ScoutButton$1 = /*@__PURE__*/ proxyCustomElement(class ScoutButton extends
             : {
                 type: this.type,
             };
-        const icon = this.icon && h("span", { key: '4a3e7eb143e3cf53d6a6327163be00947d3cf370', class: "icon", innerHTML: this.icon });
-        return (h(Tag, { key: 'd7807c803a4032c6a48c9ffbc08ea1b4bb845058', class: `button ${this.variant} ${this.iconOnly ? "icon-only" : ""}`, onClick: () => this.scoutClick.emit(), ...props }, this.iconPosition === "before" && icon, h("span", { key: 'f89787ee6e018587d87c1656d32c1b438263d8c9', class: "content" }, h("slot", { key: '31567811c1d3151aaa74546df5c50fc01a41d582' })), this.iconPosition === "after" && icon));
+        const icon = this.icon && h("span", { key: '0f03bad87dbcaf10cc387fd20121bd6b3ecdf42d', class: "icon", innerHTML: this.icon });
+        return (h(Host, { key: '7a2f998327c5e3dc7139c11f3fcbbe827346c0ee', class: this.iconOnly ? "icon-only" : "" }, h(Tag, { key: 'cabe4acf010df2880a83d5b27f2e885bf326673c', class: `button ${this.variant}`, onClick: () => this.scoutClick.emit(), ...props }, this.iconPosition === "before" && icon, h("span", { key: '7388a6a872149b4cff84256017ee251196612e1a', class: "content" }, h("slot", { key: '0002a40443d7da3b386a708543185cbc572bb461' })), this.iconPosition === "after" && icon)));
     }
     static get style() { return buttonCss; }
-}, [774, "scout-button", {
+}, [772, "scout-button", {
         "type": [1],
         "href": [1],
         "target": [1],

package/dist/components/scout-button.js.map

@@ -1 +1 @@
-{"file":"scout-button.js","mappings":";;AAAA,MAAM,SAAS,GAAG,67EAA67E;;MCYl8EA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;IACd,IAAI,GAA2C,QAAQ;AAEvD,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEX;;AAEG;IACK,OAAO,GAAY,UAAU;AAErC;;AAEG;AACK,IAAA,IAAI;IACJ,YAAY,GAAuB,OAAO;IAC1C,QAAQ,GAAY,KAAK;AAExB,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,GAAG,GAAG,QAAQ;AAEjD,QAAA,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;AACH,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;QAEP,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;AAErE,QAAA,QACE,CAAC,CAAA,GAAG,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAA,CAAE,EACnE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK,EAAA,EAER,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,EACvC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACN,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutButton","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/button/button.css?tag=scout-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.button {\n  flex: 1;\n  display: inline-flex;\n  height: var(--spacing-10);\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-3);\n  padding: 0 var(--spacing-4);\n  font: var(--type-body-base);\n  border-radius: var(--spacing-2);\n  border: 1px solid transparent;\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.icon {\n  width: var(--spacing-5);\n  height: var(--spacing-5);\n  margin: 0 calc(var(--spacing-1) * -1);\n}\n\n.icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.button.icon-only {\n  aspect-ratio: 1 / 1;\n  justify-content: center;\n  padding: 0;\n}\n\n.button.icon-only .icon {\n  margin: 0;\n}\n\n.button.icon-only .content {\n  /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.button.primary {\n  background-color: var(--color-background-brand-base);\n  color: var(--color-text-brand-inverse);\n\n  &:hover {\n    background-color: var(--color-background-brand-hovered);\n  }\n\n  &:active {\n    background-color: var(--color-background-brand-pressed);\n  }\n}\n\n.button.outlined {\n  background-color: transparent;\n  border-color: var(--color-background-brand-subtle-base);\n  color: var(--color-text-brand-base);\n\n  &:hover {\n    background-color: var(--color-background-brand-subtle-hovered);\n  }\n\n  &:active {\n    background-color: var(--color-background-brand-subtle-pressed);\n  }\n}\n\n.button.text {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--color-text-brand-base);\n\n  &:hover {\n    background-color: var(--color-background-brand-subtle-hovered);\n  }\n\n  &:active {\n    background-color: var(--color-background-brand-subtle-pressed);\n  }\n}\n\n.button.caution {\n  background-color: var(--color-background-caution-bold-base);\n  color: var(--color-text-caution-bold-base);\n\n  &:hover {\n    background-color: var(--color-background-caution-bold-hovered);\n  }\n\n  &:active {\n    background-color: var(--color-background-caution-bold-pressed);\n  }\n}\n\n.button.danger {\n  background-color: var(--color-background-danger-bold-base);\n  color: var(--color-text-danger-bold-base);\n\n  &:hover {\n    background-color: var(--color-background-danger-bold-hovered);\n  }\n\n  &:active {\n    background-color: var(--color-background-danger-bold-pressed);\n  }\n}\n","import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A simple button component.\n */\n@Component({\n  tag: \"scout-button\",\n  styleUrl: \"button.css\",\n  scoped: true,\n})\nexport class ScoutButton {\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() rel?: string;\n\n  /**\n   * The variant primarily affects the color of the button.\n   */\n  @Prop() variant: Variant = \"outlined\";\n\n  /**\n   * An optional icon to display alongside the button text. Must be an SVG string.\n   */\n  @Prop() icon?: string;\n  @Prop() iconPosition: \"before\" | \"after\" = \"after\";\n  @Prop() iconOnly: boolean = false;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n    const props =\n      this.type === \"link\"\n        ? {\n            href: this.href,\n            target: this.target,\n            // This might not be our job, but better safe than sorry.\n            rel:\n              this.rel ??\n              (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          }\n        : {\n            type: this.type,\n          };\n\n    const icon = this.icon && <span class=\"icon\" innerHTML={this.icon} />;\n\n    return (\n      <Tag\n        class={`button ${this.variant} ${this.iconOnly ? \"icon-only\" : \"\"}`}\n        onClick={() => this.scoutClick.emit()}\n        {...props}\n      >\n        {this.iconPosition === \"before\" && icon}\n        <span class=\"content\">\n          <slot />\n        </span>\n        {this.iconPosition === \"after\" && icon}\n      </Tag>\n    );\n  }\n}\n"],"version":3}
+{"file":"scout-button.js","mappings":";;AAAA,MAAM,SAAS,GAAG,01EAA01E;;MCoB/1EA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;IACd,IAAI,GAA2C,QAAQ;AAEvD,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEX;;AAEG;IACK,OAAO,GAAY,UAAU;AAErC;;AAEG;AACK,IAAA,IAAI;IACJ,YAAY,GAAuB,OAAO;IAC1C,QAAQ,GAAY,KAAK;AAExB,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,GAAG,GAAG,QAAQ;AAEjD,QAAA,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;AACH,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;QAEP,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;QAErE,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAA,EAC3C,CAAC,CAAA,GAAG,qDACF,KAAK,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,OAAO,CAAE,CAAA,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,GACjC,KAAK,EAAA,EAER,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,EACvC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACN,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAClC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutButton","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/button/button.css?tag=scout-button","src/components/button/button.tsx"],"sourcesContent":["scout-button {\n  display: inline-block;\n  height: var(--spacing-10);\n\n  .button {\n    flex: 1;\n    display: inline-flex;\n    height: 100%;\n    align-items: center;\n    justify-content: center;\n    gap: var(--spacing-3);\n    padding: 0 var(--spacing-4);\n    font: var(--type-body-base);\n    border-radius: var(--spacing-2);\n    border: 1px solid transparent;\n    cursor: pointer;\n    text-decoration: none;\n    box-sizing: border-box;\n  }\n\n  .icon {\n    width: var(--spacing-5);\n    height: var(--spacing-5);\n    margin: 0 calc(var(--spacing-1) * -1);\n  }\n\n  .icon svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  &.icon-only .button {\n    aspect-ratio: 1 / 1;\n    justify-content: center;\n    padding: 0;\n  }\n\n  &.icon-only .icon {\n    margin: 0;\n  }\n\n  &.icon-only .content {\n    /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  .button.primary {\n    background-color: var(--color-background-brand-base);\n    color: var(--color-text-brand-inverse);\n\n    &:hover {\n      background-color: var(--color-background-brand-hovered);\n    }\n\n    &:active {\n      background-color: var(--color-background-brand-pressed);\n    }\n  }\n\n  .button.outlined {\n    background-color: transparent;\n    border-color: var(--color-background-brand-subtle-base);\n    color: var(--color-text-brand-base);\n\n    &:hover {\n      background-color: var(--color-background-brand-subtle-hovered);\n    }\n\n    &:active {\n      background-color: var(--color-background-brand-subtle-pressed);\n    }\n  }\n\n  .button.text {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--color-text-brand-base);\n\n    &:hover {\n      background-color: var(--color-background-brand-subtle-hovered);\n    }\n\n    &:active {\n      background-color: var(--color-background-brand-subtle-pressed);\n    }\n  }\n\n  .button.caution {\n    background-color: var(--color-background-caution-bold-base);\n    color: var(--color-text-caution-bold-base);\n\n    &:hover {\n      background-color: var(--color-background-caution-bold-hovered);\n    }\n\n    &:active {\n      background-color: var(--color-background-caution-bold-pressed);\n    }\n  }\n\n  .button.danger {\n    background-color: var(--color-background-danger-bold-base);\n    color: var(--color-text-danger-bold-base);\n\n    &:hover {\n      background-color: var(--color-background-danger-bold-hovered);\n    }\n\n    &:active {\n      background-color: var(--color-background-danger-bold-pressed);\n    }\n  }\n}\n","import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  Host,\n  Prop,\n} from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A button component that can be used either as a normal button or as a link.\n * Will render a `<button>` element when the `type` is set to \"button\",\n * \"submit\", or \"reset\", and an `<a>` element when the `type` is set to \"link\".\n */\n@Component({\n  tag: \"scout-button\",\n  styleUrl: \"button.css\",\n})\nexport class ScoutButton {\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() rel?: string;\n\n  /**\n   * The variant primarily affects the color of the button.\n   */\n  @Prop() variant: Variant = \"outlined\";\n\n  /**\n   * An optional icon to display alongside the button text. Must be an SVG string.\n   */\n  @Prop() icon?: string;\n  @Prop() iconPosition: \"before\" | \"after\" = \"after\";\n  @Prop() iconOnly: boolean = false;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n    const props =\n      this.type === \"link\"\n        ? {\n            href: this.href,\n            target: this.target,\n            // This might not be our job, but better safe than sorry.\n            rel:\n              this.rel ??\n              (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          }\n        : {\n            type: this.type,\n          };\n\n    const icon = this.icon && <span class=\"icon\" innerHTML={this.icon} />;\n\n    return (\n      <Host class={this.iconOnly ? \"icon-only\" : \"\"}>\n        <Tag\n          class={`button ${this.variant}`}\n          onClick={() => this.scoutClick.emit()}\n          {...props}\n        >\n          {this.iconPosition === \"before\" && icon}\n          <span class=\"content\">\n            <slot />\n          </span>\n          {this.iconPosition === \"after\" && icon}\n        </Tag>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/scout-card.js

@@ -11,7 +11,7 @@ const ScoutCard$1 = /*@__PURE__*/ proxyCustomElement(class ScoutCard extends H {
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'ffeed5909a251bf61e750ebb575b278e90490945', class: "card" }, h("slot", { key: 'a8d457f36995146e722c2d53ddfb03f36848f6d1' })));
+        return (h("div", { key: '1ea5b0a2ea2a8f342e0153d9e90565cc69e2f336', class: "card" }, h("slot", { key: '328519393a7ad17aa158dea8835f16ebdc0cc7bc' })));
     }
     static get delegatesFocus() { return true; }
     static get style() { return cardCss; }

package/dist/components/scout-checkbox.js

@@ -1,4 +1,4 @@
-import { S as ScoutCheckbox$1, d as defineCustomElement$1 } from './p-C2_wl40t.js';
+import { S as ScoutCheckbox$1, d as defineCustomElement$1 } from './p-CLzh39Ll.js';
 
 const ScoutCheckbox = ScoutCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/scout-divider.js

@@ -11,7 +11,7 @@ const ScoutDivider$1 = /*@__PURE__*/ proxyCustomElement(class ScoutDivider exten
         this.__attachShadow();
     }
     render() {
-        return h(Host, { key: '78c9366fcd393e53b579481d31feafa643b63690' });
+        return h(Host, { key: '6a4d3d0bed1689875ec867b16f0c77f391662fc8' });
     }
     static get delegatesFocus() { return true; }
     static get style() { return dividerCss; }