@scouterna/ui-webc 2.2.7 → 3.1.0

package/dist/cjs/scout-tabs.cjs.entry.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var index = require('./index-BPpKjjvS.js');
+
+const tabsCss = () => `:host{position:relative;width:100%;display:flex;height:var(--spacing-12);--tabs-indicator-height:2px}.indicator{position:absolute;bottom:0;left:0;width:0;height:var(--tabs-indicator-height);background-color:var(--color-background-brand-base);transition:all 0.3s ease}`;
+
+const ScoutTabs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.scoutChange = index.createEvent(this, "scoutChange");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Zero-based index of the currently active tab.
+     */
+    value = 0;
+    /**
+     * Emitted when the active tab changes as a result of a user click.
+     * The `value` in the event detail is the zero-based index of the newly selected tab.
+     */
+    scoutChange;
+    widths = [];
+    lefts = [];
+    render() {
+        return (index.h(index.Host, { key: 'dffbae0bba3543f50cbe7046bad52c7bdff7ba55' }, index.h("slot", { key: 'cad95b2ae6c8b2bc659bfa6510c0b193d2e08dd9' }), this.getIndicator()));
+    }
+    componentDidLoad() {
+        this.updateChildrenClasses();
+        this.calculateIndicatorSizes();
+    }
+    getIndicator() {
+        const width = this.widths[this.value] || 0;
+        const left = this.lefts[this.value] || 0;
+        const indicatorStyle = {
+            width: `${width}px`,
+            transform: `translateX(${left}px)`,
+        };
+        return index.h("div", { "aria-hidden": "true", class: "indicator", style: indicatorStyle });
+    }
+    handleClick(event) {
+        const target = event.target;
+        const tabs = Array.from(this.el.children);
+        const clickedIndex = tabs.indexOf(target);
+        if (clickedIndex !== -1 && clickedIndex !== this.value) {
+            this.scoutChange.emit({ value: clickedIndex });
+        }
+    }
+    updateChildrenClasses() {
+        Array.from(this.el.children).forEach((child, index) => {
+            const tab = child;
+            if (index === this.value) {
+                tab.setAttribute("data-active", "true");
+            }
+            else {
+                tab.removeAttribute("data-active");
+            }
+        });
+    }
+    calculateIndicatorSizes() {
+        this.widths = Array.from(this.el.children).map((child) => child.offsetWidth);
+        this.lefts = this.widths.map((_, index) => this.widths.slice(0, index).reduce((acc, w) => acc + w, 0));
+    }
+    static get delegatesFocus() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "updateChildrenClasses": 0
+            }, {
+                "calculateIndicatorSizes": 0
+            }]
+    }; }
+};
+ScoutTabs.style = tabsCss();
+
+exports.scout_tabs = ScoutTabs;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DpSUh0CA.js');
+var index = require('./index-BPpKjjvS.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["scout-list-view-item.cjs",[[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.cjs",[[785,"scout-app-bar",{"titleText":[1,"title-text"]}]]],["scout-bottom-bar.cjs",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[529,"scout-bottom-bar-item",{"type":[1],"href":[1],"target":[1],"rel":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[772,"scout-button",{"type":[1],"href":[1],"target":[1],"rel":[1],"size":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"]}]]],["scout-card.cjs",[[273,"scout-card"]]],["scout-divider.cjs",[[17,"scout-divider"]]],["scout-field.cjs",[[774,"scout-field",{"label":[1],"helpText":[1,"help-text"],"inputId":[32],"errorText":[32],"errorHidden":[32]},[[0,"_scoutFieldId","catchFieldId"],[0,"_scoutValidate","handleValidation"],[0,"scoutBlur","showError"],[0,"_scoutInvalid","showError"]]]]],["scout-input.cjs",[[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.cjs",[[529,"scout-link",{"href":[1],"label":[1],"rel":[1],"linkAriaLabel":[1,"link-aria-label"],"type":[1],"target":[1]}]]],["scout-list-view.cjs",[[273,"scout-list-view",null,[[0,"scoutChecked","onScoutChecked"]]]]],["scout-list-view-subheader.cjs",[[529,"scout-list-view-subheader",{"text":[1],"headingLevel":[1,"heading-level"]}]]],["scout-loader.cjs",[[513,"scout-loader",{"text":[1],"size":[1]}]]],["scout-select.cjs",[[774,"scout-select",{"validate":[16],"value":[1],"disabled":[4],"name":[1],"ariaId":[32]}]]],["scout-stack.cjs",[[785,"scout-stack",{"direction":[1],"gapSize":[1,"gap-size"]}]]],["scout-switch.cjs",[[529,"scout-switch",{"validate":[16],"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]],["scout-checkbox_2.cjs",[[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 index.bootstrapLazy([["scout-list-view-item.cjs",[[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.cjs",[[785,"scout-app-bar",{"titleText":[1,"title-text"]}]]],["scout-bottom-bar.cjs",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[529,"scout-bottom-bar-item",{"type":[1],"href":[1],"target":[1],"rel":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[772,"scout-button",{"type":[1],"href":[1],"target":[1],"rel":[1],"size":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"]}]]],["scout-card.cjs",[[273,"scout-card"]]],["scout-divider.cjs",[[17,"scout-divider"]]],["scout-field.cjs",[[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.cjs",[[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.cjs",[[529,"scout-link",{"href":[1],"label":[1],"rel":[1],"linkAriaLabel":[1,"link-aria-label"],"type":[1],"target":[1]}]]],["scout-list-view.cjs",[[273,"scout-list-view",null,[[0,"scoutChecked","onScoutChecked"]]]]],["scout-list-view-subheader.cjs",[[529,"scout-list-view-subheader",{"text":[1],"headingLevel":[1,"heading-level"]}]]],["scout-loader.cjs",[[513,"scout-loader",{"text":[1],"size":[1]}]]],["scout-select.cjs",[[774,"scout-select",{"validity":[1],"value":[1],"disabled":[4],"name":[1],"ariaId":[32]},null,{"validity":[{"runValidation":0}]}]]],["scout-stack.cjs",[[785,"scout-stack",{"direction":[1],"gapSize":[1,"gap-size"]}]]],["scout-switch.cjs",[[529,"scout-switch",{"validity":[1],"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]},null,{"validity":[{"runValidation":0}]}]]],["scout-tabs.cjs",[[785,"scout-tabs",{"value":[2],"widths":[32],"lefts":[32]},[[2,"click","handleClick"]],{"value":[{"updateChildrenClasses":0},{"calculateIndicatorSizes":0}]}]]],["scout-tabs-tab.cjs",[[273,"scout-tabs-tab"]]],["scout-checkbox_2.cjs",[[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);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -17,7 +17,9 @@
     "components/radio-button/radio-button.js",
     "components/select/select.js",
     "components/stack/stack.js",
-    "components/switch/switch.js"
+    "components/switch/switch.js",
+    "components/tabs/tabs.js",
+    "components/tabs-tab/tabs-tab.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -35,7 +35,7 @@ export class ScoutField {
         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)));
     }
     static get is() { return "scout-field"; }
     static get encapsulation() { return "scoped"; }
