@scouterna/ui-webc 2.2.7 → 3.0.0

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

@@ -1,5 +1,5 @@
-import { M as Mixin, r as registerInstance, c as createEvent, h } from './index-xD2pOo_x.js';
-import { i as inputMixin } from './inputMixin-BuDdNX3m.js';
+import { M as Mixin, r as registerInstance, c as createEvent, h } from './index-oi0_K_Yh.js';
+import { i as inputMixin } from './inputMixin-DcoTF4zg.js';
 
 const checkSvg = 'data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hlY2siCj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNNSAxMmw1IDVsMTAgLTEwIiAvPgo8L3N2Zz4=';
 
@@ -11,7 +11,8 @@ const ScoutCheckbox = class extends Mixin(inputMixin) {
         registerInstance(this, hostRef);
         this.scoutInputChange = createEvent(this, "scoutInputChange");
         this.scoutBlur = createEvent(this, "scoutBlur");
-        this._scoutValidate = createEvent(this, "_scoutValidate");
+        this.scoutValidate = createEvent(this, "scoutValidate");
+        this._scoutValidityChanged = createEvent(this, "_scoutValidityChanged");
         this._scoutInvalid = createEvent(this, "_scoutInvalid");
         this._scoutFieldId = createEvent(this, "_scoutFieldId");
         this.scoutChecked = createEvent(this, "scoutChecked");
@@ -40,6 +41,11 @@ const ScoutCheckbox = class extends Mixin(inputMixin) {
                 this.onChange(event);
             }, onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }), this.label));
     }
+    static get watchers() { return {
+        "validity": [{
+                "runValidation": 0
+            }]
+    }; }
 };
 ScoutCheckbox.style = checkboxCss();
 
@@ -51,7 +57,8 @@ const ScoutRadioButton = class extends Mixin(inputMixin) {
         registerInstance(this, hostRef);
         this.scoutInputChange = createEvent(this, "scoutInputChange");
         this.scoutBlur = createEvent(this, "scoutBlur");
-        this._scoutValidate = createEvent(this, "_scoutValidate");
+        this.scoutValidate = createEvent(this, "scoutValidate");
+        this._scoutValidityChanged = createEvent(this, "_scoutValidityChanged");
         this._scoutInvalid = createEvent(this, "_scoutInvalid");
         this._scoutFieldId = createEvent(this, "_scoutFieldId");
         this.scoutChecked = createEvent(this, "scoutChecked");
@@ -80,6 +87,11 @@ const ScoutRadioButton = class extends Mixin(inputMixin) {
                 this.onChange(event);
             }, onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }), this.label));
     }
+    static get watchers() { return {
+        "validity": [{
+                "runValidation": 0
+            }]
+    }; }
 };
 ScoutRadioButton.style = radioButtonCss();
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-xD2pOo_x.js';
+import { r as registerInstance, h, H as Host } from './index-oi0_K_Yh.js';
 
 const dividerCss = () => `:host{display:block;height:1px;background-color:var(--color-gray-200)}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h } from './index-xD2pOo_x.js';
+import { r as registerInstance, a as getElement, h } from './index-oi0_K_Yh.js';
 
 const fieldCss = () => `.field.sc-scout-field{display:flex;flex-direction:column}.label.sc-scout-field{font:var(--type-label-sm);font-weight:600;color:var(--color-text-base)}.error-text.sc-scout-field{font:var(--type-label-sm);color:var(--color-text-danger-base);margin:var(--spacing-1) 0 0 0}.error-text.sc-scout-field:empty{margin:0}.help-text.sc-scout-field{font:var(--type-label-sm);color:var(--color-gray-600);margin:var(--spacing-1) 0 0 0}`;
 
@@ -36,7 +36,7 @@ const ScoutField = class {
         this.errorHidden = false;
     }
     render() {
-        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)));
+        return (h("div", { key: 'b2b20acd9c1e41294bfbb8ce7e450e23142c5606', class: "field" }, h("label", { key: '7b375df7d5a5e4bbe44ae963775c58a6c27b5479', htmlFor: this.inputId, class: "label" }, this.label), h("slot", { key: 'c5783c044aa82977cd21a56df4f838af95bc0bf3' }), h("p", { key: '38df5a4f28432e046bb95fed66d6c1972e1d7adc', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && h("p", { key: '1f84da3fad92b45ac1cf3b8d1fad75276b7f8359', class: "help-text" }, this.helpText)));
     }
 };
 ScoutField.style = fieldCss();

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

@@ -1,5 +1,5 @@
-import { M as Mixin, r as registerInstance, c as createEvent, h, H as Host } from './index-xD2pOo_x.js';
-import { i as inputMixin } from './inputMixin-BuDdNX3m.js';
+import { M as Mixin, r as registerInstance, c as createEvent, h, H as Host } from './index-oi0_K_Yh.js';
+import { i as inputMixin } from './inputMixin-DcoTF4zg.js';
 
 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),     0 2px 4px -2px rgba(0, 0, 0, 0.1);border-color:transparent}`;
 
@@ -9,7 +9,8 @@ const ScoutInput = class extends Mixin(inputMixin) {
         registerInstance(this, hostRef);
         this.scoutInputChange = createEvent(this, "scoutInputChange");
         this.scoutBlur = createEvent(this, "scoutBlur");
-        this._scoutValidate = createEvent(this, "_scoutValidate");
+        this.scoutValidate = createEvent(this, "scoutValidate");
+        this._scoutValidityChanged = createEvent(this, "_scoutValidityChanged");
         this._scoutInvalid = createEvent(this, "_scoutInvalid");
         this._scoutFieldId = createEvent(this, "_scoutFieldId");
     }
