@descope/web-components-ui 1.0.103 → 1.0.104

package/dist/index.esm.js

@@ -2643,11 +2643,12 @@ const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass
 		this.addEventListener('mousedown', (e) => {
 			if (this.isDraggable & this.isReadOnly) {
 				const inputEle = this.baseElement.querySelector('input');
-
 				const prevType = inputEle.getAttribute('type');
+
 				inputEle.setAttribute('type', 'text');
+				setTimeout(() => inputEle.focus());
 
-				const onComplete = () => {
+				const onComplete = (e) => {
 					inputEle.setAttribute('type', prevType);
 
 					e.target.removeEventListener('mouseup', onComplete);
@@ -2672,6 +2673,7 @@ const {
 	inputElementPlaceholder,
 	revealButton,
 	revealButtonIcon,
+	revealButtonIconOutline,
 	label: label$3,
 	requiredIndicator: requiredIndicator$2
 } = {
@@ -2681,6 +2683,7 @@ const {
 	inputElementPlaceholder: { selector: '> input:placeholder-shown' },
 	revealButton: { selector: 'vaadin-password-field-button' },
 	revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
+	revealButtonIconOutline: { selector: () => 'vaadin-password-field-button[focus-ring]' },
 	label: { selector: '::part(label)' },
 	requiredIndicator: { selector: '::part(required-indicator)::after' },
 };
@@ -2693,6 +2696,14 @@ const PasswordField = compose(
 			wrapperBorderWidth: { ...inputWrapper$1, property: 'border-width' },
 			wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
 			wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
+
+			revealButtonOutlineBoxShadow: [
+				{
+					...revealButtonIconOutline,
+					property: 'box-shadow'
+				}
+			],
+
 			labelTextColor: [
 				{ ...label$3, property: 'color' },
 				{ ...requiredIndicator$2, property: 'color' }
@@ -4737,7 +4748,8 @@ const customMixin = (superclass) =>
 					'label',
 					'has-confirm',
 					'invalid',
-					'readonly'
+					'readonly',
+					'draggable'
 				]
 			});
 		}
@@ -4834,7 +4846,9 @@ const commonAttrs = [
 	'full-width',
 	'maxlength',
 	'invalid',
-	'readonly'
+	'readonly',
+	'draggable'
+
 ];
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
@@ -5506,6 +5520,9 @@ const passwordField = {
 	[vars$e.outlineStyle]: 'solid',
 	[vars$e.outlineColor]: 'transparent',
 
+	[vars$e.revealButtonOutlineBoxShadow]: `0 0 0 2px ${globalRefs$c.colors.surface.main}`,
+
+
 	[vars$e.labelTextColor]: globalRefs$c.colors.surface.contrast,
 	[vars$e.inputTextColor]: globalRefs$c.colors.surface.contrast,
 	[vars$e.placeholderTextColor]: globalRefs$c.colors.surface.main,