@descope/web-components-ui 1.0.97 → 1.0.98

package/dist/index.esm.js

@@ -1110,7 +1110,7 @@ const iconStyles = `
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const { host: host$9, label: label$6 } = {
+const { host: host$a, label: label$7 } = {
 	host: { selector: () => ':host' },
 	label: { selector: '::part(label)' },
 };
@@ -1119,7 +1119,7 @@ const Button = compose(
 	createStyleMixin({
 		mappings: {
 			color: {},
-			textDecoration: label$6,
+			textDecoration: label$7,
 			fontSize: {},
 			cursor: {},
 			backgroundColor: {},
@@ -1127,8 +1127,8 @@ const Button = compose(
 			borderColor: {},
 			borderStyle: {},
 			borderWidth: {},
-			width: host$9,
-			gap: label$6,
+			width: host$a,
+			gap: label$7,
 			verticalPadding: [
 				{ property: 'padding-top' },
 				{ property: 'padding-bottom' },
@@ -1356,13 +1356,13 @@ descope-boolean-field-internal {
 const componentName$m = getComponentName('checkbox');
 
 const {
-	host: host$8,
+	host: host$9,
 	component: component$1,
 	checkboxElement,
 	checkboxSurface,
 	checkboxHiddenLabel: checkboxHiddenLabel$1,
-	label: label$5,
-	requiredIndicator: requiredIndicator$4
+	label: label$6,
+	requiredIndicator: requiredIndicator$5
 } = {
 	host: { selector: () => ':host' },
 	label: { selector: '::part(label)' },
@@ -1376,7 +1376,7 @@ const {
 const Checkbox = compose(
 	createStyleMixin({
 		mappings: {
-			width: host$8,
+			width: host$9,
 			cursor: component$1,
 
 			// Checkbox
@@ -1384,7 +1384,7 @@ const Checkbox = compose(
 			checkboxRadius: { ...checkboxElement, property: 'border-radius' },
 			checkboxWidth: [
 				{ ...checkboxElement, property: 'width' },
-				{ ...label$5, property: 'margin-left' }
+				{ ...label$6, property: 'margin-left' }
 			],
 			checkboxHeight: { ...checkboxElement, property: 'height' },
 
@@ -1399,24 +1399,24 @@ const Checkbox = compose(
 
 			// Label
 			labelFontSize: [
-				{ ...label$5, property: 'font-size' },
+				{ ...label$6, property: 'font-size' },
 				{ ...checkboxHiddenLabel$1, property: 'font-size' }
 			],
 			labelLineHeight: [
-				{ ...label$5, property: 'line-height' },
+				{ ...label$6, property: 'line-height' },
 				{ ...checkboxHiddenLabel$1, property: 'line-height' }
 			],
 			labelFontWeight: [
-				{ ...label$5, property: 'font-weight' },
+				{ ...label$6, property: 'font-weight' },
 				{ ...checkboxHiddenLabel$1, property: 'font-weight' }
 			],
 			labelMargin: [
-				{ ...label$5, property: 'left' },
+				{ ...label$6, property: 'left' },
 				{ ...checkboxHiddenLabel$1, property: 'padding-left' }
 			],
 			labelTextColor: [
-				{ ...label$5, property: 'color' },
-				{ ...requiredIndicator$4, property: 'color' },
+				{ ...label$6, property: 'color' },
+				{ ...requiredIndicator$5, property: 'color' },
 			],
 		},
 	}),
@@ -1448,13 +1448,13 @@ customElements.define(componentName$m, Checkbox);
 const componentName$l = getComponentName('switch-toggle');
 
 const {
-	host: host$7,
+	host: host$8,
 	component,
 	checkboxElement: track,
 	checkboxSurface: knob,
 	checkboxHiddenLabel,
-	label: label$4,
-	requiredIndicator: requiredIndicator$3,
+	label: label$5,
+	requiredIndicator: requiredIndicator$4,
 } = {
 	host: { selector: () => ':host' },
 	label: { selector: '::part(label)' },
@@ -1468,9 +1468,9 @@ const {
 const SwitchToggle = compose(
 	createStyleMixin({
 		mappings: {
-			width: host$7,
+			width: host$8,
 			cursor: [component, checkboxHiddenLabel, track],
-			fontSize: [component, label$4, checkboxHiddenLabel],
+			fontSize: [component, label$5, checkboxHiddenLabel],
 
 			// Track
 			trackBorderWidth: { ...track, property: 'border-width' },
@@ -1507,20 +1507,20 @@ const SwitchToggle = compose(
 
 			// Label
 			labelMargin: [
-				{ ...label$4, property: 'padding-left' },
+				{ ...label$5, property: 'padding-left' },
 				{ ...checkboxHiddenLabel, property: 'padding-left' }
 			],
 			labelLineHeight: [
-				{ ...label$4, property: 'line-height' },
+				{ ...label$5, property: 'line-height' },
 				{ ...checkboxHiddenLabel, property: 'line-height' }
 			],
 			labelFontWeight: [
-				{ ...label$4, property: 'font-weight' },
+				{ ...label$5, property: 'font-weight' },
 				{ ...checkboxHiddenLabel, property: 'font-weight' }
 			],
 			labelTextColor: [
-				{ ...label$4, property: 'color' },
-				{ ...requiredIndicator$3, property: 'color' },
+				{ ...label$5, property: 'color' },
+				{ ...requiredIndicator$4, property: 'color' },
 			],
 		},
 	}),
@@ -1575,7 +1575,7 @@ class RawLoaderLinear extends createBaseClass({ componentName: componentName$k,
 			}
 			:host {
 				position: relative;
-				display: inline-block
+				display: flex;
 			}
 			div::after {
 				content: '';
@@ -1593,19 +1593,19 @@ class RawLoaderLinear extends createBaseClass({ componentName: componentName$k,
 	}
 }
 
-const selectors$4 = {
+const selectors$3 = {
 	root: {},
 	after: { selector: '::after' },
 	host: { selector: () => ':host' }
 };
 
-const { root: root$1, after: after$1, host: host$6 } = selectors$4;
+const { root: root$1, after: after$1, host: host$7 } = selectors$3;
 
 const LoaderLinear = compose(
 	createStyleMixin({
 		mappings: {
 			display: root$1,
-			width: host$6,
+			width: host$7,
 			height: [root$1, after$1],
 			borderRadius: [root$1, after$1],
 			surfaceColor: [{ property: 'background-color' }],
@@ -1800,7 +1800,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$g, baseS
 	}
 }
 
-const selectors$3 = {
+const selectors$2 = {
 	root: { selector: '' },
 	before: { selector: '::before' },
 	after: { selector: '::after' },
@@ -1808,7 +1808,7 @@ const selectors$3 = {
 	host: { selector: () => ':host' },
 };
 
-const { root, before, after, text: text$2, host: host$5 } = selectors$3;
+const { root, before, after, text: text$2, host: host$6 } = selectors$2;
 
 const Divider = compose(
 	createStyleMixin({
@@ -1819,8 +1819,8 @@ const Divider = compose(
 			alignSelf: root,
 			flexDirection: root,
 			textPadding: { ...text$2, property: 'padding' },
-			width: host$5,
-			padding: host$5,
+			width: host$6,
+			padding: host$6,
 			backgroundColor: [before, after],
 			opacity: [before, after],
 			textWidth: { ...text$2, property: 'width' },
@@ -1880,7 +1880,7 @@ customElements.define(componentName$f, Text);
 
 customElements.define(componentName$g, Divider);
 
-const selectors$2 = {
+const selectors$1 = {
 	label: '::part(label)',
 	inputWrapper: '::part(input-field)',
 	readOnlyInput: '[readonly]::part(input-field)::after',
@@ -1890,37 +1890,41 @@ const selectors$2 = {
 };
 
 var textFieldMappings = {
-	backgroundColor: { selector: selectors$2.inputWrapper },
-	color: { selector: selectors$2.inputWrapper },
-	width: { selector: selectors$2.host },
+	backgroundColor: { selector: selectors$1.inputWrapper },
+	color: { selector: selectors$1.inputWrapper },
+	width: { selector: selectors$1.host },
 	borderColor: [
-		{ selector: selectors$2.inputWrapper },
-		{ selector: selectors$2.readOnlyInput }
+		{ selector: selectors$1.inputWrapper },
+		{ selector: selectors$1.readOnlyInput }
 	],
 	borderWidth: [
-		{ selector: selectors$2.inputWrapper },
-		{ selector: selectors$2.readOnlyInput }
+		{ selector: selectors$1.inputWrapper },
+		{ selector: selectors$1.readOnlyInput }
 	],
 	borderStyle: [
-		{ selector: selectors$2.inputWrapper },
-		{ selector: selectors$2.readOnlyInput }
+		{ selector: selectors$1.inputWrapper },
+		{ selector: selectors$1.readOnlyInput }
 	],
-	borderRadius: { selector: selectors$2.inputWrapper },
-	boxShadow: { selector: selectors$2.inputWrapper },
+	borderRadius: { selector: selectors$1.inputWrapper },
+	boxShadow: { selector: selectors$1.inputWrapper },
 
 	// we apply font-size also on the host so we can set its width with em
-	fontSize: [{}, { selector: selectors$2.host }],
-	
-	height: { selector: selectors$2.inputWrapper },
-	padding: { selector: selectors$2.inputWrapper },
-	margin: { selector: selectors$2.inputWrapper },
-	caretColor: { selector: selectors$2.input },
-	outlineColor: { selector: selectors$2.inputWrapper },
-	outlineStyle: { selector: selectors$2.inputWrapper },
-	outlineWidth: { selector: selectors$2.inputWrapper },
-	outlineOffset: { selector: selectors$2.inputWrapper },
-	textAlign: {selector: selectors$2.input},
-	placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
+	fontSize: [{}, { selector: selectors$1.host }],
+
+	height: { selector: selectors$1.inputWrapper },
+	padding: { selector: selectors$1.inputWrapper },
+	margin: { selector: selectors$1.inputWrapper },
+	caretColor: { selector: selectors$1.input },
+	outlineColor: { selector: selectors$1.inputWrapper },
+	outlineStyle: { selector: selectors$1.inputWrapper },
+	outlineWidth: [
+		{ selector: selectors$1.inputWrapper },
+		// we need to make sure there is enough space for the outline
+		{ property: 'padding' }
+	],
+	outlineOffset: { selector: selectors$1.inputWrapper },
+	textAlign: { selector: selectors$1.input },
+	placeholderColor: { selector: selectors$1.placeholder, property: 'color' }
 };
 
 const componentName$e = getComponentName('email-field');
@@ -1952,8 +1956,11 @@ overrides$4 = `
 	}
 	vaadin-email-field {
 		margin: 0;
-		padding: 0;
 		width: 100%;
+		box-sizing: border-box;
+	}
+	vaadin-email-field::before {
+		height: 0;
 	}
 	vaadin-email-field::part(input-field) {
 		overflow: hidden;
@@ -1978,7 +1985,6 @@ overrides$4 = `
 		cursor: text;
 	}
 	vaadin-email-field[required]::part(required-indicator)::after {
-		font-size: "12px";
 		content: "*";
 		color: var(${EmailField.cssVarList.color});
 	}
@@ -2026,19 +2032,19 @@ class RawLink extends createBaseClass({ componentName: componentName$d, baseSele
 	}
 }
 
-const selectors$1 = {
+const selectors = {
 	host: { selector: () => 'host' },
 	anchor: {},
 	wrapper: {selector: () => ':host > div'},
 	text: { selector: () => Text.componentName }
 };
 
-const { anchor, text: text$1, host: host$4, wrapper } = selectors$1;
+const { anchor, text: text$1, host: host$5, wrapper } = selectors;
 
 const Link = compose(
 	createStyleMixin({
 		mappings: {
-			width: host$4,
+			width: host$5,
 			textAlign: wrapper,
 			color: [anchor, { ...text$1, property: Text.cssVarList.color }],
 			cursor: anchor,
@@ -2419,6 +2425,7 @@ overrides$2 = `
 		padding: 0;
 		width: 100%;
 		height: 100%;
+		box-sizing: border-box;
 	}
 
 	vaadin-text-field::part(input-field) {
@@ -2454,10 +2461,11 @@ overrides$2 = `
 		content: "*";
 		color: var(${TextField.cssVarList.color});
 	}
-	vaadin-text-field[readonly]::part(input-field)::after {
-		border: 0 solid;
+	vaadin-text-field::part(input-field)::after {
+		opacity: 0 !important;
 	}
 
+
 	vaadin-text-field::before {
 		height: unset;
 	}
@@ -2499,7 +2507,7 @@ const customMixin$2 = (superclass) =>
 const { borderStyle, borderWidth, ...restTextFieldMappings } =
 	textFieldMappings;
 
-const { digitField, label: label$3, requiredIndicator: requiredIndicator$2, internalWrapper, focusedValidDigitField } = {
+const { digitField, label: label$4, requiredIndicator: requiredIndicator$3, internalWrapper, focusedValidDigitField } = {
 	focusedValidDigitField: { selector: () => `${TextField.componentName}[focused="true"]:not([invalid="true"])` },
 	digitField: { selector: () => TextField.componentName },
 	label: { selector: '> label' },
@@ -2521,7 +2529,7 @@ const Passcode = compose(
 				// ideally, this would be part of the text field
 				{ ...internalWrapper, property: 'padding' }
 			],
-			color: [restTextFieldMappings.color, label$3, requiredIndicator$2],
+			color: [restTextFieldMappings.color, label$4, requiredIndicator$3],
 			padding: { ...digitField, property: textVars$1.padding },
 			margin: { ...digitField, property: textVars$1.margin },
 			textAlign: { ...digitField, property: textVars$1.textAlign },
@@ -2543,6 +2551,12 @@ const Passcode = compose(
       --vaadin-field-default-width: auto;
 			display: inline-block;
     }
+	:host::after {
+		background-color: transparent;
+	}
+	:host::part(input-field)::after {
+		background-color: transparent;
+	}
 
     descope-passcode-internal {
 		-webkit-mask-image: none;
@@ -2589,7 +2603,6 @@ const Passcode = compose(
 	}
 
 	vaadin-text-field[required]::part(required-indicator)::after {
-		font-size: "12px";
 		content: "*";
 	}
 	vaadin-text-field[readonly]::part(input-field)::after {
@@ -2610,14 +2623,14 @@ customElements.define(componentName$8, Passcode);
 const componentName$7 = getComponentName('password-field');
 
 const {
-	host: host$3,
+	host: host$4,
 	inputWrapper: inputWrapper$1,
 	inputElement,
 	inputElementPlaceholder,
 	revealButton,
 	revealButtonIcon,
-	label: label$2,
-	requiredIndicator: requiredIndicator$1
+	label: label$3,
+	requiredIndicator: requiredIndicator$2
 } = {
 	host: () => ':host',
 	inputWrapper: { selector: '::part(input-field)' },
@@ -2637,21 +2650,21 @@ const PasswordField = compose(
 			wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
 			wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
 			labelTextColor: [
-				{ ...label$2, property: 'color' },
-				{ ...requiredIndicator$1, property: 'color' }
+				{ ...label$3, property: 'color' },
+				{ ...requiredIndicator$2, property: 'color' }
 			],
 			inputTextColor: [
 				{ ...inputElement, property: 'color' },
 				{ ...revealButtonIcon, property: 'color' }
 			],
 			placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
-			fontSize: [{}, host$3],
+			fontSize: [{}, host$4],
 			height: inputWrapper$1,
 			padding: inputWrapper$1,
 			pointerCursor: [
 				{ ...revealButton, property: 'cursor' },
-				{ ...label$2, property: 'cursor' },
-				{ ...requiredIndicator$1, property: 'cursor' }
+				{ ...label$3, property: 'cursor' },
+				{ ...requiredIndicator$2, property: 'cursor' }
 			],
 		}
 	}),
@@ -2692,11 +2705,20 @@ customElements.define(componentName$7, PasswordField);
 
 const componentName$6 = getComponentName('text-area');
 
-const selectors = {
-	label: '::part(label)',
-	input: '::part(input-field)',
-	required: '::part(required-indicator)::after',
-	host: () => ':host'
+const {
+	host: host$3,
+	placeholder: placeholder$1,
+	input: input$1,
+	textArea: textArea$1,
+	label: label$2,
+	requiredIndicator: requiredIndicator$1
+} = {
+	host: { selector: () => ':host' },
+	textArea: { selector: '> textarea' },
+	label: { selector: '::part(label)' },
+	input: { selector: '::part(input-field)' },
+	placeholder: { selector: 'textarea:placeholder-shown' },
+	requiredIndicator: { selector: '::part(required-indicator)::after' },
 };
 
 let overrides$1 = ``;
@@ -2704,19 +2726,24 @@ let overrides$1 = ``;
 const TextArea = compose(
 	createStyleMixin({
 		mappings: {
-			resize: { selector: '> textarea' },
-			color: { selector: selectors.label },
+			resize: textArea$1,
+			color: textArea$1,
 			cursor: {},
-			width: { selector: selectors.host },
-			backgroundColor: { selector: selectors.input },
-			borderWidth: { selector: selectors.input },
-			borderStyle: { selector: selectors.input },
-			borderColor: { selector: selectors.input },
-			borderRadius: { selector: selectors.input },
-			outlineWidth: { selector: selectors.input },
-			outlineStyle: { selector: selectors.input },
-			outlineColor: { selector: selectors.input },
-			outlineOffset: { selector: selectors.input }
+			labelColor: [
+				{ ...label$2, property: 'color' },
+				{ ...requiredIndicator$1, property: 'color' }
+			],
+			placeholderColor: { ...placeholder$1, property: 'color' },
+			width: host$3,
+			backgroundColor: input$1,
+			borderWidth: input$1,
+			borderStyle: input$1,
+			borderColor: input$1,
+			borderRadius: input$1,
+			outlineWidth: input$1,
+			outlineStyle: input$1,
+			outlineColor: input$1,
+			outlineOffset: [input$1, { property: 'padding' }],
 		}
 	}),
 	draggableMixin,
@@ -2740,6 +2767,7 @@ overrides$1 = `
 	vaadin-text-area {
 		margin: 0;
 		width: 100%;
+		box-sizing: border-box;
 	}
 	vaadin-text-area > label,
 	vaadin-text-area::part(input-field) {
@@ -2748,10 +2776,13 @@ overrides$1 = `
 	vaadin-text-area[focused]::part(input-field) {
 		cursor: text;
 	}
-	vaadin-text-area::part(required-indicator)::after {
-		font-size: "12px";
+	vaadin-text-area[required]::part(required-indicator)::after {
 		content: "*";
-	}	
+	}
+	vaadin-text-area[disabled] > textarea:placeholder-shown,
+	vaadin-text-area[readonly] > textarea:placeholder-shown {
+		opacity: 1;
+	}
 `;
 
 customElements.define(componentName$6, TextArea);
@@ -5125,12 +5156,12 @@ const typography = {
 	},
 	body1: {
 		font: fontsRef.font1.family,
-		weight: '300',
+		weight: '400',
 		size: '16px'
 	},
 	body2: {
 		font: fontsRef.font1.family,
-		weight: '200',
+		weight: '400',
 		size: '14px'
 	}
 };
@@ -5156,7 +5187,9 @@ const radius = {
 	sm: '10px',
 	md: '15px',
 	lg: '20px',
-	xl: '25px'
+	xl: '25px',
+	'2xl': '30px',
+	'3xl': '35px'
 };
 
 const shadow = {
@@ -5274,31 +5307,32 @@ const globalRefs$e = getThemeRefs(globals);
 const vars$f = TextField.cssVarList;
 
 const textField = (vars) => ({
+	[vars.padding]: '0 1em',
+
+	[vars.outlineWidth]: '2px',
+	[vars.outlineStyle]: 'solid',
+	[vars.outlineColor]: 'transparent',
+
 	size: {
 		xs: {
 			[vars.height]: '14px',
 			[vars.fontSize]: '8px',
-			[vars.padding]: `0 ${globalRefs$e.spacing.xs}`
 		},
 		sm: {
 			[vars.height]: '20px',
 			[vars.fontSize]: '10px',
-			[vars.padding]: `0 ${globalRefs$e.spacing.sm}`
 		},
 		md: {
 			[vars.height]: '30px',
 			[vars.fontSize]: '14px',
-			[vars.padding]: `0 ${globalRefs$e.spacing.md}`
 		},
 		lg: {
 			[vars.height]: '40px',
 			[vars.fontSize]: '20px',
-			[vars.padding]: `0 ${globalRefs$e.spacing.lg}`
 		},
 		xl: {
 			[vars.height]: '50px',
 			[vars.fontSize]: '25px',
-			[vars.padding]: `0 ${globalRefs$e.spacing.xl}`
 		}
 	},
 
@@ -5323,8 +5357,6 @@ const textField = (vars) => ({
 	},
 
 	_focused: {
-		[vars.outlineWidth]: '2px',
-		[vars.outlineStyle]: 'solid',
 		[vars.outlineColor]: globalRefs$e.colors.surface.main
 	},
 
@@ -5412,36 +5444,36 @@ const globalRefs$c = getThemeRefs(globals);
 const vars$d = TextArea.cssVarList;
 
 const textArea = {
-	[vars$d.color]: globalRefs$c.colors.primary.main,
+	[vars$d.labelColor]: globalRefs$c.colors.surface.contrast,
+	[vars$d.placeholderColor]: globalRefs$c.colors.surface.main,
+	[vars$d.color]: globalRefs$c.colors.surface.contrast,
+
 	[vars$d.backgroundColor]: globalRefs$c.colors.surface.light,
 	[vars$d.resize]: 'vertical',
 
 	[vars$d.borderRadius]: globalRefs$c.radius.sm,
 	[vars$d.borderWidth]: '1px',
 	[vars$d.borderStyle]: 'solid',
-	[vars$d.borderColor]: 'transparent',
+	[vars$d.borderColor]: globalRefs$c.colors.surface.main,
 	[vars$d.outlineWidth]: '2px',
 	[vars$d.outlineStyle]: 'solid',
 	[vars$d.outlineColor]: 'transparent',
+	[vars$d.outlineOffset]: '0px',
 
-
-	_bordered: {
-		[vars$d.borderColor]: globalRefs$c.colors.surface.main
+	_fullWidth: {
+		[vars$d.width]: '100%'
 	},
 
 	_focused: {
 		[vars$d.outlineColor]: globalRefs$c.colors.surface.main
 	},
 
-	_fullWidth: {
-		[vars$d.width]: '100%'
-	},
-
 	_disabled: {
 		[vars$d.cursor]: 'not-allowed'
 	},
 
 	_invalid: {
+		[vars$d.labelColor]: globalRefs$c.colors.error.main,
 		[vars$d.outlineColor]: globalRefs$c.colors.error.main
 	}
 };
@@ -5461,7 +5493,7 @@ const checkbox = {
 	[vars$c.checkboxHeight]: 'calc(1em - 2px)',
 	[vars$c.labelMargin]: 'calc(1em + 5px)',
 
-	[vars$c.checkboxRadius]: globalRefs$b.radius.sm,
+	[vars$c.checkboxRadius]: globalRefs$b.radius.xs,
 
 	size: {
 		xs: {
@@ -5676,7 +5708,7 @@ const container = {
 			[vars$a.boxShadow]: `${globalRefs$9.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$9.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
 		},
 		'2xl': {
-			[helperVars.shadowColor]: '#00000050',
+			[helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings 
 			[vars$a.boxShadow]: `${globalRefs$9.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
 		},
 	},
@@ -5691,6 +5723,15 @@ const container = {
 		lg: {
 			[vars$a.borderRadius]: globalRefs$9.radius.lg
 		},
+		xl: {
+			[vars$a.borderRadius]: globalRefs$9.radius.xl
+		},
+		'2xl': {
+			[vars$a.borderRadius]: globalRefs$9.radius['2xl']
+		},
+		'3xl': {
+			[vars$a.borderRadius]: globalRefs$9.radius['3xl']
+		},
 	}
 };