@descope/web-components-ui 1.0.96 → 1.0.98

package/dist/umd/447.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[447],{4447:(e,r,t)=>{t.d(r,{Z:()=>o});const p={label:"::part(label)",inputWrapper:"::part(input-field)",readOnlyInput:"[readonly]::part(input-field)::after",placeholder:"> input:placeholder-shown",host:()=>":host",input:"input"},o={backgroundColor:{selector:p.inputWrapper},color:{selector:p.inputWrapper},width:{selector:p.host},borderColor:[{selector:p.inputWrapper},{selector:p.readOnlyInput}],borderWidth:[{selector:p.inputWrapper},{selector:p.readOnlyInput}],borderStyle:[{selector:p.inputWrapper},{selector:p.readOnlyInput}],borderRadius:{selector:p.inputWrapper},boxShadow:{selector:p.inputWrapper},fontSize:[{},{selector:p.host}],height:{selector:p.inputWrapper},padding:{selector:p.inputWrapper},margin:{selector:p.inputWrapper},caretColor:{selector:p.input},outlineColor:{selector:p.inputWrapper},outlineStyle:{selector:p.inputWrapper},outlineWidth:{selector:p.inputWrapper},outlineOffset:{selector:p.inputWrapper},textAlign:{selector:p.input},placeholderColor:{selector:p.placeholder,property:"color"}}}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[447],{4447:(e,r,t)=>{t.d(r,{Z:()=>o});const p={label:"::part(label)",inputWrapper:"::part(input-field)",readOnlyInput:"[readonly]::part(input-field)::after",placeholder:"> input:placeholder-shown",host:()=>":host",input:"input"},o={backgroundColor:{selector:p.inputWrapper},color:{selector:p.inputWrapper},width:{selector:p.host},borderColor:[{selector:p.inputWrapper},{selector:p.readOnlyInput}],borderWidth:[{selector:p.inputWrapper},{selector:p.readOnlyInput}],borderStyle:[{selector:p.inputWrapper},{selector:p.readOnlyInput}],borderRadius:{selector:p.inputWrapper},boxShadow:{selector:p.inputWrapper},fontSize:[{},{selector:p.host}],height:{selector:p.inputWrapper},padding:{selector:p.inputWrapper},margin:{selector:p.inputWrapper},caretColor:{selector:p.input},outlineColor:{selector:p.inputWrapper},outlineStyle:{selector:p.inputWrapper},outlineWidth:[{selector:p.inputWrapper},{property:"padding"}],outlineOffset:{selector:p.inputWrapper},textAlign:{selector:p.input},placeholderColor:{selector:p.placeholder,property:"color"}}}}]);

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

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[760],{689:(t,i,e)=>{e.r(i),e.d(i,{EmailField:()=>s}),e(9437);var n=e(4988),a=e(4447),l=e(2061);const d=(0,e(4567).iY)("email-field");let o="";const r=(0,l.qC)((0,n.yk)({mappings:{...a.Z}}),n.e4,n.dj,n.Ae)((0,n.DM)({slots:["suffix"],wrappedEleName:"vaadin-email-field",style:()=>o,excludeAttrsSync:["tabindex"],componentName:d}));o=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\tvaadin-email-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%;\n\t}\n\tvaadin-email-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-email-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-email-field input:-webkit-autofill,\n\tvaadin-email-field input:-webkit-autofill::first-line,\n\tvaadin-email-field input:-webkit-autofill:hover,\n\tvaadin-email-field input:-webkit-autofill:active,\n\tvaadin-email-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-email-field > label,\n\tvaadin-email-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${r.cssVarList.color});\n\t}\n\tvaadin-email-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-email-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-email-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const s=r;customElements.define(d,s)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[760],{689:(t,i,e)=>{e.r(i),e.d(i,{EmailField:()=>s}),e(9437);var n=e(4988),a=e(4447),l=e(2061);const d=(0,e(4567).iY)("email-field");let o="";const r=(0,l.qC)((0,n.yk)({mappings:{...a.Z}}),n.e4,n.dj,n.Ae)((0,n.DM)({slots:["suffix"],wrappedEleName:"vaadin-email-field",style:()=>o,excludeAttrsSync:["tabindex"],componentName:d}));o=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\tvaadin-email-field {\n\t\tmargin: 0;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-email-field::before {\n\t\theight: 0;\n\t}\n\tvaadin-email-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-email-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-email-field input:-webkit-autofill,\n\tvaadin-email-field input:-webkit-autofill::first-line,\n\tvaadin-email-field input:-webkit-autofill:hover,\n\tvaadin-email-field input:-webkit-autofill:active,\n\tvaadin-email-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-email-field > label,\n\tvaadin-email-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${r.cssVarList.color});\n\t}\n\tvaadin-email-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-email-field[required]::part(required-indicator)::after {\n\t\tcontent: "*";\n\t\tcolor: var(${r.cssVarList.color});\n\t}\n\tvaadin-email-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const s=r;customElements.define(d,s)}}]);

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(4988),r=e(693),a=e(2061);const i=(0,e(4567).iY)("loader-linear");class s extends((0,r.s)({componentName:i,baseSelector:":host > div"})){static get componentName(){return i}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<style>\n\t\t\t@keyframes tilt {\n\t\t\t\t0% { transform: translateX(0); }\n\t\t\t\t50% { transform: translateX(400%); }\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tposition: relative;\n\t\t\t\tdisplay: inline-block\n\t\t\t}\n\t\t\tdiv::after {\n\t\t\t\tcontent: '';\n\t\t\t\tanimation-name: tilt;\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: 0;\n\t\t\t}\n\n\t\t\t:host > div {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t</style>\n\t\t<div></div>\n\t"}}const{root:c,after:l,host:d}={root:{},after:{selector:"::after"},host:{selector:()=>":host"}},p=(0,a.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(4988),r=e(693),a=e(2061);const s=(0,e(4567).iY)("loader-linear");class i extends((0,r.s)({componentName:s,baseSelector:":host > div"})){static get componentName(){return s}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<style>\n\t\t\t@keyframes tilt {\n\t\t\t\t0% { transform: translateX(0); }\n\t\t\t\t50% { transform: translateX(400%); }\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tposition: relative;\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t\tdiv::after {\n\t\t\t\tcontent: '';\n\t\t\t\tanimation-name: tilt;\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: 0;\n\t\t\t}\n\n\t\t\t:host > div {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t</style>\n\t\t<div></div>\n\t"}}const{root:c,after:l,host:d}={root:{},after:{selector:"::after"},host:{selector:()=>":host"}},p=(0,a.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)(i);customElements.define(s,p)}}]);

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(4988),r=n(4447),o=n(7361),d=n(9063),a=n(2061),l=n(4567);const p=(0,l.iY)("passcode"),{borderStyle:s,borderWidth:c,...u}=r.Z,{digitField:g,label:h,requiredIndicator:f,internalWrapper:m,focusedValidDigitField:b}={focusedValidDigitField:{selector:()=>`${d.Z.componentName}[focused="true"]:not([invalid="true"])`},digitField:{selector:()=>d.Z.componentName},label:{selector:"> label"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-passcode-internal .wrapper"}},y=d.Z.cssVarList,x=(0,a.qC)((0,i.yk)({mappings:{...u,borderColor:{...g,property:y.borderColor},outlineColor:{...g,property:y.outlineColor},outlineWidth:[{...g,property:y.outlineWidth},{...m,property:"padding"}],color:[u.color,h,f],padding:{...g,property:y.padding},margin:{...g,property:y.margin},textAlign:{...g,property:y.textAlign},caretColor:{...g,property:y.caretColor},digitsGap:{...m,property:"gap"},focusedValidDigitFieldBorderColor:{...b,property:y.borderColor}}}),i.e4,i.dj,i.Ae,(t=>class extends t{constructor(){super()}get digits(){return Number.parseInt(this.getAttribute("digits"))||6}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${o.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></${o.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),(0,l.oP)(this,this.inputElement,{includeAttrs:["digits","size"]})}}))((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\t\t-webkit-mask-image: none;\n\t\tpadding: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tmin-height: initial;\n    }\n\n\tdescope-passcode-internal .wrapper {\n\t\tbox-sizing: border-box;\n\t\tmin-height: initial;\n\t\theight: 100%;\n\t\tjustify-content: center;\n    }\n\n\tdescope-passcode-internal descope-text-field {\n\t\twidth: var(${y.height})\t\t\t\n\t}\n\n    vaadin-text-field::part(input-field) {\n\t\tbackground-color: transparent;\n\t\tpadding: 0;\n\t\toverflow: hidden;\n\t\t-webkit-mask-image: none;\n    }\n\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%\n\t}\n\n\tvaadin-text-field::before {\n\t\theight: 0;\n\t}\n\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\n\tvaadin-text-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n    `,excludeAttrsSync:["tabindex"],componentName:p}));n(9357),n(4775),customElements.define(p,x)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[939],{7102:(t,e,n)=>{n.r(e);var i=n(4988),r=n(4447),o=n(7361),d=n(9063),a=n(2061),l=n(4567);const p=(0,l.iY)("passcode"),{borderStyle:s,borderWidth:c,...u}=r.Z,{digitField:g,label:h,requiredIndicator:f,internalWrapper:b,focusedValidDigitField:m}={focusedValidDigitField:{selector:()=>`${d.Z.componentName}[focused="true"]:not([invalid="true"])`},digitField:{selector:()=>d.Z.componentName},label:{selector:"> label"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-passcode-internal .wrapper"}},y=d.Z.cssVarList,x=(0,a.qC)((0,i.yk)({mappings:{...u,borderColor:{...g,property:y.borderColor},outlineColor:{...g,property:y.outlineColor},outlineWidth:[{...g,property:y.outlineWidth},{...b,property:"padding"}],color:[u.color,h,f],padding:{...g,property:y.padding},margin:{...g,property:y.margin},textAlign:{...g,property:y.textAlign},caretColor:{...g,property:y.caretColor},digitsGap:{...b,property:"gap"},focusedValidDigitFieldBorderColor:{...m,property:y.borderColor}}}),i.e4,i.dj,i.Ae,(t=>class extends t{constructor(){super()}get digits(){return Number.parseInt(this.getAttribute("digits"))||6}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${o.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></${o.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),(0,l.oP)(this,this.inputElement,{includeAttrs:["digits","size"]})}}))((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\t:host::after {\n\t\tbackground-color: transparent;\n\t}\n\t:host::part(input-field)::after {\n\t\tbackground-color: transparent;\n\t}\n\n    descope-passcode-internal {\n\t\t-webkit-mask-image: none;\n\t\tpadding: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tmin-height: initial;\n    }\n\n\tdescope-passcode-internal .wrapper {\n\t\tbox-sizing: border-box;\n\t\tmin-height: initial;\n\t\theight: 100%;\n\t\tjustify-content: center;\n    }\n\n\tdescope-passcode-internal descope-text-field {\n\t\twidth: var(${y.height})\t\t\t\n\t}\n\n    vaadin-text-field::part(input-field) {\n\t\tbackground-color: transparent;\n\t\tpadding: 0;\n\t\toverflow: hidden;\n\t\t-webkit-mask-image: none;\n    }\n\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%\n\t}\n\n\tvaadin-text-field::before {\n\t\theight: 0;\n\t}\n\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\n\tvaadin-text-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tcontent: "*";\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n    `,excludeAttrsSync:["tabindex"],componentName:p}));n(9357),n(4775),customElements.define(p,x)}}]);

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(4988),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 l="";const s=(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},outlineWidth:{selector:i.input},outlineStyle:{selector:i.input},outlineColor:{selector:i.input},outlineOffset:{selector:i.input}}}),r.e4,r.dj,r.Ae)((0,r.DM)({slots:[],wrappedEleName:"vaadin-text-area",style:()=>l,excludeAttrsSync:["tabindex"],componentName:o}));l='\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=s;customElements.define(o,c)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[322],{178:(e,t,r)=>{r.r(t),r.d(t,{TextArea:()=>h}),r(7101);var a=r(4988),o=r(2061);const n=(0,r(4567).iY)("text-area"),{host:l,placeholder:i,input:d,textArea:c,label:s,requiredIndicator:p}={host:{selector:()=>":host"},textArea:{selector:"> textarea"},label:{selector:"::part(label)"},input:{selector:"::part(input-field)"},placeholder:{selector:"textarea:placeholder-shown"},requiredIndicator:{selector:"::part(required-indicator)::after"}};let u="";const x=(0,o.qC)((0,a.yk)({mappings:{resize:c,color:c,cursor:{},labelColor:[{...s,property:"color"},{...p,property:"color"}],placeholderColor:{...i,property:"color"},width:l,backgroundColor:d,borderWidth:d,borderStyle:d,borderColor:d,borderRadius:d,outlineWidth:d,outlineStyle:d,outlineColor:d,outlineOffset:[d,{property:"padding"}]}}),a.e4,a.dj,a.Ae)((0,a.DM)({slots:[],wrappedEleName:"vaadin-text-area",style:()=>u,excludeAttrsSync:["tabindex"],componentName:n}));u='\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\tbox-sizing: border-box;\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[required]::part(required-indicator)::after {\n\t\tcontent: "*";\n\t}\n\tvaadin-text-area[disabled] > textarea:placeholder-shown,\n\tvaadin-text-area[readonly] > textarea:placeholder-shown {\n\t\topacity: 1;\n\t}\n';const h=x;customElements.define(n,h)}}]);

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:()=>f,f:()=>l});var i=n(4988),a=n(4447),d=n(2061);const l=(0,n(4567).iY)("text-field");let s="";const r=["type"],o=(0,d.qC)((0,i.yk)({mappings:a.Z}),i.e4,i.dj,i.Ae,(t=>class extends t{static get observedAttributes(){return r.concat(t.observedAttributes||[])}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n)}}))((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>s,excludeAttrsSync:["tabindex"],componentName:l}));s=`\n\t:host {\n\t\tdisplay: inline-block;\n\t\t--vaadin-field-default-width: auto;\n\t}\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\tvaadin-text-field::part(input-field) {\n\t\toverflow: hidden;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field[disabled] > input:placeholder-shown,\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(${o.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${o.cssVarList.height}) var(${o.cssVarList.backgroundColor}) inset;\n\t}\n\n\tvaadin-text-field input {\n\t\t-webkit-mask-image: none;\n\t}\n\n\tvaadin-text-field > label,\n\tvaadin-text-field::part(input-field) {\n\t\tcolor: var(${o.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(${o.cssVarList.color});\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n\n\tvaadin-text-field::before {\n\t\theight: unset;\n\t}\n`;const f=o},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:()=>f,f:()=>l});var i=n(4988),a=n(4447),d=n(2061);const l=(0,n(4567).iY)("text-field");let s="";const o=["type"],r=(0,d.qC)((0,i.yk)({mappings:a.Z}),i.e4,i.dj,i.Ae,(t=>class extends t{static get observedAttributes(){return o.concat(t.observedAttributes||[])}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n)}}))((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>s,excludeAttrsSync:["tabindex"],componentName:l}));s=`\n\t:host {\n\t\tdisplay: inline-block;\n\t\t--vaadin-field-default-width: auto;\n\t}\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbox-sizing: border-box;\n\t}\n\n\tvaadin-text-field::part(input-field) {\n\t\toverflow: hidden;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field[disabled] > input:placeholder-shown,\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\n\tvaadin-text-field input {\n\t\t-webkit-mask-image: none;\n\t}\n\n\tvaadin-text-field > label,\n\tvaadin-text-field::part(input-field) {\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::part(input-field)::after {\n\t\topacity: 0 !important;\n\t}\n\n\n\tvaadin-text-field::before {\n\t\theight: unset;\n\t}\n`;const f=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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/web-components-ui",
-	"version": "1.0.96",
+	"version": "1.0.98",
 	"description": "",
 	"main": "dist/cjs/index.cjs.js",
 	"module": "dist/index.esm.js",

package/src/components/descope-email-field/EmailField.js

@@ -38,8 +38,11 @@ overrides = `
 	}
 	vaadin-email-field {
 		margin: 0;
-		padding: 0;
 		width: 100%;
+		box-sizing: border-box;
+	}
+	vaadin-email-field::before {
+		height: 0;
 	}
 	vaadin-email-field::part(input-field) {
 		overflow: hidden;
@@ -64,7 +67,6 @@ overrides = `
 		cursor: text;
 	}
 	vaadin-email-field[required]::part(required-indicator)::after {
-		font-size: "12px";
 		content: "*";
 		color: var(${EmailField.cssVarList.color});
 	}

package/src/components/descope-loader-linear/LoaderLinear.js

@@ -24,7 +24,7 @@ class RawLoaderLinear extends createBaseClass({ componentName, baseSelector: ':h
 			}
 			:host {
 				position: relative;
-				display: inline-block
+				display: flex;
 			}
 			div::after {
 				content: '';

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

@@ -91,6 +91,12 @@ const Passcode = compose(
       --vaadin-field-default-width: auto;
 			display: inline-block;
     }
+	:host::after {
+		background-color: transparent;
+	}
+	:host::part(input-field)::after {
+		background-color: transparent;
+	}
 
     descope-passcode-internal {
 		-webkit-mask-image: none;
@@ -137,7 +143,6 @@ const Passcode = compose(
 	}
 
 	vaadin-text-field[required]::part(required-indicator)::after {
-		font-size: "12px";
 		content: "*";
 	}
 	vaadin-text-field[readonly]::part(input-field)::after {

package/src/components/descope-text-area/TextArea.js

@@ -10,11 +10,20 @@ import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('text-area');
 
-const selectors = {
-	label: '::part(label)',
-	input: '::part(input-field)',
-	required: '::part(required-indicator)::after',
-	host: () => ':host'
+const {
+	host,
+	placeholder,
+	input,
+	textArea,
+	label,
+	requiredIndicator
+} = {
+	host: { selector: () => ':host' },
+	textArea: { selector: '> textarea' },
+	label: { selector: '::part(label)' },
+	input: { selector: '::part(input-field)' },
+	placeholder: { selector: 'textarea:placeholder-shown' },
+	requiredIndicator: { selector: '::part(required-indicator)::after' },
 };
 
 let overrides = ``;
@@ -22,19 +31,24 @@ let overrides = ``;
 const TextArea = compose(
 	createStyleMixin({
 		mappings: {
-			resize: { selector: '> textarea' },
-			color: { selector: selectors.label },
+			resize: textArea,
+			color: textArea,
 			cursor: {},
-			width: { selector: selectors.host },
-			backgroundColor: { selector: selectors.input },
-			borderWidth: { selector: selectors.input },
-			borderStyle: { selector: selectors.input },
-			borderColor: { selector: selectors.input },
-			borderRadius: { selector: selectors.input },
-			outlineWidth: { selector: selectors.input },
-			outlineStyle: { selector: selectors.input },
-			outlineColor: { selector: selectors.input },
-			outlineOffset: { selector: selectors.input }
+			labelColor: [
+				{ ...label, property: 'color' },
+				{ ...requiredIndicator, property: 'color' }
+			],
+			placeholderColor: { ...placeholder, property: 'color' },
+			width: host,
+			backgroundColor: input,
+			borderWidth: input,
+			borderStyle: input,
+			borderColor: input,
+			borderRadius: input,
+			outlineWidth: input,
+			outlineStyle: input,
+			outlineColor: input,
+			outlineOffset: [input, { property: 'padding' }],
 		}
 	}),
 	draggableMixin,
@@ -58,6 +72,7 @@ overrides = `
 	vaadin-text-area {
 		margin: 0;
 		width: 100%;
+		box-sizing: border-box;
 	}
 	vaadin-text-area > label,
 	vaadin-text-area::part(input-field) {
@@ -66,9 +81,12 @@ overrides = `
 	vaadin-text-area[focused]::part(input-field) {
 		cursor: text;
 	}
-	vaadin-text-area::part(required-indicator)::after {
-		font-size: "12px";
+	vaadin-text-area[required]::part(required-indicator)::after {
 		content: "*";
-	}	
+	}
+	vaadin-text-area[disabled] > textarea:placeholder-shown,
+	vaadin-text-area[readonly] > textarea:placeholder-shown {
+		opacity: 1;
+	}
 `;
 export default TextArea;

package/src/components/descope-text-field/TextField.js

@@ -63,6 +63,7 @@ overrides = `
 		padding: 0;
 		width: 100%;
 		height: 100%;
+		box-sizing: border-box;
 	}
 
 	vaadin-text-field::part(input-field) {
@@ -98,10 +99,11 @@ overrides = `
 		content: "*";
 		color: var(${TextField.cssVarList.color});
 	}
-	vaadin-text-field[readonly]::part(input-field)::after {
-		border: 0 solid;
+	vaadin-text-field::part(input-field)::after {
+		opacity: 0 !important;
 	}
 
+
 	vaadin-text-field::before {
 		height: unset;
 	}

package/src/components/descope-text-field/textFieldMappings.js

@@ -28,15 +28,19 @@ export default {
 
 	// we apply font-size also on the host so we can set its width with em
 	fontSize: [{}, { selector: selectors.host }],
-	
+
 	height: { selector: selectors.inputWrapper },
 	padding: { selector: selectors.inputWrapper },
 	margin: { selector: selectors.inputWrapper },
 	caretColor: { selector: selectors.input },
 	outlineColor: { selector: selectors.inputWrapper },
 	outlineStyle: { selector: selectors.inputWrapper },
-	outlineWidth: { selector: selectors.inputWrapper },
+	outlineWidth: [
+		{ selector: selectors.inputWrapper },
+		// we need to make sure there is enough space for the outline
+		{ property: 'padding' }
+	],
 	outlineOffset: { selector: selectors.inputWrapper },
-	textAlign: {selector: selectors.input},
+	textAlign: { selector: selectors.input },
 	placeholderColor: { selector: selectors.placeholder, property: 'color' }
 };

package/src/helpers/themeHelpers/index.js

@@ -55,6 +55,10 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 		const property = restPath.pop();
 		const componentName = getComponentName(component);
 
+		if(property === 'undefined'){
+			console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`)
+		}
+
 		// we need a support for portal components theme (e.g. overlay)
 		// this allows us to generate those themes under different sections
 		// if the theme has root level attribute that starts with #

package/src/theme/components/button.js

@@ -29,7 +29,6 @@ const button = {
 	[vars.borderColor]: 'transparent',
 
 	[vars.gap]: '0.25em',
-	[vars.height]: '100%',
 
 	[vars.verticalPadding]: `calc(var(${vars.fontSize}) / ${verticalPaddingRatio})`,
 	[vars.horizontalPadding]: `calc(var(${vars.fontSize}) / ${horizontalPaddingRatio})`,

package/src/theme/components/checkbox.js

@@ -17,7 +17,7 @@ const checkbox = {
 	[vars.checkboxHeight]: 'calc(1em - 2px)',
 	[vars.labelMargin]: 'calc(1em + 5px)',
 
-	[vars.checkboxRadius]: globalRefs.radius.sm,
+	[vars.checkboxRadius]: globalRefs.radius.xs,
 
 	size: {
 		xs: {

package/src/theme/components/container.js

@@ -88,7 +88,7 @@ const container = {
 			[vars.boxShadow]: `${globalRefs.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.xl} ${helperRefs.shadowColor}`
 		},
 		'2xl': {
-			[helperVars.shadowColor]: '#00000050',
+			[helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings 
 			[vars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${helperRefs.shadowColor}`
 		},
 	},
@@ -103,6 +103,15 @@ const container = {
 		lg: {
 			[vars.borderRadius]: globalRefs.radius.lg
 		},
+		xl: {
+			[vars.borderRadius]: globalRefs.radius.xl
+		},
+		'2xl': {
+			[vars.borderRadius]: globalRefs.radius['2xl']
+		},
+		'3xl': {
+			[vars.borderRadius]: globalRefs.radius['3xl']
+		},
 	}
 };
 

package/src/theme/components/textArea.js

@@ -6,36 +6,36 @@ const globalRefs = getThemeRefs(globals);
 const vars = TextArea.cssVarList;
 
 const textArea = {
-	[vars.color]: globalRefs.colors.primary.main,
+	[vars.labelColor]: globalRefs.colors.surface.contrast,
+	[vars.placeholderColor]: globalRefs.colors.surface.main,
+	[vars.color]: globalRefs.colors.surface.contrast,
+
 	[vars.backgroundColor]: globalRefs.colors.surface.light,
 	[vars.resize]: 'vertical',
 
 	[vars.borderRadius]: globalRefs.radius.sm,
 	[vars.borderWidth]: '1px',
 	[vars.borderStyle]: 'solid',
-	[vars.borderColor]: 'transparent',
+	[vars.borderColor]: globalRefs.colors.surface.main,
 	[vars.outlineWidth]: '2px',
 	[vars.outlineStyle]: 'solid',
 	[vars.outlineColor]: 'transparent',
+	[vars.outlineOffset]: '0px',
 
-
-	_bordered: {
-		[vars.borderColor]: globalRefs.colors.surface.main
+	_fullWidth: {
+		[vars.width]: '100%'
 	},
 
 	_focused: {
 		[vars.outlineColor]: globalRefs.colors.surface.main
 	},
 
-	_fullWidth: {
-		[vars.width]: '100%'
-	},
-
 	_disabled: {
 		[vars.cursor]: 'not-allowed'
 	},
 
 	_invalid: {
+		[vars.labelColor]: globalRefs.colors.error.main,
 		[vars.outlineColor]: globalRefs.colors.error.main
 	}
 };

package/src/theme/components/textField.js

@@ -7,31 +7,32 @@ const globalRefs = getThemeRefs(globals);
 const vars = TextField.cssVarList;
 
 export const textField = (vars) => ({
+	[vars.padding]: '0 1em',
+
+	[vars.outlineWidth]: '2px',
+	[vars.outlineStyle]: 'solid',
+	[vars.outlineColor]: 'transparent',
+
 	size: {
 		xs: {
 			[vars.height]: '14px',
 			[vars.fontSize]: '8px',
-			[vars.padding]: `0 ${globalRefs.spacing.xs}`
 		},
 		sm: {
 			[vars.height]: '20px',
 			[vars.fontSize]: '10px',
-			[vars.padding]: `0 ${globalRefs.spacing.sm}`
 		},
 		md: {
 			[vars.height]: '30px',
 			[vars.fontSize]: '14px',
-			[vars.padding]: `0 ${globalRefs.spacing.md}`
 		},
 		lg: {
 			[vars.height]: '40px',
 			[vars.fontSize]: '20px',
-			[vars.padding]: `0 ${globalRefs.spacing.lg}`
 		},
 		xl: {
 			[vars.height]: '50px',
 			[vars.fontSize]: '25px',
-			[vars.padding]: `0 ${globalRefs.spacing.xl}`
 		}
 	},
 
@@ -56,8 +57,6 @@ export const textField = (vars) => ({
 	},
 
 	_focused: {
-		[vars.outlineWidth]: '2px',
-		[vars.outlineStyle]: 'solid',
 		[vars.outlineColor]: globalRefs.colors.surface.main
 	},
 

package/src/theme/globals.js

@@ -85,12 +85,12 @@ const typography = {
 	},
 	body1: {
 		font: fontsRef.font1.family,
-		weight: '300',
+		weight: '400',
 		size: '16px'
 	},
 	body2: {
 		font: fontsRef.font1.family,
-		weight: '200',
+		weight: '400',
 		size: '14px'
 	}
 };
@@ -116,7 +116,9 @@ const radius = {
 	sm: '10px',
 	md: '15px',
 	lg: '20px',
-	xl: '25px'
+	xl: '25px',
+	'2xl': '30px',
+	'3xl': '35px'
 };
 
 const shadow = {