@descope/web-components-ui 1.0.103 → 1.0.105

package/dist/index.esm.js

@@ -1402,11 +1402,16 @@ const Checkbox = compose(
 			// Checkbox
 			checkboxBackgroundColor: { ...checkboxElement, property: 'background-color' },
 			checkboxRadius: { ...checkboxElement, property: 'border-radius' },
-			checkboxWidth: [
+
+			checkboxSize: [
 				{ ...checkboxElement, property: 'width' },
-				{ ...label$6, property: 'margin-left' }
+				{ ...label$6, property: 'margin-left' },
+				{ ...checkboxElement, property: 'height' },
+				{ ...checkboxSurface, property: 'font-size' },
+				{ ...component$1, property: 'font-size' },
+				{ ...label$6, property: 'line-height' },
+				{ ...checkboxHiddenLabel$1, property: 'line-height' }
 			],
-			checkboxHeight: { ...checkboxElement, property: 'height' },
 
 			checkboxOutlineWidth: { ...checkboxElement, property: 'outline-width' },
 			checkboxOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
@@ -1414,18 +1419,15 @@ const Checkbox = compose(
 			checkboxOutlineStyle: { ...checkboxElement, property: 'outline-style' },
 
 			// Checkmark
-			checkmarkSize: [{ ...checkboxSurface, property: 'font-size' }, { ...component$1, property: 'font-size' }],
 			checkmarkTextColor: { ...checkboxSurface, property: 'color' },
 
 			// Label
 			labelFontSize: [
+				{ ...host$9, property: 'font-size' },
+				{ ...checkboxElement, property: 'font-size' },
 				{ ...label$6, property: 'font-size' },
 				{ ...checkboxHiddenLabel$1, property: 'font-size' }
 			],
-			labelLineHeight: [
-				{ ...label$6, property: 'line-height' },
-				{ ...checkboxHiddenLabel$1, property: 'line-height' }
-			],
 			labelFontWeight: [
 				{ ...label$6, property: 'font-weight' },
 				{ ...checkboxHiddenLabel$1, property: 'font-weight' }
@@ -2643,11 +2645,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 +2675,7 @@ const {
 	inputElementPlaceholder,
 	revealButton,
 	revealButtonIcon,
+	revealButtonIconOutline,
 	label: label$3,
 	requiredIndicator: requiredIndicator$2
 } = {
@@ -2681,6 +2685,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 +2698,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 +4750,8 @@ const customMixin = (superclass) =>
 					'label',
 					'has-confirm',
 					'invalid',
-					'readonly'
+					'readonly',
+					'draggable'
 				]
 			});
 		}
@@ -4834,7 +4848,9 @@ const commonAttrs = [
 	'full-width',
 	'maxlength',
 	'invalid',
-	'readonly'
+	'readonly',
+	'draggable'
+
 ];
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
@@ -5506,6 +5522,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,
@@ -5617,43 +5636,30 @@ const vars$c = Checkbox.cssVarList;
 
 const checkbox = {
 	[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
-
-	[vars$c.labelFontSize]: '12px',
-	[vars$c.labelFontWeight]: '400',
-	[vars$c.labelTextColor]: globalRefs$a.colors.surface.contrast,
 	[vars$c.cursor]: 'pointer',
 
-	[vars$c.checkboxWidth]: 'calc(1em - 2px)',
-	[vars$c.checkboxHeight]: 'calc(1em - 2px)',
-	[vars$c.labelMargin]: 'calc(1em + 5px)',
-
 	[vars$c.checkboxRadius]: globalRefs$a.radius.xs,
+	[vars$c.checkboxSize]: '2em',
+
+	[vars$c.labelTextColor]: globalRefs$a.colors.surface.contrast,
+	[vars$c.labelMargin]: '0.5em',
+	[vars$c.labelFontWeight]: '400',
 
 	size: {
 		xs: {
-			[vars$c.labelFontSize]: '12px',
-			[vars$c.labelLineHeight]: '1.1em',
-			[vars$c.checkmarkSize]: '18px',
+			[vars$c.labelFontSize]: '8px',
 		},
 		sm: {
-			[vars$c.labelFontSize]: '14px',
-			[vars$c.labelLineHeight]: '1.2em',
-			[vars$c.checkmarkSize]: '22px',
+			[vars$c.labelFontSize]: '10px',
 		},
 		md: {
-			[vars$c.labelFontSize]: '16px',
-			[vars$c.labelLineHeight]: '1.35em',
-			[vars$c.checkmarkSize]: '26px',
+			[vars$c.labelFontSize]: '14px',
 		},
 		lg: {
 			[vars$c.labelFontSize]: '20px',
-			[vars$c.labelLineHeight]: '1.5em',
-			[vars$c.checkmarkSize]: '34px',
 		},
 		xl: {
-			[vars$c.labelFontSize]: '20px',
-			[vars$c.labelLineHeight]: '1.75em',
-			[vars$c.checkmarkSize]: '38px',
+			[vars$c.labelFontSize]: '25px',
 		}
 	},