@@ -59,6 +60,11 @@ const ScoutInput = class extends Mixin(inputMixin) {
         const variantClass = this.variant === "elevated" ? "elevated" : "";
         return (h(Host, { key: '800efa151d522ef1d7a483128baa6c0958dcd100', class: `${sizeClass} ${variantClass}` }, h("input", { key: '92756a5cdf529455fffaadcbcdd2bc36a5087c65', 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 watchers() { return {
+        "validity": [{
+                "runValidation": 0
+            }]
+    }; }
 };
 ScoutInput.style = inputCss();
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-xD2pOo_x.js';
+import { r as registerInstance, c as createEvent, h } from './index-oi0_K_Yh.js';
 
 const linkCss = () => `:host{display:inline}a,button{color:var(--color-text-brand-base);-webkit-text-decoration:none;text-decoration:none}@media (hover: hover){a:hover,button:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--color-background-brand-hover)}}a:active,button:active{color:var(--color-background-brand-pressed)}button{display:inline;background:none;border:none;padding:0;cursor:pointer}`;
 

package/dist/esm/scout-list-view-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-xD2pOo_x.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-oi0_K_Yh.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}@media (hover: hover){.button:hover{background-color:var(--color-background-brand-subtle-hovered)}}.prefix-icon,.suffix-icon{display:flex;align-items:center;height:var(--spacing-6);color:var(--color-neutral-700)}.prefix-icon svg,.suffix-icon svg,.prefix-icon .icon,.suffix-icon .icon{width:var(--spacing-6);height:var(--spacing-6)}.prefix-icon{justify-content:flex-start;width:var(--spacing-14)}.suffix-icon{justify-content:flex-end;width:var(--spacing-8)}.suffix-icon .icon{background-color:currentColor;-webkit-mask-image:var(--icon);mask-image:var(--icon);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.content{flex:1;display:flex;flex-direction:column;justify-content:center}.primary{font:var(--type-body-base)}.secondary{font:var(--type-body-sm);color:var(--color-neutral-700)}`;
 

package/dist/esm/scout-list-view-subheader.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-xD2pOo_x.js';
+import { r as registerInstance, h, H as Host } from './index-oi0_K_Yh.js';
 
 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}`;
 

package/dist/esm/scout-list-view.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h, H as Host } from './index-xD2pOo_x.js';
+import { r as registerInstance, a as getElement, h, H as Host } from './index-oi0_K_Yh.js';
 
 const listViewCss = () => `:host{display:flex;flex-direction:column;padding:var(--spacing-2) 0}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-xD2pOo_x.js';
+import { r as registerInstance, h, H as Host } from './index-oi0_K_Yh.js';
 
 const adventurerSvg = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iMjU2IgogICBoZWlnaHQ9IjI1NiIKICAgdmlld0JveD0iMCAwIDI1NiAyNTYiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzEiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczEiIC8+CiAgPGcKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0ibWF0cml4KDMuNzc5NTA2NSwwLDAsMy43Nzk1MDY1LC0zMDkuODc3MDcsLTM3OS41OTg3MSkiPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOmN1cnJlbnRDb2xvciIKICAgICAgIGQ9Im0gOTYuNzE5NTg3LDE2NS42NTE2OSBjIDAuMDMyMSwtMC4wNzU4IDAuMDgwMiwtMC4yNTQ5OCAwLjEwNjgzLC0wLjM5ODIyIDAuMDI5NSwtMC4xNTg4MiAyLjUwNjA1LC00LjAwNjA1IDYuMzQ2NjkzLC05Ljg1OTQ2IDYuMDQ0NTgsLTkuMjEyMzggNi4zMDc4MSwtOS41OTkwNiA2LjUzNTI0LC05LjYwMDI4IDAuMjE5NzksLTAuMDAxIDAuMzQ0MzUsMC4xNDcwMyAxLjcxODYxLDIuMDQ0OSAwLjgxNDksMS4xMjUzOSAxLjUwNjkxLDIuMDYxNzkgMS41Mzc4MSwyLjA4MDg4IDAuMDMwOSwwLjAxOTEgMC42Nzc5NSwtMS40NTk2NiAxLjQzNzkxLC0zLjI4NjEzIDEuMzY3NjYsLTMuMjg3MDEgMS4zODQwNSwtMy4zMjA4NSAxLjYwODUzLC0zLjMyMDg1IDAuMjIzMzQsMCAwLjIzNDg5LDAuMDIyOCAwLjc1NzMsMS40OTU4MyAyLjEwMjI0LDUuOTI3NjEgMi41NDAxMiw3LjEyMDgyIDIuNTkzNTcsNy4wNjczNCAwLjA4MzgsLTAuMDgzOSAzLjA2MDEsLTUuNzEyMDIgMy4wNjAxLC01Ljc4NjY2IDAsLTAuMDMzMiAwLjEwNTIsLTAuMDYwNCAwLjIzMzc5LC0wLjA2MDQgMC4yMDIzOCwwIDAuMjg1NDEsMC4wNzY3IDAuNjE4MTUsMC41NzA3OCAwLjIxMTQxLDAuMzEzOTMgMi45MTA0NSw0LjYwOTU1IDUuOTk3ODgsOS41NDU4MSA0LjMxNTgsNi45MDAyMSA1LjYyNjAyLDkuMDUyMzggNS42Njc2Myw5LjMwOTYzIGwgMC4wNTQxLDAuMzM0NTkgaCAtMTkuMTY2MjkgYyAtMTguMjIzMzczLDAgLTE5LjE2MzQxMywtMC4wMDcgLTE5LjEwNzg3MywtMC4xMzc3NyB6IG0gMjIuNzI5NDkzLC0yMC41ODc0NiBjIC0wLjE3ODY5LC0wLjIyMTM4IC0wLjkzODA0LC0xLjgzNDQ4IC0yLjE0MDk2LC00LjU0ODA4IC0wLjcwMDI0LC0xLjU3OTYzIC0xLjMwMTE1LC0yLjkwMDU4IC0xLjMzNTM2LC0yLjkzNTQzIC0wLjA5ODksLTAuMTAwOCAtMS4yMzMzOCwyLjUxOTEzIC0yLjU1ODY2LDUuOTA4OTQgLTAuNzE3MTMsMS44MzQyOSAtMC41NzMwMiwxLjg1MjYgLTIuMjk5NDUsLTAuMjkyMTcgLTAuNzMwNiwtMC45MDc2NCAtMS4zNTE1LC0xLjY1MTYyIC0xLjM3OTc5LC0xLjY1MzMgLTAuMDI4MywtMC4wMDIgLTAuNTI0MjcsMC42NTIyNiAtMS4xMDIxOSwxLjQ1MzE5IC0xLjM0OTQzLDEuODcwMTQgLTEuMzMwMDEsMS44NjQ3OSAtMS43ODQ5MywwLjQ5MjI4IC0wLjU1NzU2LC0xLjY4MjIxIC0wLjY2NDUyLC0yLjM4NjgzIC0wLjYxODQ0LC00LjA3NDE5IDAuMDMxNSwtMS4xNTE1NyAwLjA5MTgsLTEuNzUzMTMgMC4yODg0NiwtMi44NzM1OCAwLjI4Nzg1LC0xLjY0MDM0IDAuMzMzMjIsLTIuODg3MjQgMC4xMzc2MywtMy43ODI2MiAtMC4wODQ2LC0wLjM4NzMzIC0wLjM1NjQzLC0xLjAxNyAtMC45MDA2NSwtMi4wODYzIC0wLjgzMDQxLC0xLjYzMTYyIC0xLjI1MTA4LC0yLjc2MDUyIC0xLjUwOTQ5LC00LjA1MDg1IC0wLjg0MzQxLC00LjIxMTM2IC0wLjAwNiwtOS45ODc0MyAyLjA1MTU4LC0xNC4xNDMzMSAxLjYxNTM2LC0zLjI2MzQgNC4wMzYyNywtNS45NzY5NiA3LjE4OTY5LC04LjA1ODgxIDEuMjQxMTYsLTAuODE5NCAyLjM2NTI2LC0xLjQwMTYxIDIuODM0MjIsLTEuNDY3OTUgMC4yMTY1LC0wLjAzMDYgMC40OTYzMywtMC4wODEgMC42MjE4NCwtMC4xMTE4OCAwLjE2MjUsLTAuMDQgMC4yMTIxNiwtMC4wMzAyIDAuMTcyNDksMC4wMzQgLTAuMDMxNiwwLjA1MTIgLTAuMDA4LDAuMDkwMSAwLjA1MzgsMC4wOTAxIDAuMDg4MywwIDAuMDY1NiwwLjIyNTM1IC0wLjExNjY1LDEuMTYxMjQgLTAuMzUzMzIsMS44MTQxNiAtMC45MDE2Nyw1LjEyNTAzIC0xLjA4NTQ5LDYuNTU0MTQgLTAuMzUyNjcsMi43NDE4NiAtMC4yOTM4MiwzLjk0NDM0IDAuMjc2NDcsNS42NDg3OSAwLjI4NTc2LDAuODU0MDkgMC45OTE3LDIuMzMzODcgMS4zODg1NSwyLjkxMDY3IGwgMC4yMzczNywwLjM0NSAxLjUwMTQ1LC0zLjExMzg1IGMgMS43Mzc0MiwtMy42MDMyMyAxLjYzNTAyLC0zLjQ4MzY3IDIuMjExODMsLTIuNTgyNDQgMS44OTkyOCwyLjk2NzUgNC4yOTMwMSw3LjM2NDQ3IDUuMjM5NjUsOS42MjQ1NCAxLjE1MzcyLDIuNzU0NDkgMS45NDkzMSw1LjIwNDg3IDIuMzQ4MjksNy4yMzI2OCAwLjE5NzgsMS4wMDUzMiAwLjIxMTM1LDEuMjEyNTIgMC4yMTQyMywzLjI3NzU1IDAuMDAzLDIuMTEzMzggLTAuMDA2LDIuMjQ1ODYgLTAuMjEyOTgsMy4yMDg2NSAtMC40OTA1MywyLjI3OTk4IC0xLjQyMTU4LDQuNDM1NDQgLTIuOTA1MDMsNi43MjU0IC0wLjcwNTgxLDEuMDg5NTQgLTAuNjA1NzgsMS4xNDMwNyAtMi4yMzA0NSwtMS4xOTM3OCAtMC43MzYxMSwtMS4wNTg3OSAtMS4zNTk2NSwtMS45MjYyNCAtMS4zODU2NCwtMS45Mjc2NyAtMC4wMjYsLTAuMDAxIC0wLjQ2NjI3LDAuNjc5MzkgLTAuOTc4NDEsMS41MTI5MiAtMS42MjE0MSwyLjYzODk1IC0xLjc0MzM1LDIuODE0NTQgLTEuOTU0NiwyLjgxNDU0IC0wLjEwMzkyLDAgLTAuMjI0NywtMC4wNDQzIC0wLjI2ODM4LC0wLjA5ODQgeiBtIC0wLjczNDEyLC0xMi4xNTIwNiBjIDEuMDk5NywtMS41Mzg3OCAxLjcxNDU0LC0yLjc3NTE4IDIuMDkxMzEsLTQuMjA1NDcgMC4yMTYzNiwtMC44MjEzNSAwLjU0NjY2LC0yLjcwMTA4IDAuNjMyNTksLTMuNjAwMSAwLjA1MjgsLTAuNTUyNzYgMC4wNjEyLC0wLjU3MDc4IDAuMjY1MjMsLTAuNTcwNzggMC4zMDIzLDAgMS42MjkwNCwxLjI2Nzk5IDIuNTgwODgsMi40NjY2IDAuNDE4NDcsMC41MjY5NCAwLjgwODY5LDEuMDEwNDMgMC44NjcxOCwxLjA3NDQxIDAuMTExOTQsMC4xMjI0NSAtMC4yOTMyOCwtMC45NTg2NyAtMC44OTAyLC0yLjM3NTAyIC0wLjQxNTMzLC0wLjk4NTQ5IC0xLjE2MTA0LC0yLjMxMjE0IC0yLjIyNjM5LC0zLjk2MDg1IC0xLjE0NzUsLTEuNzc1ODMgLTEuMzAxODMsLTIuMDA0NjEgLTEuMzUzMjQsLTIuMDA2MTUgLTAuMDI2LC03LjhlLTQgLTAuNTQxODEsMS4yMTE5OCAtMS4xNDYzNCwyLjY5NTAzIC0xLjM0MDc0LDMuMjg5MTggLTEuMjM4NDksMy4xOTMxNiAtMi4wMTY4OSwxLjg5Mzk2IC0xLjYxMjM4LC0yLjY5MTE1IC0zLjE4MTIzLC01LjYwNzU2IC0zLjUyNzc1LC02LjU1Nzg3IC0wLjQ2MjQ1LC0xLjI2ODI5IC0xLjA4NTI3LC00LjAzOTIxIC0xLjM0MzAyLC01Ljk3NTA5IC0wLjA1MjUsLTAuMzk0NjYgLTAuMTIxMDMsLTAuNzE3NTYgLTAuMTUyMTgsLTAuNzE3NTYgLTAuMDg3NywwIC0wLjgyNTUyLDAuODI5MzIgLTEuNDM1OTUsMS42MTM5MyAtMS44NzY0NiwyLjQxMTg5IC0zLjI3MzE2LDUuMjM4NSAtMy43NTM3NCw3LjU5Njc1IC0wLjM0ODk1LDEuNzEyMzUgLTAuMzYyMjQsMy45OTkxNiAtMC4wMzM1LDUuNzY3NDEgMC4xNTE4LDAuODE2NDkgMC41MTI1NiwyLjE4NDcgMC41NzYwMywyLjE4NDYyIDAuMDI2MywtNGUtNSAwLjE4MjgzLC0wLjY5OTc0IDAuMzQ3ODIsLTEuNTU0ODkgMC4zNzA3NCwtMS45MjE1NCAwLjYyMjczLC0yLjY5MzA5IDEuMzA1NzUsLTMuOTk4MDIgMC40ODM1NCwtMC45MjM4MyAwLjU1NjA4LC0xLjAyMzA0IDAuNzYzMzEsLTEuMDQzOTIgMC4yMjc2NSwtMC4wMjI5IDAuMjM5NjMsLTAuMDAyIDIuMDM5NzQsMy42MTYwNiAxLjg0OTI5LDMuNzE2NiAyLjExMzg4LDQuMTY1NzIgMy4xOTUsNS40MjMzNiAwLjU4NTc2LDAuNjgxNCAyLjY2NzksMi44MzI4OCAyLjczOTc0LDIuODMwOTggMC4wMjY3LC03LjFlLTQgMC4yNDAzMiwtMC4yNjk1MyAwLjQ3NDYzLC0wLjU5NzM5IHoiCiAgICAgICBpZD0icGF0aDUiIC8+CiAgPC9nPgo8L3N2Zz4K';
 

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

@@ -1,5 +1,5 @@
-import { M as Mixin, r as registerInstance, c as createEvent, h } from './index-xD2pOo_x.js';
-import { i as inputMixin } from './inputMixin-BuDdNX3m.js';
+import { M as Mixin, r as registerInstance, c as createEvent, h } from './index-oi0_K_Yh.js';
+import { i as inputMixin } from './inputMixin-DcoTF4zg.js';
 
 const chevronDownSvg = 'data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hldnJvbi1kb3duIgo+CiAgPHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0iTTYgOWw2IDZsNiAtNiIgLz4KPC9zdmc+';
 
@@ -11,7 +11,8 @@ const ScoutSelect = class extends Mixin(inputMixin) {
         registerInstance(this, hostRef);
         this.scoutInputChange = createEvent(this, "scoutInputChange");
         this.scoutBlur = createEvent(this, "scoutBlur");
-        this._scoutValidate = createEvent(this, "_scoutValidate");
+        this.scoutValidate = createEvent(this, "scoutValidate");
+        this._scoutValidityChanged = createEvent(this, "_scoutValidityChanged");
         this._scoutInvalid = createEvent(this, "_scoutInvalid");
         this._scoutFieldId = createEvent(this, "_scoutFieldId");
     }
@@ -26,8 +27,13 @@ const ScoutSelect = class extends Mixin(inputMixin) {
     disabled = false;
     name;
     render() {
-        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" })));
+        return (h("div", { key: '12bf95188935ab6b11101c829970800199b53e9a', class: "select-wrapper" }, h("select", { key: '23b78d816a0f95c659ce2d97fadd7e7ca413c521', ref: (el) => this.setInputRef(el), id: this.ariaId, name: this.name, class: "select", disabled: this.disabled, onChange: () => this.onInput(), onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }, h("slot", { key: '652f8938b7bc8c32e2a2976e024e36a07afc8f5a' })), h("span", { key: 'f2e2dd4d5266145c6a854a3e5610c887d7e1e259', class: "select-icon", style: { "--icon-chevron": `url(${chevronDownSvg})` }, "aria-hidden": "true" })));
     }
+    static get watchers() { return {
+        "validity": [{
+                "runValidation": 0
+            }]
+    }; }
 };
 ScoutSelect.style = selectCss();
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-xD2pOo_x.js';
+import { r as registerInstance, h, H as Host } from './index-oi0_K_Yh.js';
 
 const stackCss = () => `:host{display:flex;width:100%;flex-direction:var(--stack-flex-direction);gap:var(--stack-gap-spacing)}`;
 

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

@@ -1,5 +1,5 @@
-import { M as Mixin, r as registerInstance, c as createEvent, h } from './index-xD2pOo_x.js';
-import { i as inputMixin } from './inputMixin-BuDdNX3m.js';
+import { M as Mixin, r as registerInstance, c as createEvent, h } from './index-oi0_K_Yh.js';
+import { i as inputMixin } from './inputMixin-DcoTF4zg.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)}@media (hover: hover){.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)}@media (hover: hover){.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)}`;
 
@@ -9,7 +9,8 @@ const ScoutSwitch = class extends Mixin(inputMixin) {
         registerInstance(this, hostRef);
         this.scoutInputChange = createEvent(this, "scoutInputChange");
         this.scoutBlur = createEvent(this, "scoutBlur");
-        this._scoutValidate = createEvent(this, "_scoutValidate");
+        this.scoutValidate = createEvent(this, "scoutValidate");
+        this._scoutValidityChanged = createEvent(this, "_scoutValidityChanged");
         this._scoutInvalid = createEvent(this, "_scoutInvalid");
         this._scoutFieldId = createEvent(this, "_scoutFieldId");
         this.scoutChecked = createEvent(this, "scoutChecked");
@@ -40,6 +41,11 @@ const ScoutSwitch = class extends Mixin(inputMixin) {
             }, onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() })));
     }
     static get delegatesFocus() { return true; }
