@descope/web-components-ui 1.0.45 → 1.0.48

package/dist/index.esm.js

@@ -102,7 +102,7 @@ const createCssVarsList = (componentName, mappings) =>
 
 // match the host selector with the inner element selector
 // e.g. when we want to set the same size for the host & the inner element this can be useful
-const matchHostStyle = (mappingObj) => [
+const matchHostStyle = (mappingObj = {}) => [
 	mappingObj,
 	{ ...mappingObj, selector: () => `:host${mappingObj.selector || ''}` }
 ];
@@ -336,6 +336,18 @@ const createProxy = ({
 	return ProxyElement;
 };
 
+const propertyObserver = (src, target, property) => {
+	Object.defineProperty(src, property, {
+		set: function (v) {
+			return target[property] = v
+		},
+		get: function () {
+			return target[property]
+		},
+		configurable: true
+	});
+};
+
 const inputMixin = (superclass) =>
 	class InputMixinClass extends superclass {
 		static get formAssociated() {
@@ -355,6 +367,7 @@ const inputMixin = (superclass) =>
 		}
 
 		connectedCallback() {
+			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
 			super.connectedCallback?.();
 
 			// this is needed in order to make sure the form input validation is working
@@ -362,13 +375,15 @@ const inputMixin = (superclass) =>
 				this.setAttribute('tabindex', 0);
 			}
 
-			// vaadin does not expose all those validation attributes so we need to take it from the input
-			// https://github.com/vaadin/web-components/issues/1177
 			const input =
-				this.proxyElement.querySelector('input') ||
-				this.proxyElement.querySelector('textarea');
+				this.baseEle.querySelector('input') ||
+				this.baseEle.querySelector('textarea');
 			if (!input) throw Error('no input was found');
 
+			// sync properties
+			propertyObserver(this, input, 'value');
+			this.setSelectionRange = input.setSelectionRange.bind(input);
+
 			this.checkValidity = () => input.checkValidity();
 			this.reportValidity = () => input.reportValidity();
 			this.validity = input.validity;
@@ -417,10 +432,13 @@ const compose =
 	(val) =>
 		fns.reduceRight((res, fn) => fn(res), val);
 
-const componentName$a = getComponentName('button');
+const componentName$b = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 const resetStyles = `
+	:host {
+		display: inline-block;
+	}
 	vaadin-button { margin: 0; }
 	vaadin-button::part(prefix) {
 		margin-left: 0;
@@ -453,9 +471,9 @@ const Button = compose(
 			borderWidth: {},
 			fontSize: {},
 			height: {},
-			width: [matchHostStyle()],
+			width: matchHostStyle(),
 			cursor: {},
-			padding: [matchHostStyle(), { selector: selectors$2.label }],
+			padding: [{ selector: selectors$2.label }],
 			textDecoration: { selector: selectors$2.label }
 		}
 	}),
@@ -468,7 +486,7 @@ const Button = compose(
 		style: () =>
 			`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$a
+		componentName: componentName$b
 	})
 );
 
@@ -501,9 +519,9 @@ const loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$a, Button);
+customElements.define(componentName$b, Button);
 
-const componentName$9 = getComponentName('text-field');
+const componentName$a = getComponentName('text-field');
 
 const selectors$1 = {
 	label: '::part(label)',
@@ -517,7 +535,7 @@ let overrides$5 = ``;
 const textFieldMappings = {
 	color: { selector: selectors$1.input },
 	backgroundColor: { selector: selectors$1.input },
-	width: [matchHostStyle()],
+	width: matchHostStyle(),
 	color: { selector: selectors$1.input },
 	borderColor: [
 		{ selector: selectors$1.input },
@@ -555,11 +573,15 @@ const TextField = compose(
 		wrappedEleName: 'vaadin-text-field',
 		style: () => overrides$5,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$9
+		componentName: componentName$a
 	})
 );
 
 overrides$5 = `
+	:host {
+		display: inline-block;
+	}
+
 	vaadin-text-field {
 		margin: 0;
 		padding: 0;
@@ -596,11 +618,11 @@ overrides$5 = `
 	}
 `;
 
-customElements.define(componentName$9, TextField);
+customElements.define(componentName$a, TextField);
 
 const template = document.createElement('template');
 
-const componentName$8 = getComponentName('combo');
+const componentName$9 = getComponentName('combo');
 
 template.innerHTML = `
   <descope-button></descope-button>
