@descope/web-components-ui 1.0.64 → 1.0.66

package/dist/index.esm.js

@@ -16,14 +16,18 @@ const kebabCase = (str) =>
 		.replace(/[\s_.]+/g, '-')
 		.toLowerCase();
 
-const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
+const kebabCaseJoin = (...args) => kebabCase(args.filter((arg) => !!arg).join('-'));
 
 const compose = (...fns) =>
 	(val) =>
 		fns.reduceRight((res, fn) => fn(res), val);
 
+const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+
 const DESCOPE_PREFIX = 'descope';
 const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
+const BASE_THEME_SECTION = 'host';
+const PORTAL_THEME_PREFIX = '@';
 
 const observeAttributes = (
 	ele,
@@ -31,15 +35,14 @@ const observeAttributes = (
 	{ excludeAttrs = [], includeAttrs = [] }
 ) => {
 	// sync all attrs on init
-	callback(
-		...Array.from(ele.attributes)
-			.filter(
-				(attr) =>
-					!excludeAttrs.includes(attr.name) &&
-					(!includeAttrs.length || includeAttrs.includes(attr.name))
-			)
-			.map((attr) => attr.name)
-	);
+	const filteredAttrs = Array.from(ele.attributes)
+		.filter((attr) =>
+			!excludeAttrs.includes(attr.name) &&
+			(!includeAttrs.length || includeAttrs.includes(attr.name))
+		)
+		.map((attr) => attr.name);
+
+	callback(filteredAttrs);
 
 	const observer = new MutationObserver((mutationsList) => {
 		for (const mutation of mutationsList) {
@@ -56,21 +59,39 @@ const observeAttributes = (
 	observer.observe(ele, { attributes: true });
 };
 
+// calling the callback with this object: { addedNodes, removedNodes }
+const observeChildren = (
+	ele,
+	callback,
+) => {
+	callback({ addedNodes: Array.from(ele.children), removedNodes: [] });
+
+	const observer = new MutationObserver((mutationsList) => {
+		for (const mutation of mutationsList) {
+			if (mutation.type === 'childList') {
+				callback(mutation);
+			}
+		}
+	});
+
+	observer.observe(ele, { childList: true });
+};
+
 const createSyncAttrsCb =
 	(srcEle, targetEle, mapAttrs = {}) =>
-	(...attrNames) => {
-		attrNames.forEach((attrName) => {
-			const targetAttrName = mapAttrs[attrName] || attrName;
-			const srcAttrVal = srcEle.getAttribute(attrName);
-			if (srcAttrVal !== null) {
-				if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
-					targetEle.setAttribute(targetAttrName, srcAttrVal);
+		(attrNames) => {
+			attrNames.forEach((attrName) => {
+				const targetAttrName = mapAttrs[attrName] || attrName;
+				const srcAttrVal = srcEle.getAttribute(attrName);
+				if (srcAttrVal !== null) {
+					if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
+						targetEle.setAttribute(targetAttrName, srcAttrVal);
+					}
+				} else {
+					targetEle.removeAttribute(targetAttrName);
 				}
-			} else {
-				targetEle.removeAttribute(targetAttrName);
-			}
-		});
-	};
+			});
+		};
 
 const syncAttrs = (ele1, ele2, options) => {
 	observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
@@ -80,27 +101,29 @@ const syncAttrs = (ele1, ele2, options) => {
 const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 
 const getCssVarName = (...args) =>
-  `--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;
+	`--${kebabCaseJoin(...args)}`;
 
 const forwardAttrs = (source, dest, options = {}) => {
-  observeAttributes(
-    source,
-    createSyncAttrsCb(source, dest, options.mapAttrs),
-    options
-  );
+	observeAttributes(
+		source,
+		createSyncAttrsCb(source, dest, options.mapAttrs),
+		options
+	);
 };
 
 const forwardProps = (src, target, props = []) => {
-	if(!props.length) return;
+	if (!props.length) return;
 
-	const config = props.reduce((acc, prop) => Object.assign(acc, {[prop] : {
-		get () {
-			return target[prop]
-		},
-		set (v) {
-			target[prop] = v;
+	const config = props.reduce((acc, prop) => Object.assign(acc, {
+		[prop]: {
+			get() {
+				return target[prop]
+			},
+			set(v) {
+				target[prop] = v;
+			}
 		}
-	}}), {});
+	}), {});
 
 	Object.defineProperties(src, config);
 };
@@ -232,108 +255,134 @@ const createClassSelectorSpecifier = (className, numOfRepeats) => Array(numOfRep
 	.fill(`.${className}`)
 	.join('');
 
-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];
-				}
+const STYLE_OVERRIDE_ATTR_PREFIX = 'st';
 
-				static get cssVarList() {
-					return createCssVarsList(superclass.componentName, {
+
+const createStyleMixin =
+	({ mappings = {} }) => (superclass) =>
+		class CustomStyleMixinClass extends superclass {
+			static get cssVarList() {
+				return {
+					...superclass.cssVarList,
+					...createCssVarsList(superclass.componentName, {
 						...mappings,
-					});
-				}
+					})
+				};
+			}
 
-				#overrideStyleEle = null;
-				#themeStyleEle = null;
-				#disconnectThemeManager
+			#overrideStyleEle;
+			#themeStyleEle;
+			#disconnectThemeManager
+			#componentNameSuffix
+			#themeSection
+			#rootElement
+			#baseSelector
+			#styleAttributes
+
+			// we are using this mixin also for portalMixin
+			// so we should be able to inject styles to other DOM elements
+			// this is why we need to support these overrides
+			constructor({
+				getRootElement,
+				componentNameSuffix = '',
+				themeSection = BASE_THEME_SECTION,
+				baseSelector
+			} = {}) {
+				super();
+				this.#componentNameSuffix = componentNameSuffix;
+				this.#themeSection = themeSection;
+				this.#rootElement = getRootElement?.(this) || this.shadowRoot;
+				this.#baseSelector = baseSelector ?? this.baseSelector;
+
+				this.#styleAttributes = Object.keys(mappings).map((key) =>
+					kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
+				);
+			}
 
-				constructor() {
-					super();
+			get componentTheme() {
+				return componentsThemeManager.currentTheme?.[superclass.componentName] || ''
+			}
 
-					this.classList.add(superclass.componentName);
+			#onComponentThemeChange() {
+				this.#themeStyleEle.innerHTML = this.componentTheme[this.#themeSection];
+			}
 
-					this.#createComponentStyle();
-					this.#createComponentTheme();
-					this.#createAttrOverrideStyle();
-				}
+			#createComponentTheme() {
+				this.#themeStyleEle = document.createElement('style');
+				this.#themeStyleEle.id = 'style-mixin-theme';
+				this.#rootElement.prepend(this.#themeStyleEle);
+				this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(this.#onComponentThemeChange.bind(this));
+				this.#onComponentThemeChange();
+			}
 
-				get componentTheme() {
-					return componentsThemeManager.currentTheme?.[superclass.componentName] || ''
-				}
+			#createAttrOverrideStyle() {
+				this.#overrideStyleEle = document.createElement('style');
+				this.#overrideStyleEle.id = 'style-mixin-overrides';
 
-				onComponentThemeChange() {
-					this.#themeStyleEle.innerHTML = this.componentTheme.theme;
-				}
+				const classSpecifier = createClassSelectorSpecifier(superclass.componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
 
-				#createComponentTheme() {
-					this.#themeStyleEle = document.createElement('style');
-					this.#themeStyleEle.id = 'style-mixin-component-theme';
-					this.shadowRoot.prepend(this.#themeStyleEle);
-					this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(this.onComponentThemeChange.bind(this));
-					this.onComponentThemeChange();
-				}
+				this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
+				this.#rootElement.append(this.#overrideStyleEle);
+			}
 
-				#createAttrOverrideStyle() {
-					this.#overrideStyleEle = document.createElement('style');
-					this.#overrideStyleEle.id = 'style-mixin-overrides';
+			#setAttrOverrideStyle(attrName, value) {
+				const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
+				if (!style) return;
 
-					const classSpecifier = createClassSelectorSpecifier(superclass.componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
-					this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
-					this.shadowRoot.append(this.#overrideStyleEle);
-				}
+				const varName = getCssVarName(
+					superclass.componentName,
+					attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
+				);
 
-				#updateAttrOverrideStyle(attrName, value) {
-					const style = this.#overrideStyleEle.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);
+			#updateOverrideStyle(attrs = []) {
+				for (const attr of attrs) {
+					if (this.#styleAttributes.includes(attr)) {
+						this.#setAttrOverrideStyle(attr, this.getAttribute(attr));
+					}
 				}
 
-				#createComponentStyle() {
-					const themeStyle = document.createElement('style');
-					themeStyle.id = 'style-mixin-component';
-					themeStyle.innerHTML = createStyle(
-						superclass.componentName,
-						this.baseSelector,
-						mappings
-					);
-					this.shadowRoot.prepend(themeStyle);
-				}
+				// we are rewriting the style back to the style tag
+				this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText;
+			}
 
-				attributeChangedCallback(attrName, oldValue, newValue) {
-					super.attributeChangedCallback?.(attrName, oldValue, newValue);
+			#createComponentStyle() {
+				const themeStyle = document.createElement('style');
+				themeStyle.id = 'style-mixin-mappings';
+				themeStyle.innerHTML = createStyle(
+					kebabCaseJoin(superclass.componentName, this.#componentNameSuffix),
+					this.#baseSelector,
+					mappings
+				);
+				this.#rootElement.prepend(themeStyle);
+			}
 
-					if (styleAttributes.includes(attrName)) {
-						this.#updateAttrOverrideStyle(attrName, newValue);
-					}
-				}
+			#addClassName(className) {
+				(this.#rootElement.classList || this.#rootElement.host.classList).add(className);
+			}
 
-				connectedCallback() {
-					super.connectedCallback?.();
-					if (this.shadowRoot.isConnected) {
-						Array.from(this.attributes).forEach((attr) => {
-							if (styleAttributes.includes(attr.nodeName)) {
-								this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
-							}
-						});
-					}
-				}
+			connectedCallback() {
+				super.connectedCallback?.();
+				if (this.shadowRoot.isConnected) {
+
+					this.#addClassName(superclass.componentName);
+
+					this.#createComponentStyle();
+					this.#createComponentTheme();
+					this.#createAttrOverrideStyle();
+
+					// this is instead attributeChangedCallback because we cannot use static methods in this case
+					observeAttributes(this, this.#updateOverrideStyle.bind(this), {});
 
-				disconnectedCallback() {
-					this.#disconnectThemeManager?.();
 				}
-			};
+			}
+
+			disconnectedCallback() {
+				this.#disconnectThemeManager?.();
+			}
 		};
 
 const draggableMixin = (superclass) =>
@@ -475,8 +524,6 @@ const createProxy = ({
 	return compose(hoverableMixin())(ProxyElement);
 };
 
-const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-
 const events = [
   'change',
   'input',
@@ -544,7 +591,13 @@ const inputMixin = (superclass) => class InputMixinClass extends superclass {
     }
   }
 
+  get isReadOnly() {
+    return this.getAttribute('readonly') !== 'false'
+  }
+
   setValidity() {
+    if (this.isReadOnly) return;
+
     const validity = this.getValidity();
     this.#internals.setValidity(validity, this.getErrorMessage(validity));
   }
@@ -570,8 +623,8 @@ const inputMixin = (superclass) => class InputMixinClass extends superclass {
   }
 
   setCustomValidity(errorMessage) {
-    if(errorMessage){
-      this.#internals.setValidity({customError: true}, errorMessage);
+    if (errorMessage) {
+      this.#internals.setValidity({ customError: true }, errorMessage);
     } else {
       this.#internals.setValidity({});
       this.setValidity();
@@ -624,9 +677,9 @@ const inputMixin = (superclass) => class InputMixinClass extends superclass {
     }
   }
 
-  handleDispatchValidationEvents(){
-    if(this.checkValidity()) {
-      this.dispatchValid(); 
+  handleDispatchValidationEvents() {
+    if (this.checkValidity()) {
+      this.dispatchValid();
     } else {
       this.dispatchInvalid();
     }
@@ -689,28 +742,6 @@ const proxyInputMixin = (superclass) =>
 
 			this.#inputElement = super.inputElement;
 
-			// this is our way to identify that the form was submitted
-			// in this case, we want the input to be in error state if it's not valid
-			this.addEventListener('focus', (e) => {
-				if (e.relatedTarget?.form) {
-					if (!this.checkValidity()) {
-						this.setAttribute('invalid', 'true');
-					}
-
-					if (this.hasAttribute('invalid')) {
-						this.reportValidityOnInternalInput();
-					}
-				}
-			});
-
-			this.addEventListener('invalid', () => {
-				this.setInternalInputErrorMessage();
-				this.setAttribute('error-message', this.validationMessage);
-			});
-
-			this.addEventListener('valid', () => {
-				this.removeAttribute('invalid');
-			});
 		}
 
 		get inputElement() {
@@ -766,6 +797,29 @@ const proxyInputMixin = (superclass) =>
 		connectedCallback() {
 			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
 
+			// this is our way to identify that the form was submitted
+			// in this case, we want the input to be in error state if it's not valid
+			this.addEventListener('focus', (e) => {
+				if (e.relatedTarget?.form) {
+					if (!this.checkValidity()) {
+						this.setAttribute('invalid', 'true');
+					}
+
+					if (this.hasAttribute('invalid')) {
+						this.reportValidityOnInternalInput();
+					}
+				}
+			});
+
+			this.addEventListener('invalid', () => {
+				this.setInternalInputErrorMessage();
+				this.setAttribute('error-message', this.validationMessage);
+			});
+
+			this.addEventListener('valid', () => {
+				this.removeAttribute('invalid');
+			});
+
 			super.connectedCallback?.();
 
 			this.inputElement.addEventListener('input', () => {
@@ -825,7 +879,64 @@ const componentNameValidationMixin = (superclass) =>
 		}
 	};
 
-const componentName$h = getComponentName('button');
+const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
+
+const appendSuffixToKeys = (obj, suffix) => Object.keys(obj).reduce((acc, key) =>
+  Object.assign(acc, { [suffix + upperFirst(key)]: obj[key] }), {});
+
+const getDomNode = (maybeDomNode) => maybeDomNode.host || maybeDomNode;
+
+const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
+  const eleDisplayName = name || sanitizeSelector(selector);
+
+  const BaseClass = createStyleMixin({
+    mappings
+  })(superclass);
+
+  return class PortalMixinClass extends BaseClass {
+    static get cssVarList() {
+      return {
+        ...BaseClass.cssVarList,
+        ...createCssVarsList(superclass.componentName, appendSuffixToKeys(mappings, eleDisplayName))
+      };
+    }
+
+    #portalEle
+
+    constructor() {
+      // we cannot use "this" before calling "super"
+      const getRootElement = (that) => {
+        const baseEle = that.shadowRoot.querySelector(that.baseSelector);
+        const portal = baseEle.shadowRoot.querySelector(selector);
+
+        return portal.shadowRoot || portal
+      };
+
+      super({
+        getRootElement,
+        componentNameSuffix: eleDisplayName,
+        themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
+        baseSelector: ':host'
+      });
+
+      this.#portalEle = getDomNode(getRootElement(this));
+    }
+
+    #handleHoverAttribute() {
+      this.#portalEle.onmouseenter = (e) => { e.target.setAttribute('hover', 'true'); };
+      this.#portalEle.onmouseleave = (e) => { e.target.removeAttribute('hover'); };
+    }
+
+    connectedCallback() {
+      super.connectedCallback?.();
+      forwardAttrs(this, this.#portalEle, { excludeAttrs: ['hover'] });
+
+      this.#handleHoverAttribute();
+    }
+  }
+};
+
+const componentName$i = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 const resetStyles = `
@@ -879,7 +990,7 @@ const Button = compose(
 		style: () =>
 			`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$h
+		componentName: componentName$i
 	})
 );
 
@@ -916,9 +1027,9 @@ const loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$h, Button);
+customElements.define(componentName$i, Button);
 
-const componentName$g = getComponentName('checkbox');
+const componentName$h = getComponentName('checkbox');
 
 const Checkbox = compose(
 	createStyleMixin({
@@ -944,17 +1055,17 @@ const Checkbox = compose(
 		}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$g
+		componentName: componentName$h
 	})
 );
 
-customElements.define(componentName$g, Checkbox);
+customElements.define(componentName$h, Checkbox);
 
-const componentName$f = getComponentName('loader-linear');
+const componentName$g = getComponentName('loader-linear');
 
 class RawLoaderLinear extends DescopeBaseClass {
 	static get componentName() {
-		return componentName$f;
+		return componentName$g;
 	}
 	constructor() {
 		super();
@@ -990,13 +1101,13 @@ class RawLoaderLinear extends DescopeBaseClass {
 	}
 }
 
-const selectors$4 = {
+const selectors$5 = {
 	root: {},
 	after: { selector: '::after' },
 	host: { selector: () => ':host' }
 };
 
-const { root: root$1, after: after$1, host: host$2 } = selectors$4;
+const { root: root$1, after: after$1, host: host$2 } = selectors$5;
 
 const LoaderLinear = compose(
 	createStyleMixin({
@@ -1017,13 +1128,13 @@ const LoaderLinear = compose(
 	componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$f, LoaderLinear);
+customElements.define(componentName$g, LoaderLinear);
 
-const componentName$e = getComponentName('loader-radial');
+const componentName$f = getComponentName('loader-radial');
 
 class RawLoaderRadial extends DescopeBaseClass {
 	static get componentName() {
-		return componentName$e;
+		return componentName$f;
 	}
 	constructor() {
 		super();
@@ -1075,13 +1186,13 @@ const LoaderRadial = compose(
 	componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$e, LoaderRadial);
+customElements.define(componentName$f, LoaderRadial);
 
-const componentName$d = getComponentName('container');
+const componentName$e = getComponentName('container');
 
 class RawContainer extends DescopeBaseClass {
 	static get componentName() {
-		return componentName$d;
+		return componentName$e;
 	}
 	constructor() {
 		super();
@@ -1143,28 +1254,28 @@ const Container = compose(
 	componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$d, Container);
+customElements.define(componentName$e, Container);
 
-const componentName$c = getComponentName('date-picker');
+const componentName$d = getComponentName('date-picker');
 
 const DatePicker = compose(
 	draggableMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
-		componentName: componentName$c,
+		componentName: componentName$d,
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-date-picker',
 		style: ``
 	})
 );
 
-customElements.define(componentName$c, DatePicker);
+customElements.define(componentName$d, DatePicker);
 
-const componentName$b = getComponentName('divider');
+const componentName$c = getComponentName('divider');
 class RawDivider extends DescopeBaseClass {
 	static get componentName() {
-		return componentName$b;
+		return componentName$c;
 	}
 	constructor() {
 		super();
@@ -1216,7 +1327,7 @@ class RawDivider extends DescopeBaseClass {
 	}
 }
 
-const selectors$3 = {
+const selectors$4 = {
 	root: { selector: '' },
 	before: { selector: '::before' },
 	after: { selector: '::after' },
@@ -1224,7 +1335,7 @@ const selectors$3 = {
 	host: { selector: () => ':host' },
 };
 
-const { root, before, after, text: text$2, host: host$1 } = selectors$3;
+const { root, before, after, text: text$2, host: host$1 } = selectors$4;
 
 const Divider = compose(
 	createStyleMixin({
@@ -1248,11 +1359,11 @@ const Divider = compose(
 	componentNameValidationMixin
 )(RawDivider);
 
-const componentName$a = getComponentName('text');
+const componentName$b = getComponentName('text');
 
 class RawText extends DescopeBaseClass {
 	static get componentName() {
-		return componentName$a;
+		return componentName$b;
 	}
 	constructor() {
 		super();
@@ -1300,11 +1411,11 @@ const Text = compose(
 	componentNameValidationMixin
 )(RawText);
 
-customElements.define(componentName$a, Text);
+customElements.define(componentName$b, Text);
 
-customElements.define(componentName$b, Divider);
+customElements.define(componentName$c, Divider);
 
-const selectors$2 = {
+const selectors$3 = {
 	label: '::part(label)',
 	input: '::part(input-field)',
 	readOnlyInput: '[readonly]::part(input-field)::after',
@@ -1313,33 +1424,33 @@ const selectors$2 = {
 };
 
 var textFieldMappings = {
-	backgroundColor: { selector: selectors$2.input },
-	color: { selector: selectors$2.input },
-	width: { selector: selectors$2.host },
+	backgroundColor: { selector: selectors$3.input },
+	color: { selector: selectors$3.input },
+	width: { selector: selectors$3.host },
 	borderColor: [
-		{ selector: selectors$2.input },
-		{ selector: selectors$2.readOnlyInput }
+		{ selector: selectors$3.input },
+		{ selector: selectors$3.readOnlyInput }
 	],
 	borderWidth: [
-		{ selector: selectors$2.input },
-		{ selector: selectors$2.readOnlyInput }
+		{ selector: selectors$3.input },
+		{ selector: selectors$3.readOnlyInput }
 	],
 	borderStyle: [
-		{ selector: selectors$2.input },
-		{ selector: selectors$2.readOnlyInput }
+		{ selector: selectors$3.input },
+		{ selector: selectors$3.readOnlyInput }
 	],
-	borderRadius: { selector: selectors$2.input },
-	boxShadow: { selector: selectors$2.input },
+	borderRadius: { selector: selectors$3.input },
+	boxShadow: { selector: selectors$3.input },
 	fontSize: {},
-	height: { selector: selectors$2.input },
-	padding: { selector: selectors$2.input },
-	outline: { selector: selectors$2.input },
-	outlineOffset: { selector: selectors$2.input },
+	height: { selector: selectors$3.input },
+	padding: { selector: selectors$3.input },
+	outline: { selector: selectors$3.input },
+	outlineOffset: { selector: selectors$3.input },
 
-	placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
+	placeholderColor: { selector: selectors$3.placeholder, property: 'color' }
 };
 
-const componentName$9 = getComponentName('email-field');
+const componentName$a = getComponentName('email-field');
 
 let overrides$5 = ``;
 
@@ -1358,7 +1469,7 @@ const EmailField = compose(
 		wrappedEleName: 'vaadin-email-field',
 		style: () => overrides$5,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$9
+		componentName: componentName$a
 	})
 );
 
@@ -1402,12 +1513,12 @@ overrides$5 = `
 	}
 `;
 
-customElements.define(componentName$9, EmailField);
+customElements.define(componentName$a, EmailField);
 
-const componentName$8 = getComponentName('link');
+const componentName$9 = getComponentName('link');
 class RawLink extends DescopeBaseClass {
 	static get componentName() {
-		return componentName$8;
+		return componentName$9;
 	}
 	constructor() {
 		super();
@@ -1449,13 +1560,13 @@ class RawLink extends DescopeBaseClass {
 	}
 }
 
-const selectors$1 = {
+const selectors$2 = {
 	host: { selector: () => 'host' },
 	anchor: { selector: '> a' },
 	text: { selector: Text.componentName }
 };
 
-const { anchor, text: text$1, host } = selectors$1;
+const { anchor, text: text$1, host } = selectors$2;
 
 const Link = compose(
 	createStyleMixin({
@@ -1474,16 +1585,16 @@ const Link = compose(
 	componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$8, Link);
+customElements.define(componentName$9, Link);
 
-const componentName$7 = getComponentName('logo');
+const componentName$8 = getComponentName('logo');
 
 let style;
 const getStyle = () => style;
 
 class RawLogo extends DescopeBaseClass {
 	static get componentName() {
-		return componentName$7;
+		return componentName$8;
 	}
 	constructor() {
 		super();
@@ -1524,9 +1635,9 @@ style = `
 }
 `;
 
-customElements.define(componentName$7, Logo);
+customElements.define(componentName$8, Logo);
 
-const componentName$6 = getComponentName('number-field');
+const componentName$7 = getComponentName('number-field');
 
 let overrides$4 = ``;
 
@@ -1545,7 +1656,7 @@ const NumberField = compose(
 		wrappedEleName: 'vaadin-number-field',
 		style: () => overrides$4,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$6
+		componentName: componentName$7
 	})
 );
 
@@ -1589,7 +1700,7 @@ overrides$4 = `
 	}
 `;
 
-customElements.define(componentName$6, NumberField);
+customElements.define(componentName$7, NumberField);
 
 var BaseInputClass = inputMixin(HTMLElement); //todo: maybe we should use base class?
 
@@ -1607,7 +1718,7 @@ const getSanitizedCharacters = (str) => {
 	return [...pin]; // creating array of chars
 };
 
-const componentName$5 = getComponentName('passcode-internal');
+const componentName$6 = getComponentName('passcode-internal');
 
 class PasscodeInternal extends BaseInputClass {
 	static get observedAttributes() {
@@ -1615,12 +1726,13 @@ class PasscodeInternal extends BaseInputClass {
 			...BaseInputClass.observedAttributes,
 			'disabled',
 			'bordered',
-			'size'
+			'size',
+			'readonly'
 		];
 	}
 
 	static get componentName() {
-		return componentName$5;
+		return componentName$6;
 	}
 
 	constructor() {
@@ -1658,7 +1770,7 @@ class PasscodeInternal extends BaseInputClass {
 	}
 
 	set value(val) {
-		if(val === this.value) return;
+		if (val === this.value) return;
 
 		const charArr = getSanitizedCharacters(val);
 
@@ -1701,6 +1813,7 @@ class PasscodeInternal extends BaseInputClass {
 
 	async connectedCallback() {
 		super.connectedCallback();
+
 		this.initInputs();
 
 		this.addEventListener('invalid', this.handleInputsInvalid);
@@ -1745,7 +1858,8 @@ class PasscodeInternal extends BaseInputClass {
 			// in order to simulate blur on the input
 			// we are checking if focus on one of the digits happened immediately after blur on another digit
 			// if not, the component is no longer focused and we should simulate blur
-			input.addEventListener('blur', () => {
+			input.addEventListener('blur', (e) => {
+				e.stopPropagation();
 				const timerId = setTimeout(() => {
 					this.dispatchBlur();
 				});
@@ -1755,7 +1869,8 @@ class PasscodeInternal extends BaseInputClass {
 				);
 			});
 
-			input.oninput = () => {
+			input.oninput = (e) => {
+				e.stopPropagation();
 				const charArr = getSanitizedCharacters(input.value);
 
 				if (!charArr.length) input.value = ''; // if we got an invalid value we want to clear the input
@@ -1774,7 +1889,7 @@ class PasscodeInternal extends BaseInputClass {
 					!prevInput.hasAttribute('focused') && setTimeout(() => {
 						focusElement(prevInput);
 					});
-					
+
 					this.dispatchInput();
 				} else if (key.match(/^(\d)$/g)) { // if input is a digit
 					input.value = ''; // we are clearing the previous value so we can override it with the new value
@@ -1795,7 +1910,7 @@ class PasscodeInternal extends BaseInputClass {
 	}
 }
 
-const componentName$4 = getComponentName('text-field');
+const componentName$5 = getComponentName('text-field');
 
 let overrides$3 = ``;
 
@@ -1812,7 +1927,7 @@ const TextField = compose(
 		wrappedEleName: 'vaadin-text-field',
 		style: () => overrides$3,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$4
+		componentName: componentName$5
 	})
 );
 
@@ -1857,7 +1972,7 @@ overrides$3 = `
 	}
 `;
 
-const componentName$3 = getComponentName('passcode');
+const componentName$4 = getComponentName('passcode');
 
 const customMixin = (superclass) =>
 	class DraggableMixinClass extends superclass {
@@ -1874,12 +1989,12 @@ const customMixin = (superclass) =>
 			const template = document.createElement('template');
 
 			template.innerHTML = `
-			<${componentName$5} 
+			<${componentName$6} 
 				bordered="true" 
 				name="code" 
 				tabindex="-1"
 				slot="input"
-			></${componentName$5}>
+			></${componentName$6}>
 			`;
 
 			this.proxyElement.appendChild(template.content.cloneNode(true));
@@ -1888,7 +2003,7 @@ const customMixin = (superclass) =>
 			// 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.inputElement = this.shadowRoot.querySelector(componentName$5);
+			this.inputElement = this.shadowRoot.querySelector(componentName$6);
 
 			forwardAttrs(this.shadowRoot.host, this.inputElement, { includeAttrs: ['required', 'pattern'] });
 
@@ -1934,6 +2049,7 @@ const Passcode = compose(
       --vaadin-field-default-width: auto;
 			display: inline-block;
     }
+
     descope-passcode-internal {
       -webkit-mask-image: none;
       display: flex;
@@ -1969,17 +2085,17 @@ const Passcode = compose(
 		}
     `,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$3
+		componentName: componentName$4
 	})
 );
 