@@ -107,7 +107,7 @@ export class ScoutField {
                 "capture": false,
                 "passive": false
             }, {
-                "name": "_scoutValidate",
+                "name": "_scoutValidityChanged",
                 "method": "handleValidation",
                 "target": undefined,
                 "capture": false,

package/dist/collection/components/select/select.js

@@ -21,7 +21,7 @@ export class ScoutSelect 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(${chevronIcon})` }, "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(${chevronIcon})` }, "aria-hidden": "true" })));
     }
     static get is() { return "scout-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/tabs/tabs.css

@@ -0,0 +1,17 @@
+:host {
+  position: relative;
+  width: 100%;
+  display: flex;
+  height: var(--spacing-12);
+  --tabs-indicator-height: 2px;
+}
+
+.indicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: var(--tabs-indicator-height);
+  background-color: var(--color-background-brand-base);
+  transition: all 0.3s ease;
+}

package/dist/collection/components/tabs/tabs.js

@@ -0,0 +1,142 @@
+import { Host, h, } from "@stencil/core";
+/**
+ * The tabs component is used to create a tabbed interface. It manages the state
+ * of which tab is active and displays an indicator under the active tab. Use
+ * `ScoutTabsTab` components to define the individual tabs.
+ *
+ * Currently there is no support for navigational tabs. Navigation has to be
+ * handled programmatically for now.
+ */
+export class ScoutTabs {
+    el;
+    /**
+     * Zero-based index of the currently active tab.
+     */
+    value = 0;
+    /**
+     * Emitted when the active tab changes as a result of a user click.
+     * The `value` in the event detail is the zero-based index of the newly selected tab.
+     */
+    scoutChange;
+    widths = [];
+    lefts = [];
+    render() {
+        return (h(Host, { key: 'dffbae0bba3543f50cbe7046bad52c7bdff7ba55' }, h("slot", { key: 'cad95b2ae6c8b2bc659bfa6510c0b193d2e08dd9' }), this.getIndicator()));
+    }
+    componentDidLoad() {
+        this.updateChildrenClasses();
+        this.calculateIndicatorSizes();
+    }
+    getIndicator() {
+        const width = this.widths[this.value] || 0;
+        const left = this.lefts[this.value] || 0;
+        const indicatorStyle = {
+            width: `${width}px`,
+            transform: `translateX(${left}px)`,
+        };
+        return h("div", { "aria-hidden": "true", class: "indicator", style: indicatorStyle });
+    }
+    handleClick(event) {
+        const target = event.target;
+        const tabs = Array.from(this.el.children);
+        const clickedIndex = tabs.indexOf(target);
+        if (clickedIndex !== -1 && clickedIndex !== this.value) {
+            this.scoutChange.emit({ value: clickedIndex });
+        }
+    }
+    updateChildrenClasses() {
+        Array.from(this.el.children).forEach((child, index) => {
+            const tab = child;
+            if (index === this.value) {
+                tab.setAttribute("data-active", "true");
+            }
+            else {
+                tab.removeAttribute("data-active");
+            }
+        });
+    }
+    calculateIndicatorSizes() {
+        this.widths = Array.from(this.el.children).map((child) => child.offsetWidth);
+        this.lefts = this.widths.map((_, index) => this.widths.slice(0, index).reduce((acc, w) => acc + w, 0));
+    }
+    static get is() { return "scout-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Zero-based index of the currently active tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "widths": {},
+            "lefts": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "scoutChange",
+                "name": "scoutChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the active tab changes as a result of a user click.\nThe `value` in the event detail is the zero-based index of the newly selected tab."
+                },
+                "complexType": {
+                    "original": "{ value: number }",
+                    "resolved": "{ value: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "updateChildrenClasses"
+            }, {
+                "propName": "value",
+                "methodName": "calculateIndicatorSizes"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/tabs-tab/tabs-tab.css

@@ -0,0 +1,44 @@
+:host {
+  flex: 1;
+  display: block;
+  width: auto;
+}
+
+.button-native {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  color: var(--color-gray-600);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  padding: var(--spacing-1) var(--spacing-1)
+    calc(var(--spacing-1) + var(--tabs-indicator-height)) var(--spacing-1);
+  font-weight: 500;
+  text-transform: uppercase;
+  font-size: 0.875rem;
+  letter-spacing: 0.04em;
+}
+
+.inner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--spacing-2);
+  background-color: transparent;
+}
+
+.button-native:hover {
+  color: var(--color-text-base);
+}
+
+.button-native:hover .inner-container {
+    background-color: var(--color-background-brand-subtle-hovered);
+  }
+
+:host([data-active]) .button-native {
+  color: var(--color-text-base);
+}