@@ -617,9 +639,9 @@ class Combo extends HTMLElement {
 	}
 }
 
-customElements.define(componentName$8, Combo);
+customElements.define(componentName$9, Combo);
 
-const componentName$7 = getComponentName('number-field');
+const componentName$8 = getComponentName('number-field');
 
 let overrides$4 = ``;
 
@@ -638,11 +660,14 @@ const NumberField = compose(
 		wrappedEleName: 'vaadin-number-field',
 		style: () => overrides$4,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$7
+		componentName: componentName$8
 	})
 );
 
 overrides$4 = `
+	:host {
+		display: inline-block;
+	}
 	vaadin-number-field {
 		margin: 0;
 		padding: 0;
@@ -679,9 +704,9 @@ overrides$4 = `
 	}
 `;
 
-customElements.define(componentName$7, NumberField);
+customElements.define(componentName$8, NumberField);
 
-const componentName$6 = getComponentName('email-field');
+const componentName$7 = getComponentName('email-field');
 
 let overrides$3 = ``;
 
@@ -700,11 +725,14 @@ const EmailField = compose(
 		wrappedEleName: 'vaadin-email-field',
 		style: () => overrides$3,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$6
+		componentName: componentName$7
 	})
 );
 
 overrides$3 = `
+	:host {
+		display: inline-block;
+	}
 	vaadin-email-field {
 		margin: 0;
 		padding: 0;
@@ -741,9 +769,9 @@ overrides$3 = `
 	}
 `;
 
-customElements.define(componentName$6, EmailField);
+customElements.define(componentName$7, EmailField);
 
-const componentName$5 = getComponentName('password-field');
+const componentName$6 = getComponentName('password-field');
 
 let overrides$2 = ``;
 
@@ -769,11 +797,14 @@ const PasswordField = compose(
 		wrappedEleName: 'vaadin-password-field',
 		style: () => overrides$2,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$5
+		componentName: componentName$6
 	})
 );
 
 overrides$2 = `
+	:host {
+		display: inline-block;
+	}
 	vaadin-password-field {
 		margin: 0;
 		padding: 0;
@@ -810,9 +841,9 @@ overrides$2 = `
 	}
 `;
 
-customElements.define(componentName$5, PasswordField);
+customElements.define(componentName$6, PasswordField);
 
-const componentName$4 = getComponentName('text-area');
+const componentName$5 = getComponentName('text-area');
 
 const selectors = {
 	label: '::part(label)',
@@ -828,7 +859,7 @@ const TextArea = compose(
 			resize: { selector: '> textarea' },
 			color: { selector: selectors.label },
 			cursor: {},
-			width: {},
+			width: matchHostStyle(),
 			backgroundColor: { selector: selectors.input },
 			borderWidth: { selector: selectors.input },
 			borderStyle: { selector: selectors.input },
@@ -847,11 +878,15 @@ const TextArea = compose(
 		wrappedEleName: 'vaadin-text-area',
 		style: () => overrides$1,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$4
+		componentName: componentName$5
 	})
 );
 
 overrides$1 = `
+	:host {
+		display: inline-block;
+	}
+
 	vaadin-text-area {
 		margin: 0;
 	}
@@ -868,29 +903,29 @@ overrides$1 = `
 	}	
 `;
 
-customElements.define(componentName$4, TextArea);
+customElements.define(componentName$5, TextArea);
 
-const componentName$3 = getComponentName('date-picker');
+const componentName$4 = getComponentName('date-picker');
 
 const DatePicker = compose(
 	draggableMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
-		componentName: componentName$3,
+		componentName: componentName$4,
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-date-picker',
 		style: ``
 	})
 );
 
-customElements.define(componentName$3, DatePicker);
+customElements.define(componentName$4, DatePicker);
 
