@scouterna/ui-webc 2.2.2 → 2.2.4

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

@@ -1 +1 @@
-{"version":3,"file":"scout-checkbox.scout-radio-button.entry.js","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","src/components/radio-button/radio-button.css?tag=scout-radio-button&encapsulation=scoped","src/components/radio-button/radio-button.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",".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"],"names":["checkIcon"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"scout-checkbox.scout-radio-button.entry.js","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","src/components/radio-button/radio-button.css?tag=scout-radio-button&encapsulation=scoped","src/components/radio-button/radio-button.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",".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"],"names":["checkIcon"],"mappings":"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","x_google_ignoreList":[0]}

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

@@ -35,7 +35,7 @@ const ScoutCheckbox = class 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(${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));
@@ -75,7 +75,7 @@ const ScoutRadioButton = class extends Mixin(inputMixin) {
     }
     render() {
         const Tag = this.label?.length ? "label" : "div";
-        return (h(Tag, { key: '0ce220559e5097e536928a27273f683600ee305b' }, h("input", { key: 'cb844c7a4751184aa253f73fca67211049f19a01', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "radio", value: this.value, name: this.name, class: "radio", "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => {
+        return (h(Tag, { key: '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));

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

@@ -36,7 +36,7 @@ const ScoutField = class {
         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)));
     }
 };
 ScoutField.style = fieldCss;

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

@@ -1 +1 @@
-{"version":3,"file":"scout-field.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,uaAAua;;MCO3a,UAAU,GAAA,MAAA;;;;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;;;;;;;"}
+{"version":3,"file":"scout-field.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,uaAAua;;MCY3a,UAAU,GAAA,MAAA;;;;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;;;;;;;"}

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

@@ -38,7 +38,7 @@ const ScoutInput = class extends Mixin(inputMixin) {
      */
     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() }));
     }
 };
 ScoutInput.style = inputCss;

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

@@ -1 +1 @@
-{"version":3,"file":"scout-input.entry.js","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"],"names":[],"mappings":";;;AAAA,MAAM,QAAQ,GAAG,iWAAiW;;ACoCrW,MAAA,UACX,GAAA,cAAQ,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;;;;;;;"}
+{"version":3,"file":"scout-input.entry.js","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"],"names":[],"mappings":";;;AAAA,MAAM,QAAQ,GAAG,iWAAiW;;AC0CrW,MAAA,UACX,GAAA,cAAQ,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;;;;;;;"}

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