package/dist/collection/components/tabs-tab/tabs-tab.js

@@ -0,0 +1,19 @@
+import { h } from "@stencil/core";
+export class ScoutTabsTab {
+    render() {
+        return (h("button", { key: '59f92f5a3d9b5a022a78d9adc7756bda10b68be3', class: "button-native", type: "button" }, h("div", { key: '96fc99711da308360451041dd44e21391c08d6eb', class: "inner-container" }, h("slot", { key: '83234bf67c2605179c7d80febbc6d0fbff730670' }))));
+    }
+    static get is() { return "scout-tabs-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tabs-tab.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tabs-tab.css"]
+        };
+    }
+}

package/dist/collection/mixins/inputMixin.js

@@ -4,17 +4,28 @@ export const inputMixin = (Base) => {
             super();
         }
         /**
-         * 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.
          */
@@ -30,10 +41,10 @@ export 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,
@@ -45,35 +56,39 @@ export 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;
         }
         static get properties() {
             return {
-                "validate": {
-                    "type": "unknown",
+                "validity": {
+                    "type": "string",
                     "mutable": false,
                     "complexType": {
-                        "original": "(value: string) => string | null",
-                        "resolved": "(value: string) => string",
+                        "original": "string",
+                        "resolved": "string",
                         "references": {}
                     },
                     "required": false,
                     "optional": true,
                     "docs": {
                         "tags": [],
-                        "text": "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."
+                        "text": "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."
                     },
                     "getter": false,
-                    "setter": false
+                    "setter": false,
+                    "reflect": false,
+                    "attribute": "validity"
                 }
             };
         }
@@ -91,7 +106,7 @@ export const inputMixin = (Base) => {
                     "composed": true,
                     "docs": {
                         "tags": [],
-                        "text": ""
+                        "text": "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."
                     },
                     "complexType": {
                         "original": "{\n      value: string;\n      element: HTMLElement;\n    }",
@@ -119,8 +134,28 @@ export const inputMixin = (Base) => {
                         "references": {}
                     }
                 }, {
-                    "method": "_scoutValidate",
-                    "name": "_scoutValidate",
+                    "method": "scoutValidate",
+                    "name": "scoutValidate",
+                    "bubbles": true,
+                    "cancelable": true,
+                    "composed": true,
+                    "docs": {
+                        "tags": [],
+                        "text": "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."
+                    },
+                    "complexType": {
+                        "original": "{\n      value: string;\n      element: HTMLElement;\n    }",
+                        "resolved": "{ value: string; element: HTMLElement; }",
+                        "references": {
+                            "HTMLElement": {
+                                "location": "global",
+                                "id": "global::HTMLElement"
+                            }
+                        }
+                    }
+                }, {
+                    "method": "_scoutValidityChanged",
+                    "name": "_scoutValidityChanged",
                     "bubbles": true,
                     "cancelable": true,
                     "composed": true,
@@ -170,6 +205,12 @@ export const inputMixin = (Base) => {
                     }
                 }];
         }