-customElements.define(componentName$4, TextField);
+customElements.define(componentName$5, TextField);
 
-customElements.define(componentName$5, PasscodeInternal);
+customElements.define(componentName$6, PasscodeInternal);
 
-customElements.define(componentName$3, Passcode);
+customElements.define(componentName$4, Passcode);
 
-const componentName$2 = getComponentName('password-field');
+const componentName$3 = getComponentName('password-field');
 
 let overrides$2 = ``;
 
@@ -2004,7 +2120,7 @@ const PasswordField = compose(
 		wrappedEleName: 'vaadin-password-field',
 		style: () => overrides$2,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$2
+		componentName: componentName$3
 	})
 );
 
@@ -2048,9 +2164,9 @@ overrides$2 = `
 	}
 `;
 
-customElements.define(componentName$2, PasswordField);
+customElements.define(componentName$3, PasswordField);
 
-const componentName$1 = getComponentName('switch-toggle');
+const componentName$2 = getComponentName('switch-toggle');
 
 let overrides$1 = ``;
 
@@ -2070,7 +2186,7 @@ const SwitchToggle = compose(
 		wrappedEleName: 'vaadin-checkbox',
 		style: () => overrides$1,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$1
+		componentName: componentName$2
 	})
 );
 
@@ -2128,11 +2244,11 @@ overrides$1 = `
 	}
 `;
 
