@scouterna/ui-webc 2.2.2 → 2.2.4

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/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: '22aee29982e7bb00cf76c2a096c4cf40b53e51c4' }, this.label, h("span", { key: '5ce6c501344e3da675d371e4a62794104ec1e6f1', class: "inlineDivider" }), h("input", { key: '81c07b77cd2ccdc66b93067da4eb15b62c87d5fd', 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/components/{p-BkrRT31y.js → p-B_lll43e.js}

@@ -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: '9d30a566a03bfa1b49411878fbaa6bc07d53d2f6' }, h("input", { key: 'e2f2c58a2ec00fce35d27860e6fa37e23d09d040', 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-B_lll43e.js.map
 
-//# sourceMappingURL=p-BkrRT31y.js.map
+//# sourceMappingURL=p-B_lll43e.js.map

package/dist/components/{p-BkrRT31y.js.map → p-B_lll43e.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-B_lll43e.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-C2_wl40t.js → p-CwrP_ZZM.js}

@@ -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: '156e87e7a0d74f3cbc84b9c14a4ecce5b97e2912' }, h("input", { key: '6c70374d9e1f2605d7a0ec3b2216f8b055175e41', 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-CwrP_ZZM.js.map
 
-//# sourceMappingURL=p-C2_wl40t.js.map
+//# sourceMappingURL=p-CwrP_ZZM.js.map

package/dist/components/{p-C2_wl40t.js.map → p-CwrP_ZZM.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-CwrP_ZZM.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

@@ -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,+XAA+X;;MCcpYA,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/**\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';
 
-const buttonCss = ".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 = ".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 ScoutButton$1 = /*@__PURE__*/ proxyCustomElement(class ScoutButton extends H {
     constructor(registerHost) {
@@ -38,8 +38,8 @@ 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: '8f27b9e6a50427afef8d323212742f031f70db94', class: "icon", innerHTML: this.icon });
+        return (h(Tag, { key: '8f59580f38d9eafc86ac2ce9a0243cf94e1e87e0', class: `button ${this.variant} ${this.iconOnly ? "icon-only" : ""}`, onClick: () => this.scoutClick.emit(), ...props }, this.iconPosition === "before" && icon, h("span", { key: 'c6a68e20086b2da562324d4a15a973ba24fca90d', class: "content" }, h("slot", { key: '4d52b30c5addf5389494c994d91ab7f35a51d734' })), this.iconPosition === "after" && icon));
     }
     static get style() { return buttonCss; }
 }, [774, "scout-button", {

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

@@ -1 +1 @@
-{"file":"scout-button.js","mappings":";;AAAA,MAAM,SAAS,GAAG,q5EAAq5E;;MCY15EA,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":[".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,67EAA67E;;MCcl8EA,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 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  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}

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-CwrP_ZZM.js';
 
 const ScoutCheckbox = ScoutCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/scout-field.js

@@ -39,7 +39,7 @@ const ScoutField$1 = /*@__PURE__*/ proxyCustomElement(class ScoutField extends H
         this.errorHidden = false;
     }
     render() {
-        return (h("div", { key: 'faca4ec5b46ef2e8f30ba1d83c9541454c6c42af', class: "field" }, h("label", { key: '38f84753a62d401c34aa5626dfecd7bbb80e24d8', htmlFor: this.inputId, class: "label" }, this.label), h("slot", { key: '328f3c36f3241eae23a0918ad8a1c8eaa7e27027' }), h("p", { key: 'b200a60b5e1948fca8b6922f5046ee3e898ebde6', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && h("p", { key: '09b0acb16e4faefb3eb681ea0eb5229f305a163c', class: "help-text" }, this.helpText)));
+        return (h("div", { key: '9205b4607dc3805cb2df4434abf6fa3adc5ce63a', class: "field" }, h("label", { key: 'ac4a5e25d0e7742244a2e50c9627b77cedaf456a', htmlFor: this.inputId, class: "label" }, this.label), h("slot", { key: 'f1ec47e560f3ed6e528cefef95a21d3ca28232bb' }), h("p", { key: '2b6de5c916264287019f1cbd5c73966eff4a9bbd', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && h("p", { key: '7cb1582085194921f8dde1ecc138fa048cc6fd75', class: "help-text" }, this.helpText)));
     }
     static get style() { return fieldCss; }
 }, [774, "scout-field", {

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

@@ -1 +1 @@
-{"file":"scout-field.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,uaAAua;;MCO3aA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;;AACrB;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,QAAQ;AAEP,IAAA,OAAO;IACP,SAAS,GAAkB,IAAI;IAC/B,WAAW,GAAY,KAAK;;AAKrC,IAAA,YAAY,CAAC,KAA0B,EAAA;QACrC,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM;;AAI7B,IAAA,gBAAgB,CACd,KAOE,EAAA;AAEF,QAAA,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM;AAEhC,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE;AAC1B,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;aAChB;AACL,YAAA,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,iBAAiB;;;IAM9C,SAAS,GAAA;AACP,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;;IAG1B,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAA,EAChB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,OAAO,EAAA,EACxC,IAAI,CAAC,KAAK,CACL,EACR,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACR,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,YAAY,EAAA,WAAA,EAAW,QAAQ,EACrC,EAAA,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAClC,EACH,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,WAAW,EAAE,EAAA,IAAI,CAAC,QAAQ,CAAK,CACtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutField","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/field/field.css?tag=scout-field&encapsulation=scoped","src/components/field/field.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n}\n\n.label {\n  font: var(--type-label-sm);\n  font-weight: 600;\n  color: var(--color-text-base);\n}\n\n.error-text {\n  font: var(--type-label-sm);\n  color: var(--color-text-danger-base);\n  margin: var(--spacing-1) 0 0 0;\n}\n\n.error-text:empty {\n  margin: 0;\n}\n\n.help-text {\n  font: var(--type-label-sm);\n  color: var(--color-gray-600);\n  margin: var(--spacing-1) 0 0 0;\n}\n","import { Component, Element, h, Listen, Prop, State } from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-field\",\n  styleUrl: \"field.css\",\n  scoped: true,\n})\nexport class ScoutField {\n  /**\n   * Label shown above the field.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Help text shown below the field.\n   */\n  @Prop() helpText?: string;\n\n  @State() inputId: string;\n  @State() errorText: string | null = null;\n  @State() errorHidden: boolean = false;\n\n  @Element() hostElement!: HTMLElement;\n\n  @Listen(\"_scoutFieldId\")\n  catchFieldId(event: CustomEvent<string>) {\n    event.stopPropagation();\n    this.inputId = event.detail;\n  }\n\n  @Listen(\"_scoutValidate\")\n  handleValidation(\n    event: CustomEvent<{\n      element:\n        | HTMLButtonElement\n        | HTMLInputElement\n        | HTMLOutputElement\n        | HTMLSelectElement\n        | HTMLTextAreaElement;\n    }>,\n  ) {\n    const { element } = event.detail;\n\n    this.errorHidden = true;\n    if (element.validity.valid) {\n      this.errorText = null;\n    } else {\n      this.errorText = element.validationMessage;\n    }\n  }\n\n  @Listen(\"scoutBlur\")\n  @Listen(\"_scoutInvalid\")\n  showError() {\n    this.errorHidden = false;\n  }\n\n  render() {\n    return (\n      <div class=\"field\">\n        <label htmlFor={this.inputId} class=\"label\">\n          {this.label}\n        </label>\n        <slot />\n        <p class=\"error-text\" aria-live=\"polite\">\n          {!this.errorHidden && this.errorText}\n        </p>\n        {this.helpText && <p class=\"help-text\">{this.helpText}</p>}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"scout-field.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,uaAAua;;MCY3aA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;;AACrB;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,QAAQ;AAEP,IAAA,OAAO;IACP,SAAS,GAAkB,IAAI;IAC/B,WAAW,GAAY,KAAK;;AAKrC,IAAA,YAAY,CAAC,KAA0B,EAAA;QACrC,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM;;AAI7B,IAAA,gBAAgB,CACd,KAOE,EAAA;AAEF,QAAA,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM;AAEhC,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE;AAC1B,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;aAChB;AACL,YAAA,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,iBAAiB;;;IAM9C,SAAS,GAAA;AACP,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;;IAG1B,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAA,EAChB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,OAAO,EAAA,EACxC,IAAI,CAAC,KAAK,CACL,EACR,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACR,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,YAAY,EAAA,WAAA,EAAW,QAAQ,EACrC,EAAA,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAClC,EACH,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,WAAW,EAAE,EAAA,IAAI,CAAC,QAAQ,CAAK,CACtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutField","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/field/field.css?tag=scout-field&encapsulation=scoped","src/components/field/field.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n}\n\n.label {\n  font: var(--type-label-sm);\n  font-weight: 600;\n  color: var(--color-text-base);\n}\n\n.error-text {\n  font: var(--type-label-sm);\n  color: var(--color-text-danger-base);\n  margin: var(--spacing-1) 0 0 0;\n}\n\n.error-text:empty {\n  margin: 0;\n}\n\n.help-text {\n  font: var(--type-label-sm);\n  color: var(--color-gray-600);\n  margin: var(--spacing-1) 0 0 0;\n}\n","import { Component, Element, h, Listen, Prop, State } from \"@stencil/core\";\n\n/**\n * The field component is used to wrap form fields with a label, help text, and\n * error messages. It automatically captures validation events from its child\n * input components and displays error messages accordingly.\n */\n@Component({\n  tag: \"scout-field\",\n  styleUrl: \"field.css\",\n  scoped: true,\n})\nexport class ScoutField {\n  /**\n   * Label shown above the field.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Help text shown below the field.\n   */\n  @Prop() helpText?: string;\n\n  @State() inputId: string;\n  @State() errorText: string | null = null;\n  @State() errorHidden: boolean = false;\n\n  @Element() hostElement!: HTMLElement;\n\n  @Listen(\"_scoutFieldId\")\n  catchFieldId(event: CustomEvent<string>) {\n    event.stopPropagation();\n    this.inputId = event.detail;\n  }\n\n  @Listen(\"_scoutValidate\")\n  handleValidation(\n    event: CustomEvent<{\n      element:\n        | HTMLButtonElement\n        | HTMLInputElement\n        | HTMLOutputElement\n        | HTMLSelectElement\n        | HTMLTextAreaElement;\n    }>,\n  ) {\n    const { element } = event.detail;\n\n    this.errorHidden = true;\n    if (element.validity.valid) {\n      this.errorText = null;\n    } else {\n      this.errorText = element.validationMessage;\n    }\n  }\n\n  @Listen(\"scoutBlur\")\n  @Listen(\"_scoutInvalid\")\n  showError() {\n    this.errorHidden = false;\n  }\n\n  render() {\n    return (\n      <div class=\"field\">\n        <label htmlFor={this.inputId} class=\"label\">\n          {this.label}\n        </label>\n        <slot />\n        <p class=\"error-text\" aria-live=\"polite\">\n          {!this.errorHidden && this.errorText}\n        </p>\n        {this.helpText && <p class=\"help-text\">{this.helpText}</p>}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/scout-input.js

@@ -40,7 +40,7 @@ const ScoutInput$1 = /*@__PURE__*/ proxyCustomElement(class ScoutInput extends M
      */
     disabled = false;
     render() {
-        return (h("input", { key: '15b07e42a3bd97ccc5bfb2d35c97db4a63aa98b9', ref: (el) => this.setInputRef(el), id: this.ariaId, type: this.type, name: this.name, inputMode: this.inputmode, pattern: this.pattern, class: "input", value: this.value, disabled: this.disabled, onInput: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }));
+        return (h("input", { key: '91a90ed63063ef5533308ff1cb61840aec0bb1d3', ref: (el) => this.setInputRef(el), id: this.ariaId, type: this.type, name: this.name, inputMode: this.inputmode, pattern: this.pattern, class: "input", value: this.value, disabled: this.disabled, onInput: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }));
     }
     static get style() { return inputCss; }
 }, [770, "scout-input", {

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

@@ -1 +1 @@
-{"file":"scout-input.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,iWAAiW;;ACoCrW,MAAAA,YACX,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;AAGzB;;;;AAIG;IACK,IAAI,GAAc,MAAM;AAEhC;;AAEG;AACK,IAAA,SAAS;AAEjB;;AAEG;AACK,IAAA,OAAO;AAEf;;AAEG;IACK,KAAK,GAAW,EAAE;AAElB,IAAA,IAAI;AAEZ;;;AAGG;IACK,QAAQ,GAAY,KAAK;IAEjC,MAAM,GAAA;QACJ,QACE,8DACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAC7B,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EACjC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutInput","__stencil_proxyCustomElement"],"sources":["src/components/input/input.css?tag=scout-input&encapsulation=scoped","src/components/input/input.tsx"],"sourcesContent":[".input {\n  height: var(--spacing-10);\n  padding: var(--spacing-2);\n  font: var(--type-body-base);\n  border: 1px solid var(--color-gray-300);\n  border-radius: var(--spacing-2);\n  background-color: var(--color-white);\n  color: var(--color-text-base);\n}\n\n.input:disabled {\n  background-color: var(--color-gray-100);\n  color: var(--color-gray-700);\n  cursor: not-allowed;\n}\n","import {\n  Component,\n  type ComponentInterface,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\nexport type InputType =\n  | \"text\"\n  | \"password\"\n  | \"email\"\n  | \"number\"\n  | \"tel\"\n  | \"url\"\n  // Hack to suggest above value but still allow any other string value\n  | (string & {});\n\nexport type InputMode =\n  | \"none\"\n  | \"text\"\n  | \"decimal\"\n  | \"numeric\"\n  | \"tel\"\n  | \"search\"\n  | \"email\"\n  | \"url\"\n  // Hack to suggest above value but still allow any other string value\n  | (string & {});\n\n@Component({\n  tag: \"scout-input\",\n  styleUrl: \"input.css\",\n  scoped: true,\n})\nexport class ScoutInput\n  extends Mixin(inputMixin)\n  implements ComponentInterface\n{\n  /**\n   * Type of input element. If you need a number input, read the accessibility\n   * section of this MDN article first:\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility\n   */\n  @Prop() type: InputType = \"text\";\n\n  /**\n   * Input mode hints for devices with dynamic keyboards.\n   */\n  @Prop() inputmode?: InputMode;\n\n  /**\n   * Regex pattern for input validation.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Value of the input element, in case you want to control it yourself.\n   */\n  @Prop() value: string = \"\";\n\n  @Prop() name: string;\n\n  /**\n   * Whether the input is disabled. Disabled inputs are not editable, excluded\n   * from tab order and are not validated.\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <input\n        ref={(el) => this.setInputRef(el)}\n        id={this.ariaId}\n        type={this.type}\n        name={this.name}\n        inputMode={this.inputmode}\n        pattern={this.pattern}\n        class=\"input\"\n        value={this.value}\n        disabled={this.disabled}\n        onInput={() => this.onInput()}\n        onBlur={() => this.onBlur()}\n        onInvalid={() => this.onInvalid()}\n      />\n    );\n  }\n}\n"],"version":3}
+{"file":"scout-input.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,iWAAiW;;AC0CrW,MAAAA,YACX,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;AAGzB;;;;AAIG;IACK,IAAI,GAAc,MAAM;AAEhC;;AAEG;AACK,IAAA,SAAS;AAEjB;;AAEG;AACK,IAAA,OAAO;AAEf;;AAEG;IACK,KAAK,GAAW,EAAE;AAElB,IAAA,IAAI;AAEZ;;;AAGG;IACK,QAAQ,GAAY,KAAK;IAEjC,MAAM,GAAA;QACJ,QACE,8DACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAC7B,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EACjC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutInput","__stencil_proxyCustomElement"],"sources":["src/components/input/input.css?tag=scout-input&encapsulation=scoped","src/components/input/input.tsx"],"sourcesContent":[".input {\n  height: var(--spacing-10);\n  padding: var(--spacing-2);\n  font: var(--type-body-base);\n  border: 1px solid var(--color-gray-300);\n  border-radius: var(--spacing-2);\n  background-color: var(--color-white);\n  color: var(--color-text-base);\n}\n\n.input:disabled {\n  background-color: var(--color-gray-100);\n  color: var(--color-gray-700);\n  cursor: not-allowed;\n}\n","import {\n  Component,\n  type ComponentInterface,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\nexport type InputType =\n  | \"text\"\n  | \"password\"\n  | \"email\"\n  | \"number\"\n  | \"tel\"\n  | \"url\"\n  // Hack to suggest above value but still allow any other string value\n  | (string & {});\n\nexport type InputMode =\n  | \"none\"\n  | \"text\"\n  | \"decimal\"\n  | \"numeric\"\n  | \"tel\"\n  | \"search\"\n  | \"email\"\n  | \"url\"\n  // Hack to suggest above value but still allow any other string value\n  | (string & {});\n\n/**\n * The input component is a basic text input field that can be used to capture\n * user input. It supports various types and input modes for different use\n * cases. 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-input\",\n  styleUrl: \"input.css\",\n  scoped: true,\n})\nexport class ScoutInput\n  extends Mixin(inputMixin)\n  implements ComponentInterface\n{\n  /**\n   * Type of input element. If you need a number input, read the accessibility\n   * section of this MDN article first:\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility\n   */\n  @Prop() type: InputType = \"text\";\n\n  /**\n   * Input mode hints for devices with dynamic keyboards.\n   */\n  @Prop() inputmode?: InputMode;\n\n  /**\n   * Regex pattern for input validation.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Value of the input element, in case you want to control it yourself.\n   */\n  @Prop() value: string = \"\";\n\n  @Prop() name: string;\n\n  /**\n   * Whether the input is disabled. Disabled inputs are not editable, excluded\n   * from tab order and are not validated.\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <input\n        ref={(el) => this.setInputRef(el)}\n        id={this.ariaId}\n        type={this.type}\n        name={this.name}\n        inputMode={this.inputmode}\n        pattern={this.pattern}\n        class=\"input\"\n        value={this.value}\n        disabled={this.disabled}\n        onInput={() => this.onInput()}\n        onBlur={() => this.onBlur()}\n        onInvalid={() => this.onInvalid()}\n      />\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-fr5CaUFu.js';
-import { d as defineCustomElement$3 } from './p-C2_wl40t.js';
-import { d as defineCustomElement$2 } from './p-BkrRT31y.js';
+import { d as defineCustomElement$3 } from './p-CwrP_ZZM.js';
+import { d as defineCustomElement$2 } from './p-B_lll43e.js';
 
 const listViewItemCss = ":host{display:flex}.button{flex:1;display:flex;align-items:center;text-align:inherit;min-height:var(--spacing-12);color:var(--color-text-base);padding:var(--spacing-2) var(--spacing-4);cursor:pointer;border:none;background-color:transparent;-webkit-text-decoration:none;text-decoration:none}.button:hover{background-color:var(--color-background-brand-subtle-hovered)}.prefix-icon,.suffix-icon{display:flex;align-items:center;height:var(--spacing-6);color:var(--color-neutral-700)}.prefix-icon svg,.suffix-icon svg,.prefix-icon .icon,.suffix-icon .icon{width:var(--spacing-6);height:var(--spacing-6)}.prefix-icon{justify-content:flex-start;width:var(--spacing-14)}.suffix-icon{justify-content:flex-end;width:var(--spacing-8)}.suffix-icon .icon{background-color:currentColor;-webkit-mask-image:var(--icon);mask-image:var(--icon);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.content{flex:1;display:flex;flex-direction:column;justify-content:center}.primary{font:var(--type-body-base)}.secondary{font:var(--type-body-sm);color:var(--color-neutral-700)}";
 

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

@@ -1,4 +1,4 @@
-import { S as ScoutRadioButton$1, d as defineCustomElement$1 } from './p-BkrRT31y.js';
+import { S as ScoutRadioButton$1, d as defineCustomElement$1 } from './p-B_lll43e.js';
 
 const ScoutRadioButton = ScoutRadioButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/scout-select.js

@@ -28,7 +28,7 @@ const ScoutSelect$1 = /*@__PURE__*/ proxyCustomElement(class ScoutSelect extends
     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(${chevronDownSvg})` }, "aria-hidden": "true" })));
+        return (h("div", { key: '15e5237281f534b083659425bb6a0944e9b296eb', class: "select-wrapper" }, h("select", { key: '5f8ba02781864c041bfeaffbcdcf6fc4185c45f5', id: this.ariaId, name: this.name, class: "select", disabled: this.disabled, onChange: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }, h("slot", { key: '0f593e02a74e59aef1a2c2647df42712a7558d96' })), h("span", { key: '37b45aa85cf7cc9a3dbbcc5b575ff824942875da', class: "select-icon", style: { "--icon-chevron": `url(${chevronDownSvg})` }, "aria-hidden": "true" })));
     }
     static get style() { return selectCss; }
 }, [774, "scout-select", {

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

@@ -1 +1 @@
-{"file":"scout-select.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,ggBAAggB;;ACAvhB,MAAM,SAAS,GAAG,mvCAAmvC;;ACexvC,MAAAA,aACX,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;AAGzB;;AAEG;IACK,KAAK,GAAW,EAAE;AAE1B;;;AAGG;IACK,QAAQ,GAAY,KAAK;AAEzB,IAAA,IAAI;IAEZ,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAC9B,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,EAEjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,gBAAgB,EAAE,CAAO,IAAA,EAAAC,cAAW,CAAG,CAAA,CAAA,EAAE,EAAA,aAAA,EACtC,MAAM,EAClB,CAAA,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutSelect","__stencil_proxyCustomElement","chevronIcon"],"sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/chevron-down.svg","src/components/select/select.css?tag=scout-select&encapsulation=scoped","src/components/select/select.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-chevron-down\"\n>\n  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M6 9l6 6l6 -6\" />\n</svg>",".select-wrapper {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n}\n\n.select {\n  width: 100%;\n  height: var(--spacing-10);\n  padding: var(--spacing-2);\n  padding-right: var(--spacing-8);\n  font: var(--type-body-base);\n  border: 1px solid var(--color-gray-300);\n  border-radius: var(--spacing-2);\n  background-color: var(--color-white);\n  color: var(--color-text-base);\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n}\n\n.select:hover:not(:disabled) {\n  border-color: var(--color-gray-400);\n}\n\n.select:focus {\n  outline: 2px solid var(--color-background-brand-base);\n  outline-offset: 1px;\n}\n\n.select:disabled {\n  background-color: var(--color-gray-100);\n  color: var(--color-gray-700);\n  cursor: not-allowed;\n}\n\n.select-icon {\n  position: absolute;\n  right: var(--spacing-2);\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--spacing-5);\n  height: var(--spacing-5);\n  background-color: var(--color-text-base);\n  mask-image: var(--icon-chevron);\n  mask-repeat: no-repeat;\n  mask-position: center;\n  mask-size: contain;\n  pointer-events: none;\n}\n\n.select:disabled + .select-icon {\n  background-color: var(--color-gray-500);\n}\n","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":"scout-select.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,ggBAAggB;;ACAvhB,MAAM,SAAS,GAAG,mvCAAmvC;;ACoBxvC,MAAAA,aACX,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;AAGzB;;AAEG;IACK,KAAK,GAAW,EAAE;AAE1B;;;AAGG;IACK,QAAQ,GAAY,KAAK;AAEzB,IAAA,IAAI;IAEZ,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAC9B,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,EAEjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,gBAAgB,EAAE,CAAO,IAAA,EAAAC,cAAW,CAAG,CAAA,CAAA,EAAE,EAAA,aAAA,EACtC,MAAM,EAClB,CAAA,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutSelect","__stencil_proxyCustomElement","chevronIcon"],"sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/chevron-down.svg","src/components/select/select.css?tag=scout-select&encapsulation=scoped","src/components/select/select.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-chevron-down\"\n>\n  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M6 9l6 6l6 -6\" />\n</svg>",".select-wrapper {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n}\n\n.select {\n  width: 100%;\n  height: var(--spacing-10);\n  padding: var(--spacing-2);\n  padding-right: var(--spacing-8);\n  font: var(--type-body-base);\n  border: 1px solid var(--color-gray-300);\n  border-radius: var(--spacing-2);\n  background-color: var(--color-white);\n  color: var(--color-text-base);\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n}\n\n.select:hover:not(:disabled) {\n  border-color: var(--color-gray-400);\n}\n\n.select:focus {\n  outline: 2px solid var(--color-background-brand-base);\n  outline-offset: 1px;\n}\n\n.select:disabled {\n  background-color: var(--color-gray-100);\n  color: var(--color-gray-700);\n  cursor: not-allowed;\n}\n\n.select-icon {\n  position: absolute;\n  right: var(--spacing-2);\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--spacing-5);\n  height: var(--spacing-5);\n  background-color: var(--color-text-base);\n  mask-image: var(--icon-chevron);\n  mask-repeat: no-repeat;\n  mask-position: center;\n  mask-size: contain;\n  pointer-events: none;\n}\n\n.select:disabled + .select-icon {\n  background-color: var(--color-gray-500);\n}\n","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"],"version":3}

package/dist/components/scout-switch.js

@@ -37,7 +37,7 @@ const ScoutSwitch$1 = /*@__PURE__*/ proxyCustomElement(class ScoutSwitch extends
     }
     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: '22aee29982e7bb00cf76c2a096c4cf40b53e51c4' }, this.label, h("span", { key: '5ce6c501344e3da675d371e4a62794104ec1e6f1', class: "inlineDivider" }), h("input", { key: '81c07b77cd2ccdc66b93067da4eb15b62c87d5fd', 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/components/scout-switch.js.map

@@ -1 +1 @@
-{"file":"scout-switch.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,ktDAAktD;;ACkBvtD,MAAAA,aACX,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;;;AAGzB;;AAEG;IACK,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEJ,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,EACD,IAAI,CAAC,KAAK,EACX,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAQ,CAAA,EACnC,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,QAAQ,EACG,iBAAA,EAAA,IAAI,CAAC,cAAc,EACrB,eAAA,EAAA,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;aACrB,EACD,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,CACjC,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutSwitch","__stencil_proxyCustomElement"],"sources":["src/components/switch/switch.css?tag=scout-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":[".switch {\n  width: var(--spacing-10);\n  height: var(--spacing-6);\n  appearance: none;\n  -webkit-appearance: none;\n  border-radius: var(--spacing-8);\n  background-color: var(--color-text-brand-inverse);\n  border: 2px solid var(--color-gray-300);\n  position: relative;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  transition-property: border-color;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  cursor: pointer;\n  --switch-ball-padding: calc(var(--spacing-1) / 4);\n  --switch-ball-size: calc(var(--spacing-5) - var(--switch-ball-padding) * 2);\n}\n\n.switch:hover {\n  transition-property: none;\n  border-color: var(--color-gray-400);\n  background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.switch:active {\n  background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.switch:checked {\n  border-color: var(--color-background-brand-base);\n}\n\n.switch:hover::before {\n  background-color: var(--color-gray-400);\n}\n\n.switch::before {\n  content: \"\";\n  background-color: var(--color-gray-300);\n  width: var(--switch-ball-size);\n  height: var(--switch-ball-size);\n  border-radius: 50%;\n  position: absolute;\n  top: var(--switch-ball-padding);\n  left: var(--switch-ball-padding);\n  transition-duration: 0.3s;\n  transition-property: left, right;\n}\n.switch:checked::before {\n  content: \"\";\n  background-color: var(--color-background-brand-base);\n  left: calc(100% - calc(var(--switch-ball-size) + var(--switch-ball-padding)));\n}\n\n.switch:disabled {\n  pointer-events: none;\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n\n.switch:disabled::before {\n  background-color: var(--color-gray-300);\n}\n\nlabel {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  font: var(--type-label-base);\n  color: var(--color-text-base);\n}\n\n.inlineDivider {\n  width: var(--spacing-2);\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-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":"scout-switch.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,ktDAAktD;;ACuBvtD,MAAAA,aACX,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;;;AAGzB;;AAEG;IACK,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEJ,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,EACD,IAAI,CAAC,KAAK,EACX,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAQ,CAAA,EACnC,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,QAAQ,EACG,iBAAA,EAAA,IAAI,CAAC,cAAc,EACrB,eAAA,EAAA,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;aACrB,EACD,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,CACjC,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutSwitch","__stencil_proxyCustomElement"],"sources":["src/components/switch/switch.css?tag=scout-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":[".switch {\n  width: var(--spacing-10);\n  height: var(--spacing-6);\n  appearance: none;\n  -webkit-appearance: none;\n  border-radius: var(--spacing-8);\n  background-color: var(--color-text-brand-inverse);\n  border: 2px solid var(--color-gray-300);\n  position: relative;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  transition-property: border-color;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  cursor: pointer;\n  --switch-ball-padding: calc(var(--spacing-1) / 4);\n  --switch-ball-size: calc(var(--spacing-5) - var(--switch-ball-padding) * 2);\n}\n\n.switch:hover {\n  transition-property: none;\n  border-color: var(--color-gray-400);\n  background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.switch:active {\n  background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.switch:checked {\n  border-color: var(--color-background-brand-base);\n}\n\n.switch:hover::before {\n  background-color: var(--color-gray-400);\n}\n\n.switch::before {\n  content: \"\";\n  background-color: var(--color-gray-300);\n  width: var(--switch-ball-size);\n  height: var(--switch-ball-size);\n  border-radius: 50%;\n  position: absolute;\n  top: var(--switch-ball-padding);\n  left: var(--switch-ball-padding);\n  transition-duration: 0.3s;\n  transition-property: left, right;\n}\n.switch:checked::before {\n  content: \"\";\n  background-color: var(--color-background-brand-base);\n  left: calc(100% - calc(var(--switch-ball-size) + var(--switch-ball-padding)));\n}\n\n.switch:disabled {\n  pointer-events: none;\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n\n.switch:disabled::before {\n  background-color: var(--color-gray-300);\n}\n\nlabel {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  font: var(--type-label-base);\n  color: var(--color-text-base);\n}\n\n.inlineDivider {\n  width: var(--spacing-2);\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 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"],"version":3}

package/dist/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-01-03T14:23:41",
+  "timestamp": "2026-01-03T17:56:00",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.3",
@@ -11,7 +11,7 @@
       "encapsulation": "shadow",
       "tag": "scout-app-bar",
       "readme": "# scout-app-bar\n",
-      "docs": "",
+      "docs": "The App Bar component is used at the top of a page to display a title and\noptional prefix and suffix actions. It's typically used to provide a\nnative-like navigation experience.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -286,7 +286,7 @@
       "encapsulation": "scoped",
       "tag": "scout-button",
       "readme": "# scout-button\n\n\n",
-      "docs": "A simple button component.",
+      "docs": "A button component that can be used either as a normal button or as a link.\nWill 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\".",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -589,7 +589,7 @@
       "encapsulation": "scoped",
       "tag": "scout-checkbox",
       "readme": "# scout-checkbox\n",
-      "docs": "",
+      "docs": "The checkbox component is used to let users select one or more options from a\nset. For toggling a single option, consider using the Switch component\ninstead. When used in a form, make sure to wrap it in a Field component to\ndisplay a label, help text, and error messages.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -906,7 +906,7 @@
       "encapsulation": "scoped",
       "tag": "scout-field",
       "readme": "# scout-field\n",
-      "docs": "",
+      "docs": "The field component is used to wrap form fields with a label, help text, and\nerror messages. It automatically captures validation events from its child\ninput components and displays error messages accordingly.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -993,7 +993,7 @@
       "encapsulation": "scoped",
       "tag": "scout-input",
       "readme": "# scout-input\n",
-      "docs": "",
+      "docs": "The input component is a basic text input field that can be used to capture\nuser input. It supports various types and input modes for different use\ncases. When used in a form, make sure to wrap it in a Field component to\ndisplay a label, help text, and error messages.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -2057,7 +2057,7 @@
       "encapsulation": "scoped",
       "tag": "scout-radio-button",
       "readme": "# scout-radio-button\n",
-      "docs": "",
+      "docs": "The radio button component is used to let users select one option from a set.\nWhen used in a form, make sure to wrap it in a Field component to display a\nlabel, help text, and error messages.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -2355,7 +2355,7 @@
       "encapsulation": "scoped",
       "tag": "scout-select",
       "readme": "# scout-select\n\nA styled native select component for choosing from a list of options.\n\n## Usage\n\n```html\n<scout-select>\n  <option value=\"\">Select an option</option>\n  <option value=\"1\">Option 1</option>\n  <option value=\"2\">Option 2</option>\n  <option value=\"3\">Option 3</option>\n</scout-select>\n```\n\n### With Field\n\n```html\n<scout-field label=\"Choose your option\">\n  <scout-select>\n    <option value=\"\">Select an option</option>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Option 2</option>\n  </scout-select>\n</scout-field>\n```\n",
-      "docs": "A styled native select component for choosing from a list of options.",
+      "docs": "The select component is a dropdown menu that allows users to select one\noption from a list. When used in a form, make sure to wrap it in a Field\ncomponent to display a label, help text, and error messages.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -2675,7 +2675,7 @@
       "encapsulation": "shadow",
       "tag": "scout-switch",
       "readme": "# scout-switch\n",
-      "docs": "",
+      "docs": "The switch component is used to toggle between two states, on and off.\nBehaves like a checkbox. When used in a form, make sure to wrap it in a Field\ncomponent to display a label, help text, and error messages.",
       "docsTags": [],
       "usage": {},
       "props": [

package/dist/esm/scout-app-bar.entry.js

@@ -8,7 +8,7 @@ const ScoutAppBar = class {
     }
     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; }
 };

package/dist/esm/scout-app-bar.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"scout-app-bar.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,+XAA+X;;MCSpY,WAAW,GAAA,MAAA;;;;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;;;;;;;;"}
+{"version":3,"file":"scout-app-bar.entry.js","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/**\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"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,+XAA+X;;MCcpY,WAAW,GAAA,MAAA;;;;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;;;;;;;;"}

package/dist/esm/scout-button.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-ksA_9NPe.js';
 
-const buttonCss = ".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 = ".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 ScoutButton = class {
     constructor(hostRef) {
@@ -35,8 +35,8 @@ const ScoutButton = class {
             : {
                 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: '8f27b9e6a50427afef8d323212742f031f70db94', class: "icon", innerHTML: this.icon });
+        return (h(Tag, { key: '8f59580f38d9eafc86ac2ce9a0243cf94e1e87e0', class: `button ${this.variant} ${this.iconOnly ? "icon-only" : ""}`, onClick: () => this.scoutClick.emit(), ...props }, this.iconPosition === "before" && icon, h("span", { key: 'c6a68e20086b2da562324d4a15a973ba24fca90d', class: "content" }, h("slot", { key: '4d52b30c5addf5389494c994d91ab7f35a51d734' })), this.iconPosition === "after" && icon));
     }
 };
 ScoutButton.style = buttonCss;

package/dist/esm/scout-button.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"scout-button.entry.js","sources":["src/components/button/button.css?tag=scout-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":[".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"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,q5EAAq5E;;MCY15E,WAAW,GAAA,MAAA;;;;;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;;;;;;;"}
+{"version":3,"file":"scout-button.entry.js","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 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  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"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,67EAA67E;;MCcl8E,WAAW,GAAA,MAAA;;;;;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;;;;;;;"}