@scouterna/ui-webc 2.2.3 → 2.2.5

package/dist/cjs/scout-switch.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"scout-switch.entry.cjs.js","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"],"names":["Mixin","inputMixin","h"],"mappings":";;;;;AAAA,MAAM,SAAS,GAAG,ktDAAktD;;ACkBvtD,MAAA,WACX,GAAA,cAAQA,WAAK,CAACC,qBAAU,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,QACEC,QAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,IAAI,CAAC,KAAK,EACXA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAQ,CAAA,EACnCA,OACE,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;;;;;;;;"}
+{"version":3,"file":"scout-switch.entry.cjs.js","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"],"names":["Mixin","inputMixin","h"],"mappings":";;;;;AAAA,MAAM,SAAS,GAAG,ktDAAktD;;ACuBvtD,MAAA,WACX,GAAA,cAAQA,WAAK,CAACC,qBAAU,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,QACEC,QAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,IAAI,CAAC,KAAK,EACXA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAQ,CAAA,EACnCA,OACE,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;;;;;;;;"}

package/dist/cjs/ui-webc.cjs.js

@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["scout-list-view-item.cjs",[[785,"scout-list-view-item",{"icon":[1],"primary":[1],"secondary":[1],"type":[1],"href":[1],"target":[1],"rel":[1],"name":[1],"value":[1],"checked":[4]}]]],["scout-app-bar.cjs",[[785,"scout-app-bar",{"titleText":[1,"title-text"]}]]],["scout-bottom-bar.cjs",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[785,"scout-bottom-bar-item",{"type":[1],"href":[1],"target":[1],"rel":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[774,"scout-button",{"type":[1],"href":[1],"target":[1],"rel":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"]}]]],["scout-card.cjs",[[273,"scout-card"]]],["scout-divider.cjs",[[273,"scout-divider"]]],["scout-field.cjs",[[774,"scout-field",{"label":[1],"helpText":[1,"help-text"],"inputId":[32],"errorText":[32],"errorHidden":[32]},[[0,"_scoutFieldId","catchFieldId"],[0,"_scoutValidate","handleValidation"],[0,"scoutBlur","showError"],[0,"_scoutInvalid","showError"]]]]],["scout-input.cjs",[[770,"scout-input",{"validate":[16],"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"name":[1],"disabled":[4],"ariaId":[32]}]]],["scout-link.cjs",[[785,"scout-link",{"href":[1],"label":[1],"rel":[1],"linkAriaLabel":[1,"link-aria-label"],"type":[1],"target":[1]}]]],["scout-list-view.cjs",[[273,"scout-list-view",null,[[0,"scoutChecked","onScoutChecked"]]]]],["scout-list-view-subheader.cjs",[[785,"scout-list-view-subheader",{"text":[1],"headingLevel":[1,"heading-level"]}]]],["scout-loader.cjs",[[769,"scout-loader",{"text":[1],"size":[1]}]]],["scout-select.cjs",[[774,"scout-select",{"validate":[16],"value":[1],"disabled":[4],"name":[1],"ariaId":[32]}]]],["scout-stack.cjs",[[785,"scout-stack",{"direction":[1],"gapSize":[1,"gap-size"]}]]],["scout-switch.cjs",[[785,"scout-switch",{"validate":[16],"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]],["scout-checkbox_2.cjs",[[770,"scout-checkbox",{"validate":[16],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}],[770,"scout-radio-button",{"validate":[16],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}]]]], options);
+  return index.bootstrapLazy([["scout-list-view-item.cjs",[[785,"scout-list-view-item",{"icon":[1],"primary":[1],"secondary":[1],"type":[1],"href":[1],"target":[1],"rel":[1],"name":[1],"value":[1],"checked":[4],"disabled":[4]}]]],["scout-app-bar.cjs",[[785,"scout-app-bar",{"titleText":[1,"title-text"]}]]],["scout-bottom-bar.cjs",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[785,"scout-bottom-bar-item",{"type":[1],"href":[1],"target":[1],"rel":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[772,"scout-button",{"type":[1],"href":[1],"target":[1],"rel":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"]}]]],["scout-card.cjs",[[273,"scout-card"]]],["scout-divider.cjs",[[273,"scout-divider"]]],["scout-field.cjs",[[774,"scout-field",{"label":[1],"helpText":[1,"help-text"],"inputId":[32],"errorText":[32],"errorHidden":[32]},[[0,"_scoutFieldId","catchFieldId"],[0,"_scoutValidate","handleValidation"],[0,"scoutBlur","showError"],[0,"_scoutInvalid","showError"]]]]],["scout-input.cjs",[[770,"scout-input",{"validate":[16],"size":[1],"variant":[1],"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"name":[1],"disabled":[4],"placeholder":[1],"ariaId":[32]}]]],["scout-link.cjs",[[785,"scout-link",{"href":[1],"label":[1],"rel":[1],"linkAriaLabel":[1,"link-aria-label"],"type":[1],"target":[1]}]]],["scout-list-view.cjs",[[273,"scout-list-view",null,[[0,"scoutChecked","onScoutChecked"]]]]],["scout-list-view-subheader.cjs",[[785,"scout-list-view-subheader",{"text":[1],"headingLevel":[1,"heading-level"]}]]],["scout-loader.cjs",[[769,"scout-loader",{"text":[1],"size":[1]}]]],["scout-select.cjs",[[774,"scout-select",{"validate":[16],"value":[1],"disabled":[4],"name":[1],"ariaId":[32]}]]],["scout-stack.cjs",[[785,"scout-stack",{"direction":[1],"gapSize":[1,"gap-size"]}]]],["scout-switch.cjs",[[785,"scout-switch",{"validate":[16],"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]],["scout-checkbox_2.cjs",[[770,"scout-checkbox",{"validate":[16],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}],[770,"scout-radio-button",{"validate":[16],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/app-bar/app-bar.css

@@ -4,7 +4,8 @@
 }
 
 ::slotted(scout-button) {
-  height: 100%;
+  /* biome-ignore lint/complexity/noImportantStyles: This is a cheeky override, so we're good with it */
+  height: 100% !important;
 }
 
 .container {

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

@@ -1,8 +1,13 @@
 import { h } from "@stencil/core";
+/**
+ * The App Bar component is used at the top of a page to display a title and
+ * optional prefix and suffix actions. It's typically used to provide a
+ * native-like navigation experience.
+ */
 export class ScoutAppBar {
     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 is() { return "scout-app-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["../../../src/components/app-bar/app-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,WAAW;IACd,SAAS,CAAU;IAE3B,MAAM;QACJ,OAAO,CACL,+DAAQ,KAAK,EAAC,WAAW;YACvB,6DAAM,IAAI,EAAC,QAAQ,GAAG;YACtB,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO;YACzC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACf,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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":"app-bar.js","sourceRoot":"","sources":["../../../src/components/app-bar/app-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;GAIG;AAQH,MAAM,OAAO,WAAW;IACd,SAAS,CAAU;IAE3B,MAAM;QACJ,OAAO,CACL,+DAAQ,KAAK,EAAC,WAAW;YACvB,6DAAM,IAAI,EAAC,QAAQ,GAAG;YACtB,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO;YACzC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACf,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -1,118 +1,99 @@
-:host {
+scout-button {
   display: inline-block;
-}
-
-.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 {
-  width: var(--spacing-5);
-  height: var(--spacing-5);
-  margin: 0 calc(var(--spacing-1) * -1);
-}
-
-.icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-.button.icon-only {
-  aspect-ratio: 1 / 1;
-  justify-content: center;
-  padding: 0;
-}
-
-.button.icon-only .icon {
-  margin: 0;
-}
-
-.button.icon-only .content {
-  /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
 }
-
-.button.primary {
-  background-color: var(--color-background-brand-base);
-  color: var(--color-text-brand-inverse);
-}
-
-.button.primary:hover {
-    background-color: var(--color-background-brand-hovered);
+scout-button .button {
+    flex: 1;
+    display: inline-flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-3);
+    padding: 0 var(--spacing-4);
+    font: var(--type-body-base);
+    border-radius: var(--spacing-2);
+    border: 1px solid transparent;
+    cursor: pointer;
+    -webkit-text-decoration: none;
+    text-decoration: none;
+    box-sizing: border-box;
   }
-
-.button.primary:active {
-    background-color: var(--color-background-brand-pressed);
+scout-button .icon {
+    width: var(--spacing-5);
+    height: var(--spacing-5);
+    margin: 0 calc(var(--spacing-1) * -1);
   }
-
-.button.outlined {
-  background-color: transparent;
-  border-color: var(--color-background-brand-subtle-base);
-  color: var(--color-text-brand-base);
-}
-
-.button.outlined:hover {
-    background-color: var(--color-background-brand-subtle-hovered);
+scout-button .icon svg {
+    width: 100%;
+    height: 100%;
   }
-
-.button.outlined:active {
-    background-color: var(--color-background-brand-subtle-pressed);
+scout-button.icon-only .button {
+    aspect-ratio: 1 / 1;
+    justify-content: center;
+    padding: 0;
   }
-
-.button.text {
-  background-color: transparent;
-  border-color: transparent;
-  color: var(--color-text-brand-base);
-}
-
-.button.text:hover {
-    background-color: var(--color-background-brand-subtle-hovered);
+scout-button.icon-only .icon {
+    margin: 0;
   }
-
-.button.text:active {
-    background-color: var(--color-background-brand-subtle-pressed);
+scout-button.icon-only .content {
+    /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
   }
-
-.button.caution {
-  background-color: var(--color-background-caution-bold-base);
-  color: var(--color-text-caution-bold-base);
-}
-
-.button.caution:hover {
-    background-color: var(--color-background-caution-bold-hovered);
+scout-button .button.primary {
+    background-color: var(--color-background-brand-base);
+    color: var(--color-text-brand-inverse);
   }
-
-.button.caution:active {
-    background-color: var(--color-background-caution-bold-pressed);
+scout-button .button.primary:hover {
+      background-color: var(--color-background-brand-hovered);
+    }
+scout-button .button.primary:active {
+      background-color: var(--color-background-brand-pressed);
+    }
+scout-button .button.outlined {
+    background-color: transparent;
+    border-color: var(--color-background-brand-subtle-base);
+    color: var(--color-text-brand-base);
   }
-
-.button.danger {
-  background-color: var(--color-background-danger-bold-base);
-  color: var(--color-text-danger-bold-base);
-}
-
-.button.danger:hover {
-    background-color: var(--color-background-danger-bold-hovered);
+scout-button .button.outlined:hover {
+      background-color: var(--color-background-brand-subtle-hovered);
+    }
+scout-button .button.outlined:active {
+      background-color: var(--color-background-brand-subtle-pressed);
+    }
+scout-button .button.text {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-text-brand-base);
+  }
+scout-button .button.text:hover {
+      background-color: var(--color-background-brand-subtle-hovered);
+    }
+scout-button .button.text:active {
+      background-color: var(--color-background-brand-subtle-pressed);
+    }
+scout-button .button.caution {
+    background-color: var(--color-background-caution-bold-base);
+    color: var(--color-text-caution-bold-base);
   }
-
-.button.danger:active {
-    background-color: var(--color-background-danger-bold-pressed);
+scout-button .button.caution:hover {
+      background-color: var(--color-background-caution-bold-hovered);
+    }
+scout-button .button.caution:active {
+      background-color: var(--color-background-caution-bold-pressed);
+    }
+scout-button .button.danger {
+    background-color: var(--color-background-danger-bold-base);
+    color: var(--color-text-danger-bold-base);
   }
+scout-button .button.danger:hover {
+      background-color: var(--color-background-danger-bold-hovered);
+    }
+scout-button .button.danger:active {
+      background-color: var(--color-background-danger-bold-pressed);
+    }

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

@@ -1,6 +1,8 @@
-import { h } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 /**
- * A simple button component.
+ * A button component that can be used either as a normal button or as a link.
+ * Will render a `<button>` element when the `type` is set to "button",
+ * "submit", or "reset", and an `<a>` element when the `type` is set to "link".
  */
 export class ScoutButton {
     type = "button";
@@ -31,11 +33,10 @@ export class ScoutButton {
             : {
                 type: this.type,
             };
-        const icon = this.icon && h("span", { key: '4a3e7eb143e3cf53d6a6327163be00947d3cf370', class: "icon", innerHTML: this.icon });
-        return (h(Tag, { key: 'd7807c803a4032c6a48c9ffbc08ea1b4bb845058', class: `button ${this.variant} ${this.iconOnly ? "icon-only" : ""}`, onClick: () => this.scoutClick.emit(), ...props }, this.iconPosition === "before" && icon, h("span", { key: 'f89787ee6e018587d87c1656d32c1b438263d8c9', class: "content" }, h("slot", { key: '31567811c1d3151aaa74546df5c50fc01a41d582' })), this.iconPosition === "after" && icon));
+        const icon = this.icon && h("span", { key: '0f03bad87dbcaf10cc387fd20121bd6b3ecdf42d', class: "icon", innerHTML: this.icon });
+        return (h(Host, { key: '7a2f998327c5e3dc7139c11f3fcbbe827346c0ee', class: this.iconOnly ? "icon-only" : "" }, h(Tag, { key: 'cabe4acf010df2880a83d5b27f2e885bf326673c', class: `button ${this.variant}`, onClick: () => this.scoutClick.emit(), ...props }, this.iconPosition === "before" && icon, h("span", { key: '7388a6a872149b4cff84256017ee251196612e1a', class: "content" }, h("slot", { key: '0002a40443d7da3b386a708543185cbc572bb461' })), this.iconPosition === "after" && icon)));
     }
     static get is() { return "scout-button"; }
-    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["button.css"]

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAI7E;;GAEG;AAMH,MAAM,OAAO,WAAW;IACd,IAAI,GAA2C,QAAQ,CAAC;IAExD,IAAI,CAAU;IACd,MAAM,CAAU;IAChB,GAAG,CAAU;IAErB;;OAEG;IACK,OAAO,GAAY,UAAU,CAAC;IAEtC;;OAEG;IACK,IAAI,CAAU;IACd,YAAY,GAAuB,OAAO,CAAC;IAC3C,QAAQ,GAAY,KAAK,CAAC;IAEzB,UAAU,CAAqB;IAExC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAElD,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,yDAAyD;gBACzD,GAAG,EACD,IAAI,CAAC,GAAG;oBACR,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC;aACjE;YACH,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC;QAER,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QAEtE,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,EACnE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK;YAER,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI;YACvC,6DAAM,KAAK,EAAC,SAAS;gBACnB,8DAAQ,CACH;YACN,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAClC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AAIvB;;;;GAIG;AAKH,MAAM,OAAO,WAAW;IACd,IAAI,GAA2C,QAAQ,CAAC;IAExD,IAAI,CAAU;IACd,MAAM,CAAU;IAChB,GAAG,CAAU;IAErB;;OAEG;IACK,OAAO,GAAY,UAAU,CAAC;IAEtC;;OAEG;IACK,IAAI,CAAU;IACd,YAAY,GAAuB,OAAO,CAAC;IAC3C,QAAQ,GAAY,KAAK,CAAC;IAEzB,UAAU,CAAqB;IAExC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAElD,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,yDAAyD;gBACzD,GAAG,EACD,IAAI,CAAC,GAAG;oBACR,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC;aACjE;YACH,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC;QAER,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QAEtE,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;YAC3C,EAAC,GAAG,qDACF,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,EAAE,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK;gBAER,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI;gBACvC,6DAAM,KAAK,EAAC,SAAS;oBACnB,8DAAQ,CACH;gBACN,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAClC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  Host,\n  Prop,\n} from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A button component that can be used either as a normal button or as a link.\n * Will render a `<button>` element when the `type` is set to \"button\",\n * \"submit\", or \"reset\", and an `<a>` element when the `type` is set to \"link\".\n */\n@Component({\n  tag: \"scout-button\",\n  styleUrl: \"button.css\",\n})\nexport class ScoutButton {\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() rel?: string;\n\n  /**\n   * The variant primarily affects the color of the button.\n   */\n  @Prop() variant: Variant = \"outlined\";\n\n  /**\n   * An optional icon to display alongside the button text. Must be an SVG string.\n   */\n  @Prop() icon?: string;\n  @Prop() iconPosition: \"before\" | \"after\" = \"after\";\n  @Prop() iconOnly: boolean = false;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n    const props =\n      this.type === \"link\"\n        ? {\n            href: this.href,\n            target: this.target,\n            // This might not be our job, but better safe than sorry.\n            rel:\n              this.rel ??\n              (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          }\n        : {\n            type: this.type,\n          };\n\n    const icon = this.icon && <span class=\"icon\" innerHTML={this.icon} />;\n\n    return (\n      <Host class={this.iconOnly ? \"icon-only\" : \"\"}>\n        <Tag\n          class={`button ${this.variant}`}\n          onClick={() => this.scoutClick.emit()}\n          {...props}\n        >\n          {this.iconPosition === \"before\" && icon}\n          <span class=\"content\">\n            <slot />\n          </span>\n          {this.iconPosition === \"after\" && icon}\n        </Tag>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/card/card.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class ScoutCard {
     render() {
-        return (h("div", { key: 'ffeed5909a251bf61e750ebb575b278e90490945', class: "card" }, h("slot", { key: 'a8d457f36995146e722c2d53ddfb03f36848f6d1' })));
+        return (h("div", { key: '1ea5b0a2ea2a8f342e0153d9e90565cc69e2f336', class: "card" }, h("slot", { key: '328519393a7ad17aa158dea8835f16ebdc0cc7bc' })));
     }
     static get is() { return "scout-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox/checkbox.js

@@ -1,6 +1,12 @@
 import { h, Mixin, } from "@stencil/core";
 import checkIcon from "@tabler/icons/outline/check.svg";
 import { inputMixin } from "../../mixins/inputMixin";
+/**
+ * The checkbox component is used to let users select one or more options from a
+ * set. For toggling a single option, consider using the Switch component
+ * instead. 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 ScoutCheckbox extends Mixin(inputMixin) {
     constructor() {
         super();
@@ -24,7 +30,7 @@ export class ScoutCheckbox extends Mixin(inputMixin) {
     }
     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(${checkIcon})` }, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => {
+        return (h(Tag, { key: '67b42b2b686fffecf891da832236fde663b740dc' }, h("input", { key: '81821918d102e1ca809915c14a20aa0847f46e30', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "checkbox", value: this.value, name: this.name, class: "checkbox", style: { "--icon-checkbox": `url(${checkIcon})` }, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => {
                 this.onInput();
                 this.onChange(event);
             }, onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }), this.label));

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,SAAS,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAOrD,MAAM,OAAO,aACX,SAAQ,KAAK,CAAC,UAAU,CAAC;;;;IAGjB,OAAO,GAAY,KAAK,CAAC;IAEzB,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,cAAc,CAAS;IAEvB,KAAK,CAAS;IAEd,KAAK,CAAS;IAEd,IAAI,CAAS;IAEZ,YAAY,CAGlB;IAEH,QAAQ,CAAC,KAAY;QACnB,MAAM,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;YACF,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,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,EAAE,iBAAiB,EAAE,OAAO,SAAS,GAAG,EAAE,qBAChC,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,IAAI,CAAC,OAAO,EAAE,CAAC;oBACf,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,GACjC;YACD,IAAI,CAAC,KAAK,CACP,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  type ComponentInterface,\n  Event,\n  type EventEmitter,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport 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":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,SAAS,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD;;;;;GAKG;AAMH,MAAM,OAAO,aACX,SAAQ,KAAK,CAAC,UAAU,CAAC;;;;IAGjB,OAAO,GAAY,KAAK,CAAC;IAEzB,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,cAAc,CAAS;IAEvB,KAAK,CAAS;IAEd,KAAK,CAAS;IAEd,IAAI,CAAS;IAEZ,YAAY,CAGlB;IAEH,QAAQ,CAAC,KAAY;QACnB,MAAM,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;YACF,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,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,EAAE,iBAAiB,EAAE,OAAO,SAAS,GAAG,EAAE,qBAChC,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,IAAI,CAAC,OAAO,EAAE,CAAC;oBACf,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,GACjC;YACD,IAAI,CAAC,KAAK,CACP,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  type ComponentInterface,\n  Event,\n  type EventEmitter,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport 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"]}

package/dist/collection/components/divider/divider.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class ScoutDivider {
     render() {
-        return h(Host, { key: '78c9366fcd393e53b579481d31feafa643b63690' });
+        return h(Host, { key: '6a4d3d0bed1689875ec867b16f0c77f391662fc8' });
     }
     static get is() { return "scout-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field/field.js

@@ -1,4 +1,9 @@
 import { h } from "@stencil/core";
+/**
+ * The field component is used to wrap form fields with a label, help text, and
+ * error messages. It automatically captures validation events from its child
+ * input components and displays error messages accordingly.
+ */
 export class ScoutField {
     /**
      * Label shown above the field.
@@ -30,7 +35,7 @@ export class ScoutField {
         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: 'e7539abfb11fac14a5ffd87cfb1a70dd9c41cca7', class: "field" }, h("label", { key: 'c4501be15aafbb2d6e3c447c5893aa2510e20b89', htmlFor: this.inputId, class: "label" }, this.label), h("slot", { key: '5806c8d41926245074fb395b08226272a2432d96' }), h("p", { key: 'f1a36881c2ce2f8485d31e8faac452c9c2423d74', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && h("p", { key: '0d9ea374551b527d085ef33595fdee27e80d08fb', class: "help-text" }, this.helpText)));
     }
     static get is() { return "scout-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../src/components/field/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO3E,MAAM,OAAO,UAAU;IACrB;;OAEG;IACK,KAAK,CAAU;IAEvB;;OAEG;IACK,QAAQ,CAAU;IAEjB,OAAO,CAAS;IAChB,SAAS,GAAkB,IAAI,CAAC;IAChC,WAAW,GAAY,KAAK,CAAC;IAE3B,WAAW,CAAe;IAGrC,YAAY,CAAC,KAA0B;QACrC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;IAC9B,CAAC;IAGD,gBAAgB,CACd,KAOE;QAEF,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAEjC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC;QAC7C,CAAC;IACH,CAAC;IAID,SAAS;QACP,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,OAAO;YAChB,8DAAO,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,OAAO,IACxC,IAAI,CAAC,KAAK,CACL;YACR,8DAAQ;YACR,0DAAG,KAAK,EAAC,YAAY,eAAW,QAAQ,IACrC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAClC;YACH,IAAI,CAAC,QAAQ,IAAI,0DAAG,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,QAAQ,CAAK,CACtD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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":"field.js","sourceRoot":"","sources":["../../../src/components/field/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3E;;;;GAIG;AAMH,MAAM,OAAO,UAAU;IACrB;;OAEG;IACK,KAAK,CAAU;IAEvB;;OAEG;IACK,QAAQ,CAAU;IAEjB,OAAO,CAAS;IAChB,SAAS,GAAkB,IAAI,CAAC;IAChC,WAAW,GAAY,KAAK,CAAC;IAE3B,WAAW,CAAe;IAGrC,YAAY,CAAC,KAA0B;QACrC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;IAC9B,CAAC;IAGD,gBAAgB,CACd,KAOE;QAEF,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAEjC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC;QAC7C,CAAC;IACH,CAAC;IAID,SAAS;QACP,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,OAAO;YAChB,8DAAO,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,OAAO,IACxC,IAAI,CAAC,KAAK,CACL;YACR,8DAAQ;YACR,0DAAG,KAAK,EAAC,YAAY,eAAW,QAAQ,IACrC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAClC;YACH,IAAI,CAAC,QAAQ,IAAI,0DAAG,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,QAAQ,CAAK,CACtD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/input/input.css

@@ -1,9 +1,24 @@
-.input {
+:host {
+  display: flex;
   height: var(--spacing-10);
-  padding: var(--spacing-2);
-  font: var(--type-body-base);
+  --scout-input-padding: var(--spacing-2);
+  --scout-input-border-radius: var(--spacing-2);
+  --scout-input-type: var(--type-body-base);
+}
+
+:host(.large) {
+  height: var(--spacing-14);
+  --scout-input-padding: var(--spacing-3);
+  --scout-input-border-radius: var(--spacing-3);
+  --scout-input-type: var(--type-body-lg);
+}
+
+.input {
+  flex: 1;
+  padding: var(--scout-input-padding);
+  font: var(--scout-input-type);
   border: 1px solid var(--color-gray-300);
-  border-radius: var(--spacing-2);
+  border-radius: var(--scout-input-border-radius);
   background-color: var(--color-white);
   color: var(--color-text-base);
 }
@@ -13,3 +28,10 @@
   color: var(--color-gray-700);
   cursor: not-allowed;
 }
+
+:host(.elevated) .input {
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  border-color: transparent;
+}

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

@@ -1,9 +1,27 @@
-import { h, Mixin, } from "@stencil/core";
+import { Host, h, Mixin, } from "@stencil/core";
 import { inputMixin } from "../../mixins/inputMixin";
+/**
+ * The input component is a basic text input field that can be used to capture
+ * user input. It supports various types and input modes for different use
+ * cases. 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 ScoutInput extends Mixin(inputMixin) {
     constructor() {
         super();
     }
+    /**
+     * Size of the input element. Large fields are typically used for prominent
+     * inputs, such as a top search field on a page, while medium fields are used
+     * for regular form inputs.
+     */
+    size = "medium";
+    /**
+     * Visual variant of the input element. Elevated inputs have a shadow to help
+     * them stand out from the background and should only be used when absolutely
+     * positioned above other content.
+     */
+    variant = "default";
     /**
      * Type of input element. If you need a number input, read the accessibility
      * section of this MDN article first:
@@ -28,8 +46,15 @@ export class ScoutInput extends Mixin(inputMixin) {
      * from tab order and are not validated.
      */
     disabled = false;
+    /**
+     * Placeholder text should rarely be used as it poses a lot of accessibility
+     * issues.
+     */
+    placeholder;
     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() }));
+        const sizeClass = this.size === "large" ? "large" : "";
+        const variantClass = this.variant === "elevated" ? "elevated" : "";
+        return (h(Host, { key: '769603f718f511a0a2202814a7621d60a2a9f34c', class: `${sizeClass} ${variantClass}` }, h("input", { key: '6a4e1ad8173dfe37ce5facf8627990fd797dfc60', 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, placeholder: this.placeholder, onInput: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() })));
     }
     static get is() { return "scout-input"; }
     static get encapsulation() { return "scoped"; }
@@ -45,6 +70,46 @@ export class ScoutInput extends Mixin(inputMixin) {
     }
     static get properties() {
         return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"medium\" | \"large\"",
+                    "resolved": "\"large\" | \"medium\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the input element. Large fields are typically used for prominent\ninputs, such as a top search field on a page, while medium fields are used\nfor regular form inputs."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"medium\""
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"default\" | \"elevated\"",
+                    "resolved": "\"default\" | \"elevated\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant of the input element. Elevated inputs have a shadow to help\nthem stand out from the background and should only be used when absolutely\npositioned above other content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "\"default\""
+            },
             "type": {
                 "type": "string",
                 "mutable": false,
@@ -173,6 +238,25 @@ export class ScoutInput extends Mixin(inputMixin) {
                 "reflect": false,
                 "attribute": "disabled",
                 "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text should rarely be used as it poses a lot of accessibility\nissues."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AA6BrD,MAAM,OAAO,UACX,SAAQ,KAAK,CAAC,UAAU,CAAC;;;;IAGzB;;;;OAIG;IACK,IAAI,GAAc,MAAM,CAAC;IAEjC;;OAEG;IACK,SAAS,CAAa;IAE9B;;OAEG;IACK,OAAO,CAAU;IAEzB;;OAEG;IACK,KAAK,GAAW,EAAE,CAAC;IAEnB,IAAI,CAAS;IAErB;;;OAGG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC,MAAM;QACJ,OAAO,CACL,8DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,EAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,GACjC,CACH,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  type ComponentInterface,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\nexport type InputType =\n  | \"text\"\n  | \"password\"\n  | \"email\"\n  | \"number\"\n  | \"tel\"\n  | \"url\"\n  // Hack to suggest above value but still allow any other string value\n  | (string & {});\n\nexport type InputMode =\n  | \"none\"\n  | \"text\"\n  | \"decimal\"\n  | \"numeric\"\n  | \"tel\"\n  | \"search\"\n  | \"email\"\n  | \"url\"\n  // Hack to suggest above value but still allow any other string value\n  | (string & {});\n\n@Component({\n  tag: \"scout-input\",\n  styleUrl: \"input.css\",\n  scoped: true,\n})\nexport class ScoutInput\n  extends Mixin(inputMixin)\n  implements ComponentInterface\n{\n  /**\n   * Type of input element. If you need a number input, read the accessibility\n   * section of this MDN article first:\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility\n   */\n  @Prop() type: InputType = \"text\";\n\n  /**\n   * Input mode hints for devices with dynamic keyboards.\n   */\n  @Prop() inputmode?: InputMode;\n\n  /**\n   * Regex pattern for input validation.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Value of the input element, in case you want to control it yourself.\n   */\n  @Prop() value: string = \"\";\n\n  @Prop() name: string;\n\n  /**\n   * Whether the input is disabled. Disabled inputs are not editable, excluded\n   * from tab order and are not validated.\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <input\n        ref={(el) => this.setInputRef(el)}\n        id={this.ariaId}\n        type={this.type}\n        name={this.name}\n        inputMode={this.inputmode}\n        pattern={this.pattern}\n        class=\"input\"\n        value={this.value}\n        disabled={this.disabled}\n        onInput={() => this.onInput()}\n        onBlur={() => this.onBlur()}\n        onInvalid={() => this.onInvalid()}\n      />\n    );\n  }\n}\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,IAAI,EACJ,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAwBrD;;;;;GAKG;AAMH,MAAM,OAAO,UACX,SAAQ,KAAK,CAAC,UAAU,CAAC;;;;IAGzB;;;;OAIG;IACK,IAAI,GAAuB,QAAQ,CAAC;IAE5C;;;;OAIG;IACK,OAAO,GAA2B,SAAS,CAAC;IAEpD;;;;OAIG;IACK,IAAI,GAAc,MAAM,CAAC;IAEjC;;OAEG;IACK,SAAS,CAAa;IAE9B;;OAEG;IACK,OAAO,CAAU;IAEzB;;OAEG;IACK,KAAK,GAAW,EAAE,CAAC;IAEnB,IAAI,CAAS;IAErB;;;OAGG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC;;;OAGG;IACK,WAAW,CAAU;IAE7B,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;QACvD,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QAEnE,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,GAAG,SAAS,IAAI,YAAY,EAAE;YACzC,8DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,EAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,GACjC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  type ComponentInterface,\n  Host,\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   * Size of the input element. Large fields are typically used for prominent\n   * inputs, such as a top search field on a page, while medium fields are used\n   * for regular form inputs.\n   */\n  @Prop() size: \"medium\" | \"large\" = \"medium\";\n\n  /**\n   * Visual variant of the input element. Elevated inputs have a shadow to help\n   * them stand out from the background and should only be used when absolutely\n   * positioned above other content.\n   */\n  @Prop() variant: \"default\" | \"elevated\" = \"default\";\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  /**\n   * Placeholder text should rarely be used as it poses a lot of accessibility\n   * issues.\n   */\n  @Prop() placeholder?: string;\n\n  render() {\n    const sizeClass = this.size === \"large\" ? \"large\" : \"\";\n    const variantClass = this.variant === \"elevated\" ? \"elevated\" : \"\";\n\n    return (\n      <Host class={`${sizeClass} ${variantClass}`}>\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          placeholder={this.placeholder}\n          onInput={() => this.onInput()}\n          onBlur={() => this.onBlur()}\n          onInvalid={() => this.onInvalid()}\n        />\n      </Host>\n    );\n  }\n}\n"]}