-customElements.define(componentName$1, SwitchToggle);
+customElements.define(componentName$2, SwitchToggle);
 
-const componentName = getComponentName('text-area');
+const componentName$1 = getComponentName('text-area');
 
-const selectors = {
+const selectors$1 = {
 	label: '::part(label)',
 	input: '::part(input-field)',
 	required: '::part(required-indicator)::after',
@@ -2145,16 +2261,16 @@ const TextArea = compose(
 	createStyleMixin({
 		mappings: {
 			resize: { selector: '> textarea' },
-			color: { selector: selectors.label },
+			color: { selector: selectors$1.label },
 			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 },
-			outline: { selector: selectors.input },
-			outlineOffset: { selector: selectors.input }
+			width: { selector: selectors$1.host },
+			backgroundColor: { selector: selectors$1.input },
+			borderWidth: { selector: selectors$1.input },
+			borderStyle: { selector: selectors$1.input },
+			borderColor: { selector: selectors$1.input },
+			borderRadius: { selector: selectors$1.input },
+			outline: { selector: selectors$1.input },
+			outlineOffset: { selector: selectors$1.input }
 		}
 	}),
 	draggableMixin,
@@ -2166,7 +2282,7 @@ const TextArea = compose(
 		wrappedEleName: 'vaadin-text-area',
 		style: () => overrides,
 		excludeAttrsSync: ['tabindex'],
-		componentName
+		componentName: componentName$1
 	})
 );
 
