@scouterna/ui-webc 1.0.0 → 2.0.0

package/dist/types/components.d.ts

@@ -68,6 +68,21 @@ export namespace Components {
      */
     interface ScoutCard {
     }
+    interface ScoutCheckbox {
+        /**
+          * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.
+         */
+        "ariaLabelledby": string;
+        /**
+          * @default false
+         */
+        "checked": boolean;
+        /**
+          * @default false
+         */
+        "disabled": boolean;
+        "label": string;
+    }
     interface ScoutField {
         /**
           * Help text shown below the field.
@@ -107,6 +122,22 @@ export namespace Components {
          */
         "value": string;
     }
+    interface ScoutSwitch {
+        /**
+          * Use this prop if you need to connect your switch with another element describing its use, other than the property label.
+         */
+        "ariaLabelledby": string;
+        /**
+          * @default false
+         */
+        "disabled": boolean;
+        "label": string;
+        /**
+          * Indicates whether the switch is toggled on or off.
+          * @default false
+         */
+        "toggled": boolean;
+    }
 }
 export interface ScoutBottomBarItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -116,10 +147,18 @@ export interface ScoutButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLScoutButtonElement;
 }
+export interface ScoutCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLScoutCheckboxElement;
+}
 export interface ScoutInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLScoutInputElement;
 }
+export interface ScoutSwitchCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLScoutSwitchElement;
+}
 declare global {
     /**
      * The bottom bar component is used in the Jamboree26 app to provide
@@ -181,6 +220,27 @@ declare global {
         prototype: HTMLScoutCardElement;
         new (): HTMLScoutCardElement;
     };
+    interface HTMLScoutCheckboxElementEventMap {
+        "scoutCheckboxChecked": {
+    checked: boolean;
+    element: HTMLInputElement;
+  };
+        "_fieldId": string;
+    }
+    interface HTMLScoutCheckboxElement extends Components.ScoutCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLScoutCheckboxElementEventMap>(type: K, listener: (this: HTMLScoutCheckboxElement, ev: ScoutCheckboxCustomEvent<HTMLScoutCheckboxElementEventMap[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 HTMLScoutCheckboxElementEventMap>(type: K, listener: (this: HTMLScoutCheckboxElement, ev: ScoutCheckboxCustomEvent<HTMLScoutCheckboxElementEventMap[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 HTMLScoutCheckboxElement: {
+        prototype: HTMLScoutCheckboxElement;
+        new (): HTMLScoutCheckboxElement;
+    };
     interface HTMLScoutFieldElement extends Components.ScoutField, HTMLStencilElement {
     }
     var HTMLScoutFieldElement: {
@@ -209,13 +269,36 @@ declare global {
         prototype: HTMLScoutInputElement;
         new (): HTMLScoutInputElement;
     };
+    interface HTMLScoutSwitchElementEventMap {
+        "scoutSwitchToggled": {
+    toggled: boolean;
+    element: HTMLInputElement;
+  };
+        "_fieldId": string;
+    }
+    interface HTMLScoutSwitchElement extends Components.ScoutSwitch, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLScoutSwitchElementEventMap>(type: K, listener: (this: HTMLScoutSwitchElement, ev: ScoutSwitchCustomEvent<HTMLScoutSwitchElementEventMap[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 HTMLScoutSwitchElementEventMap>(type: K, listener: (this: HTMLScoutSwitchElement, ev: ScoutSwitchCustomEvent<HTMLScoutSwitchElementEventMap[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 HTMLScoutSwitchElement: {
+        prototype: HTMLScoutSwitchElement;
+        new (): HTMLScoutSwitchElement;
+    };
     interface HTMLElementTagNameMap {
         "scout-bottom-bar": HTMLScoutBottomBarElement;
         "scout-bottom-bar-item": HTMLScoutBottomBarItemElement;
         "scout-button": HTMLScoutButtonElement;
         "scout-card": HTMLScoutCardElement;
+        "scout-checkbox": HTMLScoutCheckboxElement;
         "scout-field": HTMLScoutFieldElement;
         "scout-input": HTMLScoutInputElement;
+        "scout-switch": HTMLScoutSwitchElement;
     }
 }
 declare namespace LocalJSX {
@@ -277,6 +360,29 @@ declare namespace LocalJSX {
      */
     interface ScoutCard {
     }
+    interface ScoutCheckbox {
+        /**
+          * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.
+         */
+        "ariaLabelledby"?: string;
+        /**
+          * @default false
+         */
+        "checked"?: boolean;
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        "label"?: string;
+        "onScoutCheckboxChecked"?: (event: ScoutCheckboxCustomEvent<{
+    checked: boolean;
+    element: HTMLInputElement;
+  }>) => void;
+        /**
+          * Internal event used for form field association.
+         */
+        "on_fieldId"?: (event: ScoutCheckboxCustomEvent<string>) => void;
+    }
     interface ScoutField {
         /**
           * Help text shown below the field.
@@ -325,13 +431,39 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface ScoutSwitch {
+        /**
+          * Use this prop if you need to connect your switch with another element describing its use, other than the property label.
+         */
+        "ariaLabelledby"?: string;
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        "label"?: string;
+        "onScoutSwitchToggled"?: (event: ScoutSwitchCustomEvent<{
+    toggled: boolean;
+    element: HTMLInputElement;
+  }>) => void;
+        /**
+          * Internal event used for form field association.
+         */
+        "on_fieldId"?: (event: ScoutSwitchCustomEvent<string>) => void;
+        /**
+          * Indicates whether the switch is toggled on or off.
+          * @default false
+         */
+        "toggled"?: boolean;
+    }
     interface IntrinsicElements {
         "scout-bottom-bar": ScoutBottomBar;
         "scout-bottom-bar-item": ScoutBottomBarItem;
         "scout-button": ScoutButton;
         "scout-card": ScoutCard;
+        "scout-checkbox": ScoutCheckbox;
         "scout-field": ScoutField;
         "scout-input": ScoutInput;
+        "scout-switch": ScoutSwitch;
     }
 }
 export { LocalJSX as JSX };
