@descope/web-components-ui 1.0.64 → 1.0.66

package/dist/umd/descope-loader-linear-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[453],{9929:(t,n,e)=>{e.r(n),e.d(n,{LoaderLinear:()=>p});var o=e(9725),a=e(9989),r=e(2061);const i=(0,e(4567).iY)("loader-linear");class s extends a.V{static get componentName(){return i}constructor(){super();const t=document.createElement("template");t.innerHTML="\n\t\t\t<style>\n\t\t\t\t@keyframes tilt {\n\t\t\t\t\t0% { transform: translateX(0); }\n\t\t\t\t\t50% { transform: translateX(400%); }\n\t\t\t\t}\n\t\t\t\t:host {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tdisplay: inline-block\n\t\t\t\t}\n\t\t\t\tdiv::after {\n\t\t\t\t\tcontent: '';\n\t\t\t\t\tanimation-name: tilt;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tleft: 0;\n\t\t\t\t}\n\n\t\t\t\t:host > div {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div></div>\n\t\t",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div"}}const{root:c,after:l,host:d}={root:{},after:{selector:"::after"},host:{selector:()=>":host"}},p=(0,r.qC)((0,o.yk)({mappings:{display:c,width:d,height:[c,l],borderRadius:[c,l],surfaceColor:[{property:"background-color"}],barColor:[{...l,property:"background-color"}],barWidth:{...l,property:"width"},animationDuration:[c,l],animationTimingFunction:[c,l],animationIterationCount:[c,l]}}),o.e4,o.Ae)(s);customElements.define(i,p)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[453],{9929:(t,n,e)=>{e.r(n),e.d(n,{LoaderLinear:()=>p});var o=e(6860),a=e(9989),r=e(2061);const i=(0,e(4567).iY)("loader-linear");class s extends a.V{static get componentName(){return i}constructor(){super();const t=document.createElement("template");t.innerHTML="\n\t\t\t<style>\n\t\t\t\t@keyframes tilt {\n\t\t\t\t\t0% { transform: translateX(0); }\n\t\t\t\t\t50% { transform: translateX(400%); }\n\t\t\t\t}\n\t\t\t\t:host {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tdisplay: inline-block\n\t\t\t\t}\n\t\t\t\tdiv::after {\n\t\t\t\t\tcontent: '';\n\t\t\t\t\tanimation-name: tilt;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tleft: 0;\n\t\t\t\t}\n\n\t\t\t\t:host > div {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div></div>\n\t\t",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div"}}const{root:c,after:l,host:d}={root:{},after:{selector:"::after"},host:{selector:()=>":host"}},p=(0,r.qC)((0,o.yk)({mappings:{display:c,width:d,height:[c,l],borderRadius:[c,l],surfaceColor:[{property:"background-color"}],barColor:[{...l,property:"background-color"}],barWidth:{...l,property:"width"},animationDuration:[c,l],animationTimingFunction:[c,l],animationIterationCount:[c,l]}}),o.e4,o.Ae)(s);customElements.define(i,p)}}]);

package/dist/umd/descope-loader-radial-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[72],{7603:(t,e,o)=>{o.r(e),o.d(e,{LoaderRadial:()=>p});var n=o(9725),r=o(9989),i=o(2061);const s=(0,o(4567).iY)("loader-radial");class a extends r.V{static get componentName(){return s}constructor(){super();const t=document.createElement("template");t.innerHTML="\n\t\t\t<style>\n\t\t\t\t@keyframes spin {\n\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t}\n\t\t\t\t:host {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\t\t\t\t:host > div {\n\t\t\t\t\tanimation-name: spin;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div></div>\n\t\t",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div"}}const p=(0,i.qC)((0,n.yk)({mappings:{display:{},width:{},height:{},spinnerWidth:{property:"border-width"},spinnerStyle:{property:"border-style"},spinnerRadius:{property:"border-radius"},spinnerTopColor:{property:"border-top-color"},spinnerBottomColor:{property:"border-bottom-color"},spinnerRightColor:{property:"border-right-color"},spinnerLeftColor:{property:"border-left-color"},color:{},animationDuration:{},animationTimingFunction:{},animationIterationCount:{}}}),n.e4,n.Ae)(a);customElements.define(s,p)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[72],{7603:(t,e,o)=>{o.r(e),o.d(e,{LoaderRadial:()=>p});var n=o(6860),r=o(9989),i=o(2061);const s=(0,o(4567).iY)("loader-radial");class a extends r.V{static get componentName(){return s}constructor(){super();const t=document.createElement("template");t.innerHTML="\n\t\t\t<style>\n\t\t\t\t@keyframes spin {\n\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t}\n\t\t\t\t:host {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\t\t\t\t:host > div {\n\t\t\t\t\tanimation-name: spin;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div></div>\n\t\t",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div"}}const p=(0,i.qC)((0,n.yk)({mappings:{display:{},width:{},height:{},spinnerWidth:{property:"border-width"},spinnerStyle:{property:"border-style"},spinnerRadius:{property:"border-radius"},spinnerTopColor:{property:"border-top-color"},spinnerBottomColor:{property:"border-bottom-color"},spinnerRightColor:{property:"border-right-color"},spinnerLeftColor:{property:"border-left-color"},color:{},animationDuration:{},animationTimingFunction:{},animationIterationCount:{}}}),n.e4,n.Ae)(a);customElements.define(s,p)}}]);

package/dist/umd/descope-logo-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[984],{4641:(t,e,n)=>{n.r(e),n.d(e,{Logo:()=>d});var s=n(9725),o=n(9989),c=n(2061);const l=(0,n(4567).iY)("logo");let a;class i extends o.V{static get componentName(){return l}constructor(){super();const t=document.createElement("template");t.innerHTML=`\n\t\t<style>\n\t\t\t${a}\n\t\t</style>\n\t\t<div></div>`,this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div"}}const r=(0,c.qC)((0,s.yk)({mappings:{height:{},width:{},url:{},fallbackUrl:{}}}),s.e4,s.Ae)(i);a=`\n:host {\n\tdisplay: inline-flex;\n}\n:host > div {\n\tdisplay: inline-block;\n\tcontent: var(${r.cssVarList.url}, var(${r.cssVarList.fallbackUrl}));\n}\n`;const d=r;customElements.define(l,d)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[984],{4641:(t,e,n)=>{n.r(e),n.d(e,{Logo:()=>d});var s=n(6860),o=n(9989),c=n(2061);const l=(0,n(4567).iY)("logo");let a;class i extends o.V{static get componentName(){return l}constructor(){super();const t=document.createElement("template");t.innerHTML=`\n\t\t<style>\n\t\t\t${a}\n\t\t</style>\n\t\t<div></div>`,this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div"}}const r=(0,c.qC)((0,s.yk)({mappings:{height:{},width:{},url:{},fallbackUrl:{}}}),s.e4,s.Ae)(i);a=`\n:host {\n\tdisplay: inline-flex;\n}\n:host > div {\n\tdisplay: inline-block;\n\tcontent: var(${r.cssVarList.url}, var(${r.cssVarList.fallbackUrl}));\n}\n`;const d=r;customElements.define(l,d)}}]);