+    static get watchers() { return {
+        "validity": [{
+                "runValidation": 0
+            }]
+    }; }
 };
 ScoutSwitch.style = switchCss();
 

package/dist/esm/ui-webc.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-xD2pOo_x.js';
-export { s as setNonce } from './index-xD2pOo_x.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-oi0_K_Yh.js';
+export { s as setNonce } from './index-oi0_K_Yh.js';
 
 /*
  Stencil Client Patch Browser v4.41.1 | MIT Licensed | https://stenciljs.com
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["scout-list-view-item",[[529,"scout-list-view-item",{"icon":[1],"primary":[1],"secondary":[1],"type":[1],"href":[1],"target":[1],"rel":[1],"name":[1],"value":[1],"checked":[4],"disabled":[4]}]]],["scout-app-bar",[[785,"scout-app-bar",{"titleText":[1,"title-text"]}]]],["scout-bottom-bar",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item",[[529,"scout-bottom-bar-item",{"type":[1],"href":[1],"target":[1],"rel":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button",[[772,"scout-button",{"type":[1],"href":[1],"target":[1],"rel":[1],"size":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"]}]]],["scout-card",[[273,"scout-card"]]],["scout-divider",[[17,"scout-divider"]]],["scout-field",[[774,"scout-field",{"label":[1],"helpText":[1,"help-text"],"inputId":[32],"errorText":[32],"errorHidden":[32]},[[0,"_scoutFieldId","catchFieldId"],[0,"_scoutValidate","handleValidation"],[0,"scoutBlur","showError"],[0,"_scoutInvalid","showError"]]]]],["scout-input",[[514,"scout-input",{"validate":[16],"size":[1],"variant":[1],"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"name":[1],"disabled":[4],"placeholder":[1],"ariaId":[32]}]]],["scout-link",[[529,"scout-link",{"href":[1],"label":[1],"rel":[1],"linkAriaLabel":[1,"link-aria-label"],"type":[1],"target":[1]}]]],["scout-list-view",[[273,"scout-list-view",null,[[0,"scoutChecked","onScoutChecked"]]]]],["scout-list-view-subheader",[[529,"scout-list-view-subheader",{"text":[1],"headingLevel":[1,"heading-level"]}]]],["scout-loader",[[513,"scout-loader",{"text":[1],"size":[1]}]]],["scout-select",[[774,"scout-select",{"validate":[16],"value":[1],"disabled":[4],"name":[1],"ariaId":[32]}]]],["scout-stack",[[785,"scout-stack",{"direction":[1],"gapSize":[1,"gap-size"]}]]],["scout-switch",[[529,"scout-switch",{"validate":[16],"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]],["scout-checkbox_2",[[514,"scout-checkbox",{"validate":[16],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}],[514,"scout-radio-button",{"validate":[16],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}]]]], options);
+  return bootstrapLazy([["scout-list-view-item",[[529,"scout-list-view-item",{"icon":[1],"primary":[1],"secondary":[1],"type":[1],"href":[1],"target":[1],"rel":[1],"name":[1],"value":[1],"checked":[4],"disabled":[4]}]]],["scout-app-bar",[[785,"scout-app-bar",{"titleText":[1,"title-text"]}]]],["scout-bottom-bar",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item",[[529,"scout-bottom-bar-item",{"type":[1],"href":[1],"target":[1],"rel":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button",[[772,"scout-button",{"type":[1],"href":[1],"target":[1],"rel":[1],"size":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"]}]]],["scout-card",[[273,"scout-card"]]],["scout-divider",[[17,"scout-divider"]]],["scout-field",[[774,"scout-field",{"label":[1],"helpText":[1,"help-text"],"inputId":[32],"errorText":[32],"errorHidden":[32]},[[0,"_scoutFieldId","catchFieldId"],[0,"_scoutValidityChanged","handleValidation"],[0,"scoutBlur","showError"],[0,"_scoutInvalid","showError"]]]]],["scout-input",[[514,"scout-input",{"validity":[1],"size":[1],"variant":[1],"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"name":[1],"disabled":[4],"placeholder":[1],"ariaId":[32]},null,{"validity":[{"runValidation":0}]}]]],["scout-link",[[529,"scout-link",{"href":[1],"label":[1],"rel":[1],"linkAriaLabel":[1,"link-aria-label"],"type":[1],"target":[1]}]]],["scout-list-view",[[273,"scout-list-view",null,[[0,"scoutChecked","onScoutChecked"]]]]],["scout-list-view-subheader",[[529,"scout-list-view-subheader",{"text":[1],"headingLevel":[1,"heading-level"]}]]],["scout-loader",[[513,"scout-loader",{"text":[1],"size":[1]}]]],["scout-select",[[774,"scout-select",{"validity":[1],"value":[1],"disabled":[4],"name":[1],"ariaId":[32]},null,{"validity":[{"runValidation":0}]}]]],["scout-stack",[[785,"scout-stack",{"direction":[1],"gapSize":[1,"gap-size"]}]]],["scout-switch",[[529,"scout-switch",{"validity":[1],"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]},null,{"validity":[{"runValidation":0}]}]]],["scout-checkbox_2",[[514,"scout-checkbox",{"validity":[1],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]},null,{"validity":[{"runValidation":0}]}],[514,"scout-radio-button",{"validity":[1],"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]},null,{"validity":[{"runValidation":0}]}]]]], options);
 });

package/dist/types/components.d.ts

@@ -122,9 +122,9 @@ export namespace Components {
         "label": string;
         "name": string;
         /**
-          * Custom validation function run on top of the implicit validation performed by the browser. Return a string with the validation message to mark the input as invalid, or null to mark it as valid.
+          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
          */
