@descope/web-components-ui 1.0.92 → 1.0.93

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/web-components-ui",
-	"version": "1.0.92",
+	"version": "1.0.93",
 	"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/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/globals.js

@@ -66,15 +66,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 = {