package/dist/umd/descope-number-field-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[142],{4951:(t,n,e)=>{e.r(n),e.d(n,{NumberField:()=>s}),e(5806);var i=e(9725),a=e(4447),r=e(2061);const l=(0,e(4567).iY)("number-field");let d="";const o=(0,r.qC)((0,i.yk)({mappings:{...a.Z}}),i.e4,i.dj,i.Ae)((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-number-field",style:()=>d,excludeAttrsSync:["tabindex"],componentName:l}));d=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\tvaadin-number-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\tvaadin-number-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-number-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-number-field input:-webkit-autofill,\n\tvaadin-number-field input:-webkit-autofill::first-line,\n\tvaadin-number-field input:-webkit-autofill:hover,\n\tvaadin-number-field input:-webkit-autofill:active,\n\tvaadin-number-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${o.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${o.cssVarList.height}) var(${o.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-number-field > label,\n\tvaadin-number-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${o.cssVarList.color});\n\t}\n\tvaadin-number-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-number-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${o.cssVarList.color});\n\t}\n\tvaadin-number-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const s=o;customElements.define(l,s)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[142],{4951:(t,n,e)=>{e.r(n),e.d(n,{NumberField:()=>s}),e(5806);var i=e(6860),a=e(4447),r=e(2061);const l=(0,e(4567).iY)("number-field");let d="";const o=(0,r.qC)((0,i.yk)({mappings:{...a.Z}}),i.e4,i.dj,i.Ae)((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-number-field",style:()=>d,excludeAttrsSync:["tabindex"],componentName:l}));d=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\tvaadin-number-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\tvaadin-number-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-number-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-number-field input:-webkit-autofill,\n\tvaadin-number-field input:-webkit-autofill::first-line,\n\tvaadin-number-field input:-webkit-autofill:hover,\n\tvaadin-number-field input:-webkit-autofill:active,\n\tvaadin-number-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${o.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${o.cssVarList.height}) var(${o.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-number-field > label,\n\tvaadin-number-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${o.cssVarList.color});\n\t}\n\tvaadin-number-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-number-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${o.cssVarList.color});\n\t}\n\tvaadin-number-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const s=o;customElements.define(l,s)}}]);

package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[841],{1079:(t,e,s)=>{s.d(e,{f:()=>r,Z:()=>l});const i=(0,s(9725).y7)(HTMLElement);var n=s(4567);const a=t=>{t?.focus(),t?.setSelectionRange(1,1)},u=t=>{const e=t.replace(/\s/g,"");return e.match(/^\d+$/)?[...e]:[]},r=(0,n.iY)("passcode-internal");class d extends i{static get observedAttributes(){return[...i.observedAttributes,"disabled","bordered","size"]}static get componentName(){return r}constructor(){super();const t=document.createElement("template"),e=[...Array(this.digits).keys()].map((t=>`\n\t\t<descope-text-field\n\t\t\tst-width="35px"\n\t\t\tdata-id=${t}\n\t\t\ttype="tel"\n\t\t\tautocomplete="none"\n\t\t></descope-text-field>\n\t`));t.innerHTML=`\n\t\t<div>\n\t\t\t${e.join("")}\n\t\t</div>\n\t\t`,this.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div",this.inputs=Array.from(this.querySelectorAll("descope-text-field"))}get digits(){return Number.parseInt(this.getAttribute("digits"))||6}get value(){return this.inputs.map((({value:t})=>t)).join("")}set value(t){if(t===this.value)return;const e=u(t);e.length&&this.fillDigits(e,this.inputs[0])}get pattern(){return`^$|^\\d{${this.digits},}$`}handleInputsInvalid(){setTimeout((()=>{this.hasAttribute("invalid")&&this.inputs.forEach((t=>t.setAttribute("invalid","true")))}))}handleInputsValid(){this.inputs.forEach((t=>t.removeAttribute("invalid")))}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:this.pattern&&!new RegExp(this.pattern).test(this.value)?{patternMismatch:!0}:{}}handleFocus(){this.inputs[0].focus()}async connectedCallback(){super.connectedCallback(),this.initInputs(),this.addEventListener("invalid",this.handleInputsInvalid),this.addEventListener("valid",this.handleInputsValid)}getInputIdx(t){return Number.parseInt(t.getAttribute("data-id"),10)}getNextInput(t){const e=this.getInputIdx(t),s=Math.min(e+1,this.inputs.length-1);return this.inputs[s]}getPrevInput(t){const e=this.getInputIdx(t),s=Math.max(e-1,0);return this.inputs[s]}fillDigits(t,e){for(let s=0;s<t.length;s+=1){e.value=t[s]??"";const i=this.getNextInput(e);if(i===e)break;e=i}!e.hasAttribute("focused")&&a(e)}handleBlur(){this.handleInputsInvalid()}initInputs(){this.inputs.forEach((t=>{t.addEventListener("blur",(()=>{const t=setTimeout((()=>{this.dispatchBlur()}));this.inputs.forEach((e=>e.addEventListener("focus",(()=>clearTimeout(t)),{once:!0})))})),t.oninput=()=>{const e=u(t.value);e.length?this.fillDigits(e,t):t.value="",this.dispatchInput()},t.onkeydown=({key:e})=>{if("Backspace"===e){t.value="";const e=this.getPrevInput(t);!e.hasAttribute("focused")&&setTimeout((()=>{a(e)})),this.dispatchInput()}else e.match(/^(\d)$/g)&&(t.value="")}}))}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),e!==s&&d.observedAttributes.includes(t)&&!i.observedAttributes.includes(t)&&this.inputs.forEach((e=>e.setAttribute(t,s)))}}const l=d},4775:(t,e,s)=>{s.r(e);var i=s(1079);customElements.define(i.f,i.Z)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[841],{1079:(t,e,s)=>{s.d(e,{f:()=>r,Z:()=>l});const i=(0,s(6860).y7)(HTMLElement);var n=s(4567);const a=t=>{t?.focus(),t?.setSelectionRange(1,1)},u=t=>{const e=t.replace(/\s/g,"");return e.match(/^\d+$/)?[...e]:[]},r=(0,n.iY)("passcode-internal");class d extends i{static get observedAttributes(){return[...i.observedAttributes,"disabled","bordered","size","readonly"]}static get componentName(){return r}constructor(){super();const t=document.createElement("template"),e=[...Array(this.digits).keys()].map((t=>`\n\t\t<descope-text-field\n\t\t\tst-width="35px"\n\t\t\tdata-id=${t}\n\t\t\ttype="tel"\n\t\t\tautocomplete="none"\n\t\t></descope-text-field>\n\t`));t.innerHTML=`\n\t\t<div>\n\t\t\t${e.join("")}\n\t\t</div>\n\t\t`,this.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div",this.inputs=Array.from(this.querySelectorAll("descope-text-field"))}get digits(){return Number.parseInt(this.getAttribute("digits"))||6}get value(){return this.inputs.map((({value:t})=>t)).join("")}set value(t){if(t===this.value)return;const e=u(t);e.length&&this.fillDigits(e,this.inputs[0])}get pattern(){return`^$|^\\d{${this.digits},}$`}handleInputsInvalid(){setTimeout((()=>{this.hasAttribute("invalid")&&this.inputs.forEach((t=>t.setAttribute("invalid","true")))}))}handleInputsValid(){this.inputs.forEach((t=>t.removeAttribute("invalid")))}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:this.pattern&&!new RegExp(this.pattern).test(this.value)?{patternMismatch:!0}:{}}handleFocus(){this.inputs[0].focus()}async connectedCallback(){super.connectedCallback(),this.initInputs(),this.addEventListener("invalid",this.handleInputsInvalid),this.addEventListener("valid",this.handleInputsValid)}getInputIdx(t){return Number.parseInt(t.getAttribute("data-id"),10)}getNextInput(t){const e=this.getInputIdx(t),s=Math.min(e+1,this.inputs.length-1);return this.inputs[s]}getPrevInput(t){const e=this.getInputIdx(t),s=Math.max(e-1,0);return this.inputs[s]}fillDigits(t,e){for(let s=0;s<t.length;s+=1){e.value=t[s]??"";const i=this.getNextInput(e);if(i===e)break;e=i}!e.hasAttribute("focused")&&a(e)}handleBlur(){this.handleInputsInvalid()}initInputs(){this.inputs.forEach((t=>{t.addEventListener("blur",(t=>{t.stopPropagation();const e=setTimeout((()=>{this.dispatchBlur()}));this.inputs.forEach((t=>t.addEventListener("focus",(()=>clearTimeout(e)),{once:!0})))})),t.oninput=e=>{e.stopPropagation();const s=u(t.value);s.length?this.fillDigits(s,t):t.value="",this.dispatchInput()},t.onkeydown=({key:e})=>{if("Backspace"===e){t.value="";const e=this.getPrevInput(t);!e.hasAttribute("focused")&&setTimeout((()=>{a(e)})),this.dispatchInput()}else e.match(/^(\d)$/g)&&(t.value="")}}))}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),e!==s&&d.observedAttributes.includes(t)&&!i.observedAttributes.includes(t)&&this.inputs.forEach((e=>e.setAttribute(t,s)))}}const l=d},4775:(t,e,s)=>{s.r(e);var i=s(1079);customElements.define(i.f,i.Z)}}]);

