@descope/web-components-ui 1.0.132 → 1.0.134

package/dist/index.esm.js

@@ -1443,6 +1443,7 @@ const booleanFieldMixin = (superclass) =>
                     'size',
                     'label',
                     'invalid',
+                    'disabled'
                 ]
             });
 
@@ -1460,6 +1461,7 @@ ${resetInputFieldDefaultWidth()}
 
 .wrapper {
 	display: flex;
+	box-sizing: border-box;
 }
 
 vaadin-text-field {
@@ -1562,6 +1564,7 @@ const CheckboxClass = compose(
 			labelTextColor: [
 				{ ...label$8, property: 'color' },
 				{ ...requiredIndicator$7, property: 'color' },
+				{ ...label$8, property: '-webkit-text-fill-color' }
 			],
 			labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
 
@@ -1575,19 +1578,26 @@ const CheckboxClass = compose(
 			],
 			inputValueTextColor: { ...checkboxSurface, property: 'color' },
 			inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
+
 			inputBorderRadius: { ...checkboxElement, property: 'border-radius' },
+			inputBorderWidth: { ...checkboxElement, property: 'border-width' },
+			inputBorderOffset: { ...checkboxElement, property: 'border-offset' },
+			inputBorderColor: { ...checkboxElement, property: 'border-color' },
+			inputBorderStyle: { ...checkboxElement, property: 'border-style' },
+
 			inputOutlineWidth: { ...checkboxElement, property: 'outline-width' },
 			inputOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
 			inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
 			inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
+
 			inputSize: [
 				{ ...checkboxElement, property: 'width' },
-				{ ...label$8, property: 'margin-left' },
 				{ ...checkboxElement, property: 'height' },
 				{ ...checkboxSurface, property: 'font-size' },
 				{ ...component$1, property: 'font-size' },
+				{ ...checkboxHiddenLabel$1, property: 'line-height' },
+				{ ...label$8, property: 'margin-left' },
 				{ ...label$8, property: 'line-height' },
-				{ ...checkboxHiddenLabel$1, property: 'line-height' }
 			],
 		},
 	}),
@@ -1689,6 +1699,7 @@ const SwitchToggleClass = compose(
 			labelTextColor: [
 				{ ...label$7, property: 'color' },
 				{ ...requiredIndicator$6, property: 'color' },
+				{ ...label$7, property: '-webkit-text-fill-color' }
 			],
 			labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
 			inputOutlineWidth: { ...track, property: 'outline-width' },
@@ -1714,9 +1725,6 @@ const SwitchToggleClass = compose(
 			vaadin-checkbox[active]::part(checkbox) {
 				transform: none;
 			}
-			vaadin-checkbox[checked]::part(checkbox) {
-				background: none;
-			}
 			vaadin-checkbox::part(checkbox)::after {
 				position: absolute;
 				opacity: 1;
@@ -2172,6 +2180,10 @@ class RawLink extends createBaseClass({ componentName: componentName$e, baseSele
 		}
 		:host a {
 			display: inline;
+			text-decoration: none;
+		}
+		:host a:hover {
+			text-decoration: underline;
 		}
 		</style>
 		<div>
@@ -2215,10 +2227,7 @@ const LinkClass = compose(
 				{ ...text$2, property: TextClass.cssVarList.textColor }
 			],
 			cursor: anchor,
-			textUnderlineWidth: { ...anchor, property: 'border-bottom-width' },
-			textUnderlineStyle: { ...anchor, property: 'border-bottom-style' },
-			textUnderlineColor: { ...anchor, property: 'border-bottom-color' }
-		},
+		}
 	}),
 	draggableMixin,
 	componentNameValidationMixin
@@ -5559,15 +5568,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);
@@ -5578,11 +5587,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',
@@ -5664,19 +5673,19 @@ 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
@@ -5687,9 +5696,9 @@ const [theme$1, refs, vars$k] = createHelperVars({
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    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: '12px' },
@@ -5703,26 +5712,27 @@ 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.main,
+            outlineColor: globalRefs$a.colors.error.main,
         }
     },
 
     _bordered: {
-        outlineWidth: globalRefs$b.border.xs,
-        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
+        labelTextColor: globalRefs$a.colors.surface.main,
+        borderColor: globalRefs$a.colors.surface.main,
+        valueTextColor: globalRefs$a.colors.surface.dark,
+        placeholderTextColor: globalRefs$a.colors.surface.dark,
+        backgroundColor: globalRefs$a.colors.surface.main
     }
 }, componentName);
 
@@ -5764,7 +5774,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$j
 });
 
-const globalRefs$a = getThemeRefs(globals);
+const globalRefs$9 = getThemeRefs(globals);
 const vars$i = PasswordClass.cssVarList;
 
 const password = {
@@ -5786,7 +5796,7 @@ const password = {
 	[vars$i.inputOutlineStyle]: refs.outlineStyle,
 	[vars$i.inputOutlineColor]: refs.outlineColor,
 	[vars$i.inputOutlineOffset]: refs.outlineOffset,
-	[vars$i.revealButtonOffset]: globalRefs$a.spacing.md,
+	[vars$i.revealButtonOffset]: globalRefs$9.spacing.md,
 	[vars$i.revealButtonSize]: refs.toggleButtonSize
 };
 
@@ -5856,7 +5866,7 @@ var emailField$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$g
 });
 
