@descope/web-components-ui 1.0.122 → 1.0.123

package/dist/cjs/index.cjs.js

@@ -1572,15 +1572,15 @@ const loadingIndicatorStyles = `
 	}
 `;
 
-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);
@@ -1591,11 +1591,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',
@@ -1759,6 +1759,7 @@ const resetInputOverrides = (name, cssVarList) => `
     ${resetInputPlaceholder(name)}
     ${resetInputField(name)}
     ${resetInputAutoFill(name, cssVarList)}
+    ${resetInputFieldInvalidBackgroundColor(name)}
 
     ${name}::before {
 		height: unset;
@@ -1831,6 +1832,12 @@ const resetInputReadonlyStyle = (name) => `
     }
 `;
 
+const resetInputFieldInvalidBackgroundColor = (name) => `
+    ${name}::part(input-field)::after {
+        background: none;
+    }
+`;
+
 const componentName$n = getComponentName('text-field');
 
 const observedAttrs = ['type'];
@@ -1883,28 +1890,28 @@ const TextFieldClass = compose(
 );
 
 const componentName$m = 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' },
@@ -1919,31 +1926,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$m);
 
@@ -2357,7 +2359,7 @@ const TextAreaClass = compose(
 	})
 );
 
-const globalRefs$a = getThemeRefs(globals);
+const globalRefs$9 = getThemeRefs(globals);
 const vars$f = TextAreaClass.cssVarList;
 
 const textArea = {
@@ -2380,7 +2382,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: {
@@ -2600,7 +2602,7 @@ const CheckboxClass = compose(
 	})
 );
 
-const globalRefs$9 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals);
 const vars$e = CheckboxClass.cssVarList;
 
 const checkbox = {
@@ -2616,16 +2618,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,
 	},
 };
 
@@ -2756,7 +2758,7 @@ const SwitchToggleClass = compose(
 const knobMargin = '2px';
 const checkboxHeight = '1.25em';
 
-const globalRefs$8 = getThemeRefs(globals);
+const globalRefs$7 = getThemeRefs(globals);
 const vars$d = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
@@ -2770,9 +2772,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,
 
@@ -2792,21 +2794,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,
     },
 };
 
@@ -2877,7 +2879,7 @@ const ContainerClass = compose(
 	componentNameValidationMixin
 )(RawContainer);
 
-const globalRefs$7 = getThemeRefs(globals);
+const globalRefs$6 = getThemeRefs(globals);
 
 const compVars$1 = ContainerClass.cssVarList;
 
@@ -2907,8 +2909,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' },
@@ -2953,23 +2955,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'] },
 	}
 };
 
@@ -3087,63 +3089,63 @@ const TextClass = compose(
 	componentNameValidationMixin
 )(RawText);
 
-const globalRefs$6 = getThemeRefs(globals);
+const globalRefs$5 = getThemeRefs(globals);
 const vars$a = TextClass.cssVarList;
 
 const text$2 = {
 	[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
 		}
 	},
 
@@ -3241,7 +3243,7 @@ const LinkClass = compose(
 	componentNameValidationMixin
 )(RawLink);
 
-const globalRefs$5 = getThemeRefs(globals);
+const globalRefs$4 = getThemeRefs(globals);
 const vars$9 = LinkClass.cssVarList;
 
 const link = {
@@ -3250,10 +3252,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: {
@@ -3272,16 +3274,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,
 		}
 	}
 };
@@ -3394,7 +3396,7 @@ const DividerClass = compose(
 	componentNameValidationMixin
 )(RawDivider);
 
-const globalRefs$4 = getThemeRefs(globals);
+const globalRefs$3 = getThemeRefs(globals);
 const compVars = DividerClass.cssVarList;
 
 const [
@@ -3413,7 +3415,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',
@@ -3617,7 +3619,7 @@ const PasscodeClass = compose(
 	})
 );
 
-const globalRefs$3 = getThemeRefs(globals);
+getThemeRefs(globals);
 const vars$7 = PasscodeClass.cssVarList;
 
 const passcode = {
@@ -3631,15 +3633,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,
 	}
 };
 
@@ -4062,10 +4060,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`,
@@ -5570,6 +5564,8 @@ const PhoneFieldClass = compose(
 
 			${resetInputFieldDefaultWidth()}
 			${resetInputCursor('vaadin-text-field')}
+			${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}
+		
 		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$2