@descope/web-components-ui 1.0.92 → 1.0.94

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

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[317],{147:(t,e,o)=>{o.r(e),o.d(e,{Container:()=>a});var n=o(4988),r=o(693),s=o(2061);const i=(0,o(4567).iY)("container");class d extends((0,r.s)({componentName:i,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<style>\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: auto;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t</style>\n\t\t<slot></slot>\n\t"}}const a=(0,s.qC)((0,n.yk)({mappings:{height:{selector:()=>":host"},width:{selector:()=>":host"},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],flexDirection:{},justifyContent:{},alignItems:{},gap:{},flexWrap:{},backgroundColor:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},boxShadow:{}}}),n.e4,n.Ae)(d);customElements.define(i,a)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[317],{147:(t,o,e)=>{e.r(o),e.d(o,{Container:()=>a});var n=e(4988),r=e(693),s=e(2061);const i=(0,e(4567).iY)("container");class d extends((0,r.s)({componentName:i,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<style>\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: auto;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t</style>\n\t\t<slot></slot>\n\t"}}const a=(0,s.qC)((0,n.yk)({mappings:{height:{selector:()=>":host"},width:{selector:()=>":host"},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],flexDirection:{},justifyContent:{},alignItems:{},gap:{},flexWrap:{},backgroundColor:{},color:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},boxShadow:{}}}),n.e4,n.Ae)(d);customElements.define(i,a)}}]);

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}\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\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)}}]);

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: initial;\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: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)}}]);

package/package.json

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

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

@@ -53,6 +53,7 @@ const Container = compose(
 			flexWrap: {},
 
 			backgroundColor: {},
+			color: {},
 			borderRadius: {},
 
 			borderColor: {},

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

@@ -39,6 +39,7 @@ overrides = `
 	vaadin-email-field {
 		margin: 0;
 		padding: 0;
+		width: 100%;
 	}
 	vaadin-email-field::part(input-field) {
 		overflow: hidden;

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

@@ -125,7 +125,7 @@ const Passcode = compose(
 	}
 
 	vaadin-text-field::before {
-		height: initial;
+		height: 0;
 	}
 
 	vaadin-text-field[readonly] > input:placeholder-shown {

package/src/theme/components/container.js

@@ -28,6 +28,9 @@ const [helperTheme, helperRefs, helperVars] =
 const container = {
 	...helperTheme,
 	[vars.width]: '100%',
+	[vars.boxShadow]: 'none',
+	[vars.backgroundColor]: globalRefs.colors.surface.light,
+	[vars.color]: globalRefs.colors.surface.contrast,
 	verticalPadding: {
 		sm: { [vars.verticalPadding]: '5px' },
 		md: { [vars.verticalPadding]: '10px' },

package/src/theme/components/divider.js

@@ -1,5 +1,8 @@
 import Divider, { componentName } from '../../components/descope-divider/Divider';
-import { createHelperVars } from '../../helpers/themeHelpers';
+import { createHelperVars, getThemeRefs } from '../../helpers/themeHelpers';
+import globals from '../globals';
+
+const globalRefs = getThemeRefs(globals);
 
 const vars = Divider.cssVarList;
 
@@ -7,13 +10,11 @@ const thickness = '2px'
 const textPaddingSize = '10px'
 const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName);
 
-
 const divider = {
 	...helperTheme,
 	[vars.alignItems]: 'center',
 	[vars.dividerHeight]: helperRefs.thickness,
-	[vars.backgroundColor]: 'currentColor',
-	[vars.opacity]: '0.2',
+	[vars.backgroundColor]: globalRefs.colors.surface.main,
 	[vars.textPadding]: `0 ${helperRefs.textPaddingSize}`,
 	[vars.width]: '100%',
 	[vars.flexDirection]: 'row',

package/src/theme/components/textField.js

@@ -43,7 +43,7 @@ export const textField = (vars) => ({
 	[vars.borderWidth]: '1px',
 	[vars.borderStyle]: 'solid',
 	[vars.borderColor]: 'transparent',
-	[vars.borderRadius]: globalRefs.radius.sm,
+	[vars.borderRadius]: globalRefs.radius.xs,
 
 	_disabled: {
 		[vars.color]: globalRefs.colors.surface.dark,

package/src/theme/globals.js

@@ -14,44 +14,82 @@ export const colors = genColors({
 });
 
 const fonts = {
-	font1: ['Roboto', 'sans-serif'],
-	font2: ['Oswald', 'serif']
+	font1: {
+		family: [
+			"Roboto",
+			"ui-sans-serif",
+			"system-ui",
+			"-apple-system",
+			"BlinkMacSystemFont",
+			"Segoe UI",
+			"Helvetica Neue",
+			"Arial",
+			"Noto Sans",
+			"sans-serif",
+			"Apple Color Emoji",
+			"Segoe UI Emoji",
+			"Segoe UI Symbol",
+			"Noto Color Emoji"
+		],
+		label: "Roboto",
+		url: "https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900"
+	},
+	font2: {
+		family: [
+			"ui-sans-serif",
+			"system-ui",
+			"-apple-system",
+			"BlinkMacSystemFont",
+			"Segoe UI",
+			"Roboto",
+			"Helvetica Neue",
+			"Arial",
+			"Noto Sans",
+			"sans-serif",
+			"Apple Color Emoji",
+			"Segoe UI Emoji",
+			"Segoe UI Symbol",
+			"Noto Color Emoji"
+		],
+		label: "Sans Serif"
+	}
 };
+
 const fontsRef = getThemeRefs({ fonts }).fonts;
 
 const typography = {
 	h1: {
-		font: fontsRef.font1,
+		font: fontsRef.font1.family,
 		weight: '900',
 		size: '48px'
 	},
 	h2: {
-		font: fontsRef.font1,
+		font: fontsRef.font1.family,
 		weight: '800',
 		size: '38px'
 	},
 	h3: {
-		font: fontsRef.font1,
+		font: fontsRef.font1.family,
 		weight: '600',
 		size: '28px'
 	},
 	subtitle1: {
-		font: fontsRef.font2,
+		font: fontsRef.font2.family,
 		weight: '500',
 		size: '22px'
 	},
 	subtitle2: {
-		font: fontsRef.font2,
+		font: fontsRef.font2.family,
 		weight: '400',
 		size: '20px'
 	},
 	body1: {
-		font: fontsRef.font1,
+		font: fontsRef.font1.family,
 		weight: '300',
 		size: '16px'
 	},
 	body2: {
-		font: fontsRef.font1,
+		font: fontsRef.font1.family,
 		weight: '200',
 		size: '14px'
 	}
@@ -66,15 +104,19 @@ const spacing = {
 };
 
 const border = {
-	sm: '1px',
-	md: '2px',
-	lg: '3px'
+	xs: '1px',
+	sm: '2px',
+	md: '3px',
+	lg: '4px',
+	xl: '5px'
 };
 
 const radius = {
-	sm: '5px',
-	md: '25px',
-	lg: '50px'
+	xs: '5px',
+	sm: '10px',
+	md: '15px',
+	lg: '20px',
+	xl: '25px'
 };
 
 const shadow = {