-const componentName$2 = getComponentName('container');
+const componentName$3 = getComponentName('container');
 
 class RawContainer extends HTMLElement {
 	static get componentName() {
-		return componentName$2;
+		return componentName$3;
 	}
 	constructor() {
 		super();
@@ -940,7 +975,7 @@ const Container = compose(
 	componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$2, Container);
+customElements.define(componentName$3, Container);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -1154,7 +1189,7 @@ var globals = {
 };
 
 const globalRefs$3 = getThemeRefs(globals);
-const vars$6 = Button.cssVarList;
+const vars$7 = Button.cssVarList;
 
 const mode = {
 	primary: globalRefs$3.colors.primary,
@@ -1164,83 +1199,83 @@ const mode = {
 	surface: globalRefs$3.colors.surface
 };
 
-const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$a);
+const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$b);
 
 const button = {
 	...helperTheme$1,
 
 	size: {
 		xs: {
-			[vars$6.height]: '10px',
-			[vars$6.fontSize]: '10px',
-			[vars$6.padding]: `0 ${globalRefs$3.spacing.xs}`
+			[vars$7.height]: '10px',
+			[vars$7.fontSize]: '10px',
+			[vars$7.padding]: `0 ${globalRefs$3.spacing.xs}`
 		},
 		sm: {
-			[vars$6.height]: '20px',
-			[vars$6.fontSize]: '10px',
-			[vars$6.padding]: `0 ${globalRefs$3.spacing.sm}`
+			[vars$7.height]: '20px',
+			[vars$7.fontSize]: '10px',
+			[vars$7.padding]: `0 ${globalRefs$3.spacing.sm}`
 		},
 		md: {
-			[vars$6.height]: '30px',
-			[vars$6.fontSize]: '14px',
-			[vars$6.padding]: `0 ${globalRefs$3.spacing.md}`
+			[vars$7.height]: '30px',
+			[vars$7.fontSize]: '14px',
+			[vars$7.padding]: `0 ${globalRefs$3.spacing.md}`
 		},
 		lg: {
-			[vars$6.height]: '40px',
-			[vars$6.fontSize]: '20px',
-			[vars$6.padding]: `0 ${globalRefs$3.spacing.lg}`
+			[vars$7.height]: '40px',
+			[vars$7.fontSize]: '20px',
+			[vars$7.padding]: `0 ${globalRefs$3.spacing.lg}`
 		},
 		xl: {
-			[vars$6.height]: '50px',
-			[vars$6.fontSize]: '25px',
-			[vars$6.padding]: `0 ${globalRefs$3.spacing.xl}`
+			[vars$7.height]: '50px',
+			[vars$7.fontSize]: '25px',
+			[vars$7.padding]: `0 ${globalRefs$3.spacing.xl}`
 		}
 	},
 
-	[vars$6.borderRadius]: globalRefs$3.radius.lg,
-	[vars$6.cursor]: 'pointer',
-	[vars$6.borderWidth]: '2px',
-	[vars$6.borderStyle]: 'solid',
-	[vars$6.borderColor]: 'transparent',
+	[vars$7.borderRadius]: globalRefs$3.radius.lg,
+	[vars$7.cursor]: 'pointer',
+	[vars$7.borderWidth]: '2px',
+	[vars$7.borderStyle]: 'solid',
+	[vars$7.borderColor]: 'transparent',
 
 	_fullWidth: {
-		[vars$6.width]: '100%'
+		[vars$7.width]: '100%'
 	},
 	_loading: {
-		[vars$6.cursor]: 'wait'
+		[vars$7.cursor]: 'wait'
 	},
 
 	variant: {
 		contained: {
-			[vars$6.color]: helperRefs$1.contrast,
-			[vars$6.backgroundColor]: helperRefs$1.main,
+			[vars$7.color]: helperRefs$1.contrast,
+			[vars$7.backgroundColor]: helperRefs$1.main,
 			_hover: {
-				[vars$6.backgroundColor]: helperRefs$1.dark
+				[vars$7.backgroundColor]: helperRefs$1.dark
 			},
 			_loading: {
-				[vars$6.backgroundColor]: helperRefs$1.main
+				[vars$7.backgroundColor]: helperRefs$1.main
 			}
 		},
 		outline: {
-			[vars$6.color]: helperRefs$1.main,
-			[vars$6.borderColor]: helperRefs$1.main,
+			[vars$7.color]: helperRefs$1.main,
+			[vars$7.borderColor]: helperRefs$1.main,
 			_hover: {
-				[vars$6.color]: helperRefs$1.dark,
-				[vars$6.borderColor]: helperRefs$1.dark,
+				[vars$7.color]: helperRefs$1.dark,
+				[vars$7.borderColor]: helperRefs$1.dark,
 				_error: {
-					[vars$6.color]: helperRefs$1.error
+					[vars$7.color]: helperRefs$1.error
 				}
 			}
 		},
 		link: {
-			[vars$6.color]: helperRefs$1.main,
-			[vars$6.padding]: 0,
-			[vars$6.margin]: 0,
-			[vars$6.lineHeight]: helperRefs$1.height,
-			[vars$6.borderRadius]: 0,
+			[vars$7.color]: helperRefs$1.main,
+			[vars$7.padding]: 0,
+			[vars$7.margin]: 0,
+			[vars$7.lineHeight]: helperRefs$1.height,
+			[vars$7.borderRadius]: 0,
 			_hover: {
-				[vars$6.color]: helperRefs$1.main,
-				[vars$6.textDecoration]: 'underline'
+				[vars$7.color]: helperRefs$1.main,
+				[vars$7.textDecoration]: 'underline'
 			}
 		}
 	}
@@ -1248,7 +1283,7 @@ const button = {
 
 const globalRefs$2 = getThemeRefs(globals);
 
-const vars$5 = TextField.cssVarList;
+const vars$6 = TextField.cssVarList;
 
 const textField = (vars) => ({
 	size: {
@@ -1318,13 +1353,13 @@ const textField = (vars) => ({
 	}
 });
 
-var textField$1 = textField(vars$5);
+var textField$1 = textField(vars$6);
 
-const vars$4 = PasswordField.cssVarList;
+const vars$5 = PasswordField.cssVarList;
 
 const passwordField = {
-	...textField(vars$4),
-	[vars$4.revealCursor]: 'pointer'
+	...textField(vars$5),
+	[vars$5.revealCursor]: 'pointer'
 };
 
 const numberField = {
@@ -1336,50 +1371,50 @@ const emailField = {
 };
 
 const globalRefs$1 = getThemeRefs(globals);
-const vars$3 = TextArea.cssVarList;
+const vars$4 = TextArea.cssVarList;
 
 const textArea = {
-	[vars$3.color]: globalRefs$1.colors.primary.main,
-	[vars$3.backgroundColor]: globalRefs$1.colors.surface.light,
-	[vars$3.resize]: 'vertical',
+	[vars$4.color]: globalRefs$1.colors.primary.main,
+	[vars$4.backgroundColor]: globalRefs$1.colors.surface.light,
+	[vars$4.resize]: 'vertical',
 
-	[vars$3.borderRadius]: globalRefs$1.radius.sm,
-	[vars$3.borderWidth]: '1px',
-	[vars$3.borderStyle]: 'solid',
-	[vars$3.borderColor]: 'transparent',
+	[vars$4.borderRadius]: globalRefs$1.radius.sm,
+	[vars$4.borderWidth]: '1px',
+	[vars$4.borderStyle]: 'solid',
+	[vars$4.borderColor]: 'transparent',
 
 	_borderOffset: {
-		[vars$3.outlineOffset]: '2px'
+		[vars$4.outlineOffset]: '2px'
 	},
 
 	_bordered: {
-		[vars$3.borderColor]: globalRefs$1.colors.surface.main
+		[vars$4.borderColor]: globalRefs$1.colors.surface.main
 	},
 
 	_focused: {
-		[vars$3.focusInputCursor]: 'text',
-		[vars$3.outline]: `2px solid ${globalRefs$1.colors.surface.main}`
+		[vars$4.focusInputCursor]: 'text',
+		[vars$4.outline]: `2px solid ${globalRefs$1.colors.surface.main}`
 	},
 
 	_fullWidth: {
-		[vars$3.width]: '100%'
+		[vars$4.width]: '100%'
 	},
 
 	_disabled: {
-		[vars$3.cursor]: 'not-allowed'
+		[vars$4.cursor]: 'not-allowed'
 	},
 
 	_invalid: {
-		[vars$3.outline]: `2px solid ${globalRefs$1.colors.error.main}`
+		[vars$4.outline]: `2px solid ${globalRefs$1.colors.error.main}`
 	}
 };
 
-const componentName$1 = getComponentName('checkbox');
+const componentName$2 = getComponentName('checkbox');
 
 const Checkbox = compose(
 	createStyleMixin({
 		mappings: {
-			width: {},
+			width: matchHostStyle(),
 			cursor: [{}, { selector: '> label' }]
 		}
 	}),
@@ -1390,26 +1425,30 @@ const Checkbox = compose(
 	createProxy({
 		slots: [],
 		wrappedEleName: 'vaadin-checkbox',
-		style: ``,
+		style: `
+		:host {
+			display: inline-block;
+		}
+		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$1
+		componentName: componentName$2
 	})
 );
 
-const vars$2 = Checkbox.cssVarList;
+const vars$3 = Checkbox.cssVarList;
 
 const checkbox = {
-	[vars$2.cursor]: 'pointer'
+	[vars$3.cursor]: 'pointer'
 };
 
-const componentName = getComponentName('switch-toggle');
+const componentName$1 = getComponentName('switch-toggle');
 
 let overrides = ``;
 
 const SwitchToggle = compose(
 	createStyleMixin({
 		mappings: {
-			width: {},
+			width: matchHostStyle(),
 			cursor: [{}, { selector: '> label' }]
 		}
 	}),
@@ -1422,11 +1461,15 @@ const SwitchToggle = compose(
 		wrappedEleName: 'vaadin-checkbox',
 		style: () => overrides,
 		excludeAttrsSync: ['tabindex'],
-		componentName
+		componentName: componentName$1
 	})
 );
 
 overrides = `
+	:host {
+		display: inline-block;
+	}
+	
 	:host {
 		--margin: 7px;
 		--width: var(${SwitchToggle.cssVarList.width});
@@ -1472,16 +1515,16 @@ overrides = `
 	}
 `;
 
-const vars$1 = SwitchToggle.cssVarList;
+const vars$2 = SwitchToggle.cssVarList;
 
 const swtichToggle = {
-	[vars$1.width]: '70px',
-	[vars$1.cursor]: [{}, { selector: '> label' }]
+	[vars$2.width]: '70px',
+	[vars$2.cursor]: [{}, { selector: '> label' }]
 };
 
 const globalRefs = getThemeRefs(globals);
 
-const vars = Container.cssVarList;
+const vars$1 = Container.cssVarList;
 
 const verticalAlignment = {
 	start: { verticalAlignment: 'start' },
@@ -1504,31 +1547,31 @@ const [helperTheme, helperRefs, helperVars] =
 
 const container = {
 	...helperTheme,
-	[vars.display]: 'flex',
+	[vars$1.display]: 'flex',
 	verticalPadding: {
-		sm: { [vars.verticalPadding]: '5px' },
-		md: { [vars.verticalPadding]: '10px' },
-		lg: { [vars.verticalPadding]: '20px' },
+		sm: { [vars$1.verticalPadding]: '5px' },
+		md: { [vars$1.verticalPadding]: '10px' },
+		lg: { [vars$1.verticalPadding]: '20px' },
 	},
 	horizontalPadding: {
-		sm: { [vars.horizontalPadding]: '5px' },
-		md: { [vars.horizontalPadding]: '10px' },
-		lg: { [vars.horizontalPadding]: '20px' },
+		sm: { [vars$1.horizontalPadding]: '5px' },
+		md: { [vars$1.horizontalPadding]: '10px' },
+		lg: { [vars$1.horizontalPadding]: '20px' },
 	},
 	direction: {
 		row: {
-			[vars.flexDirection]: 'row',
-			[vars.alignItems]: helperRefs.verticalAlignment,
-			[vars.justifyContent]: helperRefs.horizontalAlignment,
+			[vars$1.flexDirection]: 'row',
+			[vars$1.alignItems]: helperRefs.verticalAlignment,
+			[vars$1.justifyContent]: helperRefs.horizontalAlignment,
 			horizontalAlignment: {
 				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
 			}
 		},
 
 		column: {
-			[vars.flexDirection]: 'column',
-			[vars.alignItems]: helperRefs.horizontalAlignment,
-			[vars.justifyContent]: helperRefs.verticalAlignment,
+			[vars$1.flexDirection]: 'column',
+			[vars$1.alignItems]: helperRefs.horizontalAlignment,
+			[vars$1.justifyContent]: helperRefs.verticalAlignment,
 			verticalAlignment: {
 				spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
 			}
@@ -1537,48 +1580,102 @@ const container = {
 
 	spaceBetween: {
 		sm: {
-			[vars.gap]: '10px'
+			[vars$1.gap]: '10px'
 		},
 		md: {
-			[vars.gap]: '20px'
+			[vars$1.gap]: '20px'
 		},
 		lg: {
-			[vars.gap]: '30px'
+			[vars$1.gap]: '30px'
 		}
 	},
 
 	shadow: {
 		sm: {
-			[vars.boxShadow]: `${globalRefs.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.sm} ${helperRefs.shadowColor}`
+			[vars$1.boxShadow]: `${globalRefs.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.sm} ${helperRefs.shadowColor}`
 		},
 		md: {
-			[vars.boxShadow]: `${globalRefs.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.md} ${helperRefs.shadowColor}`
+			[vars$1.boxShadow]: `${globalRefs.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.md} ${helperRefs.shadowColor}`
 		},
 		lg: {
-			[vars.boxShadow]: `${globalRefs.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.lg} ${helperRefs.shadowColor}`
+			[vars$1.boxShadow]: `${globalRefs.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.lg} ${helperRefs.shadowColor}`
 		},
 		xl: {
-			[vars.boxShadow]: `${globalRefs.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.xl} ${helperRefs.shadowColor}`
+			[vars$1.boxShadow]: `${globalRefs.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.xl} ${helperRefs.shadowColor}`
 		},
 		'2xl': {
 			[helperVars.shadowColor]: '#00000050',
-			[vars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${helperRefs.shadowColor}`
+			[vars$1.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${helperRefs.shadowColor}`
 		},
 	},
 
 	borderRadius: {
 		sm: {
-			[vars.borderRadius]: globalRefs.radius.sm
+			[vars$1.borderRadius]: globalRefs.radius.sm
 		},
 		md: {
-			[vars.borderRadius]: globalRefs.radius.md
+			[vars$1.borderRadius]: globalRefs.radius.md
 		},
 		lg: {
-			[vars.borderRadius]: globalRefs.radius.lg
+			[vars$1.borderRadius]: globalRefs.radius.lg
 		},
 	}
 };
 
+const componentName = getComponentName('logo');
+
+let style;
+const getStyle = () => style;
+
+class RawLogo extends HTMLElement {
+	static get componentName() {
+		return componentName;
+	}
+	constructor() {
+		super();
+		const template = document.createElement('template');
+		template.innerHTML = `
+		<style>
+			${getStyle()}
+		</style>
+		<div></div>`;
+
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > div';
+	}
+}
+
+const Logo = compose(
+	createStyleMixin({
+		mappings: {
+			height: {},
+			width: {},
+			url: {},
+			fallbackUrl: {},
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawLogo);
+
+style = `
+:host {
+	display: inline-block;
+}
+:host > div {
+	display: inline-block;
+	content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
+}
+`;
+
+const vars = Logo.cssVarList;
+
+const logo = {
+	[vars.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
+};
+
 var components = {
 	button,
 	textField: textField$1,
@@ -1588,7 +1685,8 @@ var components = {
 	textArea,
 	checkbox,
 	switchToggle: swtichToggle,
-	container
+	container,
+	logo
 };
 
 var index = { globals, components };