@scouterna/ui-webc 2.2.7 → 3.1.0

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,25 @@ 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;
+    }
+    /**
+     * 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.
+     */
+    interface ScoutTabs {
+        /**
+          * Zero-based index of the currently active tab.
+          * @default 0
+         */
+        "value": number;
+    }
+    interface ScoutTabsTab {
     }
 }
 export interface ScoutBottomBarItemCustomEvent<T> extends CustomEvent<T> {
@@ -373,6 +389,10 @@ export interface ScoutSwitchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLScoutSwitchElement;
 }
+export interface ScoutTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLScoutTabsElement;
+}
 declare global {
     /**
      * The App Bar component is used at the top of a page to display a title and
@@ -453,7 +473,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 +528,11 @@ declare global {
       element: HTMLElement;
     };
         "scoutBlur": void;
-        "_scoutValidate": { element: HTMLElement };
+        "scoutValidate": {
+      value: string;
+      element: HTMLElement;
+    };
+        "_scoutValidityChanged": { element: HTMLElement };
         "_scoutInvalid": void;
         "_scoutFieldId": string;
     }
@@ -586,7 +614,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 +651,11 @@ declare global {
       element: HTMLElement;
     };
         "scoutBlur": void;
-        "_scoutValidate": { element: HTMLElement };
+        "scoutValidate": {
+      value: string;
+      element: HTMLElement;
+    };
+        "_scoutValidityChanged": { element: HTMLElement };
         "_scoutInvalid": void;
         "_scoutFieldId": string;
     }
@@ -654,7 +690,11 @@ declare global {
       element: HTMLElement;
     };
         "scoutBlur": void;
-        "_scoutValidate": { element: HTMLElement };
+        "scoutValidate": {
+      value: string;
+      element: HTMLElement;
+    };
+        "_scoutValidityChanged": { element: HTMLElement };
         "_scoutInvalid": void;
         "_scoutFieldId": string;
         "scoutChecked": {
@@ -681,6 +721,36 @@ declare global {
         prototype: HTMLScoutSwitchElement;
         new (): HTMLScoutSwitchElement;
     };
+    interface HTMLScoutTabsElementEventMap {
+        "scoutChange": { value: number };
+    }
+    /**
+     * 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.
+     */
+    interface HTMLScoutTabsElement extends Components.ScoutTabs, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLScoutTabsElementEventMap>(type: K, listener: (this: HTMLScoutTabsElement, ev: ScoutTabsCustomEvent<HTMLScoutTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLScoutTabsElementEventMap>(type: K, listener: (this: HTMLScoutTabsElement, ev: ScoutTabsCustomEvent<HTMLScoutTabsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLScoutTabsElement: {
+        prototype: HTMLScoutTabsElement;
+        new (): HTMLScoutTabsElement;
+    };
+    interface HTMLScoutTabsTabElement extends Components.ScoutTabsTab, HTMLStencilElement {
+    }
+    var HTMLScoutTabsTabElement: {
+        prototype: HTMLScoutTabsTabElement;
+        new (): HTMLScoutTabsTabElement;
+    };
     interface HTMLElementTagNameMap {
         "scout-app-bar": HTMLScoutAppBarElement;
         "scout-bottom-bar": HTMLScoutBottomBarElement;
@@ -700,6 +770,8 @@ declare global {
         "scout-select": HTMLScoutSelectElement;
         "scout-stack": HTMLScoutStackElement;
         "scout-switch": HTMLScoutSwitchElement;
+        "scout-tabs": HTMLScoutTabsElement;
+        "scout-tabs-tab": HTMLScoutTabsTabElement;
     }
 }
 declare namespace LocalJSX {
@@ -815,9 +887,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 +912,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 +954,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 +979,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 +999,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 +1100,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 +1125,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 +1145,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 +1170,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 +1213,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 +1238,36 @@ 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;
+    }
+    /**
+     * 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.
+     */
+    interface ScoutTabs {
+        /**
+          * 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.
+         */
+        "onScoutChange"?: (event: ScoutTabsCustomEvent<{ value: number }>) => void;
+        /**
+          * Zero-based index of the currently active tab.
+          * @default 0
+         */
+        "value"?: number;
+    }
+    interface ScoutTabsTab {
     }
     interface IntrinsicElements {
         "scout-app-bar": ScoutAppBar;
@@ -1146,6 +1288,8 @@ declare namespace LocalJSX {
         "scout-select": ScoutSelect;
         "scout-stack": ScoutStack;
         "scout-switch": ScoutSwitch;
+        "scout-tabs": ScoutTabs;
+        "scout-tabs-tab": ScoutTabsTab;
     }
 }
 export { LocalJSX as JSX };
@@ -1223,6 +1367,15 @@ declare module "@stencil/core" {
              * component to display a label, help text, and error messages.
              */
             "scout-switch": LocalJSX.ScoutSwitch & JSXBase.HTMLAttributes<HTMLScoutSwitchElement>;
+            /**
+             * 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.
+             */
+            "scout-tabs": LocalJSX.ScoutTabs & JSXBase.HTMLAttributes<HTMLScoutTabsElement>;
+            "scout-tabs-tab": LocalJSX.ScoutTabsTab & JSXBase.HTMLAttributes<HTMLScoutTabsTabElement>;
         }
     }
 }

package/dist/ui-webc/p-0e444b1f.entry.js

@@ -0,0 +1 @@
+import{r as t,h as r}from"./p-CBq_WkdR.js";const a=class{constructor(r){t(this,r)}render(){return r("button",{key:"59f92f5a3d9b5a022a78d9adc7756bda10b68be3",class:"button-native",type:"button"},r("div",{key:"96fc99711da308360451041dd44e21391c08d6eb",class:"inner-container"},r("slot",{key:"83234bf67c2605179c7d80febbc6d0fbff730670"})))}static get delegatesFocus(){return!0}};a.style=":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)}";export{a as scout_tabs_tab}

package/dist/ui-webc/p-189879c2.entry.js

@@ -0,0 +1 @@
+import{M as e,r as a,c as s,h as t}from"./p-CBq_WkdR.js";import{i}from"./p-6xDaXBJm.js";const c=class extends(e(i)){constructor(e){super(),a(this,e),this.scoutInputChange=s(this,"scoutInputChange"),this.scoutBlur=s(this,"scoutBlur"),this.scoutValidate=s(this,"scoutValidate"),this._scoutValidityChanged=s(this,"_scoutValidityChanged"),this._scoutInvalid=s(this,"_scoutInvalid"),this._scoutFieldId=s(this,"_scoutFieldId")}value="";disabled=!1;name;render(){return t("div",{key:"12bf95188935ab6b11101c829970800199b53e9a",class:"select-wrapper"},t("select",{key:"23b78d816a0f95c659ce2d97fadd7e7ca413c521",ref:e=>this.setInputRef(e),id:this.ariaId,name:this.name,class:"select",disabled:this.disabled,onChange:()=>this.onInput(),onBlur:()=>this.onBlur(),onInvalid:()=>this.onInvalid()},t("slot",{key:"652f8938b7bc8c32e2a2976e024e36a07afc8f5a"})),t("span",{key:"f2e2dd4d5266145c6a854a3e5610c887d7e1e259",class:"select-icon",style:{"--icon-chevron":"url(data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hldnJvbi1kb3duIgo+CiAgPHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0iTTYgOWw2IDZsNiAtNiIgLz4KPC9zdmc+)"},"aria-hidden":"true"}))}static get watchers(){return{validity:[{runValidation:0}]}}};c.style=".select-wrapper.sc-scout-select{position:relative;display:inline-flex;width:100%}.select.sc-scout-select{width:100%;height:var(--spacing-10);padding:var(--spacing-2);padding-right:var(--spacing-8);font:var(--type-body-base);border:1px solid var(--color-gray-300);border-radius:var(--spacing-2);background-color:var(--color-white);color:var(--color-text-base);-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer}@media (hover: hover){.select.sc-scout-select:hover:not(:disabled){border-color:var(--color-gray-400)}}.select.sc-scout-select:focus{outline:2px solid var(--color-background-brand-base);outline-offset:1px}.select.sc-scout-select:disabled{background-color:var(--color-gray-100);color:var(--color-gray-700);cursor:not-allowed}.select-icon.sc-scout-select{position:absolute;right:var(--spacing-2);top:50%;transform:translateY(-50%);width:var(--spacing-5);height:var(--spacing-5);background-color:var(--color-text-base);-webkit-mask-image:var(--icon-chevron);mask-image:var(--icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.select.sc-scout-select:disabled+.select-icon.sc-scout-select{background-color:var(--color-gray-500)}";export{c as scout_select}

package/dist/ui-webc/p-60cd6c7e.entry.js

@@ -0,0 +1 @@
+import{M as a,r,c as e,h as t}from"./p-CBq_WkdR.js";import{i}from"./p-6xDaXBJm.js";const o=class extends(a(i)){constructor(a){super(),r(this,a),this.scoutInputChange=e(this,"scoutInputChange"),this.scoutBlur=e(this,"scoutBlur"),this.scoutValidate=e(this,"scoutValidate"),this._scoutValidityChanged=e(this,"_scoutValidityChanged"),this._scoutInvalid=e(this,"_scoutInvalid"),this._scoutFieldId=e(this,"_scoutFieldId"),this.scoutChecked=e(this,"scoutChecked")}toggled=!1;disabled=!1;ariaLabelledby;label;scoutChecked;onChange(a){const r=a.target;this.scoutChecked.emit({checked:r.checked,element:r})}render(){return t(this.label?.length?"label":"div",{key:"b577bb6c1a4bde37ea76ae1c14bbdad4e3c11200"},this.label,t("span",{key:"b93dc86e4fa270efb3e8983c957731015d9709b4",class:"inlineDivider"}),t("input",{key:"ca377aea983a9702fe9f292908048746c31433b9",ref:a=>this.setInputRef(a),id:this.ariaId,type:"checkbox",class:"switch","aria-labelledby":this.ariaLabelledby,"aria-disabled":this.disabled,disabled:this.disabled,checked:this.toggled,onChange:a=>{this.onInput(),this.onChange(a)},onBlur:()=>this.onBlur(),onInvalid:()=>this.onInvalid()}))}static get delegatesFocus(){return!0}static get watchers(){return{validity:[{runValidation:0}]}}};o.style='.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)}';export{o as scout_switch}

package/dist/ui-webc/{p-8da4cdaa.entry.js → p-6287efe7.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-CBq_WkdR.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}