@descope/web-components-ui 1.0.126 → 1.0.128

package/dist/index.esm.js

@@ -878,6 +878,10 @@ const proxyInputMixin = (superclass) =>
 			}, 0);
 		}
 
+		get name () {
+			return this.getAttribute('name');
+		}
+
 		get inputElement() {
 			this.warnIfInputElementIsMissing();
 
@@ -2763,6 +2767,7 @@ const {
 	inputField: inputField$3,
 	inputElement,
 	inputElementPlaceholder,
+	revealButtonContainer,
 	revealButtonIcon,
 	label: label$4,
 	requiredIndicator: requiredIndicator$3,
@@ -2773,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' },
@@ -2818,6 +2824,8 @@ const PasswordClass = compose(
 				{ ...revealButtonIcon, property: 'color' }
 			],
 			inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
+
+			revealButtonOffset: { ...revealButtonContainer, property: 'margin' }
 		}
 	}),
 	draggableMixin,
@@ -5523,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);
@@ -5542,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',
@@ -5629,28 +5637,28 @@ 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' },
@@ -5665,26 +5673,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);
 
@@ -5724,6 +5732,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
 	vars: vars$j
 });
 
+const globalRefs$a = getThemeRefs(globals);
 const vars$i = PasswordClass.cssVarList;
 
 const password = {
@@ -5744,6 +5753,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({