-const globalRefs$9 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals);
 const vars$f = TextAreaClass.cssVarList;
 
 const textArea = {
@@ -5880,7 +5890,7 @@ const textArea = {
 	[vars$f.inputResizeType]: 'vertical',
 
 	_disabled: {
-		[vars$f.inputBackgroundColor]: globalRefs$9.colors.surface.light,
+		[vars$f.inputBackgroundColor]: globalRefs$8.colors.surface.light,
 	},
 
 	_readonly: {
@@ -5894,7 +5904,7 @@ var textArea$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$f
 });
 
-const globalRefs$8 = getThemeRefs(globals);
+getThemeRefs(globals);
 const vars$e = CheckboxClass.cssVarList;
 
 const checkbox = {
@@ -5904,22 +5914,25 @@ const checkbox = {
 	[vars$e.labelTextColor]: refs.labelTextColor,
 	[vars$e.labelRequiredIndicator]: refs.requiredIndicator,
 	[vars$e.labelFontWeight]: '400',
-	[vars$e.labelSpacing]: '0.5em',
+	[vars$e.labelSpacing]: '0.75em',
 	[vars$e.inputOutlineWidth]: refs.outlineWidth,
 	[vars$e.inputOutlineOffset]: refs.outlineOffset,
 	[vars$e.inputOutlineColor]: refs.outlineColor,
 	[vars$e.inputOutlineStyle]: refs.outlineStyle,
 	[vars$e.inputBorderRadius]: refs.borderRadius,
-	[vars$e.inputBackgroundColor]: globalRefs$8.colors.surface.main,
+	[vars$e.inputBorderColor]: refs.borderColor,
+	[vars$e.inputBorderWidth]: refs.borderWidth,
+	[vars$e.inputBorderStyle]: refs.borderStyle,
+	[vars$e.inputBackgroundColor]: refs.inputBackgroundColor,
 	[vars$e.inputSize]: '2em',
 
 	_checked: {
-		[vars$e.inputBackgroundColor]: globalRefs$8.colors.primary.main,
-		[vars$e.inputValueTextColor]: globalRefs$8.colors.primary.contrast,
+		[vars$e.inputBackgroundColor]: refs.backgroundColor,
+		[vars$e.inputValueTextColor]: refs.valueTextColor,
 	},
 
 	_disabled: {
-		[vars$e.inputBackgroundColor]: globalRefs$8.colors.surface.main,
+		[vars$e.labelTextColor]: refs.labelTextColor,
 	},
 };
 
@@ -5946,7 +5959,7 @@ 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$7.colors.surface.contrast,
+    [vars$d.trackBorderColor]: refs.borderColor,
     [vars$d.trackBackgroundColor]: 'none',
     [vars$d.trackBorderRadius]: globalRefs$7.radius.md,
     [vars$d.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
@@ -5968,16 +5981,22 @@ const switchToggle = {
     [vars$d.hostWidth]: refs.width,
 
     _checked: {
-        [vars$d.trackBorderColor]: globalRefs$7.colors.primary.main,
+        [vars$d.trackBorderColor]: refs.borderColor,
+        [vars$d.trackBackgroundColor]: refs.backgroundColor,
         [vars$d.knobLeftOffset]: `calc(100% - var(${vars$d.knobSize}) - ${knobMargin})`,
-        [vars$d.knobColor]: globalRefs$7.colors.primary.main,
+        [vars$d.knobColor]: refs.valueTextColor,
         [vars$d.knobTextColor]: refs.valueTextColor,
     },
 
     _disabled: {
-        [vars$d.knobColor]: globalRefs$7.colors.surface.main,
+        [vars$d.knobColor]: globalRefs$7.colors.surface.light,
         [vars$d.trackBorderColor]: globalRefs$7.colors.surface.main,
-        [vars$d.trackBackgroundColor]: globalRefs$7.colors.surface.light,
+        [vars$d.trackBackgroundColor]: globalRefs$7.colors.surface.main,
+        [vars$d.labelTextColor]: refs.labelTextColor,
+        _checked: {
+            [vars$d.knobColor]: globalRefs$7.colors.surface.light,
+            [vars$d.trackBackgroundColor]: globalRefs$7.colors.surface.main,
+        }
     },
 
     _invalid: {
@@ -6225,10 +6244,6 @@ const link = {
 		[vars$9.hostWidth]: '100%'
 	},
 
-	_hover: {
-		[vars$9.textUnderlineColor]: 'currentColor'
-	},
-
 	mode: {
 		primary: {
 			[vars$9.textColor]: globalRefs$4.colors.primary.main,