@descope/web-components-ui 1.0.46 → 1.0.47

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:()=>b}),e(9515);var a=e(2788),i=e(4599),r=e(2089),o=e(3938),c=e(8237),s=e(3097);const h=(0,a.iY)("switch-toggle");let l="";const d=(0,a.qC)((0,i.y)({mappings:{width:{},cursor:[{},{selector:"> label"}]}}),r.e,o.y,c.A)((0,s.D)({slots:[],wrappedEleName:"vaadin-checkbox",style:()=>l,excludeAttrsSync:["tabindex"],componentName:h}));l=`\n\t:host {\n\t\t--margin: 7px;\n\t\t--width: var(${d.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>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}\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 b=d;customElements.define(h,b)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[739],{3774:(t,n,e)=>{e.r(n),e.d(n,{SwitchToggle:()=>v}),e(9515);var a=e(2788),i=e(4599),r=e(2089),o=e(3938),c=e(8237),l=e(3097),s=e(3535);const h=(0,a.iY)("switch-toggle");let d="";const b=(0,a.qC)((0,i.y)({mappings:{width:(0,s.zy)(),cursor:[{},{selector:"> label"}]}}),r.e,o.y,c.A)((0,l.D)({slots:[],wrappedEleName:"vaadin-checkbox",style:()=>d,excludeAttrsSync:["tabindex"],componentName:h}));d=`\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(${b.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>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}\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 v=b;customElements.define(h,v)}}]);

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

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[322],{178:(e,t,r)=>{r.r(t),r.d(t,{TextArea:()=>x}),r(7101);var a=r(2788),n=r(4599),o=r(2089),s=r(3938),c=r(8237),l=r(3097);const i=(0,a.iY)("text-area"),d=":not([disabled])::part(input-field)";let p="";const u=(0,a.qC)((0,n.y)({mappings:{resize:{selector:"> textarea"},color:{selector:"::part(label)"},cursor:{},width:{},backgroundColor:{selector:d},borderWidth:{selector:d},borderStyle:{selector:d},borderColor:{selector:d},borderRadius:{selector:d},outline:{selector:d},outlineOffset:{selector:d}}}),o.e,s.y,c.A)((0,l.D)({slots:[],wrappedEleName:"vaadin-text-area",style:()=>p,excludeAttrsSync:["tabindex"],componentName:i}));p='\n\tvaadin-text-area {\n\t\tmargin: 0;\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] input:focus {\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 x=u;customElements.define(i,x)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[322],{178:(t,e,n)=>{n.r(e),n.d(e,{TextArea:()=>b}),n(7101);var r=n(2788),a=n(4599),o=n(2089),s=n(3938),l=n(8237),i=n(3097),c=n(3535);const d=(0,r.iY)("text-area"),p=":not([disabled])::part(input-field)";let u="";const x=(0,r.qC)((0,a.y)({mappings:{resize:{selector:"> textarea"},color:{selector:"::part(label)"},cursor:{},width:(0,c.zy)(),backgroundColor:{selector:p},borderWidth:{selector:p},borderStyle:{selector:p},borderColor:{selector:p},borderRadius:{selector:p},outline:{selector:p},outlineOffset:{selector:p}}}),o.e,s.y,l.A)((0,i.D)({slots:[],wrappedEleName:"vaadin-text-area",style:()=>u,excludeAttrsSync:["tabindex"],componentName:d}));u='\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\tvaadin-text-area {\n\t\tmargin: 0;\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] input:focus {\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 b=x;customElements.define(d,b)}}]);

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,o,r={534:(e,t,o)=>{var r={"./descope-button/index.js":[3029,840,767,211,513,729,313,599,97,662],"./descope-checkbox/index.js":[7904,840,786,208,767,515,313,599,97,938,761],"./descope-combo/index.js":[2798,840,786,208,233,767,422,211,725,513,789,729,313,599,97,938,63,662,934,247],"./descope-container/index.js":[147,313,599,317],"./descope-date-picker/index.js":[2552,840,786,208,233,767,211,513,54,313,97,17],"./descope-email-field/index.js":[689,840,786,208,233,422,725,437,313,599,97,938,63,760],"./descope-logo/index.js":[4641,313,599,984],"./descope-number-field/index.js":[4951,840,786,208,233,422,806,313,599,97,938,63,142],"./descope-password-field/index.js":[1721,840,786,208,233,767,422,211,725,56,313,599,97,938,63,320],"./descope-switch-toggle/index.js":[3774,840,786,208,767,515,313,599,97,938,739],"./descope-text-area/index.js":[178,840,786,233,422,101,313,599,97,938,322],"./descope-text-field/index.js":[9357,840,786,208,233,422,725,789,313,599,97,938,63,934]};function n(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],n=t[0];return Promise.all(t.slice(1).map(o.e)).then((()=>o(n)))}n.keys=()=>Object.keys(r),n.id=534,e.exports=n},7507:(e,t,o)=>{const r=o(534);e.exports=r.keys().reduce(((e,t)=>(e[t.replace(/.*?([^\/]+)\/index\.js$/,"$1")]=()=>r(t),e)),{})}},n={};function i(e){var t=n[e];if(void 0!==t)return t.exports;var o=n[e]={exports:{}};return r[e](o,o.exports,i),o.exports}i.m=r,e=[],i.O=(t,o,r,n)=>{if(!o){var s=1/0;for(p=0;p<e.length;p++){for(var[o,r,n]=e[p],d=!0,c=0;c<o.length;c++)(!1&n||s>=n)&&Object.keys(i.O).every((e=>i.O[e](o[c])))?o.splice(c--,1):(d=!1,n<s&&(s=n));if(d){e.splice(p--,1);var a=r();void 0!==a&&(t=a)}}return t}n=n||0;for(var p=e.length;p>0&&e[p-1][2]>n;p--)e[p]=e[p-1];e[p]=[o,r,n]},i.F={},i.E=e=>{Object.keys(i.F).map((t=>{i.F[t](e)}))},i.d=(e,t)=>{for(var o in t)i.o(t,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce(((t,o)=>(i.f[o](e,t),t)),[])),i.u=e=>(({17:"descope-date-picker-index-js",142:"descope-number-field-index-js",247:"descope-combo-index-js",317:"descope-container-index-js",320:"descope-password-field-index-js",322:"descope-text-area-index-js",662:"descope-button-index-js",739:"descope-switch-toggle-index-js",760:"descope-email-field-index-js",761:"descope-checkbox-index-js",934:"descope-text-field-index-js",984:"descope-logo-index-js"}[e]||e)+".js"),i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),t={},o="DescopeUI:",i.l=(e,r,n,s)=>{if(t[e])t[e].push(r);else{var d,c;if(void 0!==n)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+n){d=l;break}}d||(c=!0,(d=document.createElement("script")).charset="utf-8",d.timeout=120,i.nc&&d.setAttribute("nonce",i.nc),d.setAttribute("data-webpack",o+n),d.src=e),t[e]=[r];var u=(o,r)=>{d.onerror=d.onload=null,clearTimeout(f);var n=t[e];if(delete t[e],d.parentNode&&d.parentNode.removeChild(d),n&&n.forEach((e=>e(r))),o)return o(r)},f=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)}},i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;i.g.importScripts&&(e=i.g.location+"");var t=i.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(/\/[^\/]+$/,"/"),i.p=e})(),(()=>{var e={826:0};i.f.j=(t,o)=>{var r=i.o(e,t)?e[t]:void 0;if(0!==r)if(r)o.push(r[2]);else{var n=new Promise(((o,n)=>r=e[t]=[o,n]));o.push(r[2]=n);var s=i.p+i.u(t),d=new Error;i.l(s,(o=>{if(i.o(e,t)&&(0!==(r=e[t])&&(e[t]=void 0),r)){var n=o&&("load"===o.type?"missing":o.type),s=o&&o.target&&o.target.src;d.message="Loading chunk "+t+" failed.\n("+n+": "+s+")",d.name="ChunkLoadError",d.type=n,d.request=s,r[1](d)}}),"chunk-"+t,t)}},i.F.j=t=>{if(!i.o(e,t)||void 0===e[t]){e[t]=null;var o=document.createElement("link");i.nc&&o.setAttribute("nonce",i.nc),o.rel="prefetch",o.as="script",o.href=i.p+i.u(t),document.head.appendChild(o)}},i.O.j=t=>0===e[t];var t=(t,o)=>{var r,n,[s,d,c]=o,a=0;if(s.some((t=>0!==e[t]))){for(r in d)i.o(d,r)&&(i.m[r]=d[r]);if(c)var p=c(i)}for(t&&t(o);a<s.length;a++)n=s[a],i.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return i.O(p)},o=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];o.forEach(t.bind(null,0)),o.push=t.bind(null,o.push.bind(o))})(),i.O(0,[826],(()=>{[840,767,211,513,729,313,599,97,662,786,208,515,938,761,233,422,725,789,63,934,247,317,54,17,437,760,984,806,142,56,320,739,101,322].map(i.E)}),5);var s=i(7507);return i.O(s)})()));
+!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.DescopeUI=o():e.DescopeUI=o()}(self,(()=>(()=>{var e,o,t,r={534:(e,o,t)=>{var r={"./descope-button/index.js":[3029,840,767,211,513,729,313,599,97,662],"./descope-checkbox/index.js":[7904,840,786,208,767,515,313,599,97,938,761],"./descope-combo/index.js":[2798,840,786,208,233,422,767,725,211,789,513,729,313,599,97,938,63,934,662,247],"./descope-container/index.js":[147,313,599,317],"./descope-date-picker/index.js":[2552,840,786,208,233,767,211,513,54,313,97,17],"./descope-email-field/index.js":[689,840,786,208,233,422,725,437,313,599,97,938,63,760],"./descope-logo/index.js":[4641,313,599,984],"./descope-number-field/index.js":[4951,840,786,208,233,422,806,313,599,97,938,63,142],"./descope-passcode/index.js":[7102,840,786,208,233,422,725,789,313,599,97,938,63,934,939],"./descope-password-field/index.js":[1721,840,786,208,233,422,767,725,211,56,313,599,97,938,63,320],"./descope-switch-toggle/index.js":[3774,840,786,208,767,515,313,599,97,938,739],"./descope-text-area/index.js":[178,840,786,233,422,101,313,599,97,938,322],"./descope-text-field/index.js":[9357,840,786,208,233,422,725,789,313,599,97,938,63,934]};function n(e){if(!t.o(r,e))return Promise.resolve().then((()=>{var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}));var o=r[e],n=o[0];return Promise.all(o.slice(1).map(t.e)).then((()=>t(n)))}n.keys=()=>Object.keys(r),n.id=534,e.exports=n},7507:(e,o,t)=>{const r=t(534);e.exports=r.keys().reduce(((e,o)=>(e[o.replace(/.*?([^\/]+)\/index\.js$/,"$1")]=()=>r(o),e)),{})}},n={};function s(e){var o=n[e];if(void 0!==o)return o.exports;var t=n[e]={exports:{}};return r[e](t,t.exports,s),t.exports}s.m=r,e=[],s.O=(o,t,r,n)=>{if(!t){var i=1/0;for(p=0;p<e.length;p++){for(var[t,r,n]=e[p],d=!0,c=0;c<t.length;c++)(!1&n||i>=n)&&Object.keys(s.O).every((e=>s.O[e](t[c])))?t.splice(c--,1):(d=!1,n<i&&(i=n));if(d){e.splice(p--,1);var a=r();void 0!==a&&(o=a)}}return o}n=n||0;for(var p=e.length;p>0&&e[p-1][2]>n;p--)e[p]=e[p-1];e[p]=[t,r,n]},s.F={},s.E=e=>{Object.keys(s.F).map((o=>{s.F[o](e)}))},s.d=(e,o)=>{for(var t in o)s.o(o,t)&&!s.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:o[t]})},s.f={},s.e=e=>Promise.all(Object.keys(s.f).reduce(((o,t)=>(s.f[t](e,o),o)),[])),s.u=e=>(({17:"descope-date-picker-index-js",142:"descope-number-field-index-js",247:"descope-combo-index-js",317:"descope-container-index-js",320:"descope-password-field-index-js",322:"descope-text-area-index-js",662:"descope-button-index-js",739:"descope-switch-toggle-index-js",760:"descope-email-field-index-js",761:"descope-checkbox-index-js",934:"descope-text-field-index-js",939:"descope-passcode-index-js",984:"descope-logo-index-js"}[e]||e)+".js"),s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),o={},t="DescopeUI:",s.l=(e,r,n,i)=>{if(o[e])o[e].push(r);else{var d,c;if(void 0!==n)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")==t+n){d=l;break}}d||(c=!0,(d=document.createElement("script")).charset="utf-8",d.timeout=120,s.nc&&d.setAttribute("nonce",s.nc),d.setAttribute("data-webpack",t+n),d.src=e),o[e]=[r];var u=(t,r)=>{d.onerror=d.onload=null,clearTimeout(f);var n=o[e];if(delete o[e],d.parentNode&&d.parentNode.removeChild(d),n&&n.forEach((e=>e(r))),t)return t(r)},f=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)}},s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;s.g.importScripts&&(e=s.g.location+"");var o=s.g.document;if(!e&&o&&(o.currentScript&&(e=o.currentScript.src),!e)){var t=o.getElementsByTagName("script");t.length&&(e=t[t.length-1].src)}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),s.p=e})(),(()=>{var e={826:0};s.f.j=(o,t)=>{var r=s.o(e,o)?e[o]:void 0;if(0!==r)if(r)t.push(r[2]);else{var n=new Promise(((t,n)=>r=e[o]=[t,n]));t.push(r[2]=n);var i=s.p+s.u(o),d=new Error;s.l(i,(t=>{if(s.o(e,o)&&(0!==(r=e[o])&&(e[o]=void 0),r)){var n=t&&("load"===t.type?"missing":t.type),i=t&&t.target&&t.target.src;d.message="Loading chunk "+o+" failed.\n("+n+": "+i+")",d.name="ChunkLoadError",d.type=n,d.request=i,r[1](d)}}),"chunk-"+o,o)}},s.F.j=o=>{if(!s.o(e,o)||void 0===e[o]){e[o]=null;var t=document.createElement("link");s.nc&&t.setAttribute("nonce",s.nc),t.rel="prefetch",t.as="script",t.href=s.p+s.u(o),document.head.appendChild(t)}},s.O.j=o=>0===e[o];var o=(o,t)=>{var r,n,[i,d,c]=t,a=0;if(i.some((o=>0!==e[o]))){for(r in d)s.o(d,r)&&(s.m[r]=d[r]);if(c)var p=c(s)}for(o&&o(t);a<i.length;a++)n=i[a],s.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return s.O(p)},t=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];t.forEach(o.bind(null,0)),t.push=o.bind(null,t.push.bind(t))})(),s.O(0,[826],(()=>{[840,767,211,513,729,313,599,97,662,786,208,515,938,761,233,422,725,789,63,934,247,317,54,17,437,760,984,806,142,939,56,320,739,101,322].map(s.E)}),5);var i=s(7507);return s.O(i)})()));

package/package.json

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

package/src/components/descope-button/Button.js

@@ -12,6 +12,9 @@ export const componentName = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 const resetStyles = `
+	:host {
+		display: inline-block;
+	}
 	vaadin-button { margin: 0; }
 	vaadin-button::part(prefix) {
 		margin-left: 0;
@@ -46,9 +49,9 @@ const Button = compose(
 			borderWidth: {},
 			fontSize: {},
 			height: {},
-			width: [matchHostStyle()],
+			width: matchHostStyle(),
 			cursor: {},
-			padding: [matchHostStyle(), { selector: selectors.label }],
+			padding: [{ selector: selectors.label }],
 			textDecoration: { selector: selectors.label }
 		}
 	}),

package/src/components/descope-checkbox/Checkbox.js

@@ -5,15 +5,16 @@ import {
 	createProxy,
 	inputMixin,
 	compose,
-	componentNameValidationMixin
+	componentNameValidationMixin,
 } from '../../componentsHelpers';
+import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
 
 export const componentName = getComponentName('checkbox');
 
 const Checkbox = compose(
 	createStyleMixin({
 		mappings: {
-			width: {},
+			width: matchHostStyle(),
 			cursor: [{}, { selector: '> label' }]
 		}
 	}),
@@ -24,7 +25,11 @@ const Checkbox = compose(
 	createProxy({
 		slots: [],
 		wrappedEleName: 'vaadin-checkbox',
-		style: ``,
+		style: `
+		:host {
+			display: inline-block;
+		}
+		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName
 	})

package/src/components/descope-container/Container.js

@@ -40,7 +40,7 @@ const Container = compose(
 				{ property: 'padding-right' }
 			],
 
-			display: {},
+			display: {}, // maybe this should be hardcoded to flex
 			flexDirection: {},
 			justifyContent: {},
 			alignItems: {},

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

@@ -33,6 +33,9 @@ const EmailField = compose(
 );
 
 overrides = `
+	:host {
+		display: inline-block;
+	}
 	vaadin-email-field {
 		margin: 0;
 		padding: 0;

package/src/components/descope-number-field/NumberField.js

@@ -33,6 +33,9 @@ const NumberField = compose(
 );
 
 overrides = `
+	:host {
+		display: inline-block;
+	}
 	vaadin-number-field {
 		margin: 0;
 		padding: 0;

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

@@ -0,0 +1,252 @@
+import {
+	getComponentName,
+	createStyleMixin,
+	draggableMixin,
+	compose,
+	componentNameValidationMixin
+} from '../../componentsHelpers';
+import '../descope-text-field'
+
+export const componentName = getComponentName('passcode');
+
+let style
+const getStyle = () => style;
+
+class RawPasscode extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			'disabled',
+			'bordered',
+			'size'
+		];
+	}
+
+	static get componentName() {
+		return componentName;
+	}
+
+	static get formAssociated() {
+		return true;
+	}
+
+	#internals
+
+	constructor() {
+		super();
+		const template = document.createElement('template');
+
+		const inputs = [...Array(this.digits).keys()].map((idx) => `
+		<descope-text-field
+			st-width="35px"
+			data-id=${idx}
+			type="tel"
+			autoComplete="none"
+		></descope-text-field>
+	`)
+
+		template.innerHTML = `
+		<style>
+			${getStyle()}
+		</style>
+		<div>
+			${inputs.join('')}
+		</div>
+		`;
+
+		// this.attachShadow({ mode: 'open' });
+		this.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > div';
+
+		this.#internals = this.attachInternals();
+
+		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 }) => value).join('')
+	}
+
+	get isRequired() {
+		return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
+	}
+
+	get pattern() {
+		return `^$|^\\d{${this.digits},}$`
+	}
+
+	get valueMissingErrMsg() {
+		return 'Please fill out this field.'
+	}
+
+	get patternMismatchErrMsg() {
+		return `Must be a ${this.digits} digits number.`
+	}
+
+	formAssociatedCallback() {
+		this.setValidity?.();
+	}
+
+	setValidity = () => {
+		if (this.isRequired && !this.value) this.#internals.setValidity({ valueMissing: true }, this.valueMissingErrMsg);
+		else if (this.pattern && !new RegExp(this.pattern).test(this.value)) this.#internals.setValidity({ patternMismatch: true }, this.patternMismatchErrMsg);
+		else this.#internals.setValidity({})
+	};
+
+	async connectedCallback() {
+		// if (this.shadowRoot.isConnected) {
+		this.setValidity();
+		this.initInputs()
+
+		this.onfocus = () => this.inputs[0].focus();
+		// }
+	}
+
+	getInputIdx(inputEle) {
+		return Number.parseInt(inputEle.getAttribute('data-id'), 10)
+	}
+
+	getNextInput(currInput) {
+		const currentIdx = this.getInputIdx(currInput)
+		const newIdx = Math.min(currentIdx + 1, this.inputs.length - 1)
+		return this.inputs[newIdx]
+	}
+
+	getPrevInput(currInput) {
+		const currentIdx = this.getInputIdx(currInput)
+		const newIdx = Math.max(currentIdx - 1, 0)
+		return this.inputs[newIdx]
+	}
+
+	fillDigits(charArr, currentInput) {
+		for (let i = 0; i < charArr.length; i += 1) {
+			currentInput.value = charArr[i] ?? '';
+
+			const nextInput = this.getNextInput(currentInput);
+			if (nextInput === currentInput) break;
+			currentInput = nextInput;
+		}
+
+		!currentInput.hasAttribute('focused') && focusElement(currentInput);
+	};
+
+	initInputs() {
+		this.inputs.forEach((input) => {
+
+			// 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.onblur = () => {
+				const timerId = setTimeout(() => this.dispatchEvent(new Event('blur')));
+
+				this.inputs.forEach((ele) =>
+					ele.addEventListener('focus', () => clearTimeout(timerId), { once: true })
+				);
+			};
+
+			input.oninput = () => {
+				const charArr = getSanitizedCharacters(input.value);
+
+				if (!charArr.length) input.value = ''; // if we got an invalid value we want to clear the input
+				else this.fillDigits(charArr, input);
+
+				this.setValidity()
+			};
+
+			input.onkeydown = ({ key }) => {
+				if (key === 'Backspace') {
+					input.value = '';
+
+					// if the user deleted the digit we want to focus the previous digit
+					const prevInput = this.getPrevInput(input)
+
+					!prevInput.hasAttribute('focused') && setTimeout(() => {
+						focusElement(prevInput);
+					});
+				} 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
+				}
+
+				this.setValidity()
+			};
+		})
+	}
+
+	attributeChangedCallback(
+		attrName,
+		oldValue,
+		newValue
+	) {
+		if (oldValue !== newValue &&
+			RawPasscode.observedAttributes.includes(attrName)) {
+			this.inputs.forEach((input) => input.setAttribute(attrName, newValue))
+		}
+	}
+
+}
+
+const Passcode = compose(
+	// createStyleMixin({
+	// 	// what do we want to customize?
+	// 	mappings: {
+	// 		height: {},
+	// 		width: {},
+	// 	}
+	// }),
+	// draggableMixin,
+	// componentNameValidationMixin
+)(RawPasscode);
+
+style = `
+:host {
+	display: inline-block;
+}
+
+:host > div {
+	display: flex;
+	gap: 2px;
+}
+`
+
+export default Passcode;
+
+
+const focusElement = (ele) => {
+	ele?.focus();
+	ele?.setSelectionRange(1, 1);
+};
+
+const getSanitizedCharacters = (str) => {
+	const pin = str.replace(/\s/g, ''); // sanitize string
+
+	// accept only numbers
+	if (!pin.match(/^\d+$/)) return [];
+
+	return [...pin]; // creating array of chars
+};
+
+
+
+
+/*
+TODO:
+
+label
+error message
+helper text
+
+full width
+data-errormessage-pattern-mismatch
+data-errormessage-value-missing
+*/
+
+/*
+ISSUES:
+- There is no option to pass size=1
+- when using size=md the WC height is not fit to content
+- when using size=lg there is no cursor and cannot type
+ */

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