@@ -2192,7 +2308,7 @@ overrides = `
 	}	
 `;
 
-customElements.define(componentName, TextArea);
+customElements.define(componentName$1, TextArea);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -2238,9 +2354,9 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 		// this allows us to generate those themes under different sections
 		// if the theme has root level attribute that starts with #
 		// we are generating a new theme
-		let themeName = 'theme';
+		let themeName = BASE_THEME_SECTION;
 
-		if (restPath[0] && restPath[0].startsWith('#')) {
+		if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
 			themeName = restPath.shift();
 		}
 
@@ -2466,7 +2582,7 @@ var globals = {
 };
 
 const globalRefs$7 = getThemeRefs(globals);
-const vars$c = Button.cssVarList;
+const vars$d = Button.cssVarList;
 
 const mode = {
 	primary: globalRefs$7.colors.primary,
@@ -2476,83 +2592,83 @@ const mode = {
 	surface: globalRefs$7.colors.surface
 };
 
-const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$h);
+const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$i);
 
 const button = {
 	...helperTheme$2,
-	[vars$c.width]: 'fit-content',
+	[vars$d.width]: 'fit-content',
 	size: {
 		xs: {
-			[vars$c.height]: '10px',
-			[vars$c.fontSize]: '10px',
-			[vars$c.padding]: `0 ${globalRefs$7.spacing.xs}`
+			[vars$d.height]: '10px',
+			[vars$d.fontSize]: '10px',
+			[vars$d.padding]: `0 ${globalRefs$7.spacing.xs}`
 		},
 		sm: {
-			[vars$c.height]: '20px',
-			[vars$c.fontSize]: '10px',
-			[vars$c.padding]: `0 ${globalRefs$7.spacing.sm}`
+			[vars$d.height]: '20px',
+			[vars$d.fontSize]: '10px',
+			[vars$d.padding]: `0 ${globalRefs$7.spacing.sm}`
 		},
 		md: {
-			[vars$c.height]: '30px',
-			[vars$c.fontSize]: '14px',
-			[vars$c.padding]: `0 ${globalRefs$7.spacing.md}`
+			[vars$d.height]: '30px',
+			[vars$d.fontSize]: '14px',
+			[vars$d.padding]: `0 ${globalRefs$7.spacing.md}`
 		},
 		lg: {
-			[vars$c.height]: '40px',
-			[vars$c.fontSize]: '20px',
-			[vars$c.padding]: `0 ${globalRefs$7.spacing.lg}`
+			[vars$d.height]: '40px',
+			[vars$d.fontSize]: '20px',
+			[vars$d.padding]: `0 ${globalRefs$7.spacing.lg}`
 		},
 		xl: {
-			[vars$c.height]: '50px',
-			[vars$c.fontSize]: '25px',
-			[vars$c.padding]: `0 ${globalRefs$7.spacing.xl}`
+			[vars$d.height]: '50px',
+			[vars$d.fontSize]: '25px',
+			[vars$d.padding]: `0 ${globalRefs$7.spacing.xl}`
 		}
 	},
 
-	[vars$c.borderRadius]: globalRefs$7.radius.lg,
-	[vars$c.cursor]: 'pointer',
-	[vars$c.borderWidth]: '2px',
-	[vars$c.borderStyle]: 'solid',
-	[vars$c.borderColor]: 'transparent',
+	[vars$d.borderRadius]: globalRefs$7.radius.lg,
+	[vars$d.cursor]: 'pointer',
+	[vars$d.borderWidth]: '2px',
+	[vars$d.borderStyle]: 'solid',
+	[vars$d.borderColor]: 'transparent',
 
 	_fullWidth: {
-		[vars$c.width]: '100%'
+		[vars$d.width]: '100%'
 	},
 	_loading: {
-		[vars$c.cursor]: 'wait'
+		[vars$d.cursor]: 'wait'
 	},
 
 	variant: {
 		contained: {
-			[vars$c.color]: helperRefs$2.contrast,
-			[vars$c.backgroundColor]: helperRefs$2.main,
+			[vars$d.color]: helperRefs$2.contrast,
+			[vars$d.backgroundColor]: helperRefs$2.main,
 			_hover: {
-				[vars$c.backgroundColor]: helperRefs$2.dark
+				[vars$d.backgroundColor]: helperRefs$2.dark
 			},
 			_loading: {
-				[vars$c.backgroundColor]: helperRefs$2.main
+				[vars$d.backgroundColor]: helperRefs$2.main
 			}
 		},
 		outline: {
-			[vars$c.color]: helperRefs$2.main,
-			[vars$c.borderColor]: helperRefs$2.main,
+			[vars$d.color]: helperRefs$2.main,
+			[vars$d.borderColor]: helperRefs$2.main,
 			_hover: {
-				[vars$c.color]: helperRefs$2.dark,
-				[vars$c.borderColor]: helperRefs$2.dark,
+				[vars$d.color]: helperRefs$2.dark,
+				[vars$d.borderColor]: helperRefs$2.dark,
 				_error: {
-					[vars$c.color]: helperRefs$2.error
+					[vars$d.color]: helperRefs$2.error
 				}
 			}
 		},
 		link: {
-			[vars$c.color]: helperRefs$2.main,
-			[vars$c.padding]: 0,
-			[vars$c.margin]: 0,
-			[vars$c.lineHeight]: helperRefs$2.height,
-			[vars$c.borderRadius]: 0,
+			[vars$d.color]: helperRefs$2.main,
+			[vars$d.padding]: 0,
+			[vars$d.margin]: 0,
+			[vars$d.lineHeight]: helperRefs$2.height,
+			[vars$d.borderRadius]: 0,
 			_hover: {
-				[vars$c.color]: helperRefs$2.main,
-				[vars$c.textDecoration]: 'underline'
+				[vars$d.color]: helperRefs$2.main,
+				[vars$d.textDecoration]: 'underline'
 			}
 		}
 	}
@@ -2560,7 +2676,7 @@ const button = {
 
 const globalRefs$6 = getThemeRefs(globals);
 
-const vars$b = TextField.cssVarList;
+const vars$c = TextField.cssVarList;
 
 const textField = (vars) => ({
 	size: {
@@ -2626,13 +2742,13 @@ const textField = (vars) => ({
 	}
 });
 
-var textField$1 = textField(vars$b);
+var textField$1 = textField(vars$c);
 
-const vars$a = PasswordField.cssVarList;
+const vars$b = PasswordField.cssVarList;
 
 const passwordField = {
-	...textField(vars$a),
-	[vars$a.revealCursor]: 'pointer'
+	...textField(vars$b),
+	[vars$b.revealCursor]: 'pointer'
 };
 
 const numberField = {
@@ -2644,57 +2760,57 @@ const emailField = {
 };
 
 const globalRefs$5 = getThemeRefs(globals);
-const vars$9 = TextArea.cssVarList;
+const vars$a = TextArea.cssVarList;
 
 const textArea = {
-	[vars$9.width]: '100%',
-	[vars$9.color]: globalRefs$5.colors.primary.main,
-	[vars$9.backgroundColor]: globalRefs$5.colors.surface.light,
-	[vars$9.resize]: 'vertical',
+	[vars$a.width]: '100%',
+	[vars$a.color]: globalRefs$5.colors.primary.main,
+	[vars$a.backgroundColor]: globalRefs$5.colors.surface.light,
+	[vars$a.resize]: 'vertical',
 
-	[vars$9.borderRadius]: globalRefs$5.radius.sm,
-	[vars$9.borderWidth]: '1px',
-	[vars$9.borderStyle]: 'solid',
-	[vars$9.borderColor]: 'transparent',
+	[vars$a.borderRadius]: globalRefs$5.radius.sm,
+	[vars$a.borderWidth]: '1px',
+	[vars$a.borderStyle]: 'solid',
+	[vars$a.borderColor]: 'transparent',
 
 	_bordered: {
-		[vars$9.borderColor]: globalRefs$5.colors.surface.main
+		[vars$a.borderColor]: globalRefs$5.colors.surface.main
 	},
 
 	_focused: {
-		[vars$9.outline]: `2px solid ${globalRefs$5.colors.surface.main}`
+		[vars$a.outline]: `2px solid ${globalRefs$5.colors.surface.main}`
 	},
 
 	_fullWidth: {
-		[vars$9.width]: '100%'
+		[vars$a.width]: '100%'
 	},
 
 	_disabled: {
-		[vars$9.cursor]: 'not-allowed'
+		[vars$a.cursor]: 'not-allowed'
 	},
 
 	_invalid: {
-		[vars$9.outline]: `2px solid ${globalRefs$5.colors.error.main}`
+		[vars$a.outline]: `2px solid ${globalRefs$5.colors.error.main}`
 	}
 };
 
-const vars$8 = Checkbox.cssVarList;
+const vars$9 = Checkbox.cssVarList;
 
 const checkbox = {
-	[vars$8.cursor]: 'pointer',
-	[vars$8.width]: 'fit-content'
+	[vars$9.cursor]: 'pointer',
+	[vars$9.width]: 'fit-content'
 };
 
-const vars$7 = SwitchToggle.cssVarList;
+const vars$8 = SwitchToggle.cssVarList;
 
 const swtichToggle = {
-	[vars$7.width]: '70px',
-	[vars$7.cursor]: [{}, { selector: '> label' }]
+	[vars$8.width]: '70px',
+	[vars$8.cursor]: [{}, { selector: '> label' }]
 };
 
 const globalRefs$4 = getThemeRefs(globals);
 
-const vars$6 = Container.cssVarList;
+const vars$7 = Container.cssVarList;
 
 const verticalAlignment = {
 	start: { verticalAlignment: 'start' },
@@ -2717,31 +2833,31 @@ const [helperTheme$1, helperRefs$1, helperVars] =
 
 const container = {
 	...helperTheme$1,
-	[vars$6.width]: '100%',
+	[vars$7.width]: '100%',
 	verticalPadding: {
-		sm: { [vars$6.verticalPadding]: '5px' },
-		md: { [vars$6.verticalPadding]: '10px' },
-		lg: { [vars$6.verticalPadding]: '20px' },
+		sm: { [vars$7.verticalPadding]: '5px' },
+		md: { [vars$7.verticalPadding]: '10px' },
+		lg: { [vars$7.verticalPadding]: '20px' },
 	},
 	horizontalPadding: {
-		sm: { [vars$6.horizontalPadding]: '5px' },
-		md: { [vars$6.horizontalPadding]: '10px' },
-		lg: { [vars$6.horizontalPadding]: '20px' },
+		sm: { [vars$7.horizontalPadding]: '5px' },
+		md: { [vars$7.horizontalPadding]: '10px' },
+		lg: { [vars$7.horizontalPadding]: '20px' },
 	},
 	direction: {
 		row: {
-			[vars$6.flexDirection]: 'row',
-			[vars$6.alignItems]: helperRefs$1.verticalAlignment,
-			[vars$6.justifyContent]: helperRefs$1.horizontalAlignment,
+			[vars$7.flexDirection]: 'row',
+			[vars$7.alignItems]: helperRefs$1.verticalAlignment,
+			[vars$7.justifyContent]: helperRefs$1.horizontalAlignment,
 			horizontalAlignment: {
 				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
 			}
 		},
 
 		column: {
-			[vars$6.flexDirection]: 'column',
-			[vars$6.alignItems]: helperRefs$1.horizontalAlignment,
-			[vars$6.justifyContent]: helperRefs$1.verticalAlignment,
+			[vars$7.flexDirection]: 'column',
+			[vars$7.alignItems]: helperRefs$1.horizontalAlignment,
+			[vars$7.justifyContent]: helperRefs$1.verticalAlignment,
 			verticalAlignment: {
 				spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
 			}
@@ -2750,214 +2866,214 @@ const container = {
 
 	spaceBetween: {
 		sm: {
-			[vars$6.gap]: '10px'
+			[vars$7.gap]: '10px'
 		},
 		md: {
-			[vars$6.gap]: '20px'
+			[vars$7.gap]: '20px'
 		},
 		lg: {
-			[vars$6.gap]: '30px'
+			[vars$7.gap]: '30px'
 		}
 	},
 
 	shadow: {
 		sm: {
-			[vars$6.boxShadow]: `${globalRefs$4.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$4.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
+			[vars$7.boxShadow]: `${globalRefs$4.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$4.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
 		},
 		md: {
-			[vars$6.boxShadow]: `${globalRefs$4.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$4.shadow.narrow.md} ${helperRefs$1.shadowColor}`
+			[vars$7.boxShadow]: `${globalRefs$4.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$4.shadow.narrow.md} ${helperRefs$1.shadowColor}`
 		},
 		lg: {
-			[vars$6.boxShadow]: `${globalRefs$4.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$4.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
+			[vars$7.boxShadow]: `${globalRefs$4.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$4.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
 		},
 		xl: {
-			[vars$6.boxShadow]: `${globalRefs$4.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$4.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
+			[vars$7.boxShadow]: `${globalRefs$4.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$4.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
 		},
 		'2xl': {
 			[helperVars.shadowColor]: '#00000050',
-			[vars$6.boxShadow]: `${globalRefs$4.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
+			[vars$7.boxShadow]: `${globalRefs$4.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
 		},
 	},
 
 	borderRadius: {
 		sm: {
-			[vars$6.borderRadius]: globalRefs$4.radius.sm
+			[vars$7.borderRadius]: globalRefs$4.radius.sm
 		},
 		md: {
-			[vars$6.borderRadius]: globalRefs$4.radius.md
+			[vars$7.borderRadius]: globalRefs$4.radius.md
 		},
 		lg: {
-			[vars$6.borderRadius]: globalRefs$4.radius.lg
+			[vars$7.borderRadius]: globalRefs$4.radius.lg
 		},
 	}
 };
 
-const vars$5 = Logo.cssVarList;
+const vars$6 = Logo.cssVarList;
 
 const logo = {
-	[vars$5.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
+	[vars$6.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
 };
 
 const globalRefs$3 = getThemeRefs(globals);
 
-const vars$4 = Text.cssVarList;
+const vars$5 = Text.cssVarList;
 
 const text = {
-	[vars$4.lineHeight]: '1em',
-	[vars$4.display]: 'inline-block',
-	[vars$4.textAlign]: 'left',
-	[vars$4.color]: globalRefs$3.colors.surface.dark,
+	[vars$5.lineHeight]: '1em',
+	[vars$5.display]: 'inline-block',
+	[vars$5.textAlign]: 'left',
+	[vars$5.color]: globalRefs$3.colors.surface.dark,
 	variant: {
 		h1: {
-			[vars$4.fontSize]: globalRefs$3.typography.h1.size,
-			[vars$4.fontWeight]: globalRefs$3.typography.h1.weight,
-			[vars$4.fontFamily]: globalRefs$3.typography.h1.font
+			[vars$5.fontSize]: globalRefs$3.typography.h1.size,
+			[vars$5.fontWeight]: globalRefs$3.typography.h1.weight,
+			[vars$5.fontFamily]: globalRefs$3.typography.h1.font
 		},
 		h2: {
-			[vars$4.fontSize]: globalRefs$3.typography.h2.size,
-			[vars$4.fontWeight]: globalRefs$3.typography.h2.weight,
-			[vars$4.fontFamily]: globalRefs$3.typography.h2.font
+			[vars$5.fontSize]: globalRefs$3.typography.h2.size,
+			[vars$5.fontWeight]: globalRefs$3.typography.h2.weight,
+			[vars$5.fontFamily]: globalRefs$3.typography.h2.font
 		},
 		h3: {
-			[vars$4.fontSize]: globalRefs$3.typography.h3.size,
-			[vars$4.fontWeight]: globalRefs$3.typography.h3.weight,
-			[vars$4.fontFamily]: globalRefs$3.typography.h3.font
+			[vars$5.fontSize]: globalRefs$3.typography.h3.size,
+			[vars$5.fontWeight]: globalRefs$3.typography.h3.weight,
+			[vars$5.fontFamily]: globalRefs$3.typography.h3.font
 		},
 		subtitle1: {
-			[vars$4.fontSize]: globalRefs$3.typography.subtitle1.size,
-			[vars$4.fontWeight]: globalRefs$3.typography.subtitle1.weight,
-			[vars$4.fontFamily]: globalRefs$3.typography.subtitle1.font
+			[vars$5.fontSize]: globalRefs$3.typography.subtitle1.size,
+			[vars$5.fontWeight]: globalRefs$3.typography.subtitle1.weight,
+			[vars$5.fontFamily]: globalRefs$3.typography.subtitle1.font
 		},
 		subtitle2: {
-			[vars$4.fontSize]: globalRefs$3.typography.subtitle2.size,
-			[vars$4.fontWeight]: globalRefs$3.typography.subtitle2.weight,
-			[vars$4.fontFamily]: globalRefs$3.typography.subtitle2.font
+			[vars$5.fontSize]: globalRefs$3.typography.subtitle2.size,
+			[vars$5.fontWeight]: globalRefs$3.typography.subtitle2.weight,
+			[vars$5.fontFamily]: globalRefs$3.typography.subtitle2.font
 		},
 		body1: {
-			[vars$4.fontSize]: globalRefs$3.typography.body1.size,
-			[vars$4.fontWeight]: globalRefs$3.typography.body1.weight,
-			[vars$4.fontFamily]: globalRefs$3.typography.body1.font
+			[vars$5.fontSize]: globalRefs$3.typography.body1.size,
+			[vars$5.fontWeight]: globalRefs$3.typography.body1.weight,
+			[vars$5.fontFamily]: globalRefs$3.typography.body1.font
 		},
 		body2: {
-			[vars$4.fontSize]: globalRefs$3.typography.body2.size,
-			[vars$4.fontWeight]: globalRefs$3.typography.body2.weight,
-			[vars$4.fontFamily]: globalRefs$3.typography.body2.font
+			[vars$5.fontSize]: globalRefs$3.typography.body2.size,
+			[vars$5.fontWeight]: globalRefs$3.typography.body2.weight,
+			[vars$5.fontFamily]: globalRefs$3.typography.body2.font
 		}
 	},
 	mode: {
 		primary: {
-			[vars$4.color]: globalRefs$3.colors.primary.main
+			[vars$5.color]: globalRefs$3.colors.primary.main
 		},
 		secondary: {
-			[vars$4.color]: globalRefs$3.colors.secondary.main
+			[vars$5.color]: globalRefs$3.colors.secondary.main
 		},
 		error: {
-			[vars$4.color]: globalRefs$3.colors.error.main
+			[vars$5.color]: globalRefs$3.colors.error.main
 		},
 		success: {
-			[vars$4.color]: globalRefs$3.colors.success.main
+			[vars$5.color]: globalRefs$3.colors.success.main
 		}
 	},
 	textAlign: {
-		right: { [vars$4.textAlign]: 'right' },
-		left: { [vars$4.textAlign]: 'left' },
-		center: { [vars$4.textAlign]: 'center' }
+		right: { [vars$5.textAlign]: 'right' },
+		left: { [vars$5.textAlign]: 'left' },
+		center: { [vars$5.textAlign]: 'center' }
 	},
 	_fullWidth: {
-		[vars$4.width]: '100%',
-		[vars$4.display]: 'block'
+		[vars$5.width]: '100%',
+		[vars$5.display]: 'block'
 	},
 	_italic: {
-		[vars$4.fontStyle]: 'italic'
+		[vars$5.fontStyle]: 'italic'
 	},
 	_uppercase: {
-		[vars$4.textTransform]: 'uppercase'
+		[vars$5.textTransform]: 'uppercase'
 	},
 	_lowercase: {
-		[vars$4.textTransform]: 'lowercase'
+		[vars$5.textTransform]: 'lowercase'
 	}
 };
 
 const globalRefs$2 = getThemeRefs(globals);
-const vars$3 = Link.cssVarList;
+const vars$4 = Link.cssVarList;
 
 const link = {
-	[vars$3.cursor]: 'pointer',
-	[vars$3.borderBottomWidth]: '2px',
-	[vars$3.borderBottomStyle]: 'solid',
-	[vars$3.borderBottomColor]: 'transparent',
-	[vars$3.color]: globalRefs$2.colors.primary.main,
+	[vars$4.cursor]: 'pointer',
+	[vars$4.borderBottomWidth]: '2px',
+	[vars$4.borderBottomStyle]: 'solid',
+	[vars$4.borderBottomColor]: 'transparent',
+	[vars$4.color]: globalRefs$2.colors.primary.main,
 
 	_hover: {
-		[vars$3.borderBottomColor]: globalRefs$2.colors.primary.main
+		[vars$4.borderBottomColor]: globalRefs$2.colors.primary.main
 	},
 
 	textAlign: {
-		right: { [vars$3.textAlign]: 'right' },
-		left: { [vars$3.textAlign]: 'left' },
-		center: { [vars$3.textAlign]: 'center' }
+		right: { [vars$4.textAlign]: 'right' },
+		left: { [vars$4.textAlign]: 'left' },
+		center: { [vars$4.textAlign]: 'center' }
 	},
 
 	_fullWidth: {
-		[vars$3.width]: '100%'
+		[vars$4.width]: '100%'
 	},
 
 	mode: {
 		primary: {
-			[vars$3.color]: globalRefs$2.colors.primary.main,
+			[vars$4.color]: globalRefs$2.colors.primary.main,
 			_hover: {
-				[vars$3.borderBottomColor]: globalRefs$2.colors.primary.main
+				[vars$4.borderBottomColor]: globalRefs$2.colors.primary.main
 			}
 		},
 		secondary: {
-			[vars$3.color]: globalRefs$2.colors.secondary.main,
+			[vars$4.color]: globalRefs$2.colors.secondary.main,
 			_hover: {
-				[vars$3.borderBottomColor]: globalRefs$2.colors.secondary.main
+				[vars$4.borderBottomColor]: globalRefs$2.colors.secondary.main
 			}
 		},
 		error: {
-			[vars$3.color]: globalRefs$2.colors.error.main,
+			[vars$4.color]: globalRefs$2.colors.error.main,
 			_hover: {
-				[vars$3.borderBottomColor]: globalRefs$2.colors.error.main
+				[vars$4.borderBottomColor]: globalRefs$2.colors.error.main
 			}
 		},
 		success: {
-			[vars$3.color]: globalRefs$2.colors.success.main,
+			[vars$4.color]: globalRefs$2.colors.success.main,
 			_hover: {
-				[vars$3.borderBottomColor]: globalRefs$2.colors.success.main
+				[vars$4.borderBottomColor]: globalRefs$2.colors.success.main
 			}
 		}
 	}
 };
 
-const vars$2 = Divider.cssVarList;
+const vars$3 = Divider.cssVarList;
 
 const thickness = '2px';
 const textPaddingSize = '10px';
-const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$b);
+const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$c);
 
 
 const divider = {
 	...helperTheme,
-	[vars$2.alignItems]: 'center',
-	[vars$2.dividerHeight]: helperRefs.thickness,
-	[vars$2.backgroundColor]: 'currentColor',
-	[vars$2.opacity]: '0.2',
-	[vars$2.textPadding]: `0 ${helperRefs.textPaddingSize}`,
-	[vars$2.width]: '100%',
-	[vars$2.flexDirection]: 'row',
-	[vars$2.alignSelf]: 'strech',
-	[vars$2.textWidth]: 'fit-content',
-	[vars$2.maxTextWidth]: 'calc(100% - 100px)',
+	[vars$3.alignItems]: 'center',
+	[vars$3.dividerHeight]: helperRefs.thickness,
+	[vars$3.backgroundColor]: 'currentColor',
+	[vars$3.opacity]: '0.2',
+	[vars$3.textPadding]: `0 ${helperRefs.textPaddingSize}`,
+	[vars$3.width]: '100%',
+	[vars$3.flexDirection]: 'row',
+	[vars$3.alignSelf]: 'strech',
+	[vars$3.textWidth]: 'fit-content',
+	[vars$3.maxTextWidth]: 'calc(100% - 100px)',
 	_vertical: {
-		[vars$2.padding]: `0 calc(${thickness} * 3)`,
-		[vars$2.width]: 'fit-content',
-		[vars$2.textPadding]: `${helperRefs.textPaddingSize} 0`,
-		[vars$2.flexDirection]: 'column',
-		[vars$2.minHeight]: '200px',
-		[vars$2.textWidth]: 'fit-content',
-		[vars$2.dividerWidth]: helperRefs.thickness,
-		[vars$2.maxTextWidth]: '100%',
+		[vars$3.padding]: `0 calc(${thickness} * 3)`,
+		[vars$3.width]: 'fit-content',
+		[vars$3.textPadding]: `${helperRefs.textPaddingSize} 0`,
+		[vars$3.flexDirection]: 'column',
+		[vars$3.minHeight]: '200px',
+		[vars$3.textWidth]: 'fit-content',
+		[vars$3.dividerWidth]: helperRefs.thickness,
+		[vars$3.maxTextWidth]: '100%',
 	}
 };
 
@@ -2967,102 +3083,227 @@ const passcode = {
 
 const globalRefs$1 = getThemeRefs(globals);
 
-const vars$1 = LoaderLinear.cssVarList;
+const vars$2 = LoaderLinear.cssVarList;
 
 const loaderLinear = {
-	[vars$1.display]: 'inline-block',
-	[vars$1.barColor]: globalRefs$1.colors.surface.contrast,
-	[vars$1.barWidth]: '20%',
-	[vars$1.surfaceColor]: globalRefs$1.colors.surface.main,
-	[vars$1.borderRadius]: '4px',
-	[vars$1.animationDuration]: '2s',
-	[vars$1.animationTimingFunction]: 'linear',
-	[vars$1.animationIterationCount]: 'infinite',
-	[vars$1.width]: '100%',
+	[vars$2.display]: 'inline-block',
+	[vars$2.barColor]: globalRefs$1.colors.surface.contrast,
+	[vars$2.barWidth]: '20%',
+	[vars$2.surfaceColor]: globalRefs$1.colors.surface.main,
+	[vars$2.borderRadius]: '4px',
+	[vars$2.animationDuration]: '2s',
+	[vars$2.animationTimingFunction]: 'linear',
+	[vars$2.animationIterationCount]: 'infinite',
+	[vars$2.width]: '100%',
 	size: {
 		xs: {
-			[vars$1.height]: '6px'
+			[vars$2.height]: '6px'
 		},
 		sm: {
-			[vars$1.height]: '8px'
+			[vars$2.height]: '8px'
 		},
 		md: {
-			[vars$1.height]: '10px'
+			[vars$2.height]: '10px'
 		},
 		lg: {
-			[vars$1.height]: '12px'
+			[vars$2.height]: '12px'
 		},
 		xl: {
-			[vars$1.height]: '14px'
+			[vars$2.height]: '14px'
 		}
 	},
 	mode: {
 		primary: {
-			[vars$1.barColor]: globalRefs$1.colors.primary.main
+			[vars$2.barColor]: globalRefs$1.colors.primary.main
 		},
 		secondary: {
-			[vars$1.barColor]: globalRefs$1.colors.secondary.main
+			[vars$2.barColor]: globalRefs$1.colors.secondary.main
 		}
 	},
 	_hidden: {
-		[vars$1.display]: 'none'
+		[vars$2.display]: 'none'
 	}
 };
 
 const globalRefs = getThemeRefs(globals);
 
-const vars = LoaderRadial.cssVarList;
+const vars$1 = LoaderRadial.cssVarList;
 
 const loaderRadial = {
-	[vars.display]: 'inline-block',
-	[vars.color]: globalRefs.colors.surface.contrast,
-	[vars.animationDuration]: '2s',
-	[vars.animationTimingFunction]: 'linear',
-	[vars.animationIterationCount]: 'infinite',
-	[vars.spinnerStyle]: 'solid',
-	[vars.spinnerWidth]: '4px',
-	[vars.spinnerRadius]: '50%',
-	[vars.spinnerTopColor]: 'currentColor',
-	[vars.spinnerBottomColor]: 'transparent',
-	[vars.spinnerRightColor]: 'currentColor',
-	[vars.spinnerLeftColor]: 'transparent',
+	[vars$1.display]: 'inline-block',
+	[vars$1.color]: globalRefs.colors.surface.contrast,
+	[vars$1.animationDuration]: '2s',
+	[vars$1.animationTimingFunction]: 'linear',
+	[vars$1.animationIterationCount]: 'infinite',
+	[vars$1.spinnerStyle]: 'solid',
+	[vars$1.spinnerWidth]: '4px',
+	[vars$1.spinnerRadius]: '50%',
+	[vars$1.spinnerTopColor]: 'currentColor',
+	[vars$1.spinnerBottomColor]: 'transparent',
+	[vars$1.spinnerRightColor]: 'currentColor',
+	[vars$1.spinnerLeftColor]: 'transparent',
 	size: {
 		xs: {
-			[vars.width]: '20px',
-			[vars.height]: '20px',
-			[vars.spinnerWidth]: '2px'
+			[vars$1.width]: '20px',
+			[vars$1.height]: '20px',
+			[vars$1.spinnerWidth]: '2px'
 		},
 		sm: {
-			[vars.width]: '30px',
-			[vars.height]: '30px',
-			[vars.spinnerWidth]: '3px'
+			[vars$1.width]: '30px',
+			[vars$1.height]: '30px',
+			[vars$1.spinnerWidth]: '3px'
 		},
 		md: {
-			[vars.width]: '40px',
-			[vars.height]: '40px',
-			[vars.spinnerWidth]: '4px'
+			[vars$1.width]: '40px',
+			[vars$1.height]: '40px',
+			[vars$1.spinnerWidth]: '4px'
 		},
 		lg: {
-			[vars.width]: '60px',
-			[vars.height]: '60px',
-			[vars.spinnerWidth]: '5px'
+			[vars$1.width]: '60px',
+			[vars$1.height]: '60px',
+			[vars$1.spinnerWidth]: '5px'
 		},
 		xl: {
-			[vars.width]: '80px',
-			[vars.height]: '80px',
-			[vars.spinnerWidth]: '6px'
+			[vars$1.width]: '80px',
+			[vars$1.height]: '80px',
+			[vars$1.spinnerWidth]: '6px'
 		}
 	},
 	mode: {
 		primary: {
-			[vars.color]: globalRefs.colors.primary.main
+			[vars$1.color]: globalRefs.colors.primary.main
 		},
 		secondary: {
-			[vars.color]: globalRefs.colors.secondary.main
+			[vars$1.color]: globalRefs.colors.secondary.main
 		}
 	},
 	_hidden: {
-		[vars.display]: 'none'
+		[vars$1.display]: 'none'
+	}
+};
+
+const componentName = getComponentName('combo-box');
+
+const selectors = {
+	input: { selector: '::part(input-field)' },
+	toggle: { selector: '::part(toggle-button)' }
+};
+
+const { input, toggle } = selectors;
+
+const borderRadius = {
+	topRightRadius: {
+		selector: input.selector,
+		property: 'border-top-right-radius'
+	},
+	bottomRightRadius: {
+		selector: input.selector,
+		property: 'border-bottom-right-radius'
+	},
+	topLeftRadius: {
+		selector: input.selector,
+		property: 'border-top-left-radius'
+	},
+	bottomLeftRadius: {
+		selector: input.selector,
+		property: 'border-bottom-left-radius'
+	}
+};
+
+const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclass {
+
+	// vaadin api is to set props on their combo box node, 
+	// in order to avoid it, we are passing the children of this component
+	// to the items & renderer props, so it will be used as the combo box items
+	#onChildrenChange() {
+		const baseElement = this.shadowRoot.querySelector(this.baseSelector);
+		const items = Array.from(this.children);
+
+		// we want the data-name attribute to be accessible as an object attribute
+		baseElement.items = items.map((node) =>
+			Object.defineProperty(node, 'data-name', {
+				value: node.getAttribute('data-name')
+			})
+		);
+
+		baseElement.renderer = (root, combo, model) => {
+			root.innerHTML = items[model.index].outerHTML;
+		};
+	}
+
+	connectedCallback() {
+		super.connectedCallback?.();
+
+		observeChildren(this, this.#onChildrenChange.bind(this));
+	}
+};
+
+const ComboBox = compose(
+	createStyleMixin({
+		mappings: {
+			...borderRadius,
+			backgroundColor: input,
+			width: input,
+			color: input,
+			padding: input,
+			borderColor: input,
+			borderStyle: input,
+			borderWidth: input,
+			cursor: toggle,
+			height: input,
+		}
+	}),
+	draggableMixin,
+	portalMixin({
+		name: 'overlay',
+		selector: 'vaadin-combo-box-scroller',
+		mappings: {
+			border: { selector: () => '::slotted(*)' },
+			backgroundColor: {},
+		}
+	}),
+	proxyInputMixin,
+	componentNameValidationMixin,
+	ComboBoxMixin
+)(
+	createProxy({
+		slots: ['prefix'],
+		wrappedEleName: 'vaadin-combo-box',
+		style: () => `
+		:host {
+			-webkit-mask-image: none;
+		}
+		`,
+		excludeAttrsSync: ['tabindex'],
+		includeAttrsSync: [],
+		componentName,
+		includeForwardProps: ['items', 'renderer']
+	})
+);
+
+getThemeRefs(globals);
+
+const vars = ComboBox.cssVarList;
+
+const comboBox = {
+	...textField(ComboBox.cssVarList),
+	size: {
+		xs: {
+			[vars.width]: '30px'
+		}
+	},
+	[vars.borderColor]: 'green',
+	[vars.borderWidth]: '0',
+	[vars.cursor]: 'pointer',
+	[vars.padding]: '0',
+
+	'@overlay': {
+		[vars.overlayBackgroundColor] : 'red',
+		[vars.overlayBorder]: '3px solid blue',
+
+		_hover: {
+			[vars.overlayBackgroundColor] : 'blue',
+		}
 	}
 };
 
@@ -3082,7 +3323,8 @@ var components = {
 	divider,
 	passcode,
 	loaderRadial,
-	loaderLinear
+	loaderLinear,
+	comboBox
 };
 
 var index = { globals, components };