@@ -356,8 +488,10 @@ declare module "@stencil/core" {
              * A general surface to hold various types of content.
              */
             "scout-card": LocalJSX.ScoutCard & JSXBase.HTMLAttributes<HTMLScoutCardElement>;
+            "scout-checkbox": LocalJSX.ScoutCheckbox & JSXBase.HTMLAttributes<HTMLScoutCheckboxElement>;
             "scout-field": LocalJSX.ScoutField & JSXBase.HTMLAttributes<HTMLScoutFieldElement>;
             "scout-input": LocalJSX.ScoutInput & JSXBase.HTMLAttributes<HTMLScoutInputElement>;
+            "scout-switch": LocalJSX.ScoutSwitch & JSXBase.HTMLAttributes<HTMLScoutSwitchElement>;
         }
     }
 }

package/dist/ui-webc/p-24632b65.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c,h as o}from"./p-DByXnE9g.js";const a="data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hlY2siCj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNNSAxMmw1IDVsMTAgLTEwIiAvPgo8L3N2Zz4=";const r='.checkbox.sc-scout-checkbox{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:3px;background-color:var(--color-text-brand-inverse);border:2px solid var(--color-gray-300);position:relative}.checkbox.sc-scout-checkbox:hover{border:2px solid var(--color-gray-400);box-shadow:inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);cursor:pointer}.checkbox.sc-scout-checkbox:active{background-color:var(--color-background-brand-subtle-pressed)}.checkbox.sc-scout-checkbox:checked:hover{background-color:var(--color-background-brand-hovered);border:2px solid var(--color-background-brand-hovered);box-shadow:none}.checkbox.sc-scout-checkbox:checked{background-color:var(--color-background-brand-base);border-color:var(--color-background-brand-base)}.checkbox.sc-scout-checkbox::after{content:"";position:absolute;width:var(--spacing-10);height:var(--spacing-10);top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox.sc-scout-checkbox:checked::before{content:"";background-color:var(--color-text-brand-inverse);width:var(--spacing-6);height:var(--spacing-6);position:absolute;top:50%;left:50%;right:0;bottom:0;transform:translate(-50%, -50%);-webkit-mask-image:var(--icon-checkbox);mask-image:var(--icon-checkbox);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.checkbox.sc-scout-checkbox:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}label.sc-scout-checkbox{display:flex;flex-direction:row-reverse;align-items:center;font:var(--type-label-base);color:var(--color-text-base)}.inlineDivider.sc-scout-checkbox{width:var(--spacing-2)}';const s=class{constructor(o){e(this,o);this.scoutCheckboxChecked=c(this,"scoutCheckboxChecked");this._fieldId=c(this,"_fieldId")}checked=false;disabled=false;ariaLabelledby;label;ariaId;scoutCheckboxChecked;_fieldId;componentWillLoad(){this.ariaId=`_${Math.random().toString(36).substring(2,9)}`;this._fieldId.emit(this.ariaId)}onClick(e){const c=e.target;console.log("checkbox",c.checked);this.scoutCheckboxChecked.emit({checked:c.checked,element:c})}render(){const e=this.label&&this.label.length?"label":"div";return o(e,{key:"2d97627d29b09521936eeef81419673d70fc75f1"},this.label,o("span",{key:"f62b4e360f03b4b6fb6e8fee326756552a5a631d",class:"inlineDivider"}),o("input",{key:"7ca6b74e12c369fc937d1b8c85e70c52fd9aa25c",class:"checkbox",onChange:e=>this.onClick(e),style:{"--icon-checkbox":`url(${a})`},type:"checkbox",id:this.ariaId,"aria-labelledby":this.ariaLabelledby,"aria-disabled":this.disabled,disabled:this.disabled,checked:this.checked}))}};s.style=r;export{s as scout_checkbox};
+//# sourceMappingURL=p-24632b65.entry.js.map