@@ -0,0 +1,79 @@
+import Passcode, { componentName } from './Passcode';
+
+customElements.define(componentName, Passcode);
+
+export { Passcode as Logo };
+
+
+class RawPasscodeW extends HTMLElement {
+  constructor() {
+    super();
+    const template = document.createElement('template');
+
+    template.innerHTML = `
+		<descope-text-field required bordered="true" helper-text="helper" error-message="error" label="label"></descope-text-field>
+		`;
+
+    this.appendChild(template.content.cloneNode(true));
+
+    const vaadin = this.querySelector('descope-text-field').shadowRoot.querySelector('vaadin-text-field')
+
+    // const temp1 = document.createElement('template')
+    // temp1.innerHTML = `
+    // <div slot="input">
+    // <input></input>
+    // <input></input>
+    // <input></input>
+    // <input></input>
+    // <input></input>
+    // </div>
+    // `;
+
+
+    this.wrap = document.createElement('div')
+    this.wrap.slot = 'input'
+    this.wrap.part = 'input-field'
+    this.wrap.style.height = '100%'
+    this.wrap.style.display = 'flex'
+
+    this.clonedNode = document.createElement("input");
+    this.clonedNode.style.width = '20px'
+    this.clonedNode.style.height = '100%'
+    this.clonedNode.style.padding = '0'
+    
+
+    this.wrap.appendChild(this.clonedNode.cloneNode(true))
+    this.wrap.appendChild(this.clonedNode.cloneNode(true))
+    this.wrap.appendChild(this.clonedNode.cloneNode(true))
+
+    this.wrap.checkValidity = () => false
+    this.wrap.value = '123'
+    console.log(this.wrap.value)
+    vaadin.appendChild(this.wrap)
+    setTimeout(() => {
+      this.wrap.value = '111'
+      console.log(this.wrap.oninput, this.wrap.onchange)
+      this.wrap.dispatchEvent(new InputEvent('input'))
+    })
+  }
+
+  connectedCallback() {
+    // const styles = window.getComputedStyle(this.querySelector('descope-text-field').shadowRoot.querySelector('vaadin-text-field').shadowRoot.querySelector('[part="input-field"]'));
+    // if (styles.cssText !== '') {
+    //     this.clonedNode.style.cssText = styles.cssText;
+    // } else {
+    //     const cssText = Object.values(styles).reduce(
+    //         (css, propertyName) =>
+    //             `${css}${propertyName}:${styles.getPropertyValue(
+    //                 propertyName
+    //             )};`
+    //     );
+    
+    //     this.clonedNode.style.cssText = cssText
+    // }
+  }
+}
+
+customElements.define('descope-passcode-1', RawPasscodeW);
+
+// create proxy like text field with custom mixin that adds the code logic

