@descope/web-components-ui 1.0.121 → 1.0.123

package/dist/index.esm.js

@@ -1353,6 +1353,7 @@ const resetInputOverrides = (name, cssVarList) => `
     ${resetInputPlaceholder(name)}
     ${resetInputField(name)}
     ${resetInputAutoFill(name, cssVarList)}
+    ${resetInputFieldInvalidBackgroundColor(name)}
 
     ${name}::before {
 		height: unset;
@@ -1425,6 +1426,12 @@ const resetInputReadonlyStyle = (name) => `
     }
 `;
 
+const resetInputFieldInvalidBackgroundColor = (name) => `
+    ${name}::part(input-field)::after {
+        background: none;
+    }
+`;
+
 var commonStyles = `
 :host {
 	display: inline-flex;
@@ -3129,6 +3136,7 @@ const ComboBoxClass = compose(
 		selector: '',
 		mappings: {
 			backgroundColor: { selector: 'vaadin-combo-box-scroller' },
+			fontFamily: { selector: 'vaadin-combo-box-item' },
 			// TODO: this mapping doesn't work, needs fixing.
 			cursor: { selector: 'vaadin-combo-box-item' },
 		},
@@ -4704,7 +4712,11 @@ const PhoneFieldClass = compose(
 			fontFamily: [
 				label$1,
 				errorMessage$1,
-				helperText$1
+				helperText$1,
+				{
+					...countryCodeInput,
+					property: ComboBoxClass.cssVarList.overlay.fontFamily
+				}
 			],
 			hostWidth: [
 				{ ...host$1, property: 'width' },
@@ -4835,6 +4847,8 @@ const PhoneFieldClass = compose(
 
 			${resetInputFieldDefaultWidth()}
 			${resetInputCursor('vaadin-text-field')}
+			${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}
+		
 		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$3
@@ -5508,15 +5522,15 @@ const globals = {
 };
 const vars$m = getThemeVars(globals);
 
-const globalRefs$c = getThemeRefs(globals);
+const globalRefs$b = getThemeRefs(globals);
 const compVars$2 = ButtonClass.cssVarList;
 
 const mode = {
-	primary: globalRefs$c.colors.primary,
-	secondary: globalRefs$c.colors.secondary,
-	success: globalRefs$c.colors.success,
-	error: globalRefs$c.colors.error,
-	surface: globalRefs$c.colors.surface
+	primary: globalRefs$b.colors.primary,
+	secondary: globalRefs$b.colors.secondary,
+	success: globalRefs$b.colors.success,
+	error: globalRefs$b.colors.error,
+	surface: globalRefs$b.colors.surface
 };
 
 const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$o);
@@ -5527,11 +5541,11 @@ const horizontalPaddingRatio = 2;
 const button = {
 	...helperTheme$3,
 
-	[compVars$2.fontFamily]: globalRefs$c.fonts.font1.family,
+	[compVars$2.fontFamily]: globalRefs$b.fonts.font1.family,
 
 	[compVars$2.cursor]: 'pointer',
 
-	[compVars$2.borderRadius]: globalRefs$c.radius.sm,
+	[compVars$2.borderRadius]: globalRefs$b.radius.sm,
 	[compVars$2.borderWidth]: '2px',
 	[compVars$2.borderStyle]: 'solid',
 	[compVars$2.borderColor]: 'transparent',
@@ -5614,28 +5628,28 @@ var button$1 = /*#__PURE__*/Object.freeze({
 });
 
 const componentName = getComponentName('input-wrapper');
-const globalRefs$b = getThemeRefs(globals);
+const globalRefs$a = getThemeRefs(globals);
 
 const [theme$1, refs, vars$k] = createHelperVars({
-    labelTextColor: globalRefs$b.colors.surface.contrast,
-    valueTextColor: globalRefs$b.colors.surface.contrast,
-    placeholderTextColor: globalRefs$b.colors.surface.main,
+    labelTextColor: globalRefs$a.colors.surface.contrast,
+    valueTextColor: globalRefs$a.colors.surface.contrast,
+    placeholderTextColor: globalRefs$a.colors.surface.main,
     requiredIndicator: "'*'",
 
-    borderWidth: globalRefs$b.border.xs,
-    borderRadius: globalRefs$b.radius.xs,
+    borderWidth: globalRefs$a.border.xs,
+    borderRadius: globalRefs$a.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$b.border.sm,
+    outlineWidth: globalRefs$a.border.sm,
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
 
     inputHeight: '2em',
 
-    backgroundColor: globalRefs$b.colors.surface.light,
+    backgroundColor: globalRefs$a.colors.surface.light,
 
-    fontFamily: globalRefs$b.fonts.font1.family,
+    fontFamily: globalRefs$a.fonts.font1.family,
 
     size: {
         xs: { fontSize: '8px' },
@@ -5650,31 +5664,26 @@ const [theme$1, refs, vars$k] = createHelperVars({
     },
 
     _focused: {
-        outlineColor: globalRefs$b.colors.surface.main,
+        outlineColor: globalRefs$a.colors.surface.main,
         _invalid: {
-            outlineColor: globalRefs$b.colors.error.light,
+            outlineColor: globalRefs$a.colors.error.main,
         }
     },
 
     _bordered: {
-        borderColor: globalRefs$b.colors.surface.main,
+        outlineWidth: globalRefs$a.border.xs,
+        borderColor: globalRefs$a.colors.surface.main,
         borderStyle: 'solid',
         _invalid: {
-            borderColor: globalRefs$b.colors.error.main,
+            borderColor: globalRefs$a.colors.error.main,
         }
     },
 
     _disabled: {
-        labelTextColor: globalRefs$b.colors.surface.main,
-        valueTextColor: globalRefs$b.colors.surface.dark,
-        placeholderTextColor: globalRefs$b.colors.surface.dark,
-        backgroundColor: globalRefs$b.colors.surface.main
-    },
-
-    _invalid: {
-        labelTextColor: globalRefs$b.colors.error.main,
-        valueTextColor: globalRefs$b.colors.error.main,
-        placeholderTextColor: globalRefs$b.colors.error.light,
+        labelTextColor: globalRefs$a.colors.surface.main,
+        valueTextColor: globalRefs$a.colors.surface.dark,
+        placeholderTextColor: globalRefs$a.colors.surface.dark,
+        backgroundColor: globalRefs$a.colors.surface.main
     }
 }, componentName);
 
@@ -5798,7 +5807,7 @@ var emailField$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$g
 });
 
-const globalRefs$a = getThemeRefs(globals);
+const globalRefs$9 = getThemeRefs(globals);
 const vars$f = TextAreaClass.cssVarList;
 
 const textArea = {
@@ -5821,7 +5830,7 @@ const textArea = {
 	[vars$f.inputResizeType]: 'vertical',
 
 	_disabled: {
-		[vars$f.inputBackgroundColor]: globalRefs$a.colors.surface.light,
+		[vars$f.inputBackgroundColor]: globalRefs$9.colors.surface.light,
 	},
 
 	_readonly: {
@@ -5835,7 +5844,7 @@ var textArea$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$f
 });
 
-const globalRefs$9 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals);
 const vars$e = CheckboxClass.cssVarList;
 
 const checkbox = {
@@ -5851,16 +5860,16 @@ const checkbox = {
 	[vars$e.inputOutlineColor]: refs.outlineColor,
 	[vars$e.inputOutlineStyle]: refs.outlineStyle,
 	[vars$e.inputBorderRadius]: refs.borderRadius,
-	[vars$e.inputBackgroundColor]: globalRefs$9.colors.surface.main,
+	[vars$e.inputBackgroundColor]: globalRefs$8.colors.surface.main,
 	[vars$e.inputSize]: '2em',
 
 	_checked: {
-		[vars$e.inputBackgroundColor]: globalRefs$9.colors.primary.main,
-		[vars$e.inputValueTextColor]: globalRefs$9.colors.primary.contrast,
+		[vars$e.inputBackgroundColor]: globalRefs$8.colors.primary.main,
+		[vars$e.inputValueTextColor]: globalRefs$8.colors.primary.contrast,
 	},
 
 	_disabled: {
-		[vars$e.inputBackgroundColor]: globalRefs$9.colors.surface.main,
+		[vars$e.inputBackgroundColor]: globalRefs$8.colors.surface.main,
 	},
 };
 
@@ -5873,7 +5882,7 @@ var checkbox$1 = /*#__PURE__*/Object.freeze({
 const knobMargin = '2px';
 const checkboxHeight = '1.25em';
 
-const globalRefs$8 = getThemeRefs(globals);
+const globalRefs$7 = getThemeRefs(globals);
 const vars$d = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
@@ -5887,9 +5896,9 @@ const switchToggle = {
 
     [vars$d.trackBorderStyle]: refs.borderStyle,
     [vars$d.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-    [vars$d.trackBorderColor]: globalRefs$8.colors.surface.contrast,
+    [vars$d.trackBorderColor]: globalRefs$7.colors.surface.contrast,
     [vars$d.trackBackgroundColor]: 'none',
-    [vars$d.trackBorderRadius]: globalRefs$8.radius.md,
+    [vars$d.trackBorderRadius]: globalRefs$7.radius.md,
     [vars$d.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
     [vars$d.trackHeight]: checkboxHeight,
 
@@ -5909,21 +5918,21 @@ const switchToggle = {
     [vars$d.hostWidth]: refs.width,
 
     _checked: {
-        [vars$d.trackBorderColor]: globalRefs$8.colors.primary.main,
+        [vars$d.trackBorderColor]: globalRefs$7.colors.primary.main,
         [vars$d.knobLeftOffset]: `calc(100% - var(${vars$d.knobSize}) - ${knobMargin})`,
-        [vars$d.knobColor]: globalRefs$8.colors.primary.main,
+        [vars$d.knobColor]: globalRefs$7.colors.primary.main,
         [vars$d.knobTextColor]: refs.valueTextColor,
     },
 
     _disabled: {
-        [vars$d.knobColor]: globalRefs$8.colors.surface.main,
-        [vars$d.trackBorderColor]: globalRefs$8.colors.surface.main,
-        [vars$d.trackBackgroundColor]: globalRefs$8.colors.surface.light,
+        [vars$d.knobColor]: globalRefs$7.colors.surface.main,
+        [vars$d.trackBorderColor]: globalRefs$7.colors.surface.main,
+        [vars$d.trackBackgroundColor]: globalRefs$7.colors.surface.light,
     },
 
     _invalid: {
-        [vars$d.trackBorderColor]: globalRefs$8.colors.error.main,
-        [vars$d.knobColor]: globalRefs$8.colors.error.main,
+        [vars$d.trackBorderColor]: globalRefs$7.colors.error.main,
+        [vars$d.knobColor]: globalRefs$7.colors.error.main,
     },
 };
 
@@ -5933,7 +5942,7 @@ var switchToggle$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$d
 });
 
-const globalRefs$7 = getThemeRefs(globals);
+const globalRefs$6 = getThemeRefs(globals);
 
 const compVars$1 = ContainerClass.cssVarList;
 
@@ -5963,8 +5972,8 @@ const container = {
 
 	[compVars$1.hostWidth]: '100%',
 	[compVars$1.boxShadow]: 'none',
-	[compVars$1.backgroundColor]: globalRefs$7.colors.surface.light,
-	[compVars$1.color]: globalRefs$7.colors.surface.contrast,
+	[compVars$1.backgroundColor]: globalRefs$6.colors.surface.light,
+	[compVars$1.color]: globalRefs$6.colors.surface.contrast,
 
 	verticalPadding: {
 		sm: { [compVars$1.verticalPadding]: '5px' },
@@ -6009,23 +6018,23 @@ const container = {
 	},
 
 	shadow: {
-		sm: { [compVars$1.boxShadow]: `${globalRefs$7.shadow.wide.sm} ${shadowColor}, ${globalRefs$7.shadow.narrow.sm} ${shadowColor}` },
-		md: { [compVars$1.boxShadow]: `${globalRefs$7.shadow.wide.md} ${shadowColor}, ${globalRefs$7.shadow.narrow.md} ${shadowColor}` },
-		lg: { [compVars$1.boxShadow]: `${globalRefs$7.shadow.wide.lg} ${shadowColor}, ${globalRefs$7.shadow.narrow.lg} ${shadowColor}` },
-		xl: { [compVars$1.boxShadow]: `${globalRefs$7.shadow.wide.xl} ${shadowColor}, ${globalRefs$7.shadow.narrow.xl} ${shadowColor}` },
+		sm: { [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide.sm} ${shadowColor}, ${globalRefs$6.shadow.narrow.sm} ${shadowColor}` },
+		md: { [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide.md} ${shadowColor}, ${globalRefs$6.shadow.narrow.md} ${shadowColor}` },
+		lg: { [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide.lg} ${shadowColor}, ${globalRefs$6.shadow.narrow.lg} ${shadowColor}` },
+		xl: { [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${shadowColor}` },
 		'2xl': {
 			[helperVars$1.shadowColor]: '#00000050', // mimic daisyUI shadow settings 
-			[compVars$1.boxShadow]: `${globalRefs$7.shadow.wide['2xl']} ${shadowColor}`
+			[compVars$1.boxShadow]: `${globalRefs$6.shadow.wide['2xl']} ${shadowColor}`
 		},
 	},
 
 	borderRadius: {
-		sm: { [compVars$1.borderRadius]: globalRefs$7.radius.sm },
-		md: { [compVars$1.borderRadius]: globalRefs$7.radius.md },
-		lg: { [compVars$1.borderRadius]: globalRefs$7.radius.lg },
-		xl: { [compVars$1.borderRadius]: globalRefs$7.radius.xl },
-		'2xl': { [compVars$1.borderRadius]: globalRefs$7.radius['2xl'] },
-		'3xl': { [compVars$1.borderRadius]: globalRefs$7.radius['3xl'] },
+		sm: { [compVars$1.borderRadius]: globalRefs$6.radius.sm },
+		md: { [compVars$1.borderRadius]: globalRefs$6.radius.md },
+		lg: { [compVars$1.borderRadius]: globalRefs$6.radius.lg },
+		xl: { [compVars$1.borderRadius]: globalRefs$6.radius.xl },
+		'2xl': { [compVars$1.borderRadius]: globalRefs$6.radius['2xl'] },
+		'3xl': { [compVars$1.borderRadius]: globalRefs$6.radius['3xl'] },
 	}
 };
 
@@ -6052,63 +6061,63 @@ var logo$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$b
 });
 
-const globalRefs$6 = getThemeRefs(globals);
+const globalRefs$5 = getThemeRefs(globals);
 const vars$a = TextClass.cssVarList;
 
 const text = {
 	[vars$a.textLineHeight]: '1em',
 	[vars$a.textAlign]: 'left',
-	[vars$a.textColor]: globalRefs$6.colors.surface.dark,
+	[vars$a.textColor]: globalRefs$5.colors.surface.dark,
 	variant: {
 		h1: {
-			[vars$a.fontSize]: globalRefs$6.typography.h1.size,
-			[vars$a.fontWeight]: globalRefs$6.typography.h1.weight,
-			[vars$a.fontFamily]: globalRefs$6.typography.h1.font
+			[vars$a.fontSize]: globalRefs$5.typography.h1.size,
+			[vars$a.fontWeight]: globalRefs$5.typography.h1.weight,
+			[vars$a.fontFamily]: globalRefs$5.typography.h1.font
 		},
 		h2: {
-			[vars$a.fontSize]: globalRefs$6.typography.h2.size,
-			[vars$a.fontWeight]: globalRefs$6.typography.h2.weight,
-			[vars$a.fontFamily]: globalRefs$6.typography.h2.font
+			[vars$a.fontSize]: globalRefs$5.typography.h2.size,
+			[vars$a.fontWeight]: globalRefs$5.typography.h2.weight,
+			[vars$a.fontFamily]: globalRefs$5.typography.h2.font
 		},
 		h3: {
-			[vars$a.fontSize]: globalRefs$6.typography.h3.size,
-			[vars$a.fontWeight]: globalRefs$6.typography.h3.weight,
-			[vars$a.fontFamily]: globalRefs$6.typography.h3.font
+			[vars$a.fontSize]: globalRefs$5.typography.h3.size,
+			[vars$a.fontWeight]: globalRefs$5.typography.h3.weight,
+			[vars$a.fontFamily]: globalRefs$5.typography.h3.font
 		},
 		subtitle1: {
-			[vars$a.fontSize]: globalRefs$6.typography.subtitle1.size,
-			[vars$a.fontWeight]: globalRefs$6.typography.subtitle1.weight,
-			[vars$a.fontFamily]: globalRefs$6.typography.subtitle1.font
+			[vars$a.fontSize]: globalRefs$5.typography.subtitle1.size,
+			[vars$a.fontWeight]: globalRefs$5.typography.subtitle1.weight,
+			[vars$a.fontFamily]: globalRefs$5.typography.subtitle1.font
 		},
 		subtitle2: {
-			[vars$a.fontSize]: globalRefs$6.typography.subtitle2.size,
-			[vars$a.fontWeight]: globalRefs$6.typography.subtitle2.weight,
-			[vars$a.fontFamily]: globalRefs$6.typography.subtitle2.font
+			[vars$a.fontSize]: globalRefs$5.typography.subtitle2.size,
+			[vars$a.fontWeight]: globalRefs$5.typography.subtitle2.weight,
+			[vars$a.fontFamily]: globalRefs$5.typography.subtitle2.font
 		},
 		body1: {
-			[vars$a.fontSize]: globalRefs$6.typography.body1.size,
-			[vars$a.fontWeight]: globalRefs$6.typography.body1.weight,
-			[vars$a.fontFamily]: globalRefs$6.typography.body1.font
+			[vars$a.fontSize]: globalRefs$5.typography.body1.size,
+			[vars$a.fontWeight]: globalRefs$5.typography.body1.weight,
+			[vars$a.fontFamily]: globalRefs$5.typography.body1.font
 		},
 		body2: {
-			[vars$a.fontSize]: globalRefs$6.typography.body2.size,
-			[vars$a.fontWeight]: globalRefs$6.typography.body2.weight,
-			[vars$a.fontFamily]: globalRefs$6.typography.body2.font
+			[vars$a.fontSize]: globalRefs$5.typography.body2.size,
+			[vars$a.fontWeight]: globalRefs$5.typography.body2.weight,
+			[vars$a.fontFamily]: globalRefs$5.typography.body2.font
 		}
 	},
 
 	mode: {
 		primary: {
-			[vars$a.textColor]: globalRefs$6.colors.primary.main
+			[vars$a.textColor]: globalRefs$5.colors.primary.main
 		},
 		secondary: {
-			[vars$a.textColor]: globalRefs$6.colors.secondary.main
+			[vars$a.textColor]: globalRefs$5.colors.secondary.main
 		},
 		error: {
-			[vars$a.textColor]: globalRefs$6.colors.error.main
+			[vars$a.textColor]: globalRefs$5.colors.error.main
 		},
 		success: {
-			[vars$a.textColor]: globalRefs$6.colors.success.main
+			[vars$a.textColor]: globalRefs$5.colors.success.main
 		}
 	},
 
@@ -6141,7 +6150,7 @@ var text$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$a
 });
 
-const globalRefs$5 = getThemeRefs(globals);
+const globalRefs$4 = getThemeRefs(globals);
 const vars$9 = LinkClass.cssVarList;
 
 const link = {
@@ -6150,10 +6159,10 @@ const link = {
 	[vars$9.textUnderlineWidth]: '2px',
 	[vars$9.textUnderlineStyle]: 'solid',
 	[vars$9.textUnderlineColor]: 'transparent',
-	[vars$9.textColor]: globalRefs$5.colors.primary.main,
+	[vars$9.textColor]: globalRefs$4.colors.primary.main,
 
 	_hover: {
-		[vars$9.textUnderlineColor]: globalRefs$5.colors.primary.main
+		[vars$9.textUnderlineColor]: globalRefs$4.colors.primary.main
 	},
 
 	textAlign: {
@@ -6172,16 +6181,16 @@ const link = {
 
 	mode: {
 		primary: {
-			[vars$9.textColor]: globalRefs$5.colors.primary.main,
+			[vars$9.textColor]: globalRefs$4.colors.primary.main,
 		},
 		secondary: {
-			[vars$9.textColor]: globalRefs$5.colors.secondary.main,
+			[vars$9.textColor]: globalRefs$4.colors.secondary.main,
 		},
 		error: {
-			[vars$9.textColor]: globalRefs$5.colors.error.main,
+			[vars$9.textColor]: globalRefs$4.colors.error.main,
 		},
 		success: {
-			[vars$9.textColor]: globalRefs$5.colors.success.main,
+			[vars$9.textColor]: globalRefs$4.colors.success.main,
 		}
 	}
 };
@@ -6192,7 +6201,7 @@ var link$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$9
 });
 
-const globalRefs$4 = getThemeRefs(globals);
+const globalRefs$3 = getThemeRefs(globals);
 const compVars = DividerClass.cssVarList;
 
 const [
@@ -6211,7 +6220,7 @@ const divider = {
 	[compVars.flexDirection]: 'row',
 	[compVars.alignSelf]: 'stretch',
 	[compVars.hostWidth]: '100%',
-	[compVars.stripeColor]: globalRefs$4.colors.surface.main,
+	[compVars.stripeColor]: globalRefs$3.colors.surface.main,
 	[compVars.stripeColorOpacity]: '0.5',
 	[compVars.stripeHorizontalThickness]: helperRefs$1.thickness,
 	[compVars.labelTextWidth]: 'fit-content',
@@ -6241,7 +6250,7 @@ var divider$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$8
 });
 
-const globalRefs$3 = getThemeRefs(globals);
+getThemeRefs(globals);
 const vars$7 = PasscodeClass.cssVarList;
 
 const passcode = {
@@ -6255,15 +6264,11 @@ const passcode = {
 	[vars$7.digitSpacing]: '0',
 	[vars$7.hostWidth]: refs.width,
 	[vars$7.digitOutlineColor]: 'transparent',
-	[vars$7.digitOutlineWidth]: '2px',
-	[vars$7.focusedDigitFieldOutlineColor]: globalRefs$3.colors.surface.main,
+	[vars$7.digitOutlineWidth]: refs.outlineWidth,
+	[vars$7.focusedDigitFieldOutlineColor]: refs.outlineColor,
 
 	_hideCursor: {
 		[vars$7.digitCaretTextColor]: 'transparent',
-	},
-
-	_invalid: {
-		[vars$7.focusedDigitFieldOutlineColor]: globalRefs$3.colors.error.light,
 	}
 };
 
@@ -6394,10 +6399,6 @@ const comboBox = {
 		[vars$4.inputDropdownButtonCursor]: 'default'
 	},
 
-	_invalid: {
-		[vars$4.inputDropdownButtonColor]: globalRefs.colors.error.main
-	},
-
 	// [vars.overlayCursor]: 'pointer',
 	// [vars.overlayBackground]: globalRefs.colors.surface.light,
 	// [vars.overlayBorder]: `2px solid red`,