package/dist/ui-webc/p-24632b65.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["registerInstance","createEvent","h","checkSvg","checkboxCss","ScoutCheckbox","constructor","hostRef","this","scoutCheckboxChecked","_fieldId","checked","disabled","ariaLabelledby","label","ariaId","componentWillLoad","Math","random","toString","substring","emit","onClick","event","checkbox","target","console","log","element","render","Tag","length","key","class","onChange","style","type","id"],"sources":["0"],"mappings":"YAAcA,EAAuBC,OAAaC,MAAS,kBAE3D,MAAMC,EAAW,6fAEjB,MAAMC,EAAc,usDAEpB,MAAMC,EAAgB,MAClB,WAAAC,CAAYC,GACRP,EAAiBQ,KAAMD,GACvBC,KAAKC,qBAAuBR,EAAYO,KAAM,wBAC9CA,KAAKE,SAAWT,EAAYO,KAAM,WACtC,CACAG,QAAU,MACVC,SAAW,MAIXC,eACAC,MACAC,OACAN,qBAIAC,SACA,iBAAAM,GACIR,KAAKO,OAAS,IAAIE,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,KAC1DZ,KAAKE,SAASW,KAAKb,KAAKO,OAC5B,CACA,OAAAO,CAAQC,GACJ,MAAMC,EAAWD,EAAME,OACvBC,QAAQC,IAAI,WAAYH,EAASb,SACjCH,KAAKC,qBAAqBY,KAAK,CAC3BV,QAASa,EAASb,QAClBiB,QAASJ,GAEjB,CAMA,MAAAK,GACI,MAAMC,EAAMtB,KAAKM,OAASN,KAAKM,MAAMiB,OAAS,QAAU,MACxD,OAAQ7B,EAAE4B,EAAK,CAAEE,IAAK,4CAA8CxB,KAAKM,MAAOZ,EAAE,OAAQ,CAAE8B,IAAK,2CAA4CC,MAAO,kBAAoB/B,EAAE,QAAS,CAAE8B,IAAK,2CAA4CC,MAAO,WAAYC,SAAWX,GAAUf,KAAKc,QAAQC,GAAQY,MAAO,CAAE,kBAAmB,OAAOhC,MAAeiC,KAAM,WAAYC,GAAI7B,KAAKO,OAAQ,kBAAmBP,KAAKK,eAAgB,gBAAiBL,KAAKI,SAAUA,SAAUJ,KAAKI,SAAUD,QAASH,KAAKG,UAC3e,GAEJN,EAAc8B,MAAQ/B,SAEbC","ignoreList":[]}

