@scouterna/ui-webc 2.2.7 → 3.0.0

package/dist/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-01-20T21:28:21",
+  "timestamp": "2026-01-29T18:24:24",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.41.1",
@@ -761,20 +761,21 @@
           "setter": false
         },
         {
-          "name": "validate",
-          "type": "(value: string) => string",
+          "name": "validity",
+          "type": "string",
           "complexType": {
-            "original": "(value: string) => string | null",
-            "resolved": "(value: string) => string",
+            "original": "string",
+            "resolved": "string",
             "references": {}
           },
           "mutable": false,
+          "attr": "validity",
           "reflectToAttr": false,
-          "docs": "Custom validation function run on top of the implicit validation performed\nby the browser. Return a string with the validation message to mark the\ninput as invalid, or null to mark it as valid.",
+          "docs": "Custom validation message. If set, the input is considered invalid by the\nbrowser, and if wrapped by a field component, the message is displayed.\nIf not set, the input is considered valid.",
           "docsTags": [],
           "values": [
             {
-              "type": "(value: string) => string"
+              "type": "string"
             }
           ],
           "optional": true,
@@ -837,7 +838,7 @@
           "docsTags": []
         },
         {
-          "event": "_scoutValidate",
+          "event": "_scoutValidityChanged",
           "detail": "{ element: HTMLElement; }",
           "bubbles": true,
           "complexType": {
@@ -904,7 +905,26 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "",
+          "docs": "Event emitted when the input value changes. If you want to do custom\nvalidation, use the `scoutValidate` event instead to ensure forms are\nblocked by the browser when invalid.",
+          "docsTags": []
+        },
+        {
+          "event": "scoutValidate",
+          "detail": "{ value: string; element: HTMLElement; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{\n      value: string;\n      element: HTMLElement;\n    }",
+            "resolved": "{ value: string; element: HTMLElement; }",
+            "references": {
+              "HTMLElement": {
+                "location": "global",
+                "id": "global::HTMLElement"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event emitted when the input needs to be validated. This is where you\nimplement your custom validation. Set any possible validation message\nusing the `validity` prop.",
           "docsTags": []
         }
       ],
@@ -1006,7 +1026,7 @@
           "passive": false
         },
         {
-          "event": "_scoutValidate",
+          "event": "_scoutValidityChanged",
           "capture": false,
           "passive": false
         },
@@ -1296,20 +1316,21 @@
           "setter": false
         },
         {
-          "name": "validate",
-          "type": "(value: string) => string",
+          "name": "validity",
+          "type": "string",
           "complexType": {
-            "original": "(value: string) => string | null",
-            "resolved": "(value: string) => string",
+            "original": "string",
+            "resolved": "string",
             "references": {}
           },
           "mutable": false,
+          "attr": "validity",
           "reflectToAttr": false,
-          "docs": "Custom validation function run on top of the implicit validation performed\nby the browser. Return a string with the validation message to mark the\ninput as invalid, or null to mark it as valid.",
+          "docs": "Custom validation message. If set, the input is considered invalid by the\nbrowser, and if wrapped by a field component, the message is displayed.\nIf not set, the input is considered valid.",
           "docsTags": [],
           "values": [
             {
-              "type": "(value: string) => string"
+              "type": "string"
             }
           ],
           "optional": true,
@@ -1418,7 +1439,7 @@
           "docsTags": []
         },
         {
-          "event": "_scoutValidate",
+          "event": "_scoutValidityChanged",
           "detail": "{ element: HTMLElement; }",
           "bubbles": true,
           "complexType": {
@@ -1466,7 +1487,26 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "",
+          "docs": "Event emitted when the input value changes. If you want to do custom\nvalidation, use the `scoutValidate` event instead to ensure forms are\nblocked by the browser when invalid.",
+          "docsTags": []
+        },
+        {
+          "event": "scoutValidate",
+          "detail": "{ value: string; element: HTMLElement; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{\n      value: string;\n      element: HTMLElement;\n    }",
+            "resolved": "{ value: string; element: HTMLElement; }",
+            "references": {
+              "HTMLElement": {
+                "location": "global",
+                "id": "global::HTMLElement"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event emitted when the input needs to be validated. This is where you\nimplement your custom validation. Set any possible validation message\nusing the `validity` prop.",
           "docsTags": []
         }
       ],
@@ -2355,20 +2395,21 @@
           "setter": false
         },
         {
-          "name": "validate",
-          "type": "(value: string) => string",
+          "name": "validity",
+          "type": "string",
           "complexType": {
-            "original": "(value: string) => string | null",
-            "resolved": "(value: string) => string",
+            "original": "string",
+            "resolved": "string",
             "references": {}
           },
           "mutable": false,
+          "attr": "validity",
           "reflectToAttr": false,
-          "docs": "Custom validation function run on top of the implicit validation performed\nby the browser. Return a string with the validation message to mark the\ninput as invalid, or null to mark it as valid.",
+          "docs": "Custom validation message. If set, the input is considered invalid by the\nbrowser, and if wrapped by a field component, the message is displayed.\nIf not set, the input is considered valid.",
           "docsTags": [],
           "values": [
             {
-              "type": "(value: string) => string"
+              "type": "string"
             }
           ],
           "optional": true,
@@ -2431,7 +2472,7 @@
           "docsTags": []
         },
         {
-          "event": "_scoutValidate",
+          "event": "_scoutValidityChanged",
           "detail": "{ element: HTMLElement; }",
           "bubbles": true,
           "complexType": {
@@ -2498,7 +2539,26 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "",
+          "docs": "Event emitted when the input value changes. If you want to do custom\nvalidation, use the `scoutValidate` event instead to ensure forms are\nblocked by the browser when invalid.",
+          "docsTags": []
+        },
+        {
+          "event": "scoutValidate",
+          "detail": "{ value: string; element: HTMLElement; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{\n      value: string;\n      element: HTMLElement;\n    }",
+            "resolved": "{ value: string; element: HTMLElement; }",
+            "references": {
+              "HTMLElement": {
+                "location": "global",
+                "id": "global::HTMLElement"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event emitted when the input needs to be validated. This is where you\nimplement your custom validation. Set any possible validation message\nusing the `validity` prop.",
           "docsTags": []
         }
       ],
@@ -2578,20 +2638,21 @@
           "setter": false
         },
         {
-          "name": "validate",
-          "type": "(value: string) => string",
+          "name": "validity",
+          "type": "string",
           "complexType": {
-            "original": "(value: string) => string | null",
-            "resolved": "(value: string) => string",
+            "original": "string",
+            "resolved": "string",
             "references": {}
           },
           "mutable": false,
+          "attr": "validity",
           "reflectToAttr": false,
-          "docs": "Custom validation function run on top of the implicit validation performed\nby the browser. Return a string with the validation message to mark the\ninput as invalid, or null to mark it as valid.",
+          "docs": "Custom validation message. If set, the input is considered invalid by the\nbrowser, and if wrapped by a field component, the message is displayed.\nIf not set, the input is considered valid.",
           "docsTags": [],
           "values": [
             {
-              "type": "(value: string) => string"
+              "type": "string"
             }
           ],
           "optional": true,
@@ -2660,7 +2721,7 @@
           "docsTags": []
         },
         {
-          "event": "_scoutValidate",
+          "event": "_scoutValidityChanged",
           "detail": "{ element: HTMLElement; }",
           "bubbles": true,
           "complexType": {
@@ -2708,7 +2769,26 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "",
+          "docs": "Event emitted when the input value changes. If you want to do custom\nvalidation, use the `scoutValidate` event instead to ensure forms are\nblocked by the browser when invalid.",
+          "docsTags": []
+        },
+        {
+          "event": "scoutValidate",
+          "detail": "{ value: string; element: HTMLElement; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{\n      value: string;\n      element: HTMLElement;\n    }",
+            "resolved": "{ value: string; element: HTMLElement; }",
+            "references": {
+              "HTMLElement": {
+                "location": "global",
+                "id": "global::HTMLElement"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event emitted when the input needs to be validated. This is where you\nimplement your custom validation. Set any possible validation message\nusing the `validity` prop.",
           "docsTags": []
         }
       ],
@@ -2950,20 +3030,21 @@
           "setter": false
         },
         {
-          "name": "validate",
-          "type": "(value: string) => string",
+          "name": "validity",
+          "type": "string",
           "complexType": {
-            "original": "(value: string) => string | null",
-            "resolved": "(value: string) => string",
+            "original": "string",
+            "resolved": "string",
             "references": {}
           },
           "mutable": false,
+          "attr": "validity",
           "reflectToAttr": false,
-          "docs": "Custom validation function run on top of the implicit validation performed\nby the browser. Return a string with the validation message to mark the\ninput as invalid, or null to mark it as valid.",
+          "docs": "Custom validation message. If set, the input is considered invalid by the\nbrowser, and if wrapped by a field component, the message is displayed.\nIf not set, the input is considered valid.",
           "docsTags": [],
           "values": [
             {
-              "type": "(value: string) => string"
+              "type": "string"
             }
           ],
           "optional": true,
@@ -3003,7 +3084,7 @@
           "docsTags": []
         },
         {
-          "event": "_scoutValidate",
+          "event": "_scoutValidityChanged",
           "detail": "{ element: HTMLElement; }",
           "bubbles": true,
           "complexType": {
@@ -3070,7 +3151,26 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "",
+          "docs": "Event emitted when the input value changes. If you want to do custom\nvalidation, use the `scoutValidate` event instead to ensure forms are\nblocked by the browser when invalid.",
+          "docsTags": []
+        },
+        {
+          "event": "scoutValidate",
+          "detail": "{ value: string; element: HTMLElement; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{\n      value: string;\n      element: HTMLElement;\n    }",
+            "resolved": "{ value: string; element: HTMLElement; }",
+            "references": {
+              "HTMLElement": {
+                "location": "global",
+                "id": "global::HTMLElement"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event emitted when the input needs to be validated. This is where you\nimplement your custom validation. Set any possible validation message\nusing the `validity` prop.",
           "docsTags": []
         }
       ],

package/dist/esm/{index-xD2pOo_x.js → index-oi0_K_Yh.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'ui-webc';
-const BUILD = /* ui-webc */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: false, slotRelocation: true, state: true, updatable: true};
+const BUILD = /* ui-webc */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, slotRelocation: true, state: true, updatable: true};
 
 const globalScripts = () => {};
 const globalStyles = ":root{--misc-color-annotations:#ff00ff;--color-blue-50:#e6eeff;--color-blue-100:#d0e0ff;--color-blue-200:#9cc3ff;--color-blue-300:#58a6ff;--color-blue-400:#0087e3;--color-blue-500:#006bb5;--color-blue-600:#00508a;--color-blue-700:#003660;--color-blue-800:#002748;--color-blue-900:#00162d;--color-blue-950:#000f21;--color-neutral-50:#ebf1f7;--color-neutral-100:#d7e4f0;--color-neutral-200:#b1cde3;--color-neutral-300:#87b3d4;--color-neutral-400:#749bb7;--color-neutral-500:#608199;--color-neutral-600:#4c667a;--color-neutral-700:#374b5a;--color-neutral-800:#25343f;--color-neutral-900:#131d24;--color-neutral-950:#0a1217;--color-white:#ffffff;--color-challengerpink-50:#fff0f2;--color-challengerpink-100:#ffdde3;--color-challengerpink-200:#ffbac7;--color-challengerpink-300:#ff93ab;--color-challengerpink-400:#ff668e;--color-challengerpink-500:#ff1271;--color-challengerpink-600:#da005e;--color-challengerpink-700:#a60046;--color-challengerpink-800:#72002e;--color-challengerpink-900:#470019;--color-challengerpink-950:#30000f;--color-orange-50:#fffbeb;--color-orange-100:#fef3c7;--color-orange-200:#fde68a;--color-orange-300:#fcd34d;--color-orange-400:#fbbf24;--color-orange-500:#f59e0b;--color-orange-600:#d97706;--color-orange-700:#b45309;--color-orange-800:#92400e;--color-orange-900:#78350f;--color-orange-950:#451a03;--color-gray-50:#f3f3f4;--color-gray-100:#e5e5e6;--color-gray-200:#cbccce;--color-gray-300:#b2b3b6;--color-gray-400:#9c9ea1;--color-gray-500:#85868a;--color-gray-600:#6e7073;--color-gray-700:#585a5c;--color-gray-800:#444547;--color-gray-900:#252627;--color-gray-950:#151616;--color-discovererblue-50:#eaf5ff;--color-discovererblue-100:#cde9ff;--color-discovererblue-200:#92d4ff;--color-discovererblue-300:#1ec0ff;--color-discovererblue-400:#00a8e1;--color-discovererblue-500:#008bbb;--color-discovererblue-600:#006d94;--color-discovererblue-700:#01516f;--color-discovererblue-800:#00394f;--color-discovererblue-900:#00202f;--color-discovererblue-950:#00131d;--color-trackergreen-50:#ccfec6;--color-trackergreen-100:#85fd72;--color-trackergreen-200:#5be23d;--color-trackergreen-300:#4ec333;--color-trackergreen-400:#41a629;--color-trackergreen-500:#348821;--color-trackergreen-600:#286c18;--color-trackergreen-700:#1c5110;--color-trackergreen-800:#113808;--color-trackergreen-900:#072103;--color-trackergreen-950:#031501;--color-green-50:#f0fdf4;--color-green-100:#dcfce7;--color-green-200:#b9f8cf;--color-green-300:#7bf1a8;--color-green-400:#05df72;--color-green-500:#00c950;--color-green-600:#00a63e;--color-green-700:#008236;--color-green-800:#016630;--color-green-900:#0d542b;--color-green-950:#032e15;--color-red-50:#fef2f2;--color-red-100:#ffe2e2;--color-red-200:#ffc9c9;--color-red-300:#ffa2a2;--color-red-400:#ff6467;--color-red-500:#fb2c36;--color-red-600:#e7000b;--color-red-700:#c10007;--color-red-800:#9f0712;--color-red-900:#82181a;--color-red-950:#460809;--color-black:#000000;--color-roveryellow-50:#fffd62;--color-roveryellow-100:#f4f203;--color-roveryellow-200:#e2e000;--color-roveryellow-300:#c3c100;--color-roveryellow-400:#a4a300;--color-roveryellow-500:#878500;--color-roveryellow-600:#6a6900;--color-roveryellow-700:#515000;--color-roveryellow-800:#373700;--color-roveryellow-900:#1f1f00;--color-roveryellow-950:#121200;--color-adventurerorange-50:#fff1ee;--color-adventurerorange-100:#fee2dd;--color-adventurerorange-200:#fec0b4;--color-adventurerorange-300:#fda18b;--color-adventurerorange-400:#fd7a4c;--color-adventurerorange-500:#e95f13;--color-adventurerorange-600:#b94a0d;--color-adventurerorange-700:#8e3708;--color-adventurerorange-800:#622303;--color-adventurerorange-900:#3c1301;--color-adventurerorange-950:#280a01;--fontsize-base:1rem;--fontfamily-sans:\"Source Sans 3 Variable\", sans-serif;--spacing-base:0.25rem;--color-text-caution-base:var(--color-orange-700);--color-text-caution-bold-base:var(--color-orange-50);--color-text-brand-base:var(--color-blue-700);--color-text-brand-inverse:var(--color-white);--color-text-danger-base:var(--color-red-700);--color-text-danger-bold-base:var(--color-red-50);--color-text-positive-bold-base:var(--color-green-50);--color-text-positive-base:var(--color-green-700);--color-text-base:var(--color-neutral-800);--color-background-danger-base:var(--color-red-100);--color-background-danger-bold-base:var(--color-red-700);--color-background-danger-bold-hovered:var(--color-red-800);--color-background-danger-bold-pressed:var(--color-red-900);--color-background-brand-subtle-hovered:var(--color-blue-50);--color-background-brand-subtle-pressed:var(--color-blue-100);--color-background-brand-subtle-base:var(--color-blue-700);--color-background-brand-hovered:var(--color-blue-800);--color-background-brand-pressed:var(--color-blue-900);--color-background-brand-base:var(--color-blue-700);--color-background-positive-base:var(--color-green-100);--color-background-positive-bold-base:var(--color-green-700);--color-background-positive-bold-hovered:var(--color-green-800);--color-background-positive-bold-pressed:var(--color-green-900);--color-background-caution-base:var(--color-orange-100);--color-background-caution-bold-base:var(--color-orange-700);--color-background-caution-bold-hovered:var(--color-orange-800);--color-background-caution-bold-pressed:var(--color-orange-900);--fontsize-lg:calc(var(--fontsize-base)*1.125);--fontsize-sm:calc(var(--fontsize-base)*0.875);--fontsize-xs:calc(var(--fontsize-base)*0.75);--fontsize-3xl:calc(var(--fontsize-base)*1.875);--fontsize-4xl:calc(var(--fontsize-base)*2.25);--fontsize-2xl:calc(var(--fontsize-base)*1.5);--fontsize-xl:calc(var(--fontsize-base)*1.25);--fontsize-6xl:calc(var(--fontsize-base)*3.75);--fontsize-5xl:calc(var(--fontsize-base)*3);--spacing-1:calc(var(--spacing-base)*1);--spacing-2:calc(var(--spacing-base)*2);--spacing-3:calc(var(--spacing-base)*3);--spacing-4:calc(var(--spacing-base)*4);--spacing-5:calc(var(--spacing-base)*5);--spacing-6:calc(var(--spacing-base)*6);--spacing-7:calc(var(--spacing-base)*7);--spacing-8:calc(var(--spacing-base)*8);--spacing-10:calc(var(--spacing-base)*10);--spacing-11:calc(var(--spacing-base)*11);--spacing-12:calc(var(--spacing-base)*12);--spacing-14:calc(var(--spacing-base)*14);--spacing-16:calc(var(--spacing-base)*16);--spacing-17:calc(var(--spacing-base)*17);--spacing-18:calc(var(--spacing-base)*18);--spacing-20:calc(var(--spacing-base)*20);--spacing-24:calc(var(--spacing-base)*24);--spacing-28:calc(var(--spacing-base)*28);--spacing-32:calc(var(--spacing-base)*32);--spacing-36:calc(var(--spacing-base)*36);--spacing-40:calc(var(--spacing-base)*40);--spacing-48:calc(var(--spacing-base)*48);--spacing-52:calc(var(--spacing-base)*52);--spacing-56:calc(var(--spacing-base)*56);--spacing-60:calc(var(--spacing-base)*60);--spacing-64:calc(var(--spacing-base)*64);--spacing-72:calc(var(--spacing-base)*72);--spacing-80:calc(var(--spacing-base)*80);--spacing-96:calc(var(--spacing-base)*96);--spacing-180:calc(var(--spacing-base)*180);--spacing-195:calc(var(--spacing-base)*195);--spacing-212:calc(var(--spacing-base)*212);--spacing-380:calc(var(--spacing-base)*380);--type-body-base:400 var(--fontsize-base)/1.5 var(--fontfamily-sans);--type-body-sm:400 var(--fontsize-sm)/1.5 var(--fontfamily-sans);--type-body-lg:400 var(--fontsize-lg)/1.5 var(--fontfamily-sans);--type-body-xl:400 var(--fontsize-xl)/1.5 var(--fontfamily-sans);--type-body-2xl:400 var(--fontsize-2xl)/1.5 var(--fontfamily-sans);--type-heading-xl:600 var(--fontsize-6xl)/1.2 var(--fontfamily-sans);--type-heading-lg:600 var(--fontsize-5xl)/1.2 var(--fontfamily-sans);--type-heading-base:600 var(--fontsize-4xl)/1.2 var(--fontfamily-sans);--type-heading-sm:600 var(--fontsize-3xl)/1.2 var(--fontfamily-sans);--type-heading-xs:600 var(--fontsize-2xl)/1.2 var(--fontfamily-sans);--type-label-base:400 var(--fontsize-base)/1.2 var(--fontfamily-sans);--type-label-2xl:400 var(--fontsize-2xl)/1.2 var(--fontfamily-sans);--type-label-lg:400 var(--fontsize-lg)/1.2 var(--fontfamily-sans);--type-label-sm:400 var(--fontsize-sm)/1.2 var(--fontfamily-sans);--type-label-xl:400 var(--fontsize-xl)/1.2 var(--fontfamily-sans)}/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::before,::after{box-sizing:border-box}html{font-family:system-ui,-apple-system,Segoe UI,Ubuntu,Cantarell,Noto Sans, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif,\n    \"Apple Color Emoji\", \"Segoe UI Emoji\";line-height:1.15;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace, SFMono-Regular, Consolas, \"Liberation Mono\", Menlo, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}summary{display:list-item}.scout-type-body-base{font:400 1rem/1.5 \"Source Sans 3 Variable\", sans-serif;font:var(--type-body-base)}.scout-type-body-sm{font:400 calc(1rem*0.875)/1.5 \"Source Sans 3 Variable\", sans-serif;font:var(--type-body-sm)}.scout-type-body-lg{font:400 calc(1rem*1.125)/1.5 \"Source Sans 3 Variable\", sans-serif;font:var(--type-body-lg)}.scout-type-body-xl{font:400 calc(1rem*1.25)/1.5 \"Source Sans 3 Variable\", sans-serif;font:var(--type-body-xl)}.scout-type-body-2xl{font:400 calc(1rem*1.5)/1.5 \"Source Sans 3 Variable\", sans-serif;font:var(--type-body-2xl)}.scout-type-heading-xl{font:600 calc(1rem*3.75)/1.2 \"Source Sans 3 Variable\", sans-serif;font:var(--type-heading-xl)}.scout-type-heading-lg{font:600 calc(1rem*3)/1.2 \"Source Sans 3 Variable\", sans-serif;font:var(--type-heading-lg)}.scout-type-heading-base{font:600 calc(1rem*2.25)/1.2 \"Source Sans 3 Variable\", sans-serif;font:var(--type-heading-base)}.scout-type-heading-sm{font:600 calc(1rem*1.875)/1.2 \"Source Sans 3 Variable\", sans-serif;font:var(--type-heading-sm)}.scout-type-heading-xs{font:600 calc(1rem*1.5)/1.2 \"Source Sans 3 Variable\", sans-serif;font:var(--type-heading-xs)}.scout-type-label-base{font:400 1rem/1.2 \"Source Sans 3 Variable\", sans-serif;font:var(--type-label-base)}.scout-type-label-2xl{font:400 calc(1rem*1.5)/1.2 \"Source Sans 3 Variable\", sans-serif;font:var(--type-label-2xl)}.scout-type-label-lg{font:400 calc(1rem*1.125)/1.2 \"Source Sans 3 Variable\", sans-serif;font:var(--type-label-lg)}.scout-type-label-sm{font:400 calc(1rem*0.875)/1.2 \"Source Sans 3 Variable\", sans-serif;font:var(--type-label-sm)}.scout-type-label-xl{font:400 calc(1rem*1.25)/1.2 \"Source Sans 3 Variable\", sans-serif;font:var(--type-label-xl)}:root{font-family:\"Source Sans 3 Variable\", sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal}";
@@ -3175,6 +3175,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
       `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`
     );
   }
+  const elm = hostRef.$hostElement$ ;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
   const instance = hostRef.$lazyInstance$ ;
@@ -3185,6 +3186,27 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   const didValueChange = newVal !== oldVal && !areBothNaN;
   if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
+    if (cmpMeta.$watchers$) {
+      const watchMethods = cmpMeta.$watchers$[propName];
+      if (watchMethods) {
+        watchMethods.map((watcher) => {
+          try {
+            const [[watchMethodName, watcherFlags]] = Object.entries(watcher);
+            if (flags & 128 /* isWatchReady */ || watcherFlags & 1 /* Immediate */) {
+              if (!instance) {
+                hostRef.$fetchedCbList$.push(() => {
+                  hostRef.$lazyInstance$[watchMethodName](newVal, oldVal, propName);
+                });
+              } else {
+                instance[watchMethodName](newVal, oldVal, propName);
+              }
+            }
+          } catch (e) {
+            consoleError(e, elm);
+          }
+        });
+      }
+    }
     if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
       if (instance.componentShouldUpdate) {
         if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
@@ -3201,6 +3223,17 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
   if (cmpMeta.$members$ || BUILD.propChangeCallback) {
+    {
+      if (Cstr.watchers && !cmpMeta.$watchers$) {
+        cmpMeta.$watchers$ = Cstr.watchers;
+      }
+      if (Cstr.deserializers && !cmpMeta.$deserializers$) {
+        cmpMeta.$deserializers$ = Cstr.deserializers;
+      }
+      if (Cstr.serializers && !cmpMeta.$serializers$) {
+        cmpMeta.$serializers$ = Cstr.serializers;
+      }
+    }
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
       if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
@@ -3350,6 +3383,11 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
       }
       if (!Cstr.isProxied) {
+        {
+          cmpMeta.$watchers$ = Cstr.watchers;
+          cmpMeta.$serializers$ = Cstr.serializers;
+          cmpMeta.$deserializers$ = Cstr.deserializers;
+        }
         proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
         Cstr.isProxied = true;
       }
@@ -3365,6 +3403,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       {
         hostRef.$flags$ &= -9 /* isConstructingInstance */;
       }
+      {
+        hostRef.$flags$ |= 128 /* isWatchReady */;
+      }
       endNewInstance();
       const needsDeferredCallback = cmpMeta.$flags$ & 4 /* hasSlotRelocation */;
       if (!needsDeferredCallback) {
@@ -3513,6 +3554,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
+      var _a2, _b, _c;
       const cmpMeta = {
         $flags$: compactMeta[0],
         $tagName$: compactMeta[1],
@@ -3528,6 +3570,11 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$listeners$ = compactMeta[3];
       }
+      {
+        cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
+        cmpMeta.$serializers$ = (_b = compactMeta[5]) != null ? _b : {};
+        cmpMeta.$deserializers$ = (_c = compactMeta[6]) != null ? _c : {};
+      }
       const tagName = transformTag(cmpMeta.$tagName$);
       const HostElement = class extends HTMLElement {
         ["s-p"];

package/dist/esm/{inputMixin-BuDdNX3m.js → inputMixin-DcoTF4zg.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance } from './index-xD2pOo_x.js';
+import { r as registerInstance } from './index-oi0_K_Yh.js';
 
 const inputMixin = (Base) => {
     const InputMixin = class extends Base {
@@ -7,17 +7,28 @@ const inputMixin = (Base) => {
             registerInstance(this, hostRef);
         }
         /**
-         * 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.
+         */
+        validity;
+        /**
+         * 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.
          */
-        validate;
         scoutInputChange;
         scoutBlur;
+        /**
+         * 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.
+         */
+        scoutValidate;
         /**
          * Internal event used for form field validation.
          */
-        _scoutValidate;
+        _scoutValidityChanged;
         /**
          * Internal event used for form field validation.
          */
@@ -33,10 +44,10 @@ const inputMixin = (Base) => {
             this._scoutFieldId.emit(this.ariaId);
         }
         componentDidLoad() {
-            this.runValidation();
+            this.emitValidityEvent();
         }
         onInput() {
-            this.runValidation();
+            this.emitValidityEvent();
             this.scoutInputChange.emit({
                 value: this.inputElement.value,
                 element: this.inputElement,
@@ -48,13 +59,15 @@ const inputMixin = (Base) => {
         onInvalid() {
             this._scoutInvalid.emit();
         }
+        emitValidityEvent() {
+            this.scoutValidate.emit({
+                value: this.inputElement.value,
+                element: this.inputElement,
+            });
+        }
         runValidation() {
-            if (!this.validate) {
-                return;
-            }
-            const validationMessage = this.validate(this.inputElement.value);
-            this.inputElement.setCustomValidity(validationMessage ?? "");
-            this._scoutValidate.emit({ element: this.inputElement });
+            this.inputElement.setCustomValidity(this.validity ?? "");
+            this._scoutValidityChanged.emit({ element: this.inputElement });
         }
         setInputRef(el) {
             this.inputElement = el;

package/dist/esm/loader.js

@@ -1,10 +1,10 @@
-import { g as globalScripts, b as bootstrapLazy } from './index-xD2pOo_x.js';
-export { s as setNonce } from './index-xD2pOo_x.js';
+import { g as globalScripts, b as bootstrapLazy } from './index-oi0_K_Yh.js';
+export { s as setNonce } from './index-oi0_K_Yh.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   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);
 };
 
 export { defineCustomElements };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-xD2pOo_x.js';
+import { r as registerInstance, h } from './index-oi0_K_Yh.js';
 
 const appBarCss = () => `:host{display:flex;width:100%}::slotted(scout-button){height:100% !important}.container{display:flex;flex:1;height:var(--spacing-14);background-color:var(--color-white);border-bottom:1px solid var(--color-neutral-100);color:var(--color-text-brand-base);padding:var(--spacing-1)}.title{flex:1;display:flex;align-items:center;font:var(--type-body-lg);font-weight:500;padding:0 var(--spacing-2)}`;
 

package/dist/esm/scout-bottom-bar-item.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';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-xD2pOo_x.js';
+import { r as registerInstance, h } from './index-oi0_K_Yh.js';
 
 const bottomBarCss = () => `:host{display:flex;width:100%}.container{display:flex;flex:1;height:var(--spacing-14);border-top:1px solid var(--color-neutral-100)}`;
 

package/dist/esm/scout-button.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 buttonCss = () => `scout-button{display:inline-block;height:var(--spacing-10);font:var(--type-body-base)}scout-button[data-size="large"]{height:var(--spacing-12);font:var(--type-body-lg)}scout-button .button{flex:1;display:inline-flex;width:100%;height:100%;align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;box-sizing:border-box}scout-button[data-size="large"] .button{padding:0 var(--spacing-5)}scout-button .icon{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}scout-button .icon svg{width:100%;height:100%}scout-button[data-icon-only] .button{aspect-ratio:1 / 1;justify-content:center;padding:0}scout-button[data-icon-only] .icon{margin:0}scout-button[data-icon-only] .content{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}scout-button .button.primary{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}@media (hover: hover){scout-button .button.primary:hover{background-color:var(--color-background-brand-hovered)}}scout-button .button.primary:active{background-color:var(--color-background-brand-pressed)}scout-button .button.outlined{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}@media (hover: hover){scout-button .button.outlined:hover{background-color:var(--color-background-brand-subtle-hovered)}}scout-button .button.outlined:active{background-color:var(--color-background-brand-subtle-pressed)}scout-button .button.text{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}@media (hover: hover){scout-button .button.text:hover{background-color:var(--color-background-brand-subtle-hovered)}}scout-button .button.text:active{background-color:var(--color-background-brand-subtle-pressed)}scout-button .button.caution{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}@media (hover: hover){scout-button .button.caution:hover{background-color:var(--color-background-caution-bold-hovered)}}scout-button .button.caution:active{background-color:var(--color-background-caution-bold-pressed)}scout-button .button.danger{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}@media (hover: hover){scout-button .button.danger:hover{background-color:var(--color-background-danger-bold-hovered)}}scout-button .button.danger:active{background-color:var(--color-background-danger-bold-pressed)}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-xD2pOo_x.js';
+import { r as registerInstance, h } from './index-oi0_K_Yh.js';
 
 const cardCss = () => `:host{display:contents}.card{display:block;border-radius:var(--spacing-2);border:1px solid var(--color-gray-100);padding:var(--spacing-2);box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1),     0 1px 2px -1px rgba(0, 0, 0, 0.1)}`;