@descope/web-components-ui 1.0.127 → 1.0.129

package/dist/index.esm.js

@@ -2767,6 +2767,7 @@ const {
 	inputField: inputField$3,
 	inputElement,
 	inputElementPlaceholder,
+	revealButtonContainer,
 	revealButtonIcon,
 	label: label$4,
 	requiredIndicator: requiredIndicator$3,
@@ -2777,6 +2778,7 @@ const {
 	inputField: { selector: '::part(input-field)' },
 	inputElement: { selector: '> input' },
 	inputElementPlaceholder: { selector: '> input:placeholder-shown' },
+	revealButtonContainer: { selector: () => '::part(reveal-button)' },
 	revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
 	label: { selector: '::part(label)' },
 	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -2822,6 +2824,8 @@ const PasswordClass = compose(
 				{ ...revealButtonIcon, property: 'color' }
 			],
 			inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
+
+			revealButtonOffset: { ...revealButtonContainer, property: 'margin' }
 		}
 	}),
 	draggableMixin,
@@ -5527,15 +5531,15 @@ const globals = {
 };
 const vars$m = getThemeVars(globals);
 
-const globalRefs$b = getThemeRefs(globals);
+const globalRefs$c = getThemeRefs(globals);
 const compVars$2 = ButtonClass.cssVarList;
 
 const mode = {
-	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
+	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
 };
 
 const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$o);
@@ -5546,11 +5550,11 @@ const horizontalPaddingRatio = 2;
 const button = {
 	...helperTheme$3,
 
-	[compVars$2.fontFamily]: globalRefs$b.fonts.font1.family,
+	[compVars$2.fontFamily]: globalRefs$c.fonts.font1.family,
 
 	[compVars$2.cursor]: 'pointer',
 
-	[compVars$2.borderRadius]: globalRefs$b.radius.sm,
+	[compVars$2.borderRadius]: globalRefs$c.radius.sm,
 	[compVars$2.borderWidth]: '2px',
 	[compVars$2.borderStyle]: 'solid',
 	[compVars$2.borderColor]: 'transparent',
@@ -5566,11 +5570,10 @@ const button = {
 	[compVars$2.outlineColor]: 'transparent',
 
 	size: {
-		xs: { [compVars$2.fontSize]: '8px' },
-		sm: { [compVars$2.fontSize]: '10px' },
-		md: { [compVars$2.fontSize]: '14px' },
-		lg: { [compVars$2.fontSize]: '20px' },
-		xl: { [compVars$2.fontSize]: '25px' }
+		xs: { [compVars$2.fontSize]: '12px' },
+		sm: { [compVars$2.fontSize]: '14px' },
+		md: { [compVars$2.fontSize]: '16px' },
+		lg: { [compVars$2.fontSize]: '18px' }
 	},
 
 	_fullWidth: {
@@ -5633,35 +5636,34 @@ var button$1 = /*#__PURE__*/Object.freeze({
 });
 
 const componentName = getComponentName('input-wrapper');
-const globalRefs$a = getThemeRefs(globals);
+const globalRefs$b = getThemeRefs(globals);
 
 const [theme$1, refs, vars$k] = createHelperVars({
-    labelTextColor: globalRefs$a.colors.surface.contrast,
-    valueTextColor: globalRefs$a.colors.surface.contrast,
-    placeholderTextColor: globalRefs$a.colors.surface.main,
+    labelTextColor: globalRefs$b.colors.surface.contrast,
+    valueTextColor: globalRefs$b.colors.surface.contrast,
+    placeholderTextColor: globalRefs$b.colors.surface.main,
     requiredIndicator: "'*'",
 
-    borderWidth: globalRefs$a.border.xs,
-    borderRadius: globalRefs$a.radius.xs,
+    borderWidth: globalRefs$b.border.xs,
+    borderRadius: globalRefs$b.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$a.border.sm,
+    outlineWidth: globalRefs$b.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$a.colors.surface.light,
+    backgroundColor: globalRefs$b.colors.surface.light,
 
-    fontFamily: globalRefs$a.fonts.font1.family,
+    fontFamily: globalRefs$b.fonts.font1.family,
 
     size: {
-        xs: { fontSize: '8px' },
-        sm: { fontSize: '10px' },
-        md: { fontSize: '14px' },
-        lg: { fontSize: '20px' },
-        xl: { fontSize: '25px' }
+        xs: { fontSize: '12px' },
+        sm: { fontSize: '14px' },
+        md: { fontSize: '16px' },
+        lg: { fontSize: '18px' }
     },
 
     _fullWidth: {
@@ -5669,26 +5671,26 @@ const [theme$1, refs, vars$k] = createHelperVars({
     },
 
     _focused: {
-        outlineColor: globalRefs$a.colors.surface.main,
+        outlineColor: globalRefs$b.colors.surface.main,
         _invalid: {
-            outlineColor: globalRefs$a.colors.error.main,
+            outlineColor: globalRefs$b.colors.error.main,
         }
     },
 
     _bordered: {
-        outlineWidth: globalRefs$a.border.xs,
-        borderColor: globalRefs$a.colors.surface.main,
+        outlineWidth: globalRefs$b.border.xs,
+        borderColor: globalRefs$b.colors.surface.main,
         borderStyle: 'solid',
         _invalid: {
-            borderColor: globalRefs$a.colors.error.main,
+            borderColor: globalRefs$b.colors.error.main,
         }
     },
 
     _disabled: {
-        labelTextColor: globalRefs$a.colors.surface.main,
-        valueTextColor: globalRefs$a.colors.surface.dark,
-        placeholderTextColor: globalRefs$a.colors.surface.dark,
-        backgroundColor: globalRefs$a.colors.surface.main
+        labelTextColor: globalRefs$b.colors.surface.main,
+        valueTextColor: globalRefs$b.colors.surface.dark,
+        placeholderTextColor: globalRefs$b.colors.surface.dark,
+        backgroundColor: globalRefs$b.colors.surface.main
     }
 }, componentName);
 
@@ -5728,6 +5730,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$j
 });
 
+const globalRefs$a = getThemeRefs(globals);
 const vars$i = PasswordClass.cssVarList;
 
 const password = {
@@ -5748,6 +5751,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
 };
 
 var password$1 = /*#__PURE__*/Object.freeze({