package/dist/ui-webc/p-2b434594.entry.js

@@ -0,0 +1,2 @@
+import{r,c as e,h as a}from"./p-DByXnE9g.js";const o='.switch{width:var(--spacing-12);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:1px 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-size:calc((var(--spacing-6) - var(--spacing-1) / 2) + 1px)}.switch:hover{transition-property:none;border-color:var(--color-gray-400);background-color:var(--color-background-brand-subtle-hovered)}.switch:active{background-color:var(--color-background-brand-subtle-pressed)}.switch:checked{border-color:var(--color-background-brand-base)}.switch:hover::before{background-color:var(--color-gray-400)}.switch::before{content:"";background-color:var(--color-gray-300);width:var(--switch-ball-size);height:var(--switch-ball-size);border-radius:50%;position:absolute;left:-1px;right:0;transition-duration:0.3s;transition-property:left, right}.switch:checked::before{content:"";background-color:var(--color-background-brand-base);left:calc(100% - (var(--spacing-6) - var(--spacing-1) / 2) + 1px);left:calc(100% - calc(var(--spacing-6) - var(--spacing-1) / 2) + 1px)}.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)}';const c=class{constructor(a){r(this,a);this.scoutSwitchToggled=e(this,"scoutSwitchToggled");this._fieldId=e(this,"_fieldId")}toggled=false;disabled=false;ariaLabelledby;label;ariaId;scoutSwitchToggled;_fieldId;componentWillLoad(){this.ariaId=`_${Math.random().toString(36).substring(2,9)}`;this._fieldId.emit(this.ariaId)}onClick(r){const e=r.target;this.scoutSwitchToggled.emit({toggled:e.checked,element:e})}render(){const r=this.label&&this.label.length?"label":"div";return a(r,{key:"06f33e80dedee05abc34f15fbd8453f3df50d760"},this.label,a("span",{key:"3061c223b64f313d4ebcd4b068ca84d83c5bb9c2",class:"inlineDivider"}),a("input",{key:"66a3a848ce3aa484af9bb13eda6cc30e46e74c1d",class:"switch",onChange:r=>this.onClick(r),type:"checkbox",id:this.ariaId,"aria-labelledby":this.ariaLabelledby,"aria-disabled":this.disabled,disabled:this.disabled,checked:this.toggled}))}static get delegatesFocus(){return true}};c.style=o;export{c as scout_switch};
+//# sourceMappingURL=p-2b434594.entry.js.map

