npm - @scouterna/ui-webc - Versions diffs - 2.2.3 → 2.2.5 - Mend

@scouterna/ui-webc 2.2.3 → 2.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (176) hide show

package/dist/components/scout-field.js CHANGED Viewed

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

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

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

package/dist/components/scout-input.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, M as Mixin, c as createEvent, h } from './p-fr5CaUFu.js';
-import { i as inputMixin } from './p-DaGMxK4K.js';
+import { p as proxyCustomElement, M as Mixin, c as createEvent, h, d as Host } from './p-fr5CaUFu.js';
+import { i as inputMixin } from './p-B-kEl-ny.js';
-const inputCss = ".input.sc-scout-input{height:var(--spacing-10);padding:var(--spacing-2);font:var(--type-body-base);border:1px solid var(--color-gray-300);border-radius:var(--spacing-2);background-color:var(--color-white);color:var(--color-text-base)}.input.sc-scout-input:disabled{background-color:var(--color-gray-100);color:var(--color-gray-700);cursor:not-allowed}";
+const inputCss = ".sc-scout-input-h{display:flex;height:var(--spacing-10);--scout-input-padding:var(--spacing-2);--scout-input-border-radius:var(--spacing-2);--scout-input-type:var(--type-body-base)}.large.sc-scout-input-h{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.sc-scout-input{flex:1;padding:var(--scout-input-padding);font:var(--scout-input-type);border:1px solid var(--color-gray-300);border-radius:var(--scout-input-border-radius);background-color:var(--color-white);color:var(--color-text-base)}.input.sc-scout-input:disabled{background-color:var(--color-gray-100);color:var(--color-gray-700);cursor:not-allowed}.elevated.sc-scout-input-h .input.sc-scout-input{box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -2px rgba(0, 0, 0, 0.1);border-color:transparent}";
 const ScoutInput$1 = /*@__PURE__*/ proxyCustomElement(class ScoutInput extends Mixin(inputMixin) {
     constructor(registerHost) {
@@ -15,6 +15,18 @@ const ScoutInput$1 = /*@__PURE__*/ proxyCustomElement(class ScoutInput extends M
         this._scoutInvalid = createEvent(this, "_scoutInvalid");
         this._scoutFieldId = createEvent(this, "_scoutFieldId");
     }
+    /**
+     * 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:
@@ -39,18 +51,28 @@ const ScoutInput$1 = /*@__PURE__*/ proxyCustomElement(class ScoutInput extends M
      * 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 style() { return inputCss; }
 }, [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]
     }]);
 function defineCustomElement$1() {

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

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

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-fr5CaUFu.js';
-import { d as defineCustomElement$3 } from './p-C2_wl40t.js';
-import { d as defineCustomElement$2 } from './p-BkrRT31y.js';
+import { d as defineCustomElement$3 } from './p-CLzh39Ll.js';
+import { d as defineCustomElement$2 } from './p-4RT-nIeK.js';
 const listViewItemCss = ":host{display:flex}.button{flex:1;display:flex;align-items:center;text-align:inherit;min-height:var(--spacing-12);color:var(--color-text-base);padding:var(--spacing-2) var(--spacing-4);cursor:pointer;border:none;background-color:transparent;-webkit-text-decoration:none;text-decoration:none}.button:hover{background-color:var(--color-background-brand-subtle-hovered)}.prefix-icon,.suffix-icon{display:flex;align-items:center;height:var(--spacing-6);color:var(--color-neutral-700)}.prefix-icon svg,.suffix-icon svg,.prefix-icon .icon,.suffix-icon .icon{width:var(--spacing-6);height:var(--spacing-6)}.prefix-icon{justify-content:flex-start;width:var(--spacing-14)}.suffix-icon{justify-content:flex-end;width:var(--spacing-8)}.suffix-icon .icon{background-color:currentColor;-webkit-mask-image:var(--icon);mask-image:var(--icon);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.content{flex:1;display:flex;flex-direction:column;justify-content:center}.primary{font:var(--type-body-base)}.secondary{font:var(--type-body-sm);color:var(--color-neutral-700)}";
@@ -23,6 +23,7 @@ const ScoutListViewItem$1 = /*@__PURE__*/ proxyCustomElement(class ScoutListView
     name;
     value;
     checked;
+    disabled;
     scoutClick;
     render() {
         const Tag = this.type === "link"
@@ -39,7 +40,7 @@ const ScoutListViewItem$1 = /*@__PURE__*/ proxyCustomElement(class ScoutListView
                     (this.target === "_blank" ? "noopener noreferrer" : undefined),
             }
             : {};
-        return (h(Host, { key: '413bfec2ce5b069cb065b25e6a388b87d9bf972d', role: "listitem" }, h(Tag, { key: '8bd4978a887d2769bf537d7cf74fc02772055144', class: "button", ...linkProps, onClick: () => this.scoutClick.emit() }, this.getPrefix(), this.getContent(), this.getSuffix())));
+        return (h(Host, { key: '329bcf60c9b9df6af329d833500b673f3de7e0ff', role: "listitem" }, h(Tag, { key: '864c0c388e72a544afac7b73dc715fc992f913aa', class: "button", ...linkProps, onClick: () => this.scoutClick.emit() }, this.getPrefix(), this.getContent(), this.getSuffix())));
     }
     getPrefix() {
         if (!this.icon) {
@@ -52,10 +53,10 @@ const ScoutListViewItem$1 = /*@__PURE__*/ proxyCustomElement(class ScoutListView
     }
     getSuffix() {
         if (this.type === "radio") {
-            return (h("scout-radio-button", { name: this.name, value: this.value, checked: this.checked }));
+            return (h("scout-radio-button", { name: this.name, value: this.value, checked: this.checked, disabled: this.disabled }));
         }
         if (this.type === "checkbox") {
-            return (h("scout-checkbox", { name: this.name, value: this.value, checked: this.checked }));
+            return (h("scout-checkbox", { name: this.name, value: this.value, checked: this.checked, disabled: this.disabled }));
         }
         return null;
     }
@@ -71,7 +72,8 @@ const ScoutListViewItem$1 = /*@__PURE__*/ proxyCustomElement(class ScoutListView
         "rel": [1],
         "name": [1],
         "value": [1],
-        "checked": [4]
+        "checked": [4],
+        "disabled": [4]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/scout-list-view-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"scout-list-view-item.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,klCAAklC;;MCkB7lCA,mBAAiB,iBAAAC,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AACpB,IAAA,IAAI;AACJ,IAAA,OAAO;AACP,IAAA,SAAS;IACT,IAAI,GAAa,QAAQ;AAEzB,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEH,IAAA,IAAI;AACJ,IAAA,KAAK;AACL,IAAA,OAAO;~~AAEN~~,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GACP,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;cACA,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK;AACvC,kBAAE;kBACA,QAAQ;AAEhB,QAAA,MAAM,SAAS,GACb,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;cACD,EAAE;AAER,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,EACnB,CAAA,CAAC,GAAG,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,GACV,SAAS,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,EAEpC,IAAI,CAAC,SAAS,EAAE,EAChB,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,SAAS,EAAE,CACb,CACD;;IAIH,SAAS,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AACd,YAAA,OAAO,IAAI;;AAGb,QAAA,OAAO,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI;;IAGlD,UAAU,GAAA;QAChB,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,OAAO,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAE,EAAA,IAAI,CAAC,OAAO,CAAO,EACzD,IAAI,CAAC,SAAS,IAAI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,WAAW,EAAE,EAAA,IAAI,CAAC,SAAS,CAAO,CAC5D;;IAIF,SAAS,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;~~YACzB~~,QACE,~~0BACE~~,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,CAAA;;AAIN,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;~~YAC5B~~,QACE,~~sBACE~~,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,CAAA;;AAIN,QAAA,OAAO,IAAI~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["ScoutListViewItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/list-view-item/list-view-item.css?tag=scout-list-view-item&encapsulation=shadow","src/components/list-view-item/list-view-item.tsx"],"sourcesContent":[":host {\n display: flex;\n}\n\n.button {\n flex: 1;\n display: flex;\n align-items: center;\n text-align: unset;\n min-height: var(--spacing-12);\n color: var(--color-text-base);\n padding: var(--spacing-2) var(--spacing-4);\n cursor: pointer;\n border: none;\n background-color: transparent;\n text-decoration: none;\n}\n\n.button:hover {\n background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.prefix-icon,\n.suffix-icon {\n display: flex;\n align-items: center;\n height: var(--spacing-6);\n color: var(--color-neutral-700);\n\n svg,\n .icon {\n width: var(--spacing-6);\n height: var(--spacing-6);\n }\n}\n\n.prefix-icon {\n justify-content: flex-start;\n width: var(--spacing-14);\n}\n\n.suffix-icon {\n justify-content: flex-end;\n width: var(--spacing-8);\n\n .icon {\n background-color: currentColor;\n mask-image: var(--icon);\n mask-repeat: no-repeat;\n mask-size: 100% 100%;\n }\n}\n\n.content {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.primary {\n font: var(--type-body-base);\n}\n\n.secondary {\n font: var(--type-body-sm);\n color: var(--color-neutral-700);\n}\n","import {\n Component,\n Event,\n type EventEmitter,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\nexport type ItemType = \"button\" \| \"link\" \| \"radio\" \| \"checkbox\";\n\n@Component({\n tag: \"scout-list-view-item\",\n styleUrl: \"list-view-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ScoutListViewItem {\n @Prop() icon?: string;\n @Prop() primary?: string;\n @Prop() secondary?: string;\n @Prop() type: ItemType = \"button\";\n\n @Prop() href?: string;\n @Prop() target?: string;\n @Prop() rel?: string;\n\n @Prop() name?: string;\n @Prop() value?: string;\n @Prop() checked?: boolean;\n\n @Event() scoutClick: EventEmitter<void>;\n\n render() {\n const Tag =\n this.type === \"link\"\n ? \"a\"\n : this.type === \"radio\" \|\| this.type === \"checkbox\"\n ? \"label\"\n : \"button\";\n\n const linkProps =\n this.type === \"link\"\n ? {\n href: this.href,\n target: this.target,\n // This might not be our job, but better safe than sorry.\n rel:\n this.rel ??\n (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n }\n : {};\n\n return (\n <Host role=\"listitem\">\n <Tag\n class=\"button\"\n {...linkProps}\n onClick={() => this.scoutClick.emit()}\n >\n {this.getPrefix()}\n {this.getContent()}\n {this.getSuffix()}\n </Tag>\n </Host>\n );\n }\n\n private getPrefix() {\n if (!this.icon) {\n return null;\n }\n\n return <div class=\"prefix-icon\" innerHTML={this.icon} />;\n }\n\n private getContent() {\n return (\n <div class=\"content\">\n {this.primary && <div class=\"primary\">{this.primary}</div>}\n {this.secondary && <div class=\"secondary\">{this.secondary}</div>}\n </div>\n );\n }\n\n private getSuffix() {\n if (this.type === \"radio\") {\n return (\n <scout-radio-button\n name={this.name}\n value={this.value}\n checked={this.checked}\n />\n );\n }\n\n if (this.type === \"checkbox\") {\n return (\n <scout-checkbox\n name={this.name}\n value={this.value}\n checked={this.checked}\n />\n );\n }\n\n return null;\n }\n}\n"],"version":3}
1	+ {"file":"scout-list-view-item.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,klCAAklC;;MCkB7lCA,mBAAiB,iBAAAC,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AACpB,IAAA,IAAI;AACJ,IAAA,OAAO;AACP,IAAA,SAAS;IACT,IAAI,GAAa,QAAQ;AAEzB,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEH,IAAA,IAAI;AACJ,IAAA,KAAK;AACL,IAAA,OAAO;AAEP,IAAA,QAAQ;AAEP,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GACP,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;cACA,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK;AACvC,kBAAE;kBACA,QAAQ;AAEhB,QAAA,MAAM,SAAS,GACb,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;cACD,EAAE;AAER,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,EACnB,CAAA,CAAC,GAAG,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,GACV,SAAS,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,EAEpC,IAAI,CAAC,SAAS,EAAE,EAChB,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,SAAS,EAAE,CACb,CACD;;IAIH,SAAS,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AACd,YAAA,OAAO,IAAI;;AAGb,QAAA,OAAO,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI;;IAGlD,UAAU,GAAA;QAChB,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,OAAO,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAE,EAAA,IAAI,CAAC,OAAO,CAAO,EACzD,IAAI,CAAC,SAAS,IAAI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,WAAW,EAAE,EAAA,IAAI,CAAC,SAAS,CAAO,CAC5D;;IAIF,SAAS,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;AACzB,YAAA,QACE,CACE,CAAA,oBAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,CAAA;;AAIN,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;AAC5B,YAAA,QACE,CACE,CAAA,gBAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,CAAA;;AAIN,QAAA,OAAO,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutListViewItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/list-view-item/list-view-item.css?tag=scout-list-view-item&encapsulation=shadow","src/components/list-view-item/list-view-item.tsx"],"sourcesContent":[":host {\n display: flex;\n}\n\n.button {\n flex: 1;\n display: flex;\n align-items: center;\n text-align: unset;\n min-height: var(--spacing-12);\n color: var(--color-text-base);\n padding: var(--spacing-2) var(--spacing-4);\n cursor: pointer;\n border: none;\n background-color: transparent;\n text-decoration: none;\n}\n\n.button:hover {\n background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.prefix-icon,\n.suffix-icon {\n display: flex;\n align-items: center;\n height: var(--spacing-6);\n color: var(--color-neutral-700);\n\n svg,\n .icon {\n width: var(--spacing-6);\n height: var(--spacing-6);\n }\n}\n\n.prefix-icon {\n justify-content: flex-start;\n width: var(--spacing-14);\n}\n\n.suffix-icon {\n justify-content: flex-end;\n width: var(--spacing-8);\n\n .icon {\n background-color: currentColor;\n mask-image: var(--icon);\n mask-repeat: no-repeat;\n mask-size: 100% 100%;\n }\n}\n\n.content {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.primary {\n font: var(--type-body-base);\n}\n\n.secondary {\n font: var(--type-body-sm);\n color: var(--color-neutral-700);\n}\n","import {\n Component,\n Event,\n type EventEmitter,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\nexport type ItemType = \"button\" \| \"link\" \| \"radio\" \| \"checkbox\";\n\n@Component({\n tag: \"scout-list-view-item\",\n styleUrl: \"list-view-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ScoutListViewItem {\n @Prop() icon?: string;\n @Prop() primary?: string;\n @Prop() secondary?: string;\n @Prop() type: ItemType = \"button\";\n\n @Prop() href?: string;\n @Prop() target?: string;\n @Prop() rel?: string;\n\n @Prop() name?: string;\n @Prop() value?: string;\n @Prop() checked?: boolean;\n\n @Prop() disabled?: boolean;\n\n @Event() scoutClick: EventEmitter<void>;\n\n render() {\n const Tag =\n this.type === \"link\"\n ? \"a\"\n : this.type === \"radio\" \|\| this.type === \"checkbox\"\n ? \"label\"\n : \"button\";\n\n const linkProps =\n this.type === \"link\"\n ? {\n href: this.href,\n target: this.target,\n // This might not be our job, but better safe than sorry.\n rel:\n this.rel ??\n (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n }\n : {};\n\n return (\n <Host role=\"listitem\">\n <Tag\n class=\"button\"\n {...linkProps}\n onClick={() => this.scoutClick.emit()}\n >\n {this.getPrefix()}\n {this.getContent()}\n {this.getSuffix()}\n </Tag>\n </Host>\n );\n }\n\n private getPrefix() {\n if (!this.icon) {\n return null;\n }\n\n return <div class=\"prefix-icon\" innerHTML={this.icon} />;\n }\n\n private getContent() {\n return (\n <div class=\"content\">\n {this.primary && <div class=\"primary\">{this.primary}</div>}\n {this.secondary && <div class=\"secondary\">{this.secondary}</div>}\n </div>\n );\n }\n\n private getSuffix() {\n if (this.type === \"radio\") {\n return (\n <scout-radio-button\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n />\n );\n }\n\n if (this.type === \"checkbox\") {\n return (\n <scout-checkbox\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n />\n );\n }\n\n return null;\n }\n}\n"],"version":3}

package/dist/components/scout-list-view-subheader.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-fr5CaUFu.js';
-const listViewSubheaderCss = ":host{display:flex;align-items:center;justify-content:flex-start;padding:var(--spacing-2) var(--spacing-4) var(--spacing-1) !important;border:none !important;background-color:transparent}.heading{margin:0;padding:0;font:var(--type-body-sm);color:var(--color-text-base);font-weight:500}";
+const listViewSubheaderCss = ":host{display:flex;align-items:center;justify-content:flex-start;padding:0 var(--spacing-4) !important;height:var(--spacing-12);border:none !important;background-color:transparent}.heading{margin:0;padding:0;font:var(--type-body-sm);color:var(--color-gray-800);font-weight:500}";
 const ScoutListViewSubheader$1 = /*@__PURE__*/ proxyCustomElement(class ScoutListViewSubheader extends H {
     constructor(registerHost) {
@@ -13,7 +13,7 @@ const ScoutListViewSubheader$1 = /*@__PURE__*/ proxyCustomElement(class ScoutLis
     text;
     headingLevel = "h2";
     render() {
-        return (h(Host, { key: '5ff0f60b511992241c5dacc25bd2ede127180da5', role: "listitem" }, h(this.headingLevel, { key: 'e857ca6fd07f98e379ade3efab9b7638a69ef184', class: "heading" }, this.text)));
+        return (h(Host, { key: 'b93e8553a3b335f456e7bcbd32c3c635da58da00', role: "listitem" }, h(this.headingLevel, { key: 'e82ea8203aef696156a211c6aac9415fe488a56b', class: "heading" }, this.text)));
     }
     static get delegatesFocus() { return true; }
     static get style() { return listViewSubheaderCss; }

package/dist/components/scout-list-view-subheader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"scout-list-view-subheader.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG~~,+RAA+R~~;;~~MCS/SA~~,wBAAsB,iBAAAC,kBAAA,CAAA,MAAA,sBAAA,SAAAC,CAAA,CAAA;;;;;;;;AACzB,IAAA,IAAI;IACJ,YAAY,GAA4C,IAAI;IAEpE,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,EACnB,CAAA,CAAC,IAAI,CAAC,YAAY,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,SAAS,EAAE,EAAA,IAAI,CAAC,IAAI,CAAqB,CAC7D;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutListViewSubheader","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/list-view-subheader/list-view-subheader.css?tag=scout-list-view-subheader&encapsulation=shadow","src/components/list-view-subheader/list-view-subheader.tsx"],"sourcesContent":["/** biome-ignore-all lint/complexity/noImportantStyles: https://github.com/tailwindlabs/tailwindcss/discussions/18628#discussioncomment-13915195 */\n\n:host {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: ~~var(--spacing-2)~~ var(--spacing-4) var(--spacing-1) ~~!important~~;\n border: none !important;\n background-color: transparent;\n}\n\n.heading {\n margin: 0;\n padding: 0;\n font: var(--type-body-sm);\n color: var(--color-~~text~~-~~base~~);\n font-weight: 500;\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\n@Component({\n tag: \"scout-list-view-subheader\",\n styleUrl: \"list-view-subheader.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ScoutListViewSubheader {\n @Prop() text: string;\n @Prop() headingLevel: \"h1\" \| \"h2\" \| \"h3\" \| \"h4\" \| \"h5\" \| \"h6\" = \"h2\";\n\n render() {\n return (\n <Host role=\"listitem\">\n <this.headingLevel class=\"heading\">{this.text}</this.headingLevel>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"scout-list-view-subheader.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,uRAAuR;;MCSvSA,wBAAsB,iBAAAC,kBAAA,CAAA,MAAA,sBAAA,SAAAC,CAAA,CAAA;;;;;;;;AACzB,IAAA,IAAI;IACJ,YAAY,GAA4C,IAAI;IAEpE,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,EACnB,CAAA,CAAC,IAAI,CAAC,YAAY,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,SAAS,EAAE,EAAA,IAAI,CAAC,IAAI,CAAqB,CAC7D;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutListViewSubheader","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/list-view-subheader/list-view-subheader.css?tag=scout-list-view-subheader&encapsulation=shadow","src/components/list-view-subheader/list-view-subheader.tsx"],"sourcesContent":["/** biome-ignore-all lint/complexity/noImportantStyles: https://github.com/tailwindlabs/tailwindcss/discussions/18628#discussioncomment-13915195 */\n\n:host {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 var(--spacing-4) !important;\n height: var(--spacing-12);\n border: none !important;\n background-color: transparent;\n}\n\n.heading {\n margin: 0;\n padding: 0;\n font: var(--type-body-sm);\n color: var(--color-gray-800);\n font-weight: 500;\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\n@Component({\n tag: \"scout-list-view-subheader\",\n styleUrl: \"list-view-subheader.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ScoutListViewSubheader {\n @Prop() text: string;\n @Prop() headingLevel: \"h1\" \| \"h2\" \| \"h3\" \| \"h4\" \| \"h5\" \| \"h6\" = \"h2\";\n\n render() {\n return (\n <Host role=\"listitem\">\n <this.headingLevel class=\"heading\">{this.text}</this.headingLevel>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/scout-list-view.js CHANGED Viewed

@@ -31,7 +31,7 @@ const ScoutListView$1 = /*@__PURE__*/ proxyCustomElement(class ScoutListView ext
         }
     }
     render() {
-        return (h(Host, { key: '4364bb39e10f23da20440461fea6a8d7a3274bcc', role: "list" }, h("slot", { key: '34f7de708ef874254477b8b82e54cad78db0da6c' })));
+        return (h(Host, { key: '68c7e8924c60ba15c6c8a64724eebeea1731909f', role: "list" }, h("slot", { key: '7b686b0f83c138ab0d497f9b6a0d7d5927bce63c' })));
     }
     static get delegatesFocus() { return true; }
     static get style() { return listViewCss; }

package/dist/components/scout-loader.js CHANGED Viewed

@@ -38,7 +38,7 @@ const ScoutLoader$1 = /*@__PURE__*/ proxyCustomElement(class ScoutLoader extends
         this.showElement(this.symbolElements[0]);
     }
     render() {
-        return (h(Host, { key: 'cb49f1cfa8fcf2b816da9442270724f90b5aa724', class: this.size === "base" ? "" : this.size }, h("div", { key: '9ce230b2839d37172359d3642dcd1ec87471d870', class: "frame" }, this.getSymbols()), this.text && h("div", { key: 'f79e4f64ad2ee471a39c49dc2237a8f7173bbeaf', class: "text" }, this.text)));
+        return (h(Host, { key: '4262ae621bb24ef73641363fff67a1587ea2c644', class: this.size === "base" ? "" : this.size }, h("div", { key: '54ff8ba284a22ab683a9403c803bff7999acce3f', class: "frame" }, this.getSymbols()), this.text && h("div", { key: '83368c83c87bf6e171b996c05dc6a5e4da91e26e', class: "text" }, this.text)));
     }
     showElement(el) {
         el.classList.remove("animate-out");

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

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

package/dist/components/scout-select.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, M as Mixin, c as createEvent, h } from './p-fr5CaUFu.js';
-import { i as inputMixin } from './p-DaGMxK4K.js';
+import { i as inputMixin } from './p-B-kEl-ny.js';
 const chevronDownSvg = 'data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hldnJvbi1kb3duIgo+CiAgPHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0iTTYgOWw2IDZsNiAtNiIgLz4KPC9zdmc+';
@@ -28,7 +28,7 @@ const ScoutSelect$1 = /*@__PURE__*/ proxyCustomElement(class ScoutSelect extends
     disabled = false;
     name;
     render() {
-        return (h("div", { key: 'df8da542b4f1b6a90c1899ae2ebe3f1c24328d82', class: "select-wrapper" }, h("select", { key: 'ece339ed62a6395c282766f534a0290a25e10f03', id: this.ariaId, name: this.name, class: "select", disabled: this.disabled, onChange: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }, h("slot", { key: '53baa52177e1a72c4b0f40ceda8f5de227958c38' })), h("span", { key: 'b19185c3f2152e3ee4abcab0e61c1a9f17fa2442', class: "select-icon", style: { "--icon-chevron": `url(${chevronDownSvg})` }, "aria-hidden": "true" })));
+        return (h("div", { key: '12bf95188935ab6b11101c829970800199b53e9a', class: "select-wrapper" }, h("select", { key: '1c373cc25f6de17b7139baab0af69fd23adf3b85', id: this.ariaId, name: this.name, class: "select", disabled: this.disabled, onChange: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }, h("slot", { key: '99f4430d6433e96c95651acba4ff0068235d1cb8' })), h("span", { key: '4f36424bd7395db03ea9caf10751cd570fc06853', class: "select-icon", style: { "--icon-chevron": `url(${chevronDownSvg})` }, "aria-hidden": "true" })));
     }
     static get style() { return selectCss; }
 }, [774, "scout-select", {

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

	@@ -1 +1 @@
1	- {"file":"scout-select.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,ggBAAggB;;ACAvhB,MAAM,SAAS,GAAG,mvCAAmvC;;~~ACexvC~~,MAAAA,aACX,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;AAGzB;;AAEG;IACK,KAAK,GAAW,EAAE;AAE1B;;;AAGG;IACK,QAAQ,GAAY,KAAK;AAEzB,IAAA,IAAI;IAEZ,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAC9B,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,EAEjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,gBAAgB,EAAE,CAAO,IAAA,EAAAC,cAAW,CAAG,CAAA,CAAA,EAAE,EAAA,aAAA,EACtC,MAAM,EAClB,CAAA,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutSelect","__stencil_proxyCustomElement","chevronIcon"],"sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/chevron-down.svg","src/components/select/select.css?tag=scout-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down\"\n>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n <path d=\"M6 9l6 6l6 -6\" />\n</svg>",".select-wrapper {\n position: relative;\n display: inline-flex;\n width: 100%;\n}\n\n.select {\n width: 100%;\n height: var(--spacing-10);\n padding: var(--spacing-2);\n padding-right: var(--spacing-8);\n font: var(--type-body-base);\n border: 1px solid var(--color-gray-300);\n border-radius: var(--spacing-2);\n background-color: var(--color-white);\n color: var(--color-text-base);\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n}\n\n.select:hover:not(:disabled) {\n border-color: var(--color-gray-400);\n}\n\n.select:focus {\n outline: 2px solid var(--color-background-brand-base);\n outline-offset: 1px;\n}\n\n.select:disabled {\n background-color: var(--color-gray-100);\n color: var(--color-gray-700);\n cursor: not-allowed;\n}\n\n.select-icon {\n position: absolute;\n right: var(--spacing-2);\n top: 50%;\n transform: translateY(-50%);\n width: var(--spacing-5);\n height: var(--spacing-5);\n background-color: var(--color-text-base);\n mask-image: var(--icon-chevron);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: contain;\n pointer-events: none;\n}\n\n.select:disabled + .select-icon {\n background-color: var(--color-gray-500);\n}\n","import {\n Component,\n type ComponentInterface,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport chevronIcon from \"@tabler/icons/outline/chevron-down.svg\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n@Component({\n tag: \"scout-select\",\n styleUrl: \"select.css\",\n scoped: true,\n})\nexport class ScoutSelect\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n /*\n Value of the select element, in case you want to control it yourself.\n /\n @Prop() value: string = \"\";\n\n /\n Whether the select is disabled. Disabled selects are not editable, excluded\n * from tab order and are not validated.\n */\n @Prop() disabled: boolean = false;\n\n @Prop() name: string;\n\n render() {\n return (\n <div class=\"select-wrapper\">\n <select\n id={this.ariaId}\n name={this.name}\n class=\"select\"\n disabled={this.disabled}\n onChange={() => this.onInput()}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n >\n <slot />\n </select>\n <span\n class=\"select-icon\"\n style={{ \"--icon-chevron\": `url(${chevronIcon})` }}\n aria-hidden=\"true\"\n />\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"scout-select.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,ggBAAggB;;ACAvhB,MAAM,SAAS,GAAG,mvCAAmvC;;ACoBxvC,MAAAA,aACX,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;AAGzB;;AAEG;IACK,KAAK,GAAW,EAAE;AAE1B;;;AAGG;IACK,QAAQ,GAAY,KAAK;AAEzB,IAAA,IAAI;IAEZ,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAC9B,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,EAEjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,gBAAgB,EAAE,CAAO,IAAA,EAAAC,cAAW,CAAG,CAAA,CAAA,EAAE,EAAA,aAAA,EACtC,MAAM,EAClB,CAAA,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutSelect","__stencil_proxyCustomElement","chevronIcon"],"sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/chevron-down.svg","src/components/select/select.css?tag=scout-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down\"\n>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n <path d=\"M6 9l6 6l6 -6\" />\n</svg>",".select-wrapper {\n position: relative;\n display: inline-flex;\n width: 100%;\n}\n\n.select {\n width: 100%;\n height: var(--spacing-10);\n padding: var(--spacing-2);\n padding-right: var(--spacing-8);\n font: var(--type-body-base);\n border: 1px solid var(--color-gray-300);\n border-radius: var(--spacing-2);\n background-color: var(--color-white);\n color: var(--color-text-base);\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n}\n\n.select:hover:not(:disabled) {\n border-color: var(--color-gray-400);\n}\n\n.select:focus {\n outline: 2px solid var(--color-background-brand-base);\n outline-offset: 1px;\n}\n\n.select:disabled {\n background-color: var(--color-gray-100);\n color: var(--color-gray-700);\n cursor: not-allowed;\n}\n\n.select-icon {\n position: absolute;\n right: var(--spacing-2);\n top: 50%;\n transform: translateY(-50%);\n width: var(--spacing-5);\n height: var(--spacing-5);\n background-color: var(--color-text-base);\n mask-image: var(--icon-chevron);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: contain;\n pointer-events: none;\n}\n\n.select:disabled + .select-icon {\n background-color: var(--color-gray-500);\n}\n","import {\n Component,\n type ComponentInterface,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport chevronIcon from \"@tabler/icons/outline/chevron-down.svg\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n/*\n The select component is a dropdown menu that allows users to select one\n * option from a list. When used in a form, make sure to wrap it in a Field\n * component to display a label, help text, and error messages.\n /\n@Component({\n tag: \"scout-select\",\n styleUrl: \"select.css\",\n scoped: true,\n})\nexport class ScoutSelect\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n /\n Value of the select element, in case you want to control it yourself.\n /\n @Prop() value: string = \"\";\n\n /\n Whether the select is disabled. Disabled selects are not editable, excluded\n * from tab order and are not validated.\n */\n @Prop() disabled: boolean = false;\n\n @Prop() name: string;\n\n render() {\n return (\n <div class=\"select-wrapper\">\n <select\n id={this.ariaId}\n name={this.name}\n class=\"select\"\n disabled={this.disabled}\n onChange={() => this.onInput()}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n >\n <slot />\n </select>\n <span\n class=\"select-icon\"\n style={{ \"--icon-chevron\": `url(${chevronIcon})` }}\n aria-hidden=\"true\"\n />\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/scout-stack.js CHANGED Viewed

@@ -28,10 +28,10 @@ const ScoutStack$1 = /*@__PURE__*/ proxyCustomElement(class ScoutStack extends H
      */
     gapSize = "m";
     render() {
-        return (h(Host, { key: '46f8dfbf3721fe377297d936ea07595e85b933a3', style: {
+        return (h(Host, { key: '768d68ecb7184d322a181d5917f2eaee3d270c52', style: {
                 "--stack-flex-direction": `${this.direction}`,
                 "--stack-gap-spacing": `var(--spacing-${GapSizeValues[this.gapSize]})`,
-            } }, h("slot", { key: '9d0a64fbc02da0960e96293696e77a7688af7132' })));
+            } }, h("slot", { key: '01a68b251dcbc2b46a2902f922fe56c57daf840c' })));
     }
     static get delegatesFocus() { return true; }
     static get style() { return stackCss; }

package/dist/components/scout-switch.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, M as Mixin, c as createEvent, h } from './p-fr5CaUFu.js';
-import { i as inputMixin } from './p-DaGMxK4K.js';
+import { i as inputMixin } from './p-B-kEl-ny.js';
 const switchCss = ".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)}";
@@ -37,7 +37,7 @@ const ScoutSwitch$1 = /*@__PURE__*/ proxyCustomElement(class ScoutSwitch extends
     }
     render() {
         const Tag = this.label?.length ? "label" : "div";
-        return (h(Tag, { key: '3df6f0be2cbb14fa4ad4ce777324960365ea5d68' }, this.label, h("span", { key: 'bbf999533051b967807f18f6d165a9b916a87252', class: "inlineDivider" }), h("input", { key: '8280933ed1b9038edcd8fb9bad39bef5745d4403', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "checkbox", class: "switch", "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.toggled, onChange: (event) => {
+        return (h(Tag, { key: 'b577bb6c1a4bde37ea76ae1c14bbdad4e3c11200' }, this.label, h("span", { key: 'b93dc86e4fa270efb3e8983c957731015d9709b4', class: "inlineDivider" }), h("input", { key: 'ca377aea983a9702fe9f292908048746c31433b9', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "checkbox", class: "switch", "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.toggled, onChange: (event) => {
                 this.onInput();
                 this.onChange(event);
             }, onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() })));

package/dist/components/scout-switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"scout-switch.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,ktDAAktD;;~~ACkBvtD~~,MAAAA,aACX,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;;;AAGzB;;AAEG;IACK,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEJ,IAAA,YAAY;AAKrB,IAAA,QAAQ,CAAC,KAAY,EAAA;AACnB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B;AAEjD,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,QAAQ,CAAC,OAAO;AACzB,YAAA,OAAO,EAAE,QAAQ;AAClB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK;QAChD,QACE,EAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,IAAI,CAAC,KAAK,EACX,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAQ,CAAA,EACnC,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,QAAQ,EACG,iBAAA,EAAA,IAAI,CAAC,cAAc,EACrB,eAAA,EAAA,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,KAAI;gBAClB,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;aACrB,EACD,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,CACjC,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutSwitch","__stencil_proxyCustomElement"],"sources":["src/components/switch/switch.css?tag=scout-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":[".switch {\n width: var(--spacing-10);\n height: var(--spacing-6);\n appearance: none;\n -webkit-appearance: none;\n border-radius: var(--spacing-8);\n background-color: var(--color-text-brand-inverse);\n border: 2px solid var(--color-gray-300);\n position: relative;\n display: flex;\n align-content: center;\n justify-content: center;\n transition-property: border-color;\n transition-duration: 0.3s;\n transition-timing-function: ease-in-out;\n cursor: pointer;\n --switch-ball-padding: calc(var(--spacing-1) / 4);\n --switch-ball-size: calc(var(--spacing-5) - var(--switch-ball-padding) * 2);\n}\n\n.switch:hover {\n transition-property: none;\n border-color: var(--color-gray-400);\n background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.switch:active {\n background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.switch:checked {\n border-color: var(--color-background-brand-base);\n}\n\n.switch:hover::before {\n background-color: var(--color-gray-400);\n}\n\n.switch::before {\n content: \"\";\n background-color: var(--color-gray-300);\n width: var(--switch-ball-size);\n height: var(--switch-ball-size);\n border-radius: 50%;\n position: absolute;\n top: var(--switch-ball-padding);\n left: var(--switch-ball-padding);\n transition-duration: 0.3s;\n transition-property: left, right;\n}\n.switch:checked::before {\n content: \"\";\n background-color: var(--color-background-brand-base);\n left: calc(100% - calc(var(--switch-ball-size) + var(--switch-ball-padding)));\n}\n\n.switch:disabled {\n pointer-events: none;\n background-color: var(--color-gray-100);\n border-color: var(--color-gray-100);\n}\n\n.switch:disabled::before {\n background-color: var(--color-gray-300);\n}\n\nlabel {\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n font: var(--type-label-base);\n color: var(--color-text-base);\n}\n\n.inlineDivider {\n width: var(--spacing-2);\n}\n","import {\n Component,\n type ComponentInterface,\n Event,\n type EventEmitter,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n@Component({\n tag: \"scout-switch\",\n styleUrl: \"switch.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ScoutSwitch\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n /*\n Indicates whether the switch is toggled on or off.\n /\n @Prop() toggled: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /\n Use this prop if you need to connect your switch with another element describing its use, other than the property label.\n */\n @Prop() ariaLabelledby: string;\n\n @Prop() label: string;\n\n @Event() scoutChecked: EventEmitter<{\n checked: boolean;\n element: HTMLInputElement;\n }>;\n\n onChange(event: Event) {\n const checkbox = event.target as HTMLInputElement;\n\n this.scoutChecked.emit({\n checked: checkbox.checked,\n element: checkbox,\n });\n }\n\n render() {\n const Tag = this.label?.length ? \"label\" : \"div\";\n return (\n <Tag>\n {this.label}\n <span class=\"inlineDivider\"></span>\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type=\"checkbox\"\n class=\"switch\"\n aria-labelledby={this.ariaLabelledby}\n aria-disabled={this.disabled}\n disabled={this.disabled}\n checked={this.toggled}\n onChange={(event) => {\n this.onInput();\n this.onChange(event);\n }}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n </Tag>\n );\n }\n}\n"],"version":3}
1	+ {"file":"scout-switch.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,ktDAAktD;;ACuBvtD,MAAAA,aACX,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;;;AAGzB;;AAEG;IACK,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEJ,IAAA,YAAY;AAKrB,IAAA,QAAQ,CAAC,KAAY,EAAA;AACnB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B;AAEjD,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,QAAQ,CAAC,OAAO;AACzB,YAAA,OAAO,EAAE,QAAQ;AAClB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK;QAChD,QACE,EAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,IAAI,CAAC,KAAK,EACX,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAQ,CAAA,EACnC,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,QAAQ,EACG,iBAAA,EAAA,IAAI,CAAC,cAAc,EACrB,eAAA,EAAA,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,KAAI;gBAClB,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;aACrB,EACD,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,CACjC,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutSwitch","__stencil_proxyCustomElement"],"sources":["src/components/switch/switch.css?tag=scout-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":[".switch {\n width: var(--spacing-10);\n height: var(--spacing-6);\n appearance: none;\n -webkit-appearance: none;\n border-radius: var(--spacing-8);\n background-color: var(--color-text-brand-inverse);\n border: 2px solid var(--color-gray-300);\n position: relative;\n display: flex;\n align-content: center;\n justify-content: center;\n transition-property: border-color;\n transition-duration: 0.3s;\n transition-timing-function: ease-in-out;\n cursor: pointer;\n --switch-ball-padding: calc(var(--spacing-1) / 4);\n --switch-ball-size: calc(var(--spacing-5) - var(--switch-ball-padding) * 2);\n}\n\n.switch:hover {\n transition-property: none;\n border-color: var(--color-gray-400);\n background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.switch:active {\n background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.switch:checked {\n border-color: var(--color-background-brand-base);\n}\n\n.switch:hover::before {\n background-color: var(--color-gray-400);\n}\n\n.switch::before {\n content: \"\";\n background-color: var(--color-gray-300);\n width: var(--switch-ball-size);\n height: var(--switch-ball-size);\n border-radius: 50%;\n position: absolute;\n top: var(--switch-ball-padding);\n left: var(--switch-ball-padding);\n transition-duration: 0.3s;\n transition-property: left, right;\n}\n.switch:checked::before {\n content: \"\";\n background-color: var(--color-background-brand-base);\n left: calc(100% - calc(var(--switch-ball-size) + var(--switch-ball-padding)));\n}\n\n.switch:disabled {\n pointer-events: none;\n background-color: var(--color-gray-100);\n border-color: var(--color-gray-100);\n}\n\n.switch:disabled::before {\n background-color: var(--color-gray-300);\n}\n\nlabel {\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n font: var(--type-label-base);\n color: var(--color-text-base);\n}\n\n.inlineDivider {\n width: var(--spacing-2);\n}\n","import {\n Component,\n type ComponentInterface,\n Event,\n type EventEmitter,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n/*\n The switch component is used to toggle between two states, on and off.\n * Behaves like a checkbox. When used in a form, make sure to wrap it in a Field\n * component to display a label, help text, and error messages.\n /\n@Component({\n tag: \"scout-switch\",\n styleUrl: \"switch.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ScoutSwitch\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n /\n Indicates whether the switch is toggled on or off.\n /\n @Prop() toggled: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /\n Use this prop if you need to connect your switch with another element describing its use, other than the property label.\n */\n @Prop() ariaLabelledby: string;\n\n @Prop() label: string;\n\n @Event() scoutChecked: EventEmitter<{\n checked: boolean;\n element: HTMLInputElement;\n }>;\n\n onChange(event: Event) {\n const checkbox = event.target as HTMLInputElement;\n\n this.scoutChecked.emit({\n checked: checkbox.checked,\n element: checkbox,\n });\n }\n\n render() {\n const Tag = this.label?.length ? \"label\" : \"div\";\n return (\n <Tag>\n {this.label}\n <span class=\"inlineDivider\"></span>\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type=\"checkbox\"\n class=\"switch\"\n aria-labelledby={this.ariaLabelledby}\n aria-disabled={this.disabled}\n disabled={this.disabled}\n checked={this.toggled}\n onChange={(event) => {\n this.onInput();\n this.onChange(event);\n }}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n </Tag>\n );\n }\n}\n"],"version":3}

package/dist/custom-elements.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-01-03T15:52:19",
+  "timestamp": "2026-01-09T20:42:14",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.3",
@@ -11,7 +11,7 @@
       "encapsulation": "shadow",
       "tag": "scout-app-bar",
       "readme": "# scout-app-bar\n",
-      "docs": "",
+      "docs": "The App Bar component is used at the top of a page to display a title and\noptional prefix and suffix actions. It's typically used to provide a\nnative-like navigation experience.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -283,10 +283,10 @@
     },
     {
       "filePath": "src/components/button/button.tsx",
-      "encapsulation": "scoped",
+      "encapsulation": "none",
       "tag": "scout-button",
       "readme": "# scout-button\n\n\n",
-      "docs": "A simple button component.",
+      "docs": "A button component that can be used either as a normal button or as a link.\nWill render a `<button>` element when the `type` is set to \"button\",\n\"submit\", or \"reset\", and an `<a>` element when the `type` is set to \"link\".",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -589,7 +589,7 @@
       "encapsulation": "scoped",
       "tag": "scout-checkbox",
       "readme": "# scout-checkbox\n",
-      "docs": "",
+      "docs": "The checkbox component is used to let users select one or more options from a\nset. For toggling a single option, consider using the Switch component\ninstead. When used in a form, make sure to wrap it in a Field component to\ndisplay a label, help text, and error messages.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -906,7 +906,7 @@
       "encapsulation": "scoped",
       "tag": "scout-field",
       "readme": "# scout-field\n",
-      "docs": "",
+      "docs": "The field component is used to wrap form fields with a label, help text, and\nerror messages. It automatically captures validation events from its child\ninput components and displays error messages accordingly.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -993,7 +993,7 @@
       "encapsulation": "scoped",
       "tag": "scout-input",
       "readme": "# scout-input\n",
-      "docs": "",
+      "docs": "The input component is a basic text input field that can be used to capture\nuser input. It supports various types and input modes for different use\ncases. When used in a form, make sure to wrap it in a Field component to\ndisplay a label, help text, and error messages.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -1133,6 +1133,63 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "placeholder",
+          "reflectToAttr": false,
+          "docs": "Placeholder text should rarely be used as it poses a lot of accessibility\nissues.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "size",
+          "type": "\"large\" | \"medium\"",
+          "complexType": {
+            "original": "\"medium\" | \"large\"",
+            "resolved": "\"large\" | \"medium\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "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.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "\"medium\""
+            }
+          ],
+          "default": "\"medium\"",
+          "values": [
+            {
+              "value": "large",
+              "type": "string"
+            },
+            {
+              "value": "medium",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "type",
           "type": "\"email\" | \"number\" | \"password\" | \"tel\" | \"text\" | \"url\" | string & {}",
@@ -1242,6 +1299,40 @@
           "required": false,
           "getter": false,
           "setter": false
+        },
+        {
+          "name": "variant",
+          "type": "\"default\" | \"elevated\"",
+          "complexType": {
+            "original": "\"default\" | \"elevated\"",
+            "resolved": "\"default\" | \"elevated\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "variant",
+          "reflectToAttr": false,
+          "docs": "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.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "\"default\""
+            }
+          ],
+          "default": "\"default\"",
+          "values": [
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "elevated",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [],
@@ -1604,6 +1695,29 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "href",
           "type": "string",
@@ -2057,7 +2171,7 @@
       "encapsulation": "scoped",
       "tag": "scout-radio-button",
       "readme": "# scout-radio-button\n",
-      "docs": "",
+      "docs": "The radio button component is used to let users select one option from a set.\nWhen used in a form, make sure to wrap it in a Field component to display a\nlabel, help text, and error messages.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -2355,7 +2469,7 @@
       "encapsulation": "scoped",
       "tag": "scout-select",
       "readme": "# scout-select\n\nA styled native select component for choosing from a list of options.\n\n## Usage\n\n```html\n<scout-select>\n  <option value=\"\">Select an option</option>\n  <option value=\"1\">Option 1</option>\n  <option value=\"2\">Option 2</option>\n  <option value=\"3\">Option 3</option>\n</scout-select>\n```\n\n### With Field\n\n```html\n<scout-field label=\"Choose your option\">\n  <scout-select>\n    <option value=\"\">Select an option</option>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Option 2</option>\n  </scout-select>\n</scout-field>\n```\n",
-      "docs": "A styled native select component for choosing from a list of options.",
+      "docs": "The select component is a dropdown menu that allows users to select one\noption from a list. When used in a form, make sure to wrap it in a Field\ncomponent to display a label, help text, and error messages.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -2675,7 +2789,7 @@
       "encapsulation": "shadow",
       "tag": "scout-switch",
       "readme": "# scout-switch\n",
-      "docs": "",
+      "docs": "The switch component is used to toggle between two states, on and off.\nBehaves like a checkbox. When used in a form, make sure to wrap it in a Field\ncomponent to display a label, help text, and error messages.",
       "docsTags": [],
       "usage": {},
       "props": [

package/dist/esm/{inputMixin-mAf9ZFOg.js → inputMixin-C9OB0DNj.js} RENAMED Viewed

@@ -37,6 +37,10 @@ const inputMixin = (Base) => {
         }
         onInput() {
             this.runValidation();
+            this.scoutInputChange.emit({
+                value: this.inputElement.value,
+                element: this.inputElement,
+            });
         }
         onBlur() {
             this.scoutBlur.emit();
@@ -60,6 +64,6 @@ const inputMixin = (Base) => {
 };
 export { inputMixin as i };
-//# sourceMappingURL=inputMixin-mAf9ZFOg.js.map
+//# sourceMappingURL=inputMixin-C9OB0DNj.js.map
-//# sourceMappingURL=inputMixin-mAf9ZFOg.js.map
+//# sourceMappingURL=inputMixin-C9OB0DNj.js.map