+        static get watchers() {
+            return [{
+                    "propName": "validity",
+                    "methodName": "runValidation"
+                }];
+        }
     }
     return InputMixin;
 };

package/dist/components/index.js

@@ -1 +1 @@
-export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-CmHrcz9s.js";function t(s,t,e){return(s||"")+(t?" "+t:"")+(e?" "+e:"")}export{t as format}
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-CXXyN7aY.js";function t(s,t,e){return(s||"")+(t?" "+t:"")+(e?" "+e:"")}export{t as format}

package/dist/components/p-B72iGJNe.js

@@ -0,0 +1 @@
+import{p as o,M as a,c as t,h as e,t as r}from"./p-CXXyN7aY.js";import{i as s}from"./p-DxVqa2PR.js";const i=o(class extends(a(s)){constructor(o){super(!1),!1!==o&&this.__registerHost(),this.scoutInputChange=t(this,"scoutInputChange"),this.scoutBlur=t(this,"scoutBlur"),this.scoutValidate=t(this,"scoutValidate"),this._scoutValidityChanged=t(this,"_scoutValidityChanged"),this._scoutInvalid=t(this,"_scoutInvalid"),this._scoutFieldId=t(this,"_scoutFieldId"),this.scoutChecked=t(this,"scoutChecked")}checked=!1;disabled=!1;ariaLabelledby;label;value;name;scoutChecked;onChange(o){const a=o.target;this.scoutChecked.emit({checked:a.checked,element:a})}render(){return e(this.label?.length?"label":"div",{key:"22df090dcbf2f2b4b14b7cad8d34500295045f70"},e("input",{key:"3bcc5022fa6202fd1fe733c1a8430f7ed1a54cf4",ref:o=>this.setInputRef(o),id:this.ariaId,type:"radio",value:this.value,name:this.name,class:"radio","aria-labelledby":this.ariaLabelledby,"aria-disabled":this.disabled,disabled:this.disabled,checked:this.checked,onChange:o=>{this.onInput(),this.onChange(o)},onBlur:()=>this.onBlur(),onInvalid:()=>this.onInvalid()}),this.label)}static get watchers(){return{validity:[{runValidation:0}]}}static get style(){return'.radio.sc-scout-radio-button{width:var(--spacing-6);height:var(--spacing-6);-moz-appearance:none;appearance:none;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;border-radius:100%;background-color:var(--color-white);border:2px solid var(--color-gray-300);position:relative}@media (hover: hover){.radio.sc-scout-radio-button:hover{border:2px solid var(--color-gray-400);box-shadow:inset 0px 0px 5px 5px       var(--color-background-brand-subtle-hovered);cursor:pointer}}.radio.sc-scout-radio-button:active{background-color:var(--color-background-brand-subtle-pressed)}@media (hover: hover){.radio.sc-scout-radio-button:checked:hover{border-color:var(--color-background-brand-hovered);box-shadow:none}.radio.sc-scout-radio-button:checked:hover::before{background-color:var(--color-background-brand-hovered)}}.radio.sc-scout-radio-button:checked{border-color:var(--color-background-brand-base)}.radio.sc-scout-radio-button::after{content:"";position:absolute;width:var(--spacing-10);height:var(--spacing-10);top:50%;left:50%;transform:translate(-50%, -50%)}.radio.sc-scout-radio-button:checked::before{content:"";background-color:var(--color-background-brand-base);width:var(--spacing-4);height:var(--spacing-4);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:100%}.radio.sc-scout-radio-button:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}label.sc-scout-radio-button{display:flex;align-items:center;gap:var(--spacing-2);font:var(--type-label-base);color:var(--color-text-base)}'}},[514,"scout-radio-button",{validity:[1],checked:[4],disabled:[4],ariaLabelledby:[1,"aria-labelledby"],label:[1],value:[1],name:[1],ariaId:[32]},void 0,{validity:[{runValidation:0}]}]);function c(){"undefined"!=typeof customElements&&["scout-radio-button"].forEach((o=>{"scout-radio-button"===o&&(customElements.get(r(o))||customElements.define(r(o),i))}))}export{i as S,c as d}