package/src/components/descope-password-field/PasswordField.js

@@ -40,6 +40,9 @@ const PasswordField = compose(
 );
 
 overrides = `
+	:host {
+		display: inline-block;
+	}
 	vaadin-password-field {
 		margin: 0;
 		padding: 0;

package/src/components/descope-switch-toggle/SwitchToggle.js

@@ -5,8 +5,9 @@ import {
 	createProxy,
 	inputMixin,
 	compose,
-	componentNameValidationMixin
+	componentNameValidationMixin,
 } from '../../componentsHelpers';
+import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
 
 export const componentName = getComponentName('switch-toggle');
 
@@ -15,7 +16,7 @@ let overrides = ``;
 const SwitchToggle = compose(
 	createStyleMixin({
 		mappings: {
-			width: {},
+			width: matchHostStyle(),
 			cursor: [{}, { selector: '> label' }]
 		}
 	}),
@@ -33,6 +34,10 @@ const SwitchToggle = compose(
 );
 
 overrides = `
+	:host {
+		display: inline-block;
+	}
+	
 	:host {
 		--margin: 7px;
 		--width: var(${SwitchToggle.cssVarList.width});

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

@@ -5,8 +5,9 @@ import {
 	createProxy,
 	inputMixin,
 	compose,
-	componentNameValidationMixin
+	componentNameValidationMixin,
 } from '../../componentsHelpers';
+import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
 
 export const componentName = getComponentName('text-area');
 
@@ -24,7 +25,7 @@ const TextArea = compose(
 			resize: { selector: '> textarea' },
 			color: { selector: selectors.label },
 			cursor: {},
-			width: {},
+			width: matchHostStyle(),
 			backgroundColor: { selector: selectors.input },
 			borderWidth: { selector: selectors.input },
 			borderStyle: { selector: selectors.input },
@@ -48,6 +49,10 @@ const TextArea = compose(
 );
 
 overrides = `
+	:host {
+		display: inline-block;
+	}
+
 	vaadin-text-area {
 		margin: 0;
 	}

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

@@ -23,7 +23,7 @@ let overrides = ``;
 export const textFieldMappings = {
 	color: { selector: selectors.input },
 	backgroundColor: { selector: selectors.input },
-	width: [matchHostStyle()],
+	width: matchHostStyle(),
 	color: { selector: selectors.input },
 	borderColor: [
 		{ selector: selectors.input },
@@ -66,6 +66,10 @@ const TextField = compose(
 );
 
 overrides = `
+	:host {
+		display: inline-block;
+	}
+
 	vaadin-text-field {
 		margin: 0;
 		padding: 0;

package/src/componentsHelpers/createStyleMixin/helpers.js

@@ -80,7 +80,7 @@ export const createCssVarsList = (componentName, mappings) =>
 
 // match the host selector with the inner element selector
 // e.g. when we want to set the same size for the host & the inner element this can be useful
-export const matchHostStyle = (mappingObj) => [
+export const matchHostStyle = (mappingObj = {}) => [
 	mappingObj,
 	{ ...mappingObj, selector: () => `:host${mappingObj.selector || ''}` }
 ];

package/src/componentsHelpers/createStyleMixin/index.js

@@ -35,14 +35,14 @@ export const createStyleMixin =
 			}
 
 			#updateAttrOverrideStyle(attrName, value) {
-				const style = this.#styleEle.sheet.cssRules[0].style;
+				const style = this.#styleEle.sheet?.cssRules[0].style;
 				const varName = getCssVarName(
 					superclass.componentName,
 					attrName.replace(/^st-/, '')
 				);
 
-				if (value) style.setProperty(varName, value);
-				else style.removeProperty(varName);
+				if (value) style?.setProperty(varName, value);
+				else style?.removeProperty(varName);
 			}
 
 			#createComponentStyle() {

package/src/componentsHelpers/inputMixin.js

@@ -1,3 +1,15 @@
+const propertyObserver = (src, target, property) => {
+	Object.defineProperty(src, property, {
+		set: function (v) {
+			return target[property] = v
+		},
+		get: function () {
+			return target[property]
+		},
+		configurable: true
+	});
+}
+
 export const inputMixin = (superclass) =>
 	class InputMixinClass extends superclass {
 		static get formAssociated() {
@@ -17,6 +29,7 @@ export const inputMixin = (superclass) =>
 		}
 
 		connectedCallback() {
+			this.baseEle = this.shadowRoot.querySelector(this.baseSelector)
 			super.connectedCallback?.();
 
 			// this is needed in order to make sure the form input validation is working
@@ -24,13 +37,15 @@ export const inputMixin = (superclass) =>
 				this.setAttribute('tabindex', 0);
 			}
 
-			// vaadin does not expose all those validation attributes so we need to take it from the input
-			// https://github.com/vaadin/web-components/issues/1177
 			const input =
-				this.proxyElement.querySelector('input') ||
-				this.proxyElement.querySelector('textarea');
+				this.baseEle.querySelector('input') ||
+				this.baseEle.querySelector('textarea');
 			if (!input) throw Error('no input was found');
 
+			// sync properties
+			propertyObserver(this, input, 'value')
+			this.setSelectionRange = input.setSelectionRange.bind(input)
+
 			this.checkValidity = () => input.checkValidity();
 			this.reportValidity = () => input.reportValidity();
 			this.validity = input.validity;