@descope/web-components-ui 1.0.90 → 1.0.92

package/dist/index.esm.js

@@ -1041,47 +1041,63 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
 
 const componentName$o = getComponentName('button');
 
-const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 const resetStyles = `
 	:host {
 		display: inline-block;
 	}
-	vaadin-button { margin: 0; }
+	vaadin-button {
+		margin: 0;
+		min-width: 0;
+		width: 100%;
+		height: auto;
+	}
+	vaadin-button::part(label) {
+		padding: 0;
+	}
 	vaadin-button::part(prefix) {
 		margin-left: 0;
 		margin-right: 0;
 	}
 `;
+
 const iconStyles = `
 	vaadin-button::part(prefix),
 	vaadin-button::part(label) {
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		gap: 5px;
 	}
 `;
 
-const { label: label$5, host: host$9 } = {
+const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
+
+const { host: host$9, label: label$6 } = {
+	host: { selector: () => ':host' },
 	label: { selector: '::part(label)' },
-	host: { selector: () => ':host' }
 };
 
 const Button = compose(
 	createStyleMixin({
 		mappings: {
+			color: {},
+			textDecoration: label$6,
+			fontSize: {},
+			cursor: {},
 			backgroundColor: {},
 			borderRadius: {},
-			color: label$5,
 			borderColor: {},
 			borderStyle: {},
 			borderWidth: {},
-			fontSize: {},
-			height: {},
 			width: host$9,
-			cursor: {},
-			padding: label$5,
-			textDecoration: label$5
+			gap: label$6,
+			verticalPadding: [
+				{ property: 'padding-top' },
+				{ property: 'padding-bottom' },
+			],
+			horizontalPadding: [
+				{ property: 'padding-left' },
+				{ property: 'padding-right' },
+			]
 		}
 	}),
 	draggableMixin,
@@ -1090,44 +1106,44 @@ const Button = compose(
 	createProxy({
 		slots: ['prefix', 'label', 'suffix'],
 		wrappedEleName: 'vaadin-button',
-		style: () =>
-			`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
+		style: () => `
+			${resetStyles}
+			${iconStyles}
+			${loadingIndicatorStyles}
+			${editorOverrides}
+		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$o
 	})
 );
 
+const { color, fontSize } = Button.cssVarList;
 const loadingIndicatorStyles = `
 	@keyframes spin {
 		0% { -webkit-transform: rotate(0deg); }
 		100% { -webkit-transform: rotate(360deg); }
 	}
 	:host([loading="true"]) ::before {
-		--marginRatio: 1.35;
-		color: var(${Button.cssVarList.color});
 		animation: spin 2s linear infinite;
 		position: absolute;
-		top: calc(50% - calc((var(${Button.cssVarList.height}) / var(--marginRatio)) / 2));
-		left: calc(50% - calc((var(${Button.cssVarList.height}) / var(--marginRatio)) / 2));
 		content: '';
 		z-index: 1;
 		box-sizing: border-box;
 		border-radius: 50%;
 		border-bottom-color: transparent;
 		border-left-color: transparent;
-		border-width: calc(var(${Button.cssVarList.height}) / 12);
 		border-style: solid;
-		width: calc(var(${Button.cssVarList.height}) / var(--marginRatio));
-		height: calc(var(${Button.cssVarList.height}) / var(--marginRatio));
+		color: var(${color});
+		top: calc(50% - (var(${fontSize}) / 2));
+		left: calc(50% - (var(${fontSize}) / 2));
+		border-width: calc(var(${fontSize}) / 10);
+		width: var(${fontSize});
+		height: var(${fontSize});
 	}
 	:host([loading="true"])::part(prefix),
 	:host([loading="true"])::part(label) {
 		visibility: hidden;
 	}
-
-	vaadin-button {
-		width: 100%;
-	}
 `;
 
 customElements.define(componentName$o, Button);
@@ -1306,7 +1322,7 @@ const {
 	checkboxElement,
 	checkboxSurface,
 	checkboxHiddenLabel: checkboxHiddenLabel$1,
-	label: label$4,
+	label: label$5,
 	requiredIndicator: requiredIndicator$4
 } = {
 	host: { selector: () => ':host' },
@@ -1329,7 +1345,7 @@ const Checkbox = compose(
 			checkboxRadius: { ...checkboxElement, property: 'border-radius' },
 			checkboxWidth: [
 				{ ...checkboxElement, property: 'width' },
-				{ ...label$4, property: 'margin-left' }
+				{ ...label$5, property: 'margin-left' }
 			],
 			checkboxHeight: { ...checkboxElement, property: 'height' },
 
@@ -1344,23 +1360,23 @@ const Checkbox = compose(
 
 			// Label
 			labelFontSize: [
-				{ ...label$4, property: 'font-size' },
+				{ ...label$5, property: 'font-size' },
 				{ ...checkboxHiddenLabel$1, property: 'font-size' }
 			],
 			labelLineHeight: [
-				{ ...label$4, property: 'line-height' },
+				{ ...label$5, property: 'line-height' },
 				{ ...checkboxHiddenLabel$1, property: 'line-height' }
 			],
 			labelFontWeight: [
-				{ ...label$4, property: 'font-weight' },
+				{ ...label$5, property: 'font-weight' },
 				{ ...checkboxHiddenLabel$1, property: 'font-weight' }
 			],
 			labelMargin: [
-				{ ...label$4, property: 'left' },
+				{ ...label$5, property: 'left' },
 				{ ...checkboxHiddenLabel$1, property: 'padding-left' }
 			],
 			labelTextColor: [
-				{ ...label$4, property: 'color' },
+				{ ...label$5, property: 'color' },
 				{ ...requiredIndicator$4, property: 'color' },
 			],
 		},
@@ -1398,7 +1414,7 @@ const {
 	checkboxElement: track,
 	checkboxSurface: knob,
 	checkboxHiddenLabel,
-	label: label$3,
+	label: label$4,
 	requiredIndicator: requiredIndicator$3,
 } = {
 	host: { selector: () => ':host' },
@@ -1415,7 +1431,7 @@ const SwitchToggle = compose(
 		mappings: {
 			width: host$7,
 			cursor: [component, checkboxHiddenLabel, track],
-			fontSize: [component, label$3, checkboxHiddenLabel],
+			fontSize: [component, label$4, checkboxHiddenLabel],
 
 			// Track
 			trackBorderWidth: { ...track, property: 'border-width' },
@@ -1452,19 +1468,19 @@ const SwitchToggle = compose(
 
 			// Label
 			labelMargin: [
-				{ ...label$3, property: 'padding-left' },
+				{ ...label$4, property: 'padding-left' },
 				{ ...checkboxHiddenLabel, property: 'padding-left' }
 			],
 			labelLineHeight: [
-				{ ...label$3, property: 'line-height' },
+				{ ...label$4, property: 'line-height' },
 				{ ...checkboxHiddenLabel, property: 'line-height' }
 			],
 			labelFontWeight: [
-				{ ...label$3, property: 'font-weight' },
+				{ ...label$4, property: 'font-weight' },
 				{ ...checkboxHiddenLabel, property: 'font-weight' }
 			],
 			labelTextColor: [
-				{ ...label$3, property: 'color' },
+				{ ...label$4, property: 'color' },
 				{ ...requiredIndicator$3, property: 'color' },
 			],
 		},
@@ -1869,7 +1885,7 @@ var textFieldMappings = {
 
 const componentName$e = getComponentName('email-field');
 
-let overrides$5 = ``;
+let overrides$4 = ``;
 
 const EmailField = compose(
 	createStyleMixin({
@@ -1884,13 +1900,13 @@ const EmailField = compose(
 	createProxy({
 		slots: ['suffix'],
 		wrappedEleName: 'vaadin-email-field',
-		style: () => overrides$5,
+		style: () => overrides$4,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$e
 	})
 );
 
-overrides$5 = `
+overrides$4 = `
 	:host {
 		display: inline-block;
 	}
@@ -2043,7 +2059,7 @@ customElements.define(componentName$c, Logo);
 
 const componentName$b = getComponentName('number-field');
 
-let overrides$4 = ``;
+let overrides$3 = ``;
 
 const NumberField = compose(
 	createStyleMixin({
@@ -2058,13 +2074,13 @@ const NumberField = compose(
 	createProxy({
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-number-field',
-		style: () => overrides$4,
+		style: () => overrides$3,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$b
 	})
 );
 
-overrides$4 = `
+overrides$3 = `
 	:host {
 		display: inline-block;
 	}
@@ -2310,7 +2326,7 @@ class PasscodeInternal extends BaseInputClass$2 {
 
 const componentName$9 = getComponentName('text-field');
 
-let overrides$3 = ``;
+let overrides$2 = ``;
 
 const observedAttrs = ['type'];
 
@@ -2346,13 +2362,13 @@ const TextField = compose(
 	createProxy({
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-text-field',
-		style: () => overrides$3,
+		style: () => overrides$2,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$9
 	})
 );
 
-overrides$3 = `
+overrides$2 = `
 	:host {
 		display: inline-block;
 		--vaadin-field-default-width: auto;
@@ -2368,6 +2384,7 @@ overrides$3 = `
 		overflow: hidden;
 		padding: 0;
 	}
+	vaadin-text-field[disabled] > input:placeholder-shown,
 	vaadin-text-field[readonly] > input:placeholder-shown {
 		opacity: 1;
 	}
@@ -2441,7 +2458,7 @@ const customMixin$2 = (superclass) =>
 const { borderStyle, borderWidth, ...restTextFieldMappings } =
 	textFieldMappings;
 
-const { digitField, label: label$2, requiredIndicator: requiredIndicator$2, internalWrapper, focusedValidDigitField } = {
+const { digitField, label: label$3, requiredIndicator: requiredIndicator$2, internalWrapper, focusedValidDigitField } = {
 	focusedValidDigitField: { selector: () => `${TextField.componentName}[focused="true"]:not([invalid="true"])` },
 	digitField: { selector: () => TextField.componentName },
 	label: { selector: '> label' },
@@ -2463,7 +2480,7 @@ const Passcode = compose(
 				// ideally, this would be part of the text field
 				{ ...internalWrapper, property: 'padding' }
 			],
-			color: [restTextFieldMappings.color, label$2, requiredIndicator$2],
+			color: [restTextFieldMappings.color, label$3, requiredIndicator$2],
 			padding: { ...digitField, property: textVars$1.padding },
 			margin: { ...digitField, property: textVars$1.margin },
 			textAlign: { ...digitField, property: textVars$1.textAlign },
@@ -2487,55 +2504,56 @@ const Passcode = compose(
     }
 
     descope-passcode-internal {
-      -webkit-mask-image: none;
-      padding: 0;
-			width: 100%;
-			height: 100%;
-			min-height: initial;
+		-webkit-mask-image: none;
+		padding: 0;
+		width: 100%;
+		height: 100%;
+		min-height: initial;
     }
 
-		descope-passcode-internal .wrapper {
-			box-sizing: border-box;
-			min-height: initial;
-			height: 100%;
+	descope-passcode-internal .wrapper {
+		box-sizing: border-box;
+		min-height: initial;
+		height: 100%;
+		justify-content: center;
     }
 
-		descope-passcode-internal descope-text-field {
-			width: var(${textVars$1.height})			
-		}
+	descope-passcode-internal descope-text-field {
+		width: var(${textVars$1.height})			
+	}
 
     vaadin-text-field::part(input-field) {
-      background-color: transparent;
-      padding: 0;
-			overflow: hidden;
-			-webkit-mask-image: none;
+		background-color: transparent;
+		padding: 0;
+		overflow: hidden;
+		-webkit-mask-image: none;
     }
 
-		vaadin-text-field {
-			margin: 0;
-			padding: 0;
-			width: 100%
-		}
+	vaadin-text-field {
+		margin: 0;
+		padding: 0;
+		width: 100%
+	}
 
-		vaadin-text-field::before {
-			height: initial;
-		}
+	vaadin-text-field::before {
+		height: initial;
+	}
 
-		vaadin-text-field[readonly] > input:placeholder-shown {
-			opacity: 1;
-		}
-	
-		vaadin-text-field::part(input-field):focus {
-			cursor: text;
-		}
+	vaadin-text-field[readonly] > input:placeholder-shown {
+		opacity: 1;
+	}
 
-		vaadin-text-field[required]::part(required-indicator)::after {
-			font-size: "12px";
-			content: "*";
-		}
-		vaadin-text-field[readonly]::part(input-field)::after {
-			border: 0 solid;
-		}
+	vaadin-text-field::part(input-field):focus {
+		cursor: text;
+	}
+
+	vaadin-text-field[required]::part(required-indicator)::after {
+		font-size: "12px";
+		content: "*";
+	}
+	vaadin-text-field[readonly]::part(input-field)::after {
+		border: 0 solid;
+	}
     `,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$8
@@ -2550,14 +2568,22 @@ customElements.define(componentName$8, Passcode);
 
 const componentName$7 = getComponentName('password-field');
 
-let overrides$2 = ``;
-
-const { host: host$3, inputWrapper: inputWrapper$1, inputElement, inputElementPlaceholder, revealButton, label: label$1, requiredIndicator: requiredIndicator$1 } = {
+const {
+	host: host$3,
+	inputWrapper: inputWrapper$1,
+	inputElement,
+	inputElementPlaceholder,
+	revealButton,
+	revealButtonIcon,
+	label: label$2,
+	requiredIndicator: requiredIndicator$1
+} = {
 	host: () => ':host',
 	inputWrapper: { selector: '::part(input-field)' },
 	inputElement: { selector: '> input' },
 	inputElementPlaceholder: { selector: '> input:placeholder-shown' },
 	revealButton: { selector: 'vaadin-password-field-button' },
+	revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
 	label: { selector: '> label' },
 	requiredIndicator: { selector: '::part(required-indicator)::after' },
 };
@@ -2570,17 +2596,20 @@ const PasswordField = compose(
 			wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
 			wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
 			labelTextColor: [
-				{ ...label$1, property: 'color' },
+				{ ...label$2, property: 'color' },
 				{ ...requiredIndicator$1, property: 'color' }
 			],
-			inputTextColor: [{ ...inputElement, property: 'color' }],
+			inputTextColor: [
+				{ ...inputElement, property: 'color' },
+				{ ...revealButtonIcon, property: 'color' }
+			],
 			placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
 			fontSize: [{}, host$3],
 			height: inputWrapper$1,
 			padding: inputWrapper$1,
 			pointerCursor: [
 				{ ...revealButton, property: 'cursor' },
-				{ ...label$1, property: 'cursor' },
+				{ ...label$2, property: 'cursor' },
 				{ ...requiredIndicator$1, property: 'cursor' }
 			],
 		}
@@ -2592,34 +2621,32 @@ const PasswordField = compose(
 	createProxy({
 		slots: ['suffix'],
 		wrappedEleName: 'vaadin-password-field',
-		style: () => overrides$2,
+		style: `
+			:host {
+				display: inline-block;
+			}
+			vaadin-password-field {
+				width: 100%;
+				padding: 0;
+			}
+			vaadin-password-field > input {
+				min-height: 0;
+			}
+			vaadin-password-field::part(input-field) {
+				background: transparent;
+			}
+			vaadin-password-field::part(input-field)::after {
+				opacity: 0;
+			}	
+			vaadin-password-field::before {
+				height: initial;
+			}
+		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$7
 	})
 );
 
-overrides$2 = `
-	:host {
-		display: inline-block;
-	}
-	vaadin-password-field {
-		width: 100%;
-		padding: 0;
-	}
-	vaadin-password-field > input {
-		min-height: 0;
-	}
-	vaadin-password-field::part(input-field) {
-		background: transparent;
-	}
-	vaadin-password-field::part(input-field)::after {
-		opacity: 0;
-	}	
-	vaadin-password-field::before {
-		height: initial;
-	}
-`;
-
 customElements.define(componentName$7, PasswordField);
 
 const componentName$6 = getComponentName('text-area');
@@ -2787,11 +2814,12 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
 	}
 };
 
-const { host: host$2, input, placeholder, toggle } = {
+const { host: host$2, input, placeholder, toggle, label: label$1 } = {
 	host: { selector: () => ':host' },
 	input: { selector: '::part(input-field)' },
 	placeholder: { selector: '> input:placeholder-shown' },
-	toggle: { selector: '::part(toggle-button)' }
+	toggle: { selector: '::part(toggle-button)' },
+	label: { selector: '::part(label)' }
 };
 
 // const { slotted, selected } = {
@@ -2814,7 +2842,7 @@ const ComboBox = compose(
 			borderStyle: input,
 			borderRadius: input,
 
-			color: input,
+			color: [label$1, input],
 
 			// we apply font-size also on the host so we can set its width with em
 			fontSize: [{}, host$2],
@@ -4364,7 +4392,7 @@ const {
 	inputWrapper: { selector: '::part(input-field)' },
 	phoneInput: { selector: () => 'descope-text-field' },
 	countryCodeInput: { selector: () => 'descope-combo-box' },
-	label: { selector: '> label' },
+	label: { selector: '::part(label)' },
 	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
 	separator: { selector: 'descope-phone-field-internal .separator' }
 };
@@ -4398,7 +4426,12 @@ const PhoneField = compose(
 
 			phoneInputWidth: { ...phoneInput, property: 'width' },
 
-			color: [label, requiredIndicator, {...phoneInput, property: textVars.color}, {...countryCodeInput, property: comboVars.color}],
+			color: [
+				label,
+				requiredIndicator,
+				{ ...phoneInput, property: textVars.color },
+				{ ...countryCodeInput, property: comboVars.color }
+			],
 
 			placeholderColor: {
 				...phoneInput,
@@ -5068,46 +5101,37 @@ const mode = {
 
 const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$o);
 
+const verticalPaddingRatio = 3;
+const horizontalPaddingRatio = 2;
+
 const button = {
 	...helperTheme$2,
-	[vars$g.width]: 'fit-content',
-	size: {
-		xs: {
-			[vars$g.height]: '10px',
-			[vars$g.fontSize]: '10px',
-			[vars$g.padding]: `0 ${globalRefs$e.spacing.xs}`
-		},
-		sm: {
-			[vars$g.height]: '20px',
-			[vars$g.fontSize]: '10px',
-			[vars$g.padding]: `0 ${globalRefs$e.spacing.sm}`
-		},
-		md: {
-			[vars$g.height]: '30px',
-			[vars$g.fontSize]: '14px',
-			[vars$g.padding]: `0 ${globalRefs$e.spacing.md}`
-		},
-		lg: {
-			[vars$g.height]: '40px',
-			[vars$g.fontSize]: '20px',
-			[vars$g.padding]: `0 ${globalRefs$e.spacing.lg}`
-		},
-		xl: {
-			[vars$g.height]: '50px',
-			[vars$g.fontSize]: '25px',
-			[vars$g.padding]: `0 ${globalRefs$e.spacing.xl}`
-		}
-	},
 
-	[vars$g.borderRadius]: globalRefs$e.radius.lg,
 	[vars$g.cursor]: 'pointer',
+
+	[vars$g.borderRadius]: globalRefs$e.radius.sm,
 	[vars$g.borderWidth]: '2px',
 	[vars$g.borderStyle]: 'solid',
 	[vars$g.borderColor]: 'transparent',
 
+	[vars$g.gap]: '0.25em',
+	[vars$g.height]: '100%',
+
+	[vars$g.verticalPadding]: `calc(var(${vars$g.fontSize}) / ${verticalPaddingRatio})`,
+	[vars$g.horizontalPadding]: `calc(var(${vars$g.fontSize}) / ${horizontalPaddingRatio})`,
+
+	size: {
+		xs: { [vars$g.fontSize]: '12px' },
+		sm: { [vars$g.fontSize]: '14px' },
+		md: { [vars$g.fontSize]: '18px' },
+		lg: { [vars$g.fontSize]: '22px' },
+		xl: { [vars$g.fontSize]: '26px' }
+	},
+
 	_fullWidth: {
 		[vars$g.width]: '100%'
 	},
+
 	_loading: {
 		[vars$g.cursor]: 'wait'
 	},
@@ -5119,27 +5143,30 @@ const button = {
 			_hover: {
 				[vars$g.backgroundColor]: helperRefs$2.dark
 			},
-			_loading: {
-				[vars$g.backgroundColor]: helperRefs$2.main
+			_active: {
+				[vars$g.backgroundColor]: helperRefs$2.dark
 			}
 		},
+
 		outline: {
 			[vars$g.color]: helperRefs$2.main,
-			[vars$g.borderColor]: helperRefs$2.main,
+			[vars$g.borderColor]: 'currentColor',
 			_hover: {
 				[vars$g.color]: helperRefs$2.dark,
-				[vars$g.borderColor]: helperRefs$2.dark,
-				_error: {
-					[vars$g.color]: helperRefs$2.error
-				}
+			},
+			_active: {
+				[vars$g.color]: helperRefs$2.light,
 			}
 		},
+
 		link: {
 			[vars$g.color]: helperRefs$2.main,
-			[vars$g.lineHeight]: helperRefs$2.height,
 			_hover: {
 				[vars$g.color]: helperRefs$2.main,
 				[vars$g.textDecoration]: 'underline'
+			},
+			_active: {
+				[vars$g.color]: helperRefs$2.dark
 			}
 		}
 	}