@descope/web-components-ui 1.0.50 → 1.0.52

package/dist/index.esm.js

@@ -108,80 +108,111 @@ const matchHostStyle = (mappingObj = {}) => [
 ];
 
 const createStyleMixin =
-	({ mappings = {} }) =>
-	(superclass) => {
-		const styleAttributes = Object.keys(mappings).map((key) =>
-			kebabCaseJoin('st', key)
-		);
-		return class CustomStyleMixinClass extends superclass {
-			static get observedAttributes() {
-				const superAttrs = superclass.observedAttributes || [];
-				return [...superAttrs, ...styleAttributes];
-			}
+	({ mappings = {}, nestedMappings = {} }) =>
+		(superclass) => {
+			const styleAttributes = Object.keys(mappings).map((key) =>
+				kebabCaseJoin('st', key)
+			);
+			return class CustomStyleMixinClass extends superclass {
+				static get observedAttributes() {
+					const superAttrs = superclass.observedAttributes || [];
+					return [...superAttrs, ...styleAttributes];
+				}
 
-			static get cssVarList() {
-				return createCssVarsList(superclass.componentName, mappings);
-			}
+				static get cssVarList() {
+					return createCssVarsList(superclass.componentName, mappings);
+				}
 
-			#styleEle = null;
+				#styleEle = null;
 
-			constructor() {
-				super();
+				constructor() {
+					super();
 
-				this.#createComponentStyle();
-				this.#createAttrOverrideStyle();
-			}
+					this.#createComponentStyle();
+					this.#createAttrOverrideStyle();
+				}
 
-			#createAttrOverrideStyle() {
-				this.#styleEle = document.createElement('style');
-				this.#styleEle.id = 'style-mixin-overrides';
+				#createAttrOverrideStyle() {
+					this.#styleEle = document.createElement('style');
+					this.#styleEle.id = 'style-mixin-overrides';
 
-				this.#styleEle.innerText = '* {}';
-				this.shadowRoot.prepend(this.#styleEle);
-			}
+					this.#styleEle.innerText = '* {}';
+					this.shadowRoot.prepend(this.#styleEle);
+				}
 
-			#updateAttrOverrideStyle(attrName, value) {
-				const style = this.#styleEle.sheet.cssRules[0].style;
-				const varName = getCssVarName(
-					superclass.componentName,
-					attrName.replace(/^st-/, '')
-				);
+				#updateAttrOverrideStyle(attrName, value) {
+					const style = this.#styleEle.sheet?.cssRules[0].style;
+					const varName = getCssVarName(
+						superclass.componentName,
+						attrName.replace(/^st-/, '')
+					);
 
-				if (value) style.setProperty(varName, value);
-				else style.removeProperty(varName);
-			}
+					if (value) style?.setProperty(varName, value);
+					else style?.removeProperty(varName);
+				}
 
-			#createComponentStyle() {
-				const themeStyle = document.createElement('style');
-				themeStyle.id = 'style-mixin-component';
-				themeStyle.innerHTML = createStyle(
-					superclass.componentName,
-					this.baseSelector,
-					mappings
-				);
-				this.shadowRoot.prepend(themeStyle);
-			}
+				#createComponentStyle() {
+					const themeStyle = document.createElement('style');
+					themeStyle.id = 'style-mixin-component';
+					themeStyle.innerHTML = createStyle(
+						superclass.componentName,
+						this.baseSelector,
+						mappings
+					);
+					this.shadowRoot.prepend(themeStyle);
+				}
+
+				#createComponentNestingStyle() {
+					// we need these selectors to be more specific from the theme selectors
+					// in order to do it, we are repeating the class name for specificity
+					const numOfClassNameSpecifier = 3;
+
+					const rootNode = this.shadowRoot.host.getRootNode();
+					const styleId = `${superclass.componentName}-style-mixin-component`;
 
-			attributeChangedCallback(attrName, oldValue, newValue) {
-				super.attributeChangedCallback?.(attrName, oldValue, newValue);
+					const className = superclass.componentName;
+					this.shadowRoot.host.classList.add(className);
 
-				if (styleAttributes.includes(attrName)) {
-					this.#updateAttrOverrideStyle(attrName, newValue);
+					if(rootNode.querySelector(`style#${styleId}`)) return;
+
+					const themeStyle = document.createElement('style');
+					themeStyle.id = styleId;
+					themeStyle.innerHTML = createStyle(
+						superclass.componentName,
+						`${superclass.componentName}${Array(numOfClassNameSpecifier).fill(`.${className}`).join('')}`,
+						nestedMappings
+					);
+
+					// rootNode can be either a shadow DOM or a light DOM
+					if (rootNode.nodeName === '#document') {
+						rootNode.head.append(themeStyle);
+					} else {
+						rootNode.append(themeStyle);
+					}
 				}
-			}
 
-    connectedCallback() {
-      super.connectedCallback?.();
-      if (this.shadowRoot.isConnected) {
-        Array.from(this.attributes).forEach(attr => {
-          if (styleAttributes.includes(attr.nodeName)) {
-            this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
-          }
-        });
-      }
-    }
+				attributeChangedCallback(attrName, oldValue, newValue) {
+					super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+					if (styleAttributes.includes(attrName)) {
+						this.#updateAttrOverrideStyle(attrName, newValue);
+					}
+				}
+
+				connectedCallback() {
+					super.connectedCallback?.();
+					if (this.shadowRoot.isConnected) {
+						this.#createComponentNestingStyle();
+
+						Array.from(this.attributes).forEach(attr => {
+							if (styleAttributes.includes(attr.nodeName)) {
+								this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
+							}
+						});
+					}
+				}
+			};
 		};