package/dist/ui-webc/p-2b434594.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["registerInstance","createEvent","h","switchCss","ScoutSwitch","constructor","hostRef","this","scoutSwitchToggled","_fieldId","toggled","disabled","ariaLabelledby","label","ariaId","componentWillLoad","Math","random","toString","substring","emit","onClick","event","switchElement","target","checked","element","render","Tag","length","key","class","onChange","type","id","delegatesFocus","style"],"sources":["0"],"mappings":"OAAcA,OAAuBC,OAAaC,MAAS,kBAE3D,MAAMC,EAAY,imDAElB,MAAMC,EAAc,MAChB,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GACvBC,KAAKC,mBAAqBP,EAAYM,KAAM,sBAC5CA,KAAKE,SAAWR,EAAYM,KAAM,WACtC,CAIAG,QAAU,MACVC,SAAW,MAIXC,eACAC,MACAC,OACAN,mBAIAC,SACA,iBAAAM,GACIR,KAAKO,OAAS,IAAIE,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,KAC1DZ,KAAKE,SAASW,KAAKb,KAAKO,OAC5B,CACA,OAAAO,CAAQC,GACJ,MAAMC,EAAgBD,EAAME,OAC5BjB,KAAKC,mBAAmBY,KAAK,CACzBV,QAASa,EAAcE,QACvBC,QAASH,GAEjB,CACA,MAAAI,GACI,MAAMC,EAAMrB,KAAKM,OAASN,KAAKM,MAAMgB,OAAS,QAAU,MACxD,OAAQ3B,EAAE0B,EAAK,CAAEE,IAAK,4CAA8CvB,KAAKM,MAAOX,EAAE,OAAQ,CAAE4B,IAAK,2CAA4CC,MAAO,kBAAoB7B,EAAE,QAAS,CAAE4B,IAAK,2CAA4CC,MAAO,SAAUC,SAAWV,GAAUf,KAAKc,QAAQC,GAAQW,KAAM,WAAYC,GAAI3B,KAAKO,OAAQ,kBAAmBP,KAAKK,eAAgB,gBAAiBL,KAAKI,SAAUA,SAAUJ,KAAKI,SAAUc,QAASlB,KAAKG,UACvb,CACA,yBAAWyB,GAAmB,OAAO,IAAM,GAE/C/B,EAAYgC,MAAQjC,SAEXC","ignoreList":[]}

package/dist/ui-webc/{p-fb926c68.entry.js → p-7245a55a.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,a as t,h as a}from"./p-DByXnE9g.js";const l=".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}";const s=class{constructor(t){e(this,t)}label;helpText;inputId;errorText=null;errorHidden=false;get hostElement(){return t(this)}catchFieldId(e){e.stopPropagation();this.inputId=e.detail}handleInputChange(e){const{element:t}=e.detail;this.errorHidden=true;if(t.validity.valid){this.errorText=null}else{this.errorText=t.validationMessage}}handleValidationBlur(){this.errorHidden=false}render(){return a("div",{key:"bcd308f7ff69063860281b7f4f48ef2baa608308",class:"field"},a("label",{key:"756d4a97399ed94970b3d39850dd5c4d0e155a99",htmlFor:this.inputId,class:"label"},this.label),a("slot",{key:"3700f8aba58c90b14224e0d35a147f1a11ba7f98"}),a("p",{key:"60a70a27e3b7811accc657bbe49405306d342d9d",class:"error-text","aria-live":"polite"},!this.errorHidden&&this.errorText),this.helpText&&a("p",{key:"44f8377005f43ca1a332d6c4d8aec48e5aafb3c4",class:"help-text"},this.helpText))}};s.style=l;export{s as scout_field};
-//# sourceMappingURL=p-fb926c68.entry.js.map
+import{r as e,a as t,h as l}from"./p-DByXnE9g.js";const a=".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}";const s=class{constructor(t){e(this,t)}label;helpText;inputId;errorText=null;errorHidden=false;get hostElement(){return t(this)}catchFieldId(e){e.stopPropagation();this.inputId=e.detail}handleInputChange(e){const{element:t}=e.detail;this.errorHidden=true;if(t.validity.valid){this.errorText=null}else{this.errorText=t.validationMessage}}handleValidationBlur(){this.errorHidden=false}render(){return l("div",{key:"0ba5919cf10618bf4617e1ced85485a6d136f668",class:"field"},l("label",{key:"55cac1b4eb9c0d58ea1e4045b9c85c30a384d99b",htmlFor:this.inputId,class:"label"},this.label),l("slot",{key:"b5931e88ad82e693ff1dc24acd99db393f048fab"}),l("p",{key:"6354b6187ba63158bdd5c784787f1612eb641db4",class:"error-text","aria-live":"polite"},!this.errorHidden&&this.errorText),this.helpText&&l("p",{key:"ba9e47977b682fbe28afd61c6a00832506860e56",class:"help-text"},this.helpText))}};s.style=a;export{s as scout_field};
+//# sourceMappingURL=p-7245a55a.entry.js.map