@@ -26,7 +26,7 @@ const ScoutSelect = class extends Mixin(inputMixin) {
     disabled = false;
     name;
     render() {
-        return (h("div", { key: 'df8da542b4f1b6a90c1899ae2ebe3f1c24328d82', class: "select-wrapper" }, h("select", { key: 'ece339ed62a6395c282766f534a0290a25e10f03', id: this.ariaId, name: this.name, class: "select", disabled: this.disabled, onChange: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }, h("slot", { key: '53baa52177e1a72c4b0f40ceda8f5de227958c38' })), h("span", { key: 'b19185c3f2152e3ee4abcab0e61c1a9f17fa2442', class: "select-icon", style: { "--icon-chevron": `url(${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" })));
     }
 };
 ScoutSelect.style = selectCss;

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

@@ -1 +1 @@
-{"version":3,"file":"scout-select.entry.js","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"],"names":["chevronIcon"],"mappings":";;;AAAA,MAAM,cAAc,GAAG,ggBAAggB;;ACAvhB,MAAM,SAAS,GAAG,mvCAAmvC;;ACexvC,MAAA,WACX,GAAA,cAAQ,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,EAAAA,cAAW,CAAG,CAAA,CAAA,EAAE,EAAA,aAAA,EACtC,MAAM,EAClB,CAAA,CACE;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"scout-select.entry.js","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"],"names":["chevronIcon"],"mappings":";;;AAAA,MAAM,cAAc,GAAG,ggBAAggB;;ACAvhB,MAAM,SAAS,GAAG,mvCAAmvC;;ACoBxvC,MAAA,WACX,GAAA,cAAQ,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,EAAAA,cAAW,CAAG,CAAA,CAAA,EAAE,EAAA,aAAA,EACtC,MAAM,EAClB,CAAA,CACE;;;;;;;","x_google_ignoreList":[0]}

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

@@ -34,7 +34,7 @@ const ScoutSwitch = class 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/esm/scout-switch.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"scout-switch.entry.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":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,ktDAAktD;;ACkBvtD,MAAA,WACX,GAAA,cAAQ,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;;;;;;;;"}
+{"version":3,"file":"scout-switch.entry.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":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,ktDAAktD;;ACuBvtD,MAAA,WACX,GAAA,cAAQ,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;;;;;;;;"}

package/dist/types/components/app-bar/app-bar.d.ts

@@ -1,3 +1,8 @@
+/**
+ * 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 declare class ScoutAppBar {
     titleText?: string;
     render(): any;

package/dist/types/components/button/button.d.ts

@@ -1,7 +1,9 @@
 import { type EventEmitter } from "../../stencil-public-runtime";
 export type Variant = "primary" | "outlined" | "text" | "caution" | "danger";
 /**
- * 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 declare class ScoutButton {
     type: "button" | "submit" | "reset" | "link";

package/dist/types/components/field/field.d.ts

@@ -1,3 +1,8 @@
+/**
+ * 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 declare class ScoutField {
     /**
      * Label shown above the field.

package/dist/types/components.d.ts

@@ -16,6 +16,11 @@ export { InputMode, InputType } from "./components/input/input";
 export { ItemType as ItemType1 } from "./components/list-view-item/list-view-item";
 export { Direction, GapSize } from "./components/stack/stack";
 export namespace Components {
+    /**
+     * 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.
+     */
     interface ScoutAppBar {
         "titleText"?: string;
     }
@@ -55,7 +60,9 @@ export namespace Components {
         "type": ItemType;
     }
     /**
-     * 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".
      */
     interface ScoutButton {
         "href"?: string;
@@ -88,6 +95,12 @@ export namespace Components {
      */
     interface ScoutCard {
     }
+    /**
+     * 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.
+     */
     interface ScoutCheckbox {
         /**
           * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.
@@ -111,6 +124,11 @@ export namespace Components {
     }
     interface ScoutDivider {
     }
+    /**
+     * 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.
+     */
     interface ScoutField {
         /**
           * Help text shown below the field.
@@ -121,6 +139,12 @@ export namespace Components {
          */
         "label": string;
     }
+    /**
+     * 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.
+     */
     interface ScoutInput {
         /**
           * Whether the input is disabled. Disabled inputs are not editable, excluded from tab order and are not validated.
@@ -207,6 +231,11 @@ export namespace Components {
         "size"?: "xs" | "sm" | "base" | "lg" | "xl";
         "text"?: string;
     }
+    /**
+     * The radio button component is used to let users select one option from a set.
+     * When used in a form, make sure to wrap it in a Field component to display a
+     * label, help text, and error messages.
+     */
     interface ScoutRadioButton {
         /**
           * Use this prop if you need to connect your radio button with another element describing its use, other than the property label.
@@ -228,6 +257,11 @@ export namespace Components {
         "validate"?: (value: string) => string | null;
         "value": string;
     }
+    /**
+     * The select component is a dropdown menu that allows users to select one
+     * option from a list. When used in a form, make sure to wrap it in a Field
+     * component to display a label, help text, and error messages.
+     */
     interface ScoutSelect {
         /**
           * Whether the select is disabled. Disabled selects are not editable, excluded from tab order and are not validated.
@@ -257,6 +291,11 @@ export namespace Components {
          */
         "gapSize": GapSize;
     }
+    /**
+     * 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.
+     */
     interface ScoutSwitch {
         /**
           * Use this prop if you need to connect your switch with another element describing its use, other than the property label.
@@ -315,6 +354,11 @@ export interface ScoutSwitchCustomEvent<T> extends CustomEvent<T> {
     target: HTMLScoutSwitchElement;
 }
 declare global {
+    /**
+     * 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.
+     */
     interface HTMLScoutAppBarElement extends Components.ScoutAppBar, HTMLStencilElement {
     }
     var HTMLScoutAppBarElement: {
@@ -356,7 +400,9 @@ declare global {
         "scoutClick": void;
     }
     /**
-     * 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".
      */
     interface HTMLScoutButtonElement extends Components.ScoutButton, HTMLStencilElement {
         addEventListener<K extends keyof HTMLScoutButtonElementEventMap>(type: K, listener: (this: HTMLScoutButtonElement, ev: ScoutButtonCustomEvent<HTMLScoutButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -395,6 +441,12 @@ declare global {
     element: HTMLInputElement;
   };
     }
+    /**
+     * 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.
+     */
     interface HTMLScoutCheckboxElement extends Components.ScoutCheckbox, HTMLStencilElement {
         addEventListener<K extends keyof HTMLScoutCheckboxElementEventMap>(type: K, listener: (this: HTMLScoutCheckboxElement, ev: ScoutCheckboxCustomEvent<HTMLScoutCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -415,6 +467,11 @@ declare global {
         prototype: HTMLScoutDividerElement;
         new (): HTMLScoutDividerElement;
     };
+    /**
+     * 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.
+     */
     interface HTMLScoutFieldElement extends Components.ScoutField, HTMLStencilElement {
     }
     var HTMLScoutFieldElement: {
@@ -431,6 +488,12 @@ declare global {
         "_scoutInvalid": void;
         "_scoutFieldId": string;
     }
+    /**
+     * 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.
+     */
     interface HTMLScoutInputElement extends Components.ScoutInput, HTMLStencilElement {
         addEventListener<K extends keyof HTMLScoutInputElementEventMap>(type: K, listener: (this: HTMLScoutInputElement, ev: ScoutInputCustomEvent<HTMLScoutInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -511,6 +574,11 @@ declare global {
     element: HTMLInputElement;
   };
     }
+    /**
+     * The radio button component is used to let users select one option from a set.
+     * When used in a form, make sure to wrap it in a Field component to display a
+     * label, help text, and error messages.
+     */
     interface HTMLScoutRadioButtonElement extends Components.ScoutRadioButton, HTMLStencilElement {
         addEventListener<K extends keyof HTMLScoutRadioButtonElementEventMap>(type: K, listener: (this: HTMLScoutRadioButtonElement, ev: ScoutRadioButtonCustomEvent<HTMLScoutRadioButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -535,6 +603,11 @@ declare global {
         "_scoutInvalid": void;
         "_scoutFieldId": string;
     }
+    /**
+     * The select component is a dropdown menu that allows users to select one
+     * option from a list. When used in a form, make sure to wrap it in a Field
+     * component to display a label, help text, and error messages.
+     */
     interface HTMLScoutSelectElement extends Components.ScoutSelect, HTMLStencilElement {
         addEventListener<K extends keyof HTMLScoutSelectElementEventMap>(type: K, listener: (this: HTMLScoutSelectElement, ev: ScoutSelectCustomEvent<HTMLScoutSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -569,6 +642,11 @@ declare global {
     element: HTMLInputElement;
   };
     }
+    /**
+     * 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.
+     */
     interface HTMLScoutSwitchElement extends Components.ScoutSwitch, HTMLStencilElement {
         addEventListener<K extends keyof HTMLScoutSwitchElementEventMap>(type: K, listener: (this: HTMLScoutSwitchElement, ev: ScoutSwitchCustomEvent<HTMLScoutSwitchElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -605,6 +683,11 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    /**
+     * 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.
+     */
     interface ScoutAppBar {
         "titleText"?: string;
     }
@@ -645,7 +728,9 @@ declare namespace LocalJSX {
         "type"?: ItemType;
     }
     /**
-     * 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".
      */
     interface ScoutButton {
         "href"?: string;
@@ -679,6 +764,12 @@ declare namespace LocalJSX {
      */
     interface ScoutCard {
     }
+    /**
+     * 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.
+     */
     interface ScoutCheckbox {
         /**
           * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.
@@ -723,6 +814,11 @@ declare namespace LocalJSX {
     }
     interface ScoutDivider {
     }
+    /**
+     * 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.
+     */
     interface ScoutField {
         /**
           * Help text shown below the field.
@@ -733,6 +829,12 @@ declare namespace LocalJSX {
          */
         "label": string;
     }
+    /**
+     * 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.
+     */
     interface ScoutInput {
         /**
           * Whether the input is disabled. Disabled inputs are not editable, excluded from tab order and are not validated.
@@ -841,6 +943,11 @@ declare namespace LocalJSX {
         "size"?: "xs" | "sm" | "base" | "lg" | "xl";
         "text"?: string;
     }
+    /**
+     * The radio button component is used to let users select one option from a set.
+     * When used in a form, make sure to wrap it in a Field component to display a
+     * label, help text, and error messages.
+     */
     interface ScoutRadioButton {
         /**
           * Use this prop if you need to connect your radio button with another element describing its use, other than the property label.
@@ -883,6 +990,11 @@ declare namespace LocalJSX {
         "validate"?: (value: string) => string | null;
         "value"?: string;
     }
+    /**
+     * The select component is a dropdown menu that allows users to select one
+     * option from a list. When used in a form, make sure to wrap it in a Field
+     * component to display a label, help text, and error messages.
+     */
     interface ScoutSelect {
         /**
           * Whether the select is disabled. Disabled selects are not editable, excluded from tab order and are not validated.
@@ -929,6 +1041,11 @@ declare namespace LocalJSX {
          */
         "gapSize"?: GapSize;
     }
+    /**
+     * 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.
+     */
     interface ScoutSwitch {
         /**
           * Use this prop if you need to connect your switch with another element describing its use, other than the property label.
@@ -995,6 +1112,11 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            /**
+             * 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.
+             */
             "scout-app-bar": LocalJSX.ScoutAppBar & JSXBase.HTMLAttributes<HTMLScoutAppBarElement>;
             /**
              * The bottom bar component is used in the Jamboree26 app to provide
@@ -1007,25 +1129,59 @@ declare module "@stencil/core" {
              */
             "scout-bottom-bar-item": LocalJSX.ScoutBottomBarItem & JSXBase.HTMLAttributes<HTMLScoutBottomBarItemElement>;
             /**
-             * 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".
              */
             "scout-button": LocalJSX.ScoutButton & JSXBase.HTMLAttributes<HTMLScoutButtonElement>;
             /**
              * A general surface to hold various types of content.
              */
             "scout-card": LocalJSX.ScoutCard & JSXBase.HTMLAttributes<HTMLScoutCardElement>;
+            /**
+             * 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.
+             */
             "scout-checkbox": LocalJSX.ScoutCheckbox & JSXBase.HTMLAttributes<HTMLScoutCheckboxElement>;
             "scout-divider": LocalJSX.ScoutDivider & JSXBase.HTMLAttributes<HTMLScoutDividerElement>;
+            /**
+             * 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.
+             */
             "scout-field": LocalJSX.ScoutField & JSXBase.HTMLAttributes<HTMLScoutFieldElement>;
+            /**
+             * 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.
+             */
             "scout-input": LocalJSX.ScoutInput & JSXBase.HTMLAttributes<HTMLScoutInputElement>;
             "scout-link": LocalJSX.ScoutLink & JSXBase.HTMLAttributes<HTMLScoutLinkElement>;
             "scout-list-view": LocalJSX.ScoutListView & JSXBase.HTMLAttributes<HTMLScoutListViewElement>;
             "scout-list-view-item": LocalJSX.ScoutListViewItem & JSXBase.HTMLAttributes<HTMLScoutListViewItemElement>;
             "scout-list-view-subheader": LocalJSX.ScoutListViewSubheader & JSXBase.HTMLAttributes<HTMLScoutListViewSubheaderElement>;
             "scout-loader": LocalJSX.ScoutLoader & JSXBase.HTMLAttributes<HTMLScoutLoaderElement>;
+            /**
+             * The radio button component is used to let users select one option from a set.
+             * When used in a form, make sure to wrap it in a Field component to display a
+             * label, help text, and error messages.
+             */
             "scout-radio-button": LocalJSX.ScoutRadioButton & JSXBase.HTMLAttributes<HTMLScoutRadioButtonElement>;
+            /**
+             * The select component is a dropdown menu that allows users to select one
+             * option from a list. When used in a form, make sure to wrap it in a Field
+             * component to display a label, help text, and error messages.
+             */
             "scout-select": LocalJSX.ScoutSelect & JSXBase.HTMLAttributes<HTMLScoutSelectElement>;
             "scout-stack": LocalJSX.ScoutStack & JSXBase.HTMLAttributes<HTMLScoutStackElement>;
+            /**
+             * 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.
+             */
             "scout-switch": LocalJSX.ScoutSwitch & JSXBase.HTMLAttributes<HTMLScoutSwitchElement>;
         }
     }

package/dist/ui-webc/{p-1a701759.entry.js → p-45b65a28.entry.js}

@@ -1,2 +1,2 @@
-import{M as r,r as a,c as e,h as t}from"./p-ksA_9NPe.js";import{i as o}from"./p-BzgciO7w.js";const i='.switch{width:var(--spacing-10);height:var(--spacing-6);-moz-appearance:none;appearance:none;-webkit-appearance:none;border-radius:var(--spacing-8);background-color:var(--color-text-brand-inverse);border:2px solid var(--color-gray-300);position:relative;display:flex;align-content:center;justify-content:center;transition-property:border-color;transition-duration:0.3s;transition-timing-function:ease-in-out;cursor:pointer;--switch-ball-padding:calc(var(--spacing-1) / 4);--switch-ball-size:calc(var(--spacing-5) - var(--switch-ball-padding) * 2)}.switch:hover{transition-property:none;border-color:var(--color-gray-400);background-color:var(--color-background-brand-subtle-hovered)}.switch:active{background-color:var(--color-background-brand-subtle-pressed)}.switch:checked{border-color:var(--color-background-brand-base)}.switch:hover::before{background-color:var(--color-gray-400)}.switch::before{content:"";background-color:var(--color-gray-300);width:var(--switch-ball-size);height:var(--switch-ball-size);border-radius:50%;position:absolute;top:var(--switch-ball-padding);left:var(--switch-ball-padding);transition-duration:0.3s;transition-property:left, right}.switch:checked::before{content:"";background-color:var(--color-background-brand-base);left:calc(100% - (var(--switch-ball-size) + var(--switch-ball-padding)));left:calc(100% - calc(var(--switch-ball-size) + var(--switch-ball-padding)))}.switch:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}.switch:disabled::before{background-color:var(--color-gray-300)}label{display:flex;flex-direction:row-reverse;align-items:center;font:var(--type-label-base);color:var(--color-text-base)}.inlineDivider{width:var(--spacing-2)}';const s=class extends(r(o)){constructor(r){super();a(this,r);this.scoutInputChange=e(this,"scoutInputChange");this.scoutBlur=e(this,"scoutBlur");this._scoutValidate=e(this,"_scoutValidate");this._scoutInvalid=e(this,"_scoutInvalid");this._scoutFieldId=e(this,"_scoutFieldId");this.scoutChecked=e(this,"scoutChecked")}toggled=false;disabled=false;ariaLabelledby;label;scoutChecked;onChange(r){const a=r.target;this.scoutChecked.emit({checked:a.checked,element:a})}render(){const r=this.label?.length?"label":"div";return t(r,{key:"3df6f0be2cbb14fa4ad4ce777324960365ea5d68"},this.label,t("span",{key:"bbf999533051b967807f18f6d165a9b916a87252",class:"inlineDivider"}),t("input",{key:"8280933ed1b9038edcd8fb9bad39bef5745d4403",ref:r=>this.setInputRef(r),id:this.ariaId,type:"checkbox",class:"switch","aria-labelledby":this.ariaLabelledby,"aria-disabled":this.disabled,disabled:this.disabled,checked:this.toggled,onChange:r=>{this.onInput();this.onChange(r)},onBlur:()=>this.onBlur(),onInvalid:()=>this.onInvalid()}))}static get delegatesFocus(){return true}};s.style=i;export{s as scout_switch};
-//# sourceMappingURL=p-1a701759.entry.js.map
+import{M as r,r as e,c as a,h as t}from"./p-ksA_9NPe.js";import{i as o}from"./p-BzgciO7w.js";const i='.switch{width:var(--spacing-10);height:var(--spacing-6);-moz-appearance:none;appearance:none;-webkit-appearance:none;border-radius:var(--spacing-8);background-color:var(--color-text-brand-inverse);border:2px solid var(--color-gray-300);position:relative;display:flex;align-content:center;justify-content:center;transition-property:border-color;transition-duration:0.3s;transition-timing-function:ease-in-out;cursor:pointer;--switch-ball-padding:calc(var(--spacing-1) / 4);--switch-ball-size:calc(var(--spacing-5) - var(--switch-ball-padding) * 2)}.switch:hover{transition-property:none;border-color:var(--color-gray-400);background-color:var(--color-background-brand-subtle-hovered)}.switch:active{background-color:var(--color-background-brand-subtle-pressed)}.switch:checked{border-color:var(--color-background-brand-base)}.switch:hover::before{background-color:var(--color-gray-400)}.switch::before{content:"";background-color:var(--color-gray-300);width:var(--switch-ball-size);height:var(--switch-ball-size);border-radius:50%;position:absolute;top:var(--switch-ball-padding);left:var(--switch-ball-padding);transition-duration:0.3s;transition-property:left, right}.switch:checked::before{content:"";background-color:var(--color-background-brand-base);left:calc(100% - (var(--switch-ball-size) + var(--switch-ball-padding)));left:calc(100% - calc(var(--switch-ball-size) + var(--switch-ball-padding)))}.switch:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}.switch:disabled::before{background-color:var(--color-gray-300)}label{display:flex;flex-direction:row-reverse;align-items:center;font:var(--type-label-base);color:var(--color-text-base)}.inlineDivider{width:var(--spacing-2)}';const c=class extends(r(o)){constructor(r){super();e(this,r);this.scoutInputChange=a(this,"scoutInputChange");this.scoutBlur=a(this,"scoutBlur");this._scoutValidate=a(this,"_scoutValidate");this._scoutInvalid=a(this,"_scoutInvalid");this._scoutFieldId=a(this,"_scoutFieldId");this.scoutChecked=a(this,"scoutChecked")}toggled=false;disabled=false;ariaLabelledby;label;scoutChecked;onChange(r){const e=r.target;this.scoutChecked.emit({checked:e.checked,element:e})}render(){const r=this.label?.length?"label":"div";return t(r,{key:"22aee29982e7bb00cf76c2a096c4cf40b53e51c4"},this.label,t("span",{key:"5ce6c501344e3da675d371e4a62794104ec1e6f1",class:"inlineDivider"}),t("input",{key:"81c07b77cd2ccdc66b93067da4eb15b62c87d5fd",ref:r=>this.setInputRef(r),id:this.ariaId,type:"checkbox",class:"switch","aria-labelledby":this.ariaLabelledby,"aria-disabled":this.disabled,disabled:this.disabled,checked:this.toggled,onChange:r=>{this.onInput();this.onChange(r)},onBlur:()=>this.onBlur(),onInvalid:()=>this.onInvalid()}))}static get delegatesFocus(){return true}};c.style=i;export{c as scout_switch};
+//# sourceMappingURL=p-45b65a28.entry.js.map