-	};
 
 const draggableMixin = (superclass) =>
 	class DraggableMixinClass extends superclass {
@@ -288,9 +319,9 @@ const createProxy = ({
 				this.setAttribute('tabindex', '0');
 
 				// we want to focus on the proxy element when focusing our WC
-				this.onfocus = (e) => {
+				this.addEventListener('focus', () => {
 					this.proxyElement.focus();
-				};
+				});
 
 				// `onkeydown` is set on `proxyElement` support proper tab-index navigation
 				// this support is needed since both proxy host and element catch `focus`/`blur` event
@@ -316,8 +347,7 @@ const createProxy = ({
 				this.proxyElement.addEventListener('mouseover', this.mouseoverCbRef);
 
 				// sync events
-				this.addEventListener = this.proxyElement.addEventListener;
-
+				this.addEventListener = (...args) => this.proxyElement.addEventListener(...args);
 				syncAttrs(this.proxyElement, this.hostElement, excludeAttrsSync);
 			}
 		}
@@ -392,40 +422,40 @@ const inputMixin = (superclass) =>
 		}
 
 		connectedCallback() {
-			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
 			super.connectedCallback?.();
 
+			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
+
 			// this is needed in order to make sure the form input validation is working
 			if (!this.hasAttribute('tabindex')) {
 				this.setAttribute('tabindex', 0);
 			}
 
-			const input =
-				this.baseEle.querySelector('input') ||
-				this.baseEle.querySelector('textarea');
-			if (!input) throw Error('no input was found');
+			this.inputElement ??= this.baseEle.shadowRoot.querySelector('slot[name="input"]')?.assignedElements()[0] ||
+				this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')?.assignedElements()[0];
+			if (!this.inputElement) throw Error('no input was found');
 
 			// sync properties
-			propertyObserver(this, input, 'value');
-			this.setSelectionRange = input.setSelectionRange.bind(input);
+			propertyObserver(this, this.inputElement, 'value');
+			this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
 
-			this.validity = input.validity;
+			this.validity = this.inputElement.validity;
 
 			this.setValidity = () => {
-				this.#internals.setValidity(input.validity, input.validationMessage);
+				this.#internals.setValidity(this.inputElement.validity, this.inputElement.validationMessage);
 			};
 
-			input.oninput = () => {
-				this.value = input.value;
+			this.inputElement.oninput = () => {
+				this.value = this.inputElement.value;
 				this.setValidity();
 			};
 
 			this.onfocus = () => {
-				setTimeout(() => input.reportValidity(), 0);
+				setTimeout(() => this.inputElement.reportValidity(), 0);
 				this.validate();
 			};
 
-			input.oninvalid = () => {
+			this.inputElement.oninvalid = () => {
 				this.validate();
 			};
 		}
@@ -464,7 +494,7 @@ const compose =
 	(val) =>
 		fns.reduceRight((res, fn) => fn(res), val);
 
-const componentName$b = getComponentName('button');
+const componentName$e = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 const resetStyles = `
@@ -518,7 +548,7 @@ const Button = compose(
 		style: () =>
 			`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$b
+		componentName: componentName$e
 	})
 );
 
@@ -551,7 +581,7 @@ const loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$b, Button);
+customElements.define(componentName$e, Button);
 
 const selectors$1 = {
 	label: '::part(label)',
@@ -588,9 +618,9 @@ var textFieldMappings = {
 	placeholderColor: { selector: selectors$1.placeholder, property: 'color' }
 };
 
-const componentName$a = getComponentName('text-field');
+const componentName$d = getComponentName('text-field');
 
-let overrides$5 = ``;
+let overrides$6 = ``;
 
 const TextField = compose(
 	createStyleMixin({
@@ -603,13 +633,13 @@ const TextField = compose(
 	createProxy({
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-text-field',
-		style: () => overrides$5,
+		style: () => overrides$6,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$a
+		componentName: componentName$d
 	})
 );
 
-overrides$5 = `
+overrides$6 = `
 	:host {
 		display: inline-block;
 	}
@@ -650,11 +680,11 @@ overrides$5 = `
 	}
 `;
 
-customElements.define(componentName$a, TextField);
+customElements.define(componentName$d, TextField);
 
 const template = document.createElement('template');
 
-const componentName$9 = getComponentName('combo');
+const componentName$c = getComponentName('combo');
 
 template.innerHTML = `
   <descope-button></descope-button>
@@ -671,11 +701,11 @@ class Combo extends HTMLElement {
 	}
 }
 
-customElements.define(componentName$9, Combo);
+customElements.define(componentName$c, Combo);
 
-const componentName$8 = getComponentName('number-field');
+const componentName$b = getComponentName('number-field');
 
-let overrides$4 = ``;
+let overrides$5 = ``;
 
 const NumberField = compose(
 	createStyleMixin({
@@ -690,13 +720,13 @@ const NumberField = compose(
 	createProxy({
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-number-field',
-		style: () => overrides$4,
+		style: () => overrides$5,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$8
+		componentName: componentName$b
 	})
 );
 
-overrides$4 = `
+overrides$5 = `
 	:host {
 		display: inline-block;
 	}
@@ -736,11 +766,11 @@ overrides$4 = `
 	}
 `;
 
-customElements.define(componentName$8, NumberField);
+customElements.define(componentName$b, NumberField);
 
-const componentName$7 = getComponentName('email-field');
+const componentName$a = getComponentName('email-field');
 
-let overrides$3 = ``;
+let overrides$4 = ``;
 
 const EmailField = compose(
 	createStyleMixin({
@@ -755,13 +785,13 @@ const EmailField = compose(
 	createProxy({
 		slots: ['suffix'],
 		wrappedEleName: 'vaadin-email-field',
-		style: () => overrides$3,
+		style: () => overrides$4,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$7
+		componentName: componentName$a
 	})
 );
 
-overrides$3 = `
+overrides$4 = `
 	:host {
 		display: inline-block;
 	}
@@ -801,11 +831,11 @@ overrides$3 = `
 	}
 `;
 
-customElements.define(componentName$7, EmailField);
+customElements.define(componentName$a, EmailField);
 
-const componentName$6 = getComponentName('password-field');
+const componentName$9 = getComponentName('password-field');
 
-let overrides$2 = ``;
+let overrides$3 = ``;
 
 const PasswordField = compose(
 	createStyleMixin({
@@ -827,13 +857,13 @@ const PasswordField = compose(
 	createProxy({
 		slots: ['suffix'],
 		wrappedEleName: 'vaadin-password-field',
-		style: () => overrides$2,
+		style: () => overrides$3,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$6
+		componentName: componentName$9
 	})
 );
 
-overrides$2 = `
+overrides$3 = `
 	:host {
 		display: inline-block;
 	}
@@ -873,9 +903,9 @@ overrides$2 = `
 	}
 `;
 
-customElements.define(componentName$6, PasswordField);
+customElements.define(componentName$9, PasswordField);
 
-const componentName$5 = getComponentName('text-area');
+const componentName$8 = getComponentName('text-area');
 
 const selectors = {
 	label: '::part(label)',
@@ -883,7 +913,7 @@ const selectors = {
 	required: '::part(required-indicator)::after'
 };
 
-let overrides$1 = ``;
+let overrides$2 = ``;
 
 const TextArea = compose(
 	createStyleMixin({
@@ -908,13 +938,13 @@ const TextArea = compose(
 	createProxy({
 		slots: [],
 		wrappedEleName: 'vaadin-text-area',
-		style: () => overrides$1,
+		style: () => overrides$2,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$5
+		componentName: componentName$8
 	})
 );
 
-overrides$1 = `
+overrides$2 = `
 	:host {
 		display: inline-block;
 	}
@@ -935,29 +965,29 @@ overrides$1 = `
 	}	
 `;
 
-customElements.define(componentName$5, TextArea);
+customElements.define(componentName$8, TextArea);
 
-const componentName$4 = getComponentName('date-picker');
+const componentName$7 = getComponentName('date-picker');
 
 const DatePicker = compose(
 	draggableMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
-		componentName: componentName$4,
+		componentName: componentName$7,
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-date-picker',
 		style: ``
 	})
 );
 
-customElements.define(componentName$4, DatePicker);
+customElements.define(componentName$7, DatePicker);
 
-const componentName$3 = getComponentName('container');
+const componentName$6 = getComponentName('container');
 
 class RawContainer extends HTMLElement {
 	static get componentName() {
-		return componentName$3;
+		return componentName$6;
 	}
 	constructor() {
 		super();
@@ -987,7 +1017,7 @@ const Container = compose(
 				{ property: 'padding-right' }
 			],
 
-			display: {},
+			display: {}, // maybe this should be hardcoded to flex
 			flexDirection: {},
 			justifyContent: {},
 			alignItems: {},
@@ -1007,7 +1037,45 @@ const Container = compose(
 	componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$3, Container);
+customElements.define(componentName$6, Container);
+
+const componentName$5 = getComponentName('text');
+
+class RawText extends HTMLElement {
+	static get componentName() {
+		return componentName$5;
+	}
+	constructor() {
+		super();
+		const template = document.createElement('template');
+		template.innerHTML = `<slot></slot>`;
+
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > slot';
+	}
+}
+
+const Text = compose(
+	createStyleMixin({
+		mappings: {
+			fontFamily: {},
+			lineHeight: {},
+			fontStyle: {},
+			fontSize: {},
+			fontWeight: {},
+			width: {},
+			color: {},
+			textAlign: matchHostStyle(),
+			display: matchHostStyle()
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawText);
+
+customElements.define(componentName$5, Text);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -1156,21 +1224,47 @@ const colors = genColors({
 	error: 'red'
 });
 
+const fonts = {
+	font1: ['Roboto', 'sans-serif'],
+	font2: ['Oswald', 'serif']
+};
+const fontsRef = getThemeRefs({ fonts }).fonts;
+
 const typography = {
 	h1: {
-		font: ['Courier New', 'Arial', 'sans-serif'],
-		weight: '700',
+		font: fontsRef.font1,
+		weight: '900',
 		size: '48px'
 	},
 	h2: {
-		font: ['Courier New', 'sans-serif'],
-		weight: '500',
+		font: fontsRef.font1,
+		weight: '800',
 		size: '38px'
 	},
 	h3: {
-		font: ['Courier New', 'sans-serif'],
-		weight: '300',
+		font: fontsRef.font1,
+		weight: '600',
 		size: '28px'
+	},
+	subtitle1: {
+		font: fontsRef.font2,
+		weight: '500',
+		size: '22px'
+	},
+	subtitle2: {
+		font: fontsRef.font2,
+		weight: '400',
+		size: '20px'
+	},
+	body1: {
+		font: fontsRef.font1,
+		weight: '300',
+		size: '16px'
+	},
+	body2: {
+		font: fontsRef.font1,
+		weight: '200',
+		size: '14px'
 	}
 };
 
@@ -1195,20 +1289,20 @@ const radius = {
 };
 
 const shadow = {
-		wide: {
-			sm: '0 2px 3px -0.5px',
-			md: '0 4px 6px -1px',
-			lg: '0 10px 15px -3px',
-			xl: '0 20px 25px -5px',
-			'2xl': '0 25px 50px -12px',
-		},
-		narrow: {
-			sm: '0 1px 2px -1px',
-			md: '0 2px 4px -2px',
-			lg: '0 4px 6px -4px',
-			xl: '0 8px 10px -6px',
-			'2xl': '0 16px 16px -8px',
-		}
+	wide: {
+		sm: '0 2px 3px -0.5px',
+		md: '0 4px 6px -1px',
+		lg: '0 10px 15px -3px',
+		xl: '0 20px 25px -5px',
+		'2xl': '0 25px 50px -12px'
+	},
+	narrow: {
+		sm: '0 1px 2px -1px',
+		md: '0 2px 4px -2px',
+		lg: '0 4px 6px -4px',
+		xl: '0 8px 10px -6px',
+		'2xl': '0 16px 16px -8px'
+	}
 };
 
 var globals = {
@@ -1217,153 +1311,154 @@ var globals = {
 	spacing,
 	border,
 	radius,
-	shadow
+	shadow,
+	fonts
 };
 
-const globalRefs$3 = getThemeRefs(globals);
-const vars$7 = Button.cssVarList;
+const globalRefs$4 = getThemeRefs(globals);
+const vars$8 = Button.cssVarList;
 
 const mode = {
-	primary: globalRefs$3.colors.primary,
-	secondary: globalRefs$3.colors.secondary,
-	success: globalRefs$3.colors.success,
-	error: globalRefs$3.colors.error,
-	surface: globalRefs$3.colors.surface
+	primary: globalRefs$4.colors.primary,
+	secondary: globalRefs$4.colors.secondary,
+	success: globalRefs$4.colors.success,
+	error: globalRefs$4.colors.error,
+	surface: globalRefs$4.colors.surface
 };
 
-const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$b);
+const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$e);
 
 const button = {
 	...helperTheme$1,
 
 	size: {
 		xs: {
-			[vars$7.height]: '10px',
-			[vars$7.fontSize]: '10px',
-			[vars$7.padding]: `0 ${globalRefs$3.spacing.xs}`
+			[vars$8.height]: '10px',
+			[vars$8.fontSize]: '10px',
+			[vars$8.padding]: `0 ${globalRefs$4.spacing.xs}`
 		},
 		sm: {
-			[vars$7.height]: '20px',
-			[vars$7.fontSize]: '10px',
-			[vars$7.padding]: `0 ${globalRefs$3.spacing.sm}`
+			[vars$8.height]: '20px',
+			[vars$8.fontSize]: '10px',
+			[vars$8.padding]: `0 ${globalRefs$4.spacing.sm}`
 		},
 		md: {
-			[vars$7.height]: '30px',
-			[vars$7.fontSize]: '14px',
-			[vars$7.padding]: `0 ${globalRefs$3.spacing.md}`
+			[vars$8.height]: '30px',
+			[vars$8.fontSize]: '14px',
+			[vars$8.padding]: `0 ${globalRefs$4.spacing.md}`
 		},
 		lg: {
-			[vars$7.height]: '40px',
-			[vars$7.fontSize]: '20px',
-			[vars$7.padding]: `0 ${globalRefs$3.spacing.lg}`
+			[vars$8.height]: '40px',
+			[vars$8.fontSize]: '20px',
+			[vars$8.padding]: `0 ${globalRefs$4.spacing.lg}`
 		},
 		xl: {
-			[vars$7.height]: '50px',
-			[vars$7.fontSize]: '25px',
-			[vars$7.padding]: `0 ${globalRefs$3.spacing.xl}`
+			[vars$8.height]: '50px',
+			[vars$8.fontSize]: '25px',
+			[vars$8.padding]: `0 ${globalRefs$4.spacing.xl}`
 		}
 	},
 
-	[vars$7.borderRadius]: globalRefs$3.radius.lg,
-	[vars$7.cursor]: 'pointer',
-	[vars$7.borderWidth]: '2px',
-	[vars$7.borderStyle]: 'solid',
-	[vars$7.borderColor]: 'transparent',
+	[vars$8.borderRadius]: globalRefs$4.radius.lg,
+	[vars$8.cursor]: 'pointer',
+	[vars$8.borderWidth]: '2px',
+	[vars$8.borderStyle]: 'solid',
+	[vars$8.borderColor]: 'transparent',
 
 	_fullWidth: {
-		[vars$7.width]: '100%'
+		[vars$8.width]: '100%'
 	},
 	_loading: {
-		[vars$7.cursor]: 'wait'
+		[vars$8.cursor]: 'wait'
 	},
 
 	variant: {
 		contained: {
-			[vars$7.color]: helperRefs$1.contrast,
-			[vars$7.backgroundColor]: helperRefs$1.main,
+			[vars$8.color]: helperRefs$1.contrast,
+			[vars$8.backgroundColor]: helperRefs$1.main,
 			_hover: {
-				[vars$7.backgroundColor]: helperRefs$1.dark
+				[vars$8.backgroundColor]: helperRefs$1.dark
 			},
 			_loading: {
-				[vars$7.backgroundColor]: helperRefs$1.main
+				[vars$8.backgroundColor]: helperRefs$1.main
 			}
 		},
 		outline: {
-			[vars$7.color]: helperRefs$1.main,
-			[vars$7.borderColor]: helperRefs$1.main,
+			[vars$8.color]: helperRefs$1.main,
+			[vars$8.borderColor]: helperRefs$1.main,
 			_hover: {
-				[vars$7.color]: helperRefs$1.dark,
-				[vars$7.borderColor]: helperRefs$1.dark,
+				[vars$8.color]: helperRefs$1.dark,
+				[vars$8.borderColor]: helperRefs$1.dark,
 				_error: {
-					[vars$7.color]: helperRefs$1.error
+					[vars$8.color]: helperRefs$1.error
 				}
 			}
 		},
 		link: {
-			[vars$7.color]: helperRefs$1.main,
-			[vars$7.padding]: 0,
-			[vars$7.margin]: 0,
-			[vars$7.lineHeight]: helperRefs$1.height,
-			[vars$7.borderRadius]: 0,
+			[vars$8.color]: helperRefs$1.main,
+			[vars$8.padding]: 0,
+			[vars$8.margin]: 0,
+			[vars$8.lineHeight]: helperRefs$1.height,
+			[vars$8.borderRadius]: 0,
 			_hover: {
-				[vars$7.color]: helperRefs$1.main,
-				[vars$7.textDecoration]: 'underline'
+				[vars$8.color]: helperRefs$1.main,
+				[vars$8.textDecoration]: 'underline'
 			}
 		}
 	}
 };
 
-const globalRefs$2 = getThemeRefs(globals);
+const globalRefs$3 = getThemeRefs(globals);
 
-const vars$6 = TextField.cssVarList;
+const vars$7 = TextField.cssVarList;
 
 const textField = (vars) => ({
 	size: {
 		xs: {
 			[vars.height]: '14px',
 			[vars.fontSize]: '8px',
-			[vars.padding]: `0 ${globalRefs$2.spacing.xs}`
+			[vars.padding]: `0 ${globalRefs$3.spacing.xs}`
 		},
 		sm: {
 			[vars.height]: '20px',
 			[vars.fontSize]: '10px',
-			[vars.padding]: `0 ${globalRefs$2.spacing.sm}`
+			[vars.padding]: `0 ${globalRefs$3.spacing.sm}`
 		},
 		md: {
 			[vars.height]: '30px',
 			[vars.fontSize]: '14px',
-			[vars.padding]: `0 ${globalRefs$2.spacing.md}`
+			[vars.padding]: `0 ${globalRefs$3.spacing.md}`
 		},
 		lg: {
 			[vars.height]: '40px',
 			[vars.fontSize]: '16px',
-			[vars.padding]: `0 ${globalRefs$2.spacing.lg}`
+			[vars.padding]: `0 ${globalRefs$3.spacing.lg}`
 		},
 		xl: {
 			[vars.height]: '50px',
 			[vars.fontSize]: '25px',
-			[vars.padding]: `0 ${globalRefs$2.spacing.xl}`
+			[vars.padding]: `0 ${globalRefs$3.spacing.xl}`
 		}
 	},
 
-	[vars.color]: globalRefs$2.colors.surface.contrast,
-	[vars.placeholderColor]: globalRefs$2.colors.surface.contrast,
+	[vars.color]: globalRefs$3.colors.surface.contrast,
+	[vars.placeholderColor]: globalRefs$3.colors.surface.contrast,
 
-	[vars.backgroundColor]: globalRefs$2.colors.surface.light,
+	[vars.backgroundColor]: globalRefs$3.colors.surface.light,
 
 	[vars.borderWidth]: '1px',
 	[vars.borderStyle]: 'solid',
 	[vars.borderColor]: 'transparent',
-	[vars.borderRadius]: globalRefs$2.radius.sm,
+	[vars.borderRadius]: globalRefs$3.radius.sm,
 
 	_borderOffset: {
 		[vars.outlineOffset]: '2px'
 	},
 
 	_disabled: {
-		[vars.color]: globalRefs$2.colors.surface.dark,
-		[vars.placeholderColor]: globalRefs$2.colors.surface.light,
-		[vars.backgroundColor]: globalRefs$2.colors.surface.main
+		[vars.color]: globalRefs$3.colors.surface.dark,
+		[vars.placeholderColor]: globalRefs$3.colors.surface.light,
+		[vars.backgroundColor]: globalRefs$3.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -1371,27 +1466,27 @@ const textField = (vars) => ({
 	},
 
 	_focused: {
-		[vars.outline]: `2px solid ${globalRefs$2.colors.surface.main}`
+		[vars.outline]: `2px solid ${globalRefs$3.colors.surface.main}`
 	},
 
 	_bordered: {
-		[vars.borderColor]: globalRefs$2.colors.surface.main
+		[vars.borderColor]: globalRefs$3.colors.surface.main
 	},
 
 	_hasErrorMessage: {
-		[vars.borderColor]: globalRefs$2.colors.error.main,
-		[vars.color]: globalRefs$2.colors.error.main,
-		[vars.placeholderColor]: globalRefs$2.colors.error.light
+		[vars.borderColor]: globalRefs$3.colors.error.main,
+		[vars.color]: globalRefs$3.colors.error.main,
+		[vars.placeholderColor]: globalRefs$3.colors.error.light
 	}
 });
 
-var textField$1 = textField(vars$6);
+var textField$1 = textField(vars$7);
 
-const vars$5 = PasswordField.cssVarList;
+const vars$6 = PasswordField.cssVarList;
 
 const passwordField = {
-	...textField(vars$5),
-	[vars$5.revealCursor]: 'pointer'
+	...textField(vars$6),
+	[vars$6.revealCursor]: 'pointer'
 };
 
 const numberField = {
@@ -1402,45 +1497,45 @@ const emailField = {
 	...textField(EmailField.cssVarList)
 };
 
-const globalRefs$1 = getThemeRefs(globals);
-const vars$4 = TextArea.cssVarList;
+const globalRefs$2 = getThemeRefs(globals);
+const vars$5 = TextArea.cssVarList;
 
 const textArea = {
-	[vars$4.color]: globalRefs$1.colors.primary.main,
-	[vars$4.backgroundColor]: globalRefs$1.colors.surface.light,
-	[vars$4.resize]: 'vertical',
+	[vars$5.color]: globalRefs$2.colors.primary.main,
+	[vars$5.backgroundColor]: globalRefs$2.colors.surface.light,
+	[vars$5.resize]: 'vertical',
 
-	[vars$4.borderRadius]: globalRefs$1.radius.sm,
-	[vars$4.borderWidth]: '1px',
-	[vars$4.borderStyle]: 'solid',
-	[vars$4.borderColor]: 'transparent',
+	[vars$5.borderRadius]: globalRefs$2.radius.sm,
+	[vars$5.borderWidth]: '1px',
+	[vars$5.borderStyle]: 'solid',
+	[vars$5.borderColor]: 'transparent',
 
 	_borderOffset: {
-		[vars$4.outlineOffset]: '2px'
+		[vars$5.outlineOffset]: '2px'
 	},
 
 	_bordered: {
-		[vars$4.borderColor]: globalRefs$1.colors.surface.main
+		[vars$5.borderColor]: globalRefs$2.colors.surface.main
 	},
 
 	_focused: {
-		[vars$4.outline]: `2px solid ${globalRefs$1.colors.surface.main}`
+		[vars$5.outline]: `2px solid ${globalRefs$2.colors.surface.main}`
 	},
 
 	_fullWidth: {
-		[vars$4.width]: '100%'
+		[vars$5.width]: '100%'
 	},
 
 	_disabled: {
-		[vars$4.cursor]: 'not-allowed'
+		[vars$5.cursor]: 'not-allowed'
 	},
 
 	_invalid: {
-		[vars$4.outline]: `2px solid ${globalRefs$1.colors.error.main}`
+		[vars$5.outline]: `2px solid ${globalRefs$2.colors.error.main}`
 	}
 };
 
-const componentName$2 = getComponentName('checkbox');
+const componentName$4 = getComponentName('checkbox');
 
 const Checkbox = compose(
 	createStyleMixin({
@@ -1462,19 +1557,19 @@ const Checkbox = compose(
 		}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$2
+		componentName: componentName$4
 	})
 );
 
-const vars$3 = Checkbox.cssVarList;
+const vars$4 = Checkbox.cssVarList;
 
 const checkbox = {
-	[vars$3.cursor]: 'pointer'
+	[vars$4.cursor]: 'pointer'
 };
 
-const componentName$1 = getComponentName('switch-toggle');
+const componentName$3 = getComponentName('switch-toggle');
 
-let overrides = ``;
+let overrides$1 = ``;
 
 const SwitchToggle = compose(
 	createStyleMixin({
@@ -1490,13 +1585,13 @@ const SwitchToggle = compose(
 	createProxy({
 		slots: [],
 		wrappedEleName: 'vaadin-checkbox',
-		style: () => overrides,
+		style: () => overrides$1,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$1
+		componentName: componentName$3
 	})
 );
 
-overrides = `
+overrides$1 = `
 	:host {
 		display: inline-block;
 	}
@@ -1546,16 +1641,16 @@ overrides = `
 	}
 `;
 
-const vars$2 = SwitchToggle.cssVarList;
+const vars$3 = SwitchToggle.cssVarList;
 
 const swtichToggle = {
-	[vars$2.width]: '70px',
-	[vars$2.cursor]: [{}, { selector: '> label' }]
+	[vars$3.width]: '70px',
+	[vars$3.cursor]: [{}, { selector: '> label' }]
 };
 
-const globalRefs = getThemeRefs(globals);
+const globalRefs$1 = getThemeRefs(globals);
 
-const vars$1 = Container.cssVarList;
+const vars$2 = Container.cssVarList;
 
 const verticalAlignment = {
 	start: { verticalAlignment: 'start' },
@@ -1578,31 +1673,31 @@ const [helperTheme, helperRefs, helperVars] =
 
 const container = {
 	...helperTheme,
-	[vars$1.display]: 'flex',
+	[vars$2.display]: 'flex',
 	verticalPadding: {
-		sm: { [vars$1.verticalPadding]: '5px' },
-		md: { [vars$1.verticalPadding]: '10px' },
-		lg: { [vars$1.verticalPadding]: '20px' },
+		sm: { [vars$2.verticalPadding]: '5px' },
+		md: { [vars$2.verticalPadding]: '10px' },
+		lg: { [vars$2.verticalPadding]: '20px' },
 	},
 	horizontalPadding: {
-		sm: { [vars$1.horizontalPadding]: '5px' },
-		md: { [vars$1.horizontalPadding]: '10px' },
-		lg: { [vars$1.horizontalPadding]: '20px' },
+		sm: { [vars$2.horizontalPadding]: '5px' },
+		md: { [vars$2.horizontalPadding]: '10px' },
+		lg: { [vars$2.horizontalPadding]: '20px' },
 	},
 	direction: {
 		row: {
-			[vars$1.flexDirection]: 'row',
-			[vars$1.alignItems]: helperRefs.verticalAlignment,
-			[vars$1.justifyContent]: helperRefs.horizontalAlignment,
+			[vars$2.flexDirection]: 'row',
+			[vars$2.alignItems]: helperRefs.verticalAlignment,
+			[vars$2.justifyContent]: helperRefs.horizontalAlignment,
 			horizontalAlignment: {
 				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
 			}
 		},
 
 		column: {
-			[vars$1.flexDirection]: 'column',
-			[vars$1.alignItems]: helperRefs.horizontalAlignment,
-			[vars$1.justifyContent]: helperRefs.verticalAlignment,
+			[vars$2.flexDirection]: 'column',
+			[vars$2.alignItems]: helperRefs.horizontalAlignment,
+			[vars$2.justifyContent]: helperRefs.verticalAlignment,
 			verticalAlignment: {
 				spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
 			}
@@ -1611,56 +1706,56 @@ const container = {
 
 	spaceBetween: {
 		sm: {
-			[vars$1.gap]: '10px'
+			[vars$2.gap]: '10px'
 		},
 		md: {
-			[vars$1.gap]: '20px'
+			[vars$2.gap]: '20px'
 		},
 		lg: {
-			[vars$1.gap]: '30px'
+			[vars$2.gap]: '30px'
 		}
 	},
 
 	shadow: {
 		sm: {
-			[vars$1.boxShadow]: `${globalRefs.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.sm} ${helperRefs.shadowColor}`
+			[vars$2.boxShadow]: `${globalRefs$1.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.sm} ${helperRefs.shadowColor}`
 		},
 		md: {
-			[vars$1.boxShadow]: `${globalRefs.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.md} ${helperRefs.shadowColor}`
+			[vars$2.boxShadow]: `${globalRefs$1.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.md} ${helperRefs.shadowColor}`
 		},
 		lg: {
-			[vars$1.boxShadow]: `${globalRefs.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.lg} ${helperRefs.shadowColor}`
+			[vars$2.boxShadow]: `${globalRefs$1.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.lg} ${helperRefs.shadowColor}`
 		},
 		xl: {
-			[vars$1.boxShadow]: `${globalRefs.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.xl} ${helperRefs.shadowColor}`
+			[vars$2.boxShadow]: `${globalRefs$1.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.xl} ${helperRefs.shadowColor}`
 		},
 		'2xl': {
 			[helperVars.shadowColor]: '#00000050',
-			[vars$1.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${helperRefs.shadowColor}`
+			[vars$2.boxShadow]: `${globalRefs$1.shadow.wide['2xl']} ${helperRefs.shadowColor}`
 		},
 	},
 
 	borderRadius: {
 		sm: {
-			[vars$1.borderRadius]: globalRefs.radius.sm
+			[vars$2.borderRadius]: globalRefs$1.radius.sm
 		},
 		md: {
-			[vars$1.borderRadius]: globalRefs.radius.md
+			[vars$2.borderRadius]: globalRefs$1.radius.md
 		},
 		lg: {
-			[vars$1.borderRadius]: globalRefs.radius.lg
+			[vars$2.borderRadius]: globalRefs$1.radius.lg
 		},
 	}
 };
 