package/dist/ui-webc/scout-checkbox.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scout-checkbox.entry.esm.js","sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/check.svg","src/components/checkbox/checkbox.css?tag=scout-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  class=\"icon icon-tabler icons-tabler-outline icon-tabler-check\"\n>\n  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M5 12l5 5l10 -10\" />\n</svg>",".checkbox {\n  width: var(--spacing-6);\n  height: var(--spacing-6);\n  appearance: none;\n  -webkit-appearance: none;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  border-radius: 3px;\n  background-color: var(--color-text-brand-inverse);\n  border: 2px solid var(--color-gray-300);\n  position: relative;\n}\n\n.checkbox:hover {\n  border: 2px solid var(--color-gray-400);\n  box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);\n  cursor: pointer;\n}\n\n.checkbox:active {\n  background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.checkbox:checked:hover {\n  background-color: var(--color-background-brand-hovered);\n  border: 2px solid var(--color-background-brand-hovered);\n  box-shadow: none;\n}\n\n.checkbox:checked {\n  background-color: var(--color-background-brand-base);\n  border-color: var(--color-background-brand-base);\n}\n\n.checkbox::after {\n  content: \"\";\n  position: absolute;\n  width: var(--spacing-10);\n  height: var(--spacing-10);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.checkbox:checked::before {\n  content: \"\";\n  background-color: var(--color-text-brand-inverse);\n  width: var(--spacing-6);\n  height: var(--spacing-6);\n  position: absolute;\n  /* Needed because of the border */\n  top: 50%;\n  left: 50%;\n  right: 0;\n  bottom: 0;\n  transform: translate(-50%, -50%);\n  mask-image: var(--icon-checkbox);\n  mask-repeat: no-repeat;\n}\n\n.checkbox:disabled {\n  pointer-events: none;\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n\nlabel {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  font: var(--type-label-base);\n  color: var(--color-text-base);\n}\n\n.inlineDivider {\n  width: var(--spacing-2);\n}\n","import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport checkIcon from \"@tabler/icons/outline/check.svg\";\n\n@Component({\n  tag: \"scout-checkbox\",\n  styleUrl: \"checkbox.css\",\n  scoped: true,\n})\nexport class ScoutCheckbox {\n  @Prop() checked: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @State() ariaId: string;\n\n  @Event() scoutCheckboxChecked: EventEmitter<{\n    checked: boolean;\n    element: HTMLInputElement;\n  }>;\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  componentWillLoad(): Promise<void> | void {\n    this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n    this._fieldId.emit(this.ariaId);\n  }\n\n  onClick(event: Event) {\n    const checkbox = event.target as HTMLInputElement;\n    console.log(\"checkbox\", checkbox.checked);\n\n    this.scoutCheckboxChecked.emit({\n      checked: checkbox.checked,\n      element: checkbox,\n    });\n  }\n  /*\n  todo:\n  - Wrap checkbox with label if used.\n  - make sure it works with field nicely with label.\n  */\n\n  render() {\n    const Tag = this.label && this.label.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        {this.label}\n        <span class=\"inlineDivider\"></span>\n        <input\n          class=\"checkbox\"\n          onChange={(event) => this.onClick(event)}\n          style={{ \"--icon-checkbox\": `url(${checkIcon})` }}\n          type=\"checkbox\"\n          id={this.ariaId}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.checked}\n        />\n      </Tag>\n    );\n  }\n}\n"],"names":["checkIcon"],"mappings":";;AAAA,MAAM,QAAQ,GAAG,4fAA4f;;ACA7gB,MAAM,WAAW,GAAG,0sDAA0sD;;MCejtD,aAAa,GAAA,MAAA;;;;;;IAChB,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEJ,IAAA,MAAM;AAEN,IAAA,oBAAoB;AAI7B;;AAEG;AACM,IAAA,QAAQ;IAEjB,iBAAiB,GAAA;QACf,IAAI,CAAC,MAAM,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA,CAAE;QAC9D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;AAGjC,IAAA,OAAO,CAAC,KAAY,EAAA;AAClB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B;QACjD,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC;AAEzC,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;YAC7B,OAAO,EAAE,QAAQ,CAAC,OAAO;AACzB,YAAA,OAAO,EAAE,QAAQ;AAClB,SAAA,CAAC;;AAEJ;;;;AAIE;IAEF,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,KAAK;QAC7D,QACE,EAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,IAAI,CAAC,KAAK,EACX,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAQ,CAAA,EACnC,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,UAAU,EAChB,QAAQ,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,iBAAiB,EAAE,CAAA,IAAA,EAAOA,QAAS,CAAA,CAAA,CAAG,EAAE,EACjD,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,MAAM,EAAA,iBAAA,EACE,IAAI,CAAC,cAAc,EAAA,eAAA,EACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,CACrB,CACE;;;;;;;","x_google_ignoreList":[0]}