package/dist/umd/descope-passcode-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[939],{7102:(t,e,n)=>{n.r(e);var i=n(9725),r=n(4447),d=n(1079),a=n(9063),o=n(2061),l=n(4567);const s=(0,l.iY)("passcode"),{borderStyle:p,borderWidth:c,...u}=r.Z,{digitField:f,label:m,requiredIndicator:b}={digitField:{selector:()=>a.Z.componentName},label:{selector:"> label"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"}},h=a.Z.cssVarList,x=(0,o.qC)((0,i.yk)({mappings:{...u,borderColor:{...f,property:h.borderColor},color:[u.color,m,b]}}),i.e4,i.dj,i.Ae,(t=>class extends t{constructor(){super()}get digits(){return Number.parseInt(this.getAttribute("digits"))||6}connectedCallback(){super.connectedCallback?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${d.f} \n\t\t\t\tbordered="true" \n\t\t\t\tname="code" \n\t\t\t\ttabindex="-1"\n\t\t\t\tslot="input"\n\t\t\t></${d.f}>\n\t\t\t`,this.proxyElement.appendChild(t.content.cloneNode(!0)),this.proxyElement._setFocused=()=>{},this.inputElement=this.shadowRoot.querySelector(d.f),(0,l.oP)(this.shadowRoot.host,this.inputElement,{includeAttrs:["required","pattern"]}),this.inputElement.addEventListener("blur",(t=>{t.isTrusted||this.proxyElement.validate()}))}}))((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>'\n    :host {\n      --vaadin-field-default-width: auto;\n\t\t\tdisplay: inline-block;\n    }\n    descope-passcode-internal {\n      -webkit-mask-image: none;\n      display: flex;\n      gap: 2px;\n      align-items: center;\n      padding: 0;\n    }\n    vaadin-text-field::part(input-field) {\n      background-color: transparent;\n      padding: 0;\n\t\t\toverflow: hidden;\n    }\n\t\tvaadin-text-field {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\topacity: 1;\n\t\t}\n\t\tvaadin-text-field > label,\n\t\tvaadin-text-field::part(input-field) {\n\t\t\tcursor: pointer;\n\t\t}\n\t\tvaadin-text-field::part(input-field):focus {\n\t\t\tcursor: text;\n\t\t}\n\t\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\t\tfont-size: "12px";\n\t\t\tcontent: "*";\n\t\t}\n\t\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\t\tborder: 0 solid;\n\t\t}\n    ',excludeAttrsSync:["tabindex"],componentName:s}));n(9357),n(4775),customElements.define(s,x)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[939],{7102:(t,e,n)=>{n.r(e);var i=n(6860),r=n(4447),d=n(1079),a=n(9063),o=n(2061),l=n(4567);const s=(0,l.iY)("passcode"),{borderStyle:p,borderWidth:c,...u}=r.Z,{digitField:f,label:m,requiredIndicator:b}={digitField:{selector:()=>a.Z.componentName},label:{selector:"> label"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"}},h=a.Z.cssVarList,x=(0,o.qC)((0,i.yk)({mappings:{...u,borderColor:{...f,property:h.borderColor},color:[u.color,m,b]}}),i.e4,i.dj,i.Ae,(t=>class extends t{constructor(){super()}get digits(){return Number.parseInt(this.getAttribute("digits"))||6}connectedCallback(){super.connectedCallback?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${d.f} \n\t\t\t\tbordered="true" \n\t\t\t\tname="code" \n\t\t\t\ttabindex="-1"\n\t\t\t\tslot="input"\n\t\t\t></${d.f}>\n\t\t\t`,this.proxyElement.appendChild(t.content.cloneNode(!0)),this.proxyElement._setFocused=()=>{},this.inputElement=this.shadowRoot.querySelector(d.f),(0,l.oP)(this.shadowRoot.host,this.inputElement,{includeAttrs:["required","pattern"]}),this.inputElement.addEventListener("blur",(t=>{t.isTrusted||this.proxyElement.validate()}))}}))((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>'\n    :host {\n      --vaadin-field-default-width: auto;\n\t\t\tdisplay: inline-block;\n    }\n\n    descope-passcode-internal {\n      -webkit-mask-image: none;\n      display: flex;\n      gap: 2px;\n      align-items: center;\n      padding: 0;\n    }\n    vaadin-text-field::part(input-field) {\n      background-color: transparent;\n      padding: 0;\n\t\t\toverflow: hidden;\n    }\n\t\tvaadin-text-field {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\topacity: 1;\n\t\t}\n\t\tvaadin-text-field > label,\n\t\tvaadin-text-field::part(input-field) {\n\t\t\tcursor: pointer;\n\t\t}\n\t\tvaadin-text-field::part(input-field):focus {\n\t\t\tcursor: text;\n\t\t}\n\t\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\t\tfont-size: "12px";\n\t\t\tcontent: "*";\n\t\t}\n\t\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\t\tborder: 0 solid;\n\t\t}\n    ',excludeAttrsSync:["tabindex"],componentName:s}));n(9357),n(4775),customElements.define(s,x)}}]);

package/dist/umd/descope-password-field-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[320],{1721:(t,n,a)=>{a.r(n),a.d(n,{PasswordField:()=>l}),a(7056);var i=a(9725),e=a(4447),s=a(2061);const r=(0,a(4567).iY)("password-field");let o="";const d=(0,s.qC)((0,i.yk)({mappings:{...e.Z,revealCursor:[{selector:"::part(reveal-button)::before",property:"cursor"}]}}),i.e4,i.dj,i.Ae)((0,i.DM)({slots:["suffix"],wrappedEleName:"vaadin-password-field",style:()=>o,excludeAttrsSync:["tabindex"],componentName:r}));o=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\tvaadin-password-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\tvaadin-password-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-password-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-password-field input:-webkit-autofill,\n\tvaadin-password-field input:-webkit-autofill::first-line,\n\tvaadin-password-field input:-webkit-autofill:hover,\n\tvaadin-password-field input:-webkit-autofill:active,\n\tvaadin-password-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${d.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${d.cssVarList.height}) var(${d.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-password-field > label,\n\tvaadin-password-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${d.cssVarList.color});\n\t}\n\tvaadin-password-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-password-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${d.cssVarList.color});\n\t}\n\tvaadin-password-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const l=d;customElements.define(r,l)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[320],{1721:(t,n,a)=>{a.r(n),a.d(n,{PasswordField:()=>l}),a(7056);var i=a(6860),e=a(4447),s=a(2061);const r=(0,a(4567).iY)("password-field");let o="";const d=(0,s.qC)((0,i.yk)({mappings:{...e.Z,revealCursor:[{selector:"::part(reveal-button)::before",property:"cursor"}]}}),i.e4,i.dj,i.Ae)((0,i.DM)({slots:["suffix"],wrappedEleName:"vaadin-password-field",style:()=>o,excludeAttrsSync:["tabindex"],componentName:r}));o=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\tvaadin-password-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\tvaadin-password-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-password-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-password-field input:-webkit-autofill,\n\tvaadin-password-field input:-webkit-autofill::first-line,\n\tvaadin-password-field input:-webkit-autofill:hover,\n\tvaadin-password-field input:-webkit-autofill:active,\n\tvaadin-password-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${d.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${d.cssVarList.height}) var(${d.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-password-field > label,\n\tvaadin-password-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${d.cssVarList.color});\n\t}\n\tvaadin-password-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-password-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${d.cssVarList.color});\n\t}\n\tvaadin-password-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const l=d;customElements.define(r,l)}}]);

package/dist/umd/descope-switch-toggle-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[739],{3774:(t,n,e)=>{e.r(n),e.d(n,{SwitchToggle:()=>s}),e(9515);var a=e(9725),i=e(2061);const o=(0,e(4567).iY)("switch-toggle");let r="";const c=(0,i.qC)((0,a.yk)({mappings:{width:{selector:()=>":host"},cursor:[{},{selector:"> label"}]}}),a.e4,a.dj,a.Ae)((0,a.DM)({slots:[],wrappedEleName:"vaadin-checkbox",style:()=>r,excludeAttrsSync:["tabindex"],componentName:o}));r=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\t\n\t:host {\n\t\t--margin: 7px;\n\t\t--width: var(${c.cssVarList.width});\n\t\t--height: calc(var(--width) / 2);\n\t\t--radius: var(--height);\n\t\t--knobSize: calc(var(--height) - 5px);\n\t\t--bgColor: #fff;\n\t\t--knobBgColor: #000;\n\t}\n\tvaadin-checkbox : {\n\t\twidth: 100%;\n\t}\n\tvaadin-checkbox>label {\n\t\tcursor: pointer;\n\t\tborder: 1px solid;\n\t\ttext-indent: -99999px;\n\t\tdisplay: block;\n\t\tposition: relative;\t\t\t\n\t\twidth: var(--width);\n\t\theight: var(--height);\n\t\tbackground: var(--bgColor);\n\t\tborder-radius: var(--radius);\n\t}\n\tvaadin-checkbox>label::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttransition: 0.3s;\n\t\ttop: var(--margin);\n\t\tleft: var(--margin);\n\t\twidth: var(--knobSize);\n\t\theight: var(--knobSize);\n\t\tbackground: var(--knobBgColor);\n\t\tborder-radius: var(--knobSize);\n\t}\n\tvaadin-checkbox::part(checkbox) {\n\t\theight: 0;\n\t\twidth: 0;\n\t\tvisibility: hidden;\n\t\tmargin: 0;\n\t}\n\tvaadin-checkbox[checked]>label::after {\n\t\ttransform: translateX(-100%);\n\t\tleft: calc(100% - var(--margin));\n\t}\n\tvaadin-checkbox[active]>label::after {\n\t\twidth: calc(var(--knobSize) + 15px);\n\t}\n`;const s=c;customElements.define(o,s)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[739],{3774:(t,n,e)=>{e.r(n),e.d(n,{SwitchToggle:()=>s}),e(9515);var a=e(6860),i=e(2061);const o=(0,e(4567).iY)("switch-toggle");let r="";const c=(0,i.qC)((0,a.yk)({mappings:{width:{selector:()=>":host"},cursor:[{},{selector:"> label"}]}}),a.e4,a.dj,a.Ae)((0,a.DM)({slots:[],wrappedEleName:"vaadin-checkbox",style:()=>r,excludeAttrsSync:["tabindex"],componentName:o}));r=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\t\n\t:host {\n\t\t--margin: 7px;\n\t\t--width: var(${c.cssVarList.width});\n\t\t--height: calc(var(--width) / 2);\n\t\t--radius: var(--height);\n\t\t--knobSize: calc(var(--height) - 5px);\n\t\t--bgColor: #fff;\n\t\t--knobBgColor: #000;\n\t}\n\tvaadin-checkbox : {\n\t\twidth: 100%;\n\t}\n\tvaadin-checkbox>label {\n\t\tcursor: pointer;\n\t\tborder: 1px solid;\n\t\ttext-indent: -99999px;\n\t\tdisplay: block;\n\t\tposition: relative;\t\t\t\n\t\twidth: var(--width);\n\t\theight: var(--height);\n\t\tbackground: var(--bgColor);\n\t\tborder-radius: var(--radius);\n\t}\n\tvaadin-checkbox>label::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttransition: 0.3s;\n\t\ttop: var(--margin);\n\t\tleft: var(--margin);\n\t\twidth: var(--knobSize);\n\t\theight: var(--knobSize);\n\t\tbackground: var(--knobBgColor);\n\t\tborder-radius: var(--knobSize);\n\t}\n\tvaadin-checkbox::part(checkbox) {\n\t\theight: 0;\n\t\twidth: 0;\n\t\tvisibility: hidden;\n\t\tmargin: 0;\n\t}\n\tvaadin-checkbox[checked]>label::after {\n\t\ttransform: translateX(-100%);\n\t\tleft: calc(100% - var(--margin));\n\t}\n\tvaadin-checkbox[active]>label::after {\n\t\twidth: calc(var(--knobSize) + 15px);\n\t}\n`;const s=c;customElements.define(o,s)}}]);

package/dist/umd/descope-text-area-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[322],{178:(t,e,n)=>{n.r(e),n.d(e,{TextArea:()=>c}),n(7101);var r=n(9725),a=n(2061);const o=(0,n(4567).iY)("text-area"),i={label:"::part(label)",input:"::part(input-field)",required:"::part(required-indicator)::after",host:()=>":host"};let s="";const l=(0,a.qC)((0,r.yk)({mappings:{resize:{selector:"> textarea"},color:{selector:i.label},cursor:{},width:{selector:i.host},backgroundColor:{selector:i.input},borderWidth:{selector:i.input},borderStyle:{selector:i.input},borderColor:{selector:i.input},borderRadius:{selector:i.input},outline:{selector:i.input},outlineOffset:{selector:i.input}}}),r.e4,r.dj,r.Ae)((0,r.DM)({slots:[],wrappedEleName:"vaadin-text-area",style:()=>s,excludeAttrsSync:["tabindex"],componentName:o}));s='\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\tvaadin-text-area {\n\t\tmargin: 0;\n\t\twidth: 100%;\n\t}\n\tvaadin-text-area > label,\n\tvaadin-text-area::part(input-field) {\n\t\tcursor: pointer;\n\t}\n\tvaadin-text-area[focused]::part(input-field) {\n\t\tcursor: text;\n\t}\n\tvaadin-text-area::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t}\t\n';const c=l;customElements.define(o,c)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[322],{178:(t,e,n)=>{n.r(e),n.d(e,{TextArea:()=>c}),n(7101);var r=n(6860),a=n(2061);const o=(0,n(4567).iY)("text-area"),i={label:"::part(label)",input:"::part(input-field)",required:"::part(required-indicator)::after",host:()=>":host"};let s="";const l=(0,a.qC)((0,r.yk)({mappings:{resize:{selector:"> textarea"},color:{selector:i.label},cursor:{},width:{selector:i.host},backgroundColor:{selector:i.input},borderWidth:{selector:i.input},borderStyle:{selector:i.input},borderColor:{selector:i.input},borderRadius:{selector:i.input},outline:{selector:i.input},outlineOffset:{selector:i.input}}}),r.e4,r.dj,r.Ae)((0,r.DM)({slots:[],wrappedEleName:"vaadin-text-area",style:()=>s,excludeAttrsSync:["tabindex"],componentName:o}));s='\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\tvaadin-text-area {\n\t\tmargin: 0;\n\t\twidth: 100%;\n\t}\n\tvaadin-text-area > label,\n\tvaadin-text-area::part(input-field) {\n\t\tcursor: pointer;\n\t}\n\tvaadin-text-area[focused]::part(input-field) {\n\t\tcursor: text;\n\t}\n\tvaadin-text-area::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t}\t\n';const c=l;customElements.define(o,c)}}]);

package/dist/umd/descope-text-field-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[934],{9063:(t,e,n)=>{n.d(e,{Z:()=>s,f:()=>d});var i=n(9725),a=n(4447),l=n(2061);const d=(0,n(4567).iY)("text-field");let o="";const r=(0,l.qC)((0,i.yk)({mappings:a.Z}),i.e4,i.dj,i.Ae)((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>o,excludeAttrsSync:["tabindex"],componentName:d}));o=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-text-field input:-webkit-autofill,\n\tvaadin-text-field input:-webkit-autofill::first-line,\n\tvaadin-text-field input:-webkit-autofill:hover,\n\tvaadin-text-field input:-webkit-autofill:active,\n\tvaadin-text-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${r.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${r.cssVarList.height}) var(${r.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-text-field > label,\n\tvaadin-text-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${r.cssVarList.color});\n\t}\n\tvaadin-text-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${r.cssVarList.color});\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const s=r},9357:(t,e,n)=>{n.r(e),n.d(e,{TextField:()=>i.Z}),n(9789);var i=n(9063);customElements.define(i.f,i.Z)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[934],{9063:(t,e,n)=>{n.d(e,{Z:()=>s,f:()=>d});var i=n(6860),a=n(4447),l=n(2061);const d=(0,n(4567).iY)("text-field");let o="";const r=(0,l.qC)((0,i.yk)({mappings:a.Z}),i.e4,i.dj,i.Ae)((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>o,excludeAttrsSync:["tabindex"],componentName:d}));o=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-text-field input:-webkit-autofill,\n\tvaadin-text-field input:-webkit-autofill::first-line,\n\tvaadin-text-field input:-webkit-autofill:hover,\n\tvaadin-text-field input:-webkit-autofill:active,\n\tvaadin-text-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${r.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${r.cssVarList.height}) var(${r.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-text-field > label,\n\tvaadin-text-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${r.cssVarList.color});\n\t}\n\tvaadin-text-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${r.cssVarList.color});\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const s=r},9357:(t,e,n)=>{n.r(e),n.d(e,{TextField:()=>i.Z}),n(9789);var i=n(9063);customElements.define(i.f,i.Z)}}]);

package/dist/umd/descope-text-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[528],{8801:(t,e,n)=>{n.d(e,{Z:()=>r,f:()=>i});var o=n(9725),s=n(9989),l=n(2061);const i=(0,n(4567).iY)("text");class c extends s.V{static get componentName(){return i}constructor(){super();const t=document.createElement("template");t.innerHTML="\n\t\t<style>\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t\t:host > slot {\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t</style>\n\t\t<slot></slot>\n\t\t",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > slot"}}const r=(0,l.qC)((0,o.yk)({mappings:{fontFamily:{},lineHeight:{},fontStyle:{},fontSize:{},fontWeight:{},width:{selector:()=>":host"},color:{},letterSpacing:{},textShadow:{},borderWidth:{},borderStyle:{},borderColor:{},textTransform:{},textAlign:{}}}),o.e4,o.Ae)(c)},1876:(t,e,n)=>{n.r(e),n.d(e,{Text:()=>o.Z});var o=n(8801);customElements.define(o.f,o.Z)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[528],{8801:(t,e,n)=>{n.d(e,{Z:()=>r,f:()=>i});var o=n(6860),s=n(9989),l=n(2061);const i=(0,n(4567).iY)("text");class c extends s.V{static get componentName(){return i}constructor(){super();const t=document.createElement("template");t.innerHTML="\n\t\t<style>\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t\t:host > slot {\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t</style>\n\t\t<slot></slot>\n\t\t",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > slot"}}const r=(0,l.qC)((0,o.yk)({mappings:{fontFamily:{},lineHeight:{},fontStyle:{},fontSize:{},fontWeight:{},width:{selector:()=>":host"},color:{},letterSpacing:{},textShadow:{},borderWidth:{},borderStyle:{},borderColor:{},textTransform:{},textAlign:{}}}),o.e4,o.Ae)(c)},1876:(t,e,n)=>{n.r(e),n.d(e,{Text:()=>o.Z});var o=n(8801);customElements.define(o.f,o.Z)}}]);

package/dist/umd/index.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.DescopeUI=t():e.DescopeUI=t()}(self,(()=>(()=>{var e,t,r,o={534:(e,t,r)=>{var o={"./descope-button/index.js":[3029,840,767,211,513,729,725,662],"./descope-checkbox/index.js":[7904,840,786,208,767,515,725,761],"./descope-container/index.js":[147,725,317],"./descope-date-picker/index.js":[2552,840,786,208,233,767,211,513,54,725,17],"./descope-divider/index.js":[6446,725,528,178],"./descope-email-field/index.js":[689,840,786,208,233,422,666,437,725,447,760],"./descope-link/index.js":[8029,725,528,58],"./descope-loader-linear/index.js":[9929,725,453],"./descope-loader-radial/index.js":[7603,725,72],"./descope-logo/index.js":[4641,725,984],"./descope-number-field/index.js":[4951,840,786,208,233,422,806,725,447,142],"./descope-passcode/descope-passcode-internal/index.js":[4775,725,841],"./descope-passcode/index.js":[7102,840,786,208,233,422,666,789,725,447,841,934,939],"./descope-password-field/index.js":[1721,840,786,208,233,422,767,666,211,56,725,447,320],"./descope-switch-toggle/index.js":[3774,840,786,208,767,515,725,739],"./descope-text-area/index.js":[178,840,786,233,422,101,725,322],"./descope-text-field/index.js":[9357,840,786,208,233,422,666,789,725,447,934],"./descope-text/index.js":[1876,725,528]};function s(e){if(!r.o(o,e))return Promise.resolve().then((()=>{var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=o[e],s=t[0];return Promise.all(t.slice(1).map(r.e)).then((()=>r(s)))}s.keys=()=>Object.keys(o),s.id=534,e.exports=s},5561:(e,t,r)=>{"use strict";r.r(t),r.d(t,{componentsThemeManager:()=>o});const o=new class{static mountOnPropName="DescopeThemeManager";#e={};#t="light";#r=new Set;#o(){this.#r.forEach((e=>e?.()))}get currentThemeName(){return this.#t}set currentThemeName(e){this.#t=e,this.#o()}get currentTheme(){return this.#e[this.currentThemeName]}onCurrentThemeChange(e){return this.#r.add(e),()=>{this.#r.delete(e)}}set themes(e){this.#e=e,this.#o()}}},7507:(e,t,r)=>{const{componentsThemeManager:o}=r(5561),s=r(534);e.exports=s.keys().reduce(((e,t)=>(e[t.replace(/.*?([^\/]+)\/index\.js$/,"$1")]=()=>s(t),e)),{}),e.exports.componentsThemeManager=o}},s={};function n(e){var t=s[e];if(void 0!==t)return t.exports;var r=s[e]={exports:{}};return o[e](r,r.exports,n),r.exports}n.m=o,e=[],n.O=(t,r,o,s)=>{if(!r){var i=1/0;for(p=0;p<e.length;p++){for(var[r,o,s]=e[p],d=!0,c=0;c<r.length;c++)(!1&s||i>=s)&&Object.keys(n.O).every((e=>n.O[e](r[c])))?r.splice(c--,1):(d=!1,s<i&&(i=s));if(d){e.splice(p--,1);var a=o();void 0!==a&&(t=a)}}return t}s=s||0;for(var p=e.length;p>0&&e[p-1][2]>s;p--)e[p]=e[p-1];e[p]=[r,o,s]},n.F={},n.E=e=>{Object.keys(n.F).map((t=>{n.F[t](e)}))},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce(((t,r)=>(n.f[r](e,t),t)),[])),n.u=e=>(({17:"descope-date-picker-index-js",58:"descope-link-index-js",72:"descope-loader-radial-index-js",142:"descope-number-field-index-js",178:"descope-divider-index-js",317:"descope-container-index-js",320:"descope-password-field-index-js",322:"descope-text-area-index-js",453:"descope-loader-linear-index-js",528:"descope-text-index-js",662:"descope-button-index-js",739:"descope-switch-toggle-index-js",760:"descope-email-field-index-js",761:"descope-checkbox-index-js",841:"descope-passcode-descope-passcode-internal-index-js",934:"descope-text-field-index-js",939:"descope-passcode-index-js",984:"descope-logo-index-js"}[e]||e)+".js"),n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),t={},r="DescopeUI:",n.l=(e,o,s,i)=>{if(t[e])t[e].push(o);else{var d,c;if(void 0!==s)for(var a=document.getElementsByTagName("script"),p=0;p<a.length;p++){var l=a[p];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==r+s){d=l;break}}d||(c=!0,(d=document.createElement("script")).charset="utf-8",d.timeout=120,n.nc&&d.setAttribute("nonce",n.nc),d.setAttribute("data-webpack",r+s),d.src=e),t[e]=[o];var u=(r,o)=>{d.onerror=d.onload=null,clearTimeout(h);var s=t[e];if(delete t[e],d.parentNode&&d.parentNode.removeChild(d),s&&s.forEach((e=>e(o))),r)return r(o)},h=setTimeout(u.bind(null,void 0,{type:"timeout",target:d}),12e4);d.onerror=u.bind(null,d.onerror),d.onload=u.bind(null,d.onload),c&&document.head.appendChild(d)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;n.g.importScripts&&(e=n.g.location+"");var t=n.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");r.length&&(e=r[r.length-1].src)}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})(),(()=>{var e={826:0};n.f.j=(t,r)=>{var o=n.o(e,t)?e[t]:void 0;if(0!==o)if(o)r.push(o[2]);else{var s=new Promise(((r,s)=>o=e[t]=[r,s]));r.push(o[2]=s);var i=n.p+n.u(t),d=new Error;n.l(i,(r=>{if(n.o(e,t)&&(0!==(o=e[t])&&(e[t]=void 0),o)){var s=r&&("load"===r.type?"missing":r.type),i=r&&r.target&&r.target.src;d.message="Loading chunk "+t+" failed.\n("+s+": "+i+")",d.name="ChunkLoadError",d.type=s,d.request=i,o[1](d)}}),"chunk-"+t,t)}},n.F.j=t=>{if(!n.o(e,t)||void 0===e[t]){e[t]=null;var r=document.createElement("link");n.nc&&r.setAttribute("nonce",n.nc),r.rel="prefetch",r.as="script",r.href=n.p+n.u(t),document.head.appendChild(r)}},n.O.j=t=>0===e[t];var t=(t,r)=>{var o,s,[i,d,c]=r,a=0;if(i.some((t=>0!==e[t]))){for(o in d)n.o(d,o)&&(n.m[o]=d[o]);if(c)var p=c(n)}for(t&&t(r);a<i.length;a++)s=i[a],n.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return n.O(p)},r=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})(),n.O(0,[826],(()=>{[840,767,211,513,729,725,662,786,208,515,761,317,233,54,17,528,178,422,666,437,447,760,58,453,72,984,806,142,841,789,934,939,56,320,739,101,322].map(n.E)}),5);var i=n(7507);return n.O(i)})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.DescopeUI=t():e.DescopeUI=t()}(self,(()=>(()=>{var e,t,o,r={534:(e,t,o)=>{var r={"./descope-button/index.js":[3029,840,767,211,513,729,860,662],"./descope-checkbox/index.js":[7904,840,786,208,767,515,860,761],"./descope-combo-box/index.js":[9258,840,786,208,233,824,314,860,483],"./descope-container/index.js":[147,860,317],"./descope-date-picker/index.js":[2552,840,786,208,233,767,211,824,513,541,860,17],"./descope-divider/index.js":[6446,860,528,178],"./descope-email-field/index.js":[689,840,786,208,233,422,725,437,860,447,760],"./descope-link/index.js":[8029,860,528,58],"./descope-loader-linear/index.js":[9929,860,453],"./descope-loader-radial/index.js":[7603,860,72],"./descope-logo/index.js":[4641,860,984],"./descope-number-field/index.js":[4951,840,786,208,233,422,806,860,447,142],"./descope-passcode/descope-passcode-internal/index.js":[4775,860,841],"./descope-passcode/index.js":[7102,840,786,208,233,422,725,789,860,447,841,934,939],"./descope-password-field/index.js":[1721,840,786,208,233,422,767,725,211,56,860,447,320],"./descope-switch-toggle/index.js":[3774,840,786,208,767,515,860,739],"./descope-text-area/index.js":[178,840,786,233,422,101,860,322],"./descope-text-field/index.js":[9357,840,786,208,233,422,725,789,860,447,934],"./descope-text/index.js":[1876,860,528]};function s(e){if(!o.o(r,e))return Promise.resolve().then((()=>{var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=r[e],s=t[0];return Promise.all(t.slice(1).map(o.e)).then((()=>o(s)))}s.keys=()=>Object.keys(r),s.id=534,e.exports=s},5561:(e,t,o)=>{"use strict";o.r(t),o.d(t,{componentsThemeManager:()=>r});const r=new class{static mountOnPropName="DescopeThemeManager";#e={};#t="light";#o=new Set;#r(){this.#o.forEach((e=>e?.()))}get currentThemeName(){return this.#t}set currentThemeName(e){this.#t=e,this.#r()}get currentTheme(){return this.#e[this.currentThemeName]}onCurrentThemeChange(e){return this.#o.add(e),()=>{this.#o.delete(e)}}set themes(e){this.#e=e,this.#r()}}},7507:(e,t,o)=>{const{componentsThemeManager:r}=o(5561),s=o(534);e.exports=s.keys().reduce(((e,t)=>(e[t.replace(/.*?([^\/]+)\/index\.js$/,"$1")]=()=>s(t),e)),{}),e.exports.componentsThemeManager=r}},s={};function n(e){var t=s[e];if(void 0!==t)return t.exports;var o=s[e]={exports:{}};return r[e](o,o.exports,n),o.exports}n.m=r,e=[],n.O=(t,o,r,s)=>{if(!o){var i=1/0;for(p=0;p<e.length;p++){for(var[o,r,s]=e[p],d=!0,c=0;c<o.length;c++)(!1&s||i>=s)&&Object.keys(n.O).every((e=>n.O[e](o[c])))?o.splice(c--,1):(d=!1,s<i&&(i=s));if(d){e.splice(p--,1);var a=r();void 0!==a&&(t=a)}}return t}s=s||0;for(var p=e.length;p>0&&e[p-1][2]>s;p--)e[p]=e[p-1];e[p]=[o,r,s]},n.F={},n.E=e=>{Object.keys(n.F).map((t=>{n.F[t](e)}))},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce(((t,o)=>(n.f[o](e,t),t)),[])),n.u=e=>(({17:"descope-date-picker-index-js",58:"descope-link-index-js",72:"descope-loader-radial-index-js",142:"descope-number-field-index-js",178:"descope-divider-index-js",317:"descope-container-index-js",320:"descope-password-field-index-js",322:"descope-text-area-index-js",453:"descope-loader-linear-index-js",483:"descope-combo-box-index-js",528:"descope-text-index-js",662:"descope-button-index-js",739:"descope-switch-toggle-index-js",760:"descope-email-field-index-js",761:"descope-checkbox-index-js",841:"descope-passcode-descope-passcode-internal-index-js",934:"descope-text-field-index-js",939:"descope-passcode-index-js",984:"descope-logo-index-js"}[e]||e)+".js"),n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),t={},o="DescopeUI:",n.l=(e,r,s,i)=>{if(t[e])t[e].push(r);else{var d,c;if(void 0!==s)for(var a=document.getElementsByTagName("script"),p=0;p<a.length;p++){var l=a[p];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==o+s){d=l;break}}d||(c=!0,(d=document.createElement("script")).charset="utf-8",d.timeout=120,n.nc&&d.setAttribute("nonce",n.nc),d.setAttribute("data-webpack",o+s),d.src=e),t[e]=[r];var u=(o,r)=>{d.onerror=d.onload=null,clearTimeout(m);var s=t[e];if(delete t[e],d.parentNode&&d.parentNode.removeChild(d),s&&s.forEach((e=>e(r))),o)return o(r)},m=setTimeout(u.bind(null,void 0,{type:"timeout",target:d}),12e4);d.onerror=u.bind(null,d.onerror),d.onload=u.bind(null,d.onload),c&&document.head.appendChild(d)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;n.g.importScripts&&(e=n.g.location+"");var t=n.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var o=t.getElementsByTagName("script");o.length&&(e=o[o.length-1].src)}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})(),(()=>{var e={826:0};n.f.j=(t,o)=>{var r=n.o(e,t)?e[t]:void 0;if(0!==r)if(r)o.push(r[2]);else{var s=new Promise(((o,s)=>r=e[t]=[o,s]));o.push(r[2]=s);var i=n.p+n.u(t),d=new Error;n.l(i,(o=>{if(n.o(e,t)&&(0!==(r=e[t])&&(e[t]=void 0),r)){var s=o&&("load"===o.type?"missing":o.type),i=o&&o.target&&o.target.src;d.message="Loading chunk "+t+" failed.\n("+s+": "+i+")",d.name="ChunkLoadError",d.type=s,d.request=i,r[1](d)}}),"chunk-"+t,t)}},n.F.j=t=>{if(!n.o(e,t)||void 0===e[t]){e[t]=null;var o=document.createElement("link");n.nc&&o.setAttribute("nonce",n.nc),o.rel="prefetch",o.as="script",o.href=n.p+n.u(t),document.head.appendChild(o)}},n.O.j=t=>0===e[t];var t=(t,o)=>{var r,s,[i,d,c]=o,a=0;if(i.some((t=>0!==e[t]))){for(r in d)n.o(d,r)&&(n.m[r]=d[r]);if(c)var p=c(n)}for(t&&t(o);a<i.length;a++)s=i[a],n.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return n.O(p)},o=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];o.forEach(t.bind(null,0)),o.push=t.bind(null,o.push.bind(o))})(),n.O(0,[826],(()=>{[840,767,211,513,729,860,662,786,208,515,761,233,824,314,483,317,541,17,528,178,422,725,437,447,760,58,453,72,984,806,142,841,789,934,939,56,320,739,101,322].map(n.E)}),5);var i=n(7507);return n.O(i)})()));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/web-components-ui",
-	"version": "1.0.64",
+	"version": "1.0.66",
 	"description": "",
 	"main": "dist/cjs/index.cjs.js",
 	"module": "dist/index.esm.js",
@@ -38,6 +38,7 @@
 	"dependencies": {
 		"@vaadin/button": "24.0.4",
 		"@vaadin/checkbox": "24.0.4",
+		"@vaadin/combo-box": "24.0.4",
 		"@vaadin/date-picker": "24.0.4",
 		"@vaadin/email-field": "24.0.4",
 		"@vaadin/number-field": "24.0.4",

package/src/components/descope-combo-box/ComboBox.js

@@ -0,0 +1,111 @@
+import { compose } from '../../helpers';
+import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
+import {
+	createStyleMixin,
+	draggableMixin,
+	createProxy,
+	componentNameValidationMixin,
+	portalMixin,
+	proxyInputMixin
+} from '../../mixins';
+
+export const componentName = getComponentName('combo-box');
+
+const selectors = {
+	input: { selector: '::part(input-field)' },
+	toggle: { selector: '::part(toggle-button)' }
+};
+
+const { input, toggle } = selectors;
+
+const borderRadius = {
+	topRightRadius: {
+		selector: input.selector,
+		property: 'border-top-right-radius'
+	},
+	bottomRightRadius: {
+		selector: input.selector,
+		property: 'border-bottom-right-radius'
+	},
+	topLeftRadius: {
+		selector: input.selector,
+		property: 'border-top-left-radius'
+	},
+	bottomLeftRadius: {
+		selector: input.selector,
+		property: 'border-bottom-left-radius'
+	}
+};
+
+const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclass {
+
+	// vaadin api is to set props on their combo box node, 
+	// in order to avoid it, we are passing the children of this component
+	// to the items & renderer props, so it will be used as the combo box items
+	#onChildrenChange() {
+		const baseElement = this.shadowRoot.querySelector(this.baseSelector)
+		const items = Array.from(this.children)
+
+		// we want the data-name attribute to be accessible as an object attribute
+		baseElement.items = items.map((node) =>
+			Object.defineProperty(node, 'data-name', {
+				value: node.getAttribute('data-name')
+			})
+		);
+
+		baseElement.renderer = (root, combo, model) => {
+			root.innerHTML = items[model.index].outerHTML;
+		};
+	}
+
+	connectedCallback() {
+		super.connectedCallback?.()
+
+		observeChildren(this, this.#onChildrenChange.bind(this))
+	}
+}
+
+const ComboBox = compose(
+	createStyleMixin({
+		mappings: {
+			...borderRadius,
+			backgroundColor: input,
+			width: input,
+			color: input,
+			padding: input,
+			borderColor: input,
+			borderStyle: input,
+			borderWidth: input,
+			cursor: toggle,
+			height: input,
+		}
+	}),
+	draggableMixin,
+	portalMixin({
+		name: 'overlay',
+		selector: 'vaadin-combo-box-scroller',
+		mappings: {
+			border: { selector: () => '::slotted(*)' },
+			backgroundColor: {},
+		}
+	}),
+	proxyInputMixin,
+	componentNameValidationMixin,
+	ComboBoxMixin
+)(
+	createProxy({
+		slots: ['prefix'],
+		wrappedEleName: 'vaadin-combo-box',
+		style: () => `
+		:host {
+			-webkit-mask-image: none;
+		}
+		`,
+		excludeAttrsSync: ['tabindex'],
+		includeAttrsSync: [],
+		componentName,
+		includeForwardProps: ['items', 'renderer']
+	})
+);
+
+export default ComboBox;

package/src/components/descope-combo-box/index.js

@@ -0,0 +1,6 @@
+import '@vaadin/combo-box';
+import ComboBox, { componentName } from './ComboBox';
+
+customElements.define(componentName, ComboBox);
+
+export { ComboBox };

package/src/components/descope-passcode/Passcode.js

@@ -88,6 +88,7 @@ const Passcode = compose(
       --vaadin-field-default-width: auto;
 			display: inline-block;
     }
+
     descope-passcode-internal {
       -webkit-mask-image: none;
       display: flex;

package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js

@@ -10,7 +10,8 @@ class PasscodeInternal extends BaseInputClass {
 			...BaseInputClass.observedAttributes,
 			'disabled',
 			'bordered',
-			'size'
+			'size',
+			'readonly'
 		];
 	}
 
@@ -53,7 +54,7 @@ class PasscodeInternal extends BaseInputClass {
 	}
 
 	set value(val) {
-		if(val === this.value) return;
+		if (val === this.value) return;
 
 		const charArr = getSanitizedCharacters(val);
 
@@ -96,6 +97,7 @@ class PasscodeInternal extends BaseInputClass {
 
 	async connectedCallback() {
 		super.connectedCallback();
+
 		this.initInputs()
 
 		this.addEventListener('invalid', this.handleInputsInvalid)
@@ -140,7 +142,8 @@ class PasscodeInternal extends BaseInputClass {
 			// in order to simulate blur on the input
 			// we are checking if focus on one of the digits happened immediately after blur on another digit
 			// if not, the component is no longer focused and we should simulate blur
-			input.addEventListener('blur', () => {
+			input.addEventListener('blur', (e) => {
+				e.stopPropagation()
 				const timerId = setTimeout(() => {
 					this.dispatchBlur()
 				});
@@ -150,7 +153,8 @@ class PasscodeInternal extends BaseInputClass {
 				);
 			})
 
-			input.oninput = () => {
+			input.oninput = (e) => {
+				e.stopPropagation()
 				const charArr = getSanitizedCharacters(input.value);
 
 				if (!charArr.length) input.value = ''; // if we got an invalid value we want to clear the input
@@ -169,7 +173,7 @@ class PasscodeInternal extends BaseInputClass {
 					!prevInput.hasAttribute('focused') && setTimeout(() => {
 						focusElement(prevInput);
 					});
-					
+
 					this.dispatchInput()
 				} else if (key.match(/^(\d)$/g)) { // if input is a digit
 					input.value = ''; // we are clearing the previous value so we can override it with the new value

package/src/constants.js

@@ -1,2 +1,4 @@
 export const DESCOPE_PREFIX = 'descope';
-export const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3
+export const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3
+export const BASE_THEME_SECTION = 'host'
+export const PORTAL_THEME_PREFIX = '@'

package/src/helpers/componentHelpers.js

@@ -1,21 +1,20 @@
 import { kebabCaseJoin } from '.';
 import { DESCOPE_PREFIX } from '../constants';
 
-const observeAttributes = (
+export const observeAttributes = (
 	ele,
 	callback,
 	{ excludeAttrs = [], includeAttrs = [] }
 ) => {
 	// sync all attrs on init
-	callback(
-		...Array.from(ele.attributes)
-			.filter(
-				(attr) =>
-					!excludeAttrs.includes(attr.name) &&
-					(!includeAttrs.length || includeAttrs.includes(attr.name))
-			)
-			.map((attr) => attr.name)
-	);
+	const filteredAttrs = Array.from(ele.attributes)
+		.filter((attr) =>
+			!excludeAttrs.includes(attr.name) &&
+			(!includeAttrs.length || includeAttrs.includes(attr.name))
+		)
+		.map((attr) => attr.name)
+
+	callback(filteredAttrs);
 
 	const observer = new MutationObserver((mutationsList) => {
 		for (const mutation of mutationsList) {
@@ -32,21 +31,39 @@ const observeAttributes = (
 	observer.observe(ele, { attributes: true });
 };
 
+// calling the callback with this object: { addedNodes, removedNodes }
+export const observeChildren = (
+	ele,
+	callback,
+) => {
+	callback({ addedNodes: Array.from(ele.children), removedNodes: [] });
+
+	const observer = new MutationObserver((mutationsList) => {
+		for (const mutation of mutationsList) {
+			if (mutation.type === 'childList') {
+				callback(mutation);
+			}
+		}
+	});
+
+	observer.observe(ele, { childList: true });
+};
+
 const createSyncAttrsCb =
 	(srcEle, targetEle, mapAttrs = {}) =>
-	(...attrNames) => {
-		attrNames.forEach((attrName) => {
-			const targetAttrName = mapAttrs[attrName] || attrName;
-			const srcAttrVal = srcEle.getAttribute(attrName);
-			if (srcAttrVal !== null) {
-				if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
-					targetEle.setAttribute(targetAttrName, srcAttrVal);
+		(attrNames) => {
+			attrNames.forEach((attrName) => {
+				const targetAttrName = mapAttrs[attrName] || attrName;
+				const srcAttrVal = srcEle.getAttribute(attrName);
+				if (srcAttrVal !== null) {
+					if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
+						targetEle.setAttribute(targetAttrName, srcAttrVal);
+					}
+				} else {
+					targetEle.removeAttribute(targetAttrName);
 				}
-			} else {
-				targetEle.removeAttribute(targetAttrName);
-			}
-		});
-	};
+			});
+		};
 
 export const syncAttrs = (ele1, ele2, options) => {
 	observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
@@ -56,27 +73,29 @@ export const syncAttrs = (ele1, ele2, options) => {
 export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 
 export const getCssVarName = (...args) =>
-  `--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;
+	`--${kebabCaseJoin(...args)}`;
 
 export const forwardAttrs = (source, dest, options = {}) => {
-  observeAttributes(
-    source,
-    createSyncAttrsCb(source, dest, options.mapAttrs),
-    options
-  );
+	observeAttributes(
+		source,
+		createSyncAttrsCb(source, dest, options.mapAttrs),
+		options
+	);
 };
 
 export const forwardProps = (src, target, props = []) => {
-	if(!props.length) return;
+	if (!props.length) return;
 
-	const config = props.reduce((acc, prop) => Object.assign(acc, {[prop] : {
-		get () {
-			return target[prop]
-		},
-		set (v) {
-			target[prop] = v
+	const config = props.reduce((acc, prop) => Object.assign(acc, {
+		[prop]: {
+			get() {
+				return target[prop]
+			},
+			set(v) {
+				target[prop] = v
+			}
 		}
-	}}), {})
+	}), {})
 
 	Object.defineProperties(src, config)
 }

package/src/helpers/index.js

@@ -5,9 +5,10 @@ export const kebabCase = (str) =>
 		.replace(/[\s_.]+/g, '-')
 		.toLowerCase();
 
-export const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
+export const kebabCaseJoin = (...args) => kebabCase(args.filter((arg) => !!arg).join('-'));
 
 export const compose = (...fns) =>
 	(val) =>
 		fns.reduceRight((res, fn) => fn(res), val);
 
+export const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1)

package/src/helpers/themeHelpers/index.js

@@ -1,6 +1,6 @@
 import merge from 'lodash.merge';
 import set from 'lodash.set';
-import { DESCOPE_PREFIX } from '../../constants';
+import { BASE_THEME_SECTION, DESCOPE_PREFIX, PORTAL_THEME_PREFIX } from '../../constants';
 import { kebabCase } from '..';
 import { getComponentName, getCssVarName } from '../componentHelpers';
 
@@ -48,9 +48,9 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 		// this allows us to generate those themes under different sections
 		// if the theme has root level attribute that starts with #
 		// we are generating a new theme
-		let themeName = 'theme'
+		let themeName = BASE_THEME_SECTION
 
-		if (restPath[0] && restPath[0].startsWith('#')) {
+		if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
 			themeName = restPath.shift();
 		}