-const componentName = getComponentName('logo');
+const componentName$2 = getComponentName('logo');
 
 let style;
 const getStyle = () => style;
 
 class RawLogo extends HTMLElement {
 	static get componentName() {
-		return componentName;
+		return componentName$2;
 	}
 	constructor() {
 		super();
@@ -1701,10 +1796,217 @@ style = `
 }
 `;
 
-const vars = Logo.cssVarList;
+const vars$1 = Logo.cssVarList;
 
 const logo = {
-	[vars.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
+	[vars$1.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
+};
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = Text.cssVarList;
+
+const text = {
+	[vars.lineHeight]: '1em',
+	[vars.display]: 'inline-block',
+	[vars.textAlign]: 'left',
+	[vars.color]: globalRefs.colors.surface.dark,
+	variant: {
+		h1: {
+			[vars.fontSize]: globalRefs.typography.h1.size,
+			[vars.fontWeight]: globalRefs.typography.h1.weight,
+			[vars.fontFamily]: globalRefs.typography.h1.font
+		},
+		h2: {
+			[vars.fontSize]: globalRefs.typography.h2.size,
+			[vars.fontWeight]: globalRefs.typography.h2.weight,
+			[vars.fontFamily]: globalRefs.typography.h2.font
+		},
+		h3: {
+			[vars.fontSize]: globalRefs.typography.h3.size,
+			[vars.fontWeight]: globalRefs.typography.h3.weight,
+			[vars.fontFamily]: globalRefs.typography.h3.font
+		},
+		subtitle1: {
+			[vars.fontSize]: globalRefs.typography.subtitle1.size,
+			[vars.fontWeight]: globalRefs.typography.subtitle1.weight,
+			[vars.fontFamily]: globalRefs.typography.subtitle1.font
+		},
+		subtitle2: {
+			[vars.fontSize]: globalRefs.typography.subtitle2.size,
+			[vars.fontWeight]: globalRefs.typography.subtitle2.weight,
+			[vars.fontFamily]: globalRefs.typography.subtitle2.font
+		},
+		body1: {
+			[vars.fontSize]: globalRefs.typography.body1.size,
+			[vars.fontWeight]: globalRefs.typography.body1.weight,
+			[vars.fontFamily]: globalRefs.typography.body1.font
+		},
+		body2: {
+			[vars.fontSize]: globalRefs.typography.body2.size,
+			[vars.fontWeight]: globalRefs.typography.body2.weight,
+			[vars.fontFamily]: globalRefs.typography.body2.font
+		}
+	},
+	mode: {
+		primary: {
+			[vars.color]: globalRefs.colors.primary.main
+		},
+		secondary: {
+			[vars.color]: globalRefs.colors.secondary.main
+		},
+		error: {
+			[vars.color]: globalRefs.colors.error.main
+		},
+		success: {
+			[vars.color]: globalRefs.colors.success.main
+		}
+	},
+	textAlign: {
+		right: { [vars.textAlign]: 'right' },
+		left: { [vars.textAlign]: 'left' },
+		center: { [vars.textAlign]: 'center' }
+	},
+	_fullWidth: {
+		[vars.width]: '100%',
+		[vars.display]: 'block'
+	},
+	_italic: {
+		[vars.fontStyle]: 'italic'
+	}
+};
+
+const componentName$1 = getComponentName('passcode-internal');
+
+const componentName = getComponentName('passcode');
+
+const customMixin = (superclass) =>
+  class DraggableMixinClass extends superclass {
+    constructor() {
+      super();
+    }
+
+    get digits() {
+      return Number.parseInt(this.getAttribute('digits')) || 6
+    }
+
+    connectedCallback() {
+      super.connectedCallback?.();
+      const template = document.createElement('template');
+
+      //forward required & pattern TODO use forwardAttrs
+      template.innerHTML = `
+      <${componentName$1} 
+        bordered="true" 
+        name="code" 
+        tabindex="0"
+        slot="input"
+        required="${this.shadowRoot.host.getAttribute('required')}"
+        pattern="${this.shadowRoot.host.getAttribute('pattern')}"
+      ></${componentName$1}>
+      `;
+
+      // we are adding a slot under vaadin-text-field, it should reflect all descope-passcode children to be under vaadin-text-field, this is why it has a name & slot
+      const slotEle = Object.assign(document.createElement('slot'), { name: 'input', slot: 'input', part: 'input' });
+      this.proxyElement.appendChild(slotEle);
+
+      // we want to control when the element is out of focus 
+      // so the validations will be triggered blur event is dispatched from descope-passcode internal (and not every time focusing a digit)
+      this.proxyElement._setFocused = () => { };
+
+      this.shadowRoot.host.appendChild(template.content.cloneNode(true));
+      this.inputElement = this.querySelector(componentName$1);
+
+      // we want to trigger validation only when dispatching a blur event from the descope-passcode-internal
+      this.inputElement.addEventListener('blur', () => {
+        this.proxyElement.validate();
+      });
+    }
+  };
+
+const { borderStyle, borderWidth, ...restTextFieldMappings } = textFieldMappings;
+
+const Passcode = compose(
+  createStyleMixin({
+    mappings: {
+      ...restTextFieldMappings,
+    },
+    nestedMappings: {
+      borderColor: {
+        selector: ` ${TextField.componentName}`,
+        property: TextField.cssVarList.borderColor
+      }
+    }
+  }),
+  draggableMixin,
+  inputMixin,
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => `
+    :host {
+      --vaadin-field-default-width: auto;
+    }
+
+    ::slotted([slot='input']) {
+      -webkit-mask-image: none;
+      display: flex;
+      gap: 2px;
+      align-items: center;
+      padding: 0;
+    }
+
+    vaadin-text-field::part(input-field) {
+      background-color: transparent;
+      padding: 0;
+    }
+
+    ${overrides}
+    `,
+    excludeAttrsSync: ['tabindex'],
+    componentName
+  })
+);
+
+const overrides = `
+	:host {
+		display: inline-block;
+	}
+
+	vaadin-text-field {
+		margin: 0;
+		padding: 0;
+	}
+	vaadin-text-field::part(input-field) {
+		overflow: hidden;
+	}
+	vaadin-text-field[readonly] > input:placeholder-shown {
+		opacity: 1;
+	}
+
+	vaadin-text-field > label,
+	vaadin-text-field::part(input-field) {
+		cursor: pointer;
+		color: var(${Passcode.cssVarList.color});
+	}
+	vaadin-text-field::part(input-field):focus {
+		cursor: text;
+	}
+	vaadin-text-field[required]::part(required-indicator)::after {
+		font-size: "12px";
+		content: "*";
+		color: var(${Passcode.cssVarList.color});
+	}
+	vaadin-text-field[readonly]::part(input-field)::after {
+		border: 0 solid;
+	}
+`;
+
+const passcode = {
+	...textField(Passcode.cssVarList),
 };
 
 var components = {
@@ -1717,7 +2019,9 @@ var components = {
 	checkbox,
 	switchToggle: swtichToggle,
 	container,
-	logo
+	logo,
+	text,
+	passcode
 };
 
 var index = { globals, components };