package/dist/ui-webc/scout-switch.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scout-switch.entry.esm.js","sources":["src/components/switch/switch.css?tag=scout-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":[".switch {\n  width: var(--spacing-12);\n  height: var(--spacing-6);\n  appearance: none;\n  -webkit-appearance: none;\n  border-radius: var(--spacing-8);\n  background-color: var(--color-text-brand-inverse);\n  border: 1px solid var(--color-gray-300);\n  position: relative;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  transition-property: border-color;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  cursor: pointer;\n  --switch-ball-size: calc((var(--spacing-6) - var(--spacing-1) / 2) + 1px);\n}\n\n.switch:hover {\n  transition-property: none;\n  border-color: var(--color-gray-400);\n  background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.switch:active {\n  background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.switch:checked {\n  border-color: var(--color-background-brand-base);\n}\n\n.switch:hover::before {\n  background-color: var(--color-gray-400);\n}\n\n.switch::before {\n  content: \"\";\n  background-color: var(--color-gray-300);\n  width: var(--switch-ball-size);\n  height: var(--switch-ball-size);\n  border-radius: 50%;\n  position: absolute;\n  left: -1px;\n  right: 0;\n  transition-duration: 0.3s;\n  transition-property: left, right;\n}\n.switch:checked::before {\n  content: \"\";\n  background-color: var(--color-background-brand-base);\n  left: calc(100% - calc(var(--spacing-6) - var(--spacing-1) / 2) + 1px);\n}\n\n.switch:disabled {\n  pointer-events: none;\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n\n.switch:disabled::before {\n  background-color: var(--color-gray-300);\n}\n\nlabel {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  font: var(--type-label-base);\n  color: var(--color-text-base);\n}\n\n.inlineDivider {\n  width: var(--spacing-2);\n}\n","import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-switch\",\n  styleUrl: \"switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutSwitch {\n  /**\n   * Indicates whether the switch is toggled on or off.\n   */\n  @Prop() toggled: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your switch with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @State() ariaId: string;\n\n  @Event() scoutSwitchToggled: EventEmitter<{\n    toggled: boolean;\n    element: HTMLInputElement;\n  }>;\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  componentWillLoad(): Promise<void> | void {\n    this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n    this._fieldId.emit(this.ariaId);\n  }\n\n  onClick(event: Event) {\n    const switchElement = event.target as HTMLInputElement;\n\n    this.scoutSwitchToggled.emit({\n      toggled: switchElement.checked,\n      element: switchElement,\n    });\n  }\n\n  render() {\n    const Tag = this.label && this.label.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        {this.label}\n        <span class=\"inlineDivider\"></span>\n        <input\n          class=\"switch\"\n          onChange={(event) => this.onClick(event)}\n          type=\"checkbox\"\n          id={this.ariaId}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.toggled}\n        />\n      </Tag>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,omDAAomD;;MCgBzmD,WAAW,GAAA,MAAA;;;;;;AACtB;;AAEG;IACK,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEJ,IAAA,MAAM;AAEN,IAAA,kBAAkB;AAI3B;;AAEG;AACM,IAAA,QAAQ;IAEjB,iBAAiB,GAAA;QACf,IAAI,CAAC,MAAM,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA,CAAE;QAC9D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;AAGjC,IAAA,OAAO,CAAC,KAAY,EAAA;AAClB,QAAA,MAAM,aAAa,GAAG,KAAK,CAAC,MAA0B;AAEtD,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;YAC3B,OAAO,EAAE,aAAa,CAAC,OAAO;AAC9B,YAAA,OAAO,EAAE,aAAa;AACvB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,KAAK;QAC7D,QACE,EAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,IAAI,CAAC,KAAK,EACX,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAQ,CAAA,EACnC,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACxC,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,MAAM,EAAA,iBAAA,EACE,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,CACrB,CACE;;;;;;;;"}

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

@@ -1,2 +1,2 @@
-import{p as t,g as e,b as a}from"./p-DByXnE9g.js";export{s as setNonce}from"./p-DByXnE9g.js";var o=()=>{const e=import.meta.url;const a={};if(e!==""){a.resourcesUrl=new URL(".",e).href}return t(a)};o().then((async t=>{await e();return a([["p-c0c3a4af",[[273,"scout-bottom-bar"]]],["p-e7602729",[[273,"scout-bottom-bar-item",{type:[1],href:[1],icon:[1],label:[1],active:[4]}]]],["p-99329c64",[[273,"scout-button",{type:[1],variant:[1],icon:[1]}]]],["p-383736c1",[[273,"scout-card"]]],["p-fb926c68",[[262,"scout-field",{label:[1],helpText:[1,"help-text"],inputId:[32],errorText:[32],errorHidden:[32]},[[0,"_fieldId","catchFieldId"],[0,"scoutInputChange","handleInputChange"],[0,"scoutBlur","handleValidationBlur"]]]]],["p-9b7c270d",[[258,"scout-input",{type:[1],inputmode:[1],pattern:[1],value:[1],disabled:[4],validate:[16],ariaId:[32]}]]]],t)}));
+import{p as a,g as e,b as t}from"./p-DByXnE9g.js";export{s as setNonce}from"./p-DByXnE9g.js";var l=()=>{const e=import.meta.url;const t={};if(e!==""){t.resourcesUrl=new URL(".",e).href}return a(t)};l().then((async a=>{await e();return t([["p-c0c3a4af",[[273,"scout-bottom-bar"]]],["p-e7602729",[[273,"scout-bottom-bar-item",{type:[1],href:[1],icon:[1],label:[1],active:[4]}]]],["p-99329c64",[[273,"scout-button",{type:[1],variant:[1],icon:[1]}]]],["p-383736c1",[[273,"scout-card"]]],["p-24632b65",[[258,"scout-checkbox",{checked:[4],disabled:[4],ariaLabelledby:[1,"aria-labelledby"],label:[1],ariaId:[32]}]]],["p-7245a55a",[[262,"scout-field",{label:[1],helpText:[1,"help-text"],inputId:[32],errorText:[32],errorHidden:[32]},[[0,"_fieldId","catchFieldId"],[0,"scoutInputChange","handleInputChange"],[0,"scoutBlur","handleValidationBlur"]]]]],["p-9b7c270d",[[258,"scout-input",{type:[1],inputmode:[1],pattern:[1],value:[1],disabled:[4],validate:[16],ariaId:[32]}]]],["p-2b434594",[[273,"scout-switch",{toggled:[4],disabled:[4],ariaLabelledby:[1,"aria-labelledby"],label:[1],ariaId:[32]}]]]],a)}));
 //# sourceMappingURL=ui-webc.esm.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scouterna/ui-webc",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "type": "module",
   "description": "Scouterna Design System Web Components",
   "main": "dist/index.cjs.js",
@@ -45,6 +45,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "iconoir": "^7.11.0",
+    "@tabler/icons": "^3.35.0",
     "@scouterna/design-tokens": "^0.0.2"
   },
   "devDependencies": {