-        "validate"?: (value: string) => string | null;
+        "validity"?: string;
         "value": string;
     }
     interface ScoutDivider {
@@ -180,9 +180,9 @@ export namespace Components {
          */
         "type": InputType;
         /**
-          * Custom validation function run on top of the implicit validation performed by the browser. Return a string with the validation message to mark the input as invalid, or null to mark it as valid.
+          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
          */
-        "validate"?: (value: string) => string | null;
+        "validity"?: string;
         /**
           * Value of the input element, in case you want to control it yourself.
           * @default ""
@@ -272,9 +272,9 @@ export namespace Components {
         "label": string;
         "name": string;
         /**
-          * Custom validation function run on top of the implicit validation performed by the browser. Return a string with the validation message to mark the input as invalid, or null to mark it as valid.
+          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
          */
-        "validate"?: (value: string) => string | null;
+        "validity"?: string;
         "value": string;
     }
     /**
@@ -290,9 +290,9 @@ export namespace Components {
         "disabled": boolean;
         "name": string;
         /**
-          * Custom validation function run on top of the implicit validation performed by the browser. Return a string with the validation message to mark the input as invalid, or null to mark it as valid.
+          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
          */
-        "validate"?: (value: string) => string | null;
+        "validity"?: string;
         /**
           * Value of the select element, in case you want to control it yourself.
           * @default ""
@@ -332,9 +332,9 @@ export namespace Components {
          */
         "toggled": boolean;
         /**
-          * Custom validation function run on top of the implicit validation performed by the browser. Return a string with the validation message to mark the input as invalid, or null to mark it as valid.
+          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
          */
-        "validate"?: (value: string) => string | null;
+        "validity"?: string;
     }
 }
 export interface ScoutBottomBarItemCustomEvent<T> extends CustomEvent<T> {
@@ -453,7 +453,11 @@ declare global {
       element: HTMLElement;
     };
         "scoutBlur": void;
-        "_scoutValidate": { element: HTMLElement };
+        "scoutValidate": {
+      value: string;
+      element: HTMLElement;
+    };
+        "_scoutValidityChanged": { element: HTMLElement };
         "_scoutInvalid": void;
         "_scoutFieldId": string;
         "scoutChecked": {
@@ -504,7 +508,11 @@ declare global {
       element: HTMLElement;
     };
         "scoutBlur": void;
-        "_scoutValidate": { element: HTMLElement };
+        "scoutValidate": {
+      value: string;
+      element: HTMLElement;
+    };
+        "_scoutValidityChanged": { element: HTMLElement };
         "_scoutInvalid": void;
         "_scoutFieldId": string;
     }
@@ -586,7 +594,11 @@ declare global {
       element: HTMLElement;
     };
         "scoutBlur": void;
-        "_scoutValidate": { element: HTMLElement };
+        "scoutValidate": {
+      value: string;
+      element: HTMLElement;
+    };
+        "_scoutValidityChanged": { element: HTMLElement };
         "_scoutInvalid": void;
         "_scoutFieldId": string;
         "scoutChecked": {
@@ -619,7 +631,11 @@ declare global {
       element: HTMLElement;
     };
         "scoutBlur": void;
-        "_scoutValidate": { element: HTMLElement };
+        "scoutValidate": {
+      value: string;
+      element: HTMLElement;
+    };
+        "_scoutValidityChanged": { element: HTMLElement };
         "_scoutInvalid": void;
         "_scoutFieldId": string;
     }
@@ -654,7 +670,11 @@ declare global {
       element: HTMLElement;
     };
         "scoutBlur": void;
-        "_scoutValidate": { element: HTMLElement };
+        "scoutValidate": {
+      value: string;
+      element: HTMLElement;
+    };
+        "_scoutValidityChanged": { element: HTMLElement };
         "_scoutInvalid": void;
         "_scoutFieldId": string;
         "scoutChecked": {
@@ -815,9 +835,19 @@ declare namespace LocalJSX {
     checked: boolean;
     element: HTMLInputElement;
   }>) => void;
+        /**
+          * Event emitted when the input value changes. If you want to do custom validation, use the `scoutValidate` event instead to ensure forms are blocked by the browser when invalid.
+         */
         "onScoutInputChange"?: (event: ScoutCheckboxCustomEvent<{
       value: string;
       element: HTMLElement;
+    }>) => void;
+        /**
+          * Event emitted when the input needs to be validated. This is where you implement your custom validation. Set any possible validation message using the `validity` prop.
+         */
+        "onScoutValidate"?: (event: ScoutCheckboxCustomEvent<{
+      value: string;
+      element: HTMLElement;
     }>) => void;
         /**
           * Internal event used for form field association.
@@ -830,11 +860,11 @@ declare namespace LocalJSX {
         /**
           * Internal event used for form field validation.
          */
-        "on_scoutValidate"?: (event: ScoutCheckboxCustomEvent<{ element: HTMLElement }>) => void;
+        "on_scoutValidityChanged"?: (event: ScoutCheckboxCustomEvent<{ element: HTMLElement }>) => void;
         /**
-          * Custom validation function run on top of the implicit validation performed by the browser. Return a string with the validation message to mark the input as invalid, or null to mark it as valid.
+          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
          */
-        "validate"?: (value: string) => string | null;
+        "validity"?: string;
         "value"?: string;
     }
     interface ScoutDivider {
@@ -872,9 +902,19 @@ declare namespace LocalJSX {
         "inputmode"?: InputMode;
         "name"?: string;
         "onScoutBlur"?: (event: ScoutInputCustomEvent<void>) => void;
+        /**
+          * Event emitted when the input value changes. If you want to do custom validation, use the `scoutValidate` event instead to ensure forms are blocked by the browser when invalid.
+         */
         "onScoutInputChange"?: (event: ScoutInputCustomEvent<{
       value: string;
       element: HTMLElement;
+    }>) => void;
+        /**
+          * Event emitted when the input needs to be validated. This is where you implement your custom validation. Set any possible validation message using the `validity` prop.
+         */
+        "onScoutValidate"?: (event: ScoutInputCustomEvent<{
+      value: string;
+      element: HTMLElement;
     }>) => void;
         /**
           * Internal event used for form field association.
@@ -887,7 +927,7 @@ declare namespace LocalJSX {
         /**
           * Internal event used for form field validation.
          */
-        "on_scoutValidate"?: (event: ScoutInputCustomEvent<{ element: HTMLElement }>) => void;
+        "on_scoutValidityChanged"?: (event: ScoutInputCustomEvent<{ element: HTMLElement }>) => void;
         /**
           * Regex pattern for input validation.
          */
@@ -907,9 +947,9 @@ declare namespace LocalJSX {
          */
         "type"?: InputType;
         /**
-          * Custom validation function run on top of the implicit validation performed by the browser. Return a string with the validation message to mark the input as invalid, or null to mark it as valid.
+          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
          */
-        "validate"?: (value: string) => string | null;
+        "validity"?: string;
         /**
           * Value of the input element, in case you want to control it yourself.
           * @default ""
@@ -1008,9 +1048,19 @@ declare namespace LocalJSX {
     checked: boolean;
     element: HTMLInputElement;
   }>) => void;
+        /**
+          * Event emitted when the input value changes. If you want to do custom validation, use the `scoutValidate` event instead to ensure forms are blocked by the browser when invalid.
+         */
         "onScoutInputChange"?: (event: ScoutRadioButtonCustomEvent<{
       value: string;
       element: HTMLElement;
+    }>) => void;
+        /**
+          * Event emitted when the input needs to be validated. This is where you implement your custom validation. Set any possible validation message using the `validity` prop.
+         */
+        "onScoutValidate"?: (event: ScoutRadioButtonCustomEvent<{
+      value: string;
+      element: HTMLElement;
     }>) => void;
         /**
           * Internal event used for form field association.
@@ -1023,11 +1073,11 @@ declare namespace LocalJSX {
         /**
           * Internal event used for form field validation.
          */
-        "on_scoutValidate"?: (event: ScoutRadioButtonCustomEvent<{ element: HTMLElement }>) => void;
+        "on_scoutValidityChanged"?: (event: ScoutRadioButtonCustomEvent<{ element: HTMLElement }>) => void;
         /**
-          * Custom validation function run on top of the implicit validation performed by the browser. Return a string with the validation message to mark the input as invalid, or null to mark it as valid.
+          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
          */
-        "validate"?: (value: string) => string | null;
+        "validity"?: string;
         "value"?: string;
     }
     /**
@@ -1043,9 +1093,19 @@ declare namespace LocalJSX {
         "disabled"?: boolean;
         "name"?: string;
         "onScoutBlur"?: (event: ScoutSelectCustomEvent<void>) => void;
+        /**
+          * Event emitted when the input value changes. If you want to do custom validation, use the `scoutValidate` event instead to ensure forms are blocked by the browser when invalid.
+         */
         "onScoutInputChange"?: (event: ScoutSelectCustomEvent<{
       value: string;
       element: HTMLElement;
+    }>) => void;
+        /**
+          * Event emitted when the input needs to be validated. This is where you implement your custom validation. Set any possible validation message using the `validity` prop.
+         */
+        "onScoutValidate"?: (event: ScoutSelectCustomEvent<{
+      value: string;
+      element: HTMLElement;
     }>) => void;
         /**
           * Internal event used for form field association.
@@ -1058,11 +1118,11 @@ declare namespace LocalJSX {
         /**
           * Internal event used for form field validation.
          */
-        "on_scoutValidate"?: (event: ScoutSelectCustomEvent<{ element: HTMLElement }>) => void;
+        "on_scoutValidityChanged"?: (event: ScoutSelectCustomEvent<{ element: HTMLElement }>) => void;
         /**
-          * Custom validation function run on top of the implicit validation performed by the browser. Return a string with the validation message to mark the input as invalid, or null to mark it as valid.
+          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
          */
-        "validate"?: (value: string) => string | null;
+        "validity"?: string;
         /**
           * Value of the select element, in case you want to control it yourself.
           * @default ""
@@ -1101,9 +1161,19 @@ declare namespace LocalJSX {
     checked: boolean;
     element: HTMLInputElement;
   }>) => void;
+        /**
+          * Event emitted when the input value changes. If you want to do custom validation, use the `scoutValidate` event instead to ensure forms are blocked by the browser when invalid.
+         */
         "onScoutInputChange"?: (event: ScoutSwitchCustomEvent<{
       value: string;
       element: HTMLElement;
+    }>) => void;
+        /**
+          * Event emitted when the input needs to be validated. This is where you implement your custom validation. Set any possible validation message using the `validity` prop.
+         */
+        "onScoutValidate"?: (event: ScoutSwitchCustomEvent<{
+      value: string;
+      element: HTMLElement;
     }>) => void;
         /**
           * Internal event used for form field association.
@@ -1116,16 +1186,16 @@ declare namespace LocalJSX {
         /**
           * Internal event used for form field validation.
          */
-        "on_scoutValidate"?: (event: ScoutSwitchCustomEvent<{ element: HTMLElement }>) => void;
+        "on_scoutValidityChanged"?: (event: ScoutSwitchCustomEvent<{ element: HTMLElement }>) => void;
         /**
           * Indicates whether the switch is toggled on or off.
           * @default false
          */
         "toggled"?: boolean;
         /**
-          * Custom validation function run on top of the implicit validation performed by the browser. Return a string with the validation message to mark the input as invalid, or null to mark it as valid.
+          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
          */
-        "validate"?: (value: string) => string | null;
+        "validity"?: string;
     }
     interface IntrinsicElements {
         "scout-app-bar": ScoutAppBar;

package/dist/ui-webc/p-0719ebb3.entry.js

@@ -0,0 +1 @@
+import{M as t,r as s,c as a,h as i,H as r}from"./p-oi0_K_Yh.js";import{i as o}from"./p-D1IdWeS2.js";const e=class extends(t(o)){constructor(t){super(),s(this,t),this.scoutInputChange=a(this,"scoutInputChange"),this.scoutBlur=a(this,"scoutBlur"),this.scoutValidate=a(this,"scoutValidate"),this._scoutValidityChanged=a(this,"_scoutValidityChanged"),this._scoutInvalid=a(this,"_scoutInvalid"),this._scoutFieldId=a(this,"_scoutFieldId")}size="medium";variant="default";type="text";inputmode;pattern;value="";name;disabled=!1;placeholder;render(){return i(r,{key:"800efa151d522ef1d7a483128baa6c0958dcd100",class:`${"large"===this.size?"large":""} ${"elevated"===this.variant?"elevated":""}`},i("input",{key:"92756a5cdf529455fffaadcbcdd2bc36a5087c65",ref:t=>this.setInputRef(t),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 watchers(){return{validity:[{runValidation:0}]}}};e.style=".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),     0 2px 4px -2px rgba(0, 0, 0, 0.1);border-color:transparent}";export{e as scout_input}

package/dist/ui-webc/{p-f3ff75c8.entry.js → p-0dfc0d2d.entry.js}

@@ -1 +1 @@
-import{r as e,a as t,h as s,H as c}from"./p-xD2pOo_x.js";const o=class{constructor(t){e(this,t)}get el(){return t(this)}onScoutChecked(e){const{checked:t,element:s}=e.detail;if("radio"!==s.type||!s.name||!t)return;const c=this.el.querySelectorAll("scout-list-view-item"),o=[];c.forEach((e=>{e.shadowRoot.querySelectorAll(`input[type="radio"][name="${CSS.escape(s.name)}"]`).forEach((e=>{e!==s&&o.push(e)}))}));for(const e of o)e.checked=!1}render(){return s(c,{key:"68c7e8924c60ba15c6c8a64724eebeea1731909f",role:"list"},s("slot",{key:"7b686b0f83c138ab0d497f9b6a0d7d5927bce63c"}))}static get delegatesFocus(){return!0}};o.style=":host{display:flex;flex-direction:column;padding:var(--spacing-2) 0}";export{o as scout_list_view}
+import{r as e,a as t,h as s,H as c}from"./p-oi0_K_Yh.js";const o=class{constructor(t){e(this,t)}get el(){return t(this)}onScoutChecked(e){const{checked:t,element:s}=e.detail;if("radio"!==s.type||!s.name||!t)return;const c=this.el.querySelectorAll("scout-list-view-item"),o=[];c.forEach((e=>{e.shadowRoot.querySelectorAll(`input[type="radio"][name="${CSS.escape(s.name)}"]`).forEach((e=>{e!==s&&o.push(e)}))}));for(const e of o)e.checked=!1}render(){return s(c,{key:"68c7e8924c60ba15c6c8a64724eebeea1731909f",role:"list"},s("slot",{key:"7b686b0f83c138ab0d497f9b6a0d7d5927bce63c"}))}static get delegatesFocus(){return!0}};o.style=":host{display:flex;flex-direction:column;padding:var(--spacing-2) 0}";export{o as scout_list_view}

package/dist/ui-webc/{p-66f2d080.entry.js → p-110bba25.entry.js}

@@ -1 +1 @@
-import{r as e,c as t,h as i,H as r}from"./p-xD2pOo_x.js";const s=class{constructor(i){e(this,i),this.scoutClick=t(this,"scoutClick")}icon;primary;secondary;type="button";href;target;rel;name;value;checked;disabled;scoutClick;render(){return i(r,{key:"329bcf60c9b9df6af329d833500b673f3de7e0ff",role:"listitem"},i("link"===this.type?"a":"radio"===this.type||"checkbox"===this.type?"label":"button",{key:"864c0c388e72a544afac7b73dc715fc992f913aa",class:"button",..."link"===this.type?{href:this.href,target:this.target,rel:this.rel??("_blank"===this.target?"noopener noreferrer":void 0)}:{},onClick:()=>this.scoutClick.emit()},this.getPrefix(),this.getContent(),this.getSuffix()))}getPrefix(){return this.icon?i("div",{class:"prefix-icon",innerHTML:this.icon}):null}getContent(){return i("div",{class:"content"},this.primary&&i("div",{class:"primary"},this.primary),this.secondary&&i("div",{class:"secondary"},this.secondary))}getSuffix(){return"radio"===this.type?i("scout-radio-button",{name:this.name,value:this.value,checked:this.checked,disabled:this.disabled}):"checkbox"===this.type?i("scout-checkbox",{name:this.name,value:this.value,checked:this.checked,disabled:this.disabled}):null}static get delegatesFocus(){return!0}};s.style=":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}@media (hover: hover){.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)}";export{s as scout_list_view_item}
+import{r as e,c as t,h as i,H as r}from"./p-oi0_K_Yh.js";const s=class{constructor(i){e(this,i),this.scoutClick=t(this,"scoutClick")}icon;primary;secondary;type="button";href;target;rel;name;value;checked;disabled;scoutClick;render(){return i(r,{key:"329bcf60c9b9df6af329d833500b673f3de7e0ff",role:"listitem"},i("link"===this.type?"a":"radio"===this.type||"checkbox"===this.type?"label":"button",{key:"864c0c388e72a544afac7b73dc715fc992f913aa",class:"button",..."link"===this.type?{href:this.href,target:this.target,rel:this.rel??("_blank"===this.target?"noopener noreferrer":void 0)}:{},onClick:()=>this.scoutClick.emit()},this.getPrefix(),this.getContent(),this.getSuffix()))}getPrefix(){return this.icon?i("div",{class:"prefix-icon",innerHTML:this.icon}):null}getContent(){return i("div",{class:"content"},this.primary&&i("div",{class:"primary"},this.primary),this.secondary&&i("div",{class:"secondary"},this.secondary))}getSuffix(){return"radio"===this.type?i("scout-radio-button",{name:this.name,value:this.value,checked:this.checked,disabled:this.disabled}):"checkbox"===this.type?i("scout-checkbox",{name:this.name,value:this.value,checked:this.checked,disabled:this.disabled}):null}static get delegatesFocus(){return!0}};s.style=":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}@media (hover: hover){.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)}";export{s as scout_list_view_item}

package/dist/ui-webc/{p-8da4cdaa.entry.js → p-2c6e4b7d.entry.js}

@@ -1 +1 @@
-import{r as e,a as t,h as a}from"./p-xD2pOo_x.js";const l=class{constructor(t){e(this,t)}label;helpText;inputId;errorText=null;errorHidden=!1;get hostElement(){return t(this)}catchFieldId(e){e.stopPropagation(),this.inputId=e.detail}handleValidation(e){const{element:t}=e.detail;this.errorHidden=!0,this.errorText=t.validity.valid?null:t.validationMessage}showError(){this.errorHidden=!1}render(){return a("div",{key:"e7539abfb11fac14a5ffd87cfb1a70dd9c41cca7",class:"field"},a("label",{key:"c4501be15aafbb2d6e3c447c5893aa2510e20b89",htmlFor:this.inputId,class:"label"},this.label),a("slot",{key:"5806c8d41926245074fb395b08226272a2432d96"}),a("p",{key:"f1a36881c2ce2f8485d31e8faac452c9c2423d74",class:"error-text","aria-live":"polite"},!this.errorHidden&&this.errorText),this.helpText&&a("p",{key:"0d9ea374551b527d085ef33595fdee27e80d08fb",class:"help-text"},this.helpText))}};l.style=".field.sc-scout-field{display:flex;flex-direction:column}.label.sc-scout-field{font:var(--type-label-sm);font-weight:600;color:var(--color-text-base)}.error-text.sc-scout-field{font:var(--type-label-sm);color:var(--color-text-danger-base);margin:var(--spacing-1) 0 0 0}.error-text.sc-scout-field:empty{margin:0}.help-text.sc-scout-field{font:var(--type-label-sm);color:var(--color-gray-600);margin:var(--spacing-1) 0 0 0}";export{l as scout_field}
+import{r as e,a as t,h as a}from"./p-oi0_K_Yh.js";const l=class{constructor(t){e(this,t)}label;helpText;inputId;errorText=null;errorHidden=!1;get hostElement(){return t(this)}catchFieldId(e){e.stopPropagation(),this.inputId=e.detail}handleValidation(e){const{element:t}=e.detail;this.errorHidden=!0,this.errorText=t.validity.valid?null:t.validationMessage}showError(){this.errorHidden=!1}render(){return a("div",{key:"b2b20acd9c1e41294bfbb8ce7e450e23142c5606",class:"field"},a("label",{key:"7b375df7d5a5e4bbe44ae963775c58a6c27b5479",htmlFor:this.inputId,class:"label"},this.label),a("slot",{key:"c5783c044aa82977cd21a56df4f838af95bc0bf3"}),a("p",{key:"38df5a4f28432e046bb95fed66d6c1972e1d7adc",class:"error-text","aria-live":"polite"},!this.errorHidden&&this.errorText),this.helpText&&a("p",{key:"1f84da3fad92b45ac1cf3b8d1fad75276b7f8359",class:"help-text"},this.helpText))}};l.style=".field.sc-scout-field{display:flex;flex-direction:column}.label.sc-scout-field{font:var(--type-label-sm);font-weight:600;color:var(--color-text-base)}.error-text.sc-scout-field{font:var(--type-label-sm);color:var(--color-text-danger-base);margin:var(--spacing-1) 0 0 0}.error-text.sc-scout-field:empty{margin:0}.help-text.sc-scout-field{font:var(--type-label-sm);color:var(--color-gray-600);margin:var(--spacing-1) 0 0 0}";export{l as scout_field}